@genexus/genexus-ide-ui 0.0.62 → 0.0.63

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 (113) hide show
  1. package/dist/cjs/{ch-tree-x_3.cjs.entry.js → ch-checkbox_4.cjs.entry.js} +277 -71
  2. package/dist/cjs/ch-next-data-modeling-render.cjs.entry.js +242 -0
  3. package/dist/cjs/{ch-next-data-modeling-item.cjs.entry.js → ch-next-data-modeling_2.cjs.entry.js} +20 -1
  4. package/dist/cjs/ch-tree-view-render-wrapper.cjs.entry.js +160 -0
  5. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  6. package/dist/cjs/gx-ide-kb-manager-export.cjs.entry.js +41 -39
  7. package/dist/cjs/gx-ide-kb-manager-import.cjs.entry.js +23 -11
  8. package/dist/cjs/gx-ide-test.cjs.entry.js +107 -122
  9. package/dist/cjs/gxg-color-picker.cjs.entry.js +2 -2
  10. package/dist/cjs/gxg-title-editable.cjs.entry.js +11 -4
  11. package/dist/cjs/{gxg-tree_2.cjs.entry.js → gxg-tree-item.cjs.entry.js} +0 -212
  12. package/dist/cjs/gxg-tree-view.cjs.entry.js +165 -0
  13. package/dist/cjs/gxg-tree.cjs.entry.js +218 -0
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/collection/collection-manifest.json +5 -3
  16. package/dist/collection/components/_test/test.css +5 -0
  17. package/dist/collection/components/_test/test.js +109 -220
  18. package/dist/collection/components/kb-manager-export/helpers.js +7 -23
  19. package/dist/collection/components/kb-manager-export/kb-manager-export.css +20 -0
  20. package/dist/collection/components/kb-manager-export/kb-manager-export.js +42 -22
  21. package/dist/collection/components/kb-manager-import/gx-ide-assets/kb-manager-import/langs/kb-manager-import.lang.en.json +1 -0
  22. package/dist/collection/components/kb-manager-import/kb-manager-import.js +23 -11
  23. package/dist/components/ch-next-data-modeling-item.js +1 -457
  24. package/dist/components/ch-next-data-modeling-render.js +295 -0
  25. package/dist/components/ch-next-data-modeling.js +1 -27
  26. package/dist/components/ch-tree-view-item.js +6 -0
  27. package/dist/components/ch-tree-view-render-wrapper.js +224 -0
  28. package/dist/components/ch-tree-view-render.js +6 -0
  29. package/dist/components/ch-tree-view.js +6 -0
  30. package/dist/components/gx-ide-kb-manager-export.js +75 -73
  31. package/dist/components/gx-ide-kb-manager-import.js +38 -20
  32. package/dist/components/gx-ide-references.js +21 -15
  33. package/dist/components/gx-ide-test.js +120 -160
  34. package/dist/components/gxg-color-picker.js +2 -2
  35. package/dist/components/gxg-title-editable.js +12 -4
  36. package/dist/components/gxg-tree-item.js +614 -1
  37. package/dist/components/gxg-tree-view.js +2 -2
  38. package/dist/components/gxg-tree.js +236 -1
  39. package/dist/components/index.js +5 -3
  40. package/dist/components/next-data-modeling-item.js +466 -0
  41. package/dist/{esm/ch-next-data-modeling.entry.js → components/next-data-modeling.js} +21 -7
  42. package/dist/components/{tree-x-list-item.js → tree-view-item.js} +9 -9
  43. package/dist/components/{ch-test-tree-x.js → tree-view-render.js} +168 -28
  44. package/dist/components/tree-view.js +410 -435
  45. package/dist/components/tree-view2.js +226 -0
  46. package/dist/esm/{ch-tree-x_3.entry.js → ch-checkbox_4.entry.js} +275 -70
  47. package/dist/esm/ch-next-data-modeling-render.entry.js +238 -0
  48. package/dist/esm/{ch-next-data-modeling-item.entry.js → ch-next-data-modeling_2.entry.js} +21 -3
  49. package/dist/esm/ch-tree-view-render-wrapper.entry.js +156 -0
  50. package/dist/esm/genexus-ide-ui.js +1 -1
  51. package/dist/esm/gx-ide-kb-manager-export.entry.js +41 -39
  52. package/dist/esm/gx-ide-kb-manager-import.entry.js +23 -11
  53. package/dist/esm/gx-ide-test.entry.js +108 -123
  54. package/dist/esm/gxg-color-picker.entry.js +2 -2
  55. package/dist/esm/gxg-title-editable.entry.js +11 -4
  56. package/dist/{components/gxg-tree-item2.js → esm/gxg-tree-item.entry.js} +9 -79
  57. package/dist/esm/gxg-tree-view.entry.js +161 -0
  58. package/dist/{components/gxg-tree2.js → esm/gxg-tree.entry.js} +8 -32
  59. package/dist/esm/loader.js +1 -1
  60. package/dist/genexus-ide-ui/genexus-ide-ui.css +1 -1
  61. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  62. package/dist/genexus-ide-ui/gx-ide-assets/kb-manager-import/langs/kb-manager-import.lang.en.json +1 -0
  63. package/dist/genexus-ide-ui/p-13177896.entry.js +1 -0
  64. package/dist/genexus-ide-ui/p-19fef562.entry.js +1 -0
  65. package/dist/genexus-ide-ui/p-2781b92a.entry.js +1 -0
  66. package/dist/genexus-ide-ui/p-2c17e71d.entry.js +1 -0
  67. package/dist/genexus-ide-ui/p-40a57a36.entry.js +1 -0
  68. package/dist/genexus-ide-ui/p-636d02fa.entry.js +1 -0
  69. package/dist/genexus-ide-ui/p-7b63be93.entry.js +1 -0
  70. package/dist/genexus-ide-ui/p-8a7c4561.entry.js +1 -0
  71. package/dist/genexus-ide-ui/p-a2cb0e6b.entry.js +1 -0
  72. package/dist/genexus-ide-ui/p-a9c8b373.entry.js +1 -0
  73. package/dist/genexus-ide-ui/p-b819706e.entry.js +1 -0
  74. package/dist/genexus-ide-ui/p-bacd879c.entry.js +1 -0
  75. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/next/data-modeling-render/next-data-modeling-render.css +3 -0
  76. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/renders/tree-view/tree-view-render.css +3 -0
  77. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/test/test-tree-view/tree-view-render-wrapper.css +0 -0
  78. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-view/tree-view/tree-view.css +45 -0
  79. package/dist/node_modules/@genexus/gemini/dist/collection/components/title-editable/title-editable.css +17 -3
  80. package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-view/tree-view.css +5 -2
  81. package/dist/types/common/helpers.d.ts +2 -2
  82. package/dist/types/components/_test/test.d.ts +3 -35
  83. package/dist/types/components/kb-manager-export/helpers.d.ts +4 -4
  84. package/dist/types/components/kb-manager-export/kb-manager-export.d.ts +10 -5
  85. package/dist/types/components/kb-manager-import/helpers.d.ts +3 -3
  86. package/dist/types/components/kb-manager-import/kb-manager-import.d.ts +7 -6
  87. package/dist/types/components/references/helpers.d.ts +2 -2
  88. package/dist/types/components/references/references.d.ts +3 -3
  89. package/dist/types/components.d.ts +3 -60
  90. package/package.json +3 -3
  91. package/dist/cjs/ch-checkbox.cjs.entry.js +0 -93
  92. package/dist/cjs/ch-next-data-modeling.cjs.entry.js +0 -19
  93. package/dist/cjs/ch-test-tree-x.cjs.entry.js +0 -458
  94. package/dist/components/ch-tree-x-list-item.js +0 -6
  95. package/dist/components/ch-tree-x.js +0 -6
  96. package/dist/components/tree-x.js +0 -504
  97. package/dist/esm/ch-checkbox.entry.js +0 -89
  98. package/dist/esm/ch-test-tree-x.entry.js +0 -454
  99. package/dist/esm/gxg-tree_2.entry.js +0 -757
  100. package/dist/genexus-ide-ui/p-092ccacd.entry.js +0 -1
  101. package/dist/genexus-ide-ui/p-1ad68b23.entry.js +0 -3
  102. package/dist/genexus-ide-ui/p-3442d19a.entry.js +0 -1
  103. package/dist/genexus-ide-ui/p-39968306.entry.js +0 -1
  104. package/dist/genexus-ide-ui/p-5755f985.entry.js +0 -1
  105. package/dist/genexus-ide-ui/p-85597097.entry.js +0 -1
  106. package/dist/genexus-ide-ui/p-9e530c7d.entry.js +0 -1
  107. package/dist/genexus-ide-ui/p-ad5040e4.entry.js +0 -1
  108. package/dist/genexus-ide-ui/p-aeb3b032.entry.js +0 -1
  109. package/dist/genexus-ide-ui/p-c53522c9.entry.js +0 -1
  110. package/dist/genexus-ide-ui/p-d104f9a4.entry.js +0 -1
  111. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/test/test-tree-x.css +0 -3
  112. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-view/tree-x/tree-x.css +0 -45
  113. /package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-view/{tree-x-list-item/tree-x-list-item.css → tree-view-item/tree-view-item.css} +0 -0
@@ -1,757 +0,0 @@
1
- import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
2
- import { e as exportParts } from './export-parts-7f208d57.js';
3
-
4
- const gxgTreeCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{display:block;--gxg-tree-item-inner-spacing:var(--spacing-comp-01);overflow:auto;height:100%}:host::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}:host::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}:host::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}:host::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host ul{margin:0;padding-left:0;width:100%}";
5
-
6
- const GxgTree = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- this.treeItemStateChanged = createEvent(this, "treeItemStateChanged", 7);
10
- /*
11
- INDEX:
12
- 1.OWN PROPERTIES
13
- 2.REFERENCE TO ELEMENTS
14
- 3.STATE() VARIABLES
15
- 4.PUBLIC PROPERTY API | WATCH'S
16
- 5.EVENTS (EMIT)
17
- 6.COMPONENT LIFECYCLE METHODS
18
- 7.LISTENERS
19
- 8.PUBLIC METHODS API
20
- 9.LOCAL METHODS
21
- 10.RENDER() FUNCTION
22
- */
23
- // 1.OWN PROPERTIES //
24
- this.masterTree = false;
25
- // 3.STATE() VARIABLES //
26
- // 4.PUBLIC PROPERTY API | WATCH'S //
27
- /**
28
- * Set this attribute if you want all the items to have a checkbox.
29
- */
30
- this.checkbox = true;
31
- /**
32
- * Set this attribute if you want all the items to be checked by default.
33
- */
34
- this.checked = false;
35
- /**
36
- * Set this attribute if you want all the items to be opened by default.
37
- */
38
- this.opened = true;
39
- /**
40
- * Set this attribute if you want all the items checkboxes to be toggled when the parent tree item checkbox is toggled.
41
- */
42
- this.toggleCheckboxes = false;
43
- /**
44
- * Set this attribute if you want to allow multi selection of the items. This property should only be set on the master tree.
45
- */
46
- this.multiSelection = false;
47
- // 9.LOCAL METHODS //
48
- /**
49
- * This method evaluates if this tree is the master tree
50
- */
51
- this.evaluateIsMasterTree = () => {
52
- var _a;
53
- const grandFather = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
54
- if (grandFather === undefined || grandFather.nodeName !== "GXG-TREE") {
55
- this.masterTree = true;
56
- }
57
- };
58
- this.initialConfig = () => {
59
- const parent = this.el.parentElement;
60
- if ((parent === null || parent === void 0 ? void 0 : parent.tagName) === "GXG-TREE-ITEM") {
61
- const treeItem = parent;
62
- this.checkbox =
63
- treeItem.checkbox !== undefined ? treeItem.checkbox : this.checkbox;
64
- this.checked =
65
- treeItem.checked !== undefined ? treeItem.checked : this.checked;
66
- this.opened =
67
- treeItem.opened !== undefined ? treeItem.opened : this.opened;
68
- this.toggleCheckboxes =
69
- treeItem.toggleCheckboxes !== undefined
70
- ? treeItem.toggleCheckboxes
71
- : this.toggleCheckboxes;
72
- }
73
- };
74
- /**
75
- * @description This functions is supposed to be called from any of the listeners that are attached to the tree-item events that are emitted when the state changes (toggleIconClicked, selectionChanged, checkboxToggled). When an item state is changed, this function emits the update item data, so that the host can update the tree model, if any, if desired.
76
- */
77
- this.emitTreeItemNewState = (itemData, emittedBy) => {
78
- this.treeItemStateChanged.emit({ itemData, emittedBy: emittedBy });
79
- };
80
- }
81
- // 6.COMPONENT LIFECYCLE METHODS //
82
- componentWillLoad() {
83
- this.initialConfig();
84
- this.evaluateIsMasterTree();
85
- }
86
- // 7.LISTENERS //
87
- checkboxToggledHandler(e) {
88
- const itemData = e.detail;
89
- if (this.masterTree) {
90
- this.emitTreeItemNewState(itemData, "checkboxToggled");
91
- }
92
- }
93
- doubleClickedHandler(e) {
94
- const itemData = e.detail;
95
- if (this.masterTree) {
96
- this.emitTreeItemNewState(itemData, "doubleClicked");
97
- }
98
- }
99
- selectionChangedHandler(e) {
100
- //Unselect all items, except the one that triggered this event. This action should be done once, by the master tree.
101
- const allChildren = this.el.querySelectorAll("gxg-tree-item");
102
- if ((this.masterTree && this.multiSelection && !e.detail.ctrl) ||
103
- (this.masterTree && !this.multiSelection)) {
104
- Array.from(allChildren).forEach((item) => {
105
- if (item !== e.detail.ref) {
106
- item.selected = false;
107
- }
108
- });
109
- }
110
- const itemData = e.detail;
111
- if (this.masterTree) {
112
- this.emitTreeItemNewState(itemData, "selectionChanged");
113
- }
114
- }
115
- toggleIconClickedHandler(e) {
116
- const itemData = e.detail;
117
- if (this.masterTree) {
118
- this.emitTreeItemNewState(itemData, "toggleIconClicked");
119
- }
120
- }
121
- // 8.PUBLIC METHODS API //
122
- /**
123
- * Returns an array of the selected tree-items, providing the id, checked status, selected status, and label.
124
- */
125
- async getCheckedItems(idsArray) {
126
- const allTreeItems = Array.from(this.el.querySelectorAll("gxg-tree-item"));
127
- const checkedTreeItems = [];
128
- if (idsArray === null || idsArray === void 0 ? void 0 : idsArray.length) {
129
- idsArray.forEach((id) => {
130
- const found = allTreeItems.find((item) => id === item.id);
131
- found &&
132
- checkedTreeItems.push({
133
- id: found.id,
134
- label: found.label,
135
- checked: found.checked,
136
- selected: found.selected,
137
- });
138
- });
139
- }
140
- else {
141
- allTreeItems.forEach((item) => {
142
- item.checked &&
143
- checkedTreeItems.push({
144
- id: item.id,
145
- label: item.label,
146
- checked: item.checked,
147
- selected: item.selected,
148
- });
149
- });
150
- }
151
- return checkedTreeItems;
152
- }
153
- /**
154
- * Returns an array of the selected tree-items, providing the id, checked status, selected status, and label.
155
- */
156
- async getSelectedItems() {
157
- const selectedItems = [];
158
- const allItems = this.el.querySelectorAll("gxg-tree-item");
159
- if (allItems === null || allItems === void 0 ? void 0 : allItems.length) {
160
- Array.from(allItems).forEach((item) => {
161
- if (item.selected) {
162
- selectedItems.push({
163
- id: item.id,
164
- label: item.label,
165
- checked: item.checked,
166
- selected: item.selected,
167
- });
168
- }
169
- });
170
- }
171
- return selectedItems;
172
- }
173
- /**
174
- * @param ids: An array id the tree items to be toggled.
175
- * @param open: A boolean indicating that the tree item should be opened or closed. (optional)
176
- * @description This method is used to toggle a tree-item by the tree-item id/ids.
177
- * @returns a boolean value indicating if the selected tree-item is open or not, after the method was called.
178
- */
179
- async toggleItems(ids, open) {
180
- if (!(ids === null || ids === void 0 ? void 0 : ids.length)) {
181
- return [];
182
- }
183
- const allTreeItems = Array.from(this.el.querySelectorAll("gxg-tree-item"));
184
- const toggledTreeItems = [];
185
- ids.forEach((id) => {
186
- const found = allTreeItems.find((item) => id === item.id);
187
- if (found && open === undefined) {
188
- found.opened = !found.opened;
189
- }
190
- else if (found && open && !found.opened) {
191
- found.opened = true;
192
- }
193
- else if (found && !open && found.opened) {
194
- found.opened = false;
195
- }
196
- if (found) {
197
- toggledTreeItems.push({
198
- id: found.id,
199
- opened: found.opened,
200
- });
201
- }
202
- });
203
- return toggledTreeItems;
204
- }
205
- // 10.RENDER() FUNCTION //
206
- render() {
207
- return (h(Host, null, h("div", { class: {
208
- tree: true,
209
- } }, h("ul", { ref: (el) => (this.ulTree = el) }, h("slot", null)))));
210
- }
211
- get el() { return getElement(this); }
212
- };
213
- GxgTree.style = gxgTreeCss;
214
-
215
- const gxgTreeItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{--text-color:var(--color-on-background);--font-family:\"Source Sans Pro\", sans-serif;--font-weight:normal;--font-size:12px;--guide-color:var(--gray-06);--item-hover-color:var(--gxg-background-color--hover);--item-active-color:var(--silverGray);color:var(--color-on-background);width:100%;display:block}:host li{list-style:none;font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);color:var(--text-color);overflow:hidden}:host li>::slotted(gxg-tree){display:none}:host li.tree-open>::slotted(gxg-tree){display:block}:host li.tree-closed .vertical-line{display:none}:host li .li-text{min-height:24px;cursor:pointer;display:flex;align-items:center;position:relative;padding-inline-end:var(--spacing-comp-01)}:host li .li-text:hover{background-color:var(--item-hover-color)}:host li .li-text:active{background-color:var(--gxg-background-color--selected)}:host li .li-text:focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host li .li-text--selected{background-color:var(--gxg-background-color--selected)}:host li .li-text>*{flex-shrink:0}:host li .vertical-line{position:absolute;width:1px;height:0;top:23px;left:15px;z-index:1;background-image:linear-gradient(var(--guide-color) 28%, rgba(255, 255, 255, 0) 0%);background-position:right;background-size:1px 4px;background-repeat:repeat-y}:host li .horizontal-line{position:absolute;height:1px;top:11px;z-index:1;background-image:linear-gradient(to right, var(--guide-color) 33%, rgba(255, 255, 255, 0) 0%);background-position:bottom;background-size:3px 1px;background-repeat:repeat-x}:host li .horizontal-line.display-none{display:none}:host li .closed-opened-icons{position:relative;display:flex;margin-left:-2px}:host li .toggle-icon{position:relative;z-index:2;transform:scale(0.75, 0.75);margin-inline-end:var(--spacing-comp-00);transition-property:opacity;transition-duration:0.5s;transition-timing-function:ease;background-color:var(--gxg-background-color--hover)}:host li .toggle-icon:hover{background-color:var(--color-background)}:host .checkbox{margin-inline-end:var(--spacing-comp-01)}:host .icon--left{margin:0 var(--spacing-comp-01) 0 var(--spacing-comp-00)}:host .right-icon{margin-inline-start:auto;position:relative;top:0;transition-property:top;transition-duration:0.5s;transition-timing-function:ease}:host .loading{opacity:1;display:inline;z-index:1;margin-inline-end:var(--spacing-comp-01);border-radius:50%;width:8px;height:8px;border:0.18rem solid var(--gray-04);border-top-color:var(--gray-01);animation:spin 1s infinite linear}:host .loading--double{border-style:double;border-width:0.5rem}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([disabled]) li .text{color:var(--darkGray)}:host([disabled]) .toggle-icon{pointer-events:none}";
216
-
217
- const GxgTreeItem = class {
218
- constructor(hostRef) {
219
- registerInstance(this, hostRef);
220
- this.checkboxToggled = createEvent(this, "checkboxToggled", 7);
221
- this.doubleClicked = createEvent(this, "doubleClicked", 7);
222
- this.lazyChanged = createEvent(this, "lazyChanged", 7);
223
- this.selectionChanged = createEvent(this, "selectionChanged", 7);
224
- this.toggleIconClicked = createEvent(this, "toggleIconClicked", 7);
225
- this.lazy = false; //True if not leaf but no children.
226
- this.parentTreeIsMasterTree = false;
227
- this.numberOfParentTrees = 1;
228
- this.firstItem = false;
229
- this.lastItem = false;
230
- this.leftPadding = "0px";
231
- this.verticalLineStartPosition = "0px";
232
- this.horizontalLineWidth = "24px";
233
- this.horizontalLineStartPosition = "0px";
234
- this.parts = {
235
- item: "item",
236
- checkbox: "checkbox",
237
- toggleButton: "toggle-button",
238
- };
239
- // 3.STATE() VARIABLES //
240
- this.horizontalLinePaddingLeft = 0;
241
- this.lastTreeItem = false;
242
- this.lastTreeItemOfParentTree = false;
243
- this.numberOfVisibleDescendantItems = 0;
244
- this.time = 0;
245
- this.downloading = false;
246
- // 4.PUBLIC PROPERTY API | WATCH'S //
247
- /**
248
- * Set this attribute if you want this item to display a checkbox. This attribute is affected by the parent tree-item checkbox attribute, unless it is set in this item.
249
- */
250
- this.checkbox = undefined;
251
- /**
252
- * Set this attribute if you want this item to be checked by default. This attribute is affected by the parent tree-item checked attribute, unless it is set in this item.
253
- */
254
- this.checked = undefined;
255
- /**
256
- * Set this attribute if you want this items child tree to be opened by default. This attribute is affected by the parent tree-item opened attribute, unless it is set in this item.
257
- */
258
- this.opened = undefined;
259
- /**
260
- * Set this attribute if you want all the children item's checkboxes to be toggled when this item checkbox is toggled. This attribute is affected by the parent tree-item toggleCheckboxes attribute, unless it is set in this item.
261
- */
262
- this.toggleCheckboxes = undefined;
263
- /**
264
- * The presence of this attribute makes this tree item disabled. This attribute is affected by the parent tree type attribute, unless it is set in this item.
265
- */
266
- this.disabled = undefined;
267
- /**
268
- * The presence of this attribute indicates that this tree-item is a leaf, meaning it has no children items. If is not a leaf, it will display a +/- icon to toggle/ontoggle the children tree
269
- */
270
- this.leaf = false;
271
- /**
272
- * The presence of this attribute sets the tree-item as selected
273
- */
274
- this.selected = false;
275
- /**
276
- * This property is for internal use, when using the treeModel.
277
- */
278
- this.numberOfChildren = 0;
279
- /**
280
- * This property is for internal use. It indicates that the item has children.
281
- */
282
- this.hasChildTree = false;
283
- /**
284
- * This property is for internal use. It indicates that the checkbox has an indeterminate state.
285
- */
286
- this.indeterminate = false;
287
- // 9.LOCAL METHODS //
288
- this.evaluateId = () => {
289
- if (!this.id) {
290
- this.id = this.el.getAttribute("id");
291
- }
292
- };
293
- this.evaluateLazy = () => {
294
- if (!this.leaf && this.numberOfChildren === 0) {
295
- this.lazy = true;
296
- this.opened = false;
297
- }
298
- };
299
- this.observer = new MutationObserver((mutationsList) => {
300
- for (const mutation of mutationsList) {
301
- if (mutation.type === "childList") {
302
- this.lazy = false;
303
- this.opened = true;
304
- this.reRender();
305
- }
306
- }
307
- });
308
- this.initiateMutationObserver = () => {
309
- this.observer.observe(this.el, { childList: true, subtree: true });
310
- };
311
- /**
312
- * @description Set some properties based on the parent tree configuration, unless this item has this properties already set.
313
- */
314
- this.cascadeConfig = () => {
315
- const parentTree = this.el
316
- .parentElement;
317
- this.checkbox =
318
- this.checkbox !== undefined ? this.checkbox : parentTree.checkbox;
319
- this.checked =
320
- this.checked !== undefined ? this.checked : parentTree.checked;
321
- this.opened = this.opened !== undefined ? this.opened : parentTree.opened;
322
- this.toggleCheckboxes =
323
- this.toggleCheckboxes !== undefined
324
- ? this.toggleCheckboxes
325
- : parentTree.checkbox;
326
- };
327
- this.attachExportParts = () => {
328
- const part = this.el.getAttribute("part");
329
- const exportPartsResult = exportParts(part, this.parts);
330
- exportPartsResult.length && (this.exportparts = exportPartsResult);
331
- };
332
- this.defineLineHeight = () => {
333
- let offset = 11.5;
334
- if (this.parentTreeIsMasterTree) {
335
- offset = 0;
336
- if (this.lastItem) {
337
- offset = 11;
338
- }
339
- }
340
- let total = 0;
341
- if (!this.leaf && !this.lazy) {
342
- const allItemsLength = this.el.querySelectorAll("gxg-tree-item").length;
343
- const directGxgTree = this.el.querySelector(":scope > gxg-tree");
344
- const directTreeItems = directGxgTree.querySelectorAll(":scope > gxg-tree-item");
345
- if (!this.parentTreeIsMasterTree) {
346
- const lastDirectTreeItem = directTreeItems[directTreeItems.length - 1];
347
- const lastDirectItemItemsLength = lastDirectTreeItem.querySelectorAll("gxg-tree-item").length;
348
- total = allItemsLength - lastDirectItemItemsLength;
349
- }
350
- else {
351
- total = allItemsLength;
352
- }
353
- }
354
- this.lineHeight = `${total * 24.2 - offset}px`;
355
- };
356
- /**
357
- * @description returns the appropriate start padding and start position for the item, horizontal line, and vertical line.
358
- */
359
- this.defineStartPosition = () => {
360
- let value = 0;
361
- let horizontalLineStartPosition = 13;
362
- if (this.numberOfParentTrees > 1) {
363
- value = (this.numberOfParentTrees - 1) * 45;
364
- if (this.numberOfParentTrees > 2) {
365
- horizontalLineStartPosition = value - 36;
366
- }
367
- }
368
- else {
369
- value = 5;
370
- }
371
- this.verticalLineStartPosition = `${value + 7}px`;
372
- this.leftPadding = `${value}px`;
373
- this.horizontalLineStartPosition = `${horizontalLineStartPosition}px`;
374
- };
375
- this.liTextClickedHandler = (e) => {
376
- const toggleWasClicked = e.target.classList.contains("toggle-icon");
377
- const checkboxClicked = e.target.nodeName === "GXG-FORM-CHECKBOX";
378
- if (toggleWasClicked || checkboxClicked)
379
- return;
380
- if (e.ctrlKey) {
381
- this.selected = !this.selected;
382
- }
383
- else {
384
- this.selected = true;
385
- }
386
- this.selectionChanged.emit(this.getItemData(e.ctrlKey));
387
- };
388
- this.liTextDoubleClicked = () => {
389
- this.doubleClicked.emit(this.getItemData(false));
390
- !this.leaf && this.toggleClickedHandler();
391
- };
392
- this.liTextKeyDownPressed = (e) => {
393
- if (e.key === "ArrowDown" || e.key === "ArrowUp") {
394
- e.preventDefault(); //prevents scrolling
395
- }
396
- //ENTER
397
- if (e.key === "Enter") {
398
- //Enter should check/uncheck the checkbox (if present)
399
- this.checkboxClickedHandler();
400
- }
401
- //LEFT/RIGHT NAVIGATION
402
- if (e.key === "ArrowRight" && !this.leaf) {
403
- //Toggle the tree
404
- if (!this.opened) {
405
- this.opened = true;
406
- }
407
- else {
408
- const childTree = this.el.querySelector("gxg-tree");
409
- const childTreeFirstChildren = childTree.querySelector("gxg-tree-item");
410
- const childTreeFirstChildrenLiText = childTreeFirstChildren.shadowRoot.querySelector(".li-text");
411
- childTreeFirstChildrenLiText.focus();
412
- }
413
- }
414
- if (e.key === "ArrowLeft") {
415
- let hasParent = false;
416
- const parentGxgTreeItem = this.el.parentElement.parentElement;
417
- let parentGxgTreeItemLiText = null;
418
- if (parentGxgTreeItem.tagName === "GXG-TREE-ITEM") {
419
- hasParent = true;
420
- parentGxgTreeItemLiText = parentGxgTreeItem.shadowRoot.querySelector(".li-text");
421
- }
422
- if (this.leaf) {
423
- if (hasParent) {
424
- parentGxgTreeItemLiText.focus();
425
- }
426
- }
427
- else {
428
- const li = this.el.shadowRoot.querySelector("li");
429
- if (li.classList.contains("tree-open")) {
430
- this.opened = false;
431
- }
432
- else {
433
- if (hasParent) {
434
- parentGxgTreeItemLiText.focus();
435
- }
436
- }
437
- }
438
- }
439
- // UP/DOWN NAVIGATION
440
- if (e.key === "ArrowUp" || (e.key === "Tab" && e.shiftKey)) {
441
- e.preventDefault();
442
- if (!this.firstItem) {
443
- //Is not the first element of the parent
444
- //Set focus on the prev item
445
- let prevItem;
446
- const prevElementSibling = this.el.previousElementSibling;
447
- if (e.shiftKey && e.key !== "Tab") {
448
- //if shift key was pressed, navigate to the previous sibling
449
- if (prevElementSibling !== null) {
450
- prevItem = prevElementSibling.shadowRoot.querySelector("li .li-text");
451
- }
452
- }
453
- else {
454
- if (prevElementSibling === null) {
455
- const parentItem = this.el.parentElement;
456
- const parentParentItem = parentItem.parentElement;
457
- prevItem = parentParentItem.shadowRoot.querySelector("li .li-text");
458
- }
459
- else {
460
- prevItem = prevElementSibling.shadowRoot.querySelector("li .li-text");
461
- if (prevElementSibling !== null) {
462
- //If the preceding tree-item has tree inside...
463
- const prevElementSiblingHasChildTree = prevElementSibling
464
- .hasChildTree;
465
- if (prevElementSiblingHasChildTree) {
466
- const prevElementSiblingHasOpenTree = prevElementSibling
467
- .opened;
468
- if (prevElementSiblingHasOpenTree) {
469
- //If preceding tree-item tree is opened, then the prev item is the last item of that tree
470
- const prevElemSiblingTreeItem = this.el
471
- .previousElementSibling;
472
- const prevElemSiblingTreeItemTree = prevElemSiblingTreeItem.querySelector("gxg-tree");
473
- //
474
- if (prevElemSiblingTreeItemTree.lastElementChild
475
- .hasChildTree) {
476
- if (prevElemSiblingTreeItemTree.lastElementChild.shadowRoot
477
- .querySelector("li")
478
- .classList.contains("tree-open")) {
479
- prevItem = prevElemSiblingTreeItemTree.lastElementChild
480
- .querySelector("gxg-tree")
481
- .lastElementChild.shadowRoot.querySelector("li .li-text");
482
- }
483
- else {
484
- prevItem = prevElemSiblingTreeItemTree.lastElementChild.shadowRoot.querySelector("li .li-text");
485
- }
486
- }
487
- else {
488
- prevItem = prevElemSiblingTreeItemTree.lastElementChild.shadowRoot.querySelector("li .li-text");
489
- }
490
- //
491
- }
492
- else {
493
- //The preciding item has a tree, but it is closed
494
- prevItem = this.el.previousElementSibling.shadowRoot.querySelector("li .li-text");
495
- }
496
- }
497
- }
498
- }
499
- }
500
- if (prevItem !== null && prevItem !== undefined) {
501
- prevItem.focus();
502
- }
503
- }
504
- }
505
- if (e.key === "ArrowDown" || (e.key === "Tab" && !e.shiftKey)) {
506
- e.preventDefault();
507
- if (!this.lastTreeItemOfParentTree) {
508
- //Set focus on the next item
509
- let nextItem;
510
- if (e.shiftKey) {
511
- //if shift key was pressed, navigate to the next sibling
512
- if (this.el.nextElementSibling !== null) {
513
- nextItem = this.el.nextElementSibling.shadowRoot.querySelector("li .li-text");
514
- }
515
- }
516
- else {
517
- if (this.lastTreeItem) {
518
- if (this.hasChildTree && this.opened) {
519
- nextItem = this.el.firstElementChild.firstElementChild.shadowRoot.querySelector(".li-text");
520
- }
521
- else {
522
- const thisTree = this.el.parentElement;
523
- const thisTreeParent = thisTree.parentElement;
524
- const thisTreeParentNextTree = thisTreeParent.nextElementSibling;
525
- if (thisTreeParentNextTree === null) {
526
- if (thisTreeParent.parentElement.parentElement
527
- .nextElementSibling !== null) {
528
- nextItem = thisTreeParent.parentElement.parentElement.nextElementSibling.shadowRoot.querySelector(".li-text");
529
- }
530
- }
531
- else {
532
- nextItem = thisTreeParentNextTree.shadowRoot.querySelector(".li-text");
533
- }
534
- }
535
- }
536
- else {
537
- if (this.hasChildTree && this.opened) {
538
- nextItem = this.el
539
- .querySelector("gxg-tree gxg-tree-item")
540
- .shadowRoot.querySelector("li .li-text");
541
- }
542
- else {
543
- nextItem = this.el.nextElementSibling.shadowRoot.querySelector(".li-text");
544
- }
545
- }
546
- }
547
- if (nextItem !== null && nextItem !== undefined) {
548
- nextItem.focus();
549
- }
550
- }
551
- else {
552
- //Last element of parent tree
553
- if (!this.leaf && this.opened) {
554
- const childTreeFirstTreeItem = this.el.firstElementChild.firstElementChild.shadowRoot.querySelector("li .li-text");
555
- childTreeFirstTreeItem.focus();
556
- }
557
- }
558
- }
559
- };
560
- this.returnToggleIconType = () => {
561
- //Returns the type of icon : expand or collapse
562
- if (!this.opened || this.lazy) {
563
- return "gemini-tools/add";
564
- }
565
- else {
566
- return "gemini-tools/minus";
567
- }
568
- };
569
- /**
570
- * When a checkbox is clicked, it state changes and so it's children, and parent items do.
571
- * First evaluate the children, and then the parent items.
572
- */
573
- this.checkboxClickedHandler = () => {
574
- if (this.checkbox) {
575
- this.checked = !this.checked;
576
- if (!this.leaf) {
577
- this.toggleChildrenCheckboxes(this.checked);
578
- }
579
- const parentItems = this.getParentItems();
580
- parentItems.forEach((parentItem) => {
581
- parentItem.evaluateCheckboxStatus();
582
- });
583
- }
584
- };
585
- this.toggleChildrenCheckboxes = (checked) => {
586
- this.indeterminate = false;
587
- const allChildren = this.el.querySelectorAll("gxg-tree-item");
588
- if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
589
- Array.from(allChildren).forEach((item) => {
590
- item.indeterminate = false;
591
- item.checked = checked;
592
- });
593
- }
594
- };
595
- this.getParentItems = () => {
596
- var _a;
597
- const parentItems = [];
598
- let parentItem = this.el.parentElement.parentElement;
599
- while ((parentItem === null || parentItem === void 0 ? void 0 : parentItem.nodeName) === "GXG-TREE-ITEM") {
600
- parentItems.push(parentItem);
601
- parentItem = (_a = parentItem.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
602
- }
603
- return parentItems;
604
- };
605
- this.getParentsNumber = () => {
606
- var _a;
607
- let count = 0;
608
- let parentElement = this.el.parentElement;
609
- while ((parentElement === null || parentElement === void 0 ? void 0 : parentElement.nodeName) === "GXG-TREE") {
610
- count++;
611
- parentElement = (_a = parentElement.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
612
- }
613
- return count;
614
- };
615
- this.getChildrenNumber = () => {
616
- if (this.numberOfChildren === 0) {
617
- //If this.numberOfChildren === 0 it might be because the whole tree was created with markup, and not by passing a model. In that case, count the children with querySelectorAll.
618
- return this.el.querySelectorAll("gxg-tree-item").length;
619
- }
620
- };
621
- this.toggleClickedHandler = () => {
622
- if (this.lazy && !this.opened) {
623
- this.downloading = true;
624
- this.toggleIconClicked.emit(this.getItemData());
625
- }
626
- if (!this.lazy) {
627
- this.opened = !this.opened;
628
- }
629
- };
630
- this.getItemData = (ctrl = false) => {
631
- return {
632
- ref: this.el,
633
- checkbox: this.checkbox,
634
- checked: this.checked,
635
- ctrl: ctrl,
636
- description: this.description,
637
- disabled: this.disabled,
638
- icon: this.icon,
639
- id: this.id,
640
- indeterminate: this.indeterminate,
641
- label: this.label,
642
- lazy: this.lazy,
643
- leaf: this.leaf,
644
- opened: this.opened,
645
- selected: this.selected,
646
- };
647
- };
648
- }
649
- checkedHandler(newValue, oldValue) {
650
- if (oldValue !== undefined) {
651
- this.checkboxToggled.emit(this.getItemData(false));
652
- }
653
- }
654
- openedHandler(newValue, oldValue) {
655
- if (oldValue !== undefined) {
656
- this.toggleIconClicked.emit(this.getItemData(false));
657
- }
658
- }
659
- // 6.COMPONENT LIFECYCLE METHODS //
660
- componentWillLoad() {
661
- //Count number of parent trees in order to set the appropriate padding-left
662
- this.numberOfParentTrees = this.getParentsNumber();
663
- this.numberOfChildren = this.getChildrenNumber();
664
- //If is last item of tree
665
- const nextItem = this.el.nextElementSibling;
666
- if (nextItem === null) {
667
- this.lastTreeItem = true;
668
- }
669
- if (this.numberOfParentTrees === 1) {
670
- this.parentTreeIsMasterTree = true;
671
- const prevItem = this.el.previousElementSibling;
672
- if (prevItem === null) {
673
- //If is first item of parent tree...
674
- this.firstItem = true;
675
- }
676
- }
677
- if (!this.el.nextElementSibling) {
678
- this.lastItem = true;
679
- }
680
- this.evaluateId();
681
- this.evaluateLazy();
682
- this.defineLineHeight();
683
- this.defineStartPosition();
684
- this.cascadeConfig();
685
- this.attachExportParts();
686
- this.initiateMutationObserver();
687
- }
688
- // 7.LISTENERS //
689
- // 8.PUBLIC METHODS API //
690
- async reRender() {
691
- this.defineLineHeight();
692
- }
693
- evaluateCheckboxStatus() {
694
- const allChildren = this.el.querySelectorAll("gxg-tree-item");
695
- let checked = 0;
696
- if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
697
- Array.from(allChildren).forEach((item) => {
698
- if (item.checked) {
699
- checked++;
700
- }
701
- });
702
- if (allChildren.length === checked) {
703
- //all checked
704
- this.checked = true;
705
- this.indeterminate = false;
706
- }
707
- else if (checked === 0) {
708
- //all unchecked
709
- this.checked = false;
710
- this.indeterminate = false;
711
- }
712
- else {
713
- //indeterminate
714
- this.indeterminate = true;
715
- }
716
- }
717
- }
718
- // 10.RENDER() FUNCTION //
719
- render() {
720
- return (h(Host, { class: { leaf: this.leaf, "not-leaf": !this.leaf }, exportParts: this.exportparts ? this.exportparts : null }, h("li", { class: {
721
- "tree-open": this.opened,
722
- "tree-closed": !this.opened,
723
- disabled: this.disabled,
724
- } }, h("div", { class: {
725
- "li-text": true,
726
- "li-text--not-leaf": !this.leaf,
727
- "li-text--leaf": this.leaf,
728
- "li-text--first-tree-item": this.firstItem,
729
- "li-text--has-child-tree": this.hasChildTree,
730
- "li-text--selected": this.selected,
731
- }, style: { paddingLeft: this.leftPadding }, onClick: this.liTextClickedHandler.bind(this), onDblClick: this.liTextDoubleClicked.bind(this), onKeyDown: this.liTextKeyDownPressed.bind(this), tabIndex: -1, part: this.parts.item }, !this.leaf
732
- ? [
733
- h("span", { class: { "vertical-line": true }, style: {
734
- height: this.lineHeight,
735
- left: this.verticalLineStartPosition,
736
- } }),
737
- h("div", { class: { "closed-opened-icons": true } }, h("gxg-icon", { onClick: this.toggleClickedHandler.bind(this), type: this.returnToggleIconType(), color: "auto", class: "icon toggle-icon", part: this.parts.toggleButton })),
738
- ]
739
- : null, this.numberOfParentTrees > 1 ? (h("span", { class: {
740
- "horizontal-line": true,
741
- }, style: {
742
- left: this.horizontalLineStartPosition,
743
- width: this.horizontalLineWidth,
744
- } })) : null, this.checkbox ? (h("gxg-form-checkbox", { checked: this.checked, class: { checkbox: true }, tabIndex: -1, indeterminate: this.indeterminate, disabled: this.disabled, onClick: this.checkboxClickedHandler, part: this.parts.checkbox })) : null, this.icon ? (h("gxg-icon", { type: this.icon, color: "auto", class: "icon icon--left", style: {
745
- "--icon-size": "14px",
746
- } })) : null, this.downloading && this.lazy ? (h("span", { class: "loading" })) : null, h("span", { class: "text" }, h("slot", null))), h("slot", { name: "tree" }), this.treeModel ? this.treeModel : null)));
747
- }
748
- static get assetsDirs() { return ["tree-item-assets"]; }
749
- get el() { return getElement(this); }
750
- static get watchers() { return {
751
- "checked": ["checkedHandler"],
752
- "opened": ["openedHandler"]
753
- }; }
754
- };
755
- GxgTreeItem.style = gxgTreeItemCss;
756
-
757
- export { GxgTree as gxg_tree, GxgTreeItem as gxg_tree_item };