@operato/data-tree 1.1.70 → 1.1.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/demo/index-vertical.html +4 -1
  3. package/demo/index.html +1 -1
  4. package/dist/src/ox-tree-vertical.d.ts +7 -3
  5. package/dist/src/ox-tree-vertical.js +37 -3
  6. package/dist/src/ox-tree-vertical.js.map +1 -1
  7. package/dist/src/ox-tree.d.ts +7 -3
  8. package/dist/src/ox-tree.js +59 -15
  9. package/dist/src/ox-tree.js.map +1 -1
  10. package/dist/tsconfig.tsbuildinfo +1 -1
  11. package/package.json +2 -2
  12. package/src/ox-tree-vertical.ts +30 -7
  13. package/src/ox-tree.ts +54 -18
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ### [1.1.75](https://github.com/hatiolab/operato/compare/v1.1.74...v1.1.75) (2023-01-21)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * image property editor ([18f2a5a](https://github.com/hatiolab/operato/commit/18f2a5a191a69de064dd85a6f5b8b2cc89e32234))
12
+
13
+
14
+
15
+ ### [1.1.74](https://github.com/hatiolab/operato/compare/v1.1.73...v1.1.74) (2023-01-21)
16
+
17
+
18
+ ### :bug: Bug Fix
19
+
20
+ * ox-tree related ([0931560](https://github.com/hatiolab/operato/commit/0931560de0146e8b871ebbb23994d6edee00b672))
21
+
22
+
23
+
6
24
  ### [1.1.70](https://github.com/hatiolab/operato/compare/v1.1.69...v1.1.70) (2023-01-15)
7
25
 
8
26
 
package/demo/index-vertical.html CHANGED
@@ -119,7 +119,10 @@
119
119
  }
120
120
 
121
121
  setTimeout(() => {
122
- render(html` <ox-tree-vertical .data=${data}></ox-tree-vertical> `, document.querySelector('#demo'))
122
+ render(
123
+ html` <ox-tree-vertical .data=${data} id-property="label"></ox-tree-vertical> `,
124
+ document.querySelector('#demo')
125
+ )
123
126
  })
124
127
  </script>
125
128
 
package/demo/index.html CHANGED
@@ -85,7 +85,7 @@
85
85
  }
86
86
 
87
87
  setTimeout(() => {
88
- render(html` <ox-tree .data=${data}></ox-tree> `, document.querySelector('#demo'))
88
+ render(html` <ox-tree .data=${data} id-property="label"></ox-tree> `, document.querySelector('#demo'))
89
89
  })
90
90
  </script>
91
91
 
package/dist/src/ox-tree-vertical.d.ts CHANGED
@@ -1,15 +1,19 @@
1
1
  import { LitElement, TemplateResult } from 'lit';
2
2
  type TreeItem = {
3
- label: string;
4
- children?: TreeItem[];
5
- status?: {
3
+ [key: string]: any;
4
+ __status__?: {
6
5
  [state: string]: boolean | string;
7
6
  };
8
7
  };
9
8
  export declare class TreeViewPage extends LitElement {
10
9
  static styles: import("lit").CSSResult[];
11
10
  data?: TreeItem;
11
+ selected?: TreeItem;
12
+ idProperty: string;
13
+ labelProperty: string;
14
+ childrenProperty: string;
12
15
  render(): TemplateResult<1>;
13
16
  renderItem(item: TreeItem): TemplateResult;
17
+ onClickSelect(e: MouseEvent): void;
14
18
  }
15
19
  export {};
package/dist/src/ox-tree-vertical.js CHANGED
@@ -3,6 +3,12 @@ import { __decorate } from "tslib";
3
3
  import { html, css, LitElement } from 'lit';
4
4
  import { customElement, property } from 'lit/decorators.js';
5
5
  let TreeViewPage = class TreeViewPage extends LitElement {
6
+ constructor() {
7
+ super(...arguments);
8
+ this.idProperty = 'id';
9
+ this.labelProperty = 'label';
10
+ this.childrenProperty = 'children';
11
+ }
6
12
  render() {
7
13
  return this.data
8
14
  ? html `
@@ -13,11 +19,15 @@ let TreeViewPage = class TreeViewPage extends LitElement {
13
19
  : html ``;
14
20
  }
15
21
  renderItem(item) {
16
- const { label, children } = item;
22
+ var _a;
23
+ const id = item[this.idProperty];
24
+ const label = item[this.labelProperty];
25
+ const children = item[this.childrenProperty];
17
26
  const expandable = children && children.length > 0;
27
+ const selected = id === ((_a = this.selected) === null || _a === void 0 ? void 0 : _a[this.idProperty]);
18
28
  return html `
19
- <li .item=${item}>
20
- <span checkbox>${label}</span>
29
+ <li .item=${item} @click=${this.onClickSelect.bind(this)}>
30
+ <span ?selected=${selected}>${label}</span>
21
31
 
22
32
  ${expandable
23
33
  ? html `
@@ -29,6 +39,15 @@ let TreeViewPage = class TreeViewPage extends LitElement {
29
39
  </li>
30
40
  `;
31
41
  }
42
+ onClickSelect(e) {
43
+ var _a;
44
+ e.stopPropagation();
45
+ const target = e.target;
46
+ this.selected = (_a = target.closest('li')) === null || _a === void 0 ? void 0 : _a.item;
47
+ this.dispatchEvent(new CustomEvent('select', {
48
+ detail: this.selected
49
+ }));
50
+ }
32
51
  };
33
52
  TreeViewPage.styles = [
34
53
  css `
@@ -81,6 +100,9 @@ TreeViewPage.styles = [
81
100
  padding: 0.2em 0.5em;
82
101
  position: relative;
83
102
  }
103
+ span[selected] {
104
+ background-color: red;
105
+ }
84
106
  ul:before,
85
107
  code:before,
86
108
  span:before {
@@ -112,6 +134,18 @@ TreeViewPage.styles = [
112
134
  __decorate([
113
135
  property({ type: Object })
114
136
  ], TreeViewPage.prototype, "data", void 0);
137
+ __decorate([
138
+ property({ type: Object })
139
+ ], TreeViewPage.prototype, "selected", void 0);
140
+ __decorate([
141
+ property({ type: String, attribute: 'id-property' })
142
+ ], TreeViewPage.prototype, "idProperty", void 0);
143
+ __decorate([
144
+ property({ type: String, attribute: 'label-property' })
145
+ ], TreeViewPage.prototype, "labelProperty", void 0);
146
+ __decorate([
147
+ property({ type: String, attribute: 'children-property' })
148
+ ], TreeViewPage.prototype, "childrenProperty", void 0);
115
149
  TreeViewPage = __decorate([
116
150
  customElement('ox-tree-vertical')
117
151
  ], TreeViewPage);
package/dist/src/ox-tree-vertical.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-tree-vertical.js","sourceRoot":"","sources":["../../src/ox-tree-vertical.ts"],"names":[],"mappings":"AAAA,+DAA+D;;AAE/D,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AASpD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAmF1C,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA;;cAEE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;SAE/B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IACZ,CAAC;IAED,UAAU,CAAC,IAAc;QACvB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAChC,MAAM,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;QAElD,OAAO,IAAI,CAAA;kBACG,IAAI;yBACG,KAAK;;UAEpB,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;kBAEE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;;aAElD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;KAEb,CAAA;IACH,CAAC;;AA7GM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4EF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAgB;AAjFhC,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CA+GxB;SA/GY,YAAY","sourcesContent":["/* Inspired by https://www.cssscript.com/clean-tree-diagram/ */\n\nimport { PropertyValues, html, css, LitElement, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\ntype TreeItem = {\n label: string\n children?: TreeItem[]\n status?: { [state: string]: boolean | string }\n}\n\n@customElement('ox-tree-vertical')\nexport class TreeViewPage extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n ul,\n li {\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n }\n ul[root] {\n margin: 0 0 1em;\n text-align: center;\n }\n ul {\n display: table;\n }\n ul {\n width: 100%;\n }\n li {\n display: table-cell;\n padding: 0.5em 0;\n vertical-align: top;\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 li:first-child:before {\n left: 50%;\n }\n li:last-child:before {\n right: 50%;\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 0.5em;\n padding: 0.2em 0.5em;\n position: relative;\n }\n ul:before,\n code:before,\n span:before {\n outline: solid 1px #666;\n content: '';\n height: 0.5em;\n left: 50%;\n position: absolute;\n }\n ul:before {\n top: -0.5em;\n }\n code:before,\n span:before {\n top: -0.55em;\n }\n\n ul[root] > li {\n margin-top: 0;\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 ]\n\n @property({ type: Object }) data?: TreeItem\n\n render() {\n return this.data\n ? html`\n <ul root>\n ${this.renderItem(this.data)}\n </ul>\n `\n : html``\n }\n\n renderItem(item: TreeItem): TemplateResult {\n const { label, children } = item\n const expandable = children && children.length > 0\n\n return html`\n <li .item=${item}>\n <span checkbox>${label}</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"]}
1
+ {"version":3,"file":"ox-tree-vertical.js","sourceRoot":"","sources":["../../src/ox-tree-vertical.ts"],"names":[],"mappings":"AAAA,+DAA+D;;AAE/D,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAQ3D,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAsFiD,eAAU,GAAW,IAAI,CAAA;QACtB,kBAAa,GAAW,OAAO,CAAA;QAC5B,qBAAgB,GAAW,UAAU,CAAA;IA+CnG,CAAC;IA7CC,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA;;cAEE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;SAE/B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IACZ,CAAC;IAED,UAAU,CAAC,IAAc;;QACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAe,CAAA;QAE1D,MAAM,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;QAClD,MAAM,QAAQ,GAAG,EAAE,MAAK,MAAA,IAAI,CAAC,QAAQ,0CAAG,IAAI,CAAC,UAAU,CAAC,CAAA,CAAA;QAExD,OAAO,IAAI,CAAA;kBACG,IAAI,WAAW,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;0BACpC,QAAQ,IAAI,KAAK;;UAEjC,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;kBAEE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;;aAElD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;KAEb,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAa;;QACzB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QACtC,IAAI,CAAC,QAAQ,GAAG,MAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAS,0CAAE,IAAI,CAAA;QAEnD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,QAAQ;SACtB,CAAC,CACH,CAAA;IACH,CAAC;;AArIM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAoB;AACO;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;gDAA0B;AACtB;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;mDAAgC;AAC5B;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;sDAAsC;AAxFtF,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CAuIxB;SAvIY,YAAY","sourcesContent":["/* Inspired by https://www.cssscript.com/clean-tree-diagram/ */\n\nimport { PropertyValues, html, css, LitElement, 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-vertical')\nexport class TreeViewPage extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n ul,\n li {\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n }\n ul[root] {\n margin: 0 0 1em;\n text-align: center;\n }\n ul {\n display: table;\n }\n ul {\n width: 100%;\n }\n li {\n display: table-cell;\n padding: 0.5em 0;\n vertical-align: top;\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 li:first-child:before {\n left: 50%;\n }\n li:last-child:before {\n right: 50%;\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 0.5em;\n padding: 0.2em 0.5em;\n position: relative;\n }\n span[selected] {\n background-color: red;\n }\n ul:before,\n code:before,\n span:before {\n outline: solid 1px #666;\n content: '';\n height: 0.5em;\n left: 50%;\n position: absolute;\n }\n ul:before {\n top: -0.5em;\n }\n code:before,\n span:before {\n top: -0.55em;\n }\n\n ul[root] > li {\n margin-top: 0;\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 ]\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 root>\n ${this.renderItem(this.data)}\n </ul>\n `\n : html``\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} @click=${this.onClickSelect.bind(this)}>\n <span ?selected=${selected}>${label}</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"]}
package/dist/src/ox-tree.d.ts CHANGED
@@ -1,16 +1,20 @@
1
1
  import { LitElement, TemplateResult } from 'lit';
2
2
  type TreeItem = {
3
- label: string;
4
- children?: TreeItem[];
5
- status?: {
3
+ [key: string]: any;
4
+ __status__?: {
6
5
  [state: string]: boolean | string;
7
6
  };
8
7
  };
9
8
  export declare class OxTree extends LitElement {
10
9
  static styles: import("lit").CSSResult[];
11
10
  data?: TreeItem;
11
+ selected?: TreeItem;
12
+ idProperty: string;
13
+ labelProperty: string;
14
+ childrenProperty: string;
12
15
  render(): TemplateResult<1>;
13
16
  renderItem(item: TreeItem): TemplateResult;
17
+ onClickSelect(e: MouseEvent): void;
14
18
  onClickExpander(e: MouseEvent): void;
15
19
  onClickItem(e: MouseEvent): void;
16
20
  walkTreeCheckedUpdate(item: TreeItem, checked?: string): void;
package/dist/src/ox-tree.js CHANGED
@@ -2,6 +2,12 @@ import { __decorate } from "tslib";
2
2
  import { LitElement, css, html } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
4
  let OxTree = class OxTree extends LitElement {
5
+ constructor() {
6
+ super(...arguments);
7
+ this.idProperty = 'id';
8
+ this.labelProperty = 'label';
9
+ this.childrenProperty = 'children';
10
+ }
5
11
  render() {
6
12
  return this.data
7
13
  ? html `
@@ -12,14 +18,25 @@ let OxTree = class OxTree extends LitElement {
12
18
  : html ``;
13
19
  }
14
20
  renderItem(item) {
15
- const { label, children, status = {} } = item;
21
+ var _a;
22
+ const { __status__ = {} } = item;
23
+ const id = item[this.idProperty];
24
+ const label = item[this.labelProperty];
25
+ const children = item[this.childrenProperty];
16
26
  const expandable = children && children.length > 0;
17
- const { collapsed, checked } = status;
27
+ const { collapsed, checked } = __status__;
28
+ const selected = id === ((_a = this.selected) === null || _a === void 0 ? void 0 : _a[this.idProperty]);
18
29
  return html `
19
- <li checked=${checked} ?collapsed=${collapsed} ?leaf=${!expandable} .item=${item}>
30
+ <li
31
+ checked=${checked}
32
+ ?collapsed=${collapsed}
33
+ ?leaf=${!expandable}
34
+ .item=${item}
35
+ @click=${this.onClickSelect.bind(this)}
36
+ >
20
37
  ${expandable ? html ` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html ``}
21
38
  <span checkbox></span>
22
- ${label}
39
+ <span label ?selected=${selected}>${label}</span>
23
40
  ${expandable && !collapsed
24
41
  ? html `
25
42
  <ul>
@@ -30,13 +47,22 @@ let OxTree = class OxTree extends LitElement {
30
47
  </li>
31
48
  `;
32
49
  }
50
+ onClickSelect(e) {
51
+ var _a;
52
+ e.stopPropagation();
53
+ const target = e.target;
54
+ this.selected = (_a = target.closest('li')) === null || _a === void 0 ? void 0 : _a.item;
55
+ this.dispatchEvent(new CustomEvent('select', {
56
+ detail: this.selected
57
+ }));
58
+ }
33
59
  onClickExpander(e) {
34
60
  e.stopPropagation();
35
61
  const target = e.target;
36
62
  const itemElement = target.closest('li');
37
63
  var item = itemElement.item;
38
- item.status = {
39
- ...item.status,
64
+ item.__status__ = {
65
+ ...item.__status__,
40
66
  collapsed: !itemElement.hasAttribute('collapsed')
41
67
  };
42
68
  this.requestUpdate();
@@ -52,34 +78,36 @@ let OxTree = class OxTree extends LitElement {
52
78
  this.requestUpdate();
53
79
  }
54
80
  walkTreeCheckedUpdate(item, checked = '') {
55
- const { children, status } = item;
81
+ const { __status__ } = item;
82
+ const children = item[this.childrenProperty];
56
83
  children === null || children === void 0 ? void 0 : children.forEach(child => this.walkTreeCheckedUpdate(child, checked));
57
- item.status = {
58
- ...status,
84
+ item.__status__ = {
85
+ ...__status__,
59
86
  checked
60
87
  };
61
88
  }
62
89
  updateCheckedAll(item) {
63
- const { children, status } = item;
90
+ const { __status__ } = item;
91
+ const children = item[this.childrenProperty];
64
92
  if (!children || children.length == 0) {
65
93
  return;
66
94
  }
67
95
  children.forEach(child => this.updateCheckedAll(child));
68
96
  var checked = '';
69
97
  children.forEach(child => {
70
- const { status = {} } = child;
71
- if (status.checked == 'half-checked') {
98
+ const { __status__ = {} } = child;
99
+ if (__status__.checked == 'half-checked') {
72
100
  checked = 'half-checked';
73
101
  }
74
- else if (status.checked == 'checked') {
102
+ else if (__status__.checked == 'checked') {
75
103
  checked = checked == 'checked' || checked == '' ? 'checked' : 'half-checked';
76
104
  }
77
105
  else {
78
106
  checked = checked == 'unchecked' || checked == '' ? 'unchecked' : 'half-checked';
79
107
  }
80
108
  });
81
- item.status = {
82
- ...status,
109
+ item.__status__ = {
110
+ ...__status__,
83
111
  checked
84
112
  };
85
113
  }
@@ -146,6 +174,10 @@ OxTree.styles = [
146
174
  border-radius: 2px;
147
175
  }
148
176
 
177
+ span[label][selected] {
178
+ background-color: red;
179
+ }
180
+
149
181
  li[checked='checked'] > span[checkbox]::before {
150
182
  background-color: #1890ff;
151
183
  border-color: #1890ff;
@@ -187,6 +219,18 @@ OxTree.styles = [
187
219
  __decorate([
188
220
  property({ type: Object })
189
221
  ], OxTree.prototype, "data", void 0);
222
+ __decorate([
223
+ property({ type: Object })
224
+ ], OxTree.prototype, "selected", void 0);
225
+ __decorate([
226
+ property({ type: String, attribute: 'id-property' })
227
+ ], OxTree.prototype, "idProperty", void 0);
228
+ __decorate([
229
+ property({ type: String, attribute: 'label-property' })
230
+ ], OxTree.prototype, "labelProperty", void 0);
231
+ __decorate([
232
+ property({ type: String, attribute: 'children-property' })
233
+ ], OxTree.prototype, "childrenProperty", void 0);
190
234
  OxTree = __decorate([
191
235
  customElement('ox-tree')
192
236
  ], OxTree);
package/dist/src/ox-tree.js.map CHANGED
@@ -1 +1 @@
1
- {"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 label: string\n children?: TreeItem[]\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: 20px;\n overflow: hidden;\n position: relative;\n }\n\n li {\n cursor: pointer;\n overflow: hidden;\n }\n\n span[expander] {\n display: inline-block;\n vertical-align: middle;\n width: 20px;\n height: 20px;\n cursor: pointer;\n position: relative;\n }\n\n span[expander]::before {\n position: absolute;\n top: 8px;\n left: 6px;\n display: block;\n content: ' ';\n border: 4px solid transparent;\n border-top: 4px solid rgba(0, 0, 0, 0.65);\n }\n\n li[collapsed] > span[expander]::before {\n transform: rotate(-90deg);\n }\n\n li[leaf] {\n padding-left: 20px;\n }\n\n span[checkbox] {\n display: inline-block;\n vertical-align: middle;\n width: 20px;\n height: 20px;\n cursor: pointer;\n position: relative;\n }\n\n span[checkbox]::before {\n cursor: pointer;\n position: absolute;\n top: 2px;\n content: ' ';\n display: block;\n width: 16px;\n height: 16px;\n border: 1px solid #d9d9d9;\n border-radius: 2px;\n }\n\n li[checked='checked'] > span[checkbox]::before {\n background-color: #1890ff;\n border-color: #1890ff;\n }\n\n li[checked='checked'] > span[checkbox]::after {\n position: absolute;\n content: ' ';\n display: block;\n top: 4px;\n left: 5px;\n width: 5px;\n height: 9px;\n border: 2px solid #fff;\n border-top: none;\n border-left: none;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n }\n\n li[checked='half-checked'] > span[checkbox]::before {\n background-color: #1890ff;\n border-color: #1890ff;\n }\n\n li[checked='half-checked'] > span[checkbox]::after {\n position: absolute;\n content: ' ';\n display: block;\n top: 9px;\n left: 3px;\n width: 10px;\n height: 2px;\n background-color: #fff;\n }\n `\n ]\n\n @property({ type: Object }) data?: TreeItem\n\n render() {\n return this.data\n ? html`\n <ul @click=${this.onClickItem.bind(this)}>\n ${this.renderItem(this.data)}\n </ul>\n `\n : html``\n }\n\n renderItem(item: TreeItem): TemplateResult {\n const { label, children, status = {} } = item\n const expandable = children && children.length > 0\n const { collapsed, checked } = status\n\n return html`\n <li checked=${checked} ?collapsed=${collapsed} ?leaf=${!expandable} .item=${item}>\n ${expandable ? html` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html``}\n <span checkbox></span>\n ${label}\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 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 { children, status } = item\n children?.forEach(child => this.walkTreeCheckedUpdate(child, checked))\n item.status = {\n ...status,\n checked\n }\n }\n\n updateCheckedAll(item: TreeItem) {\n const { children, status } = item\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"]}
1
+ {"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: 20px;\n overflow: hidden;\n position: relative;\n }\n\n li {\n cursor: pointer;\n overflow: hidden;\n }\n\n span[expander] {\n display: inline-block;\n vertical-align: middle;\n width: 20px;\n height: 20px;\n cursor: pointer;\n position: relative;\n }\n\n span[expander]::before {\n position: absolute;\n top: 8px;\n left: 6px;\n display: block;\n content: ' ';\n border: 4px solid transparent;\n border-top: 4px solid rgba(0, 0, 0, 0.65);\n }\n\n li[collapsed] > span[expander]::before {\n transform: rotate(-90deg);\n }\n\n li[leaf] {\n padding-left: 20px;\n }\n\n span[checkbox] {\n display: inline-block;\n vertical-align: middle;\n width: 20px;\n height: 20px;\n cursor: pointer;\n position: relative;\n }\n\n span[checkbox]::before {\n cursor: pointer;\n position: absolute;\n top: 2px;\n content: ' ';\n display: block;\n width: 16px;\n height: 16px;\n border: 1px solid #d9d9d9;\n border-radius: 2px;\n }\n\n span[label][selected] {\n background-color: red;\n }\n\n li[checked='checked'] > span[checkbox]::before {\n background-color: #1890ff;\n border-color: #1890ff;\n }\n\n li[checked='checked'] > span[checkbox]::after {\n position: absolute;\n content: ' ';\n display: block;\n top: 4px;\n left: 5px;\n width: 5px;\n height: 9px;\n border: 2px solid #fff;\n border-top: none;\n border-left: none;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n }\n\n li[checked='half-checked'] > span[checkbox]::before {\n background-color: #1890ff;\n border-color: #1890ff;\n }\n\n li[checked='half-checked'] > span[checkbox]::after {\n position: absolute;\n content: ' ';\n display: block;\n top: 9px;\n left: 3px;\n width: 10px;\n height: 2px;\n background-color: #fff;\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 @click=${this.onClickItem.bind(this)}>\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 = id === this.selected?.[this.idProperty]\n\n return html`\n <li\n checked=${checked}\n ?collapsed=${collapsed}\n ?leaf=${!expandable}\n .item=${item}\n @click=${this.onClickSelect.bind(this)}\n >\n ${expandable ? html` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html``}\n <span checkbox></span>\n <span label ?selected=${selected}>${label}</span>\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/tsconfig.tsbuildinfo CHANGED
@@ -1 +1 @@
1
- {"program":{"fileNames":["../../../node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/typescript/lib/lib.es2015.d.ts","../../../node_modules/typescript/lib/lib.es2016.d.ts","../../../node_modules/typescript/lib/lib.es2017.d.ts","../../../node_modules/typescript/lib/lib.es2018.d.ts","../../../node_modules/typescript/lib/lib.es2019.d.ts","../../../node_modules/typescript/lib/lib.es2020.d.ts","../../../node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2019.intl.d.ts","../../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../../node_modules/typescript/lib/lib.es2020.date.d.ts","../../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../../node_modules/typescript/lib/lib.es2020.number.d.ts","../../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../../node_modules/tslib/tslib.d.ts","../../../node_modules/@lit/reactive-element/css-tag.d.ts","../../../node_modules/@lit/reactive-element/reactive-controller.d.ts","../../../node_modules/@lit/reactive-element/reactive-element.d.ts","../../../node_modules/@types/trusted-types/lib/index.d.ts","../../../node_modules/@types/trusted-types/index.d.ts","../../../node_modules/lit-html/directive.d.ts","../../../node_modules/lit-html/lit-html.d.ts","../../../node_modules/lit-element/lit-element.d.ts","../../../node_modules/lit-html/is-server.d.ts","../../../node_modules/lit/index.d.ts","../../../node_modules/@lit/reactive-element/decorators/base.d.ts","../../../node_modules/@lit/reactive-element/decorators/custom-element.d.ts","../../../node_modules/@lit/reactive-element/decorators/property.d.ts","../../../node_modules/@lit/reactive-element/decorators/state.d.ts","../../../node_modules/@lit/reactive-element/decorators/event-options.d.ts","../../../node_modules/@lit/reactive-element/decorators/query.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-all.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-async.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-assigned-nodes.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.d.ts","../../../node_modules/lit/decorators.d.ts","../src/ox-tree.ts","../src/ox-tree-vertical.ts","../src/index.ts","../../../node_modules/@material/mwc-icon/mwc-icon.d.ts","../stories/data-tree-vertical.stories.ts","../stories/data-tree.stories.ts","../../../node_modules/@types/node/assert.d.ts","../../../node_modules/@types/node/assert/strict.d.ts","../../../node_modules/@types/node/globals.d.ts","../../../node_modules/@types/node/async_hooks.d.ts","../../../node_modules/@types/node/buffer.d.ts","../../../node_modules/@types/node/child_process.d.ts","../../../node_modules/@types/node/cluster.d.ts","../../../node_modules/@types/node/console.d.ts","../../../node_modules/@types/node/constants.d.ts","../../../node_modules/@types/node/crypto.d.ts","../../../node_modules/@types/node/dgram.d.ts","../../../node_modules/@types/node/diagnostics_channel.d.ts","../../../node_modules/@types/node/dns.d.ts","../../../node_modules/@types/node/dns/promises.d.ts","../../../node_modules/@types/node/domain.d.ts","../../../node_modules/@types/node/dom-events.d.ts","../../../node_modules/@types/node/events.d.ts","../../../node_modules/@types/node/fs.d.ts","../../../node_modules/@types/node/fs/promises.d.ts","../../../node_modules/@types/node/http.d.ts","../../../node_modules/@types/node/http2.d.ts","../../../node_modules/@types/node/https.d.ts","../../../node_modules/@types/node/inspector.d.ts","../../../node_modules/@types/node/module.d.ts","../../../node_modules/@types/node/net.d.ts","../../../node_modules/@types/node/os.d.ts","../../../node_modules/@types/node/path.d.ts","../../../node_modules/@types/node/perf_hooks.d.ts","../../../node_modules/@types/node/process.d.ts","../../../node_modules/@types/node/punycode.d.ts","../../../node_modules/@types/node/querystring.d.ts","../../../node_modules/@types/node/readline.d.ts","../../../node_modules/@types/node/readline/promises.d.ts","../../../node_modules/@types/node/repl.d.ts","../../../node_modules/@types/node/stream.d.ts","../../../node_modules/@types/node/stream/promises.d.ts","../../../node_modules/@types/node/stream/consumers.d.ts","../../../node_modules/@types/node/stream/web.d.ts","../../../node_modules/@types/node/string_decoder.d.ts","../../../node_modules/@types/node/test.d.ts","../../../node_modules/@types/node/timers.d.ts","../../../node_modules/@types/node/timers/promises.d.ts","../../../node_modules/@types/node/tls.d.ts","../../../node_modules/@types/node/trace_events.d.ts","../../../node_modules/@types/node/tty.d.ts","../../../node_modules/@types/node/url.d.ts","../../../node_modules/@types/node/util.d.ts","../../../node_modules/@types/node/v8.d.ts","../../../node_modules/@types/node/vm.d.ts","../../../node_modules/@types/node/wasi.d.ts","../../../node_modules/@types/node/worker_threads.d.ts","../../../node_modules/@types/node/zlib.d.ts","../../../node_modules/@types/node/globals.global.d.ts","../../../node_modules/@types/node/index.d.ts","../../../node_modules/@types/mocha/index.d.ts"],"fileInfos":[{"version":"8730f4bf322026ff5229336391a18bcaa1f94d4f82416c8b2f3954e2ccaae2ba","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","4b421cbfb3a38a27c279dec1e9112c3d1da296f77a1a85ddadf7e7a425d45d18","1fc5ab7a764205c68fa10d381b08417795fc73111d6dd16b5b1ed36badb743d9",{"version":"3aafcb693fe5b5c3bd277bd4c3a617b53db474fe498fc5df067c5603b1eebde7","affectsGlobalScope":true},{"version":"adb996790133eb33b33aadb9c09f15c2c575e71fb57a62de8bf74dbf59ec7dfb","affectsGlobalScope":true},{"version":"8cc8c5a3bac513368b0157f3d8b31cfdcfe78b56d3724f30f80ed9715e404af8","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"c5c05907c02476e4bde6b7e76a79ffcd948aedd14b6a8f56e4674221b0417398","affectsGlobalScope":true},{"version":"5f406584aef28a331c36523df688ca3650288d14f39c5d2e555c95f0d2ff8f6f","affectsGlobalScope":true},{"version":"22f230e544b35349cfb3bd9110b6ef37b41c6d6c43c3314a31bd0d9652fcec72","affectsGlobalScope":true},{"version":"7ea0b55f6b315cf9ac2ad622b0a7813315bb6e97bf4bb3fbf8f8affbca7dc695","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"eb26de841c52236d8222f87e9e6a235332e0788af8c87a71e9e210314300410a","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"81cac4cbc92c0c839c70f8ffb94eb61e2d32dc1c3cf6d95844ca099463cf37ea","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"d154ea5bb7f7f9001ed9153e876b2d5b8f5c2bb9ec02b3ae0d239ec769f1f2ae","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"6e7997ef61de3132e4d4b2250e75343f487903ddf5370e7ce33cf1b9db9a63ed","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"5e5e095c4470c8bab227dbbc61374878ecead104c74ab9960d3adcccfee23205","affectsGlobalScope":true},{"version":"09aa50414b80c023553090e2f53827f007a301bc34b0495bfb2c3c08ab9ad1eb","affectsGlobalScope":true},{"version":"d7f680a43f8cd12a6b6122c07c54ba40952b0c8aa140dcfcf32eb9e6cb028596","affectsGlobalScope":true},{"version":"3787b83e297de7c315d55d4a7c546ae28e5f6c0a361b7a1dcec1f1f50a54ef11","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"2768ef564cfc0689a1b76106c421a2909bdff0acbe87da010785adab80efdd5c","affectsGlobalScope":true},{"version":"b248e32ca52e8f5571390a4142558ae4f203ae2f94d5bac38a3084d529ef4e58","affectsGlobalScope":true},{"version":"52d1bb7ab7a3306fd0375c8bff560feed26ed676a5b0457fa8027b563aecb9a4","affectsGlobalScope":true},"14a84fbe4ec531dcbaf5d2594fd95df107258e60ae6c6a076404f13c3f66f28e","52dd370c807255c61765347fc90a9bee3c522b8744dc222714e2bf6b5be3a823","1e5743b25a63fd34ffbae89adcbf248ee17db6ed08d90079ffa93803c3e80d2a","3cbcdf2a84c93c6b62d8d4584f613c8af7c6330ac2ba1ff781d10a3e0935beb9","2fcd2d22b1f30555e785105597cd8f57ed50300e213c4f1bbca6ae149f782c38",{"version":"bb4248c7f953233ac52332088fac897d62b82be07244e551d87c5049600b6cf7","affectsGlobalScope":true},"3f30c6b57bf5eb7a7d4298506b78b18d428a39a409e1eadd93a3fdd0299d2687","62da965db3bd1b4ce135048ae8a317d7eb1949068824cb949dd4a91f7e3d6c2d","eba7cf33380cc3a3cf614faf67300e14d0bdff9ea6c5cd6f4b040b1756a48ab1","5e7e090243bf203382a5cb04eabbdc38d78f6d5922f16f543e4da8fa007d5ff9","cd823094ded7c8ac4f94ab6dc387dab699293eb8323d9f948304efc07e4ae7b2","241000969e5367a9a9b9a4f57963e54e5a012c9d89c273526c0115650a7b9e5f","ac388c7c7a262213a3700451bc921e382a93fb27c0252c34ccf03540b4ce044b","097a7e3badfd1c4b35f72aa0f722f5714a4f6a84e53fca5a79dcfebbfc5e718d","fb0107c83e2e0e75b77dacd0c3c6c3ab6844e98dce2a8f858c6f0a57c12136a6","0a478dcb6e6bd8a5d871165659c79cee7b8c3b7a87289118d22e1a04d171e252","e385eb01000d045ea07cea09c488f66e051709a9ac460bf271623f9984e0c419","bf69beba89702c85d84546269e0d4e8b128d32e26b314ee9b501b0b32c82490b","46f3a421b048670d16a3c02589261f17c1cea687f2602eed31e1335b53aed785","4bcb813ea56182beaaab1e8274524eb9f1449b0d8e79efc4a0399de09e43f816","c784eab1cf838d9d6527bce3d9f2d373145606666b68f7610291a7adf6e6bda9","f0380f581cb015778c0fe51e95b5b7f6dae237280654558469b2486c1572268a",{"version":"bbe6d8d71254270db385141e08ecb4a09a717e27fd16b62ffa244b0dfaa33f43","signature":"df13a991e8283de61afb8e9f8667a7432e60fec00bd4c5e79ef6e2939a30419e"},{"version":"178c346e40d6493ef0c77db9a4879c5c0069e41a7e3d05b27a1bb74b622a763f","signature":"f589799aa18a573a1499a146fc58752207c6f27df08a486ce2c0cb543adcd2e5"},{"version":"99e447b7f4dd58034015402e19393c664530c72f5669b7430dd11936622eb673","signature":"f76e6bfeb5b730680de14ea12b25c6f7cbd9f8d46d846e3e6c5f281351e77aa1"},{"version":"27b285e901600242883d62a5fff9f5d262c6fa128b6e6c6963f981f2630a957e","affectsGlobalScope":true},{"version":"92f7ae7924066b2f0004bd1a064580d38436f6c770294e4ab8fa1e12436aae09","signature":"3678a0f48959fca0327d45bf1f591f9656931a3ccfdf09704aeece78d94de277"},{"version":"de39e3af432116668dfb3657f83bafc8e762835dde50b40652a55e1595d306e7","signature":"153ede504ace3d9f61afdf3a90588533b6765ff1d9b67d5c0b2e8e6bab218ab6"},"7e771891adaa85b690266bc37bd6eb43bc57eecc4b54693ead36467e7369952a","a69c09dbea52352f479d3e7ac949fde3d17b195abe90b045d619f747b38d6d1a",{"version":"ca72190df0eb9b09d4b600821c8c7b6c9747b75a1c700c4d57dc0bb72abc074c","affectsGlobalScope":true},"21a167fec8f933752fb8157f06d28fab6817af3ad9b0bdb1908a10762391eab9",{"version":"bb65c6267c5d6676be61acbf6604cf0a4555ac4b505df58ac15c831fcbff4e3e","affectsGlobalScope":true},"374ca798f244e464346f14301dc2a8b4b111af1a83b49fffef5906c338a1f922","5a94487653355b56018122d92392beb2e5f4a6c63ba5cef83bbe1c99775ef713",{"version":"d5135ad93b33adcce80b18f8065087934cdc1730d63db58562edcf017e1aad9b","affectsGlobalScope":true},"82408ed3e959ddc60d3e9904481b5a8dc16469928257af22a3f7d1a3bc7fd8c4","dab86d9604fe40854ef3c0a6f9e8948873dc3509213418e5e457f410fd11200f","bb9c4ffa5e6290c6980b63c815cdd1625876dadb2efaf77edbe82984be93e55e","489532ff54b714f0e0939947a1c560e516d3ae93d51d639ab02e907a0e950114","f30bb836526d930a74593f7b0f5c1c46d10856415a8f69e5e2fc3db80371e362","14b5aa23c5d0ae1907bc696ac7b6915d88f7d85799cc0dc2dcf98fbce2c5a67c","5c439dafdc09abe4d6c260a96b822fa0ba5be7203c71a63ab1f1423cd9e838ea",{"version":"6b526a5ec4a401ca7c26cfe6a48e641d8f30af76673bad3b06a1b4504594a960","affectsGlobalScope":true},{"version":"816ad2e607a96de5bcac7d437f843f5afd8957f1fa5eefa6bba8e4ed7ca8fd84","affectsGlobalScope":true},"cec36af22f514322f870e81d30675c78df82ae8bf4863f5fd4e4424c040c678d","d903fafe96674bc0b2ac38a5be4a8fc07b14c2548d1cdb165a80ea24c44c0c54","5eec82ac21f84d83586c59a16b9b8502d34505d1393393556682fe7e7fde9ef2","04eb6578a588d6a46f50299b55f30e3a04ef27d0c5a46c57d8fcc211cd530faa","8d3c583a07e0c37e876908c2d5da575019f689df8d9fa4c081d99119d53dba22","2c828a5405191d006115ab34e191b8474bc6c86ffdc401d1a9864b1b6e088a58",{"version":"e8b18c6385ff784228a6f369694fcf1a6b475355ba89090a88de13587a9391d5","affectsGlobalScope":true},"d076fede3cb042e7b13fc29442aaa03a57806bc51e2b26a67a01fbc66a7c0c12","7c013aa892414a7fdcfd861ae524a668eaa3ede8c7c0acafaf611948122c8d93","b0973c3cbcdc59b37bf477731d468696ecaf442593ec51bab497a613a580fe30",{"version":"4989e92ba5b69b182d2caaea6295af52b7dc73a4f7a2e336a676722884e7139d","affectsGlobalScope":true},{"version":"b3624aed92dab6da8484280d3cb3e2f4130ec3f4ef3f8201c95144ae9e898bb6","affectsGlobalScope":true},"5153a2fd150e46ce57bb3f8db1318d33f6ad3261ed70ceeff92281c0608c74a3","210d54cd652ec0fec8c8916e4af59bb341065576ecda039842f9ffb2e908507c","36b03690b628eab08703d63f04eaa89c5df202e5f1edf3989f13ad389cd2c091","0effadd232a20498b11308058e334d3339cc5bf8c4c858393e38d9d4c0013dcf","25846d43937c672bab7e8195f3d881f93495df712ee901860effc109918938cc","fd93cee2621ff42dabe57b7be402783fd1aa69ece755bcba1e0290547ae60513","1b952304137851e45bc009785de89ada562d9376177c97e37702e39e60c2f1ff","69ee23dd0d215b09907ad30d23f88b7790c93329d1faf31d7835552a10cf7cbf","44b8b584a338b190a59f4f6929d072431950c7bd92ec2694821c11bce180c8a5","23b89798789dffbd437c0c423f5d02d11f9736aea73d6abf16db4f812ff36eda","223c37f62ce09a3d99e77498acdee7b2705a4ae14552fbdb4093600cd9164f3f",{"version":"970a90f76d4d219ad60819d61f5994514087ba94c985647a3474a5a3d12714ed","affectsGlobalScope":true},"e10177274a35a9d07c825615340b2fcde2f610f53f3fb40269fd196b4288dda6","4c8525f256873c7ba3135338c647eaf0ca7115a1a2805ae2d0056629461186ce","3c13ef48634e7b5012fcf7e8fce7496352c2d779a7201389ca96a2a81ee4314d","5d0a25ec910fa36595f85a67ac992d7a53dd4064a1ba6aea1c9f14ab73a023f2",{"version":"f0900cd5d00fe1263ff41201fb8073dbeb984397e4af3b8002a5c207a30bdc33","affectsGlobalScope":true},{"version":"4c50342e1b65d3bee2ed4ab18f84842d5724ad11083bd666d8705dc7a6079d80","affectsGlobalScope":true},"06d7c42d256f0ce6afe1b2b6cfbc97ab391f29dadb00dd0ae8e8f23f5bc916c3","ec4bd1b200670fb567920db572d6701ed42a9641d09c4ff6869768c8f81b404c","e59a892d87e72733e2a9ca21611b9beb52977be2696c7ba4b216cbbb9a48f5aa",{"version":"da26af7362f53d122283bc69fed862b9a9fe27e01bc6a69d1d682e0e5a4df3e6","affectsGlobalScope":true},"8a300fa9b698845a1f9c41ecbe2c5966634582a8e2020d51abcace9b55aa959e",{"version":"ab9b9a36e5284fd8d3bf2f7d5fcbc60052f25f27e4d20954782099282c60d23e","affectsGlobalScope":true},"8dbe725f8d237e70310977afcfa011629804d101ebaa0266cafda6b61ad72236",{"version":"5f186a758a616c107c70e8918db4630d063bd782f22e6e0b17573b125765b40b","affectsGlobalScope":true}],"options":{"allowSyntheticDefaultImports":true,"declaration":true,"esModuleInterop":true,"experimentalDecorators":true,"importHelpers":true,"inlineSources":true,"module":99,"noEmitOnError":true,"outDir":"./","rootDir":"..","sourceMap":true,"strict":true,"target":5,"useDefineForClassFields":false},"fileIdsList":[[117],[46,117],[54,117],[46,54,117],[46,54,62,117],[44,45,117],[53,117],[71,117],[74,117],[75,80,108,117],[76,87,88,95,105,116,117],[76,77,87,95,117],[78,117],[79,80,88,96,117],[80,105,113,117],[81,83,87,95,117],[82,117],[83,84,117],[87,117],[85,87,117],[87,88,89,105,116,117],[87,88,89,102,105,108,117],[117,121],[83,90,95,105,116,117],[87,88,90,91,95,105,113,116,117],[90,92,105,113,116,117],[71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123],[87,93,117],[94,116,117],[83,87,95,105,117],[96,117],[97,117],[74,98,117],[99,115,117,121],[100,117],[101,117],[87,102,103,117],[102,104,117,119],[75,87,105,106,107,108,117],[75,105,107,117],[105,106,117],[108,117],[109,117],[87,111,112,117],[111,112,117],[80,95,105,113,117],[114,117],[95,115,117],[75,90,101,116,117],[80,117],[105,117,118],[117,119],[117,120],[75,80,87,89,98,105,116,117,119,121],[105,117,122],[47,117],[46,50,117],[50,117],[48,49,117],[55,56,57,58,59,60,61,62,63,117],[46,50,51,52,117],[43,65,66,117],[43,53,64,117],[43,53,66,68,117],[43,53,65,68,117],[65,66],[53],[53,66,68],[53,65,68]],"referencedMap":[[44,1],[54,2],[55,3],[58,4],[56,4],[60,4],[63,5],[62,1],[61,4],[59,4],[57,3],[45,1],[46,6],[68,7],[125,1],[71,8],[72,8],[74,9],[75,10],[76,11],[77,12],[78,13],[79,14],[80,15],[81,16],[82,17],[83,18],[84,18],[86,19],[85,20],[87,19],[88,21],[89,22],[73,23],[123,1],[90,24],[91,25],[92,26],[124,27],[93,28],[94,29],[95,30],[96,31],[97,32],[98,33],[99,34],[100,35],[101,36],[102,37],[103,37],[104,38],[105,39],[107,40],[106,41],[108,42],[109,43],[110,1],[111,44],[112,45],[113,46],[114,47],[115,48],[116,49],[117,50],[118,51],[119,52],[120,53],[121,54],[122,55],[48,56],[47,1],[51,57],[49,58],[52,1],[50,59],[64,60],[53,61],[43,1],[8,1],[10,1],[9,1],[2,1],[11,1],[12,1],[13,1],[14,1],[15,1],[16,1],[17,1],[18,1],[3,1],[4,1],[22,1],[19,1],[20,1],[21,1],[23,1],[24,1],[25,1],[5,1],[26,1],[27,1],[28,1],[29,1],[6,1],[33,1],[30,1],[31,1],[32,1],[34,1],[7,1],[35,1],[40,1],[41,1],[36,1],[37,1],[38,1],[39,1],[1,1],[42,1],[67,62],[66,63],[65,63],[69,64],[70,65]],"exportedModulesMap":[[44,1],[54,2],[55,3],[58,4],[56,4],[60,4],[63,5],[62,1],[61,4],[59,4],[57,3],[45,1],[46,6],[68,7],[125,1],[71,8],[72,8],[74,9],[75,10],[76,11],[77,12],[78,13],[79,14],[80,15],[81,16],[82,17],[83,18],[84,18],[86,19],[85,20],[87,19],[88,21],[89,22],[73,23],[123,1],[90,24],[91,25],[92,26],[124,27],[93,28],[94,29],[95,30],[96,31],[97,32],[98,33],[99,34],[100,35],[101,36],[102,37],[103,37],[104,38],[105,39],[107,40],[106,41],[108,42],[109,43],[110,1],[111,44],[112,45],[113,46],[114,47],[115,48],[116,49],[117,50],[118,51],[119,52],[120,53],[121,54],[122,55],[48,56],[47,1],[51,57],[49,58],[52,1],[50,59],[64,60],[53,61],[43,1],[8,1],[10,1],[9,1],[2,1],[11,1],[12,1],[13,1],[14,1],[15,1],[16,1],[17,1],[18,1],[3,1],[4,1],[22,1],[19,1],[20,1],[21,1],[23,1],[24,1],[25,1],[5,1],[26,1],[27,1],[28,1],[29,1],[6,1],[33,1],[30,1],[31,1],[32,1],[34,1],[7,1],[35,1],[40,1],[41,1],[36,1],[37,1],[38,1],[39,1],[1,1],[42,1],[67,66],[66,67],[65,67],[69,68],[70,69]],"semanticDiagnosticsPerFile":[44,54,55,58,56,60,63,62,61,59,57,45,46,68,125,71,72,74,75,76,77,78,79,80,81,82,83,84,86,85,87,88,89,73,123,90,91,92,124,93,94,95,96,97,98,99,100,101,102,103,104,105,107,106,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,48,47,51,49,52,50,64,53,43,8,10,9,2,11,12,13,14,15,16,17,18,3,4,22,19,20,21,23,24,25,5,26,27,28,29,6,33,30,31,32,34,7,35,40,41,36,37,38,39,1,42,67,66,65,69,70]},"version":"4.9.4"}
1
+ {"program":{"fileNames":["../../../node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/typescript/lib/lib.es2015.d.ts","../../../node_modules/typescript/lib/lib.es2016.d.ts","../../../node_modules/typescript/lib/lib.es2017.d.ts","../../../node_modules/typescript/lib/lib.es2018.d.ts","../../../node_modules/typescript/lib/lib.es2019.d.ts","../../../node_modules/typescript/lib/lib.es2020.d.ts","../../../node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2019.intl.d.ts","../../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../../node_modules/typescript/lib/lib.es2020.date.d.ts","../../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../../node_modules/typescript/lib/lib.es2020.number.d.ts","../../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../../node_modules/tslib/tslib.d.ts","../../../node_modules/@lit/reactive-element/css-tag.d.ts","../../../node_modules/@lit/reactive-element/reactive-controller.d.ts","../../../node_modules/@lit/reactive-element/reactive-element.d.ts","../../../node_modules/@types/trusted-types/lib/index.d.ts","../../../node_modules/@types/trusted-types/index.d.ts","../../../node_modules/lit-html/directive.d.ts","../../../node_modules/lit-html/lit-html.d.ts","../../../node_modules/lit-element/lit-element.d.ts","../../../node_modules/lit-html/is-server.d.ts","../../../node_modules/lit/index.d.ts","../../../node_modules/@lit/reactive-element/decorators/base.d.ts","../../../node_modules/@lit/reactive-element/decorators/custom-element.d.ts","../../../node_modules/@lit/reactive-element/decorators/property.d.ts","../../../node_modules/@lit/reactive-element/decorators/state.d.ts","../../../node_modules/@lit/reactive-element/decorators/event-options.d.ts","../../../node_modules/@lit/reactive-element/decorators/query.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-all.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-async.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-assigned-nodes.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.d.ts","../../../node_modules/lit/decorators.d.ts","../src/ox-tree.ts","../src/ox-tree-vertical.ts","../src/index.ts","../../../node_modules/@material/mwc-icon/mwc-icon.d.ts","../stories/data-tree-vertical.stories.ts","../stories/data-tree.stories.ts","../../../node_modules/@types/node/assert.d.ts","../../../node_modules/@types/node/assert/strict.d.ts","../../../node_modules/@types/node/globals.d.ts","../../../node_modules/@types/node/async_hooks.d.ts","../../../node_modules/@types/node/buffer.d.ts","../../../node_modules/@types/node/child_process.d.ts","../../../node_modules/@types/node/cluster.d.ts","../../../node_modules/@types/node/console.d.ts","../../../node_modules/@types/node/constants.d.ts","../../../node_modules/@types/node/crypto.d.ts","../../../node_modules/@types/node/dgram.d.ts","../../../node_modules/@types/node/diagnostics_channel.d.ts","../../../node_modules/@types/node/dns.d.ts","../../../node_modules/@types/node/dns/promises.d.ts","../../../node_modules/@types/node/domain.d.ts","../../../node_modules/@types/node/dom-events.d.ts","../../../node_modules/@types/node/events.d.ts","../../../node_modules/@types/node/fs.d.ts","../../../node_modules/@types/node/fs/promises.d.ts","../../../node_modules/@types/node/http.d.ts","../../../node_modules/@types/node/http2.d.ts","../../../node_modules/@types/node/https.d.ts","../../../node_modules/@types/node/inspector.d.ts","../../../node_modules/@types/node/module.d.ts","../../../node_modules/@types/node/net.d.ts","../../../node_modules/@types/node/os.d.ts","../../../node_modules/@types/node/path.d.ts","../../../node_modules/@types/node/perf_hooks.d.ts","../../../node_modules/@types/node/process.d.ts","../../../node_modules/@types/node/punycode.d.ts","../../../node_modules/@types/node/querystring.d.ts","../../../node_modules/@types/node/readline.d.ts","../../../node_modules/@types/node/readline/promises.d.ts","../../../node_modules/@types/node/repl.d.ts","../../../node_modules/@types/node/stream.d.ts","../../../node_modules/@types/node/stream/promises.d.ts","../../../node_modules/@types/node/stream/consumers.d.ts","../../../node_modules/@types/node/stream/web.d.ts","../../../node_modules/@types/node/string_decoder.d.ts","../../../node_modules/@types/node/test.d.ts","../../../node_modules/@types/node/timers.d.ts","../../../node_modules/@types/node/timers/promises.d.ts","../../../node_modules/@types/node/tls.d.ts","../../../node_modules/@types/node/trace_events.d.ts","../../../node_modules/@types/node/tty.d.ts","../../../node_modules/@types/node/url.d.ts","../../../node_modules/@types/node/util.d.ts","../../../node_modules/@types/node/v8.d.ts","../../../node_modules/@types/node/vm.d.ts","../../../node_modules/@types/node/wasi.d.ts","../../../node_modules/@types/node/worker_threads.d.ts","../../../node_modules/@types/node/zlib.d.ts","../../../node_modules/@types/node/globals.global.d.ts","../../../node_modules/@types/node/index.d.ts","../../../node_modules/@types/mocha/index.d.ts"],"fileInfos":[{"version":"8730f4bf322026ff5229336391a18bcaa1f94d4f82416c8b2f3954e2ccaae2ba","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","4b421cbfb3a38a27c279dec1e9112c3d1da296f77a1a85ddadf7e7a425d45d18","1fc5ab7a764205c68fa10d381b08417795fc73111d6dd16b5b1ed36badb743d9",{"version":"3aafcb693fe5b5c3bd277bd4c3a617b53db474fe498fc5df067c5603b1eebde7","affectsGlobalScope":true},{"version":"adb996790133eb33b33aadb9c09f15c2c575e71fb57a62de8bf74dbf59ec7dfb","affectsGlobalScope":true},{"version":"8cc8c5a3bac513368b0157f3d8b31cfdcfe78b56d3724f30f80ed9715e404af8","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"c5c05907c02476e4bde6b7e76a79ffcd948aedd14b6a8f56e4674221b0417398","affectsGlobalScope":true},{"version":"5f406584aef28a331c36523df688ca3650288d14f39c5d2e555c95f0d2ff8f6f","affectsGlobalScope":true},{"version":"22f230e544b35349cfb3bd9110b6ef37b41c6d6c43c3314a31bd0d9652fcec72","affectsGlobalScope":true},{"version":"7ea0b55f6b315cf9ac2ad622b0a7813315bb6e97bf4bb3fbf8f8affbca7dc695","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"eb26de841c52236d8222f87e9e6a235332e0788af8c87a71e9e210314300410a","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"81cac4cbc92c0c839c70f8ffb94eb61e2d32dc1c3cf6d95844ca099463cf37ea","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"d154ea5bb7f7f9001ed9153e876b2d5b8f5c2bb9ec02b3ae0d239ec769f1f2ae","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"6e7997ef61de3132e4d4b2250e75343f487903ddf5370e7ce33cf1b9db9a63ed","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"5e5e095c4470c8bab227dbbc61374878ecead104c74ab9960d3adcccfee23205","affectsGlobalScope":true},{"version":"09aa50414b80c023553090e2f53827f007a301bc34b0495bfb2c3c08ab9ad1eb","affectsGlobalScope":true},{"version":"d7f680a43f8cd12a6b6122c07c54ba40952b0c8aa140dcfcf32eb9e6cb028596","affectsGlobalScope":true},{"version":"3787b83e297de7c315d55d4a7c546ae28e5f6c0a361b7a1dcec1f1f50a54ef11","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"2768ef564cfc0689a1b76106c421a2909bdff0acbe87da010785adab80efdd5c","affectsGlobalScope":true},{"version":"b248e32ca52e8f5571390a4142558ae4f203ae2f94d5bac38a3084d529ef4e58","affectsGlobalScope":true},{"version":"52d1bb7ab7a3306fd0375c8bff560feed26ed676a5b0457fa8027b563aecb9a4","affectsGlobalScope":true},"14a84fbe4ec531dcbaf5d2594fd95df107258e60ae6c6a076404f13c3f66f28e","52dd370c807255c61765347fc90a9bee3c522b8744dc222714e2bf6b5be3a823","1e5743b25a63fd34ffbae89adcbf248ee17db6ed08d90079ffa93803c3e80d2a","3cbcdf2a84c93c6b62d8d4584f613c8af7c6330ac2ba1ff781d10a3e0935beb9","2fcd2d22b1f30555e785105597cd8f57ed50300e213c4f1bbca6ae149f782c38",{"version":"bb4248c7f953233ac52332088fac897d62b82be07244e551d87c5049600b6cf7","affectsGlobalScope":true},"3f30c6b57bf5eb7a7d4298506b78b18d428a39a409e1eadd93a3fdd0299d2687","62da965db3bd1b4ce135048ae8a317d7eb1949068824cb949dd4a91f7e3d6c2d","eba7cf33380cc3a3cf614faf67300e14d0bdff9ea6c5cd6f4b040b1756a48ab1","5e7e090243bf203382a5cb04eabbdc38d78f6d5922f16f543e4da8fa007d5ff9","cd823094ded7c8ac4f94ab6dc387dab699293eb8323d9f948304efc07e4ae7b2","241000969e5367a9a9b9a4f57963e54e5a012c9d89c273526c0115650a7b9e5f","ac388c7c7a262213a3700451bc921e382a93fb27c0252c34ccf03540b4ce044b","097a7e3badfd1c4b35f72aa0f722f5714a4f6a84e53fca5a79dcfebbfc5e718d","fb0107c83e2e0e75b77dacd0c3c6c3ab6844e98dce2a8f858c6f0a57c12136a6","0a478dcb6e6bd8a5d871165659c79cee7b8c3b7a87289118d22e1a04d171e252","e385eb01000d045ea07cea09c488f66e051709a9ac460bf271623f9984e0c419","bf69beba89702c85d84546269e0d4e8b128d32e26b314ee9b501b0b32c82490b","46f3a421b048670d16a3c02589261f17c1cea687f2602eed31e1335b53aed785","4bcb813ea56182beaaab1e8274524eb9f1449b0d8e79efc4a0399de09e43f816","c784eab1cf838d9d6527bce3d9f2d373145606666b68f7610291a7adf6e6bda9","f0380f581cb015778c0fe51e95b5b7f6dae237280654558469b2486c1572268a",{"version":"aa84f8e2652948af52ab4849fbf61ba4a626d4b448e9d58ee944b13f32024ad9","signature":"650c86d154fd654a23ceacff2cc29052749907b79ee1eec9f7a4001170a97724"},{"version":"e42f13eccb7cd0191133c70f9b4c307db453a4183c88ba012a64a596e560027a","signature":"138e50874aba098fe0d7a0b86a4b1d9d9beef39db3435b4b0e00abafa266e2af"},{"version":"99e447b7f4dd58034015402e19393c664530c72f5669b7430dd11936622eb673","signature":"f76e6bfeb5b730680de14ea12b25c6f7cbd9f8d46d846e3e6c5f281351e77aa1"},{"version":"27b285e901600242883d62a5fff9f5d262c6fa128b6e6c6963f981f2630a957e","affectsGlobalScope":true},{"version":"92f7ae7924066b2f0004bd1a064580d38436f6c770294e4ab8fa1e12436aae09","signature":"3678a0f48959fca0327d45bf1f591f9656931a3ccfdf09704aeece78d94de277"},{"version":"de39e3af432116668dfb3657f83bafc8e762835dde50b40652a55e1595d306e7","signature":"153ede504ace3d9f61afdf3a90588533b6765ff1d9b67d5c0b2e8e6bab218ab6"},"7e771891adaa85b690266bc37bd6eb43bc57eecc4b54693ead36467e7369952a","a69c09dbea52352f479d3e7ac949fde3d17b195abe90b045d619f747b38d6d1a",{"version":"ca72190df0eb9b09d4b600821c8c7b6c9747b75a1c700c4d57dc0bb72abc074c","affectsGlobalScope":true},"21a167fec8f933752fb8157f06d28fab6817af3ad9b0bdb1908a10762391eab9",{"version":"bb65c6267c5d6676be61acbf6604cf0a4555ac4b505df58ac15c831fcbff4e3e","affectsGlobalScope":true},"374ca798f244e464346f14301dc2a8b4b111af1a83b49fffef5906c338a1f922","5a94487653355b56018122d92392beb2e5f4a6c63ba5cef83bbe1c99775ef713",{"version":"d5135ad93b33adcce80b18f8065087934cdc1730d63db58562edcf017e1aad9b","affectsGlobalScope":true},"82408ed3e959ddc60d3e9904481b5a8dc16469928257af22a3f7d1a3bc7fd8c4","dab86d9604fe40854ef3c0a6f9e8948873dc3509213418e5e457f410fd11200f","bb9c4ffa5e6290c6980b63c815cdd1625876dadb2efaf77edbe82984be93e55e","489532ff54b714f0e0939947a1c560e516d3ae93d51d639ab02e907a0e950114","f30bb836526d930a74593f7b0f5c1c46d10856415a8f69e5e2fc3db80371e362","14b5aa23c5d0ae1907bc696ac7b6915d88f7d85799cc0dc2dcf98fbce2c5a67c","5c439dafdc09abe4d6c260a96b822fa0ba5be7203c71a63ab1f1423cd9e838ea",{"version":"6b526a5ec4a401ca7c26cfe6a48e641d8f30af76673bad3b06a1b4504594a960","affectsGlobalScope":true},{"version":"816ad2e607a96de5bcac7d437f843f5afd8957f1fa5eefa6bba8e4ed7ca8fd84","affectsGlobalScope":true},"cec36af22f514322f870e81d30675c78df82ae8bf4863f5fd4e4424c040c678d","d903fafe96674bc0b2ac38a5be4a8fc07b14c2548d1cdb165a80ea24c44c0c54","5eec82ac21f84d83586c59a16b9b8502d34505d1393393556682fe7e7fde9ef2","04eb6578a588d6a46f50299b55f30e3a04ef27d0c5a46c57d8fcc211cd530faa","8d3c583a07e0c37e876908c2d5da575019f689df8d9fa4c081d99119d53dba22","2c828a5405191d006115ab34e191b8474bc6c86ffdc401d1a9864b1b6e088a58",{"version":"e8b18c6385ff784228a6f369694fcf1a6b475355ba89090a88de13587a9391d5","affectsGlobalScope":true},"d076fede3cb042e7b13fc29442aaa03a57806bc51e2b26a67a01fbc66a7c0c12","7c013aa892414a7fdcfd861ae524a668eaa3ede8c7c0acafaf611948122c8d93","b0973c3cbcdc59b37bf477731d468696ecaf442593ec51bab497a613a580fe30",{"version":"4989e92ba5b69b182d2caaea6295af52b7dc73a4f7a2e336a676722884e7139d","affectsGlobalScope":true},{"version":"b3624aed92dab6da8484280d3cb3e2f4130ec3f4ef3f8201c95144ae9e898bb6","affectsGlobalScope":true},"5153a2fd150e46ce57bb3f8db1318d33f6ad3261ed70ceeff92281c0608c74a3","210d54cd652ec0fec8c8916e4af59bb341065576ecda039842f9ffb2e908507c","36b03690b628eab08703d63f04eaa89c5df202e5f1edf3989f13ad389cd2c091","0effadd232a20498b11308058e334d3339cc5bf8c4c858393e38d9d4c0013dcf","25846d43937c672bab7e8195f3d881f93495df712ee901860effc109918938cc","fd93cee2621ff42dabe57b7be402783fd1aa69ece755bcba1e0290547ae60513","1b952304137851e45bc009785de89ada562d9376177c97e37702e39e60c2f1ff","69ee23dd0d215b09907ad30d23f88b7790c93329d1faf31d7835552a10cf7cbf","44b8b584a338b190a59f4f6929d072431950c7bd92ec2694821c11bce180c8a5","23b89798789dffbd437c0c423f5d02d11f9736aea73d6abf16db4f812ff36eda","223c37f62ce09a3d99e77498acdee7b2705a4ae14552fbdb4093600cd9164f3f",{"version":"970a90f76d4d219ad60819d61f5994514087ba94c985647a3474a5a3d12714ed","affectsGlobalScope":true},"e10177274a35a9d07c825615340b2fcde2f610f53f3fb40269fd196b4288dda6","4c8525f256873c7ba3135338c647eaf0ca7115a1a2805ae2d0056629461186ce","3c13ef48634e7b5012fcf7e8fce7496352c2d779a7201389ca96a2a81ee4314d","5d0a25ec910fa36595f85a67ac992d7a53dd4064a1ba6aea1c9f14ab73a023f2",{"version":"f0900cd5d00fe1263ff41201fb8073dbeb984397e4af3b8002a5c207a30bdc33","affectsGlobalScope":true},{"version":"4c50342e1b65d3bee2ed4ab18f84842d5724ad11083bd666d8705dc7a6079d80","affectsGlobalScope":true},"06d7c42d256f0ce6afe1b2b6cfbc97ab391f29dadb00dd0ae8e8f23f5bc916c3","ec4bd1b200670fb567920db572d6701ed42a9641d09c4ff6869768c8f81b404c","e59a892d87e72733e2a9ca21611b9beb52977be2696c7ba4b216cbbb9a48f5aa",{"version":"da26af7362f53d122283bc69fed862b9a9fe27e01bc6a69d1d682e0e5a4df3e6","affectsGlobalScope":true},"8a300fa9b698845a1f9c41ecbe2c5966634582a8e2020d51abcace9b55aa959e",{"version":"ab9b9a36e5284fd8d3bf2f7d5fcbc60052f25f27e4d20954782099282c60d23e","affectsGlobalScope":true},"8dbe725f8d237e70310977afcfa011629804d101ebaa0266cafda6b61ad72236",{"version":"5f186a758a616c107c70e8918db4630d063bd782f22e6e0b17573b125765b40b","affectsGlobalScope":true}],"options":{"allowSyntheticDefaultImports":true,"declaration":true,"esModuleInterop":true,"experimentalDecorators":true,"importHelpers":true,"inlineSources":true,"module":99,"noEmitOnError":true,"outDir":"./","rootDir":"..","sourceMap":true,"strict":true,"target":5,"useDefineForClassFields":false},"fileIdsList":[[117],[46,117],[54,117],[46,54,117],[46,54,62,117],[44,45,117],[53,117],[71,117],[74,117],[75,80,108,117],[76,87,88,95,105,116,117],[76,77,87,95,117],[78,117],[79,80,88,96,117],[80,105,113,117],[81,83,87,95,117],[82,117],[83,84,117],[87,117],[85,87,117],[87,88,89,105,116,117],[87,88,89,102,105,108,117],[117,121],[83,90,95,105,116,117],[87,88,90,91,95,105,113,116,117],[90,92,105,113,116,117],[71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123],[87,93,117],[94,116,117],[83,87,95,105,117],[96,117],[97,117],[74,98,117],[99,115,117,121],[100,117],[101,117],[87,102,103,117],[102,104,117,119],[75,87,105,106,107,108,117],[75,105,107,117],[105,106,117],[108,117],[109,117],[87,111,112,117],[111,112,117],[80,95,105,113,117],[114,117],[95,115,117],[75,90,101,116,117],[80,117],[105,117,118],[117,119],[117,120],[75,80,87,89,98,105,116,117,119,121],[105,117,122],[47,117],[46,50,117],[50,117],[48,49,117],[55,56,57,58,59,60,61,62,63,117],[46,50,51,52,117],[43,65,66,117],[43,53,64,117],[43,53,66,68,117],[43,53,65,68,117],[65,66],[53],[53,66,68],[53,65,68]],"referencedMap":[[44,1],[54,2],[55,3],[58,4],[56,4],[60,4],[63,5],[62,1],[61,4],[59,4],[57,3],[45,1],[46,6],[68,7],[125,1],[71,8],[72,8],[74,9],[75,10],[76,11],[77,12],[78,13],[79,14],[80,15],[81,16],[82,17],[83,18],[84,18],[86,19],[85,20],[87,19],[88,21],[89,22],[73,23],[123,1],[90,24],[91,25],[92,26],[124,27],[93,28],[94,29],[95,30],[96,31],[97,32],[98,33],[99,34],[100,35],[101,36],[102,37],[103,37],[104,38],[105,39],[107,40],[106,41],[108,42],[109,43],[110,1],[111,44],[112,45],[113,46],[114,47],[115,48],[116,49],[117,50],[118,51],[119,52],[120,53],[121,54],[122,55],[48,56],[47,1],[51,57],[49,58],[52,1],[50,59],[64,60],[53,61],[43,1],[8,1],[10,1],[9,1],[2,1],[11,1],[12,1],[13,1],[14,1],[15,1],[16,1],[17,1],[18,1],[3,1],[4,1],[22,1],[19,1],[20,1],[21,1],[23,1],[24,1],[25,1],[5,1],[26,1],[27,1],[28,1],[29,1],[6,1],[33,1],[30,1],[31,1],[32,1],[34,1],[7,1],[35,1],[40,1],[41,1],[36,1],[37,1],[38,1],[39,1],[1,1],[42,1],[67,62],[66,63],[65,63],[69,64],[70,65]],"exportedModulesMap":[[44,1],[54,2],[55,3],[58,4],[56,4],[60,4],[63,5],[62,1],[61,4],[59,4],[57,3],[45,1],[46,6],[68,7],[125,1],[71,8],[72,8],[74,9],[75,10],[76,11],[77,12],[78,13],[79,14],[80,15],[81,16],[82,17],[83,18],[84,18],[86,19],[85,20],[87,19],[88,21],[89,22],[73,23],[123,1],[90,24],[91,25],[92,26],[124,27],[93,28],[94,29],[95,30],[96,31],[97,32],[98,33],[99,34],[100,35],[101,36],[102,37],[103,37],[104,38],[105,39],[107,40],[106,41],[108,42],[109,43],[110,1],[111,44],[112,45],[113,46],[114,47],[115,48],[116,49],[117,50],[118,51],[119,52],[120,53],[121,54],[122,55],[48,56],[47,1],[51,57],[49,58],[52,1],[50,59],[64,60],[53,61],[43,1],[8,1],[10,1],[9,1],[2,1],[11,1],[12,1],[13,1],[14,1],[15,1],[16,1],[17,1],[18,1],[3,1],[4,1],[22,1],[19,1],[20,1],[21,1],[23,1],[24,1],[25,1],[5,1],[26,1],[27,1],[28,1],[29,1],[6,1],[33,1],[30,1],[31,1],[32,1],[34,1],[7,1],[35,1],[40,1],[41,1],[36,1],[37,1],[38,1],[39,1],[1,1],[42,1],[67,66],[66,67],[65,67],[69,68],[70,69]],"semanticDiagnosticsPerFile":[44,54,55,58,56,60,63,62,61,59,57,45,46,68,125,71,72,74,75,76,77,78,79,80,81,82,83,84,86,85,87,88,89,73,123,90,91,92,124,93,94,95,96,97,98,99,100,101,102,103,104,105,107,106,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,48,47,51,49,52,50,64,53,43,8,10,9,2,11,12,13,14,15,16,17,18,3,4,22,19,20,21,23,24,25,5,26,27,28,29,6,33,30,31,32,34,7,35,40,41,36,37,38,39,1,42,67,66,65,69,70]},"version":"4.9.4"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@operato/data-tree",
3
- "version": "1.1.70",
3
+ "version": "1.1.75",
4
4
  "description": "User interface for tree structure data",
5
5
  "author": "heartyoh",
6
6
  "main": "dist/index.js",
@@ -77,5 +77,5 @@
77
77
  "prettier --write"
78
78
  ]
79
79
  },
80
- "gitHead": "5ec87f1a8a3b4953828b2bae49ad52a6ffe61684"
80
+ "gitHead": "196173a95f2a36cfbf659e6f99a2ffe4f269ac91"
81
81
  }
package/src/ox-tree-vertical.ts CHANGED
@@ -1,12 +1,11 @@
1
1
  /* Inspired by https://www.cssscript.com/clean-tree-diagram/ */
2
2
 
3
3
  import { PropertyValues, html, css, LitElement, TemplateResult } from 'lit'
4
- import { customElement, property } from 'lit/decorators.js'
4
+ import { customElement, property, state } from 'lit/decorators.js'
5
5
 
6
6
  type TreeItem = {
7
- label: string
8
- children?: TreeItem[]
9
- status?: { [state: string]: boolean | string }
7
+ [key: string]: any
8
+ __status__?: { [state: string]: boolean | string }
10
9
  }
11
10
 
12
11
  @customElement('ox-tree-vertical')
@@ -62,6 +61,9 @@ export class TreeViewPage extends LitElement {
62
61
  padding: 0.2em 0.5em;
63
62
  position: relative;
64
63
  }
64
+ span[selected] {
65
+ background-color: red;
66
+ }
65
67
  ul:before,
66
68
  code:before,
67
69
  span:before {
@@ -92,6 +94,10 @@ export class TreeViewPage extends LitElement {
92
94
  ]
93
95
 
94
96
  @property({ type: Object }) data?: TreeItem
97
+ @property({ type: Object }) selected?: TreeItem
98
+ @property({ type: String, attribute: 'id-property' }) idProperty: string = 'id'
99
+ @property({ type: String, attribute: 'label-property' }) labelProperty: string = 'label'
100
+ @property({ type: String, attribute: 'children-property' }) childrenProperty: string = 'children'
95
101
 
96
102
  render() {
97
103
  return this.data
@@ -104,12 +110,16 @@ export class TreeViewPage extends LitElement {
104
110
  }
105
111
 
106
112
  renderItem(item: TreeItem): TemplateResult {
107
- const { label, children } = item
113
+ const id = item[this.idProperty]
114
+ const label = item[this.labelProperty]
115
+ const children = item[this.childrenProperty] as TreeItem[]
116
+
108
117
  const expandable = children && children.length > 0
118
+ const selected = id === this.selected?.[this.idProperty]
109
119
 
110
120
  return html`
111
- <li .item=${item}>
112
- <span checkbox>${label}</span>
121
+ <li .item=${item} @click=${this.onClickSelect.bind(this)}>
122
+ <span ?selected=${selected}>${label}</span>
113
123
 
114
124
  ${expandable
115
125
  ? html`
@@ -121,4 +131,17 @@ export class TreeViewPage extends LitElement {
121
131
  </li>
122
132
  `
123
133
  }
134
+
135
+ onClickSelect(e: MouseEvent) {
136
+ e.stopPropagation()
137
+
138
+ const target = e.target as HTMLElement
139
+ this.selected = (target.closest('li') as any)?.item
140
+
141
+ this.dispatchEvent(
142
+ new CustomEvent('select', {
143
+ detail: this.selected
144
+ })
145
+ )
146
+ }
124
147
  }
package/src/ox-tree.ts CHANGED
@@ -2,9 +2,8 @@ import { LitElement, css, html, TemplateResult } from 'lit'
2
2
  import { customElement, property, state } from 'lit/decorators.js'
3
3
 
4
4
  type TreeItem = {
5
- label: string
6
- children?: TreeItem[]
7
- status?: { [state: string]: boolean | string }
5
+ [key: string]: any
6
+ __status__?: { [state: string]: boolean | string }
8
7
  }
9
8
 
10
9
  @customElement('ox-tree')
@@ -71,6 +70,10 @@ export class OxTree extends LitElement {
71
70
  border-radius: 2px;
72
71
  }
73
72
 
73
+ span[label][selected] {
74
+ background-color: red;
75
+ }
76
+
74
77
  li[checked='checked'] > span[checkbox]::before {
75
78
  background-color: #1890ff;
76
79
  border-color: #1890ff;
@@ -111,6 +114,10 @@ export class OxTree extends LitElement {
111
114
  ]
112
115
 
113
116
  @property({ type: Object }) data?: TreeItem
117
+ @property({ type: Object }) selected?: TreeItem
118
+ @property({ type: String, attribute: 'id-property' }) idProperty: string = 'id'
119
+ @property({ type: String, attribute: 'label-property' }) labelProperty: string = 'label'
120
+ @property({ type: String, attribute: 'children-property' }) childrenProperty: string = 'children'
114
121
 
115
122
  render() {
116
123
  return this.data
@@ -123,15 +130,27 @@ export class OxTree extends LitElement {
123
130
  }
124
131
 
125
132
  renderItem(item: TreeItem): TemplateResult {
126
- const { label, children, status = {} } = item
133
+ const { __status__ = {} } = item
134
+ const id = item[this.idProperty]
135
+ const label = item[this.labelProperty]
136
+ const children = item[this.childrenProperty] as TreeItem[]
137
+
127
138
  const expandable = children && children.length > 0
128
- const { collapsed, checked } = status
139
+ const { collapsed, checked } = __status__
140
+
141
+ const selected = id === this.selected?.[this.idProperty]
129
142
 
130
143
  return html`
131
- <li checked=${checked} ?collapsed=${collapsed} ?leaf=${!expandable} .item=${item}>
144
+ <li
145
+ checked=${checked}
146
+ ?collapsed=${collapsed}
147
+ ?leaf=${!expandable}
148
+ .item=${item}
149
+ @click=${this.onClickSelect.bind(this)}
150
+ >
132
151
  ${expandable ? html` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html``}
133
152
  <span checkbox></span>
134
- ${label}
153
+ <span label ?selected=${selected}>${label}</span>
135
154
  ${expandable && !collapsed
136
155
  ? html`
137
156
  <ul>
@@ -143,6 +162,19 @@ export class OxTree extends LitElement {
143
162
  `
144
163
  }
145
164
 
165
+ onClickSelect(e: MouseEvent) {
166
+ e.stopPropagation()
167
+
168
+ const target = e.target as HTMLElement
169
+ this.selected = (target.closest('li') as any)?.item
170
+
171
+ this.dispatchEvent(
172
+ new CustomEvent('select', {
173
+ detail: this.selected
174
+ })
175
+ )
176
+ }
177
+
146
178
  onClickExpander(e: MouseEvent) {
147
179
  e.stopPropagation()
148
180
 
@@ -150,8 +182,8 @@ export class OxTree extends LitElement {
150
182
  const itemElement = target!.closest('li') as HTMLLIElement
151
183
 
152
184
  var item = (itemElement as any).item
153
- item.status = {
154
- ...item.status,
185
+ item.__status__ = {
186
+ ...item.__status__,
155
187
  collapsed: !itemElement.hasAttribute('collapsed')
156
188
  }
157
189
 
@@ -174,16 +206,20 @@ export class OxTree extends LitElement {
174
206
  }
175
207
 
176
208
  walkTreeCheckedUpdate(item: TreeItem, checked: string = '') {
177
- const { children, status } = item
209
+ const { __status__ } = item
210
+ const children = item[this.childrenProperty] as TreeItem[]
211
+
178
212
  children?.forEach(child => this.walkTreeCheckedUpdate(child, checked))
179
- item.status = {
180
- ...status,
213
+ item.__status__ = {
214
+ ...__status__,
181
215
  checked
182
216
  }
183
217
  }
184
218
 
185
219
  updateCheckedAll(item: TreeItem) {
186
- const { children, status } = item
220
+ const { __status__ } = item
221
+ const children = item[this.childrenProperty] as TreeItem[]
222
+
187
223
  if (!children || children.length == 0) {
188
224
  return
189
225
  }
@@ -193,19 +229,19 @@ export class OxTree extends LitElement {
193
229
  var checked: string = ''
194
230
 
195
231
  children.forEach(child => {
196
- const { status = {} } = child
232
+ const { __status__ = {} } = child
197
233
 
198
- if (status.checked == 'half-checked') {
234
+ if (__status__.checked == 'half-checked') {
199
235
  checked = 'half-checked'
200
- } else if (status.checked == 'checked') {
236
+ } else if (__status__.checked == 'checked') {
201
237
  checked = checked == 'checked' || checked == '' ? 'checked' : 'half-checked'
202
238
  } else {
203
239
  checked = checked == 'unchecked' || checked == '' ? 'unchecked' : 'half-checked'
204
240
  }
205
241
  })
206
242
 
207
- item.status = {
208
- ...status,
243
+ item.__status__ = {
244
+ ...__status__,
209
245
  checked
210
246
  }
211
247
  }