@digital-realty/ix-dropdown-tree 1.0.2

package/LICENSE

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

@@ -0,0 +1,13 @@
+import { LitElement, TemplateResult } from 'lit';
+import './ix-dropdown-tree-node.js';
+import { IxDropdownTreeNodeData as TreeNode } from './ix-dropdown-tree-types.js';
+export declare class IxDropdownTree extends LitElement {
+    rootNode: TreeNode;
+    selectedId: string | undefined;
+    hasActionButton: boolean;
+    private onToggle;
+    private onNodeButtonClick;
+    private onSelect;
+    renderNodes(nodes?: Array<TreeNode>, level?: number): TemplateResult<1>[];
+    render(): TemplateResult<1>;
+}

package/dist/IxDropdownTree.js

@@ -0,0 +1,64 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import './ix-dropdown-tree-node.js';
+import { IxDropdownTreeTestIds } from './IxDropdownTreeTestIds.js';
+export class IxDropdownTree extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.rootNode = {};
+        this.hasActionButton = false;
+    }
+    onToggle(e) {
+        const newRootNode = { ...this.rootNode };
+        const { node } = e.detail.message;
+        node.expanded = !node.expanded;
+        this.rootNode = newRootNode;
+        this.requestUpdate();
+    }
+    onNodeButtonClick(e) {
+        this.dispatchEvent(new CustomEvent('node-action', {
+            detail: { message: { id: e.detail.message.id } },
+        }));
+    }
+    onSelect(e) {
+        this.dispatchEvent(new CustomEvent('select', { detail: { message: e.detail.message.id } }));
+    }
+    renderNodes(nodes = [], level = 0) {
+        const renderedNodes = [];
+        for (const n of nodes) {
+            const renderedNode = html `
+        <ix-dropdown-tree-node
+          .treeNode=${n}
+          .level=${level}
+          .expanded=${n.expanded ?? false}
+          .selected=${n.id === this.selectedId}
+          @tree-node-select=${this.onSelect}
+          @tree-node-toggle=${this.onToggle}
+          @tree-node-action=${this.onNodeButtonClick}
+          ?hasActionButton=${this.hasActionButton}
+          data-testid=${level === 0
+                ? IxDropdownTreeTestIds.PARENT_NODE
+                : IxDropdownTreeTestIds.CHILD_NODE}
+        >
+          ${n.expanded ? this.renderNodes(n.children, level + 1) : nothing}
+        </ix-dropdown-tree-node>
+      `;
+            renderedNodes.push(renderedNode);
+        }
+        return renderedNodes;
+    }
+    render() {
+        return html ` <div>${this.renderNodes(this.rootNode.children, 0)}</div> `;
+    }
+}
+__decorate([
+    property({ type: Object })
+], IxDropdownTree.prototype, "rootNode", void 0);
+__decorate([
+    property({ type: String })
+], IxDropdownTree.prototype, "selectedId", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxDropdownTree.prototype, "hasActionButton", void 0);
+//# sourceMappingURL=IxDropdownTree.js.map

package/dist/IxDropdownTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxDropdownTree.js","sourceRoot":"","sources":["../src/IxDropdownTree.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAC8B,aAAQ,GAAa,EAAc,CAAC;QAInC,oBAAe,GAAY,KAAK,CAAC;IAoDhE,CAAC;IAlDS,QAAQ,CAAC,CAAc;QAC7B,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QACzC,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,iBAAiB,CAAC,CAAc;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE;SACjD,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC,CACxE,CAAC;IACJ,CAAC;IAED,WAAW,CAAC,QAAyB,EAAE,EAAE,QAAgB,CAAC;QACxD,MAAM,aAAa,GAA6B,EAAE,CAAC;QACnD,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;YACtB,MAAM,YAAY,GAAG,IAAI,CAAA;;sBAET,CAAC;mBACJ,KAAK;sBACF,CAAC,CAAC,QAAQ,IAAI,KAAK;sBACnB,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,UAAU;8BAChB,IAAI,CAAC,QAAQ;8BACb,IAAI,CAAC,QAAQ;8BACb,IAAI,CAAC,iBAAiB;6BACvB,IAAI,CAAC,eAAe;wBACzB,KAAK,KAAK,CAAC;gBACvB,CAAC,CAAC,qBAAqB,CAAC,WAAW;gBACnC,CAAC,CAAC,qBAAqB,CAAC,UAAU;;YAElC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;;OAEnE,CAAC;YACF,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnC,CAAC;QACD,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,SAAS,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,SAAS,CAAC;IAC3E,CAAC;CACF;AAxD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAqC;AAEpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAgC;AAE9B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAkC","sourcesContent":["import { LitElement, TemplateResult, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport './ix-dropdown-tree-node.js';\nimport { IxDropdownTreeNodeData as TreeNode } from './ix-dropdown-tree-types.js';\nimport { IxDropdownTreeTestIds } from './IxDropdownTreeTestIds.js';\n\nexport class IxDropdownTree extends LitElement {\n  @property({ type: Object }) rootNode: TreeNode = {} as TreeNode;\n\n  @property({ type: String }) selectedId: string | undefined;\n\n  @property({ type: Boolean }) hasActionButton: boolean = false;\n\n  private onToggle(e: CustomEvent) {\n    const newRootNode = { ...this.rootNode };\n    const { node } = e.detail.message;\n    node.expanded = !node.expanded;\n    this.rootNode = newRootNode;\n    this.requestUpdate();\n  }\n\n  private onNodeButtonClick(e: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('node-action', {\n        detail: { message: { id: e.detail.message.id } },\n      }),\n    );\n  }\n\n  private onSelect(e: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('select', { detail: { message: e.detail.message.id } }),\n    );\n  }\n\n  renderNodes(nodes: Array<TreeNode> = [], level: number = 0) {\n    const renderedNodes: Array<TemplateResult<1>> = [];\n    for (const n of nodes) {\n      const renderedNode = html`\n        <ix-dropdown-tree-node\n          .treeNode=${n}\n          .level=${level}\n          .expanded=${n.expanded ?? false}\n          .selected=${n.id === this.selectedId}\n          @tree-node-select=${this.onSelect}\n          @tree-node-toggle=${this.onToggle}\n          @tree-node-action=${this.onNodeButtonClick}\n          ?hasActionButton=${this.hasActionButton}\n          data-testid=${level === 0\n            ? IxDropdownTreeTestIds.PARENT_NODE\n            : IxDropdownTreeTestIds.CHILD_NODE}\n        >\n          ${n.expanded ? this.renderNodes(n.children, level + 1) : nothing}\n        </ix-dropdown-tree-node>\n      `;\n      renderedNodes.push(renderedNode);\n    }\n    return renderedNodes;\n  }\n\n  render() {\n    return html` <div>${this.renderNodes(this.rootNode.children, 0)}</div> `;\n  }\n}\n"]}

package/dist/IxDropdownTreeTestIds.d.ts

@@ -0,0 +1,7 @@
+export declare class IxDropdownTreeTestIds {
+    static readonly PARENT_NODE = "parent_node";
+    static readonly PARENT_NODE_LABEL = "parent_node_label";
+    static readonly PARENT_NODE_CHEVRON = "parent_node_chevron";
+    static readonly CHILD_NODE = "child_node";
+    static readonly CHILD_NODE_LABEL = "child_node_label";
+}

package/dist/IxDropdownTreeTestIds.js

@@ -0,0 +1,8 @@
+export class IxDropdownTreeTestIds {
+}
+IxDropdownTreeTestIds.PARENT_NODE = 'parent_node';
+IxDropdownTreeTestIds.PARENT_NODE_LABEL = 'parent_node_label';
+IxDropdownTreeTestIds.PARENT_NODE_CHEVRON = 'parent_node_chevron';
+IxDropdownTreeTestIds.CHILD_NODE = 'child_node';
+IxDropdownTreeTestIds.CHILD_NODE_LABEL = 'child_node_label';
+//# sourceMappingURL=IxDropdownTreeTestIds.js.map

package/dist/IxDropdownTreeTestIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxDropdownTreeTestIds.js","sourceRoot":"","sources":["../src/IxDropdownTreeTestIds.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,qBAAqB;;AAChB,iCAAW,GAAG,aAAa,CAAC;AAE5B,uCAAiB,GAAG,mBAAmB,CAAC;AAExC,yCAAmB,GAAG,qBAAqB,CAAC;AAE5C,gCAAU,GAAG,YAAY,CAAC;AAE1B,sCAAgB,GAAG,kBAAkB,CAAC","sourcesContent":["export class IxDropdownTreeTestIds {\n  static readonly PARENT_NODE = 'parent_node';\n\n  static readonly PARENT_NODE_LABEL = 'parent_node_label';\n\n  static readonly PARENT_NODE_CHEVRON = 'parent_node_chevron';\n\n  static readonly CHILD_NODE = 'child_node';\n\n  static readonly CHILD_NODE_LABEL = 'child_node_label';\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { IxDropdownTree } from './IxDropdownTree.js';
+export { IxDropdownTreeNode } from './ix-dropdown-tree-node.js';
+export { IxDropdownTreeNodeData } from './ix-dropdown-tree-types.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { IxDropdownTree } from './IxDropdownTree.js';
+export { IxDropdownTreeNode } from './ix-dropdown-tree-node.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,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { IxDropdownTree } from './IxDropdownTree.js';\nexport { IxDropdownTreeNode } from './ix-dropdown-tree-node.js';\nexport { IxDropdownTreeNodeData } from './ix-dropdown-tree-types.js';\n"]}

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

@@ -0,0 +1,22 @@
+import { LitElement, nothing } from 'lit';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import { IxDropdownTreeNodeData as TreeNode } from './ix-dropdown-tree-types.js';
+export declare class IxDropdownTreeNode extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    treeNode: TreeNode;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+    hasActionButton: boolean;
+    get isParentNode(): TreeNode[] | undefined;
+    onChevronClick(): void;
+    private onNodeToggle;
+    private onNodeAction;
+    private onNodeClick;
+    private onKeyDown;
+    dispatchSelect(): void;
+    renderLabel(): import("lit-html").TemplateResult<1>;
+    renderChevron(): import("lit-html").TemplateResult<1>;
+    renderNodeButton(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,195 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import { IxDropdownTreeTestIds } from './IxDropdownTreeTestIds.js';
+let IxDropdownTreeNode = class IxDropdownTreeNode extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.treeNode = {};
+        this.level = 0;
+        this.expanded = false;
+        this.selected = false;
+        this.hasActionButton = false;
+    }
+    get isParentNode() {
+        return this.treeNode.children;
+    }
+    onChevronClick() {
+        this.treeNode = { ...this.treeNode, expanded: !this.treeNode.expanded };
+    }
+    onNodeToggle(node) {
+        const event = new CustomEvent('tree-node-toggle', {
+            detail: {
+                message: {
+                    node,
+                },
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    onNodeAction() {
+        const event = new CustomEvent('tree-node-action', {
+            detail: {
+                message: {
+                    id: this.treeNode.id,
+                    name: this.treeNode.label,
+                },
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    onNodeClick(ev) {
+        const t = ev.target;
+        if (t.tagName === 'MD-ICON-BUTTON') {
+            return;
+        }
+        this.dispatchSelect();
+    }
+    onKeyDown(ev) {
+        const t = ev.target;
+        if (t.tagName === 'MD-ICON-BUTTON') {
+            return;
+        }
+        this.dispatchSelect();
+    }
+    dispatchSelect() {
+        if (!this.isParentNode) {
+            this.dispatchEvent(new CustomEvent('tree-node-select', {
+                detail: { message: { id: this.treeNode.id } },
+            }));
+        }
+    }
+    renderLabel() {
+        return html `<p
+      class="dlr-text-small m-0 ${this.isParentNode ? 'font-extrabold' : ''}"
+      data-testid=${this.isParentNode
+            ? IxDropdownTreeTestIds.PARENT_NODE_LABEL
+            : IxDropdownTreeTestIds.CHILD_NODE_LABEL}
+    >
+      ${this.treeNode.label}
+    </p>`;
+    }
+    renderChevron() {
+        if (!this.isParentNode) {
+            return html `<div style="width: 4px"></div>`;
+        }
+        return html `<ix-icon-button
+      style="color:black;"
+      .icon=${this.expanded ? 'arrow_drop_down' : 'arrow_right'}
+      @click=${() => this.onNodeToggle(this.treeNode)}
+      data-testid=${IxDropdownTreeTestIds.PARENT_NODE_CHEVRON}
+    ></ix-icon-button>`;
+    }
+    renderNodeButton() {
+        return !this.isParentNode
+            ? html `
+          <ix-icon-button
+            class="text-slate-600"
+            @click=${() => {
+                this.onNodeAction();
+            }}
+            .icon=${'content_copy'}
+          >
+          </ix-icon-button>
+        `
+            : nothing;
+    }
+    render() {
+        return html `<div>
+      <div
+        class="container
+            ${!this.isParentNode ? 'hover-bg-indigo-100' : ''}
+            ${this.selected && !this.isParentNode ? 'bg-indigo-100' : ''}
+          "
+        @keydown=${this.onKeyDown}
+        tabindex="0"
+        @click=${this.onNodeClick}
+      >
+        <div
+          class="toggle-container ${!this.hasActionButton ? 'my-2' : ''}"
+          style="padding-left: ${this.level * 1}rem"
+        >
+          ${this.renderChevron()} ${this.renderLabel()}
+        </div>
+        ${this.hasActionButton ? this.renderNodeButton() : nothing}
+      </div>
+      <slot></slot>
+    </div>`;
+    }
+};
+IxDropdownTreeNode.styles = [
+    css `
+      ix-icon-button {
+        --md-sys-color-on-surface-variant: var(--md-sys-color-primary);
+      }
+
+      .dlr-text-small {
+        font-family: var(--root-primary-font);
+        font-size: var(--text-small-size);
+        line-height: var(--text-small-line-height);
+        letter-spacing: var(--text-small-letter-spacing);
+        font-weight: var(--text-small-weight);
+        -webkit-text-decoration: var(--text-small-decoration);
+        text-decoration: var(--text-small-decoration);
+        text-transform: var(--text-small-transform);
+      }
+
+      .font-extrabold {
+        font-weight: 800;
+      }
+
+      .text-slate-600 {
+        color: rgb(71 85 105 / 1);
+      }
+
+      .container {
+        --_indigo-100: rgb(224 231 255 / 1);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top-right-radius: 9999px;
+        border-bottom-right-radius: 9999px;
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .hover-bg-indigo-100:hover,
+      .bg-indigo-100 {
+        background-color: var(--_indigo-100);
+      }
+
+      .toggle-container {
+        display: flex;
+        align-items: center;
+      }
+
+      .my-2 {
+        margin-block: 0.5rem;
+      }
+
+      .m-0 {
+        margin: 0;
+      }
+    `,
+];
+__decorate([
+    property({ type: Object })
+], IxDropdownTreeNode.prototype, "treeNode", void 0);
+__decorate([
+    property({ type: Number })
+], IxDropdownTreeNode.prototype, "level", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxDropdownTreeNode.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxDropdownTreeNode.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxDropdownTreeNode.prototype, "hasActionButton", void 0);
+IxDropdownTreeNode = __decorate([
+    customElement('ix-dropdown-tree-node')
+], IxDropdownTreeNode);
+export { IxDropdownTreeNode };
+//# sourceMappingURL=ix-dropdown-tree-node.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-dropdown-tree-node.js","sourceRoot":"","sources":["../src/ix-dropdown-tree-node.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxDropdownTreeNodeData as TreeNode } from './ix-dropdown-tree-types.js';\nimport { IxDropdownTreeTestIds } from './IxDropdownTreeTestIds.js';\n\n@customElement('ix-dropdown-tree-node')\nexport class IxDropdownTreeNode extends LitElement {\n  static readonly styles = [\n    css`\n      ix-icon-button {\n        --md-sys-color-on-surface-variant: var(--md-sys-color-primary);\n      }\n\n      .dlr-text-small {\n        font-family: var(--root-primary-font);\n        font-size: var(--text-small-size);\n        line-height: var(--text-small-line-height);\n        letter-spacing: var(--text-small-letter-spacing);\n        font-weight: var(--text-small-weight);\n        -webkit-text-decoration: var(--text-small-decoration);\n        text-decoration: var(--text-small-decoration);\n        text-transform: var(--text-small-transform);\n      }\n\n      .font-extrabold {\n        font-weight: 800;\n      }\n\n      .text-slate-600 {\n        color: rgb(71 85 105 / 1);\n      }\n\n      .container {\n        --_indigo-100: rgb(224 231 255 / 1);\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        border-top-right-radius: 9999px;\n        border-bottom-right-radius: 9999px;\n        cursor: pointer;\n        user-select: none;\n      }\n\n      .hover-bg-indigo-100:hover,\n      .bg-indigo-100 {\n        background-color: var(--_indigo-100);\n      }\n\n      .toggle-container {\n        display: flex;\n        align-items: center;\n      }\n\n      .my-2 {\n        margin-block: 0.5rem;\n      }\n\n      .m-0 {\n        margin: 0;\n      }\n    `,\n  ];\n\n  @property({ type: Object }) treeNode: TreeNode = {} as TreeNode;\n\n  @property({ type: Number }) level = 0;\n\n  @property({ type: Boolean }) expanded = false;\n\n  @property({ type: Boolean }) selected = false;\n\n  @property({ type: Boolean }) hasActionButton = false;\n\n  get isParentNode() {\n    return this.treeNode.children;\n  }\n\n  onChevronClick() {\n    this.treeNode = { ...this.treeNode, expanded: !this.treeNode.expanded };\n  }\n\n  private onNodeToggle(node: TreeNode): void {\n    const event = new CustomEvent('tree-node-toggle', {\n      detail: {\n        message: {\n          node,\n        },\n      },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  private onNodeAction(): void {\n    const event = new CustomEvent('tree-node-action', {\n      detail: {\n        message: {\n          id: this.treeNode.id,\n          name: this.treeNode.label,\n        },\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private onNodeClick(ev: Event): void {\n    const t = ev.target as HTMLElement;\n    if (t.tagName === 'MD-ICON-BUTTON') {\n      return;\n    }\n    this.dispatchSelect();\n  }\n\n  private onKeyDown(ev: KeyboardEvent): void {\n    const t = ev.target as HTMLElement;\n    if (t.tagName === 'MD-ICON-BUTTON') {\n      return;\n    }\n    this.dispatchSelect();\n  }\n\n  dispatchSelect() {\n    if (!this.isParentNode) {\n      this.dispatchEvent(\n        new CustomEvent('tree-node-select', {\n          detail: { message: { id: this.treeNode.id } },\n        }),\n      );\n    }\n  }\n\n  renderLabel() {\n    return html`<p\n      class=\"dlr-text-small m-0 ${this.isParentNode ? 'font-extrabold' : ''}\"\n      data-testid=${this.isParentNode\n        ? IxDropdownTreeTestIds.PARENT_NODE_LABEL\n        : IxDropdownTreeTestIds.CHILD_NODE_LABEL}\n    >\n      ${this.treeNode.label}\n    </p>`;\n  }\n\n  renderChevron() {\n    if (!this.isParentNode) {\n      return html`<div style=\"width: 4px\"></div>`;\n    }\n    return html`<ix-icon-button\n      style=\"color:black;\"\n      .icon=${this.expanded ? 'arrow_drop_down' : 'arrow_right'}\n      @click=${() => this.onNodeToggle(this.treeNode)}\n      data-testid=${IxDropdownTreeTestIds.PARENT_NODE_CHEVRON}\n    ></ix-icon-button>`;\n  }\n\n  renderNodeButton() {\n    return !this.isParentNode\n      ? html`\n          <ix-icon-button\n            class=\"text-slate-600\"\n            @click=${() => {\n              this.onNodeAction();\n            }}\n            .icon=${'content_copy'}\n          >\n          </ix-icon-button>\n        `\n      : nothing;\n  }\n\n  render() {\n    return html`<div>\n      <div\n        class=\"container\n            ${!this.isParentNode ? 'hover-bg-indigo-100' : ''}\n            ${this.selected && !this.isParentNode ? 'bg-indigo-100' : ''}\n          \"\n        @keydown=${this.onKeyDown}\n        tabindex=\"0\"\n        @click=${this.onNodeClick}\n      >\n        <div\n          class=\"toggle-container ${!this.hasActionButton ? 'my-2' : ''}\"\n          style=\"padding-left: ${this.level * 1}rem\"\n        >\n          ${this.renderChevron()} ${this.renderLabel()}\n        </div>\n        ${this.hasActionButton ? this.renderNodeButton() : nothing}\n      </div>\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+export const DropdownTreeStyles = css `
+  ix-icon-button {
+    --md-sys-color-on-surface-variant: var(--md-sys-color-primary);
+  }
+`;
+//# sourceMappingURL=ix-dropdown-tree-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-dropdown-tree-styles.js","sourceRoot":"","sources":["../src/ix-dropdown-tree-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;CAIpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const DropdownTreeStyles = css`\n  ix-icon-button {\n    --md-sys-color-on-surface-variant: var(--md-sys-color-primary);\n  }\n`;\n"]}

package/dist/ix-dropdown-tree-types.d.ts

@@ -0,0 +1,6 @@
+export interface IxDropdownTreeNodeData {
+    label: string;
+    id: string;
+    children?: IxDropdownTreeNodeData[];
+    expanded?: boolean;
+}

package/dist/ix-dropdown-tree-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ix-dropdown-tree-types.js.map

package/dist/ix-dropdown-tree-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-dropdown-tree-types.js","sourceRoot":"","sources":["../src/ix-dropdown-tree-types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IxDropdownTreeNodeData {\n  label: string;\n  id: string;\n  children?: IxDropdownTreeNodeData[];\n  expanded?: boolean;\n}\n"]}

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

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

package/dist/ix-dropdown-tree.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-dropdown-tree.js","sourceRoot":"","sources":["../src/ix-dropdown-tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { IxDropdownTree } from './IxDropdownTree.js';\n\nwindow.customElements.define('ix-dropdown-tree', IxDropdownTree);\n"]}

package/dist/test/ix-dropdown-tree.test.d.ts

@@ -0,0 +1 @@
+import '../ix-dropdown-tree.js';

package/dist/test/ix-dropdown-tree.test.js

@@ -0,0 +1,54 @@
+import '../ix-dropdown-tree.js';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { IxDropdownTreeTestIds } from '../IxDropdownTreeTestIds.js';
+const testNode = {
+    label: 'root',
+    id: 'root',
+    children: [
+        {
+            label: 'MICROSOFT EUROPE',
+            id: 'MS_EU',
+            children: [
+                {
+                    label: 'Test Role 6',
+                    id: 'role-006',
+                },
+            ],
+        },
+    ],
+};
+const createElement = () => fixture(html `<ix-dropdown-tree .rootNode=${testNode}></ix-dropdown-tree>`);
+const selectTestId = (element, target) => element.shadowRoot?.querySelector(`[data-testid="${target}"]`);
+describe('<ix-dropdown-tree>', () => {
+    it('should render the correct label', async () => {
+        const element = await createElement();
+        expect(element, 'element').to.exist;
+        const parentNode = selectTestId(element, IxDropdownTreeTestIds.PARENT_NODE);
+        expect(parentNode, 'parent node').to.exist;
+        const label = selectTestId(parentNode, IxDropdownTreeTestIds.PARENT_NODE_LABEL);
+        expect(label).to.exist;
+        await expect(label.innerText).to.eq('MICROSOFT EUROPE');
+    });
+    it('should render the chevron icon', async () => {
+        const element = await createElement();
+        expect(element, 'element').to.exist;
+        const parentNode = selectTestId(element, IxDropdownTreeTestIds.PARENT_NODE);
+        expect(parentNode, 'parent node').to.exist;
+        const chevron = selectTestId(parentNode, IxDropdownTreeTestIds.PARENT_NODE_CHEVRON);
+        expect(chevron, 'chevron').to.exist;
+        chevron.click();
+    });
+    it('should render the tree', async () => {
+        const element = await createElement();
+        expect(element, 'element').to.exist;
+        const parentNode = selectTestId(element, IxDropdownTreeTestIds.PARENT_NODE);
+        expect(parentNode, 'parent node').to.exist;
+        const childNode = parentNode?.querySelector(`[data-testid="${IxDropdownTreeTestIds.CHILD_NODE}"]`);
+        expect(childNode, 'child node').to.exist;
+        const label = selectTestId(childNode, IxDropdownTreeTestIds.CHILD_NODE_LABEL);
+        expect(label, 'label').to.exist;
+        await expect(label.innerText).to.eq('Test Role 6');
+    });
+});
+//# sourceMappingURL=ix-dropdown-tree.test.js.map

package/dist/test/ix-dropdown-tree.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-dropdown-tree.test.js","sourceRoot":"","sources":["../../src/test/ix-dropdown-tree.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../ix-dropdown-tree.js';\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { IxDropdownTreeNodeData } from '../ix-dropdown-tree-types.js';\nimport { IxDropdownTreeNode as TreeNode } from '../ix-dropdown-tree-node.js';\nimport { IxDropdownTree } from '../IxDropdownTree.js';\nimport { IxDropdownTreeTestIds } from '../IxDropdownTreeTestIds.js';\n\nconst testNode: IxDropdownTreeNodeData = {\n  label: 'root',\n  id: 'root',\n  children: [\n    {\n      label: 'MICROSOFT EUROPE',\n      id: 'MS_EU',\n      children: [\n        {\n          label: 'Test Role 6',\n          id: 'role-006',\n        },\n      ],\n    },\n  ],\n};\n\nconst createElement = () =>\n  fixture<IxDropdownTree>(\n    html`<ix-dropdown-tree .rootNode=${testNode}></ix-dropdown-tree>`,\n  );\n\nconst selectTestId = <T>(element: HTMLElement, target: string) =>\n  element.shadowRoot?.querySelector(`[data-testid=\"${target}\"]`) as\n    | T\n    | undefined;\n\ndescribe('<ix-dropdown-tree>', () => {\n  it('should render the correct label', async () => {\n    const element: IxDropdownTree = await createElement();\n    expect(element, 'element').to.exist;\n\n    const parentNode = selectTestId<TreeNode>(\n      element,\n      IxDropdownTreeTestIds.PARENT_NODE,\n    );\n    expect(parentNode, 'parent node').to.exist;\n\n    const label = selectTestId<HTMLParagraphElement>(\n      parentNode!,\n      IxDropdownTreeTestIds.PARENT_NODE_LABEL,\n    );\n    expect(label).to.exist;\n    await expect(label!.innerText).to.eq('MICROSOFT EUROPE');\n  });\n\n  it('should render the chevron icon', async () => {\n    const element: IxDropdownTree = await createElement();\n    expect(element, 'element').to.exist;\n\n    const parentNode = selectTestId<TreeNode>(\n      element,\n      IxDropdownTreeTestIds.PARENT_NODE,\n    );\n    expect(parentNode, 'parent node').to.exist;\n\n    const chevron = selectTestId<HTMLElement>(\n      parentNode!,\n      IxDropdownTreeTestIds.PARENT_NODE_CHEVRON,\n    );\n    expect(chevron, 'chevron').to.exist;\n    chevron!.click();\n  });\n\n  it('should render the tree', async () => {\n    const element: IxDropdownTree = await createElement();\n    expect(element, 'element').to.exist;\n\n    const parentNode = selectTestId<TreeNode>(\n      element,\n      IxDropdownTreeTestIds.PARENT_NODE,\n    );\n    expect(parentNode, 'parent node').to.exist;\n\n    const childNode = parentNode?.querySelector(\n      `[data-testid=\"${IxDropdownTreeTestIds.CHILD_NODE}\"]`,\n    ) as TreeNode;\n    expect(childNode, 'child node').to.exist;\n\n    const label = selectTestId<HTMLParagraphElement>(\n      childNode!,\n      IxDropdownTreeTestIds.CHILD_NODE_LABEL,\n    );\n    expect(label, 'label').to.exist;\n    await expect(label!.innerText).to.eq('Test Role 6');\n  });\n});\n"]}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@digital-realty/ix-dropdown-tree",
+  "description": "Webcomponent ix-dropdown-tree following open-wc recommendations",
+  "license": "MIT",
+  "author": "ix-dropdown-tree",
+  "version": "1.0.2",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./ix-dropdown-tree.js": "./dist/ix-dropdown-tree.js",
+    "./IxDropdownTreeNodeData": "./dist/ix-dropdown-tree-types.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "prepare": "husky",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@digital-realty/ix-icon-button": "^1.1.6",
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@open-wc/eslint-config": "^12.0.3",
+    "@open-wc/testing": "^4.0.0",
+    "@types/mocha": "^10.0.7",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.18.2",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "root": true,
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "files": [
+    "/dist",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "gitHead": "f19908b2ba8f2d9273559982f0417f724466ae5c"
+}