chore: initial commit

.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

.github/workflows/release-please.yml

@@ -0,0 +1,30 @@
+on:
+  push:
+    branches:
+      - main
+name: release-please
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        id: release
+        with:
+          release-type: node
+          package-name: release-please-action
+      # The logic below handles the npm publication:
+      - uses: actions/checkout@v2
+        if: ${{ steps.release.outputs.release_created }}
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm ci
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm run deploy
+        if: ${{ steps.release.outputs.release_created }}

.github/workflows/test-on-pr-branch.yml

@@ -0,0 +1,23 @@
+name: Test on PR branch
+on: pull_request
+
+jobs:
+  test-on-pr-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: npm run-script test

.github/workflows/test.yml

@@ -0,0 +1,53 @@
+name: Test
+on: push
+
+jobs:
+  unit:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run unit tests
+        run: npm run-script test:unit
+  visual:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run visual test
+        run: npm run-script test:visual
+
+      - name: Update screenshots
+        if: failure()
+        run: npm run test:update
+
+      - name: Commit changes
+        if: failure()
+        uses: EndBug/add-and-commit@v9
+        with:
+          message: 'ci: update screenshots'
+          add: 'screenshots'

.gitignore

@@ -0,0 +1,28 @@
+## editors
+/.idea
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## testing
+/coverage/
+/visual-coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/dist/
+/out-tsc/
+
+storybook-static
+custom-elements.json
+
+# unpacked demo data
+tree.json

.storybook/main.js

@@ -0,0 +1,15 @@
+const copy = require('rollup-plugin-copy');
+
+module.exports = {
+  stories: ['../dist/**/*.book.{js,md,mdx}'],
+  rollupConfig(config) {
+    // add a new plugin to the build
+    config.plugins.push(copy({
+      targets: [
+        { src: 'tree.json', dest: 'storybook-static' },
+      ]
+    }));
+
+    return config;
+  },
+};

.storybook/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

.storybook/preview-body.html

@@ -0,0 +1,12 @@
+<script type="module">
+  async function loadTreeData() {
+  await new Promise(res => setTimeout(res, 2500));
+const tree = await fetch('./tree.json').then(r => r.json());
+const oscdTree = document.querySelector('oscd-tree-grid');
+await oscdTree.updateComplete;
+
+oscdTree.tree = tree;
+}
+
+document.body.onload = loadTreeData;
+</script>

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Roboto:wght@300;400;500&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block">

.storybook/server.mjs

@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  ...baseConfig,
+  open: '/',
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});

README.foot.md

@@ -0,0 +1,2 @@
+
+© 2023 OMICRON electronics GmbH

README.head.md

@@ -0,0 +1,49 @@
+# \<oscd-tree-grid>
+
+## Installation
+
+```bash
+npm i oscd-tree-grid
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'oscd-tree-grid';
+</script>
+
+<oscd-tree-grid filterLabel="Regular Expression"></oscd-tree-grid>
+
+<script type="module">
+  const oscdTree = document.querySelector('oscd-tree-grid');
+  await oscdTree.updateComplete;
+
+  const tree = await fetch('/tree.json').then(r => r.json());
+
+  oscdTree.tree = tree;
+</script>
+```
+
+## TypeScript types
+
+For use with [TypeScript](https://www.typescriptlang.org/), `oscd-tree-grid`
+exports the following types:
+
+```ts
+export type TreeSelection = { [name: string]: TreeSelection };
+
+export type Path = string[];
+
+export type TreeNode = {
+  children?: Tree;
+  text?: string;
+  mandatory?: boolean;
+};
+
+export type Tree = Partial<Record<string, TreeNode>>;
+```
+
+> This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc)
+> recommendation.
+

README.md

@@ -0,0 +1,116 @@
+# \<oscd-tree-grid>
+
+## Installation
+
+```bash
+npm i oscd-tree-grid
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'oscd-tree-grid';
+</script>
+
+<oscd-tree-grid filterLabel="Regular Expression"></oscd-tree-grid>
+
+<script type="module">
+  const oscdTree = document.querySelector('oscd-tree-grid');
+  await oscdTree.updateComplete;
+
+  const tree = await fetch('/tree.json').then(r => r.json());
+
+  oscdTree.tree = tree;
+</script>
+```
+
+## TypeScript types
+
+For use with [TypeScript](https://www.typescriptlang.org/), `oscd-tree-grid`
+exports the following types:
+
+```ts
+export type TreeSelection = { [name: string]: TreeSelection };
+
+export type Path = string[];
+
+export type TreeNode = {
+  children?: Tree;
+  text?: string;
+  mandatory?: boolean;
+};
+
+export type Tree = Partial<Record<string, TreeNode>>;
+```
+
+> This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc)
+> recommendation.
+
+
+
+## `oscd-tree-grid.ts`:
+
+### class: `TreeGrid`
+
+#### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+#### Fields
+
+| Name          | Privacy | Type            | Default | Description                                | Inherited From |
+| ------------- | ------- | --------------- | ------- | ------------------------------------------ | -------------- |
+| `tree`        |         | `Tree`          | `{}`    | The \`Tree\` to be selected from           |                |
+| `selection`   |         | `TreeSelection` | `{}`    | Selected rows as \`TreeSelection\`         |                |
+| `paths`       |         | `Path[]`        |         | Selected rows as \`Path\[]\`               |                |
+| `filter`      |         | `string`        |         | Regular expression by which to filter rows |                |
+| `filterLabel` |         | `string`        | `''`    | Filter \`TextField\` label                 |                |
+
+<details><summary>Private API</summary>
+
+#### Fields
+
+| Name          | Privacy | Type                     | Default             | Description | Inherited From |
+| ------------- | ------- | ------------------------ | ------------------- | ----------- | -------------- |
+| `depth`       | private | `number`                 |                     |             |                |
+| `filterUI`    | private | `TextField \| undefined` |                     |             |                |
+| `filterRegex` | private | `RegExp`                 |                     |             |                |
+| `container`   | private | `Element \| undefined`   |                     |             |                |
+| `collapsed`   | private |                          | `new Set<string>()` |             |                |
+
+#### Methods
+
+| Name                   | Privacy | Description | Parameters                          | Return           | Inherited From |
+| ---------------------- | ------- | ----------- | ----------------------------------- | ---------------- | -------------- |
+| `getPaths`             | private |             | `maxLength: number`                 | `Path[]`         |                |
+| `treeNode`             | private |             | `path: Path`                        | `TreeNode`       |                |
+| `rows`                 | private |             |                                     | `Path[]`         |                |
+| `renderCell`           | private |             | `path: Path, previousPath: Path`    | `TemplateResult` |                |
+| `select`               | private |             | `parentPath: Path, clicked: string` | `void`           |                |
+| `selectAll`            | private |             | `clicked: ListItem`                 | `void`           |                |
+| `handleSelected`       | private |             | `event: SingleSelectedEvent`        | `Promise<void>`  |                |
+| `scrollRight`          | private |             |                                     | `Promise<void>`  |                |
+| `renderColumn`         | private |             | `column: (Path \| undefined)[]`     | `TemplateResult` |                |
+| `renderExpandCell`     | private |             | `path: Path`                        | `TemplateResult` |                |
+| `toggleCollapse`       | private |             | `serializedPath: string`            |                  |                |
+| `renderExpandColumn`   | private |             | `rows: Path[]`                      | `TemplateResult` |                |
+| `renderCollapseColumn` | private |             | `rows: Path[]`                      | `TemplateResult` |                |
+| `renderColumns`        | private |             |                                     | `TemplateResult` |                |
+| `renderFilterField`    | private |             |                                     |                  |                |
+
+</details>
+
+<hr/>
+
+### Exports
+
+| Kind | Name       | Declaration | Module            | Package |
+| ---- | ---------- | ----------- | ----------------- | ------- |
+| `js` | `TreeGrid` | TreeGrid    | oscd-tree-grid.ts |         |
+
+
+
+&copy; 2023 OMICRON electronics GmbH

custom-elements-manifest.config.js

@@ -0,0 +1,13 @@
+import { readmePlugin } from 'cem-plugin-readme';
+
+export default {
+  globs: ['*.ts'],
+  exclude: ['**/*.spec.ts', '**/*.visual.ts', '**/*.book.ts'],
+  litelement: true,
+  plugins: [
+    readmePlugin({
+      header: 'README.head.md',
+      footer: 'README.foot.md',
+    }),
+  ]
+}