@digital-realty/ix-tree 1.0.16 → 1.0.18

package/dist/IIxTreeNode.d.ts

@@ -1,10 +1,10 @@
-export interface IIxTreeNode {
-    children?: Array<IIxTreeNode>;
-    expanded?: boolean;
-    icon?: string;
-    id: string;
-    label: string;
-    parentId?: string;
-    checked?: boolean;
-    indeterminate?: boolean;
-}
+export interface IIxTreeNode {
+    children?: Array<IIxTreeNode>;
+    expanded?: boolean;
+    icon?: string;
+    id: string;
+    label: string;
+    parentId?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+}

package/dist/IIxTreeNode.js

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

package/dist/IxTree.d.ts

@@ -1,28 +1,28 @@
-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 type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';
-export declare class IxTree extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
-    connectedCallback(): void;
-    ariaLabel: string;
-    rootNode: IIxTreeNode;
-    selectedNodeId: string;
-    checkboxesEnabled: boolean;
-    appearance: Appearance;
-    private _activeItemId;
-    private _rootNode;
-    private _selectedNodeId;
-    private onTreeNodeClick;
-    private dispatchTreeNodeExpandToggle;
-    private onTreeNodeToggle;
-    private onTreeNodeCheck;
-    private renderNodes;
-    /**
-     * Expand the active tree node and all of its parent nodes.
-     */
-    private expandActiveTreeNode;
-    protected render(): TemplateResult<1>;
-}
+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 type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';
+export declare class IxTree extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    ariaLabel: string;
+    rootNode: IIxTreeNode;
+    selectedNodeId: string;
+    checkboxesEnabled: boolean;
+    appearance: Appearance;
+    private _activeItemId;
+    private _rootNode;
+    private _selectedNodeId;
+    private onTreeNodeClick;
+    private dispatchTreeNodeExpandToggle;
+    private onTreeNodeToggle;
+    private onTreeNodeCheck;
+    private renderNodes;
+    /**
+     * Expand the active tree node and all of its parent nodes.
+     */
+    private expandActiveTreeNode;
+    protected render(): TemplateResult<1>;
+}

package/dist/IxTree.js

@@ -1,64 +1,64 @@
-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 { findChildNodeById, updateNodeCheckedStatus } from './tree-utils.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.checkboxesEnabled = false;
-        this.appearance = 'default';
-        this._activeItemId = '';
-        this._selectedNodeId = '';
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._activeItemId = this.selectedNodeId; // store in state
-        this._selectedNodeId = this.selectedNodeId; // store in state
-        this._rootNode = this.rootNode;
-    }
-    onTreeNodeClick(e) {
-        this.dispatchEvent(new CustomEvent('on-tree-node-selected', {
-            detail: {
-                message: e.detail.message,
-            },
-        }));
-        this._selectedNodeId = e.detail.message.id;
-    }
-    dispatchTreeNodeExpandToggle(e) {
-        this.dispatchEvent(new CustomEvent('on-tree-node-expand-toggle', {
-            detail: {
-                message: e.detail.message,
-            },
-        }));
-    }
-    onTreeNodeToggle(e) {
-        const newRootNode = { ...this._rootNode };
-        const { node } = e.detail.message;
-        node.expanded = !node.expanded;
-        this._rootNode = newRootNode;
-        this._activeItemId = node.id;
-        this.dispatchTreeNodeExpandToggle(e);
-        this.requestUpdate();
-    }
-    onTreeNodeCheck(e) {
-        const { node } = e.detail.message;
-        updateNodeCheckedStatus(node, this._rootNode);
-        this._rootNode = structuredClone(this._rootNode);
-        this.dispatchEvent(new CustomEvent('on-tree-node-checked', {
-            detail: {
-                message: e.detail.message,
-            },
-        }));
-    }
-    renderNodes(nodes = [], level = 0) {
-        const renderedNodes = [];
-        for (const node of nodes) {
+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 { findChildNodeById, updateNodeCheckedStatus } from './tree-utils.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.checkboxesEnabled = false;
+        this.appearance = 'default';
+        this._activeItemId = '';
+        this._selectedNodeId = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._activeItemId = this.selectedNodeId; // store in state
+        this._selectedNodeId = this.selectedNodeId; // store in state
+        this._rootNode = this.rootNode;
+    }
+    onTreeNodeClick(e) {
+        this.dispatchEvent(new CustomEvent('on-tree-node-selected', {
+            detail: {
+                message: e.detail.message,
+            },
+        }));
+        this._selectedNodeId = e.detail.message.id;
+    }
+    dispatchTreeNodeExpandToggle(e) {
+        this.dispatchEvent(new CustomEvent('on-tree-node-expand-toggle', {
+            detail: {
+                message: e.detail.message,
+            },
+        }));
+    }
+    onTreeNodeToggle(e) {
+        const newRootNode = { ...this._rootNode };
+        const { node } = e.detail.message;
+        node.expanded = !node.expanded;
+        this._rootNode = newRootNode;
+        this._activeItemId = node.id;
+        this.dispatchTreeNodeExpandToggle(e);
+        this.requestUpdate();
+    }
+    onTreeNodeCheck(e) {
+        const { node } = e.detail.message;
+        updateNodeCheckedStatus(node, this._rootNode);
+        this._rootNode = structuredClone(this._rootNode);
+        this.dispatchEvent(new CustomEvent('on-tree-node-checked', {
+            detail: {
+                message: e.detail.message,
+            },
+        }));
+    }
+    renderNodes(nodes = [], level = 0) {
+        const renderedNodes = [];
+        for (const node of nodes) {
             const renderedNode = html `<ix-tree-node
         .isActiveTreeNode=${this._activeItemId === node.id}
         .isExpanded=${!!node.expanded}
@@ -72,65 +72,65 @@ export class IxTree extends LitElement {
         @on-tree-node-check=${this.onTreeNodeCheck}
       >
         ${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}
-      </ix-tree-node>`;
-            renderedNodes.push(renderedNode);
-        }
-        return renderedNodes;
-    }
-    /**
-     * Expand the active tree node and all of its parent nodes.
-     */
-    expandActiveTreeNode() {
-        const nodeToSelect = findChildNodeById(this._rootNode, this._activeItemId) || this._rootNode;
-        let iteration = 0;
-        const MAX_ITERATIONS = 1000;
-        if (!nodeToSelect.parentId) {
-            return;
-        }
-        let node = findChildNodeById(this._rootNode, nodeToSelect.parentId);
-        while (node && iteration < MAX_ITERATIONS) {
-            node.expanded = true;
-            if (!node.parentId) {
-                break;
-            }
-            node = findChildNodeById(this._rootNode, node.parentId);
-            iteration += 1;
-        }
-    }
-    render() {
-        this.expandActiveTreeNode();
+      </ix-tree-node>`;
+            renderedNodes.push(renderedNode);
+        }
+        return renderedNodes;
+    }
+    /**
+     * Expand the active tree node and all of its parent nodes.
+     */
+    expandActiveTreeNode() {
+        const nodeToSelect = findChildNodeById(this._rootNode, this._activeItemId) || this._rootNode;
+        let iteration = 0;
+        const MAX_ITERATIONS = 1000;
+        if (!nodeToSelect.parentId) {
+            return;
+        }
+        let node = findChildNodeById(this._rootNode, nodeToSelect.parentId);
+        while (node && iteration < MAX_ITERATIONS) {
+            node.expanded = true;
+            if (!node.parentId) {
+                break;
+            }
+            node = findChildNodeById(this._rootNode, node.parentId);
+            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([
-    property({ type: Boolean })
-], IxTree.prototype, "checkboxesEnabled", void 0);
-__decorate([
-    property({ type: String })
-], IxTree.prototype, "appearance", void 0);
-__decorate([
-    state()
-], IxTree.prototype, "_activeItemId", void 0);
-__decorate([
-    state()
-], IxTree.prototype, "_rootNode", void 0);
-__decorate([
-    state()
-], IxTree.prototype, "_selectedNodeId", void 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([
+    property({ type: Boolean })
+], IxTree.prototype, "checkboxesEnabled", void 0);
+__decorate([
+    property({ type: String })
+], IxTree.prototype, "appearance", 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/IxTreeNode.d.ts

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

package/dist/IxTreeNode.js

@@ -1,30 +1,30 @@
-import { __decorate } from "tslib";
-import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import '@digital-realty/ix-checkbox/ix-checkbox.js';
-import '@digital-realty/theme';
-import { html, LitElement, nothing } from 'lit';
-import { property, state } 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.6;
-const TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;
-export class IxTreeNode extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isActiveTreeNode = false;
-        this.isExpanded = false;
-        this.isSelected = false;
-        this.level = 0;
-        this.checkboxEnabled = false;
-        this.appearance = 'default';
-        this._hasScrolledToActive = false;
-    }
-    hasChildren() {
-        return this.node.children !== undefined && this.node.children.length > 0;
-    }
-    getIcon() {
-        const icon = this.isExpanded ? 'arrow_drop_down' : 'arrow_right';
+import { __decorate } from "tslib";
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-checkbox/ix-checkbox.js';
+import '@digital-realty/theme';
+import { html, LitElement, nothing } from 'lit';
+import { property, state } 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.6;
+const TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;
+export class IxTreeNode extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isActiveTreeNode = false;
+        this.isExpanded = false;
+        this.isSelected = false;
+        this.level = 0;
+        this.checkboxEnabled = false;
+        this.appearance = 'default';
+        this._hasScrolledToActive = false;
+    }
+    hasChildren() {
+        return this.node.children !== undefined && this.node.children.length > 0;
+    }
+    getIcon() {
+        const icon = this.isExpanded ? 'arrow_drop_down' : 'arrow_right';
         return html `<div
       style=${`${this.hasChildren() ? '' : 'visibility:hidden'}`}
     >
@@ -34,58 +34,58 @@ export class IxTreeNode extends LitElement {
         test-id="tree-node-expand-toggle"
       >
       </ix-icon-button>
-    </div>`;
-    }
-    onNodeClick(node) {
-        const event = new CustomEvent('on-tree-node-click', {
-            detail: {
-                message: {
-                    node,
-                    id: node.id,
-                    label: node.label,
-                    parentId: node.parentId,
-                },
-            },
-        });
-        this.dispatchEvent(event);
-    }
-    onNodeToggle(node) {
-        const event = new CustomEvent('on-tree-node-toggle', {
-            detail: {
-                message: {
-                    node,
-                    id: node.id,
-                    label: node.label,
-                    parentId: node.parentId,
-                },
-            },
-        });
-        this.dispatchEvent(event);
-    }
-    onNodeCheck(node) {
-        /* eslint-disable no-param-reassign */
-        if (node.checked) {
-            node.checked = false;
-            node.indeterminate = false;
-        }
-        else {
-            node.checked = true;
-            node.indeterminate = false;
-        }
-        /* eslint-enable no-param-reassign */
-        const event = new CustomEvent('on-tree-node-check', {
-            detail: {
-                message: {
-                    node,
-                    id: node.id,
-                },
-            },
-        });
-        this.dispatchEvent(event);
-    }
-    render() {
-        const selectedClass = this.isSelected ? ' ix-tree-node__selected' : '';
-        const icon = this.node.icon ? this.node.icon : 'account_box';
+    </div>`;
+    }
+    onNodeClick(node) {
+        const event = new CustomEvent('on-tree-node-click', {
+            detail: {
+                message: {
+                    node,
+                    id: node.id,
+                    label: node.label,
+                    parentId: node.parentId,
+                },
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    onNodeToggle(node) {
+        const event = new CustomEvent('on-tree-node-toggle', {
+            detail: {
+                message: {
+                    node,
+                    id: node.id,
+                    label: node.label,
+                    parentId: node.parentId,
+                },
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    onNodeCheck(node) {
+        /* eslint-disable no-param-reassign */
+        if (node.checked) {
+            node.checked = false;
+            node.indeterminate = false;
+        }
+        else {
+            node.checked = true;
+            node.indeterminate = false;
+        }
+        /* eslint-enable no-param-reassign */
+        const event = new CustomEvent('on-tree-node-check', {
+            detail: {
+                message: {
+                    node,
+                    id: node.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}
@@ -98,73 +98,72 @@ export class IxTreeNode extends LitElement {
         style="padding-left: ${this.level * TREE_NODE_ICON_SIZE_REM}rem"
       >
         <div>${this.getIcon()}</div>
-        ${this.checkboxEnabled
+        ${this.checkboxEnabled
             ? html `<ix-checkbox
               @click=${() => this.onNodeCheck(this.node)}
               label=""
               style="margin: 6px 12px 0px 12px"
               .checked=${this.node.checked}
               .indeterminate=${this.node.indeterminate}
-            ></ix-checkbox>`
+            ></ix-checkbox>`
             : nothing}
         <ix-icon-button
           icon=${icon}
           appearance=${this.appearance}
           test-id=${`${this.node.id}-on-node-click-icon-button`}
-          style=${this.hasChildren() ? '' : 'padding-left:2px;'}
           @click=${() => this.onNodeClick(this.node)}
         ></ix-icon-button>
         <div
           class="ix-tree-node__label"
-          @click=${() => {
-            this.checkboxEnabled
-                ? this.onNodeToggle(this.node)
-                : this.onNodeClick(this.node);
+          @click=${() => {
+            this.checkboxEnabled
+                ? this.onNodeToggle(this.node)
+                : this.onNodeClick(this.node);
         }}
-          @keyup=${() => {
-            this.checkboxEnabled
-                ? this.onNodeToggle(this.node)
-                : this.onNodeClick(this.node);
+          @keyup=${() => {
+            this.checkboxEnabled
+                ? this.onNodeToggle(this.node)
+                : this.onNodeClick(this.node);
         }}
         >
           ${this.node.label}
         </div>
       </div>
       <slot></slot>
-    </div>`;
-    }
-    updated() {
-        var _a;
-        if (!this._hasScrolledToActive) {
-            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' });
-            this._hasScrolledToActive = true;
-        }
-    }
-}
-IxTreeNode.styles = [IxTreeStyles];
-__decorate([
-    property({ type: Boolean })
-], IxTreeNode.prototype, "isActiveTreeNode", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxTreeNode.prototype, "isExpanded", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxTreeNode.prototype, "isSelected", void 0);
-__decorate([
-    property({ type: Number })
-], IxTreeNode.prototype, "level", void 0);
-__decorate([
-    property({ type: Object })
-], IxTreeNode.prototype, "node", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxTreeNode.prototype, "checkboxEnabled", void 0);
-__decorate([
-    property({ type: String })
-], IxTreeNode.prototype, "appearance", void 0);
-__decorate([
-    state()
-], IxTreeNode.prototype, "_hasScrolledToActive", void 0);
+    </div>`;
+    }
+    updated() {
+        var _a;
+        if (!this._hasScrolledToActive) {
+            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' });
+            this._hasScrolledToActive = true;
+        }
+    }
+}
+IxTreeNode.styles = [IxTreeStyles];
+__decorate([
+    property({ type: Boolean })
+], IxTreeNode.prototype, "isActiveTreeNode", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxTreeNode.prototype, "isExpanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxTreeNode.prototype, "isSelected", void 0);
+__decorate([
+    property({ type: Number })
+], IxTreeNode.prototype, "level", void 0);
+__decorate([
+    property({ type: Object })
+], IxTreeNode.prototype, "node", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxTreeNode.prototype, "checkboxEnabled", void 0);
+__decorate([
+    property({ type: String })
+], IxTreeNode.prototype, "appearance", void 0);
+__decorate([
+    state()
+], IxTreeNode.prototype, "_hasScrolledToActive", void 0);
 //# sourceMappingURL=IxTreeNode.js.map

package/dist/IxTreeNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxTreeNode.js","sourceRoot":"","sources":["../src/IxTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport '@digital-realty/theme';\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\nimport { Appearance } from './IxTree.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.6;\nconst TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;\n\nexport class IxTreeNode extends LitElement {\n  static readonly styles = [IxTreeStyles];\n\n  @property({ type: Boolean }) isActiveTreeNode: boolean = false;\n\n  @property({ type: Boolean }) isExpanded: boolean = false;\n\n  @property({ type: Boolean }) isSelected: boolean = false;\n\n  @property({ type: Number }) level: number = 0;\n\n  @property({ type: Object }) node!: IIxTreeNode;\n\n  @property({ type: Boolean }) checkboxEnabled: boolean = false;\n\n  @property({ type: String }) appearance: Appearance = 'default';\n\n  @state() private _hasScrolledToActive: boolean = false;\n\n  private hasChildren() {\n    return this.node.children !== undefined && this.node.children.length > 0;\n  }\n\n  private getIcon(): TemplateResult<1> | typeof nothing {\n    const icon = this.isExpanded ? 'arrow_drop_down' : 'arrow_right';\n    return html`<div\n      style=${`${this.hasChildren() ? '' : 'visibility:hidden'}`}\n    >\n      <ix-icon-button\n        @click=${() => this.onNodeToggle(this.node)}\n        icon=${icon}\n        test-id=\"tree-node-expand-toggle\"\n      >\n      </ix-icon-button>\n    </div>`;\n  }\n\n  private onNodeClick(node: IIxTreeNode): void {\n    const event = new CustomEvent('on-tree-node-click', {\n      detail: {\n        message: {\n          node,\n          id: node.id,\n          label: node.label,\n          parentId: node.parentId,\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          node,\n          id: node.id,\n          label: node.label,\n          parentId: node.parentId,\n        },\n      },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  private onNodeCheck(node: IIxTreeNode): void {\n    /* eslint-disable no-param-reassign */\n    if (node.checked) {\n      node.checked = false;\n      node.indeterminate = false;\n    } else {\n      node.checked = true;\n      node.indeterminate = false;\n    }\n    /* eslint-enable no-param-reassign */\n    const event = new CustomEvent('on-tree-node-check', {\n      detail: {\n        message: {\n          node,\n          id: node.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      data-id=${this.node.id}\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>${this.getIcon()}</div>\n        ${this.checkboxEnabled\n          ? html`<ix-checkbox\n              @click=${() => this.onNodeCheck(this.node)}\n              label=\"\"\n              style=\"margin: 6px 12px 0px 12px\"\n              .checked=${this.node.checked}\n              .indeterminate=${this.node.indeterminate}\n            ></ix-checkbox>`\n          : nothing}\n        <ix-icon-button\n          icon=${icon}\n          appearance=${this.appearance}\n          test-id=${`${this.node.id}-on-node-click-icon-button`}\n          style=${this.hasChildren() ? '' : 'padding-left:2px;'}\n          @click=${() => this.onNodeClick(this.node)}\n        ></ix-icon-button>\n        <div\n          class=\"ix-tree-node__label\"\n          @click=${() => {\n            this.checkboxEnabled\n              ? this.onNodeToggle(this.node)\n              : this.onNodeClick(this.node);\n          }}\n          @keyup=${() => {\n            this.checkboxEnabled\n              ? this.onNodeToggle(this.node)\n              : this.onNodeClick(this.node);\n          }}\n        >\n          ${this.node.label}\n        </div>\n      </div>\n      <slot></slot>\n    </div>`;\n  }\n\n  protected updated(): void {\n    if (!this._hasScrolledToActive) {\n      const el = this.shadowRoot?.querySelector('[active-tree-node]');\n      el?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      this._hasScrolledToActive = true;\n    }\n  }\n}\n"]}
+{"version":3,"file":"IxTreeNode.js","sourceRoot":"","sources":["../src/IxTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport '@digital-realty/theme';\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\nimport { Appearance } from './IxTree.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.6;\nconst TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;\n\nexport class IxTreeNode extends LitElement {\n  static readonly styles = [IxTreeStyles];\n\n  @property({ type: Boolean }) isActiveTreeNode: boolean = false;\n\n  @property({ type: Boolean }) isExpanded: boolean = false;\n\n  @property({ type: Boolean }) isSelected: boolean = false;\n\n  @property({ type: Number }) level: number = 0;\n\n  @property({ type: Object }) node!: IIxTreeNode;\n\n  @property({ type: Boolean }) checkboxEnabled: boolean = false;\n\n  @property({ type: String }) appearance: Appearance = 'default';\n\n  @state() private _hasScrolledToActive: boolean = false;\n\n  private hasChildren() {\n    return this.node.children !== undefined && this.node.children.length > 0;\n  }\n\n  private getIcon(): TemplateResult<1> | typeof nothing {\n    const icon = this.isExpanded ? 'arrow_drop_down' : 'arrow_right';\n    return html`<div\n      style=${`${this.hasChildren() ? '' : 'visibility:hidden'}`}\n    >\n      <ix-icon-button\n        @click=${() => this.onNodeToggle(this.node)}\n        icon=${icon}\n        test-id=\"tree-node-expand-toggle\"\n      >\n      </ix-icon-button>\n    </div>`;\n  }\n\n  private onNodeClick(node: IIxTreeNode): void {\n    const event = new CustomEvent('on-tree-node-click', {\n      detail: {\n        message: {\n          node,\n          id: node.id,\n          label: node.label,\n          parentId: node.parentId,\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          node,\n          id: node.id,\n          label: node.label,\n          parentId: node.parentId,\n        },\n      },\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  private onNodeCheck(node: IIxTreeNode): void {\n    /* eslint-disable no-param-reassign */\n    if (node.checked) {\n      node.checked = false;\n      node.indeterminate = false;\n    } else {\n      node.checked = true;\n      node.indeterminate = false;\n    }\n    /* eslint-enable no-param-reassign */\n    const event = new CustomEvent('on-tree-node-check', {\n      detail: {\n        message: {\n          node,\n          id: node.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      data-id=${this.node.id}\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>${this.getIcon()}</div>\n        ${this.checkboxEnabled\n          ? html`<ix-checkbox\n              @click=${() => this.onNodeCheck(this.node)}\n              label=\"\"\n              style=\"margin: 6px 12px 0px 12px\"\n              .checked=${this.node.checked}\n              .indeterminate=${this.node.indeterminate}\n            ></ix-checkbox>`\n          : nothing}\n        <ix-icon-button\n          icon=${icon}\n          appearance=${this.appearance}\n          test-id=${`${this.node.id}-on-node-click-icon-button`}\n          @click=${() => this.onNodeClick(this.node)}\n        ></ix-icon-button>\n        <div\n          class=\"ix-tree-node__label\"\n          @click=${() => {\n            this.checkboxEnabled\n              ? this.onNodeToggle(this.node)\n              : this.onNodeClick(this.node);\n          }}\n          @keyup=${() => {\n            this.checkboxEnabled\n              ? this.onNodeToggle(this.node)\n              : this.onNodeClick(this.node);\n          }}\n        >\n          ${this.node.label}\n        </div>\n      </div>\n      <slot></slot>\n    </div>`;\n  }\n\n  protected updated(): void {\n    if (!this._hasScrolledToActive) {\n      const el = this.shadowRoot?.querySelector('[active-tree-node]');\n      el?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      this._hasScrolledToActive = true;\n    }\n  }\n}\n"]}

package/dist/index.d.ts

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

package/dist/index.js

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

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

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

package/dist/ix-tree-node.js

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

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

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

package/dist/ix-tree-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'lit';
 export const IxTreeStyles = css `
   :root,
   :host :root,
@@ -54,5 +54,5 @@ export const IxTreeStyles = css `
     background-color: rgba(20, 86, 224, 0.1);
     border-left: 3px solid #1456e0;
   }
-`;
+`;
 //# sourceMappingURL=ix-tree-styles.js.map

package/dist/ix-tree.d.ts

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

package/dist/ix-tree.js

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

package/dist/tree-utils.d.ts

@@ -1,3 +1,3 @@
-import { IIxTreeNode } from './IIxTreeNode.js';
-export declare function findChildNodeById(node: IIxTreeNode, id: string): IIxTreeNode | null;
-export declare function updateNodeCheckedStatus(node: IIxTreeNode, rootNode: IIxTreeNode): void;
+import { IIxTreeNode } from './IIxTreeNode.js';
+export declare function findChildNodeById(node: IIxTreeNode, id: string): IIxTreeNode | null;
+export declare function updateNodeCheckedStatus(node: IIxTreeNode, rootNode: IIxTreeNode): void;

package/dist/tree-utils.js

@@ -1,56 +1,56 @@
-export function findChildNodeById(node, id) {
-    if (node.id === id) {
-        return node;
-    }
-    if (!node.children) {
-        return null;
-    }
-    for (const childNode of node.children) {
-        const foundNode = findChildNodeById(childNode, id);
-        if (foundNode) {
-            return foundNode;
-        }
-    }
-    return null;
-}
-export function updateNodeCheckedStatus(node, rootNode) {
-    /* eslint-disable no-param-reassign */
-    function updateChildren(n, checked = false) {
-        n.checked = checked;
-        n.indeterminate = false;
-        if (n.children) {
-            n.children.forEach(child => {
-                updateChildren(child, checked);
-            });
-        }
-    }
-    function updateParents(n) {
-        if (n.parentId) {
-            const currentParent = findChildNodeById(rootNode, n.parentId);
-            if (currentParent && currentParent.children) {
-                if (currentParent.children.every(child => child.checked)) {
-                    currentParent.checked = true;
-                    currentParent.indeterminate = false;
-                }
-                else if (currentParent.children.some(child => child.checked)) {
-                    currentParent.checked = false;
-                    currentParent.indeterminate = true;
-                }
-                else if (currentParent.children.some(c => c.indeterminate)) {
-                    currentParent.checked = false;
-                    currentParent.indeterminate = true;
-                }
-                else {
-                    currentParent.checked = false;
-                    currentParent.indeterminate = false;
-                }
-                updateParents(currentParent);
-            }
-        }
-    }
-    // update all children to match current node checked status
-    updateChildren(node, node.checked);
-    // update all parents checked and indeterminate status
-    updateParents(node);
-}
+export function findChildNodeById(node, id) {
+    if (node.id === id) {
+        return node;
+    }
+    if (!node.children) {
+        return null;
+    }
+    for (const childNode of node.children) {
+        const foundNode = findChildNodeById(childNode, id);
+        if (foundNode) {
+            return foundNode;
+        }
+    }
+    return null;
+}
+export function updateNodeCheckedStatus(node, rootNode) {
+    /* eslint-disable no-param-reassign */
+    function updateChildren(n, checked = false) {
+        n.checked = checked;
+        n.indeterminate = false;
+        if (n.children) {
+            n.children.forEach(child => {
+                updateChildren(child, checked);
+            });
+        }
+    }
+    function updateParents(n) {
+        if (n.parentId) {
+            const currentParent = findChildNodeById(rootNode, n.parentId);
+            if (currentParent && currentParent.children) {
+                if (currentParent.children.every(child => child.checked)) {
+                    currentParent.checked = true;
+                    currentParent.indeterminate = false;
+                }
+                else if (currentParent.children.some(child => child.checked)) {
+                    currentParent.checked = false;
+                    currentParent.indeterminate = true;
+                }
+                else if (currentParent.children.some(c => c.indeterminate)) {
+                    currentParent.checked = false;
+                    currentParent.indeterminate = true;
+                }
+                else {
+                    currentParent.checked = false;
+                    currentParent.indeterminate = false;
+                }
+                updateParents(currentParent);
+            }
+        }
+    }
+    // update all children to match current node checked status
+    updateChildren(node, node.checked);
+    // update all parents checked and indeterminate status
+    updateParents(node);
+}
 //# sourceMappingURL=tree-utils.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-tree following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -26,12 +26,12 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-checkbox": "^1.1.9",
-    "@digital-realty/ix-icon": "*",
-    "@digital-realty/ix-icon-button": "^1.0.19",
-    "@digital-realty/theme": "^1.0.9",
+    "@digital-realty/ix-checkbox": "^1.1.11",
+    "@digital-realty/ix-icon": "^1.0.3",
+    "@digital-realty/ix-icon-button": "^1.0.21",
+    "@digital-realty/theme": "*",
     "@lit-labs/react": "^2.1.0",
-    "@material/web": "^1.0.0",
+    "@material/web": "1.2.0",
     "lit": "^2.0.2",
     "react": "^18.2.0"
   },
@@ -100,5 +100,6 @@
     "package.json",
     "README.md",
     "LICENSE"
-  ]
+  ],
+  "gitHead": "a93ad0076764dc26321faa51bc504ff6b534d836"
 }