@genexus/genexus-ide-ui 0.0.37 → 0.0.39
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-alert.cjs.entry.js +120 -0
- package/dist/cjs/ch-grid_8.cjs.entry.js +1 -1
- package/dist/cjs/ch-suggest_4.cjs.entry.js +46 -11
- package/dist/cjs/ch-timer.cjs.entry.js +45 -0
- package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
- package/dist/cjs/gx-ide-entity-selector.cjs.entry.js +87 -0
- package/dist/cjs/gx-ide-new-environment.cjs.entry.js +3 -2
- package/dist/cjs/gx-ide-new-object.cjs.entry.js +169 -0
- package/dist/cjs/gx-ide-references.cjs.entry.js +15 -35
- package/dist/cjs/gx-ide-team-dev-select-recent-comment.cjs.entry.js +5 -7
- package/dist/cjs/{gx-ide-entity-selector_2.cjs.entry.js → gxg-date-picker.cjs.entry.js} +0 -81
- package/dist/cjs/gxg-list-box_2.cjs.entry.js +35 -12
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/common/render-suggest.js +4 -1
- package/dist/collection/components/new-environment/new-environment.js +24 -3
- package/dist/collection/components/new-object/gx-ide-assets/new-object/langs/new-object.lang.en.json +13 -0
- package/dist/collection/components/new-object/gx-ide-assets/new-object/langs/new-object.lang.ja.json +11 -0
- package/dist/collection/components/new-object/gx-ide-assets/new-object/langs/new-object.lang.zh.json +11 -0
- package/dist/collection/components/new-object/new-object.css +143 -0
- package/dist/collection/components/new-object/new-object.js +404 -0
- package/dist/collection/components/references/helpers.js +0 -22
- package/dist/collection/components/references/references.js +12 -13
- package/dist/collection/components/team-dev-select-recent-comment/team-dev-select-recent-comment.js +5 -8
- package/dist/components/ch-alert.js +150 -0
- package/dist/components/ch-suggest-list-item2.js +41 -4
- package/dist/components/ch-suggest2.js +5 -9
- package/dist/components/ch-timer.js +6 -0
- package/dist/components/gx-ide-new-environment.js +4 -2
- package/dist/components/gx-ide-new-object.d.ts +11 -0
- package/dist/components/gx-ide-new-object.js +269 -0
- package/dist/components/gx-ide-references.js +15 -35
- package/dist/components/gx-ide-team-dev-select-recent-comment.js +5 -7
- package/dist/components/gxg-grid2.js +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +3 -0
- package/dist/components/list-box-item.js +18 -3
- package/dist/components/list-box.js +17 -9
- package/dist/components/timer.js +61 -0
- package/dist/esm/ch-alert.entry.js +116 -0
- package/dist/esm/ch-grid_8.entry.js +1 -1
- package/dist/esm/ch-suggest_4.entry.js +46 -11
- package/dist/esm/ch-timer.entry.js +41 -0
- package/dist/esm/genexus-ide-ui.js +1 -1
- package/dist/esm/gx-ide-entity-selector.entry.js +83 -0
- package/dist/esm/gx-ide-new-environment.entry.js +3 -2
- package/dist/esm/gx-ide-new-object.entry.js +165 -0
- package/dist/esm/gx-ide-references.entry.js +15 -35
- package/dist/esm/gx-ide-team-dev-select-recent-comment.entry.js +5 -7
- package/dist/esm/{gx-ide-entity-selector_2.entry.js → gxg-date-picker.entry.js} +1 -81
- package/dist/esm/gxg-list-box_2.entry.js +35 -12
- package/dist/esm/loader.js +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
- package/dist/genexus-ide-ui/gx-ide-assets/new-object/langs/new-object.lang.en.json +13 -0
- package/dist/genexus-ide-ui/gx-ide-assets/new-object/langs/new-object.lang.ja.json +11 -0
- package/dist/genexus-ide-ui/gx-ide-assets/new-object/langs/new-object.lang.zh.json +11 -0
- package/dist/genexus-ide-ui/p-04df38d0.entry.js +1 -0
- package/dist/genexus-ide-ui/p-1e055306.entry.js +1 -0
- package/dist/genexus-ide-ui/p-48412811.entry.js +1 -0
- package/dist/genexus-ide-ui/p-4f02b7bf.entry.js +1 -0
- package/dist/genexus-ide-ui/p-5fe59458.entry.js +1 -0
- package/dist/genexus-ide-ui/p-7285d245.entry.js +1 -0
- package/dist/genexus-ide-ui/p-79c7132c.entry.js +1 -0
- package/dist/genexus-ide-ui/p-9be97571.entry.js +1 -0
- package/dist/genexus-ide-ui/p-a82042ee.entry.js +1 -0
- package/dist/genexus-ide-ui/p-db4f2732.entry.js +1 -0
- package/dist/genexus-ide-ui/{p-3bdcb73b.entry.js → p-e69f497d.entry.js} +1 -1
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/alert/alert.css +46 -0
- package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/alert/timer/timer.css +13 -0
- package/dist/node_modules/@genexus/gemini/dist/collection/components/grid/gxg-grid.css +24 -1
- package/dist/node_modules/@genexus/gemini/dist/collection/components/list-box-item/list-box-item.css +13 -5
- package/dist/types/common/render-suggest.d.ts +1 -1
- package/dist/types/components/new-environment/new-environment.d.ts +5 -1
- package/dist/types/components/new-object/new-object.d.ts +108 -0
- package/dist/types/components/references/helpers.d.ts +1 -6
- package/dist/types/components/references/references.d.ts +6 -6
- package/dist/types/components/team-dev-select-recent-comment/team-dev-select-recent-comment.d.ts +1 -1
- package/dist/types/components.d.ts +110 -4
- package/package.json +3 -3
- package/dist/genexus-ide-ui/p-06ddf2a3.entry.js +0 -1
- package/dist/genexus-ide-ui/p-35864ae2.entry.js +0 -1
- package/dist/genexus-ide-ui/p-35bc6e3a.entry.js +0 -1
- package/dist/genexus-ide-ui/p-4aa2885b.entry.js +0 -1
- package/dist/genexus-ide-ui/p-714bd8ea.entry.js +0 -1
- package/dist/genexus-ide-ui/p-74a88934.entry.js +0 -1
|
@@ -31,7 +31,10 @@ const renderSuggestLists = (suggestData) => {
|
|
|
31
31
|
return [];
|
|
32
32
|
};
|
|
33
33
|
const renderSuggestListsItem = (suggestItem) => {
|
|
34
|
-
return (h("ch-suggest-list-item", {
|
|
34
|
+
return (h("ch-suggest-list-item", { value: suggestItem.value }, [
|
|
35
|
+
suggestItem.description || suggestItem.value,
|
|
36
|
+
suggestItem.icon && renderIcon(suggestItem.icon)
|
|
37
|
+
]));
|
|
35
38
|
};
|
|
36
39
|
const renderIcon = (iconName) => {
|
|
37
40
|
return h("gxg-icon", { color: "auto", type: iconName, slot: "icon" });
|
|
@@ -54,7 +57,6 @@ const convertObjectDataToSuggestData = (selectorCategoriesData) => {
|
|
|
54
57
|
selectorCategory.items.forEach((objectData) => {
|
|
55
58
|
const suggestItem = {
|
|
56
59
|
value: objectData.id,
|
|
57
|
-
caption: objectData.name,
|
|
58
60
|
description: objectData.description,
|
|
59
61
|
icon: objectData.icon
|
|
60
62
|
};
|
|
@@ -65,27 +67,6 @@ const convertObjectDataToSuggestData = (selectorCategoriesData) => {
|
|
|
65
67
|
}
|
|
66
68
|
return suggestData;
|
|
67
69
|
};
|
|
68
|
-
/**
|
|
69
|
-
* @description Keeps an updated state of the last suggested categories objects passed by the host.
|
|
70
|
-
*/
|
|
71
|
-
const updateSuggestedObjects = (selectorCategoryData) => {
|
|
72
|
-
const suggestedObjects = [];
|
|
73
|
-
if (selectorCategoryData === null || selectorCategoryData === void 0 ? void 0 : selectorCategoryData.length) {
|
|
74
|
-
selectorCategoryData.forEach(category => {
|
|
75
|
-
if (category.items) {
|
|
76
|
-
category.items.forEach(object => {
|
|
77
|
-
suggestedObjects.push({
|
|
78
|
-
id: object.id,
|
|
79
|
-
icon: object.icon,
|
|
80
|
-
name: object.name,
|
|
81
|
-
description: object.description
|
|
82
|
-
});
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
return suggestedObjects;
|
|
88
|
-
};
|
|
89
70
|
/**
|
|
90
71
|
* @description This function converts ReferenceData[] data to GxgTreeItemData[]
|
|
91
72
|
*/
|
|
@@ -122,14 +103,14 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
|
|
|
122
103
|
this.__registerHost();
|
|
123
104
|
this.__attachShadow();
|
|
124
105
|
this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
|
|
125
|
-
/**
|
|
126
|
-
* Keeps an array of the last suggested objects, returned by selectorSourceCallback
|
|
127
|
-
*/
|
|
128
|
-
this.suggestedObjects = [];
|
|
129
106
|
/**
|
|
130
107
|
* The references messages max. width that appear if the tree is empty or could not be retrieved.
|
|
131
108
|
*/
|
|
132
109
|
this.referencesMessagesMaxWidth = "200px";
|
|
110
|
+
/**
|
|
111
|
+
* The last SelectorCategoryData[] returned by selectorSourceCallback
|
|
112
|
+
*/
|
|
113
|
+
this.selectorCategoryData = [];
|
|
133
114
|
// 7.LISTENERS //
|
|
134
115
|
// 8.PUBLIC METHODS API //
|
|
135
116
|
// 9.LOCAL METHODS //
|
|
@@ -138,21 +119,20 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
|
|
|
138
119
|
*/
|
|
139
120
|
this.attachSelectObjectListener = () => {
|
|
140
121
|
this.selectObjectSuggestEl.addEventListener("itemSelected", (e) => {
|
|
141
|
-
const
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
122
|
+
const categoryIndex = e.detail.indexes.listIndex;
|
|
123
|
+
const itemIndex = e.detail.indexes.itemIndex;
|
|
124
|
+
this.selectedObject =
|
|
125
|
+
this.selectorCategoryData[categoryIndex].items[itemIndex];
|
|
145
126
|
});
|
|
146
127
|
};
|
|
147
128
|
/**
|
|
148
|
-
* This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
|
|
129
|
+
* This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
|
|
149
130
|
*/
|
|
150
131
|
this.selectObjectValueChangedHandler = async (e) => {
|
|
151
132
|
const value = e.detail;
|
|
152
133
|
this.selectorSourceCallback(value)
|
|
153
134
|
.then(result => {
|
|
154
|
-
|
|
155
|
-
this.suggestedObjects = updateSuggestedObjects(result);
|
|
135
|
+
this.selectorCategoryData = result;
|
|
156
136
|
/* show suggestions*/
|
|
157
137
|
this.objectsSuggestions = convertObjectDataToSuggestData(result);
|
|
158
138
|
})
|
|
@@ -319,7 +299,7 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
|
|
|
319
299
|
// 10.RENDER() FUNCTION //
|
|
320
300
|
render() {
|
|
321
301
|
var _a, _b, _c, _d, _e, _f;
|
|
322
|
-
return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.
|
|
302
|
+
return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
|
|
323
303
|
"header__bottom": true,
|
|
324
304
|
"header__bottom--hidden": this.barHidden
|
|
325
305
|
} }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, justifyContent: "center", fullHeight: true, part: "referenced-by-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length) }, checkbox: false, onTreeItemStateChanged: this.referencesPanelStateChangedHandler(false), part: "referenced-by-tree" }, renderTreeItems(this.referencedByTreeData)), !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "referenced-by-text" }, ((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) === 0
|
|
@@ -34,8 +34,10 @@ const GxIdeTeamDevSelectRecentComment$1 = /*@__PURE__*/ proxyCustomElement(class
|
|
|
34
34
|
}
|
|
35
35
|
return null;
|
|
36
36
|
};
|
|
37
|
-
this.
|
|
38
|
-
|
|
37
|
+
this.commentSelectionChangedHandler = (selectionEvent) => {
|
|
38
|
+
if (selectionEvent.detail.items.length > 0) {
|
|
39
|
+
this.selectedComment = selectionEvent.detail.items[0].value;
|
|
40
|
+
}
|
|
39
41
|
};
|
|
40
42
|
this.confirmCallbackHandle = async () => {
|
|
41
43
|
await this.confirmCallback(this.selectedComment);
|
|
@@ -54,11 +56,7 @@ const GxIdeTeamDevSelectRecentComment$1 = /*@__PURE__*/ proxyCustomElement(class
|
|
|
54
56
|
}
|
|
55
57
|
// 10.RENDER() FUNCTION //
|
|
56
58
|
render() {
|
|
57
|
-
return (h(Host, null, h("div", { class: `main-wrapper` }, h("gxg-container", { displayBorder: true }, h("gxg-list-box", { id: "max-height", singleSelection: true, height: "100%", required: true, "min-height": "50%", onSelectionChanged:
|
|
58
|
-
if (event.detail[0]) {
|
|
59
|
-
this.commentSelectedHandle(event.detail[0].value);
|
|
60
|
-
}
|
|
61
|
-
}, "no-border": true }, this.renderObjectItems(this.comments)), h("div", { slot: "footer", class: "action-buttons grid" }, h("gxg-button", { type: "primary-text-icon", onClick: this.confirmCallbackHandle }, this._componentLocale.confirmButton), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandle }, this._componentLocale.cancelButton))))));
|
|
59
|
+
return (h(Host, null, h("div", { class: `main-wrapper` }, h("gxg-container", { displayBorder: true }, h("gxg-list-box", { id: "max-height", singleSelection: true, height: "100%", required: true, "min-height": "50%", onSelectionChanged: this.commentSelectionChangedHandler, "no-border": true }, this.renderObjectItems(this.comments)), h("div", { slot: "footer", class: "action-buttons grid" }, h("gxg-button", { type: "primary-text-icon", onClick: this.confirmCallbackHandle }, this._componentLocale.confirmButton), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandle }, this._componentLocale.cancelButton))))));
|
|
62
60
|
}
|
|
63
61
|
static get assetsDirs() { return ["gx-ide-assets/team-dev-select-recent-comment"]; }
|
|
64
62
|
get el() { return this; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { s as state } from './store.js';
|
|
3
3
|
|
|
4
|
-
const gxgGridCss = ":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}:root{--indent:var(--spacing-comp-02)}:host{display:block}ch-grid{border:1px solid var(--gray-02);--focus-style:2px solid var(--color-primary-active)}ch-grid::part(main){}ch-grid::part(main)::-webkit-scrollbar{width:6px;height:6px}ch-grid::part(main)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}gxg-grid.no-border ch-grid{border:0}gxg-grid:focus-visible,ch-grid:focus-visible{outline:none}ch-grid::part(header),ch-grid::part(footer){padding:var(--spacing-comp-01);background-color:var(--color-background)}ch-grid-actionbar ch-grid-action-refresh,ch-grid-actionbar ch-grid-action-settings,ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending),ch-grid-column::part(bar-settings-button),ch-grid-column::part(settings-close),ch-grid::part(settings-close),ch-grid-cell::part(drag-icon),ch-grid-cell::part(caret),ch-grid-rowset-legend::part(caret){display:inline-flex;align-items:center;justify-content:center}ch-grid-actionbar ch-grid-action-refresh:before,ch-grid-actionbar ch-grid-action-settings:before,ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before,ch-grid-column::part(bar-settings-button):before,ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before,ch-grid-cell::part(drag-icon):before,ch-grid-cell::part(caret):before,ch-grid-rowset-legend::part(caret):before{content:\"\";display:block;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;width:70%;height:70%;background-color:var(--color-on-secondary)}ch-grid-action-refresh,ch-grid-action-settings{width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);display:inline-block}ch-grid-action-refresh:hover,ch-grid-action-settings:hover{background-color:var(--color-secondary-hover)}ch-grid-action-refresh:focus-visible,ch-grid-action-settings:focus-visible{outline:var(--focus-style)}ch-grid-action-refresh:before{-webkit-mask-image:var(--refreshIconUrl)}ch-grid-action-settings:before{-webkit-mask-image:var(--settingshIconUrl)}ch-grid{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--gray-06)}ch-grid-column{background-color:var(--color-background);font-weight:var(--font-weight-bold);padding:var(--spacing-comp-02) !important;cursor:pointer}ch-grid-column::part(bar){gap:var(--spacing-comp-02);width:100%}ch-grid-column:not([sort-direction])::part(bar-sort){display:none}ch-grid-column::part(bar-settings){line-height:0}ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending){width:var(--spacing-comp-03);height:var(--spacing-comp-03);margin-left:var(--spacing-comp-02);margin-right:var(--spacing-comp-01)}ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before{width:100%;height:100%;-webkit-mask-size:200%}ch-grid-column::part(bar-sort-descending):before{-webkit-mask-image:var(--barSortDescendingIconUrl)}ch-grid-column::part(bar-sort-ascending):before{-webkit-mask-image:var(--barSortAscendingIconUrl)}ch-grid-column::part(bar-resize-split){width:3px;background-color:var(--gray-02)}ch-grid-column:last-child::part(bar-resize-split){display:none}ch-grid-column::part(bar-settings-button){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);border:none;background-color:transparent;cursor:pointer}ch-grid-column::part(bar-settings-button):hover{background-color:var(--gray-02)}ch-grid-column::part(bar-settings-button):focus-visible{outline:var(--focus-style)}ch-grid-column::part(bar-settings-button):before{-webkit-mask-image:var(--barSettingsButtonIconUrl)}ch-grid-row{background-color:var(--color-background);color:var(--gray-04);border:2px solid transparent}ch-grid-row:nth-of-type(odd){background-color:var(--gray-00)}ch-grid-row[highlighted]{background-color:var(--color-hover)}ch-grid-row[dragging]{box-shadow:var(--box-shadow-03)}ch-grid-row[selected]>ch-grid-cell:not([selected]){background-color:var(--color-secondary-enabled)}ch-grid-cell[selected]{z-index:1;background-color:var(--color-secondary-enabled) !important}ch-grid-row[selected]>ch-grid-cell{color:var(--color-on-secondary)}ch-grid-row[selected]+ch-grid-row[selected] ch-grid-cell{border-top-color:var(--color-secondary-hover)}ch-grid-cell{box-sizing:border-box;padding-inline-start:var(--spacing-comp-02) !important;padding-inline-end:var(--spacing-comp-02) !important;padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01);align-items:center}ch-grid-column::part(settings-mask){cursor:default}ch-grid-column::part(settings-mask),ch-grid::part(settings-mask){background-color:rgba(0, 0, 0, 0.3);cursor:arrow;color:var(--color-on-secondary)}ch-grid-column::part(settings-window),ch-grid::part(settings-window){background-color:var(--color-background);width:100%;max-width:600px;padding:var(--spacing-comp-03);border-radius:var(--border-width-lg);box-shadow:var(--box-shadow-04)}ch-grid::part(settings-window){margin:0 var(--spacing-comp-05)}ch-grid-column::part(settings-header),ch-grid::part(settings-header){display:flex;align-items:center;gap:var(--spacing-comp-04);justify-content:space-between;border-bottom:var(--border-width-sm) solid var(--gray-02);padding-bottom:var(--spacing-comp-02);margin-bottom:var(--spacing-comp-03);font-weight:var(--font-weight-bold)}ch-grid-column::part(settings-close),ch-grid::part(settings-close){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);font-size:0;border:0}ch-grid-column::part(settings-close):hover,ch-grid::part(settings-close):hover{background-color:var(--color-secondary-hover)}ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before{-webkit-mask-image:var(--settingsCloseIconUrl)}ch-grid-column::part(settings-close):focus-visible,ch-grid::part(settings-close):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns){gap:var(--spacing-comp-03)}ch-grid::part(settings-columns-label){display:inline-flex;align-items:center;gap:var(--spacing-comp-03);cursor:pointer;height:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible),ch-grid-cell::part(selector),ch-grid-column::part(selector){position:relative;margin:0;height:var(--spacing-comp-04);width:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible):focus-visible,ch-grid-cell::part(selector):focus-visible,ch-grid-column::part(selector):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns-visible):before,ch-grid-cell::part(selector):before,ch-grid-column::part(selector):before{cursor:pointer;content:\"\";display:inline-block;position:relative;height:var(--spacing-comp-04);width:var(--spacing-comp-04);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:var(--border-radius-md);border-color:var(--gray-04);box-sizing:border-box;flex-shrink:0;background:var(--color-background)}ch-grid::part(settings-columns-visible):after,ch-grid-cell::part(selector):after,ch-grid-column::part(selector):after{opacity:0;display:block;position:absolute;content:\"\";left:6px;top:3px;width:3px;height:7px;border:solid;border-color:var(--color-primary-hover);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;cursor:pointer}ch-grid-column::part(indeterminate):after{opacity:1;display:block;position:absolute;content:\"\";left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--color-primary-hover);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}ch-grid::part(settings-columns-visible-checked):before,ch-grid-cell::part(checked):before,ch-grid-column::part(checked):before{border-color:var(--color-primary-hover)}ch-grid::part(settings-columns-visible-checked):after,ch-grid-cell::part(checked):after,ch-grid-column::part(checked):after{opacity:1}ch-grid-cell::part(drag-icon):before{width:var(--spacing-comp-04);height:var(--spacing-comp-04);cursor:grab}ch-grid-cell::part(drag-icon):before{-webkit-mask-image:var(--dragIconUrl)}ch-grid::part(row-actions){padding-top:2px;right:var(--spacing-comp-02)}ch-grid-column::part(selector){margin-right:8px}ch-grid-rowset-legend{background-color:var(--gray-01);padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-02);padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01)}ch-grid>ch-grid-rowset:first-of-type ch-grid-rowset-legend{border-top:1px solid var(--color-background)}ch-grid-rowset-legend{margin-inline-start:calc(var(--indent) * (var(--level) - 1));display:flex;align-items:center;gap:var(--spacing-comp-01);cursor:pointer}ch-grid-rowset-legend::part(caret),ch-grid-cell::part(caret){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}ch-grid-cell::part(caret){cursor:pointer;margin-right:var(--spacing-comp-01)}ch-grid-rowset>ch-grid-rowset-legend::part(caret):before,ch-grid-row>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretCollapseIconUrl)}ch-grid-rowset[collapsed]>ch-grid-rowset-legend::part(caret):before,ch-grid-row[collapsed]>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretExpandIconUrl)}ch-grid-rowset[collapsed] ch-grid-rowset-legend{border-bottom:1px solid var(--color-background)}ch-grid gxg-paginator{padding-top:0;padding-bottom:0}gxg-grid.large ch-grid{font-size:var(--font-size-lg)}";
|
|
4
|
+
const gxgGridCss = ":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}:root{--indent:var(--spacing-comp-02)}:host{display:block}gxg-grid{display:block}ch-grid{border:1px solid var(--gray-02);--focus-style:2px solid var(--color-primary-active)}ch-grid::part(main){}ch-grid::part(main)::-webkit-scrollbar{width:6px;height:6px}ch-grid::part(main)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}gxg-grid.no-border ch-grid{border:0}gxg-grid:focus-visible,ch-grid:focus-visible{outline:none}ch-grid::part(header),ch-grid::part(footer){background-color:var(--color-background)}ch-grid-actionbar ch-grid-action-refresh,ch-grid-actionbar ch-grid-action-settings,ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending),ch-grid-column::part(bar-settings-button),ch-grid-column::part(settings-close),ch-grid::part(settings-close),ch-grid-cell::part(drag-icon),ch-grid-cell::part(caret),ch-grid-rowset-legend::part(caret){display:inline-flex;align-items:center;justify-content:center}ch-grid-actionbar ch-grid-action-refresh:before,ch-grid-actionbar ch-grid-action-settings:before,ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before,ch-grid-column::part(bar-settings-button):before,ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before,ch-grid-cell::part(drag-icon):before,ch-grid-cell::part(caret):before,ch-grid-rowset-legend::part(caret):before{content:\"\";display:block;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;width:70%;height:70%;background-color:var(--color-on-secondary)}ch-grid-action-refresh,ch-grid-action-settings{width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);display:inline-block}ch-grid-action-refresh:hover,ch-grid-action-settings:hover{background-color:var(--color-secondary-hover)}ch-grid-action-refresh:focus-visible,ch-grid-action-settings:focus-visible{outline:var(--focus-style)}ch-grid-action-refresh:before{-webkit-mask-image:var(--refreshIconUrl)}ch-grid-action-settings:before{-webkit-mask-image:var(--settingshIconUrl)}ch-grid{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--gray-06)}ch-grid-column{background-color:var(--color-background);font-weight:var(--font-weight-bold);padding:var(--spacing-comp-02) !important;cursor:pointer}ch-grid-column::part(bar){gap:var(--spacing-comp-02);width:100%}ch-grid-column:not([sort-direction])::part(bar-sort){display:none}ch-grid-column::part(bar-settings){line-height:0}ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending){width:var(--spacing-comp-03);height:var(--spacing-comp-03);margin-left:var(--spacing-comp-02);margin-right:var(--spacing-comp-01)}ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before{width:100%;height:100%;-webkit-mask-size:200%}ch-grid-column::part(bar-sort-descending):before{-webkit-mask-image:var(--barSortDescendingIconUrl)}ch-grid-column::part(bar-sort-ascending):before{-webkit-mask-image:var(--barSortAscendingIconUrl)}ch-grid-column::part(bar-resize-split){width:3px;background-color:var(--gray-02)}ch-grid-column:last-child::part(bar-resize-split){display:none}ch-grid-column::part(bar-settings-button){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);border:none;background-color:transparent;cursor:pointer}ch-grid-column::part(bar-settings-button):hover{background-color:var(--gray-02)}ch-grid-column::part(bar-settings-button):focus-visible{outline:var(--focus-style)}ch-grid-column::part(bar-settings-button):before{-webkit-mask-image:var(--barSettingsButtonIconUrl)}ch-grid-row{background-color:var(--color-background);color:var(--gray-04);border:2px solid transparent}ch-grid-row:nth-of-type(odd){background-color:var(--gray-00)}ch-grid-row[highlighted]{background-color:var(--color-hover)}ch-grid-row[dragging]{box-shadow:var(--box-shadow-03)}ch-grid-row[selected]>ch-grid-cell:not([selected]){background-color:var(--color-secondary-enabled)}ch-grid-cell[selected]{z-index:1;background-color:var(--color-secondary-enabled) !important}ch-grid-row[selected]>ch-grid-cell{color:var(--color-on-secondary)}ch-grid-row[selected]+ch-grid-row[selected] ch-grid-cell{border-top-color:var(--color-secondary-hover)}ch-grid-cell{box-sizing:border-box;padding-inline-start:var(--spacing-comp-02) !important;padding-inline-end:var(--spacing-comp-02) !important;padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01);align-items:center;font-size:var(--font-size-md);line-height:var(--line-height-regular)}ch-grid-column::part(settings-mask){cursor:default}ch-grid-column::part(settings-mask),ch-grid::part(settings-mask){background-color:rgba(0, 0, 0, 0.3);cursor:arrow;color:var(--color-on-secondary)}ch-grid-column::part(settings-window),ch-grid::part(settings-window){background-color:var(--color-background);width:100%;max-width:600px;padding:var(--spacing-comp-03);border-radius:var(--border-width-lg);box-shadow:var(--box-shadow-04)}ch-grid::part(settings-window){margin:0 var(--spacing-comp-05)}ch-grid-column::part(settings-header),ch-grid::part(settings-header){display:flex;align-items:center;gap:var(--spacing-comp-04);justify-content:space-between;border-bottom:var(--border-width-sm) solid var(--gray-02);padding-bottom:var(--spacing-comp-02);margin-bottom:var(--spacing-comp-03);font-weight:var(--font-weight-bold)}ch-grid-column::part(settings-close),ch-grid::part(settings-close){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);font-size:0;border:0}ch-grid-column::part(settings-close):hover,ch-grid::part(settings-close):hover{background-color:var(--color-secondary-hover)}ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before{-webkit-mask-image:var(--settingsCloseIconUrl)}ch-grid-column::part(settings-close):focus-visible,ch-grid::part(settings-close):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns){gap:var(--spacing-comp-03)}ch-grid::part(settings-columns-label){display:inline-flex;align-items:center;gap:var(--spacing-comp-03);cursor:pointer;height:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible),ch-grid-cell::part(selector),ch-grid-column::part(selector){position:relative;margin:0;height:var(--spacing-comp-04);width:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible):focus-visible,ch-grid-cell::part(selector):focus-visible,ch-grid-column::part(selector):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns-visible):before,ch-grid-cell::part(selector):before,ch-grid-column::part(selector):before{cursor:pointer;content:\"\";display:inline-block;position:relative;height:var(--spacing-comp-04);width:var(--spacing-comp-04);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:var(--border-radius-md);border-color:var(--gray-04);box-sizing:border-box;flex-shrink:0;background:var(--color-background)}ch-grid::part(settings-columns-visible):after,ch-grid-cell::part(selector):after,ch-grid-column::part(selector):after{opacity:0;display:block;position:absolute;content:\"\";left:6px;top:3px;width:3px;height:7px;border:solid;border-color:var(--color-primary-hover);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;cursor:pointer}ch-grid-column::part(indeterminate):after{opacity:1;display:block;position:absolute;content:\"\";left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--color-primary-hover);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}ch-grid::part(settings-columns-visible-checked):before,ch-grid-cell::part(checked):before,ch-grid-column::part(checked):before{border-color:var(--color-primary-hover)}ch-grid::part(settings-columns-visible-checked):after,ch-grid-cell::part(checked):after,ch-grid-column::part(checked):after{opacity:1}ch-grid-cell::part(drag-icon):before{width:var(--spacing-comp-04);height:var(--spacing-comp-04);cursor:grab}ch-grid-cell::part(drag-icon):before{-webkit-mask-image:var(--dragIconUrl)}ch-grid::part(row-actions){padding-top:2px;right:var(--spacing-comp-02)}ch-grid-column::part(selector){margin-right:8px}ch-grid-rowset-legend{background-color:var(--gray-01);padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-02);padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01)}ch-grid>ch-grid-rowset:first-of-type ch-grid-rowset-legend{border-top:1px solid var(--color-background)}ch-grid-rowset-legend{margin-inline-start:calc(var(--indent) * (var(--level) - 1));display:flex;align-items:center;gap:var(--spacing-comp-01);cursor:pointer}ch-grid-rowset-legend::part(caret),ch-grid-cell::part(caret){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}ch-grid-cell::part(caret){cursor:pointer;margin-right:var(--spacing-comp-01)}ch-grid-rowset>ch-grid-rowset-legend::part(caret):before,ch-grid-row>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretCollapseIconUrl)}ch-grid-rowset[collapsed]>ch-grid-rowset-legend::part(caret):before,ch-grid-row[collapsed]>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretExpandIconUrl)}ch-grid-rowset[collapsed] ch-grid-rowset-legend{border-bottom:1px solid var(--color-background)}ch-grid gxg-paginator{padding-top:0;padding-bottom:0}gxg-grid[full-height]{height:100%}gxg-grid[full-height] ch-grid{height:100%}gxg-grid[ellipsis] ch-grid-cell{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;display:block}gxg-grid.large ch-grid{font-size:var(--font-size-lg)}";
|
|
5
5
|
|
|
6
6
|
const GxgGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -6,6 +6,7 @@ export { GxIdeListSelector as GxIdeListSelector } from '../types/components/list
|
|
|
6
6
|
export { GxIdeListSelectorItem as GxIdeListSelectorItem } from '../types/components/list-selector/list-selector-item/list-selector-item';
|
|
7
7
|
export { GxIdeNewEnvironment as GxIdeNewEnvironment } from '../types/components/new-environment/new-environment';
|
|
8
8
|
export { GxIdeNewKb as GxIdeNewKb } from '../types/components/new-kb/new-kb';
|
|
9
|
+
export { GxIdeNewObject as GxIdeNewObject } from '../types/components/new-object/new-object';
|
|
9
10
|
export { GxIdeObjectSelector as GxIdeObjectSelector } from '../types/components/object-selector/object-selector';
|
|
10
11
|
export { GxIdeReferences as GxIdeReferences } from '../types/components/references/references';
|
|
11
12
|
export { GxIdeTeamDevCommit as GxIdeTeamDevCommit } from '../types/components/team-dev-commit/team-dev-commit';
|
package/dist/components/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/intern
|
|
|
2
2
|
export { ChAccordion, defineCustomElement as defineCustomElementChAccordion } from './ch-accordion.js';
|
|
3
3
|
export { ChActionGroup, defineCustomElement as defineCustomElementChActionGroup } from './ch-action-group.js';
|
|
4
4
|
export { ChActionGroupItem, defineCustomElement as defineCustomElementChActionGroupItem } from './ch-action-group-item.js';
|
|
5
|
+
export { ChAlert, defineCustomElement as defineCustomElementChAlert } from './ch-alert.js';
|
|
5
6
|
export { ChCheckbox, defineCustomElement as defineCustomElementChCheckbox } from './ch-checkbox.js';
|
|
6
7
|
export { ChDragBar, defineCustomElement as defineCustomElementChDragBar } from './ch-drag-bar.js';
|
|
7
8
|
export { ChDropdown, defineCustomElement as defineCustomElementChDropdown } from './ch-dropdown.js';
|
|
@@ -49,6 +50,7 @@ export { ChTestActionGroup, defineCustomElement as defineCustomElementChTestActi
|
|
|
49
50
|
export { ChTestDropdown, defineCustomElement as defineCustomElementChTestDropdown } from './ch-test-dropdown.js';
|
|
50
51
|
export { ChTestTreeX, defineCustomElement as defineCustomElementChTestTreeX } from './ch-test-tree-x.js';
|
|
51
52
|
export { ChTextblock, defineCustomElement as defineCustomElementChTextblock } from './ch-textblock.js';
|
|
53
|
+
export { ChTimer, defineCustomElement as defineCustomElementChTimer } from './ch-timer.js';
|
|
52
54
|
export { ChTree, defineCustomElement as defineCustomElementChTree } from './ch-tree.js';
|
|
53
55
|
export { ChTreeItem, defineCustomElement as defineCustomElementChTreeItem } from './ch-tree-item.js';
|
|
54
56
|
export { ChTreeX, defineCustomElement as defineCustomElementChTreeX } from './ch-tree-x.js';
|
|
@@ -65,6 +67,7 @@ export { GxIdeListSelector, defineCustomElement as defineCustomElementGxIdeListS
|
|
|
65
67
|
export { GxIdeListSelectorItem, defineCustomElement as defineCustomElementGxIdeListSelectorItem } from './gx-ide-list-selector-item.js';
|
|
66
68
|
export { GxIdeNewEnvironment, defineCustomElement as defineCustomElementGxIdeNewEnvironment } from './gx-ide-new-environment.js';
|
|
67
69
|
export { GxIdeNewKb, defineCustomElement as defineCustomElementGxIdeNewKb } from './gx-ide-new-kb.js';
|
|
70
|
+
export { GxIdeNewObject, defineCustomElement as defineCustomElementGxIdeNewObject } from './gx-ide-new-object.js';
|
|
68
71
|
export { GxIdeObjectSelector, defineCustomElement as defineCustomElementGxIdeObjectSelector } from './gx-ide-object-selector.js';
|
|
69
72
|
export { GxIdeReferences, defineCustomElement as defineCustomElementGxIdeReferences } from './gx-ide-references.js';
|
|
70
73
|
export { GxIdeTeamDevCommit, defineCustomElement as defineCustomElementGxIdeTeamDevCommit } from './gx-ide-team-dev-commit.js';
|
|
@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './icon2.js';
|
|
|
8
8
|
import { d as defineCustomElement$2 } from './gxg-label2.js';
|
|
9
9
|
import { d as defineCustomElement$1 } from './tooltip.js';
|
|
10
10
|
|
|
11
|
-
const listBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}: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:block;font-family:var(--font-family-primary);font-size:inherit;color:inherit;display:flex;box-sizing:border-box;align-items:center;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;outline:none}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-02);width:100%;height:var(--gxg-list-item-height--spaced);box-sizing:border-box}:host .icon{margin-inline-end:var(--spacing-comp-01);flex-shrink:0}:host gxg-form-checkbox{margin-inline-end:var(--spacing-comp-01)}:host gxg-form-checkbox::part(box){outline:none}:host(:not([disabled])){cursor:pointer !important}:host(:hover:not([selected])){background-color:var(--gxg-background-color-item-hover)}:host(.has-icon.no-checkbox) .container{padding-inline-start:var(--spacing-comp-01)}:host([
|
|
11
|
+
const listBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}: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:block;font-family:var(--font-family-primary);font-size:inherit;color:inherit;display:flex;box-sizing:border-box;align-items:center;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;outline:none}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-02);width:100%;height:var(--gxg-list-item-height--spaced);box-sizing:border-box}:host .icon{margin-inline-end:var(--spacing-comp-01);flex-shrink:0}:host gxg-form-checkbox{margin-inline-end:var(--spacing-comp-01)}:host gxg-form-checkbox::part(box){outline:none}:host(:not([disabled])){cursor:pointer !important}:host(:hover:not([selected])){background-color:var(--gxg-background-color-item-hover)}:host(.has-icon.no-checkbox) .container{padding-inline-start:var(--spacing-comp-01)}.description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}:host([highlighted]){background-color:var(--gxg-background-color-item-selected);color:var(--color-on-background)}:host([selected]){background-color:var(--gxg-background-color-item-active);color:var(--gxg-color-item-active)}:host(.large) .container{padding:var(--spacing-comp-01)}";
|
|
12
12
|
|
|
13
13
|
const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
14
14
|
constructor() {
|
|
@@ -71,6 +71,19 @@ const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
|
|
|
71
71
|
const exportPartsResult = exportParts(part, this.parts);
|
|
72
72
|
exportPartsResult.length && (this.exportparts = exportPartsResult);
|
|
73
73
|
};
|
|
74
|
+
this.getIndex = () => {
|
|
75
|
+
const listBox = this.el.parentElement;
|
|
76
|
+
const listBoxItems = listBox.querySelectorAll("gxg-list-box-item");
|
|
77
|
+
const itemIndex = Array.from(listBoxItems).findIndex((item) => {
|
|
78
|
+
return item === this.el;
|
|
79
|
+
});
|
|
80
|
+
if (itemIndex !== -1) {
|
|
81
|
+
return itemIndex;
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
return undefined;
|
|
85
|
+
}
|
|
86
|
+
};
|
|
74
87
|
}
|
|
75
88
|
checkboxChangedHandler(e) {
|
|
76
89
|
const checked = e.detail.value;
|
|
@@ -98,12 +111,14 @@ const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
|
|
|
98
111
|
this.itemLoaded.emit();
|
|
99
112
|
}
|
|
100
113
|
itemClickedFunc(e) {
|
|
114
|
+
const index = this.getIndex();
|
|
115
|
+
//console.log("index", index);
|
|
101
116
|
this.itemClicked.emit({
|
|
102
117
|
clickedItem: this.el,
|
|
103
118
|
ctrlKey: e.ctrlKey,
|
|
104
119
|
cmdKey: e.metaKey,
|
|
105
120
|
shiftKey: e.shiftKey,
|
|
106
|
-
index:
|
|
121
|
+
index: index,
|
|
107
122
|
});
|
|
108
123
|
}
|
|
109
124
|
onMouseOver() {
|
|
@@ -121,7 +136,7 @@ const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
|
|
|
121
136
|
}, onClick: this.itemClickedFunc.bind(this),
|
|
122
137
|
// onMouseOver={this.onMouseOver.bind(this)}
|
|
123
138
|
// onMouseOut={this.onMouseOut.bind(this)}
|
|
124
|
-
exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: { container: true, "form-element": true } }, this.checkbox && !this.disabled ? (h("gxg-form-checkbox", { tabindex: "-1", checked: this.checked, onClick: this.handleCheckboxClick, disabled: this.disabled, part: this.parts.checkbox })) : null, this.icon !== undefined ? (h("gxg-icon", { class: "icon", color: this.iconColor(), size: "regular", type: this.icon })) : null, h("slot", null))));
|
|
139
|
+
exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: { container: true, "form-element": true } }, this.checkbox && !this.disabled ? (h("gxg-form-checkbox", { tabindex: "-1", checked: this.checked, onClick: this.handleCheckboxClick, disabled: this.disabled, part: this.parts.checkbox })) : null, this.icon !== undefined ? (h("gxg-icon", { class: "icon", color: this.iconColor(), size: "regular", type: this.icon })) : null, h("div", { class: "description" }, h("slot", null)))));
|
|
125
140
|
}
|
|
126
141
|
get el() { return this; }
|
|
127
142
|
static get style() { return listBoxItemCss; }
|
|
@@ -79,6 +79,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
79
79
|
*/
|
|
80
80
|
this.userUsedKeyboard = false;
|
|
81
81
|
this.headerHeight = 0;
|
|
82
|
+
this.firstChange = true;
|
|
82
83
|
/*********************************
|
|
83
84
|
PROPERTIES FOR VALIDATION
|
|
84
85
|
*********************************/
|
|
@@ -98,12 +99,6 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
98
99
|
*/
|
|
99
100
|
this.validationStatus = "indeterminate";
|
|
100
101
|
this.initialSetup = () => {
|
|
101
|
-
/*set index to every item*/
|
|
102
|
-
const allItems = this.getAllItems();
|
|
103
|
-
if (allItems === null || allItems === void 0 ? void 0 : allItems.length)
|
|
104
|
-
allItems.forEach((item, i) => {
|
|
105
|
-
item.index = i;
|
|
106
|
-
});
|
|
107
102
|
/*conditions to do setup*/
|
|
108
103
|
const selectItem = !this.allowsEmpty && this.selectedItemsLength() === 0;
|
|
109
104
|
const unselectItems = this.singleSelection && this.selectedItemsLength() > 1;
|
|
@@ -256,17 +251,27 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
256
251
|
const selectedItemsArray = [];
|
|
257
252
|
const selectedItems = this.getSelectedItemsFunc();
|
|
258
253
|
selectedItems.forEach((item) => {
|
|
254
|
+
const index = this.getItemIndex(item);
|
|
259
255
|
selectedItemsArray.push({
|
|
260
256
|
active: item.active,
|
|
261
257
|
selected: item.selected,
|
|
262
258
|
checked: item.checked,
|
|
263
259
|
highlighted: item.highlighted,
|
|
264
|
-
index:
|
|
260
|
+
index: index,
|
|
265
261
|
value: item.value || item.textContent,
|
|
266
262
|
});
|
|
267
263
|
});
|
|
268
264
|
this.selectedItems = [...selectedItemsArray];
|
|
269
265
|
};
|
|
266
|
+
this.getItemIndex = (itemEl) => {
|
|
267
|
+
if (itemEl) {
|
|
268
|
+
const allListBoxItems = this.el.querySelectorAll("gxg-list-box-item");
|
|
269
|
+
const index = Array.from(allListBoxItems).findIndex((item) => {
|
|
270
|
+
return item === itemEl;
|
|
271
|
+
});
|
|
272
|
+
return index;
|
|
273
|
+
}
|
|
274
|
+
};
|
|
270
275
|
/* OTHER */
|
|
271
276
|
this.getAllItems = () => {
|
|
272
277
|
const allItemsArray = [];
|
|
@@ -297,7 +302,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
297
302
|
this.initialSetup();
|
|
298
303
|
}
|
|
299
304
|
itemLoadedHandler() {
|
|
300
|
-
this.initialSetup();
|
|
305
|
+
//this.initialSetup();
|
|
301
306
|
}
|
|
302
307
|
itemClickedHandler(event) {
|
|
303
308
|
const { clickedItem, ctrlKey, cmdKey, shiftKey, index } = event["detail"];
|
|
@@ -358,7 +363,10 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
358
363
|
this.setActiveItem(clickedItem);
|
|
359
364
|
}
|
|
360
365
|
selectedItemsHandler(newArray) {
|
|
361
|
-
this.
|
|
366
|
+
if (!this.firstChange) {
|
|
367
|
+
this.selectionChanged.emit({ items: newArray });
|
|
368
|
+
}
|
|
369
|
+
this.firstChange = false;
|
|
362
370
|
}
|
|
363
371
|
checkedItemsHandler(newArray) {
|
|
364
372
|
this.checkedChanged.emit(newArray);
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
|
|
3
|
+
const timerCss = "@keyframes transition{from{width:100%}to{width:0}}.indicator{height:5px;background-color:#cdcd44;animation:var(--animation-time) linear 1 forwards transition}";
|
|
4
|
+
|
|
5
|
+
const ChTimer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
|
+
constructor() {
|
|
7
|
+
super();
|
|
8
|
+
this.__registerHost();
|
|
9
|
+
this.__attachShadow();
|
|
10
|
+
/**
|
|
11
|
+
* Sets the progress propiety to determine the progress.
|
|
12
|
+
*/
|
|
13
|
+
this.progress = 0;
|
|
14
|
+
/**
|
|
15
|
+
* Sets the accesible name of the timer.
|
|
16
|
+
*/
|
|
17
|
+
this.accessibleName = "timer";
|
|
18
|
+
/**
|
|
19
|
+
* Sets the animationTime to set the custom var for the css animation.
|
|
20
|
+
*/
|
|
21
|
+
this.animationTime = 0;
|
|
22
|
+
/**
|
|
23
|
+
* Sets the presented property to handle the component presentation.
|
|
24
|
+
*/
|
|
25
|
+
this.presented = false;
|
|
26
|
+
}
|
|
27
|
+
render() {
|
|
28
|
+
const accessibilityAttributes = {
|
|
29
|
+
role: "timer",
|
|
30
|
+
"aria-live": "true",
|
|
31
|
+
"aria-labelledby": this.accessibleName,
|
|
32
|
+
"aria-valuemin": "0",
|
|
33
|
+
"aria-valuemax": "100",
|
|
34
|
+
"aria-valuenow": this.progress
|
|
35
|
+
};
|
|
36
|
+
return (h(Host, null, this.presented && this.progress >= 0 && (h("div", Object.assign({}, accessibilityAttributes, { part: "indicator", class: "indicator", style: {
|
|
37
|
+
"--animation-time": `${this.animationTime}ms`
|
|
38
|
+
} })))));
|
|
39
|
+
}
|
|
40
|
+
static get style() { return timerCss; }
|
|
41
|
+
}, [1, "ch-timer", {
|
|
42
|
+
"progress": [2],
|
|
43
|
+
"accessibleName": [1, "accessible-name"],
|
|
44
|
+
"animationTime": [2, "animation-time"],
|
|
45
|
+
"presented": [4]
|
|
46
|
+
}]);
|
|
47
|
+
function defineCustomElement() {
|
|
48
|
+
if (typeof customElements === "undefined") {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
const components = ["ch-timer"];
|
|
52
|
+
components.forEach(tagName => { switch (tagName) {
|
|
53
|
+
case "ch-timer":
|
|
54
|
+
if (!customElements.get(tagName)) {
|
|
55
|
+
customElements.define(tagName, ChTimer);
|
|
56
|
+
}
|
|
57
|
+
break;
|
|
58
|
+
} });
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export { ChTimer as C, defineCustomElement as d };
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-0da01575.js';
|
|
2
|
+
|
|
3
|
+
const alertCss = ":host{display:grid;width:100%;height:100%;grid-template:\"img content button\" 1fr \"progress-bar progress-bar progress-bar\" min-content/min-content 1fr min-content}:host(.pause-on-hover:hover) ::part(indicator){animation-play-state:paused}::slotted([slot=button]){pointer-events:none}.image{max-width:40px;height:40px;grid-area:img;align-self:center}.content{grid-area:content}.close-button{grid-area:button}.close-button .close-button-img{-webkit-mask:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.875 18L6.75 16.875L11.25 12.375L6.75 7.875L7.875 6.75L12.375 11.25L16.875 6.75L18 7.875L13.5 12.375L18 16.875L16.875 18L12.375 13.5L7.875 18Z'/%3E%3C/svg%3E\") 50% 50%/24px 24px no-repeat;width:24px;height:24px;background-color:currentColor}.indicator-container{grid-area:progress-bar}:where(button){all:unset;display:flex;align-items:center;cursor:pointer}";
|
|
4
|
+
|
|
5
|
+
const ChAlert = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.close = createEvent(this, "close", 7);
|
|
9
|
+
/** Sets the timer id */
|
|
10
|
+
this.timerId = null;
|
|
11
|
+
/** Sets the desired interval */
|
|
12
|
+
this.timerInterval = 50;
|
|
13
|
+
/**
|
|
14
|
+
* Determine the accessible name of the close button.
|
|
15
|
+
* Important for accessibility.
|
|
16
|
+
*/
|
|
17
|
+
this.closeButtonAccessibleName = "Close";
|
|
18
|
+
/**
|
|
19
|
+
* Specifies the time (ms) for the alert to be displayed.
|
|
20
|
+
* if `dismissTimeout = 0`, the alert will be always visible
|
|
21
|
+
* (unless is dismissed by the closeButton).
|
|
22
|
+
*/
|
|
23
|
+
this.dismissTimeout = 0;
|
|
24
|
+
/**
|
|
25
|
+
* Determine src of the left image.
|
|
26
|
+
*/
|
|
27
|
+
this.leftImgSrc = "";
|
|
28
|
+
/**
|
|
29
|
+
* Determine if the element is displayed or not.
|
|
30
|
+
*/
|
|
31
|
+
this.presented = false;
|
|
32
|
+
/**
|
|
33
|
+
* Determine if the closeButton is displayed or not.
|
|
34
|
+
*/
|
|
35
|
+
this.showCloseButton = false;
|
|
36
|
+
/**
|
|
37
|
+
* If dismissTimeout > 0, a progress bar is displayed at the bottom of the element
|
|
38
|
+
* showing the time left for the alert to show.
|
|
39
|
+
* The progress stops when the element is hovered.
|
|
40
|
+
*/
|
|
41
|
+
this.showTimeoutBar = false;
|
|
42
|
+
/** Toggles the Pause on Hover functionality */
|
|
43
|
+
this.pauseOnHover = true;
|
|
44
|
+
/** Closes the alert when the close button is clicked.
|
|
45
|
+
* Also restarts the counter and sets its value to match dismissTimeout.
|
|
46
|
+
*/
|
|
47
|
+
this.handleAlertClose = () => {
|
|
48
|
+
clearInterval(this.timerId);
|
|
49
|
+
this.presented = false;
|
|
50
|
+
this.close.emit();
|
|
51
|
+
this.countdown = this.dismissTimeout;
|
|
52
|
+
};
|
|
53
|
+
/** Countdown which initial state is dismissTimeout ms. */
|
|
54
|
+
this.countdown = this.dismissTimeout;
|
|
55
|
+
/** Counter decremental function */
|
|
56
|
+
this.counter = () => {
|
|
57
|
+
this.countdown -= this.timerInterval;
|
|
58
|
+
};
|
|
59
|
+
/** Starts a new countdown which interval is set in timerInterval,
|
|
60
|
+
* Only if is presented, dismissTimeout is greater than 0,
|
|
61
|
+
* and countdown is still running.
|
|
62
|
+
*/
|
|
63
|
+
this.start = () => {
|
|
64
|
+
clearInterval(this.timerId);
|
|
65
|
+
if (this.presented && this.dismissTimeout !== 0 && this.countdown >= 0) {
|
|
66
|
+
this.timerId = setInterval(this.counter, this.timerInterval);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
/** Pauses the countdown */
|
|
70
|
+
this.handleMouseEnter = () => {
|
|
71
|
+
clearInterval(this.timerId);
|
|
72
|
+
};
|
|
73
|
+
/** Resumes the countdown */
|
|
74
|
+
this.handleMouseLeave = () => {
|
|
75
|
+
this.start();
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
timeoutWatcher(newValue) {
|
|
79
|
+
if (newValue) {
|
|
80
|
+
this.countdown = newValue;
|
|
81
|
+
this.start();
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
presentedWatcher(newValue) {
|
|
85
|
+
if (newValue) {
|
|
86
|
+
this.start();
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
/** Countdown watcher that hides the alert if dismissTimeout is reached
|
|
90
|
+
* and stops the countdown.
|
|
91
|
+
* See handleAlertClose for more details. */
|
|
92
|
+
countdownWatcher(newValue) {
|
|
93
|
+
if (newValue <= 0) {
|
|
94
|
+
this.handleAlertClose();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
componentDidLoad() {
|
|
98
|
+
this.start();
|
|
99
|
+
}
|
|
100
|
+
render() {
|
|
101
|
+
return (h(Host, { role: "alert", onMouseEnter: this.pauseOnHover && this.handleMouseEnter, onMouseLeave: this.pauseOnHover && this.handleMouseLeave, "aria-hidden": !this.presented ? "true" : "false", class: this.pauseOnHover && "pause-on-hover" }, this.presented && [
|
|
102
|
+
this.leftImgSrc && (h("img", { part: "image", class: "image", src: this.leftImgSrc, alt: "", "aria-hidden": "true", loading: "lazy" })),
|
|
103
|
+
h("div", { part: "content", class: "content" }, h("slot", { name: "content" })),
|
|
104
|
+
this.showCloseButton && (h("button", { part: "close-button", class: "close-button", type: "button", "aria-label": this.closeButtonAccessibleName, onClick: this.handleAlertClose }, h("slot", { name: "button", "aria-hidden": "true" }, h("div", { "aria-hidden": "true", class: "close-button-img" })))),
|
|
105
|
+
this.showTimeoutBar && (h("ch-timer", { part: "indicator-container", class: "indicator-container", exportparts: "indicator", progress: (this.countdown * 100) / this.dismissTimeout, accessibleName: `${this.countdown / 1000} seconds left`, "animation-time": this.dismissTimeout, presented: this.presented }))
|
|
106
|
+
]));
|
|
107
|
+
}
|
|
108
|
+
static get watchers() { return {
|
|
109
|
+
"dismissTimeout": ["timeoutWatcher"],
|
|
110
|
+
"presented": ["presentedWatcher"],
|
|
111
|
+
"countdown": ["countdownWatcher"]
|
|
112
|
+
}; }
|
|
113
|
+
};
|
|
114
|
+
ChAlert.style = alertCss;
|
|
115
|
+
|
|
116
|
+
export { ChAlert as ch_alert };
|