@digital-realty/ix-generic-tree 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ix-generic-tree
+
+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,62 @@
+# \<ix-generic-tree>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i ix-generic-tree
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'ix-generic-tree/ix-generic-tree.js';
+</script>
+
+<ix-generic-tree></ix-generic-tree>
+```
+
+## 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/IxGenericTree.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult } from 'lit';
+import '@digital-realty/ix-textbox/ix-textbox.js';
+import type { IGenericTreeNode } from './ix-generic-tree-types.js';
+import './ix-generic-tree-node.js';
+export declare class IxGenericTree extends LitElement {
+    static styles: import("lit").CSSResult[];
+    rootNode: IGenericTreeNode;
+    showCheckboxes: boolean;
+    disableCheckboxes: boolean;
+    filledIcons: boolean;
+    searchEnabled: boolean;
+    searchPlaceholder: string;
+    searchText: string;
+    selectedId: string;
+    private onTreeNodeExpandToggle;
+    private onTreeNodeCheckToggle;
+    private renderNodes;
+    private renderTextSearch;
+    render(): TemplateResult<1>;
+}

package/dist/IxGenericTree.js

@@ -0,0 +1,118 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@digital-realty/ix-textbox/ix-textbox.js';
+import './ix-generic-tree-node.js';
+import { updateNodeCheckedStatus } from './ix-generic-tree-utils.js';
+import { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';
+import { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';
+export class IxGenericTree extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showCheckboxes = false;
+        this.disableCheckboxes = false;
+        this.filledIcons = false;
+        this.searchEnabled = false;
+        this.searchPlaceholder = '';
+        this.searchText = '';
+        this.selectedId = '';
+    }
+    onTreeNodeExpandToggle(e) {
+        const { node } = e.detail.message;
+        node.expanded = !node.expanded;
+        this.dispatchEvent(new CustomEvent('expand-toggle', {
+            detail: {
+                message: {
+                    ...e.detail.message,
+                    update: this.requestUpdate.bind(this),
+                },
+            },
+        }));
+        this.requestUpdate();
+    }
+    onTreeNodeCheckToggle(e) {
+        const { node } = e.detail.message;
+        updateNodeCheckedStatus(node, this.rootNode);
+        this.rootNode = structuredClone(this.rootNode);
+        this.dispatchEvent(new CustomEvent('check-toggle', {
+            detail: {
+                message: {
+                    ...e.detail.message,
+                    rootNode: this.rootNode,
+                },
+            },
+        }));
+    }
+    renderNodes(nodes = [], level = 0) {
+        const renderedNodes = [];
+        for (const node of nodes) {
+            const renderedNode = html `<ix-generic-tree-node
+        id=${node.id}
+        ?expanded=${!!node.expanded}
+        ?loading=${!!node.loading}
+        ?disabled=${this.disableCheckboxes || !!node.disabled}
+        .level=${level}
+        .node=${node}
+        ?showCheckbox=${this.showCheckboxes}
+        ?filledIcons=${this.filledIcons}
+        .selected=${this.selectedId === node.id}
+        @check-toggle=${this.onTreeNodeCheckToggle}
+        @expand-toggle=${this.onTreeNodeExpandToggle}
+        data-testid="${IxGenericTreeTestIds.NODE_ID(node.id)}"
+      >
+        ${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}
+      </ix-generic-tree-node>`;
+            renderedNodes.push(renderedNode);
+        }
+        return renderedNodes;
+    }
+    renderTextSearch() {
+        return this.searchEnabled
+            ? html ` <ix-textbox
+          filled
+          leading-icon="search"
+          has-leading-icon
+          placeholder=${this.searchPlaceholder}
+          .value=${this.searchText}
+          @input=${(e) => {
+                const input = e.target;
+                this.dispatchEvent(new CustomEvent('search-text-change', {
+                    detail: { searchText: input.value },
+                }));
+            }}
+          data-testid="${IxGenericTreeTestIds.SEARCH_BOX}"
+        ></ix-textbox>`
+            : nothing;
+    }
+    render() {
+        return html `<div>
+      ${this.renderTextSearch()} ${this.renderNodes(this.rootNode.children, 0)}
+    </div>`;
+    }
+}
+IxGenericTree.styles = [IxGenericTreeNodeStyles];
+__decorate([
+    property({ type: Object })
+], IxGenericTree.prototype, "rootNode", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTree.prototype, "showCheckboxes", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTree.prototype, "disableCheckboxes", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTree.prototype, "filledIcons", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTree.prototype, "searchEnabled", void 0);
+__decorate([
+    property({ type: String })
+], IxGenericTree.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property({ type: String })
+], IxGenericTree.prototype, "searchText", void 0);
+__decorate([
+    property({ type: String })
+], IxGenericTree.prototype, "selectedId", void 0);
+//# sourceMappingURL=IxGenericTree.js.map

package/dist/IxGenericTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGenericTree.js","sourceRoot":"","sources":["../src/IxGenericTree.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-textbox/ix-textbox.js';\nimport type { IGenericTreeNode } from './ix-generic-tree-types.js';\nimport './ix-generic-tree-node.js';\nimport { updateNodeCheckedStatus } from './ix-generic-tree-utils.js';\nimport { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';\nimport { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';\n\nexport class IxGenericTree extends LitElement {\n  static styles = [IxGenericTreeNodeStyles];\n\n  @property({ type: Object }) rootNode!: IGenericTreeNode;\n\n  @property({ type: Boolean }) showCheckboxes = false;\n\n  @property({ type: Boolean }) disableCheckboxes = false;\n\n  @property({ type: Boolean }) filledIcons = false;\n\n  @property({ type: Boolean }) searchEnabled = false;\n\n  @property({ type: String }) searchPlaceholder = '';\n\n  @property({ type: String }) searchText = '';\n\n  @property({ type: String }) selectedId = '';\n\n  private onTreeNodeExpandToggle(e: CustomEvent) {\n    const { node } = e.detail.message;\n    node.expanded = !node.expanded;\n    this.dispatchEvent(\n      new CustomEvent('expand-toggle', {\n        detail: {\n          message: {\n            ...e.detail.message,\n            update: this.requestUpdate.bind(this),\n          },\n        },\n      }),\n    );\n    this.requestUpdate();\n  }\n\n  private onTreeNodeCheckToggle(e: CustomEvent): void {\n    const { node } = e.detail.message;\n    updateNodeCheckedStatus(node, this.rootNode);\n    this.rootNode = structuredClone(this.rootNode);\n    this.dispatchEvent(\n      new CustomEvent('check-toggle', {\n        detail: {\n          message: {\n            ...e.detail.message,\n            rootNode: this.rootNode,\n          },\n        },\n      }),\n    );\n  }\n\n  private renderNodes(\n    nodes: Array<IGenericTreeNode> = [],\n    level: number = 0,\n  ): Array<TemplateResult<1>> {\n    const renderedNodes = [];\n\n    for (const node of nodes) {\n      const renderedNode = html`<ix-generic-tree-node\n        id=${node.id}\n        ?expanded=${!!node.expanded}\n        ?loading=${!!node.loading}\n        ?disabled=${this.disableCheckboxes || !!node.disabled}\n        .level=${level}\n        .node=${node}\n        ?showCheckbox=${this.showCheckboxes}\n        ?filledIcons=${this.filledIcons}\n        .selected=${this.selectedId === node.id}\n        @check-toggle=${this.onTreeNodeCheckToggle}\n        @expand-toggle=${this.onTreeNodeExpandToggle}\n        data-testid=\"${IxGenericTreeTestIds.NODE_ID(node.id)}\"\n      >\n        ${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}\n      </ix-generic-tree-node>`;\n      renderedNodes.push(renderedNode);\n    }\n\n    return renderedNodes;\n  }\n\n  private renderTextSearch() {\n    return this.searchEnabled\n      ? html` <ix-textbox\n          filled\n          leading-icon=\"search\"\n          has-leading-icon\n          placeholder=${this.searchPlaceholder}\n          .value=${this.searchText}\n          @input=${(e: Event) => {\n            const input = e.target as HTMLInputElement;\n            this.dispatchEvent(\n              new CustomEvent('search-text-change', {\n                detail: { searchText: input.value },\n              }),\n            );\n          }}\n          data-testid=\"${IxGenericTreeTestIds.SEARCH_BOX}\"\n        ></ix-textbox>`\n      : nothing;\n  }\n\n  render() {\n    return html`<div>\n      ${this.renderTextSearch()} ${this.renderNodes(this.rootNode.children, 0)}\n    </div>`;\n  }\n}\n"]}

package/dist/IxGenericTreeDemo.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+import './ix-generic-tree.js';
+export declare class IxGenericTreeDemo extends LitElement {
+    searchEnabled: boolean;
+    showCheckboxes: boolean;
+    filledIcons: boolean;
+    private toggleSearch;
+    private toggleCheckboxes;
+    private toggleIcons;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/IxGenericTreeDemo.js

@@ -0,0 +1,55 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { state } from 'lit/decorators.js';
+import './ix-generic-tree.js';
+import testData from './test/test-data.js';
+export class IxGenericTreeDemo extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.searchEnabled = true;
+        this.showCheckboxes = true;
+        this.filledIcons = true;
+    }
+    toggleSearch() {
+        this.searchEnabled = !this.searchEnabled;
+    }
+    toggleCheckboxes() {
+        this.showCheckboxes = !this.showCheckboxes;
+    }
+    toggleIcons() {
+        this.filledIcons = !this.filledIcons;
+    }
+    render() {
+        return html `
+      <div>
+        <button @click=${this.toggleSearch}>
+          Search: ${this.searchEnabled ? 'On' : 'Off'}
+        </button>
+        <button @click=${this.toggleCheckboxes}>
+          Checkboxes: ${this.showCheckboxes ? 'On' : 'Off'}
+        </button>
+        <button @click=${this.toggleIcons}>
+          Filled icons: ${this.filledIcons ? 'On' : 'Off'}
+        </button>
+        <ix-generic-tree
+          .rootNode=${testData}
+          ?searchEnabled=${this.searchEnabled}
+          ?showCheckboxes=${this.showCheckboxes}
+          ?filledIcons=${this.filledIcons}
+          searchPlaceholder="placeholder"
+          .selectedId=${testData.children[0].id}
+        ></ix-generic-tree>
+      </div>
+    `;
+    }
+}
+__decorate([
+    state()
+], IxGenericTreeDemo.prototype, "searchEnabled", void 0);
+__decorate([
+    state()
+], IxGenericTreeDemo.prototype, "showCheckboxes", void 0);
+__decorate([
+    state()
+], IxGenericTreeDemo.prototype, "filledIcons", void 0);
+//# sourceMappingURL=IxGenericTreeDemo.js.map

package/dist/IxGenericTreeDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGenericTreeDemo.js","sourceRoot":"","sources":["../src/IxGenericTreeDemo.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAAjD;;QACW,kBAAa,GAAG,IAAI,CAAC;QAErB,mBAAc,GAAG,IAAI,CAAC;QAEtB,gBAAW,GAAG,IAAI,CAAC;IAqC9B,CAAC;IAnCS,YAAY;QAClB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IAC3C,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;IAC7C,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACvC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,YAAY;oBACtB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;yBAE5B,IAAI,CAAC,gBAAgB;wBACtB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;yBAEjC,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;;sBAGnC,QAAQ;2BACH,IAAI,CAAC,aAAa;4BACjB,IAAI,CAAC,cAAc;yBACtB,IAAI,CAAC,WAAW;;wBAEjB,QAAQ,CAAC,QAAS,CAAC,CAAC,CAAC,CAAC,EAAE;;;KAG3C,CAAC;IACJ,CAAC;CACF;AAzCU;IAAR,KAAK,EAAE;wDAAsB;AAErB;IAAR,KAAK,EAAE;yDAAuB;AAEtB;IAAR,KAAK,EAAE;sDAAoB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport './ix-generic-tree.js';\nimport testData from './test/test-data.js';\n\nexport class IxGenericTreeDemo extends LitElement {\n  @state() searchEnabled = true;\n\n  @state() showCheckboxes = true;\n\n  @state() filledIcons = true;\n\n  private toggleSearch() {\n    this.searchEnabled = !this.searchEnabled;\n  }\n\n  private toggleCheckboxes() {\n    this.showCheckboxes = !this.showCheckboxes;\n  }\n\n  private toggleIcons() {\n    this.filledIcons = !this.filledIcons;\n  }\n\n  render() {\n    return html`\n      <div>\n        <button @click=${this.toggleSearch}>\n          Search: ${this.searchEnabled ? 'On' : 'Off'}\n        </button>\n        <button @click=${this.toggleCheckboxes}>\n          Checkboxes: ${this.showCheckboxes ? 'On' : 'Off'}\n        </button>\n        <button @click=${this.toggleIcons}>\n          Filled icons: ${this.filledIcons ? 'On' : 'Off'}\n        </button>\n        <ix-generic-tree\n          .rootNode=${testData}\n          ?searchEnabled=${this.searchEnabled}\n          ?showCheckboxes=${this.showCheckboxes}\n          ?filledIcons=${this.filledIcons}\n          searchPlaceholder=\"placeholder\"\n          .selectedId=${testData.children![0].id}\n        ></ix-generic-tree>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/IxGenericTreeNode.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-checkbox/ix-checkbox.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-progress/ix-progress.js';
+import type { IGenericTreeNode } from './ix-generic-tree-types.js';
+export declare class IxGenericTreeNode extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    node: IGenericTreeNode;
+    showCheckbox: boolean;
+    expanded: boolean;
+    loading: boolean;
+    disabled: boolean;
+    selected: boolean;
+    level: number;
+    filledIcons: boolean;
+    private onCheck;
+    private onNodeExpand;
+    private get expandable();
+    private arrowIcon;
+    private checkbox;
+    private nodeIcon;
+    private label;
+    private childCount;
+    private secondaryLabel;
+    private loadingCircle;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/IxGenericTreeNode.js

@@ -0,0 +1,177 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@digital-realty/ix-checkbox/ix-checkbox.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-progress/ix-progress.js';
+import { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';
+import { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';
+export class IxGenericTreeNode extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showCheckbox = false;
+        this.expanded = false;
+        this.loading = false;
+        this.disabled = false;
+        this.selected = false;
+        this.level = 0;
+        this.filledIcons = false;
+    }
+    onCheck() {
+        this.node.isDirty = true;
+        if (this.node.checked) {
+            this.node.checked = false;
+            this.node.indeterminate = false;
+        }
+        else {
+            this.node.checked = true;
+            this.node.indeterminate = false;
+        }
+        const event = new CustomEvent('check-toggle', {
+            detail: {
+                message: {
+                    node: this.node,
+                },
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    onNodeExpand() {
+        if (!this.expandable) {
+            return;
+        }
+        const event = new CustomEvent('expand-toggle', {
+            detail: {
+                message: {
+                    node: this.node,
+                },
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    get expandable() {
+        const childrenDataIsPresent = this.node.children !== undefined && this.node.children.length > 0;
+        const hasChildrenToLoad = this.node.childrenCount !== undefined && this.node.childrenCount > 0;
+        return childrenDataIsPresent || hasChildrenToLoad;
+    }
+    arrowIcon() {
+        const icon = this.expanded ? 'arrow_drop_down' : 'arrow_right';
+        return html `<ix-icon-button
+      @click=${() => this.onNodeExpand()}
+      style="visibility: ${this.expandable ? 'visible' : 'hidden'}"
+      icon=${icon}
+      test-id="tree-node-expand-toggle"
+    >
+    </ix-icon-button>`;
+    }
+    checkbox() {
+        return this.showCheckbox
+            ? html `<div class="pl-2" style="margin-top: 0.65rem">
+          <ix-checkbox
+            .disabled=${this.loading || this.disabled}
+            .checked=${this.node.checked}
+            .indeterminate=${this.node.indeterminate}
+            @click=${() => this.onCheck()}
+            data-testid="${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}"
+          ></ix-checkbox>
+        </div>`
+            : nothing;
+    }
+    nodeIcon() {
+        const { icon } = this.node;
+        return icon
+            ? html `<div class="pl-4 mt-2">
+          <ix-icon
+            style="color: #092241; opacity: 0.6; font-size: 20px;"
+            ?filled=${this.filledIcons}
+          >
+            ${icon}
+          </ix-icon>
+        </div> `
+            : nothing;
+    }
+    label() {
+        return html `
+      <p
+        class="label dlr-text-small"
+        data-testid="${IxGenericTreeTestIds.NODE_LABEL(this.node.id)}"
+      >
+        ${this.node.label}
+      </p>
+    `;
+    }
+    childCount() {
+        const count = this.node.childrenCount === undefined ? 0 : this.node.childrenCount;
+        return html `<p
+      class="pl-2 child-count dlr-text-small"
+      data-testid="${IxGenericTreeTestIds.NODE_COUNT(this.node.id)}"
+    >
+      ${count !== 0 ? count : nothing}
+    </p>`;
+    }
+    secondaryLabel() {
+        return this.node.secondaryLabel
+            ? html `<p class="secondary-label dlr-text-caption">
+          ${this.node.secondaryLabel}
+        </p>`
+            : nothing;
+    }
+    loadingCircle() {
+        return html `<div
+      style="visibility: ${this.loading
+            ? 'visible'
+            : 'hidden'}; padding-left: 1rem;"
+      class="animate-pulse"
+    >
+      <ix-progress .linear=${false} .indeterminate=${true}></ix-progress>
+    </div>`;
+    }
+    render() {
+        return html `
+      <div style="padding-left: ${this.level > 0 ? '2.2rem' : '0'}">
+        <div class="node-item ${this.selected ? 'selected' : ''}">
+          ${this.arrowIcon()} ${this.checkbox()} ${this.nodeIcon()}
+          <div
+            class="node-item-label"
+            @click=${this.onNodeExpand}
+            @keydown=${this.onNodeExpand}
+          >
+            <div class="node-item-inner">
+              ${this.label()} ${this.childCount()}
+            </div>
+            ${this.secondaryLabel()}
+          </div>
+          ${this.loadingCircle()}
+        </div>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+IxGenericTreeNode.styles = [IxGenericTreeNodeStyles];
+__decorate([
+    property({ type: Object })
+], IxGenericTreeNode.prototype, "node", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTreeNode.prototype, "showCheckbox", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTreeNode.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTreeNode.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTreeNode.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTreeNode.prototype, "selected", void 0);
+__decorate([
+    property({ type: Number })
+], IxGenericTreeNode.prototype, "level", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGenericTreeNode.prototype, "filledIcons", void 0);
+//# sourceMappingURL=IxGenericTreeNode.js.map

package/dist/IxGenericTreeNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGenericTreeNode.js","sourceRoot":"","sources":["../src/IxGenericTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-progress/ix-progress.js';\n\nimport type { IGenericTreeNode } from './ix-generic-tree-types.js';\nimport { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';\nimport { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';\n\nexport class IxGenericTreeNode extends LitElement {\n  static readonly styles = [IxGenericTreeNodeStyles];\n\n  @property({ type: Object }) node!: IGenericTreeNode;\n\n  @property({ type: Boolean }) showCheckbox: boolean = false;\n\n  @property({ type: Boolean }) expanded: boolean = false;\n\n  @property({ type: Boolean }) loading: boolean = false;\n\n  @property({ type: Boolean }) disabled: boolean = false;\n\n  @property({ type: Boolean }) selected: boolean = false;\n\n  @property({ type: Number }) level = 0;\n\n  @property({ type: Boolean }) filledIcons = false;\n\n  private onCheck() {\n    this.node.isDirty = true;\n    if (this.node.checked) {\n      this.node.checked = false;\n      this.node.indeterminate = false;\n    } else {\n      this.node.checked = true;\n      this.node.indeterminate = false;\n    }\n    const event = new CustomEvent('check-toggle', {\n      detail: {\n        message: {\n          node: this.node,\n        },\n      },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  private onNodeExpand(): void {\n    if (!this.expandable) {\n      return;\n    }\n\n    const event = new CustomEvent('expand-toggle', {\n      detail: {\n        message: {\n          node: this.node,\n        },\n      },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  private get expandable() {\n    const childrenDataIsPresent: boolean =\n      this.node.children !== undefined && this.node.children.length > 0;\n    const hasChildrenToLoad: boolean =\n      this.node.childrenCount !== undefined && this.node.childrenCount > 0;\n    return childrenDataIsPresent || hasChildrenToLoad;\n  }\n\n  private arrowIcon() {\n    const icon = this.expanded ? 'arrow_drop_down' : 'arrow_right';\n    return html`<ix-icon-button\n      @click=${() => this.onNodeExpand()}\n      style=\"visibility: ${this.expandable ? 'visible' : 'hidden'}\"\n      icon=${icon}\n      test-id=\"tree-node-expand-toggle\"\n    >\n    </ix-icon-button>`;\n  }\n\n  private checkbox() {\n    return this.showCheckbox\n      ? html`<div class=\"pl-2\" style=\"margin-top: 0.65rem\">\n          <ix-checkbox\n            .disabled=${this.loading || this.disabled}\n            .checked=${this.node.checked}\n            .indeterminate=${this.node.indeterminate}\n            @click=${() => this.onCheck()}\n            data-testid=\"${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}\"\n          ></ix-checkbox>\n        </div>`\n      : nothing;\n  }\n\n  private nodeIcon() {\n    const { icon } = this.node;\n    return icon\n      ? html`<div class=\"pl-4 mt-2\">\n          <ix-icon\n            style=\"color: #092241; opacity: 0.6; font-size: 20px;\"\n            ?filled=${this.filledIcons}\n          >\n            ${icon}\n          </ix-icon>\n        </div> `\n      : nothing;\n  }\n\n  private label() {\n    return html`\n      <p\n        class=\"label dlr-text-small\"\n        data-testid=\"${IxGenericTreeTestIds.NODE_LABEL(this.node.id)}\"\n      >\n        ${this.node.label}\n      </p>\n    `;\n  }\n\n  private childCount() {\n    const count =\n      this.node.childrenCount === undefined ? 0 : this.node.childrenCount;\n    return html`<p\n      class=\"pl-2 child-count dlr-text-small\"\n      data-testid=\"${IxGenericTreeTestIds.NODE_COUNT(this.node.id)}\"\n    >\n      ${count !== 0 ? count : nothing}\n    </p>`;\n  }\n\n  private secondaryLabel() {\n    return this.node.secondaryLabel\n      ? html`<p class=\"secondary-label dlr-text-caption\">\n          ${this.node.secondaryLabel}\n        </p>`\n      : nothing;\n  }\n\n  private loadingCircle() {\n    return html`<div\n      style=\"visibility: ${this.loading\n        ? 'visible'\n        : 'hidden'}; padding-left: 1rem;\"\n      class=\"animate-pulse\"\n    >\n      <ix-progress .linear=${false} .indeterminate=${true}></ix-progress>\n    </div>`;\n  }\n\n  render() {\n    return html`\n      <div style=\"padding-left: ${this.level > 0 ? '2.2rem' : '0'}\">\n        <div class=\"node-item ${this.selected ? 'selected' : ''}\">\n          ${this.arrowIcon()} ${this.checkbox()} ${this.nodeIcon()}\n          <div\n            class=\"node-item-label\"\n            @click=${this.onNodeExpand}\n            @keydown=${this.onNodeExpand}\n          >\n            <div class=\"node-item-inner\">\n              ${this.label()} ${this.childCount()}\n            </div>\n            ${this.secondaryLabel()}\n          </div>\n          ${this.loadingCircle()}\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/IxGenericTreeTestIds.d.ts

@@ -0,0 +1,7 @@
+export declare class IxGenericTreeTestIds {
+    static readonly SEARCH_BOX = "search-box";
+    static CHECK_BOX_ID: (id: string) => string;
+    static NODE_ID: (id: string) => string;
+    static NODE_LABEL: (id: string) => string;
+    static NODE_COUNT: (id: string) => string;
+}

package/dist/IxGenericTreeTestIds.js

@@ -0,0 +1,8 @@
+export class IxGenericTreeTestIds {
+}
+IxGenericTreeTestIds.SEARCH_BOX = 'search-box';
+IxGenericTreeTestIds.CHECK_BOX_ID = (id) => `checkbox-${id}`;
+IxGenericTreeTestIds.NODE_ID = (id) => `node-${id}`;
+IxGenericTreeTestIds.NODE_LABEL = (id) => `label-${id}`;
+IxGenericTreeTestIds.NODE_COUNT = (id) => `count-${id}`;
+//# sourceMappingURL=IxGenericTreeTestIds.js.map

package/dist/IxGenericTreeTestIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGenericTreeTestIds.js","sourceRoot":"","sources":["../src/IxGenericTreeTestIds.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,oBAAoB;;AACR,+BAAU,GAAG,YAAY,CAAC;AAEnC,iCAAY,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC;AAEhD,4BAAO,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;AAEvC,+BAAU,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC;AAE3C,+BAAU,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC","sourcesContent":["export class IxGenericTreeTestIds {\n  public static readonly SEARCH_BOX = 'search-box';\n\n  public static CHECK_BOX_ID = (id: string) => `checkbox-${id}`;\n\n  public static NODE_ID = (id: string) => `node-${id}`;\n\n  public static NODE_LABEL = (id: string) => `label-${id}`;\n\n  public static NODE_COUNT = (id: string) => `count-${id}`;\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { IxGenericTree } from './IxGenericTree.js';
+export * from './ix-generic-tree-utils.js';
+export type { IGenericTreeNode } from './ix-generic-tree-types.js';
+export { IxGenericTreeNode } from './IxGenericTreeNode.js';
+export { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { IxGenericTree } from './IxGenericTree.js';
+export * from './ix-generic-tree-utils.js';
+export { IxGenericTreeNode } from './IxGenericTreeNode.js';
+export { IxGenericTreeTestIds } from './IxGenericTreeTestIds.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,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { IxGenericTree } from './IxGenericTree.js';\nexport * from './ix-generic-tree-utils.js';\nexport type { IGenericTreeNode } from './ix-generic-tree-types.js';\nexport { IxGenericTreeNode } from './IxGenericTreeNode.js';\nexport { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';\n"]}

package/dist/ix-generic-tree-demo.d.ts

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

package/dist/ix-generic-tree-demo.js

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

package/dist/ix-generic-tree-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-generic-tree-demo.js","sourceRoot":"","sources":["../src/ix-generic-tree-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC","sourcesContent":["import { IxGenericTreeDemo } from './IxGenericTreeDemo.js';\n\nwindow.customElements.define('ix-generic-tree-demo', IxGenericTreeDemo);\n"]}

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

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

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

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

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

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

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

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