@3t-transform/threeteeui 0.2.87 → 0.2.88

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 (14) hide show
  1. package/dist/cjs/tttx-tree-view.cjs.entry.js +4 -8
  2. package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.css +1 -5
  3. package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.js +22 -7
  4. package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.stories.js +17 -252
  5. package/dist/components/tttx-tree-view.js +4 -8
  6. package/dist/esm/tttx-tree-view.entry.js +4 -8
  7. package/dist/tttx/p-fe46ecd4.entry.js +1 -0
  8. package/dist/tttx/tttx.esm.js +1 -1
  9. package/dist/types/components/molecules/tttx-tree-view/helper/helper.d.ts +5 -2
  10. package/dist/types/components/molecules/tttx-tree-view/tttx-tree-view.d.ts +4 -3
  11. package/dist/types/components/molecules/tttx-tree-view/tttx-tree-view.stories.d.ts +1 -4
  12. package/dist/types/components.d.ts +2 -1
  13. package/package.json +1 -1
  14. package/dist/tttx/p-b7a2de3b.entry.js +0 -1
package/dist/cjs/tttx-tree-view.cjs.entry.js CHANGED
@@ -6,12 +6,13 @@ const index = require('./index-44c9fa62.js');
6
6
  const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
7
7
  require('./_commonjsHelpers-537d719a.js');
8
8
 
9
- const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;right:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}";
9
+ const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;right:0;z-index:-1}}";
10
10
 
11
11
  const TttxTreeView = class {
12
12
  constructor(hostRef) {
13
13
  index.registerInstance(this, hostRef);
14
14
  this.clickEvent = index.createEvent(this, "clickEvent", 7);
15
+ this.expandNode = index.createEvent(this, "expandNode", 7);
15
16
  this.data = undefined;
16
17
  this.treeData = undefined;
17
18
  this.selectedId = undefined;
@@ -37,6 +38,7 @@ const TttxTreeView = class {
37
38
  event.stopPropagation();
38
39
  node.isOpen = !node.isOpen;
39
40
  this.treeData = [...this.treeData];
41
+ this.expandNode.emit({ node: node, treeViewData: this.treeData });
40
42
  }
41
43
  handleCheckboxChange(node, event) {
42
44
  event.stopPropagation();
@@ -98,13 +100,7 @@ const TttxTreeView = class {
98
100
  }
99
101
  }
100
102
  htmlcode(type, node, check_box, check_boxColor) {
101
- const htmlcode = (index.h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (index.h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && index.h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && index.h("div", { class: type }, node.title), node.html && index.h("div", { class: type, innerHTML: domsanitiser_options.purify.sanitize(node.html, domsanitiser_options.domSanitiserOptions) }), (node.menuActive || node.chevronActive) && (index.h("div", { class: "right-buttons-container" }, node.menuActive && (index.h("tttx-button", { design: "borderless-circle", notext: true, icon: "more_vert", color: "black", class: "padding-icon menu-button", onClick: (event) => {
102
- event.stopPropagation();
103
- this.onClickHandler('menu', event, node);
104
- } })), node.chevronActive && (index.h("tttx-icon", { icon: "chevron_right", color: "black", class: "padding-icon chevron-button", onClick: (event) => {
105
- event.stopPropagation();
106
- this.onClickHandler('chevron', event, node);
107
- } }))))));
103
+ const htmlcode = (index.h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (index.h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && index.h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && index.h("div", { class: type }, node.title), node.html && index.h("div", { class: type, innerHTML: domsanitiser_options.purify.sanitize(node.html, domsanitiser_options.domSanitiserOptions) })));
108
104
  return htmlcode;
109
105
  }
110
106
  render() {
package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.css CHANGED
@@ -31,7 +31,6 @@
31
31
  content: "";
32
32
  position: absolute;
33
33
  left: -50%;
34
- right: -50%;
35
34
  bottom: 0;
36
35
  right: 0;
37
36
  border-bottom: 1px solid #d5d5d5;
@@ -41,12 +40,10 @@
41
40
  content: "";
42
41
  position: absolute;
43
42
  left: -50%;
44
- right: -50%;
45
43
  top: 0;
46
44
  bottom: 0;
47
45
  right: 0;
48
46
  background-color: rgba(17, 17, 17, 0.1);
49
- z-index: -1;
50
47
  }
51
48
 
52
49
  li {
@@ -92,12 +89,11 @@ li {
92
89
  content: "";
93
90
  position: absolute;
94
91
  left: -50%;
95
- right: -50%;
96
92
  top: 0;
97
93
  bottom: 0;
98
94
  background-color: rgba(17, 17, 17, 0.05);
99
95
  opacity: 0.5;
100
- z-index: -1;
101
96
  right: 0;
97
+ z-index: -1;
102
98
  }
103
99
  }
package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.js CHANGED
@@ -29,6 +29,7 @@ export class TttxTreeView {
29
29
  event.stopPropagation();
30
30
  node.isOpen = !node.isOpen;
31
31
  this.treeData = [...this.treeData];
32
+ this.expandNode.emit({ node: node, treeViewData: this.treeData });
32
33
  }
33
34
  handleCheckboxChange(node, event) {
34
35
  event.stopPropagation();
@@ -90,13 +91,7 @@ export class TttxTreeView {
90
91
  }
91
92
  }
92
93
  htmlcode(type, node, check_box, check_boxColor) {
93
- const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) }), (node.menuActive || node.chevronActive) && (h("div", { class: "right-buttons-container" }, node.menuActive && (h("tttx-button", { design: "borderless-circle", notext: true, icon: "more_vert", color: "black", class: "padding-icon menu-button", onClick: (event) => {
94
- event.stopPropagation();
95
- this.onClickHandler('menu', event, node);
96
- } })), node.chevronActive && (h("tttx-icon", { icon: "chevron_right", color: "black", class: "padding-icon chevron-button", onClick: (event) => {
97
- event.stopPropagation();
98
- this.onClickHandler('chevron', event, node);
99
- } }))))));
94
+ const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) })));
100
95
  return htmlcode;
101
96
  }
102
97
  render() {
@@ -163,6 +158,26 @@ export class TttxTreeView {
163
158
  "resolved": "any",
164
159
  "references": {}
165
160
  }
161
+ }, {
162
+ "method": "expandNode",
163
+ "name": "expandNode",
164
+ "bubbles": true,
165
+ "cancelable": true,
166
+ "composed": true,
167
+ "docs": {
168
+ "tags": [],
169
+ "text": ""
170
+ },
171
+ "complexType": {
172
+ "original": "ExpandNodeEvent",
173
+ "resolved": "ExpandNodeEvent",
174
+ "references": {
175
+ "ExpandNodeEvent": {
176
+ "location": "import",
177
+ "path": "./helper/helper"
178
+ }
179
+ }
180
+ }
166
181
  }];
167
182
  }
168
183
  }
package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.stories.js CHANGED
@@ -24,7 +24,7 @@ export const Default = TttxTreeViewStory.bind({});
24
24
  Default.args = {
25
25
  data: [
26
26
  {
27
- id: 1,
27
+ id: 'First',
28
28
  title: 'Role Specific Vocational Qualification',
29
29
  isOpen: false,
30
30
  openOrClosed: 'arrow_right',
@@ -34,16 +34,15 @@ Default.args = {
34
34
  iconColor: 'green',
35
35
  child: [
36
36
  {
37
- id: 2,
37
+ id: 'second',
38
38
  title: 'Boop',
39
39
  isOpen: false,
40
40
  openOrClosed: 'arrow_right',
41
41
  icon: 'check_circle',
42
42
  iconColor: 'green',
43
- menuActive: true,
44
43
  child: [
45
44
  {
46
- id: 2,
45
+ id: 'third',
47
46
  hasIcon: true,
48
47
  icon: 'help',
49
48
  iconColor: 'gray',
@@ -69,7 +68,6 @@ Default.args = {
69
68
  openOrClosed: 'arrow_right',
70
69
  icon: 'help',
71
70
  iconColor: 'gray',
72
- chevronActive: true,
73
71
  child: [
74
72
  {
75
73
  id: 4,
@@ -86,8 +84,6 @@ Default.args = {
86
84
  icon: 'help',
87
85
  iconColor: 'gray',
88
86
  title: 'sjdnfkn 2077',
89
- chevronActive: true,
90
- menuActive: true,
91
87
  },
92
88
  ],
93
89
  },
@@ -106,171 +102,23 @@ export const Simple = TttxTreeViewSimple.bind({});
106
102
  Simple.args = {
107
103
  data: [
108
104
  {
109
- id: 1,
110
- title: 'Role Specific Vocational Qualification',
111
- isOpen: false,
112
- openOrClosed: 'arrow_right',
113
- hasCheckbox: false,
114
- hasIcon: false,
115
- child: [
116
- {
117
- id: 2,
118
- title: 'Boop',
119
- isOpen: false,
120
- openOrClosed: 'arrow_right',
121
- child: [
122
- {
123
- id: 2,
124
- hasIcon: false,
125
- title: 'this is a test',
126
- },
127
- ],
128
- },
129
- {
130
- id: 3,
131
- title: 'Boop',
132
- isOpen: false,
133
- openOrClosed: 'arrow_right',
134
- hasIcon: false,
135
- },
136
- ],
137
- },
138
- {
139
- id: 3,
140
- title: 'second route',
141
- isOpen: false,
142
- openOrClosed: 'arrow_right',
143
- hasIcon: false,
144
- hasCheckbox: false,
145
- child: [
146
- {
147
- id: 4,
148
- title: 'Boop 2077',
149
- },
150
- {
151
- id: 4,
152
- title: 'sjdnfkn 2077',
153
- },
154
- ],
155
- },
156
- ],
157
- };
158
- const TttxTreeViewRightButtons = ({ data }) => `
159
- <tttx-tree-view id="treeViewRightButtons"></tttx-tree-view>
160
- <script>
161
- if(!treeViewRightButtons) {
162
- const treeViewRightButtons = document.getElementById('treeViewRightButtons');
163
- }
164
- treeViewRightButtons.data = ${JSON.stringify(data)};
165
- </script>
166
-
167
- `;
168
- export const RightButtons = TttxTreeViewRightButtons.bind({});
169
- RightButtons.args = {
170
- data: [
171
- {
172
- id: 1,
173
- title: 'Role Specific Vocational Qualification',
174
- isOpen: false,
175
- openOrClosed: 'arrow_right',
176
- hasCheckbox: false,
177
- hasIcon: false,
178
- menuActive: true,
179
- chevronActive: true,
180
- child: [
181
- {
182
- id: 2,
183
- title: 'Boop',
184
- isOpen: false,
185
- openOrClosed: 'arrow_right',
186
- hasIcon: false,
187
- menuActive: true,
188
- chevronActive: true,
189
- child: [
190
- {
191
- id: 2,
192
- hasIcon: false,
193
- title: 'this is a test',
194
- menuActive: true,
195
- chevronActive: true,
196
- },
197
- ],
198
- },
199
- {
200
- id: 3,
201
- title: 'Boop',
202
- isOpen: false,
203
- openOrClosed: 'arrow_right',
204
- hasIcon: false,
205
- menuActive: true,
206
- chevronActive: true,
207
- },
208
- ],
209
- },
210
- {
211
- id: 3,
212
- title: 'second route',
213
- isOpen: false,
214
- openOrClosed: 'arrow_right',
215
- hasIcon: false,
216
- menuActive: true,
217
- chevronActive: true,
218
- child: [
219
- {
220
- id: 4,
221
- hasCheckbox: false,
222
- hasIcon: false,
223
- title: 'Boop 2077',
224
- menuActive: true,
225
- chevronActive: true,
226
- },
227
- {
228
- id: 4,
229
- hasCheckbox: false,
230
- hasIcon: false,
231
- title: 'sjdnfkn 2077',
232
- chevronActive: true,
233
- menuActive: true,
234
- },
235
- ],
236
- },
237
- ],
238
- };
239
- const TttxTreeViewMenuButton = ({ data }) => `
240
- <tttx-tree-view id="treeViewMenuButton"></tttx-tree-view>
241
- <script>
242
- if(!treeViewMenuButton) {
243
- const treeViewMenuButton = document.getElementById('treeViewMenuButton');
244
- }
245
- treeViewMenuButton.data = ${JSON.stringify(data)};
246
- </script>
247
-
248
- `;
249
- export const MenuButton = TttxTreeViewMenuButton.bind({});
250
- MenuButton.args = {
251
- data: [
252
- {
253
- id: 1,
105
+ id: 'First',
254
106
  title: 'Role Specific Vocational Qualification',
255
107
  isOpen: false,
256
108
  openOrClosed: 'arrow_right',
257
109
  hasCheckbox: false,
258
110
  hasIcon: false,
259
- menuActive: true,
260
111
  child: [
261
112
  {
262
- id: 2,
113
+ id: 'second',
263
114
  title: 'Boop',
264
115
  isOpen: false,
265
116
  openOrClosed: 'arrow_right',
266
- hasIcon: false,
267
- menuActive: true,
268
117
  child: [
269
118
  {
270
- id: 2,
119
+ id: 'third',
271
120
  hasIcon: false,
272
121
  title: 'this is a test',
273
- menuActive: true,
274
122
  },
275
123
  ],
276
124
  },
@@ -280,7 +128,6 @@ MenuButton.args = {
280
128
  isOpen: false,
281
129
  openOrClosed: 'arrow_right',
282
130
  hasIcon: false,
283
- menuActive: true,
284
131
  },
285
132
  ],
286
133
  },
@@ -290,95 +137,15 @@ MenuButton.args = {
290
137
  isOpen: false,
291
138
  openOrClosed: 'arrow_right',
292
139
  hasIcon: false,
293
- menuActive: true,
294
- child: [
295
- {
296
- id: 4,
297
- hasCheckbox: false,
298
- hasIcon: false,
299
- title: 'Boop 2077',
300
- menuActive: true,
301
- },
302
- {
303
- id: 4,
304
- hasCheckbox: false,
305
- hasIcon: false,
306
- title: 'sjdnfkn 2077',
307
- menuActive: true,
308
- },
309
- ],
310
- },
311
- ],
312
- };
313
- const TttxTreeViewChevron = ({ data }) => `
314
- <tttx-tree-view id="treeViewChevron"></tttx-tree-view>
315
- <script>
316
- if(!treeViewChevron) {
317
- const treeViewChevron = document.getElementById('treeViewChevron');
318
- }
319
- treeViewChevron.data = ${JSON.stringify(data)};
320
- </script>
321
-
322
- `;
323
- export const Chevron = TttxTreeViewChevron.bind({});
324
- Chevron.args = {
325
- data: [
326
- {
327
- id: 1,
328
- title: 'Role Specific Vocational Qualification',
329
- isOpen: false,
330
- openOrClosed: 'arrow_right',
331
140
  hasCheckbox: false,
332
- hasIcon: false,
333
- chevronActive: true,
334
- child: [
335
- {
336
- id: 2,
337
- title: 'Boop',
338
- isOpen: false,
339
- openOrClosed: 'arrow_right',
340
- hasIcon: false,
341
- chevronActive: true,
342
- child: [
343
- {
344
- id: 2,
345
- hasIcon: false,
346
- title: 'this is a test',
347
- chevronActive: true,
348
- },
349
- ],
350
- },
351
- {
352
- id: 3,
353
- title: 'Boop',
354
- isOpen: false,
355
- openOrClosed: 'arrow_right',
356
- hasIcon: false,
357
- chevronActive: true,
358
- },
359
- ],
360
- },
361
- {
362
- id: 3,
363
- title: 'second route',
364
- isOpen: false,
365
- openOrClosed: 'arrow_right',
366
- hasIcon: false,
367
- chevronActive: true,
368
141
  child: [
369
142
  {
370
143
  id: 4,
371
- hasCheckbox: false,
372
- hasIcon: false,
373
144
  title: 'Boop 2077',
374
- chevronActive: true,
375
145
  },
376
146
  {
377
147
  id: 4,
378
- hasCheckbox: false,
379
- hasIcon: false,
380
148
  title: 'sjdnfkn 2077',
381
- chevronActive: true,
382
149
  },
383
150
  ],
384
151
  },
@@ -397,7 +164,7 @@ export const HTML = TttxTreeViewHTML.bind({});
397
164
  HTML.args = {
398
165
  data: [
399
166
  {
400
- id: 1,
167
+ id: 'First',
401
168
  title: 'Role Specific Vocational Qualification',
402
169
  isOpen: false,
403
170
  html: '<div>This is html </div>',
@@ -466,7 +233,7 @@ export const Checkbox = TttxTreeViewCheckbox.bind({});
466
233
  Checkbox.args = {
467
234
  data: [
468
235
  {
469
- id: 1,
236
+ id: 'First',
470
237
  title: 'Role Specific Vocational Qualification',
471
238
  isOpen: false,
472
239
  openOrClosed: 'arrow_right',
@@ -540,7 +307,7 @@ export const Icons = TttxTreeViewIcons.bind({});
540
307
  Icons.args = {
541
308
  data: [
542
309
  {
543
- id: 1,
310
+ id: 'First',
544
311
  title: 'Role Specific Vocational Qualification',
545
312
  isOpen: false,
546
313
  openOrClosed: 'arrow_right',
@@ -619,7 +386,7 @@ export const CheckBoxAndIcons = TttxTreeViewCheckBoxAndIcons.bind({});
619
386
  CheckBoxAndIcons.args = {
620
387
  data: [
621
388
  {
622
- id: 1,
389
+ id: 'First',
623
390
  title: 'Role Specific Vocational Qualification',
624
391
  isOpen: false,
625
392
  openOrClosed: 'arrow_right',
@@ -753,7 +520,7 @@ export const EmptyGroup = TttxTreeViewEmptyGroup.bind({});
753
520
  EmptyGroup.args = {
754
521
  data: [
755
522
  {
756
- id: 1,
523
+ id: 'First',
757
524
  title: 'Role Specific Vocational Qualification',
758
525
  isOpen: false,
759
526
  openOrClosed: 'arrow_right',
@@ -775,11 +542,11 @@ const TttxTreeViewselectable = ({ data }) => `
775
542
  treeViewselectable.data = ${JSON.stringify(data)};
776
543
  </script>
777
544
  `;
778
- export const selectableAndHover = TttxTreeViewselectable.bind({});
779
- selectableAndHover.args = {
545
+ export const SelectableAndHover = TttxTreeViewselectable.bind({});
546
+ SelectableAndHover.args = {
780
547
  data: [
781
548
  {
782
- id: 1,
549
+ id: 'First',
783
550
  title: 'Role Specific Vocational Qualification',
784
551
  isOpen: false,
785
552
  openOrClosed: 'arrow_right',
@@ -788,10 +555,9 @@ selectableAndHover.args = {
788
555
  hasHover: true,
789
556
  selectable: true,
790
557
  selected: false,
791
- chevronActive: true,
792
558
  child: [
793
559
  {
794
- id: 2,
560
+ id: 'second',
795
561
  title: 'Boop',
796
562
  isOpen: false,
797
563
  hasCheckbox: false,
@@ -800,10 +566,9 @@ selectableAndHover.args = {
800
566
  hasHover: true,
801
567
  selectable: true,
802
568
  selected: false,
803
- chevronActive: true,
804
569
  child: [
805
570
  {
806
- id: 4,
571
+ id: 'third',
807
572
  hasCheckbox: false,
808
573
  hasIcon: false,
809
574
  title: 'this is a test',
@@ -814,7 +579,7 @@ selectableAndHover.args = {
814
579
  ],
815
580
  },
816
581
  {
817
- id: 3,
582
+ id: 'fouth',
818
583
  title: 'Boop',
819
584
  isOpen: false,
820
585
  openOrClosed: 'arrow_right',
package/dist/components/tttx-tree-view.js CHANGED
@@ -3,7 +3,7 @@ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js
3
3
  import { d as defineCustomElement$3 } from './tttx-button2.js';
4
4
  import { d as defineCustomElement$2 } from './tttx-icon2.js';
5
5
 
6
- const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;right:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}";
6
+ const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;right:0;z-index:-1}}";
7
7
 
8
8
  const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
9
9
  constructor() {
@@ -11,6 +11,7 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
11
11
  this.__registerHost();
12
12
  this.__attachShadow();
13
13
  this.clickEvent = createEvent(this, "clickEvent", 7);
14
+ this.expandNode = createEvent(this, "expandNode", 7);
14
15
  this.data = undefined;
15
16
  this.treeData = undefined;
16
17
  this.selectedId = undefined;
@@ -36,6 +37,7 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
36
37
  event.stopPropagation();
37
38
  node.isOpen = !node.isOpen;
38
39
  this.treeData = [...this.treeData];
40
+ this.expandNode.emit({ node: node, treeViewData: this.treeData });
39
41
  }
40
42
  handleCheckboxChange(node, event) {
41
43
  event.stopPropagation();
@@ -97,13 +99,7 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
97
99
  }
98
100
  }
99
101
  htmlcode(type, node, check_box, check_boxColor) {
100
- const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: purify.sanitize(node.html, domSanitiserOptions) }), (node.menuActive || node.chevronActive) && (h("div", { class: "right-buttons-container" }, node.menuActive && (h("tttx-button", { design: "borderless-circle", notext: true, icon: "more_vert", color: "black", class: "padding-icon menu-button", onClick: (event) => {
101
- event.stopPropagation();
102
- this.onClickHandler('menu', event, node);
103
- } })), node.chevronActive && (h("tttx-icon", { icon: "chevron_right", color: "black", class: "padding-icon chevron-button", onClick: (event) => {
104
- event.stopPropagation();
105
- this.onClickHandler('chevron', event, node);
106
- } }))))));
102
+ const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: purify.sanitize(node.html, domSanitiserOptions) })));
107
103
  return htmlcode;
108
104
  }
109
105
  render() {
package/dist/esm/tttx-tree-view.entry.js CHANGED
@@ -2,12 +2,13 @@ import { r as registerInstance, c as createEvent, h } from './index-65b1e0d1.js'
2
2
  import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-68752a19.js';
3
3
  import './_commonjsHelpers-9943807e.js';
4
4
 
5
- const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;right:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}";
5
+ const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;right:0;z-index:-1}}";
6
6
 
7
7
  const TttxTreeView = class {
8
8
  constructor(hostRef) {
9
9
  registerInstance(this, hostRef);
10
10
  this.clickEvent = createEvent(this, "clickEvent", 7);
11
+ this.expandNode = createEvent(this, "expandNode", 7);
11
12
  this.data = undefined;
12
13
  this.treeData = undefined;
13
14
  this.selectedId = undefined;
@@ -33,6 +34,7 @@ const TttxTreeView = class {
33
34
  event.stopPropagation();
34
35
  node.isOpen = !node.isOpen;
35
36
  this.treeData = [...this.treeData];
37
+ this.expandNode.emit({ node: node, treeViewData: this.treeData });
36
38
  }
37
39
  handleCheckboxChange(node, event) {
38
40
  event.stopPropagation();
@@ -94,13 +96,7 @@ const TttxTreeView = class {
94
96
  }
95
97
  }
96
98
  htmlcode(type, node, check_box, check_boxColor) {
97
- const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: purify.sanitize(node.html, domSanitiserOptions) }), (node.menuActive || node.chevronActive) && (h("div", { class: "right-buttons-container" }, node.menuActive && (h("tttx-button", { design: "borderless-circle", notext: true, icon: "more_vert", color: "black", class: "padding-icon menu-button", onClick: (event) => {
98
- event.stopPropagation();
99
- this.onClickHandler('menu', event, node);
100
- } })), node.chevronActive && (h("tttx-icon", { icon: "chevron_right", color: "black", class: "padding-icon chevron-button", onClick: (event) => {
101
- event.stopPropagation();
102
- this.onClickHandler('chevron', event, node);
103
- } }))))));
99
+ const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: purify.sanitize(node.html, domSanitiserOptions) })));
104
100
  return htmlcode;
105
101
  }
106
102
  render() {
package/dist/tttx/p-fe46ecd4.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as e,c as t,h as i}from"./p-99a41e8e.js";import{p as o,d as n}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){e(this,i),this.clickEvent=t(this,"clickEvent",7),this.expandNode=t(this,"expandNode",7),this.data=void 0,this.treeData=void 0,this.selectedId=void 0}onClickHandler(e,t,i){t.stopPropagation();const o=JSON.stringify(i);this.clickEvent.emit({eventName:e,returnJsonObject:o}),"row"===e&&this.selectedElement(t,i)}updateSelectedId(e){this.selectedId=e}selectedElement(e,t){e.stopPropagation(),this.selectedId=t.id,this.treeData=[...this.treeData]}toggleNode(e,t){t.stopPropagation(),e.isOpen=!e.isOpen,this.treeData=[...this.treeData],this.expandNode.emit({node:e,treeViewData:this.treeData})}handleCheckboxChange(e,t){t.stopPropagation(),e.checked=!e.checked,this.updateChildrenCheckStatus(e),this.treeData=[...this.treeData]}updateChildrenCheckStatus(e){e.child&&e.child.forEach((t=>{t.checked=e.checked,this.updateChildrenCheckStatus(t)}))}updateSelected(e){let t=!1;return e.id===this.selectedId&&(t=!0),t}treeConfigs(e){let t,i;return e.checked?(t="check_box",i="blue"):(t="check_box_outline_blank",i="grey"),{checkboxColor:i,checkboxIcon:t,rowHoverActive:e.hasHover?"rowHover":"",expanderIcon:e.isOpen?"arrow_drop_down":"arrow_right",selectedActive:e.selectable&&e.selected?"rowSelected":""}}renderNode(e){e.selectable&&(e.selected=this.updateSelected(e));const t=this.treeConfigs(e);return e.child?i("li",null,i("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},i("tttx-button",{class:"toggleNode",design:"borderless-circle",notext:!0,icon:t.expanderIcon,color:"black",onClick:t=>this.toggleNode(e,t)}),this.htmlcode("treeNode",e,t.checkboxIcon,t.checkboxColor)),e.isOpen?i("ul",null,i("div",{class:"child-node"},e.child.map((e=>this.renderNode(e))))):null):i("li",null,i("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},this.htmlcode("treeLeaf",e,t.checkboxIcon,t.checkboxColor)))}htmlcode(e,t,r,s){return i("div",{class:"inline-tree-item element"},t.hasCheckbox&&i("tttx-button",{design:"borderless-circle",notext:!0,icon:r,iconcolor:s,class:"padding-icon checkbox",onClick:e=>this.handleCheckboxChange(t,e)}),!t.html&&t.hasIcon&&i("tttx-icon",{icon:t.icon,color:t.iconColor,class:"padding-icon"}),!t.html&&i("div",{class:e},t.title),t.html&&i("div",{class:e,innerHTML:o.sanitize(t.html,n)}))}render(){if(this.data)return this.treeData="string"==typeof this.data?JSON.parse(this.data):this.data,i("div",{class:"tree-view-element"},i("ul",null,this.treeData.map((e=>this.renderNode(e)))))}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:"Roboto", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:"";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:"";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:"";position:absolute;left:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;right:0;z-index:-1}}';export{r as tttx_tree_view}
package/dist/tttx/tttx.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as e,b as t}from"./p-99a41e8e.js";export{s as setNonce}from"./p-99a41e8e.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-02515882",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-ebcf2c5f",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-46a6a5db",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-6bd70736",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-b7a2de3b",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-1190c6e5",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-aab2c93c",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-0b2026f7",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-15a42062",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-291d5ae0",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-f2d08143",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-8526fe6d",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-a2d59582",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-1c2f0e77",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-f12eb43b",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-14d89f70",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-003798cb",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{data:[1025],name:[1],_data:[32]}],[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-fa12ed9d",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
1
+ import{p as e,b as t}from"./p-99a41e8e.js";export{s as setNonce}from"./p-99a41e8e.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-02515882",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-ebcf2c5f",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-46a6a5db",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-6bd70736",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-fe46ecd4",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-1190c6e5",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-aab2c93c",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-0b2026f7",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-15a42062",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-291d5ae0",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-f2d08143",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-8526fe6d",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-a2d59582",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-1c2f0e77",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-f12eb43b",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-14d89f70",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-003798cb",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{data:[1025],name:[1],_data:[32]}],[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-fa12ed9d",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
package/dist/types/components/molecules/tttx-tree-view/helper/helper.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  export interface TreeViewItem {
2
- id: number;
2
+ id: string;
3
3
  title: string;
4
4
  hasIcon?: boolean;
5
5
  hasCheckbox?: boolean;
6
- menuActive?: boolean;
7
6
  chevronActive?: boolean;
8
7
  hasHover?: boolean;
9
8
  selectable?: boolean;
@@ -17,3 +16,7 @@ export interface TreeViewItem {
17
16
  data?: any;
18
17
  rowType?: string;
19
18
  }
19
+ export interface ExpandNodeEvent {
20
+ node: TreeViewItem;
21
+ treeViewData: TreeViewItem[];
22
+ }
package/dist/types/components/molecules/tttx-tree-view/tttx-tree-view.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import { EventEmitter } from '../../../stencil-public-runtime';
2
- import { TreeViewItem } from './helper/helper';
2
+ import { TreeViewItem, ExpandNodeEvent } from './helper/helper';
3
3
  export declare class TttxTreeView {
4
4
  data: TreeViewItem[];
5
5
  treeData: TreeViewItem[];
6
- selectedId: number;
6
+ selectedId: string;
7
7
  clickEvent: EventEmitter;
8
+ expandNode: EventEmitter<ExpandNodeEvent>;
8
9
  onClickHandler(clickName: string, event: MouseEvent, node: TreeViewItem): void;
9
- updateSelectedId(newId: number): void;
10
+ updateSelectedId(newId: string): void;
10
11
  selectedElement(event: MouseEvent, node: TreeViewItem): void;
11
12
  toggleNode(node: TreeViewItem, event: MouseEvent): void;
12
13
  handleCheckboxChange(node: TreeViewItem, event: MouseEvent): void;
package/dist/types/components/molecules/tttx-tree-view/tttx-tree-view.stories.d.ts CHANGED
@@ -11,9 +11,6 @@ declare const _default: {
11
11
  export default _default;
12
12
  export declare const Default: any;
13
13
  export declare const Simple: any;
14
- export declare const RightButtons: any;
15
- export declare const MenuButton: any;
16
- export declare const Chevron: any;
17
14
  export declare const HTML: any;
18
15
  export declare const Checkbox: any;
19
16
  export declare const Icons: any;
@@ -21,4 +18,4 @@ export declare const CheckBoxAndIcons: any;
21
18
  export declare const RequirementsList1: any;
22
19
  export declare const RequirementsList2: any;
23
20
  export declare const EmptyGroup: any;
24
- export declare const selectableAndHover: any;
21
+ export declare const SelectableAndHover: any;
package/dist/types/components.d.ts CHANGED
@@ -15,7 +15,7 @@ import { SelectItem as SelectItem1 } from "./components/molecules/tttx-select-bo
15
15
  import { SorterChangeEvent, SorterData } from "./components/molecules/tttx-sorter/interfaces";
16
16
  import { MinMaxDates } from "./components/molecules/tttx-standalone-input/tttx-standalone-input";
17
17
  import { Tab } from "./components/molecules/tttx-tabs/interfaces";
18
- import { TreeViewItem } from "./components/molecules/tttx-tree-view/helper/helper";
18
+ import { ExpandNodeEvent, TreeViewItem } from "./components/molecules/tttx-tree-view/helper/helper";
19
19
  export namespace Components {
20
20
  interface TttxButton {
21
21
  "design": string;
@@ -615,6 +615,7 @@ declare namespace LocalJSX {
615
615
  interface TttxTreeView {
616
616
  "data"?: TreeViewItem[];
617
617
  "onClickEvent"?: (event: TttxTreeViewCustomEvent<any>) => void;
618
+ "onExpandNode"?: (event: TttxTreeViewCustomEvent<ExpandNodeEvent>) => void;
618
619
  }
619
620
  interface IntrinsicElements {
620
621
  "tttx-button": TttxButton;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@3t-transform/threeteeui",
3
- "version": "0.2.87",
3
+ "version": "0.2.88",
4
4
  "description": "3t Design System",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/dist/tttx/p-b7a2de3b.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as e,c as t,h as o}from"./p-99a41e8e.js";import{p as i,d as n}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(o){e(this,o),this.clickEvent=t(this,"clickEvent",7),this.data=void 0,this.treeData=void 0,this.selectedId=void 0}onClickHandler(e,t,o){t.stopPropagation();const i=JSON.stringify(o);this.clickEvent.emit({eventName:e,returnJsonObject:i}),"row"===e&&this.selectedElement(t,o)}updateSelectedId(e){this.selectedId=e}selectedElement(e,t){e.stopPropagation(),this.selectedId=t.id,this.treeData=[...this.treeData]}toggleNode(e,t){t.stopPropagation(),e.isOpen=!e.isOpen,this.treeData=[...this.treeData]}handleCheckboxChange(e,t){t.stopPropagation(),e.checked=!e.checked,this.updateChildrenCheckStatus(e),this.treeData=[...this.treeData]}updateChildrenCheckStatus(e){e.child&&e.child.forEach((t=>{t.checked=e.checked,this.updateChildrenCheckStatus(t)}))}updateSelected(e){let t=!1;return e.id===this.selectedId&&(t=!0),t}treeConfigs(e){let t,o;return e.checked?(t="check_box",o="blue"):(t="check_box_outline_blank",o="grey"),{checkboxColor:o,checkboxIcon:t,rowHoverActive:e.hasHover?"rowHover":"",expanderIcon:e.isOpen?"arrow_drop_down":"arrow_right",selectedActive:e.selectable&&e.selected?"rowSelected":""}}renderNode(e){e.selectable&&(e.selected=this.updateSelected(e));const t=this.treeConfigs(e);return e.child?o("li",null,o("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},o("tttx-button",{class:"toggleNode",design:"borderless-circle",notext:!0,icon:t.expanderIcon,color:"black",onClick:t=>this.toggleNode(e,t)}),this.htmlcode("treeNode",e,t.checkboxIcon,t.checkboxColor)),e.isOpen?o("ul",null,o("div",{class:"child-node"},e.child.map((e=>this.renderNode(e))))):null):o("li",null,o("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},this.htmlcode("treeLeaf",e,t.checkboxIcon,t.checkboxColor)))}htmlcode(e,t,r,s){return o("div",{class:"inline-tree-item element"},t.hasCheckbox&&o("tttx-button",{design:"borderless-circle",notext:!0,icon:r,iconcolor:s,class:"padding-icon checkbox",onClick:e=>this.handleCheckboxChange(t,e)}),!t.html&&t.hasIcon&&o("tttx-icon",{icon:t.icon,color:t.iconColor,class:"padding-icon"}),!t.html&&o("div",{class:e},t.title),t.html&&o("div",{class:e,innerHTML:i.sanitize(t.html,n)}),(t.menuActive||t.chevronActive)&&o("div",{class:"right-buttons-container"},t.menuActive&&o("tttx-button",{design:"borderless-circle",notext:!0,icon:"more_vert",color:"black",class:"padding-icon menu-button",onClick:e=>{e.stopPropagation(),this.onClickHandler("menu",e,t)}}),t.chevronActive&&o("tttx-icon",{icon:"chevron_right",color:"black",class:"padding-icon chevron-button",onClick:e=>{e.stopPropagation(),this.onClickHandler("chevron",e,t)}})))}render(){if(this.data)return this.treeData="string"==typeof this.data?JSON.parse(this.data):this.data,o("div",{class:"tree-view-element"},o("ul",null,this.treeData.map((e=>this.renderNode(e)))))}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:"Roboto", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:"";position:absolute;left:-50%;right:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:"";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:"";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}';export{r as tttx_tree_view}