@genexus/genexus-ide-ui 0.0.57 → 0.0.58
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.
- package/dist/cjs/{ch-checkbox_4.cjs.entry.js → ch-checkbox_3.cjs.entry.js} +54 -43
- package/dist/cjs/ch-suggest_4.cjs.entry.js +2 -2
- package/dist/cjs/ch-test-suggest.cjs.entry.js +84 -0
- package/dist/cjs/ch-test-tree-x.cjs.entry.js +31 -16
- package/dist/cjs/ch-tooltip.cjs.entry.js +85 -0
- package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
- package/dist/cjs/gx-ide-references.cjs.entry.js +76 -116
- package/dist/cjs/gx-ide-test.cjs.entry.js +51 -5
- package/dist/cjs/gxg-label_2.cjs.entry.js +15 -2
- package/dist/cjs/gxg-tree-view.cjs.entry.js +36 -14
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/common/helpers.js +3 -0
- package/dist/collection/components/references/helpers.js +16 -19
- package/dist/collection/components/references/references.css +8 -0
- package/dist/collection/components/references/references.js +60 -98
- package/dist/components/ch-suggest2.js +2 -2
- package/dist/components/ch-test-suggest.js +119 -0
- package/dist/components/ch-test-tree-x.js +38 -28
- package/dist/components/ch-tooltip.js +115 -0
- package/dist/components/gx-ide-references.js +122 -150
- package/dist/components/gx-ide-test.js +48 -2
- package/dist/components/gxg-tree-view.js +1 -434
- package/dist/components/index.js +2 -1
- package/dist/components/tooltip.js +17 -3
- package/dist/components/tree-view.js +453 -0
- package/dist/components/tree-x-list-item.js +35 -23
- package/dist/components/tree-x.js +21 -7
- package/dist/esm/{ch-checkbox_4.entry.js → ch-checkbox_3.entry.js} +55 -43
- package/dist/esm/ch-suggest_4.entry.js +2 -2
- package/dist/esm/ch-test-suggest.entry.js +80 -0
- package/dist/esm/ch-test-tree-x.entry.js +32 -17
- package/dist/esm/ch-tooltip.entry.js +81 -0
- package/dist/esm/genexus-ide-ui.js +1 -1
- package/dist/esm/gx-ide-references.entry.js +76 -116
- package/dist/esm/gx-ide-test.entry.js +48 -2
- package/dist/esm/gxg-label_2.entry.js +15 -2
- package/dist/esm/gxg-tree-view.entry.js +37 -15
- package/dist/esm/loader.js +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
- package/dist/genexus-ide-ui/p-109209dc.entry.js +1 -0
- package/dist/genexus-ide-ui/p-123b8351.entry.js +1 -0
- package/dist/genexus-ide-ui/p-71c6da54.entry.js +1 -0
- package/dist/genexus-ide-ui/p-86b98a99.entry.js +1 -0
- package/dist/genexus-ide-ui/p-cd00ba19.entry.js +1 -0
- package/dist/genexus-ide-ui/p-ce9fef1a.entry.js +1 -0
- package/dist/genexus-ide-ui/p-d47ed4e3.entry.js +1 -0
- package/dist/genexus-ide-ui/p-d7b452ef.entry.js +1 -0
- package/dist/genexus-ide-ui/p-f62d9b6d.entry.js +1 -0
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/test/test-suggest/test-suggest.css +114 -0
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tooltip/tooltip.css +120 -0
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/{tree-x → tree-view/tree-x}/tree-x.css +2 -3
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/{tree-x-list-item → tree-view/tree-x-list-item}/tree-x-list-item.css +3 -6
- package/dist/node_modules/@genexus/gemini/dist/collection/components/tooltip/tooltip.css +11 -0
- package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-view/tree-view.css +58 -12
- package/dist/types/common/helpers.d.ts +1 -0
- package/dist/types/components/references/helpers.d.ts +3 -3
- package/dist/types/components/references/references.d.ts +7 -19
- package/package.json +3 -3
- package/dist/cjs/update-tree-model-8b154db1.js +0 -53
- package/dist/components/ch-tree-x-list.js +0 -6
- package/dist/components/tree-x-list.js +0 -31
- package/dist/components/update-tree-model.js +0 -50
- package/dist/esm/update-tree-model-6c612f05.js +0 -50
- package/dist/genexus-ide-ui/p-1f3a81e3.entry.js +0 -1
- package/dist/genexus-ide-ui/p-46d393f5.entry.js +0 -1
- package/dist/genexus-ide-ui/p-5669baf5.entry.js +0 -1
- package/dist/genexus-ide-ui/p-60b2bd2f.entry.js +0 -1
- package/dist/genexus-ide-ui/p-71ecc7fd.js +0 -1
- package/dist/genexus-ide-ui/p-c7425416.entry.js +0 -1
- package/dist/genexus-ide-ui/p-dd2e0590.entry.js +0 -1
- package/dist/genexus-ide-ui/p-ed5cf480.entry.js +0 -1
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-x-list/tree-x-list.css +0 -6
|
@@ -3,7 +3,53 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-5a32426a.js');
|
|
6
|
-
|
|
6
|
+
|
|
7
|
+
/* eslint-disable @typescript-eslint/no-use-before-define */
|
|
8
|
+
const renderTreeItems = (treeItemsModel, firstCall = true) => {
|
|
9
|
+
if (treeItemsModel === null || treeItemsModel === void 0 ? void 0 : treeItemsModel.length) {
|
|
10
|
+
if (firstCall) {
|
|
11
|
+
return treeItemsModel.map((item) => {
|
|
12
|
+
return renderTreeItem(item);
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
return (index.h("gxg-tree", { slot: "tree" }, treeItemsModel.map((item) => {
|
|
17
|
+
return renderTreeItem(item);
|
|
18
|
+
})));
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return [];
|
|
22
|
+
};
|
|
23
|
+
const renderTreeItem = (item) => {
|
|
24
|
+
var _a;
|
|
25
|
+
const childrenLength = item.items ? item.items.length : 0;
|
|
26
|
+
const isLeaf = !!(childrenLength === 0 || item.leaf);
|
|
27
|
+
const lazy = !!item.lazy;
|
|
28
|
+
return (index.h("gxg-tree-item", { checkbox: item.checkbox, checked: item.checked, description: item.description, disabled: item.disabled, icon: item.icon, indeterminate: item.indeterminate, id: item.id, key: `tree-item-${item.id}`, label: item.label, leaf: isLeaf && !lazy, numberOfChildren: childrenLength, opened: item.opened, selected: item.selected }, [item.label, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) && renderTreeItems(item.items, false)]));
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const updateNodeById = (actualModel, nodeUpdatedState, updatedNodeId) => {
|
|
32
|
+
return actualModel.map(nodeActualState => {
|
|
33
|
+
if (nodeActualState.id === updatedNodeId) {
|
|
34
|
+
return Object.assign(Object.assign({}, nodeActualState), nodeUpdatedState);
|
|
35
|
+
}
|
|
36
|
+
else if (nodeActualState.items) {
|
|
37
|
+
return Object.assign(Object.assign({}, nodeActualState), { items: updateNodeById(nodeActualState.items, nodeUpdatedState, updatedNodeId) });
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
return nodeActualState;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
const updateTreeModel = (actualModel, updatedNodeModel, updatedNodeId) => {
|
|
45
|
+
if (actualModel.length && updatedNodeModel && updatedNodeId) {
|
|
46
|
+
return updateNodeById(actualModel, updatedNodeModel, updatedNodeId);
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
/* If no newItemModel was passed, at least return the actualModel, to avoid having an updated empty tree */
|
|
50
|
+
return actualModel;
|
|
51
|
+
}
|
|
52
|
+
};
|
|
7
53
|
|
|
8
54
|
const testCss = ":host{display:block}";
|
|
9
55
|
|
|
@@ -51,7 +97,7 @@ const GxIdeTest = class {
|
|
|
51
97
|
if (nodeData.lazy) {
|
|
52
98
|
this.updateLazyCallback(nodeId).then(children => {
|
|
53
99
|
if (children === null || children === void 0 ? void 0 : children.length) {
|
|
54
|
-
const updatedTreeModel = updateTreeModel
|
|
100
|
+
const updatedTreeModel = updateTreeModel(this.treeModel, { id: nodeId, label: nodeData.label, items: children }, nodeId);
|
|
55
101
|
this.treeModel = updatedTreeModel;
|
|
56
102
|
}
|
|
57
103
|
});
|
|
@@ -79,16 +125,16 @@ const GxIdeTest = class {
|
|
|
79
125
|
}
|
|
80
126
|
}
|
|
81
127
|
treeItemStateChanged(event) {
|
|
82
|
-
const updatedTreeModel = updateTreeModel
|
|
128
|
+
const updatedTreeModel = updateTreeModel(this.treeModel, event.detail, event.detail.id);
|
|
83
129
|
console.log("updatedTreeModel", updatedTreeModel);
|
|
84
130
|
}
|
|
85
131
|
// 10.RENDER() FUNCTION //
|
|
86
132
|
render() {
|
|
87
133
|
if (!this.testUpdateNode && this.treeModel) {
|
|
88
|
-
return (index.h(index.Host, null, index.h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el) },
|
|
134
|
+
return (index.h(index.Host, null, index.h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el) }, renderTreeItems(this.treeModel)), ",", index.h("div", { class: "tree-buttons" }, index.h("gxg-button", { type: "outlined", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), index.h("gxg-button", { type: "outlined", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), index.h("gxg-button", { type: "outlined", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), index.h("gxg-button", { type: "outlined", onClick: this.getSelectedItemsHandler }, "Get Selected Items"), index.h("gxg-button", { type: "outlined", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), index.h("gxg-button", { type: "outlined", onClick: this.deleteNodeHandler }, "Delete Tree"))));
|
|
89
135
|
}
|
|
90
136
|
else if (this.testUpdateNode) {
|
|
91
|
-
return (index.h(index.Host, null, index.h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el), onTreeItemStateChanged: this.treeItemStateChangedHandler },
|
|
137
|
+
return (index.h(index.Host, null, index.h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el), onTreeItemStateChanged: this.treeItemStateChangedHandler }, renderTreeItems(this.treeModel))));
|
|
92
138
|
}
|
|
93
139
|
else {
|
|
94
140
|
return index.h("slot", null);
|
|
@@ -53,7 +53,7 @@ const GxgLabel = class {
|
|
|
53
53
|
};
|
|
54
54
|
GxgLabel.style = gxgLabelCss;
|
|
55
55
|
|
|
56
|
-
const tooltipCss = "/*! 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:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:inline-flex}:host .tooltip{cursor:pointer;position:relative;border-bottom:1px dotted var(--color-on-secondary);text-decoration:none}:host .tooltip .tooltiptext{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-size:var(--font-size-xs);visibility:hidden;opacity:0;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;position:absolute;z-index:1;width:250px;text-align:center}:host .tooltip .tooltiptext__content{width:fit-content;background-color:var(--gray-07);padding:var(--spacing-comp-01) var(--spacing-comp-02);border-radius:var(--border-width-md);color:var(--color-on-primary);display:inline-block;text-align:left}:host .tooltip .tooltiptext:after{content:\"\";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:5px solid var(--gray-07);position:absolute}:host .tooltip:hover .tooltiptext{visibility:visible;opacity:1}:host([position=top]) .tooltip .tooltiptext{bottom:27px;left:50%;transform:translateX(-50%)}:host([position=top]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%) rotate(180deg);bottom:-4px}:host([position=right]) .tooltip .tooltiptext{top:0;left:111%;text-align:left}:host([position=right]) .tooltip .tooltiptext:after{left:-7px;transform:rotate(-90deg);top:8px}:host([position=bottom]) .tooltip .tooltiptext{top:25px;left:50%;transform:translateX(-50%)}:host([position=bottom]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%);top:-4px}:host([position=left]) .tooltip .tooltiptext{text-align:right;top:0;right:105%}:host([position=left]) .tooltip .tooltiptext:after{right:-7px;transform:rotate(90deg);top:8px}:host([width-auto]) .tooltip .tooltiptext{width:auto;white-space:nowrap}:host([no-border]) .tooltip{border-bottom:none}:host([align-end]) .tooltiptext{transform:none !important;inset-inline-end:0;left:auto !important;max-width:180px;width:max-content}:host([align-end]) .tooltiptext:after{inset-inline-end:-1px;left:auto !important}:host([flex]){display:flex}:host([flex]) .tooltip{display:flex}:host([fixed]) .tooltip .tooltiptext{position:fixed;height:0}:host([fixed]) .tooltip .tooltiptext__content{transform:translateY(calc(-100% - 5px))}:host([fixed]) .tooltip .tooltiptext__content:after{content:\"\";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:5px solid var(--gray-07);position:absolute;right:0;transform:translateX(-3px) rotate(180deg);bottom:-3px}:host([fixed]) .tooltip .tooltiptext:after{display:none}";
|
|
56
|
+
const tooltipCss = "/*! 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:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:inline-flex}:host .tooltip{cursor:pointer;position:relative;border-bottom:1px dotted var(--color-on-secondary);text-decoration:none}:host .tooltip .tooltiptext{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-size:var(--font-size-xs);visibility:hidden;opacity:0;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;position:absolute;z-index:1;width:250px;text-align:center}:host .tooltip .tooltiptext__content{width:fit-content;background-color:var(--gray-07);padding:var(--spacing-comp-01) var(--spacing-comp-02);border-radius:var(--border-width-md);color:var(--color-on-primary);display:inline-block;text-align:left}:host .tooltip .tooltiptext:after{content:\"\";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:5px solid var(--gray-07);position:absolute}:host .tooltip:hover .tooltiptext{visibility:visible;opacity:1}:host([position=top]) .tooltip .tooltiptext{bottom:27px;left:50%;transform:translateX(-50%)}:host([position=top]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%) rotate(180deg);bottom:-4px}:host([position=right]) .tooltip .tooltiptext{top:0;left:111%;text-align:left}:host([position=right]) .tooltip .tooltiptext:after{left:-7px;transform:rotate(-90deg);top:8px}:host([position=bottom]) .tooltip .tooltiptext{top:25px;left:50%;transform:translateX(-50%)}:host([position=bottom]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%);top:-4px}:host([position=left]) .tooltip .tooltiptext{text-align:right;top:0;right:105%}:host([position=left]) .tooltip .tooltiptext:after{right:-7px;transform:rotate(90deg);top:8px}:host([width-auto]) .tooltip .tooltiptext{width:auto;white-space:nowrap}:host([no-border]) .tooltip{border-bottom:none}:host([align-end]) .tooltiptext{transform:none !important;inset-inline-end:0;left:auto !important;max-width:180px;width:max-content}:host([align-end]) .tooltiptext:after{inset-inline-end:-1px;left:auto !important}:host([flex]){display:flex}:host([flex]) .tooltip{display:flex}:host([fixed]){border:1px solid black}:host([fixed]) .tooltip:hover .tooltiptext{visibility:hidden;opacity:0}:host([fixed]) .tooltip .tooltiptext{position:fixed;height:0}:host([fixed]) .tooltip .tooltiptext__content{transform:translateY(calc(-100% - 5px))}:host([fixed]) .tooltip .tooltiptext__content:after{content:\"\";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:5px solid var(--gray-07);position:absolute;right:0;transform:translateX(-3px) rotate(180deg);bottom:-3px}:host([fixed]) .tooltip .tooltiptext:after{display:none}:host([fixed]) .tooltip--visible .tooltiptext{visibility:visible !important;opacity:1 !important}";
|
|
57
57
|
|
|
58
58
|
const GxgTooltip = class {
|
|
59
59
|
constructor(hostRef) {
|
|
@@ -78,21 +78,34 @@ const GxgTooltip = class {
|
|
|
78
78
|
* This presence of this property removes the border under the text
|
|
79
79
|
*/
|
|
80
80
|
this.noBorder = false;
|
|
81
|
+
/**
|
|
82
|
+
* Used to show/hide the tooltip (only used if 'fixed' is true) otherwise, it will show on hover.
|
|
83
|
+
*/
|
|
84
|
+
this.visible = false;
|
|
81
85
|
this.mouseEnterHandler = () => {
|
|
82
86
|
const tooltipBC = this.el.getBoundingClientRect();
|
|
83
87
|
const top = tooltipBC.top;
|
|
84
88
|
const rightPosition = window.innerWidth - tooltipBC.right;
|
|
85
89
|
this.tooltipTextEl.style.top = `${top}px`;
|
|
86
90
|
this.tooltipTextEl.style.right = `${rightPosition}px`;
|
|
91
|
+
this.visible = true;
|
|
92
|
+
};
|
|
93
|
+
this.mouseLeaveHandler = () => {
|
|
94
|
+
this.visible = false;
|
|
95
|
+
};
|
|
96
|
+
this.documentScrollHandler = () => {
|
|
97
|
+
this.visible = false;
|
|
87
98
|
};
|
|
88
99
|
}
|
|
89
100
|
componentWillLoad() {
|
|
90
101
|
if (this.fixed) {
|
|
91
102
|
this.el.addEventListener("mouseenter", this.mouseEnterHandler);
|
|
103
|
+
this.el.addEventListener("mouseleave", this.mouseLeaveHandler);
|
|
104
|
+
document.addEventListener("scroll", this.documentScrollHandler);
|
|
92
105
|
}
|
|
93
106
|
}
|
|
94
107
|
render() {
|
|
95
|
-
return (index.h(index.Host, { role: "tooltip" }, index.h("span", { class: "tooltip" }, index.h("slot", null), index.h("div", { class: "tooltiptext", ref: (el) => (this.tooltipTextEl = el) }, index.h("span", { class: "tooltiptext__content" }, this.label)))));
|
|
108
|
+
return (index.h(index.Host, { role: "tooltip" }, index.h("span", { class: { tooltip: true, "tooltip--visible": this.visible } }, index.h("slot", null), index.h("div", { class: "tooltiptext", ref: (el) => (this.tooltipTextEl = el) }, index.h("span", { class: "tooltiptext__content" }, this.label)))));
|
|
96
109
|
}
|
|
97
110
|
get el() { return index.getElement(this); }
|
|
98
111
|
};
|
|
@@ -4,21 +4,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-5a32426a.js');
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const resolveImgPath = (img) => `/build/icon-assets/${img}.svg`;
|
|
8
|
+
|
|
9
|
+
const treeViewCss = ":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:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}gxg-tree-view{font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-regular);color:var(--color-on-background);display:contents}ch-tree-x{}ch-tree-x::-webkit-scrollbar{width:6px;height:6px}ch-tree-x::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-tree-x::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-tree-x::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-tree-x>div.ch-tree-x-container{position:relative;width:100%}ch-tree-x-list-item{--expandable-button-width:var(--spacing-comp-04)}ch-tree-x-list-item.tree-view-item--folder::part(action)::before,ch-tree-x-list-item.tree-view-item--module::part(action)::before{grid-area:left-img;content:\"\";width:14px;height:14px;margin-inline-end:4px;background-repeat:no-repeat}ch-tree-x-list-item.tree-view-item--folder::part(action)::before{background-image:url(\"/build/icon-assets/objects/folder.svg\")}ch-tree-x-list-item.tree-view-item--folder::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/folder-open.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action)::before{background-image:url(\"/build/icon-assets/objects/module.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/module-open.svg\")}ch-tree-x-list-item .tree-view-item--pending-commit::part(action)::before{content:\"\";position:relative;z-index:1;grid-area:left-img;width:5px;height:5px;align-self:end;margin-block-end:3px;margin-inline-start:1px;background-color:#2c3b92;border-radius:50%}ch-tree-x-list-item::part(header){padding-inline-end:calc(var(--spacing-comp-02) * 0.65);border:1px solid transparent;height:var(--spacing-comp-05)}ch-tree-x-list-item::part(header):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-tree-x-list-item[selected]::part(header){background-color:var(--gxg-background-color--selected)}ch-tree-x-list-item[selected]::part(header):hover{background-color:var(--gxg-background-color--selected-hover)}ch-tree-x-list-item::part(expandable-button){background-color:var(--color-hover);margin-inline-start:var(--spacing-comp-01)}ch-tree-x-list-item::part(expandable-button)::before{background-color:var(--gray-04);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}ch-tree-x-list-item::part(expandable-button):hover{background-color:var(--color-background)}ch-tree-x-list-item::part(expandable-button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:0}ch-tree-x-list-item::part(action){text-transform:capitalize}ch-tree-x-list-item::part(left-img){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}ch-tree-x-list-item::part(downloading){width:var(--spacing-comp-03);height:var(--spacing-comp-03);border:var(--border-width-md) solid var(--color-primary-enabled);border-inline-start-color:transparent}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
|
|
8
10
|
|
|
9
11
|
const DEFAULT_DRAG_DISABLED_VALUE = false;
|
|
10
12
|
const DEFAULT_DROP_DISABLED_VALUE = false;
|
|
13
|
+
const DEFAULT_CLASS_VALUE = "tree-view-item";
|
|
14
|
+
const DEFAULT_EDITABLE_ITEMS_VALUE = true;
|
|
11
15
|
const DEFAULT_EXPANDED_VALUE = false;
|
|
12
16
|
const DEFAULT_INDETERMINATE_VALUE = false;
|
|
13
17
|
const DEFAULT_LAZY_VALUE = false;
|
|
18
|
+
const DEFAULT_ORDER_VALUE = 0;
|
|
14
19
|
const DEFAULT_SELECTED_VALUE = false;
|
|
15
20
|
const GxgTreeView = class {
|
|
16
21
|
constructor(hostRef) {
|
|
17
22
|
index.registerInstance(this, hostRef);
|
|
23
|
+
this.itemContextmenu = index.createEvent(this, "itemContextmenu", 7);
|
|
24
|
+
this.itemOpenReference = index.createEvent(this, "itemOpenReference", 7);
|
|
25
|
+
this.selectedItemsChange = index.createEvent(this, "selectedItemsChange", 7);
|
|
18
26
|
// UI Models
|
|
19
27
|
this.flattenedTreeModel = new Map();
|
|
20
28
|
this.selectedItems = new Set();
|
|
21
|
-
this.flattenedLazyTreeModel = new Map();
|
|
22
29
|
/**
|
|
23
30
|
* This property lets you specify if the tree is waiting to process the drop
|
|
24
31
|
* of items.
|
|
@@ -26,12 +33,12 @@ const GxgTreeView = class {
|
|
|
26
33
|
this.waitDropProcessing = false;
|
|
27
34
|
/**
|
|
28
35
|
* This attribute lets you specify if the drag operation is disabled in all
|
|
29
|
-
* items by default. If `true`, the
|
|
36
|
+
* items by default. If `true`, the items can't be dragged.
|
|
30
37
|
*/
|
|
31
38
|
this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
|
|
32
39
|
/**
|
|
33
40
|
* This attribute lets you specify if the drop operation is disabled in all
|
|
34
|
-
* items by default. If `true`, the
|
|
41
|
+
* items by default. If `true`, the items won't accept any drops.
|
|
35
42
|
*/
|
|
36
43
|
this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
|
|
37
44
|
/**
|
|
@@ -42,6 +49,11 @@ const GxgTreeView = class {
|
|
|
42
49
|
* Set this attribute if you want to allow multi selection of the items.
|
|
43
50
|
*/
|
|
44
51
|
this.multiSelection = false;
|
|
52
|
+
/**
|
|
53
|
+
* This attribute lets you specify if the edit operation is enabled in all
|
|
54
|
+
* items by default. If `true`, the items can edit its caption in place.
|
|
55
|
+
*/
|
|
56
|
+
this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
|
|
45
57
|
/**
|
|
46
58
|
* `true` to display the relation between tree items and tree lists using
|
|
47
59
|
* lines.
|
|
@@ -61,6 +73,7 @@ const GxgTreeView = class {
|
|
|
61
73
|
});
|
|
62
74
|
};
|
|
63
75
|
this.handleSelectedItemsChange = (event) => {
|
|
76
|
+
event.stopPropagation();
|
|
64
77
|
const itemsToProcess = new Map(event.detail);
|
|
65
78
|
// Remove no longer selected items
|
|
66
79
|
this.selectedItems.forEach((selectedItemId) => {
|
|
@@ -84,12 +97,17 @@ const GxgTreeView = class {
|
|
|
84
97
|
newSelectedItem.expanded = newSelectedItemInfo.expanded;
|
|
85
98
|
this.selectedItems.add(itemId);
|
|
86
99
|
});
|
|
100
|
+
this.selectedItemsChange.emit(event.detail);
|
|
87
101
|
};
|
|
88
102
|
this.handleExpandedItemChange = (event) => {
|
|
89
103
|
const detail = event.detail;
|
|
90
104
|
const itemInfo = this.flattenedTreeModel.get(detail.id).item;
|
|
91
105
|
itemInfo.expanded = detail.expanded;
|
|
92
106
|
};
|
|
107
|
+
this.handleItemContextmenu = (event) => {
|
|
108
|
+
event.stopPropagation();
|
|
109
|
+
this.itemContextmenu.emit(event.detail);
|
|
110
|
+
};
|
|
93
111
|
this.handleItemsDropped = (event) => {
|
|
94
112
|
if (!this.dropItemsCallback) {
|
|
95
113
|
return;
|
|
@@ -154,10 +172,10 @@ const GxgTreeView = class {
|
|
|
154
172
|
itemUIModelExtended.parentItem = newParentUIModel;
|
|
155
173
|
};
|
|
156
174
|
this.renderSubModel = (treeSubModel, lastItem, level) => {
|
|
157
|
-
var _a, _b;
|
|
158
|
-
return (index.h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
|
|
175
|
+
var _a, _b, _c;
|
|
176
|
+
return (index.h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, editable: (_c = treeSubModel.editable) !== null && _c !== void 0 ? _c : this.editableItems, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
|
|
159
177
|
treeSubModel.items != null &&
|
|
160
|
-
treeSubModel.items.
|
|
178
|
+
treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
|
|
161
179
|
};
|
|
162
180
|
this.flattenItemUIModel = (parentModel) => (item) => {
|
|
163
181
|
this.flattenedTreeModel.set(item.id, {
|
|
@@ -166,6 +184,7 @@ const GxgTreeView = class {
|
|
|
166
184
|
});
|
|
167
185
|
// Make sure the properties are with their default values to avoid issues
|
|
168
186
|
// when reusing DOM nodes
|
|
187
|
+
item.class = item.class == null ? DEFAULT_CLASS_VALUE : item.class;
|
|
169
188
|
item.expanded =
|
|
170
189
|
item.expanded == null ? DEFAULT_EXPANDED_VALUE : item.expanded;
|
|
171
190
|
item.indeterminate =
|
|
@@ -173,10 +192,11 @@ const GxgTreeView = class {
|
|
|
173
192
|
? DEFAULT_INDETERMINATE_VALUE
|
|
174
193
|
: item.indeterminate;
|
|
175
194
|
item.lazy = item.lazy == null ? DEFAULT_LAZY_VALUE : item.lazy;
|
|
195
|
+
item.order = item.order == null ? DEFAULT_ORDER_VALUE : item.order;
|
|
176
196
|
item.selected =
|
|
177
197
|
item.selected == null ? DEFAULT_SELECTED_VALUE : item.selected;
|
|
178
|
-
if (item.
|
|
179
|
-
|
|
198
|
+
if (item.leftImgSrc) {
|
|
199
|
+
item.leftImgSrc = resolveImgPath(item.leftImgSrc);
|
|
180
200
|
}
|
|
181
201
|
if (item.selected) {
|
|
182
202
|
this.selectedItems.add(item.id);
|
|
@@ -192,9 +212,8 @@ const GxgTreeView = class {
|
|
|
192
212
|
* lazy state, updates the item's UI Model.
|
|
193
213
|
*/
|
|
194
214
|
async loadLazyContent(itemId, items, downloading = false, lazy = false) {
|
|
195
|
-
const itemToLazyLoadContent = this.
|
|
215
|
+
const itemToLazyLoadContent = this.flattenedTreeModel.get(itemId).item;
|
|
196
216
|
// Establish that the content was lazy loaded
|
|
197
|
-
this.flattenedLazyTreeModel.delete(itemId);
|
|
198
217
|
itemToLazyLoadContent.downloading = downloading;
|
|
199
218
|
itemToLazyLoadContent.lazy = lazy;
|
|
200
219
|
// Check if there is items to add
|
|
@@ -345,11 +364,15 @@ const GxgTreeView = class {
|
|
|
345
364
|
}
|
|
346
365
|
});
|
|
347
366
|
}
|
|
367
|
+
handleOpenReference(event) {
|
|
368
|
+
event.stopPropagation();
|
|
369
|
+
this.itemOpenReference.emit(event.detail);
|
|
370
|
+
}
|
|
348
371
|
flattenSubModel(model) {
|
|
349
372
|
const items = model.items;
|
|
350
373
|
if (!items) {
|
|
351
374
|
// Make sure that subtrees don't have an undefined array
|
|
352
|
-
if (model.leaf
|
|
375
|
+
if (model.leaf !== true) {
|
|
353
376
|
model.items = [];
|
|
354
377
|
}
|
|
355
378
|
return;
|
|
@@ -365,14 +388,13 @@ const GxgTreeView = class {
|
|
|
365
388
|
}
|
|
366
389
|
flattenModel() {
|
|
367
390
|
this.flattenedTreeModel.clear();
|
|
368
|
-
this.flattenedLazyTreeModel.clear();
|
|
369
391
|
this.flattenSubModel({ id: null, caption: null, items: this.treeModel });
|
|
370
392
|
}
|
|
371
393
|
componentWillLoad() {
|
|
372
394
|
this.flattenModel();
|
|
373
395
|
}
|
|
374
396
|
render() {
|
|
375
|
-
return (index.h(
|
|
397
|
+
return (index.h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: (el) => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0))));
|
|
376
398
|
}
|
|
377
399
|
static get watchers() { return {
|
|
378
400
|
"treeModel": ["handleTreeModelChange"]
|