@operato/data-tree 9.0.0-beta.6 → 9.0.0

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

@@ -1,262 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,21 +0,0 @@
-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

@@ -1,229 +0,0 @@
-/* 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

@@ -1 +0,0 @@
-{"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

@@ -1,23 +0,0 @@
-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;
-    render(): TemplateResult<1>;
-    renderItem(item: TreeItem): TemplateResult;
-    onClickSelect(e: MouseEvent): void;
-    onClickExpander(e: MouseEvent): void;
-    onClickItem(e: MouseEvent): void;
-    walkTreeCheckedUpdate(item: TreeItem, checked?: string): void;
-    updateCheckedAll(item: TreeItem): void;
-}
-export {};