@digital-realty/ix-tree 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ix-treeivew
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# \<ix-tree>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @digital-realty/ix-tree
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-tree/ix-tree.js';
+</script>
+
+<ix-tree></ix-tree>
+```
+
+### In React
+```html
+<script type="module">
+  import { IxTree } from '@digital-realty/ix-tree/IxTree'
+</script>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/IIxTreeNode.d.ts

@@ -0,0 +1,8 @@
+export interface IIxTreeNode {
+    children?: Array<IIxTreeNode>;
+    expanded: boolean;
+    icon?: string;
+    id: string;
+    label: string;
+    parentNode: IIxTreeNode | null;
+}

package/dist/IIxTreeNode.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IIxTreeNode.js.map

package/dist/IIxTreeNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IIxTreeNode.js","sourceRoot":"","sources":["../src/IIxTreeNode.ts"],"names":[],"mappings":"","sourcesContent":["export interface IIxTreeNode {\n  children?: Array<IIxTreeNode>;\n\n  expanded: boolean;\n\n  icon?: string;\n\n  id: string;\n\n  label: string;\n\n  parentNode: IIxTreeNode | null;\n}\n"]}

package/dist/IxTree.d.ts

@@ -0,0 +1,24 @@
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/theme';
+import { LitElement, TemplateResult } from 'lit';
+import { IIxTreeNode } from './IIxTreeNode.js';
+import './ix-tree-node.js';
+export declare class IxTree extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    ariaLabel: string;
+    rootNode: IIxTreeNode;
+    selectedNodeId: string;
+    _activeItemId: string;
+    _rootNode: IIxTreeNode;
+    _selectedNodeId: string;
+    private setParentNodes;
+    private onTreeNodeClick;
+    private onTreeNodeToggle;
+    private renderNodes;
+    /**
+     * Expand the active tree node and all of its parent nodes.
+     */
+    private expandActiveTreeNode;
+    protected render(): TemplateResult<1>;
+}

package/dist/IxTree.js

@@ -0,0 +1,116 @@
+import { __decorate } from "tslib";
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/theme';
+import { nothing, html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import findNodeById from './find-node-by-id.js';
+import { IxTreeStyles } from './ix-tree-styles.js';
+import './ix-tree-node.js';
+export class IxTree extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.ariaLabel = 'tree';
+        this.selectedNodeId = '';
+        this._activeItemId = '';
+        this._selectedNodeId = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._activeItemId = this.selectedNodeId; // store in state
+        this._selectedNodeId = this.selectedNodeId; // store in state
+        // update the parent nodes on each node in the tree and store the new root node in state
+        const newRootNode = { ...this.rootNode };
+        this.setParentNodes(newRootNode);
+        this._rootNode = newRootNode;
+    }
+    // Set the parent nodes on each node in the tree.
+    // This is needed when we have a selected id and need to expand each parent node to show the selected node.
+    setParentNodes(node) {
+        if (node.children) {
+            node.children.forEach(child => {
+                // eslint-disable-next-line no-param-reassign
+                child.parentNode = node;
+                this.setParentNodes(child);
+            });
+        }
+    }
+    onTreeNodeClick(e) {
+        this.dispatchEvent(new CustomEvent('on-tree-node-selected', {
+            detail: {
+                message: e.detail.message,
+            },
+        }));
+        this._selectedNodeId = e.detail.message.id;
+    }
+    onTreeNodeToggle(e) {
+        const { id } = e.detail.message;
+        const newRootNode = { ...this._rootNode };
+        const nodeToToggle = findNodeById(newRootNode, id);
+        nodeToToggle.expanded = !(nodeToToggle === null || nodeToToggle === void 0 ? void 0 : nodeToToggle.expanded);
+        this._rootNode = newRootNode;
+        this._activeItemId = nodeToToggle.id;
+        this.requestUpdate();
+    }
+    renderNodes(nodes = [], level = 0) {
+        const rendredNodes = [];
+        for (const node of nodes) {
+            const renderedNode = html `<ix-tree-node
+        .isActiveTreeNode=${this._activeItemId === node.id}
+        .isExpanded=${node.expanded}
+        .isSelected=${this._selectedNodeId === node.id}
+        .level=${level}
+        .node=${node}
+        @on-tree-node-click=${this.onTreeNodeClick}
+        @on-tree-node-toggle=${this.onTreeNodeToggle}
+      >
+        ${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}
+      </ix-tree-node>`;
+            rendredNodes.push(renderedNode);
+        }
+        return rendredNodes;
+    }
+    /**
+     * Expand the active tree node and all of its parent nodes.
+     */
+    expandActiveTreeNode() {
+        const nodeToSelect = findNodeById(this._rootNode, this._activeItemId) || this._rootNode;
+        let iteration = 0;
+        const MAX_ITERATIONS = 1000;
+        let node = nodeToSelect.parentNode;
+        while (node && iteration < MAX_ITERATIONS) {
+            node.expanded = true;
+            node = node.parentNode;
+            iteration += 1;
+        }
+    }
+    render() {
+        this.expandActiveTreeNode();
+        return html `<div
+      aria-label=${this.ariaLabel}
+      class="ix-tree-container"
+      role="tree"
+    >
+      ${this.renderNodes(this._rootNode.children, 0)}
+    </div>`;
+    }
+}
+IxTree.styles = [IxTreeStyles];
+__decorate([
+    property()
+], IxTree.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: Object })
+], IxTree.prototype, "rootNode", void 0);
+__decorate([
+    property()
+], IxTree.prototype, "selectedNodeId", void 0);
+__decorate([
+    state()
+], IxTree.prototype, "_activeItemId", void 0);
+__decorate([
+    state()
+], IxTree.prototype, "_rootNode", void 0);
+__decorate([
+    state()
+], IxTree.prototype, "_selectedNodeId", void 0);
+//# sourceMappingURL=IxTree.js.map

package/dist/IxTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxTree.js","sourceRoot":"","sources":["../src/IxTree.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/theme';\nimport { nothing, html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport findNodeById from './find-node-by-id.js';\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\nimport './ix-tree-node.js';\n\nexport class IxTree extends LitElement {\n  static readonly styles = [IxTreeStyles];\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this._activeItemId = this.selectedNodeId; // store in state\n    this._selectedNodeId = this.selectedNodeId; // store in state\n\n    // update the parent nodes on each node in the tree and store the new root node in state\n    const newRootNode = { ...this.rootNode };\n    this.setParentNodes(newRootNode);\n    this._rootNode = newRootNode;\n  }\n\n  @property() ariaLabel: string = 'tree';\n\n  @property({ type: Object }) rootNode!: IIxTreeNode;\n\n  @property() selectedNodeId: string = '';\n\n  @state() _activeItemId: string = '';\n\n  @state() _rootNode!: IIxTreeNode;\n\n  @state() _selectedNodeId: string = '';\n\n  // Set the parent nodes on each node in the tree.\n  // This is needed when we have a selected id and need to expand each parent node to show the selected node.\n  private setParentNodes(node: IIxTreeNode) {\n    if (node.children) {\n      node.children.forEach(child => {\n        // eslint-disable-next-line no-param-reassign\n        child.parentNode = node;\n        this.setParentNodes(child);\n      });\n    }\n  }\n\n  private onTreeNodeClick(e: CustomEvent): void {\n    this.dispatchEvent(\n      new CustomEvent('on-tree-node-selected', {\n        detail: {\n          message: e.detail.message,\n        },\n      })\n    );\n\n    this._selectedNodeId = e.detail.message.id;\n  }\n\n  private onTreeNodeToggle(e: CustomEvent): void {\n    const { id } = e.detail.message;\n\n    const newRootNode = { ...this._rootNode };\n\n    const nodeToToggle = findNodeById(newRootNode, id)!;\n    nodeToToggle.expanded = !nodeToToggle?.expanded;\n    this._rootNode = newRootNode;\n\n    this._activeItemId = nodeToToggle.id;\n\n    this.requestUpdate();\n  }\n\n  private renderNodes(\n    nodes: Array<IIxTreeNode> = [],\n    level: number = 0\n  ): Array<TemplateResult<1>> {\n    const rendredNodes: Array<TemplateResult<1>> = [];\n\n    for (const node of nodes) {\n      const renderedNode = html`<ix-tree-node\n        .isActiveTreeNode=${this._activeItemId === node.id}\n        .isExpanded=${node.expanded}\n        .isSelected=${this._selectedNodeId === node.id}\n        .level=${level}\n        .node=${node}\n        @on-tree-node-click=${this.onTreeNodeClick}\n        @on-tree-node-toggle=${this.onTreeNodeToggle}\n      >\n        ${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}\n      </ix-tree-node>`;\n      rendredNodes.push(renderedNode);\n    }\n\n    return rendredNodes;\n  }\n\n  /**\n   * Expand the active tree node and all of its parent nodes.\n   */\n  private expandActiveTreeNode(): void {\n    const nodeToSelect =\n      findNodeById(this._rootNode, this._activeItemId) || this._rootNode;\n\n    let iteration = 0;\n    const MAX_ITERATIONS = 1000;\n    let node: IIxTreeNode | null = nodeToSelect.parentNode;\n    while (node && iteration < MAX_ITERATIONS) {\n      node.expanded = true;\n      node = node.parentNode;\n      iteration += 1;\n    }\n  }\n\n  protected render(): TemplateResult<1> {\n    this.expandActiveTreeNode();\n\n    return html`<div\n      aria-label=${this.ariaLabel}\n      class=\"ix-tree-container\"\n      role=\"tree\"\n    >\n      ${this.renderNodes(this._rootNode.children, 0)}\n    </div>`;\n  }\n}\n"]}

package/dist/IxTreeNode.d.ts

@@ -0,0 +1,17 @@
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/theme';
+import { LitElement, TemplateResult } from 'lit';
+import { IIxTreeNode } from './IIxTreeNode.js';
+export declare class IxTreeNode extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    isActiveTreeNode: boolean;
+    isExpanded: boolean;
+    isSelected: boolean;
+    level: number;
+    node: IIxTreeNode;
+    private getIcon;
+    private onNodeClick;
+    private onNodeToggle;
+    protected render(): TemplateResult<1>;
+    protected updated(): void;
+}

package/dist/IxTreeNode.js

@@ -0,0 +1,111 @@
+import { __decorate } from "tslib";
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/theme';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { IxTreeStyles } from './ix-tree-styles.js';
+// TREE_NODE_SPACER_REM and TREE_NODE_ICON_SIZE_REM are used to calculate the left padding for each node in the tree based on its level.
+// They need to remain in synchronization with the CSS variables defined in ix-tree-styles.ts.
+const TREE_NODE_SPACER_REM = 0.5;
+const TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 3;
+export class IxTreeNode extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isActiveTreeNode = false;
+        this.isExpanded = false;
+        this.isSelected = false;
+        this.level = 0;
+    }
+    getIcon(node, isExpanded) {
+        if (!node.children || node.children.length === 0) {
+            // This node does not have children; no icon is needed.
+            return nothing;
+        }
+        const icon = isExpanded ? 'arrow_drop_down' : 'arrow_right';
+        return html `<ix-icon @click=${() => this.onNodeToggle(this.node)}>
+      <span class="material-icons ${icon}">${icon}</span>
+    </ix-icon>`;
+    }
+    onNodeClick(node) {
+        var _a;
+        const event = new CustomEvent('on-tree-node-click', {
+            detail: {
+                message: {
+                    id: node.id,
+                    label: node.label,
+                    parentId: (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.id,
+                },
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    onNodeToggle(node) {
+        var _a;
+        const event = new CustomEvent('on-tree-node-toggle', {
+            detail: {
+                message: {
+                    id: node.id,
+                    label: node.label,
+                    parentId: (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.id,
+                },
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    render() {
+        const selectedClass = this.isSelected ? ' ix-tree-node__selected' : '';
+        const icon = this.node.icon ? this.node.icon : 'account_box';
+        return html `<div
+      ?active-tree-node=${this.isActiveTreeNode}
+      aria-expanded=${this.node.expanded}
+      aria-selected=${this.isSelected}
+      role="treeitem"
+    >
+      <div
+        class="ix-tree-node__wrapper ix-tree-node${selectedClass}"
+        style="padding-left: ${this.level * TREE_NODE_ICON_SIZE_REM}rem"
+      >
+        <div class="ix-tree-node__icon-size">
+          ${this.getIcon(this.node, this.isExpanded)}
+        </div>
+        <div
+          class="ix-tree-node__icon ix-tree-node__icon-size material-icons ${icon}"
+          @click=${() => this.onNodeClick(this.node)}
+          @keyup=${() => this.onNodeClick(this.node)}
+        >
+          ${this.node.icon ? this.node.icon : 'account_box'}
+        </div>
+        <div
+          class="ix-tree-node__label"
+          @click=${() => this.onNodeClick(this.node)}
+          @keyup=${() => this.onNodeClick(this.node)}
+        >
+          ${this.node.label}
+        </div>
+      </div>
+      <slot></slot>
+    </div>`;
+    }
+    updated() {
+        var _a;
+        const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[active-tree-node]');
+        el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+IxTreeNode.styles = [IxTreeStyles];
+__decorate([
+    property()
+], IxTreeNode.prototype, "isActiveTreeNode", void 0);
+__decorate([
+    property()
+], IxTreeNode.prototype, "isExpanded", void 0);
+__decorate([
+    property()
+], IxTreeNode.prototype, "isSelected", void 0);
+__decorate([
+    property()
+], IxTreeNode.prototype, "level", void 0);
+__decorate([
+    property({ type: Object })
+], IxTreeNode.prototype, "node", void 0);
+//# sourceMappingURL=IxTreeNode.js.map

package/dist/IxTreeNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxTreeNode.js","sourceRoot":"","sources":["../src/IxTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/theme';\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\n\n// TREE_NODE_SPACER_REM and TREE_NODE_ICON_SIZE_REM are used to calculate the left padding for each node in the tree based on its level.\n// They need to remain in synchronization with the CSS variables defined in ix-tree-styles.ts.\nconst TREE_NODE_SPACER_REM = 0.5;\nconst TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 3;\n\nexport class IxTreeNode extends LitElement {\n  static readonly styles = [IxTreeStyles];\n\n  @property() isActiveTreeNode: boolean = false;\n\n  @property() isExpanded: boolean = false;\n\n  @property() isSelected: boolean = false;\n\n  @property() level: number = 0;\n\n  @property({ type: Object }) node!: IIxTreeNode;\n\n  private getIcon(\n    node: IIxTreeNode,\n    isExpanded: boolean\n  ): TemplateResult<1> | typeof nothing {\n    if (!node.children || node.children.length === 0) {\n      // This node does not have children; no icon is needed.\n      return nothing;\n    }\n\n    const icon = isExpanded ? 'arrow_drop_down' : 'arrow_right';\n    return html`<ix-icon @click=${() => this.onNodeToggle(this.node)}>\n      <span class=\"material-icons ${icon}\">${icon}</span>\n    </ix-icon>`;\n  }\n\n  private onNodeClick(node: IIxTreeNode): void {\n    const event = new CustomEvent('on-tree-node-click', {\n      detail: {\n        message: {\n          id: node.id,\n          label: node.label,\n          parentId: node.parentNode?.id,\n        },\n      },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  private onNodeToggle(node: IIxTreeNode): void {\n    const event = new CustomEvent('on-tree-node-toggle', {\n      detail: {\n        message: {\n          id: node.id,\n          label: node.label,\n          parentId: node.parentNode?.id,\n        },\n      },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  protected render(): TemplateResult<1> {\n    const selectedClass = this.isSelected ? ' ix-tree-node__selected' : '';\n    const icon = this.node.icon ? this.node.icon : 'account_box';\n\n    return html`<div\n      ?active-tree-node=${this.isActiveTreeNode}\n      aria-expanded=${this.node.expanded}\n      aria-selected=${this.isSelected}\n      role=\"treeitem\"\n    >\n      <div\n        class=\"ix-tree-node__wrapper ix-tree-node${selectedClass}\"\n        style=\"padding-left: ${this.level * TREE_NODE_ICON_SIZE_REM}rem\"\n      >\n        <div class=\"ix-tree-node__icon-size\">\n          ${this.getIcon(this.node, this.isExpanded)}\n        </div>\n        <div\n          class=\"ix-tree-node__icon ix-tree-node__icon-size material-icons ${icon}\"\n          @click=${() => this.onNodeClick(this.node)}\n          @keyup=${() => this.onNodeClick(this.node)}\n        >\n          ${this.node.icon ? this.node.icon : 'account_box'}\n        </div>\n        <div\n          class=\"ix-tree-node__label\"\n          @click=${() => this.onNodeClick(this.node)}\n          @keyup=${() => this.onNodeClick(this.node)}\n        >\n          ${this.node.label}\n        </div>\n      </div>\n      <slot></slot>\n    </div>`;\n  }\n\n  protected updated(): void {\n    const el = this.shadowRoot?.querySelector('[active-tree-node]');\n    el?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n  }\n}\n"]}

package/dist/find-node-by-id.d.ts

@@ -0,0 +1,3 @@
+import { IIxTreeNode } from './IIxTreeNode.js';
+declare const findNodeById: (node: IIxTreeNode, id: string) => IIxTreeNode | null;
+export default findNodeById;

package/dist/find-node-by-id.js

@@ -0,0 +1,17 @@
+const findNodeById = (node, id) => {
+    if (!node || !node.children) {
+        return null;
+    }
+    if (node.id === id) {
+        return node;
+    }
+    for (const childNode of node.children) {
+        const foundNode = findNodeById(childNode, id);
+        if (foundNode) {
+            return foundNode;
+        }
+    }
+    return null;
+};
+export default findNodeById;
+//# sourceMappingURL=find-node-by-id.js.map

package/dist/find-node-by-id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-node-by-id.js","sourceRoot":"","sources":["../src/find-node-by-id.ts"],"names":[],"mappings":"AAEA,MAAM,YAAY,GAAG,CAAC,IAAiB,EAAE,EAAU,EAAsB,EAAE;IACzE,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC3B,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;QACrC,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAE9C,IAAI,SAAS,EAAE;YACb,OAAO,SAAS,CAAC;SAClB;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { IIxTreeNode } from './IIxTreeNode.js';\n\nconst findNodeById = (node: IIxTreeNode, id: string): IIxTreeNode | null => {\n  if (!node || !node.children) {\n    return null;\n  }\n\n  if (node.id === id) {\n    return node;\n  }\n\n  for (const childNode of node.children) {\n    const foundNode = findNodeById(childNode, id);\n\n    if (foundNode) {\n      return foundNode;\n    }\n  }\n\n  return null;\n};\n\nexport default findNodeById;\n"]}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { IxTree } from './IxTree.js';
+export { IxTreeNode } from './IxTreeNode.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { IxTree } from './IxTree.js';
+export { IxTreeNode } from './IxTreeNode.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { IxTree } from './IxTree.js';\nexport { IxTreeNode } from './IxTreeNode.js';\n"]}

package/dist/ix-tree-node.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ix-tree-node.js

@@ -0,0 +1,3 @@
+import { IxTreeNode } from './IxTreeNode.js';
+customElements.define('ix-tree-node', IxTreeNode);
+//# sourceMappingURL=ix-tree-node.js.map

package/dist/ix-tree-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-tree-node.js","sourceRoot":"","sources":["../src/ix-tree-node.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC","sourcesContent":["import { IxTreeNode } from './IxTreeNode.js';\n\ncustomElements.define('ix-tree-node', IxTreeNode);\n"]}

package/dist/ix-tree-styles.d.ts

@@ -0,0 +1 @@
+export declare const IxTreeStyles: import("lit").CSSResult;

package/dist/ix-tree-styles.js

@@ -0,0 +1,57 @@
+import { css } from 'lit';
+export const IxTreeStyles = css `
+  :root,
+  :host :root,
+  :host {
+    --tree-node-spacer: var(--ix-sys-spacer, 0.5rem);
+    --tree-node-icon-size: calc(var(--tree-node-spacer) * 3);
+  }
+  @font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)
+      format('truetype');
+  }
+  .material-icons {
+    color: #09224199;
+    direction: ltr;
+    display: inline-block;
+    font-family: 'Material Icons';
+    font-size: 24px;
+    font-style: normal;
+    font-weight: normal;
+    letter-spacing: normal;
+    line-height: 1;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+  }
+  .ix-tree-container {
+    height: 100%;
+    overflow: auto;
+    width: 100%;
+  }
+  .ix-tree-node__wrapper{
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    padding: 0.5rem;
+  }
+  .ix-tree-node__icon-size {
+    height: var(--tree-node-icon-size);
+    width: var(--tree-node-icon-size);
+  }
+  .ix-tree-node__label {
+    color: #092241;
+    display: flex;
+    flex-grow: 1;
+    padding: 0.25rem;
+    white-space: nowrap;
+  }
+  .ix-tree-node__selected {
+    background-color: rgba(20, 86, 224, 0.1);
+    border-left: 3px solid #1456e0;
+  }
+`;
+//# sourceMappingURL=ix-tree-styles.js.map

package/dist/ix-tree-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-tree-styles.js","sourceRoot":"","sources":["../src/ix-tree-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsD9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxTreeStyles = css`\n  :root,\n  :host :root,\n  :host {\n    --tree-node-spacer: var(--ix-sys-spacer, 0.5rem);\n    --tree-node-icon-size: calc(var(--tree-node-spacer) * 3);\n  }\n  @font-face {\n    font-family: 'Material Icons';\n    font-style: normal;\n    font-weight: 400;\n    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)\n      format('truetype');\n  }\n  .material-icons {\n    color: #09224199;\n    direction: ltr;\n    display: inline-block;\n    font-family: 'Material Icons';\n    font-size: 24px;\n    font-style: normal;\n    font-weight: normal;\n    letter-spacing: normal;\n    line-height: 1;\n    text-transform: none;\n    white-space: nowrap;\n    word-wrap: normal;\n  }\n  .ix-tree-container {\n    height: 100%;\n    overflow: auto;\n    width: 100%;\n  }\n  .ix-tree-node__wrapper{\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    padding: 0.5rem;\n  }\n  .ix-tree-node__icon-size {\n    height: var(--tree-node-icon-size);\n    width: var(--tree-node-icon-size);\n  }\n  .ix-tree-node__label {\n    color: #092241;\n    display: flex;\n    flex-grow: 1;\n    padding: 0.25rem;\n    white-space: nowrap;\n  }\n  .ix-tree-node__selected {\n    background-color: rgba(20, 86, 224, 0.1);\n    border-left: 3px solid #1456e0;\n  }\n`;\n"]}

package/dist/ix-tree.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ix-tree.js

@@ -0,0 +1,3 @@
+import { IxTree } from './IxTree.js';
+customElements.define('ix-tree', IxTree);
+//# sourceMappingURL=ix-tree.js.map

package/dist/ix-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-tree.js","sourceRoot":"","sources":["../src/ix-tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC","sourcesContent":["import { IxTree } from './IxTree.js';\n\ncustomElements.define('ix-tree', IxTree);\n"]}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@digital-realty/ix-tree",
+  "description": "Webcomponent ix-tree following open-wc recommendations",
+  "license": "MIT",
+  "author": "Digital Realty",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./ix-tree.js": "./dist/ix-tree.js",
+    "./IxTree": "./dist/react/IxTree.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@digital-realty/ix-icon": "^0.0.3",
+    "@digital-realty/theme": "^1.0.6",
+    "@lit-labs/react": "^2.1.0",
+    "@material/web": "^1.0.0",
+    "lit": "^2.0.2",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/test-runner": "^0.14.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ],
+      "import/no-unresolved": "off",
+      "no-unused-vars": "error"
+    }
+  },
+  "prettier": {
+    "arrowParens": "avoid",
+    "singleQuote": true
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "files": [
+    "/dist",
+    "!/dist/test",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "gitHead": "b6fdbd2bfccc8368b957adc302239e06b2e54e70"
+}