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

package/dist/src/ox-tree.js

@@ -1,250 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, css, html } 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';
-    }
-    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}>
-        <div self @click=${this.onClickSelect.bind(this)}>
-          ${expandable ? html ` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html ``}
-          <span checkbox @click=${this.onClickItem.bind(this)}></span>
-          <span label ?selected=${selected}>${label}</span>
-        </div>
-        ${expandable && !collapsed
-            ? 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
-        }));
-    }
-    onClickExpander(e) {
-        e.stopPropagation();
-        const target = e.target;
-        const itemElement = target.closest('li');
-        var item = itemElement.item;
-        item.__status__ = {
-            ...item.__status__,
-            collapsed: !itemElement.hasAttribute('collapsed')
-        };
-        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
-        };
-    }
-};
-OxTree.styles = [
-    css `
-      ul {
-        list-style: none;
-        padding-left: 18px;
-        overflow: hidden;
-        position: relative;
-      }
-
-      ul.root {
-        padding-left: 0;
-      }
-
-      li {
-        cursor: pointer;
-        overflow: hidden;
-      }
-
-      div[self] {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-
-      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: 5px solid transparent;
-        border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
-      }
-
-      li[collapsed] > div[self] > span[expander]::before {
-        transform: translate(-25%, -50%) rotate(-90deg);
-      }
-
-      li[leaf] {
-        padding-left: 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, #1890ff);
-        border-radius: 2px;
-      }
-
-      span[label][selected] {
-        background-color: var(--md-sys-color-on-primary-container, #1890ff);
-      }
-
-      li[checked='checked'] > div[self] > span[checkbox]::before {
-        background-color: var(--md-sys-color-on-primary-container, #1890ff);
-        border-color: var(--md-sys-color-on-primary-container, #1890ff);
-      }
-
-      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, #1890ff);
-        border-color: var(--md-sys-color-on-primary-container, #1890ff);
-      }
-
-      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);
-OxTree = __decorate([
-    customElement('ox-tree')
-], OxTree);
-export { OxTree };
-//# sourceMappingURL=ox-tree.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-tree.js","sourceRoot":"","sources":["../../src/ox-tree.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, 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        overflow: hidden;\n        position: relative;\n      }\n\n      ul.root {\n        padding-left: 0;\n      }\n\n      li {\n        cursor: pointer;\n        overflow: hidden;\n      }\n\n      div[self] {\n        display: flex;\n        align-items: center;\n        gap: 6px;\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: 5px solid transparent;\n        border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);\n      }\n\n      li[collapsed] > div[self] > span[expander]::before {\n        transform: translate(-25%, -50%) rotate(-90deg);\n      }\n\n      li[leaf] {\n        padding-left: 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, #1890ff);\n        border-radius: 2px;\n      }\n\n      span[label][selected] {\n        background-color: var(--md-sys-color-on-primary-container, #1890ff);\n      }\n\n      li[checked='checked'] > div[self] > span[checkbox]::before {\n        background-color: var(--md-sys-color-on-primary-container, #1890ff);\n        border-color: var(--md-sys-color-on-primary-container, #1890ff);\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, #1890ff);\n        border-color: var(--md-sys-color-on-primary-container, #1890ff);\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\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}>\n        <div self @click=${this.onClickSelect.bind(this)}>\n          ${expandable ? html` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html``}\n          <span checkbox @click=${this.onClickItem.bind(this)}></span>\n          <span label ?selected=${selected}>${label}</span>\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  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  onClickExpander(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    item.__status__ = {\n      ...item.__status__,\n      collapsed: !itemElement.hasAttribute('collapsed')\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"]}

package/dist/stories/data-tree-horizontal.stories.d.ts

@@ -1,28 +0,0 @@
-import '../src/ox-tree-horizontal.js';
-import '@material/web/icon/icon.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        data: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-type TreeItem = {
-    [key: string]: any;
-    __status__?: {
-        [state: string]: boolean | string;
-    };
-};
-interface ArgTypes {
-    data: Array<TreeItem>;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/data-tree-horizontal.stories.js

@@ -1,213 +0,0 @@
-import '../src/ox-tree-horizontal.js';
-import '@material/web/icon/icon.js';
-import { html } from 'lit';
-export default {
-    title: '3 modes in ox-tree-horizontal',
-    component: 'ox-tree-horizontal',
-    argTypes: {
-        data: { control: 'object' }
-    }
-};
-const Template = ({ data }) => html `
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
-  <link href="/themes/form-theme.css" rel="stylesheet" />
-
-  <style>
-    ox-tree-horizontal {
-      height: 1000px;
-    }
-  </style>
-
-  <div>
-    <ox-tree-horizontal .data=${data} description-property="description"></ox-tree-horizontal>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    data: [
-        {
-            id: 'H000',
-            label: 'Home',
-            children: [
-                {
-                    id: 'H001',
-                    label: 'About us',
-                    children: [
-                        {
-                            id: 'H101',
-                            label: 'Our history',
-                            children: [
-                                {
-                                    id: 'H111',
-                                    label: 'Founder',
-                                    description: 'long long founder history'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'H102',
-                            label: 'Our board',
-                            children: [
-                                {
-                                    id: 'H121',
-                                    label: 'Brad Whiteman'
-                                },
-                                {
-                                    id: 'H122',
-                                    label: 'Cynthia Tolken'
-                                },
-                                {
-                                    id: 'H123',
-                                    label: 'Bobby Founderson'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    id: 'H002',
-                    label: 'Our products',
-                    children: [
-                        {
-                            id: 'H201',
-                            label: 'The Widget 2000™',
-                            children: [
-                                {
-                                    id: 'H211',
-                                    label: 'Order form'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'H202',
-                            label: 'The McGuffin V2',
-                            children: [
-                                {
-                                    id: 'H221',
-                                    label: 'Order form'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    id: 'H003',
-                    label: 'Contact us',
-                    children: [
-                        {
-                            id: 'H301',
-                            label: 'Social media',
-                            children: [
-                                {
-                                    id: 'H311',
-                                    label: 'Facebook'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            id: 'H000',
-            label: 'Home',
-            children: [
-                {
-                    id: 'H001',
-                    label: 'About us',
-                    children: [
-                        {
-                            id: 'H101',
-                            label: 'Our history',
-                            children: [
-                                {
-                                    id: 'H111',
-                                    label: 'Founder',
-                                    description: 'long long founder history'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'H102',
-                            label: 'Our board',
-                            children: [
-                                {
-                                    id: 'H121',
-                                    label: 'Brad Whiteman'
-                                },
-                                {
-                                    id: 'H122',
-                                    label: 'Cynthia Tolken'
-                                },
-                                {
-                                    id: 'H123',
-                                    label: 'Bobby Founderson'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    id: 'H002',
-                    label: 'Our products',
-                    children: [
-                        {
-                            id: 'H201',
-                            label: 'The Widget 2000™',
-                            children: [
-                                {
-                                    id: 'H211',
-                                    label: 'Order form'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'H202',
-                            label: 'The McGuffin V2',
-                            children: [
-                                {
-                                    id: 'H221',
-                                    label: 'Order form'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    id: 'H003',
-                    label: 'Contact us',
-                    children: [
-                        {
-                            id: 'H301',
-                            label: 'Social media',
-                            children: [
-                                {
-                                    id: 'H311',
-                                    label: 'Facebook'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-};
-//# sourceMappingURL=data-tree-horizontal.stories.js.map

package/dist/stories/data-tree-horizontal.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-tree-horizontal.stories.js","sourceRoot":"","sources":["../../stories/data-tree-horizontal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4B9B,IAAI;;CAEnC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE;QACJ;YACE,EAAE,EAAE,MAAM;YACV,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE;gBACR;oBACE,EAAE,EAAE,MAAM;oBACV,KAAK,EAAE,UAAU;oBACjB,QAAQ,EAAE;wBACR;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,aAAa;4BACpB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,SAAS;oCAChB,WAAW,EAAE,2BAA2B;iCACzC;6BACF;yBACF;wBACD;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,WAAW;4BAClB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,eAAe;iCACvB;gCACD;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,gBAAgB;iCACxB;gCACD;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,kBAAkB;iCAC1B;6BACF;yBACF;qBACF;iBACF;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,KAAK,EAAE,cAAc;oBACrB,QAAQ,EAAE;wBACR;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,kBAAkB;4BACzB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,YAAY;iCACpB;6BACF;yBACF;wBACD;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,iBAAiB;4BACxB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,YAAY;iCACpB;6BACF;yBACF;qBACF;iBACF;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,KAAK,EAAE,YAAY;oBACnB,QAAQ,EAAE;wBACR;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,cAAc;4BACrB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,UAAU;iCAClB;6BACF;yBACF;qBACF;iBACF;aACF;SACF;QACD;YACE,EAAE,EAAE,MAAM;YACV,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE;gBACR;oBACE,EAAE,EAAE,MAAM;oBACV,KAAK,EAAE,UAAU;oBACjB,QAAQ,EAAE;wBACR;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,aAAa;4BACpB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,SAAS;oCAChB,WAAW,EAAE,2BAA2B;iCACzC;6BACF;yBACF;wBACD;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,WAAW;4BAClB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,eAAe;iCACvB;gCACD;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,gBAAgB;iCACxB;gCACD;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,kBAAkB;iCAC1B;6BACF;yBACF;qBACF;iBACF;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,KAAK,EAAE,cAAc;oBACrB,QAAQ,EAAE;wBACR;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,kBAAkB;4BACzB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,YAAY;iCACpB;6BACF;yBACF;wBACD;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,iBAAiB;4BACxB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,YAAY;iCACpB;6BACF;yBACF;qBACF;iBACF;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,KAAK,EAAE,YAAY;oBACnB,QAAQ,EAAE;wBACR;4BACE,EAAE,EAAE,MAAM;4BACV,KAAK,EAAE,cAAc;4BACrB,QAAQ,EAAE;gCACR;oCACE,EAAE,EAAE,MAAM;oCACV,KAAK,EAAE,UAAU;iCAClB;6BACF;yBACF;qBACF;iBACF;aACF;SACF;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-tree-horizontal.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: '3 modes in ox-tree-horizontal',\n  component: 'ox-tree-horizontal',\n  argTypes: {\n    data: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ntype TreeItem = {\n  [key: string]: any\n  __status__?: { [state: string]: boolean | string }\n}\n\ninterface ArgTypes {\n  data: Array<TreeItem>\n}\n\nconst Template: Story<ArgTypes> = ({ data }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    ox-tree-horizontal {\n      height: 1000px;\n    }\n  </style>\n\n  <div>\n    <ox-tree-horizontal .data=${data} description-property=\"description\"></ox-tree-horizontal>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  data: [\n    {\n      id: 'H000',\n      label: 'Home',\n      children: [\n        {\n          id: 'H001',\n          label: 'About us',\n          children: [\n            {\n              id: 'H101',\n              label: 'Our history',\n              children: [\n                {\n                  id: 'H111',\n                  label: 'Founder',\n                  description: 'long long founder history'\n                }\n              ]\n            },\n            {\n              id: 'H102',\n              label: 'Our board',\n              children: [\n                {\n                  id: 'H121',\n                  label: 'Brad Whiteman'\n                },\n                {\n                  id: 'H122',\n                  label: 'Cynthia Tolken'\n                },\n                {\n                  id: 'H123',\n                  label: 'Bobby Founderson'\n                }\n              ]\n            }\n          ]\n        },\n        {\n          id: 'H002',\n          label: 'Our products',\n          children: [\n            {\n              id: 'H201',\n              label: 'The Widget 2000™',\n              children: [\n                {\n                  id: 'H211',\n                  label: 'Order form'\n                }\n              ]\n            },\n            {\n              id: 'H202',\n              label: 'The McGuffin V2',\n              children: [\n                {\n                  id: 'H221',\n                  label: 'Order form'\n                }\n              ]\n            }\n          ]\n        },\n        {\n          id: 'H003',\n          label: 'Contact us',\n          children: [\n            {\n              id: 'H301',\n              label: 'Social media',\n              children: [\n                {\n                  id: 'H311',\n                  label: 'Facebook'\n                }\n              ]\n            }\n          ]\n        }\n      ]\n    },\n    {\n      id: 'H000',\n      label: 'Home',\n      children: [\n        {\n          id: 'H001',\n          label: 'About us',\n          children: [\n            {\n              id: 'H101',\n              label: 'Our history',\n              children: [\n                {\n                  id: 'H111',\n                  label: 'Founder',\n                  description: 'long long founder history'\n                }\n              ]\n            },\n            {\n              id: 'H102',\n              label: 'Our board',\n              children: [\n                {\n                  id: 'H121',\n                  label: 'Brad Whiteman'\n                },\n                {\n                  id: 'H122',\n                  label: 'Cynthia Tolken'\n                },\n                {\n                  id: 'H123',\n                  label: 'Bobby Founderson'\n                }\n              ]\n            }\n          ]\n        },\n        {\n          id: 'H002',\n          label: 'Our products',\n          children: [\n            {\n              id: 'H201',\n              label: 'The Widget 2000™',\n              children: [\n                {\n                  id: 'H211',\n                  label: 'Order form'\n                }\n              ]\n            },\n            {\n              id: 'H202',\n              label: 'The McGuffin V2',\n              children: [\n                {\n                  id: 'H221',\n                  label: 'Order form'\n                }\n              ]\n            }\n          ]\n        },\n        {\n          id: 'H003',\n          label: 'Contact us',\n          children: [\n            {\n              id: 'H301',\n              label: 'Social media',\n              children: [\n                {\n                  id: 'H311',\n                  label: 'Facebook'\n                }\n              ]\n            }\n          ]\n        }\n      ]\n    }\n  ]\n}\n"]}

package/dist/stories/data-tree-vertical.stories.d.ts

@@ -1,28 +0,0 @@
-import '../src/ox-tree-vertical.js';
-import '@material/web/icon/icon.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        data: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-type TreeItem = {
-    [key: string]: any;
-    __status__?: {
-        [state: string]: boolean | string;
-    };
-};
-interface ArgTypes {
-    data: Array<TreeItem>;
-}
-export declare const Regular: Story<ArgTypes>;