@operato/data-tree 9.0.0 → 9.0.2

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [9.0.2](https://github.com/hatiolab/operato/compare/v9.0.1...v9.0.2) (2025-07-01)
+
+
+### :bug: Bug Fix
+
+* invalid package configuration ([ccde20b](https://github.com/hatiolab/operato/commit/ccde20b75e6cbd1f881e5bac631e361aebfd21c3))
+
+
+
+### [9.0.1](https://github.com/hatiolab/operato/compare/v9.0.0...v9.0.1) (2025-07-01)
+
+**Note:** Version bump only for package @operato/data-tree
+
+
+
+
+
 ## [9.0.0](https://github.com/hatiolab/operato/compare/v9.0.0-beta.92...v9.0.0) (2025-06-30)
 
 **Note:** Version bump only for package @operato/data-tree

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ox-tree.js';
+export * from './ox-tree-vertical.js';
+export * from './ox-tree-horizontal.js';

package/dist/src/index.js

@@ -0,0 +1,4 @@
+export * from './ox-tree.js';
+export * from './ox-tree-vertical.js';
+export * from './ox-tree-horizontal.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA","sourcesContent":["export * from './ox-tree.js'\nexport * from './ox-tree-vertical.js'\nexport * from './ox-tree-horizontal.js'\n"]}

package/dist/src/ox-tree-horizontal.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, TemplateResult } from 'lit';
+type TreeItem = {
+    [key: string]: any;
+    __status__?: {
+        [state: string]: boolean | string;
+    };
+};
+export declare class TreeViewHorizontal extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data?: TreeItem | TreeItem[];
+    selected?: TreeItem;
+    idProperty: string;
+    labelProperty: string;
+    descriptionProperty?: string;
+    childrenProperty: string;
+    render(): TemplateResult<1>;
+    renderItem(item: TreeItem): TemplateResult;
+    onClickSelect(e: MouseEvent): void;
+    onClickSelectConfirm(e: MouseEvent): void;
+}
+export {};

package/dist/src/ox-tree-horizontal.js

@@ -0,0 +1,262 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+let TreeViewHorizontal = class TreeViewHorizontal extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.idProperty = 'id';
+        this.labelProperty = 'label';
+        this.childrenProperty = 'children';
+    }
+    render() {
+        if (!this.data)
+            return html ``;
+        const dataArray = Array.isArray(this.data) ? this.data : [this.data];
+        return html `
+      ${dataArray.map(root => html `
+          <ul root>
+            ${this.renderItem(root)}
+          </ul>
+        `)}
+    `;
+    }
+    renderItem(item) {
+        var _a;
+        const id = item[this.idProperty];
+        const label = item[this.labelProperty];
+        const children = item[this.childrenProperty];
+        const expandable = children && children.length > 0;
+        const selected = id === ((_a = this.selected) === null || _a === void 0 ? void 0 : _a[this.idProperty]);
+        return html `
+      <li .item=${item}>
+        <span
+          ?selected=${selected}
+          @click=${this.onClickSelect.bind(this)}
+          @dblclick=${this.onClickSelectConfirm.bind(this)}
+        >
+          <div header>${id}</div>
+          <div label>${label}</div>
+          ${this.descriptionProperty ? html ` <div description>${item[this.descriptionProperty]}&nbsp;</div>` : nothing}
+        </span>
+
+        ${expandable
+            ? html `
+              <ul>
+                ${children.map(child => this.renderItem(child))}
+              </ul>
+            `
+            : html ``}
+      </li>
+    `;
+    }
+    onClickSelect(e) {
+        var _a;
+        e.stopPropagation();
+        const target = e.target;
+        this.selected = (_a = target.closest('li')) === null || _a === void 0 ? void 0 : _a.item;
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: this.selected
+        }));
+    }
+    onClickSelectConfirm(e) {
+        var _a;
+        e.stopPropagation();
+        const target = e.target;
+        this.selected = (_a = target.closest('li')) === null || _a === void 0 ? void 0 : _a.item;
+        this.dispatchEvent(new CustomEvent('select-confirm', {
+            detail: this.selected
+        }));
+    }
+};
+TreeViewHorizontal.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: block;
+        overflow: auto;
+        padding: 1em;
+      }
+
+      ul,
+      li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        position: relative;
+      }
+
+      ul[root] {
+        margin: 0 0 1em;
+        text-align: left;
+      }
+
+      ul[root]:before {
+        display: none;
+      }
+
+      ul {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+      }
+
+      ul {
+        width: 100%;
+      }
+
+      li {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        align-items: center;
+      }
+
+      li:before,
+      li:after {
+        content: '';
+        position: absolute;
+        left: -1em;
+        border-left: 1px solid #666;
+      }
+
+      li:before {
+        top: 0;
+        bottom: 50%;
+      }
+
+      li:after {
+        top: 50%;
+        bottom: 0;
+        border-top: 1px solid #666;
+        width: 1em;
+      }
+
+      ul[root] > li:after {
+        content: none;
+      }
+
+      li:first-child:before {
+        top: 50%;
+      }
+
+      li:last-child:after {
+        bottom: 50%;
+      }
+
+      li > ul {
+        padding-left: 2em;
+        position: relative;
+      }
+
+      li > ul:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: -2px;
+        left: 0;
+        border-bottom: 1px solid #666;
+      }
+
+      code,
+      span {
+        border: solid 0.1em #666;
+        border-radius: 0.2em;
+        display: inline-block;
+        margin: 0.3em 0;
+        position: relative;
+        min-width: 120px;
+        background-color: #f9f9f9;
+      }
+
+      span[selected] {
+        color: var(--md-sys-color-on-tertiary);
+        background-color: var(--md-sys-color-tertiary);
+      }
+
+      ul:before,
+      code:before,
+      span:before {
+        content: '';
+        width: 1em;
+        top: 50%;
+        position: absolute;
+        transform: translateY(-50%);
+      }
+
+      ul:before {
+        left: -1em;
+      }
+
+      code:before,
+      span:before {
+        left: -1.1em;
+      }
+
+      ul[root] > li {
+        margin-left: 0;
+      }
+
+      ul[root] > li:before,
+      ul[root] > li:after,
+      ul[root] > li > code:before,
+      ul[root] > li > span:before {
+        outline: none;
+      }
+
+      span {
+        display: inline-block;
+        background-color: var(--md-sys-color-surface);
+
+        div[header] {
+          font-weight: bold;
+          font-size: 0.8em;
+          color: var(--md-sys-color-on-primary, #fff);
+          background-color: var(--md-sys-color-primary, #333);
+          padding: 0.5em 1em;
+          text-align: center;
+          width: 100%;
+          box-sizing: border-box;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+
+        div[label] {
+          font-size: 1em;
+          background-color: transparent;
+          padding: 0.5em;
+          text-align: left;
+        }
+
+        div[description] {
+          font-size: 0.8em;
+          background-color: transparent;
+          padding: 0.5em;
+          text-align: left;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], TreeViewHorizontal.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], TreeViewHorizontal.prototype, "selected", void 0);
+__decorate([
+    property({ type: String, attribute: 'id-property' })
+], TreeViewHorizontal.prototype, "idProperty", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-property' })
+], TreeViewHorizontal.prototype, "labelProperty", void 0);
+__decorate([
+    property({ type: String, attribute: 'description-property' })
+], TreeViewHorizontal.prototype, "descriptionProperty", void 0);
+__decorate([
+    property({ type: String, attribute: 'children-property' })
+], TreeViewHorizontal.prototype, "childrenProperty", void 0);
+TreeViewHorizontal = __decorate([
+    customElement('ox-tree-horizontal')
+], TreeViewHorizontal);
+export { TreeViewHorizontal };
+//# sourceMappingURL=ox-tree-horizontal.js.map

package/dist/src/ox-tree-horizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-tree-horizontal.js","sourceRoot":"","sources":["../../src/ox-tree-horizontal.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\ntype TreeItem = {\n  [key: string]: any\n  __status__?: { [state: string]: boolean | string }\n}\n\n@customElement('ox-tree-horizontal')\nexport class TreeViewHorizontal extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        overflow: auto;\n        padding: 1em;\n      }\n\n      ul,\n      li {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        position: relative;\n      }\n\n      ul[root] {\n        margin: 0 0 1em;\n        text-align: left;\n      }\n\n      ul[root]:before {\n        display: none;\n      }\n\n      ul {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        justify-content: center;\n      }\n\n      ul {\n        width: 100%;\n      }\n\n      li {\n        display: flex;\n        flex-direction: row;\n        position: relative;\n        align-items: center;\n      }\n\n      li:before,\n      li:after {\n        content: '';\n        position: absolute;\n        left: -1em;\n        border-left: 1px solid #666;\n      }\n\n      li:before {\n        top: 0;\n        bottom: 50%;\n      }\n\n      li:after {\n        top: 50%;\n        bottom: 0;\n        border-top: 1px solid #666;\n        width: 1em;\n      }\n\n      ul[root] > li:after {\n        content: none;\n      }\n\n      li:first-child:before {\n        top: 50%;\n      }\n\n      li:last-child:after {\n        bottom: 50%;\n      }\n\n      li > ul {\n        padding-left: 2em;\n        position: relative;\n      }\n\n      li > ul:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: -2px;\n        left: 0;\n        border-bottom: 1px solid #666;\n      }\n\n      code,\n      span {\n        border: solid 0.1em #666;\n        border-radius: 0.2em;\n        display: inline-block;\n        margin: 0.3em 0;\n        position: relative;\n        min-width: 120px;\n        background-color: #f9f9f9;\n      }\n\n      span[selected] {\n        color: var(--md-sys-color-on-tertiary);\n        background-color: var(--md-sys-color-tertiary);\n      }\n\n      ul:before,\n      code:before,\n      span:before {\n        content: '';\n        width: 1em;\n        top: 50%;\n        position: absolute;\n        transform: translateY(-50%);\n      }\n\n      ul:before {\n        left: -1em;\n      }\n\n      code:before,\n      span:before {\n        left: -1.1em;\n      }\n\n      ul[root] > li {\n        margin-left: 0;\n      }\n\n      ul[root] > li:before,\n      ul[root] > li:after,\n      ul[root] > li > code:before,\n      ul[root] > li > span:before {\n        outline: none;\n      }\n\n      span {\n        display: inline-block;\n        background-color: var(--md-sys-color-surface);\n\n        div[header] {\n          font-weight: bold;\n          font-size: 0.8em;\n          color: var(--md-sys-color-on-primary, #fff);\n          background-color: var(--md-sys-color-primary, #333);\n          padding: 0.5em 1em;\n          text-align: center;\n          width: 100%;\n          box-sizing: border-box;\n          border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        }\n\n        div[label] {\n          font-size: 1em;\n          background-color: transparent;\n          padding: 0.5em;\n          text-align: left;\n        }\n\n        div[description] {\n          font-size: 0.8em;\n          background-color: transparent;\n          padding: 0.5em;\n          text-align: left;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) data?: TreeItem | TreeItem[]\n  @property({ type: Object }) selected?: TreeItem\n  @property({ type: String, attribute: 'id-property' }) idProperty: string = 'id'\n  @property({ type: String, attribute: 'label-property' }) labelProperty: string = 'label'\n  @property({ type: String, attribute: 'description-property' }) descriptionProperty?: string\n  @property({ type: String, attribute: 'children-property' }) childrenProperty: string = 'children'\n\n  render() {\n    if (!this.data) return html``\n\n    const dataArray = Array.isArray(this.data) ? this.data : [this.data]\n\n    return html`\n      ${dataArray.map(\n        root => html`\n          <ul root>\n            ${this.renderItem(root)}\n          </ul>\n        `\n      )}\n    `\n  }\n\n  renderItem(item: TreeItem): TemplateResult {\n    const id = item[this.idProperty]\n    const label = item[this.labelProperty]\n    const children = item[this.childrenProperty] as TreeItem[]\n\n    const expandable = children && children.length > 0\n    const selected = id === this.selected?.[this.idProperty]\n\n    return html`\n      <li .item=${item}>\n        <span\n          ?selected=${selected}\n          @click=${this.onClickSelect.bind(this)}\n          @dblclick=${this.onClickSelectConfirm.bind(this)}\n        >\n          <div header>${id}</div>\n          <div label>${label}</div>\n          ${this.descriptionProperty ? html` <div description>${item[this.descriptionProperty]}&nbsp;</div>` : nothing}\n        </span>\n\n        ${expandable\n          ? html`\n              <ul>\n                ${children.map(child => this.renderItem(child))}\n              </ul>\n            `\n          : html``}\n      </li>\n    `\n  }\n\n  onClickSelect(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as HTMLElement\n    this.selected = (target.closest('li') as any)?.item\n\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: this.selected\n      })\n    )\n  }\n\n  onClickSelectConfirm(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as HTMLElement\n    this.selected = (target.closest('li') as any)?.item\n\n    this.dispatchEvent(\n      new CustomEvent('select-confirm', {\n        detail: this.selected\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-tree-vertical.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, TemplateResult } from 'lit';
+type TreeItem = {
+    [key: string]: any;
+    __status__?: {
+        [state: string]: boolean | string;
+    };
+};
+export declare class TreeViewVertical extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data?: TreeItem | TreeItem[];
+    selected?: TreeItem;
+    idProperty: string;
+    labelProperty: string;
+    descriptionProperty?: string;
+    childrenProperty: string;
+    render(): TemplateResult<1>;
+    renderItem(item: TreeItem): TemplateResult;
+    onClickSelect(e: MouseEvent): void;
+    onClickSelectConfirm(e: MouseEvent): void;
+}
+export {};

package/dist/src/ox-tree-vertical.js

@@ -0,0 +1,229 @@
+/* Inspired by https://www.cssscript.com/clean-tree-diagram/ */
+import { __decorate } from "tslib";
+import { html, css, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+let TreeViewVertical = class TreeViewVertical extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.idProperty = 'id';
+        this.labelProperty = 'label';
+        this.childrenProperty = 'children';
+    }
+    render() {
+        if (!this.data)
+            return html ``;
+        const dataArray = Array.isArray(this.data) ? this.data : [this.data];
+        return html `
+      ${dataArray.map(root => html `
+          <ul root>
+            ${this.renderItem(root)}
+          </ul>
+        `)}
+    `;
+    }
+    renderItem(item) {
+        var _a;
+        const id = item[this.idProperty];
+        const label = item[this.labelProperty];
+        const children = item[this.childrenProperty];
+        const expandable = children && children.length > 0;
+        const selected = id === ((_a = this.selected) === null || _a === void 0 ? void 0 : _a[this.idProperty]);
+        return html `
+      <li .item=${item}>
+        <span
+          ?selected=${selected}
+          @click=${this.onClickSelect.bind(this)}
+          @dblclick=${this.onClickSelectConfirm.bind(this)}
+        >
+          <div header>${id}</div>
+          <div label>${label}</div>
+          ${this.descriptionProperty ? html ` <div description>${item[this.descriptionProperty]}&nbsp;</div>` : nothing}
+        </span>
+
+        ${expandable
+            ? html `
+              <ul>
+                ${children.map(child => this.renderItem(child))}
+              </ul>
+            `
+            : html ``}
+      </li>
+    `;
+    }
+    onClickSelect(e) {
+        var _a;
+        e.stopPropagation();
+        const target = e.target;
+        this.selected = (_a = target.closest('li')) === null || _a === void 0 ? void 0 : _a.item;
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: this.selected
+        }));
+    }
+    onClickSelectConfirm(e) {
+        var _a;
+        e.stopPropagation();
+        const target = e.target;
+        this.selected = (_a = target.closest('li')) === null || _a === void 0 ? void 0 : _a.item;
+        this.dispatchEvent(new CustomEvent('select-confirm', {
+            detail: this.selected
+        }));
+    }
+};
+TreeViewVertical.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: block;
+        overflow: auto;
+      }
+
+      ul,
+      li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        position: relative;
+      }
+
+      ul[root] {
+        margin: 0 0 1em;
+        text-align: center;
+      }
+
+      ul[root]:before,
+      ul[root]:after {
+        display: none;
+      }
+
+      ul {
+        display: table;
+      }
+
+      ul {
+        width: 100%;
+      }
+
+      li {
+        display: table-cell;
+        padding: 1em 0;
+        vertical-align: top;
+      }
+
+      li:before {
+        outline: solid 1px #666;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+
+      li:first-child:before {
+        left: 50%;
+      }
+
+      li:last-child:before {
+        right: 50%;
+      }
+
+      code,
+      span {
+        border: solid 0.1em #666;
+        border-radius: 0.2em;
+        display: inline-block;
+        margin: 0 0.2em 1em;
+        position: relative;
+        min-width: 120px;
+      }
+
+      span[selected] {
+        color: var(--md-sys-color-on-tertiary);
+        background-color: var(--md-sys-color-tertiary);
+      }
+
+      ul:before,
+      code:before,
+      span:before {
+        outline: solid 1px #666;
+        content: '';
+        height: 1em;
+        left: 50%;
+        position: absolute;
+      }
+
+      ul:before {
+        top: -1em;
+      }
+
+      code:before,
+      span:before {
+        top: -1.1em;
+      }
+
+      ul[root] > li {
+        margin-top: 0;
+      }
+
+      ul[root] > li:before,
+      ul[root] > li:after,
+      ul[root] > li > code:before,
+      ul[root] > li > span:before {
+        outline: none;
+      }
+
+      span {
+        display: inline-block;
+        background-color: var(--md-sys-color-surface);
+
+        div[header] {
+          font-weight: bold;
+          font-size: 0.8em;
+          color: var(--md-sys-color-on-primary, #fff);
+          background-color: var(--md-sys-color-primary, #333);
+          padding: 0.5em 1em;
+          text-align: center;
+          width: 100%;
+          box-sizing: border-box;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+
+        div[label] {
+          font-size: 1em;
+          background-color: transparent;
+          padding: 0.5em;
+          text-align: left;
+        }
+
+        div[description] {
+          font-size: 0.8em;
+          background-color: transparent;
+          padding: 0.5em;
+          text-align: left;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], TreeViewVertical.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], TreeViewVertical.prototype, "selected", void 0);
+__decorate([
+    property({ type: String, attribute: 'id-property' })
+], TreeViewVertical.prototype, "idProperty", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-property' })
+], TreeViewVertical.prototype, "labelProperty", void 0);
+__decorate([
+    property({ type: String, attribute: 'description-property' })
+], TreeViewVertical.prototype, "descriptionProperty", void 0);
+__decorate([
+    property({ type: String, attribute: 'children-property' })
+], TreeViewVertical.prototype, "childrenProperty", void 0);
+TreeViewVertical = __decorate([
+    customElement('ox-tree-vertical')
+], TreeViewVertical);
+export { TreeViewVertical };
+//# sourceMappingURL=ox-tree-vertical.js.map

package/dist/src/ox-tree-vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-tree-vertical.js","sourceRoot":"","sources":["../../src/ox-tree-vertical.ts"],"names":[],"mappings":"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","sourcesContent":["/* Inspired by https://www.cssscript.com/clean-tree-diagram/ */\n\nimport { html, css, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\ntype TreeItem = {\n  [key: string]: any\n  __status__?: { [state: string]: boolean | string }\n}\n\n@customElement('ox-tree-vertical')\nexport class TreeViewVertical extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        overflow: auto;\n      }\n\n      ul,\n      li {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        position: relative;\n      }\n\n      ul[root] {\n        margin: 0 0 1em;\n        text-align: center;\n      }\n\n      ul[root]:before,\n      ul[root]:after {\n        display: none;\n      }\n\n      ul {\n        display: table;\n      }\n\n      ul {\n        width: 100%;\n      }\n\n      li {\n        display: table-cell;\n        padding: 1em 0;\n        vertical-align: top;\n      }\n\n      li:before {\n        outline: solid 1px #666;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n      }\n\n      li:first-child:before {\n        left: 50%;\n      }\n\n      li:last-child:before {\n        right: 50%;\n      }\n\n      code,\n      span {\n        border: solid 0.1em #666;\n        border-radius: 0.2em;\n        display: inline-block;\n        margin: 0 0.2em 1em;\n        position: relative;\n        min-width: 120px;\n      }\n\n      span[selected] {\n        color: var(--md-sys-color-on-tertiary);\n        background-color: var(--md-sys-color-tertiary);\n      }\n\n      ul:before,\n      code:before,\n      span:before {\n        outline: solid 1px #666;\n        content: '';\n        height: 1em;\n        left: 50%;\n        position: absolute;\n      }\n\n      ul:before {\n        top: -1em;\n      }\n\n      code:before,\n      span:before {\n        top: -1.1em;\n      }\n\n      ul[root] > li {\n        margin-top: 0;\n      }\n\n      ul[root] > li:before,\n      ul[root] > li:after,\n      ul[root] > li > code:before,\n      ul[root] > li > span:before {\n        outline: none;\n      }\n\n      span {\n        display: inline-block;\n        background-color: var(--md-sys-color-surface);\n\n        div[header] {\n          font-weight: bold;\n          font-size: 0.8em;\n          color: var(--md-sys-color-on-primary, #fff);\n          background-color: var(--md-sys-color-primary, #333);\n          padding: 0.5em 1em;\n          text-align: center;\n          width: 100%;\n          box-sizing: border-box;\n          border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        }\n\n        div[label] {\n          font-size: 1em;\n          background-color: transparent;\n          padding: 0.5em;\n          text-align: left;\n        }\n\n        div[description] {\n          font-size: 0.8em;\n          background-color: transparent;\n          padding: 0.5em;\n          text-align: left;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) data?: TreeItem | TreeItem[]\n  @property({ type: Object }) selected?: TreeItem\n  @property({ type: String, attribute: 'id-property' }) idProperty: string = 'id'\n  @property({ type: String, attribute: 'label-property' }) labelProperty: string = 'label'\n  @property({ type: String, attribute: 'description-property' }) descriptionProperty?: string\n  @property({ type: String, attribute: 'children-property' }) childrenProperty: string = 'children'\n\n  render() {\n    if (!this.data) return html``\n\n    const dataArray = Array.isArray(this.data) ? this.data : [this.data]\n\n    return html`\n      ${dataArray.map(\n        root => html`\n          <ul root>\n            ${this.renderItem(root)}\n          </ul>\n        `\n      )}\n    `\n  }\n\n  renderItem(item: TreeItem): TemplateResult {\n    const id = item[this.idProperty]\n    const label = item[this.labelProperty]\n    const children = item[this.childrenProperty] as TreeItem[]\n\n    const expandable = children && children.length > 0\n    const selected = id === this.selected?.[this.idProperty]\n\n    return html`\n      <li .item=${item}>\n        <span\n          ?selected=${selected}\n          @click=${this.onClickSelect.bind(this)}\n          @dblclick=${this.onClickSelectConfirm.bind(this)}\n        >\n          <div header>${id}</div>\n          <div label>${label}</div>\n          ${this.descriptionProperty ? html` <div description>${item[this.descriptionProperty]}&nbsp;</div>` : nothing}\n        </span>\n\n        ${expandable\n          ? html`\n              <ul>\n                ${children.map(child => this.renderItem(child))}\n              </ul>\n            `\n          : html``}\n      </li>\n    `\n  }\n\n  onClickSelect(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as HTMLElement\n    this.selected = (target.closest('li') as any)?.item\n\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: this.selected\n      })\n    )\n  }\n\n  onClickSelectConfirm(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as HTMLElement\n    this.selected = (target.closest('li') as any)?.item\n\n    this.dispatchEvent(\n      new CustomEvent('select-confirm', {\n        detail: this.selected\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-tree.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, TemplateResult } from 'lit';
+type TreeItem = {
+    [key: string]: any;
+    __status__?: {
+        [state: string]: boolean | string;
+    };
+};
+export declare class OxTree extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data?: TreeItem;
+    selected?: TreeItem;
+    idProperty: string;
+    labelProperty: string;
+    childrenProperty: string;
+    direction: 'ltr' | 'rtl';
+    labelExtends: boolean;
+    checkable: boolean;
+    render(): TemplateResult<1>;
+    renderItem(item: TreeItem): TemplateResult;
+    onPointerDown(e: MouseEvent): void;
+    onClickExpander(e: MouseEvent): void;
+    onClickItem(e: MouseEvent): void;
+    walkTreeCheckedUpdate(item: TreeItem, checked?: string): void;
+    updateCheckedAll(item: TreeItem): void;
+    findNodeBounds(nodeId: string): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | undefined;
+    findNodeSelfBounds(nodeId: string): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | undefined;
+    private findNodePath;
+}
+export {};

package/dist/src/ox-tree.js

@@ -0,0 +1,367 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxTree = class OxTree extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.idProperty = 'id';
+        this.labelProperty = 'label';
+        this.childrenProperty = 'children';
+        this.direction = 'ltr';
+        this.labelExtends = false;
+        this.checkable = false;
+    }
+    render() {
+        return this.data
+            ? html `
+          <ul class="root">
+            ${this.renderItem(this.data)}
+          </ul>
+        `
+            : html ``;
+    }
+    renderItem(item) {
+        const { __status__ = {} } = item;
+        const id = item[this.idProperty];
+        const label = item[this.labelProperty];
+        const children = item[this.childrenProperty];
+        const expandable = children && children.length > 0;
+        const { collapsed, checked } = __status__;
+        const selected = this.selected !== undefined &&
+            this.selected !== null &&
+            id !== undefined &&
+            id !== null &&
+            id === this.selected[this.idProperty];
+        return html `
+      <li checked=${checked} ?collapsed=${collapsed} ?leaf=${!expandable} .item=${item} data-id=${id} draggable="true">
+        <div self @pointerdown=${this.onPointerDown.bind(this)}>
+          ${expandable ? html ` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html ``}
+          ${this.checkable ? html `<span checkbox @click=${this.onClickItem.bind(this)}></span>` : nothing}
+
+          <span label ?selected=${selected}>${label}</span>
+          ${this.labelExtends ? html `<span label-extends></span>` : nothing}
+        </div>
+        ${expandable && !collapsed
+            ? html `
+              <ul>
+                ${children.map(child => this.renderItem(child))}
+              </ul>
+            `
+            : html ``}
+      </li>
+    `;
+    }
+    onPointerDown(e) {
+        var _a;
+        e.stopPropagation();
+        const target = e.target;
+        this.selected = (_a = target.closest('li')) === null || _a === void 0 ? void 0 : _a.item;
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: this.selected
+        }));
+    }
+    onClickExpander(e) {
+        e.stopPropagation();
+        const target = e.target;
+        const itemElement = target.closest('li');
+        const collapsed = !itemElement.hasAttribute('collapsed');
+        var item = itemElement.item;
+        item.__status__ = {
+            ...item.__status__,
+            collapsed
+        };
+        requestAnimationFrame(() => {
+            this.dispatchEvent(new CustomEvent(collapsed ? 'collapsed' : 'expanded', {
+                detail: item
+            }));
+        });
+        this.requestUpdate();
+    }
+    onClickItem(e) {
+        e.stopPropagation();
+        const target = e.target;
+        const itemElement = target.closest('li');
+        var item = itemElement.item;
+        var checked = itemElement.getAttribute('checked') || '';
+        this.walkTreeCheckedUpdate(item, checked == '' || checked == 'unchecked' ? 'checked' : 'unchecked');
+        this.updateCheckedAll(this.data);
+        this.requestUpdate();
+    }
+    walkTreeCheckedUpdate(item, checked = '') {
+        const { __status__ } = item;
+        const children = item[this.childrenProperty];
+        children === null || children === void 0 ? void 0 : children.forEach(child => this.walkTreeCheckedUpdate(child, checked));
+        item.__status__ = {
+            ...__status__,
+            checked
+        };
+    }
+    updateCheckedAll(item) {
+        const { __status__ } = item;
+        const children = item[this.childrenProperty];
+        if (!children || children.length == 0) {
+            return;
+        }
+        children.forEach(child => this.updateCheckedAll(child));
+        var checked = '';
+        children.forEach(child => {
+            const { __status__ = {} } = child;
+            if (__status__.checked == 'half-checked') {
+                checked = 'half-checked';
+            }
+            else if (__status__.checked == 'checked') {
+                checked = checked == 'checked' || checked == '' ? 'checked' : 'half-checked';
+            }
+            else {
+                checked = checked == 'unchecked' || checked == '' ? 'unchecked' : 'half-checked';
+            }
+        });
+        item.__status__ = {
+            ...__status__,
+            checked
+        };
+    }
+    findNodeBounds(nodeId) {
+        const nodePath = this.findNodePath(this.data, nodeId);
+        if (nodePath.length === 0) {
+            return;
+        }
+        let nodeElement = null;
+        for (let i = nodePath.length - 1; i >= 0; i--) {
+            nodeElement = this.renderRoot.querySelector(`li[data-id="${nodePath[i][this.idProperty]}"]`);
+            if (nodeElement) {
+                break;
+            }
+        }
+        if (!nodeElement) {
+            return;
+        }
+        return nodeElement.getBoundingClientRect();
+    }
+    findNodeSelfBounds(nodeId) {
+        const nodePath = this.findNodePath(this.data, nodeId);
+        if (nodePath.length === 0) {
+            return;
+        }
+        let nodeElement = null;
+        for (let i = nodePath.length - 1; i >= 0; i--) {
+            nodeElement = this.renderRoot.querySelector(`li[data-id="${nodePath[i][this.idProperty]}"]`);
+            if (nodeElement) {
+                break;
+            }
+        }
+        if (!nodeElement) {
+            return;
+        }
+        const selfElement = nodeElement.querySelector('div[self]');
+        return selfElement === null || selfElement === void 0 ? void 0 : selfElement.getBoundingClientRect();
+    }
+    findNodePath(root, nodeId, path = []) {
+        if (!root)
+            return [];
+        if (root[this.idProperty] === nodeId) {
+            return [...path, root];
+        }
+        const children = root[this.childrenProperty];
+        if (children) {
+            for (const child of children) {
+                const foundPath = this.findNodePath(child, nodeId, [...path, root]);
+                if (foundPath.length > 0) {
+                    return foundPath;
+                }
+            }
+        }
+        return [];
+    }
+};
+OxTree.styles = [
+    css `
+      ul {
+        list-style: none;
+        padding-left: 18px;
+        padding-right: 0;
+        overflow: hidden;
+        position: relative;
+      }
+
+      :host([direction='rtl']) ul {
+        padding-right: 18px;
+        padding-left: 0;
+      }
+
+      ul.root {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+
+      li {
+        cursor: pointer;
+        overflow: hidden;
+      }
+
+      div[self] {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      :host([direction='rtl']) div[self] {
+        flex-direction: row-reverse;
+      }
+
+      span[expander] {
+        display: inline-block;
+        vertical-align: middle;
+        width: 12px;
+        height: 20px;
+        cursor: pointer;
+        position: relative;
+      }
+
+      span[expander]::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -25%);
+        content: ' ';
+        border: 4px solid transparent;
+        border-top: 6px solid var(--md-sys-color-on-primary-container, #001848);
+      }
+
+      li[collapsed] > div[self] > span[expander]::before {
+        transform: translate(-25%, -50%) rotate(-90deg);
+      }
+
+      :host([direction='rtl']) li[collapsed] > div[self] > span[expander]::before {
+        transform: translate(-75%, -50%) rotate(90deg);
+      }
+
+      li[leaf] {
+        padding-left: 18px;
+      }
+
+      span[label-extends] {
+        position: relative;
+        flex: 1;
+      }
+
+      span[label-extends]::after {
+        content: '';
+        position: absolute;
+        top: calc(50% - 1px);
+        right: 0;
+        width: calc(100% - 12px);
+        height: 0;
+        border-bottom: 1px dashed gray;
+      }
+
+      :host([direction='rtl']) span[label-extends]::after {
+        left: 0;
+      }
+
+      :host([direction='rtl']) li[leaf] {
+        padding-left: 0;
+        padding-right: 18px;
+      }
+
+      span[checkbox] {
+        display: inline-block;
+        vertical-align: middle;
+        width: 12px;
+        height: 20px;
+        cursor: pointer;
+        position: relative;
+      }
+
+      span[checkbox]::before {
+        cursor: pointer;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        content: ' ';
+        display: block;
+        width: 10px;
+        height: 10px;
+        border: 1px solid var(--md-sys-color-on-primary-container, #001848);
+        border-radius: 2px;
+      }
+
+      span[label] {
+        padding: 0 4px;
+        border-radius: 2px;
+      }
+
+      span[label][selected] {
+        background-color: var(--md-sys-color-on-primary-container, #001848);
+        color: var(--md-sys-color-primary-container, #fff);
+      }
+
+      li[checked='checked'] > div[self] > span[checkbox]::before {
+        background-color: var(--md-sys-color-on-primary-container, #001848);
+        border-color: var(--md-sys-color-on-primary-container, #001848);
+      }
+
+      li[checked='checked'] > div[self] > span[checkbox]::after {
+        position: absolute;
+        content: ' ';
+        display: block;
+        top: 50%;
+        left: 50%;
+        width: 3px;
+        height: 7px;
+        border: 2px solid #fff;
+        border-top: none;
+        border-left: none;
+        -webkit-transform: translate(-50%, -50%) rotate(45deg);
+        -ms-transform: translate(-50%, -50%) rotate(45deg);
+        transform: translate(-50%, -50%) rotate(45deg);
+      }
+
+      li[checked='half-checked'] > div[self] > span[checkbox]::before {
+        background-color: var(--md-sys-color-on-primary-container, #001848);
+        border-color: var(--md-sys-color-on-primary-container, #001848);
+      }
+
+      li[checked='half-checked'] > div[self] > span[checkbox]::after {
+        position: absolute;
+        content: ' ';
+        display: block;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 10px;
+        height: 2px;
+        background-color: var(--md-sys-color-surface);
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], OxTree.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], OxTree.prototype, "selected", void 0);
+__decorate([
+    property({ type: String, attribute: 'id-property' })
+], OxTree.prototype, "idProperty", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-property' })
+], OxTree.prototype, "labelProperty", void 0);
+__decorate([
+    property({ type: String, attribute: 'children-property' })
+], OxTree.prototype, "childrenProperty", void 0);
+__decorate([
+    property({ type: String })
+], OxTree.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'label-extends' })
+], OxTree.prototype, "labelExtends", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxTree.prototype, "checkable", void 0);
+OxTree = __decorate([
+    customElement('ox-tree')
+], OxTree);
+export { OxTree };
+//# sourceMappingURL=ox-tree.js.map

package/dist/src/ox-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-tree.js","sourceRoot":"","sources":["../../src/ox-tree.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\ntype TreeItem = {\n  [key: string]: any\n  __status__?: { [state: string]: boolean | string }\n}\n\n@customElement('ox-tree')\nexport class OxTree extends LitElement {\n  static styles = [\n    css`\n      ul {\n        list-style: none;\n        padding-left: 18px;\n        padding-right: 0;\n        overflow: hidden;\n        position: relative;\n      }\n\n      :host([direction='rtl']) ul {\n        padding-right: 18px;\n        padding-left: 0;\n      }\n\n      ul.root {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n      }\n\n      li {\n        cursor: pointer;\n        overflow: hidden;\n      }\n\n      div[self] {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      :host([direction='rtl']) div[self] {\n        flex-direction: row-reverse;\n      }\n\n      span[expander] {\n        display: inline-block;\n        vertical-align: middle;\n        width: 12px;\n        height: 20px;\n        cursor: pointer;\n        position: relative;\n      }\n\n      span[expander]::before {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -25%);\n        content: ' ';\n        border: 4px solid transparent;\n        border-top: 6px solid var(--md-sys-color-on-primary-container, #001848);\n      }\n\n      li[collapsed] > div[self] > span[expander]::before {\n        transform: translate(-25%, -50%) rotate(-90deg);\n      }\n\n      :host([direction='rtl']) li[collapsed] > div[self] > span[expander]::before {\n        transform: translate(-75%, -50%) rotate(90deg);\n      }\n\n      li[leaf] {\n        padding-left: 18px;\n      }\n\n      span[label-extends] {\n        position: relative;\n        flex: 1;\n      }\n\n      span[label-extends]::after {\n        content: '';\n        position: absolute;\n        top: calc(50% - 1px);\n        right: 0;\n        width: calc(100% - 12px);\n        height: 0;\n        border-bottom: 1px dashed gray;\n      }\n\n      :host([direction='rtl']) span[label-extends]::after {\n        left: 0;\n      }\n\n      :host([direction='rtl']) li[leaf] {\n        padding-left: 0;\n        padding-right: 18px;\n      }\n\n      span[checkbox] {\n        display: inline-block;\n        vertical-align: middle;\n        width: 12px;\n        height: 20px;\n        cursor: pointer;\n        position: relative;\n      }\n\n      span[checkbox]::before {\n        cursor: pointer;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        content: ' ';\n        display: block;\n        width: 10px;\n        height: 10px;\n        border: 1px solid var(--md-sys-color-on-primary-container, #001848);\n        border-radius: 2px;\n      }\n\n      span[label] {\n        padding: 0 4px;\n        border-radius: 2px;\n      }\n\n      span[label][selected] {\n        background-color: var(--md-sys-color-on-primary-container, #001848);\n        color: var(--md-sys-color-primary-container, #fff);\n      }\n\n      li[checked='checked'] > div[self] > span[checkbox]::before {\n        background-color: var(--md-sys-color-on-primary-container, #001848);\n        border-color: var(--md-sys-color-on-primary-container, #001848);\n      }\n\n      li[checked='checked'] > div[self] > span[checkbox]::after {\n        position: absolute;\n        content: ' ';\n        display: block;\n        top: 50%;\n        left: 50%;\n        width: 3px;\n        height: 7px;\n        border: 2px solid #fff;\n        border-top: none;\n        border-left: none;\n        -webkit-transform: translate(-50%, -50%) rotate(45deg);\n        -ms-transform: translate(-50%, -50%) rotate(45deg);\n        transform: translate(-50%, -50%) rotate(45deg);\n      }\n\n      li[checked='half-checked'] > div[self] > span[checkbox]::before {\n        background-color: var(--md-sys-color-on-primary-container, #001848);\n        border-color: var(--md-sys-color-on-primary-container, #001848);\n      }\n\n      li[checked='half-checked'] > div[self] > span[checkbox]::after {\n        position: absolute;\n        content: ' ';\n        display: block;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 10px;\n        height: 2px;\n        background-color: var(--md-sys-color-surface);\n      }\n    `\n  ]\n\n  @property({ type: Object }) data?: TreeItem\n  @property({ type: Object }) selected?: TreeItem\n  @property({ type: String, attribute: 'id-property' }) idProperty: string = 'id'\n  @property({ type: String, attribute: 'label-property' }) labelProperty: string = 'label'\n  @property({ type: String, attribute: 'children-property' }) childrenProperty: string = 'children'\n  @property({ type: String }) direction: 'ltr' | 'rtl' = 'ltr'\n  @property({ type: Boolean, attribute: 'label-extends' }) labelExtends: boolean = false\n  @property({ type: Boolean }) checkable: boolean = false\n\n  render() {\n    return this.data\n      ? html`\n          <ul class=\"root\">\n            ${this.renderItem(this.data)}\n          </ul>\n        `\n      : html``\n  }\n\n  renderItem(item: TreeItem): TemplateResult {\n    const { __status__ = {} } = item\n    const id = item[this.idProperty]\n    const label = item[this.labelProperty]\n    const children = item[this.childrenProperty] as TreeItem[]\n\n    const expandable = children && children.length > 0\n    const { collapsed, checked } = __status__\n\n    const selected =\n      this.selected !== undefined &&\n      this.selected !== null &&\n      id !== undefined &&\n      id !== null &&\n      id === this.selected[this.idProperty]\n\n    return html`\n      <li checked=${checked} ?collapsed=${collapsed} ?leaf=${!expandable} .item=${item} data-id=${id} draggable=\"true\">\n        <div self @pointerdown=${this.onPointerDown.bind(this)}>\n          ${expandable ? html` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html``}\n          ${this.checkable ? html`<span checkbox @click=${this.onClickItem.bind(this)}></span>` : nothing}\n\n          <span label ?selected=${selected}>${label}</span>\n          ${this.labelExtends ? html`<span label-extends></span>` : nothing}\n        </div>\n        ${expandable && !collapsed\n          ? html`\n              <ul>\n                ${children.map(child => this.renderItem(child))}\n              </ul>\n            `\n          : html``}\n      </li>\n    `\n  }\n\n  onPointerDown(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as HTMLElement\n    this.selected = (target.closest('li') as any)?.item\n\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: this.selected\n      })\n    )\n  }\n\n  onClickExpander(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as HTMLSpanElement\n    const itemElement = target!.closest('li') as HTMLLIElement\n    const collapsed = !itemElement.hasAttribute('collapsed')\n\n    var item = (itemElement as any).item\n    item.__status__ = {\n      ...item.__status__,\n      collapsed\n    }\n\n    requestAnimationFrame(() => {\n      this.dispatchEvent(\n        new CustomEvent(collapsed ? 'collapsed' : 'expanded', {\n          detail: item\n        })\n      )\n    })\n\n    this.requestUpdate()\n  }\n\n  onClickItem(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as HTMLSpanElement\n    const itemElement = target!.closest('li') as HTMLLIElement\n\n    var item = (itemElement as any).item\n    var checked = itemElement.getAttribute('checked') || ''\n\n    this.walkTreeCheckedUpdate(item, checked == '' || checked == 'unchecked' ? 'checked' : 'unchecked')\n    this.updateCheckedAll(this.data!)\n\n    this.requestUpdate()\n  }\n\n  walkTreeCheckedUpdate(item: TreeItem, checked: string = '') {\n    const { __status__ } = item\n    const children = item[this.childrenProperty] as TreeItem[]\n\n    children?.forEach(child => this.walkTreeCheckedUpdate(child, checked))\n    item.__status__ = {\n      ...__status__,\n      checked\n    }\n  }\n\n  updateCheckedAll(item: TreeItem) {\n    const { __status__ } = item\n    const children = item[this.childrenProperty] as TreeItem[]\n\n    if (!children || children.length == 0) {\n      return\n    }\n\n    children.forEach(child => this.updateCheckedAll(child))\n\n    var checked: string = ''\n\n    children.forEach(child => {\n      const { __status__ = {} } = child\n\n      if (__status__.checked == 'half-checked') {\n        checked = 'half-checked'\n      } else if (__status__.checked == 'checked') {\n        checked = checked == 'checked' || checked == '' ? 'checked' : 'half-checked'\n      } else {\n        checked = checked == 'unchecked' || checked == '' ? 'unchecked' : 'half-checked'\n      }\n    })\n\n    item.__status__ = {\n      ...__status__,\n      checked\n    }\n  }\n\n  public findNodeBounds(nodeId: string): { left: number; top: number; width: number; height: number } | undefined {\n    const nodePath: TreeItem[] = this.findNodePath(this.data, nodeId)\n\n    if (nodePath.length === 0) {\n      return\n    }\n\n    let nodeElement: HTMLLIElement | null = null\n    for (let i = nodePath.length - 1; i >= 0; i--) {\n      nodeElement = this.renderRoot.querySelector(\n        `li[data-id=\"${nodePath[i][this.idProperty]}\"]`\n      ) as HTMLLIElement | null\n      if (nodeElement) {\n        break\n      }\n    }\n\n    if (!nodeElement) {\n      return\n    }\n\n    return nodeElement.getBoundingClientRect()\n  }\n\n  public findNodeSelfBounds(nodeId: string): { left: number; top: number; width: number; height: number } | undefined {\n    const nodePath: TreeItem[] = this.findNodePath(this.data, nodeId)\n\n    if (nodePath.length === 0) {\n      return\n    }\n\n    let nodeElement: HTMLLIElement | null = null\n    for (let i = nodePath.length - 1; i >= 0; i--) {\n      nodeElement = this.renderRoot.querySelector(\n        `li[data-id=\"${nodePath[i][this.idProperty]}\"]`\n      ) as HTMLLIElement | null\n      if (nodeElement) {\n        break\n      }\n    }\n\n    if (!nodeElement) {\n      return\n    }\n\n    const selfElement = nodeElement.querySelector('div[self]') as HTMLDivElement | null\n    return selfElement?.getBoundingClientRect()\n  }\n\n  private findNodePath(root: TreeItem | undefined, nodeId: string, path: TreeItem[] = []): TreeItem[] {\n    if (!root) return []\n\n    if (root[this.idProperty] === nodeId) {\n      return [...path, root]\n    }\n\n    const children = root[this.childrenProperty] as TreeItem[] | undefined\n    if (children) {\n      for (const child of children) {\n        const foundPath = this.findNodePath(child, nodeId, [...path, root])\n        if (foundPath.length > 0) {\n          return foundPath\n        }\n      }\n    }\n\n    return []\n  }\n}\n"]}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@operato/data-tree",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "description": "User interface for tree structure data",
   "author": "heartyoh",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
   "license": "MIT",
   "operato": true,
   "publishConfig": {
@@ -50,7 +50,7 @@
     "storybook:build": "tsc && build-storybook"
   },
   "dependencies": {
-    "@operato/styles": "^9.0.0",
+    "@operato/styles": "^9.0.1",
     "i18next": "^24.2.1",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
@@ -88,5 +88,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "0bc5364428dab277009469a253396ddbf0cec46f"
+  "gitHead": "595a66745b97ab3f364e870aabff7b05c7bf3da8"
 }