@genexus/genexus-ide-ui 1.1.13 → 1.1.15

package/dist/esm/gx-ide-data-type-selector.entry.js

@@ -13,6 +13,7 @@ const mapCategoryToListItemGroup = (category) => {
             return {
                 caption: type.name,
                 id: type.name,
+                selected: type.selected,
                 additionalInformation: {
                     "stretch-start": {
                         center: [{ imgSrc: type.icon }]
@@ -29,6 +30,7 @@ const mapDataTypesToList = (dataTypes) => {
         return {
             caption: dataType.name,
             id: dataType.name,
+            selected: dataType.selected,
             additionalInformation: {
                 "stretch-start": {
                     center: [{ imgSrc: dataType.icon || undefined }]
@@ -40,7 +42,7 @@ const mapDataTypesToList = (dataTypes) => {
     });
 };
 
-const dataTypeSelectorCss = ":host{position:relative;display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr max-content;--control__border-width:var(--mer-border__width--sm);--control__border-radius:var(--mer-border__radius--sm)}.main{display:contents}.selected-category{margin:0;text-transform:capitalize;margin-inline-start:var(--mer-spacing--md);white-space:nowrap}.footer{overflow:auto}";
+const dataTypeSelectorCss = ":host{position:relative;display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr max-content;--control__border-width:var(--mer-border__width--sm);--control__border-radius:var(--mer-border__radius--sm)}.main{display:contents}.selected-category{margin:0;text-transform:capitalize;margin-inline-start:var(--mer-spacing--md);white-space:nowrap}.footer{overflow:auto;padding:var(--mer-spacing--xs)}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -58,19 +60,20 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdeKbManagerImport__componentLocale, _GxIdeKbManagerImport_showAll, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, _GxIdeKbManagerImport_handleSelectionChange, _GxIdeKbManagerImport_updateListBoxModelState, _GxIdeKbManagerImport_showAllObjects, _GxIdeKbManagerImport_showRecentlyObjects, _GxIdeKbManagerImport_renderFooter;
+var _GxIdeKbManagerImport__componentLocale, _GxIdeKbManagerImport_showAll, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, _GxIdeKbManagerImport_dataTypeCategoryMap, _GxIdeKbManagerImport_dataTypeDataIdMap, _GxIdeKbManagerImport_lastArrowKey, _GxIdeKbManagerImport_selectedDataTypeIds, _GxIdeKbManagerImport_focusAlreadySet, _GxIdeKbManagerImport_actionListEl, _GxIdeKbManagerImport_evaluateSelectionChanged, _GxIdeKbManagerImport_listKeyDownHandler, _GxIdeKbManagerImport_listClickHandler, _GxIdeKbManagerImport_showAllObjects, _GxIdeKbManagerImport_showRecentlyObjects, _GxIdeKbManagerImport_handleButtonTab, _GxIdeKbManagerImport_renderFooter, _GxIdeKbManagerImport_setFocus;
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    "components/tab",
-    "components/tooltip",
     "components/list-box",
-    "components/tree-view",
     "utils/form--full",
-    "utils/layout",
     "utils/typography",
+    "utils/layout",
     "utils/spacing",
     "chameleon/scrollbar"
 ];
+const ARROW_UP_KEY = "ArrowUp";
+const ARROW_DOWN_KEY = "ArrowDown";
+const ENTER_KEY = "Enter";
+const TAB_KEY = "Tab";
 const ALL_CATEGORY_ID = "all";
 const RECENTLY_USED_CATEGORY_ID = "recenttly-used";
 const CLOCK_ICON = getIconPath({
@@ -84,41 +87,64 @@ const GxIdeKbManagerImport = class {
         _GxIdeKbManagerImport__componentLocale.set(this, void 0);
         _GxIdeKbManagerImport_showAll.set(this, false);
         _GxIdeKbManagerImport_categoriesActionListItemGroupMap.set(this, new Map());
-        _GxIdeKbManagerImport_handleSelectionChange.set(this, (event) => {
-            var _a;
-            const eventType = (_a = event.detail[0]) === null || _a === void 0 ? void 0 : _a.item.type;
-            if (eventType === "actionable") {
-                const name = event.detail[0].item.caption;
-                const itemAdditionalBase = event.detail[0].item.additionalInformation["stretch-start"].center[0];
-                const icon = itemAdditionalBase.imgSrc;
-                this.dataTypeSelectedCallback({
-                    name: name,
-                    icon: icon
-                });
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_updateListBoxModelState, "f").call(this, event.detail[0].item.caption, "actionable");
-            }
-            else if (eventType === "group") {
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_updateListBoxModelState, "f").call(this, event.detail[0].item.caption, "group");
+        _GxIdeKbManagerImport_dataTypeCategoryMap.set(this, new Map());
+        _GxIdeKbManagerImport_dataTypeDataIdMap.set(this, new Map());
+        _GxIdeKbManagerImport_lastArrowKey.set(this, null);
+        _GxIdeKbManagerImport_selectedDataTypeIds.set(this, {
+            // For setting focus
+            categoryId: undefined,
+            dataTypeId: undefined
+        });
+        _GxIdeKbManagerImport_focusAlreadySet.set(this, false);
+        _GxIdeKbManagerImport_actionListEl.set(this, void 0);
+        _GxIdeKbManagerImport_evaluateSelectionChanged.set(this, (path) => {
+            const chActionListItem = path.find(el => el.tagName === "CH-ACTION-LIST-ITEM");
+            if (chActionListItem) {
+                const id = chActionListItem.id;
+                const dataTypeData = __classPrivateFieldGet(this, _GxIdeKbManagerImport_dataTypeDataIdMap, "f").get(id);
+                this.dataTypeSelectedCallback(dataTypeData);
             }
         });
-        _GxIdeKbManagerImport_updateListBoxModelState.set(this, (name, type) => {
-            if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {
-                this.recentlyUsedActionListModel.forEach(item => {
-                    // clear selected
-                    item.selected = false;
-                });
-                const selectedItemIndex = this.recentlyUsed.findIndex(item => item.name === name);
-                if (selectedItemIndex !== -1) {
-                    this.recentlyUsedActionListModel[selectedItemIndex].selected = true;
+        _GxIdeKbManagerImport_listKeyDownHandler.set(this, (event) => {
+            const pressedKey = event.key;
+            const path = event.composedPath();
+            if (pressedKey === ARROW_UP_KEY || pressedKey === ARROW_DOWN_KEY) {
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_lastArrowKey, pressedKey, "f");
+                if (pressedKey === ARROW_UP_KEY) {
+                    // Check if this is the first group. IF it is, let the host know,
+                    // so it can close the dialog.
+                    const chActionListItem = path.find(el => el.tagName === "CH-ACTION-LIST-ITEM");
+                    if (chActionListItem !== undefined) {
+                        return;
+                    }
+                    // This is a ch-action-list-group
+                    const actionGroup = path.find(el => el.tagName === "CH-ACTION-LIST-GROUP");
+                    const currentFocusedActionGroupId = actionGroup.id;
+                    const firstActionListGroupId = __classPrivateFieldGet(this, _GxIdeKbManagerImport_actionListEl, "f").shadowRoot.firstElementChild.id;
+                    if (currentFocusedActionGroupId === firstActionListGroupId) {
+                        this.arrowUpOnFirstElement();
+                    }
                 }
             }
-            else if (type === "group" &&
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").has(name)) {
-                const group = __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").get(name);
-                const groupUpdated = Object.assign(Object.assign({}, group), { expanded: group.expanded });
-                __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").set(name, groupUpdated);
+            else if (pressedKey === ENTER_KEY) {
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_evaluateSelectionChanged, "f").call(this, path);
+            }
+            else if (pressedKey === TAB_KEY) {
+                event.stopPropagation();
             }
         });
+        _GxIdeKbManagerImport_listClickHandler.set(this, (event) => {
+            if (__classPrivateFieldGet(this, _GxIdeKbManagerImport_lastArrowKey, "f")) ;
+            else if (event.detail === 0) {
+                // ignore keyboard Enter (Enter happens by default on buttons on onClick)
+                return;
+            }
+            else {
+                const path = event.composedPath();
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_evaluateSelectionChanged, "f").call(this, path);
+            }
+            __classPrivateFieldSet(this, _GxIdeKbManagerImport_lastArrowKey, null, "f");
+        });
         _GxIdeKbManagerImport_showAllObjects.set(this, () => {
             if (!__classPrivateFieldGet(this, _GxIdeKbManagerImport_showAll, "f")) {
                 const allCategoriesActionListModel = [];
@@ -149,6 +175,13 @@ const GxIdeKbManagerImport = class {
             this.categoriesListBoxModel = newSelectedCategory;
             __classPrivateFieldSet(this, _GxIdeKbManagerImport_showAll, false, "f");
         };
+        _GxIdeKbManagerImport_handleButtonTab.set(this, (event) => {
+            // Prevents bubbling, which causes this component to close, due to how the IDE handles Tab event
+            // in a parent element.
+            if (event.key === TAB_KEY || event.key === ENTER_KEY) {
+                event.stopPropagation();
+            }
+        });
         _GxIdeKbManagerImport_renderFooter.set(this, () => {
             const recentlyUsedBtnClass = this.selectedCategory === RECENTLY_USED_CATEGORY_ID
                 ? "button-secondary"
@@ -167,20 +200,49 @@ const GxIdeKbManagerImport = class {
             else {
                 selectedCategoryDescription = this.selectedCategory;
             }
-            return (h("footer", { class: "footer control-footer control-footer-start spacing-body-inline spacing-body-block scrollable\n      " }, h("div", { class: "buttons-spacer" }, this.recentlyUsed && this.recentlyUsed.length > 0 && (h("button", { class: `button-icon-only ${recentlyUsedBtnClass}`, "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showRecentlyObjects, "f") }, h("ch-image", { class: "icon-md", src: CLOCK_ICON }))), h("button", { class: `button-icon-only ${allBtnClass}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f"), "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}` }, "[*]"), this.categories.map(category => {
+            return (h("footer", { class: "footer control-footer control-footer-start scrollable\n      " }, h("div", { class: "buttons-spacer" }, this.recentlyUsed && this.recentlyUsed.length > 0 && (h("button", { class: `button-icon-only ${recentlyUsedBtnClass}`, "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showRecentlyObjects, "f"), onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleButtonTab, "f") }, h("ch-image", { class: "icon-md", src: CLOCK_ICON }))), h("button", { class: `button-icon-only ${allBtnClass}`, onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f"), onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleButtonTab, "f"), "aria-label": `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}`, title: `${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").select} ${__classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all}` }, "[*]"), this.categories.map(category => {
                 const buttonClass = category.name === this.selectedCategory
                     ? "button-secondary"
                     : "button-tertiary";
-                return (h("button", { class: `button-icon-only ${buttonClass}`, "aria-label": category.name, title: category.name, onClick: this.selectedCategoryHandler, "data-name": category.name }, h("ch-image", { class: "icon-md", src: category.icon })));
+                return (h("button", { class: `button-icon-only ${buttonClass}`, "aria-label": category.name, title: category.name, onClick: this.selectedCategoryHandler, onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleButtonTab, "f"), "data-name": category.name }, h("ch-image", { class: "icon-md", src: category.icon })));
             })), h("p", { class: "body-regular-s selected-category" }, selectedCategoryDescription)));
         });
+        _GxIdeKbManagerImport_setFocus.set(this, async () => {
+            if (__classPrivateFieldGet(this, _GxIdeKbManagerImport_focusAlreadySet, "f")) {
+                return;
+            }
+            let focusableElement;
+            setTimeout(() => {
+                // setTimeout as a WA, since the list-box elements are not rendered/read immediatelly
+                if (this.focusType === "selected" &&
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").categoryId &&
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").dataTypeId) {
+                    // set focus on the selected element
+                    const selectedDataTypeEl = __classPrivateFieldGet(this, _GxIdeKbManagerImport_actionListEl, "f").shadowRoot.getElementById(__classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").dataTypeId);
+                    if (selectedDataTypeEl) {
+                        focusableElement = selectedDataTypeEl;
+                    }
+                }
+                else {
+                    // set focus of the first element
+                    const firstActionListGroup = __classPrivateFieldGet(this, _GxIdeKbManagerImport_actionListEl, "f").shadowRoot.firstElementChild;
+                    const firstButton = firstActionListGroup.shadowRoot.firstElementChild;
+                    focusableElement = firstButton;
+                }
+                focusableElement && focusableElement.focus();
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_focusAlreadySet, true, "f");
+            }, 150);
+        });
         this.categoriesListBoxModel = [];
         this.selectedCategory = undefined;
-        this.statusInfo = [];
         this.recentlyUsedActionListModel = [];
         this.loading = true;
+        this.categoriesJustChanged = false;
+        this.actionListDidRender = false;
         this.categories = undefined;
         this.dataTypeSelectedCallback = undefined;
+        this.arrowUpOnFirstElement = undefined;
+        this.focusType = "first-element";
         this.recentlyUsed = [];
     }
     categoriesChanged(newCategories) {
@@ -191,9 +253,25 @@ const GxIdeKbManagerImport = class {
         newCategories.forEach(category => {
             const categoryListBoxModel = mapCategoryToListItemGroup(category);
             __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").set(category.name, categoryListBoxModel);
+            category.types.forEach(type => {
+                const isSelected = type.selected;
+                if (isSelected) {
+                    // For setting focus
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").categoryId = category.name;
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport_selectedDataTypeIds, "f").dataTypeId = type.name;
+                }
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_dataTypeCategoryMap, "f").set(type.name, category.id);
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_dataTypeDataIdMap, "f").set(type.name, {
+                    id: category.id,
+                    name: type.name,
+                    icon: type.icon,
+                    selected: type.selected
+                });
+            });
         });
         this.loading = false;
         __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f").call(this);
+        this.categoriesJustChanged = true;
     }
     recentlyUsedChanged(newRecentlyUsed) {
         this.recentlyUsedActionListModel = null;
@@ -205,7 +283,10 @@ const GxIdeKbManagerImport = class {
         this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);
     }
     render() {
-        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), this.loading ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.description, show: true })) : (h("section", { class: "main" }, h("ch-action-list-render", { class: "list-box", model: this.categoriesListBoxModel, selection: "single", onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeKbManagerImport_handleSelectionChange, "f") }), __classPrivateFieldGet(this, _GxIdeKbManagerImport_renderFooter, "f").call(this)))));
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), this.loading ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").loader.description, show: true })) : (h("section", { class: "main" }, h("ch-action-list-render", { ref: async (el) => {
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_actionListEl, el, "f");
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_setFocus, "f").call(this);
+            }, class: "list-box", model: this.categoriesListBoxModel, selection: "single", onKeyDown: __classPrivateFieldGet(this, _GxIdeKbManagerImport_listKeyDownHandler, "f"), onClick: __classPrivateFieldGet(this, _GxIdeKbManagerImport_listClickHandler, "f") }), __classPrivateFieldGet(this, _GxIdeKbManagerImport_renderFooter, "f").call(this)))));
     }
     static get assetsDirs() { return ["gx-ide-assets/data-type-selector"]; }
     get el() { return getElement(this); }
@@ -214,7 +295,7 @@ const GxIdeKbManagerImport = class {
         "recentlyUsed": ["recentlyUsedChanged"]
     }; }
 };
-_GxIdeKbManagerImport__componentLocale = new WeakMap(), _GxIdeKbManagerImport_showAll = new WeakMap(), _GxIdeKbManagerImport_categoriesActionListItemGroupMap = new WeakMap(), _GxIdeKbManagerImport_handleSelectionChange = new WeakMap(), _GxIdeKbManagerImport_updateListBoxModelState = new WeakMap(), _GxIdeKbManagerImport_showAllObjects = new WeakMap(), _GxIdeKbManagerImport_showRecentlyObjects = new WeakMap(), _GxIdeKbManagerImport_renderFooter = new WeakMap();
+_GxIdeKbManagerImport__componentLocale = new WeakMap(), _GxIdeKbManagerImport_showAll = new WeakMap(), _GxIdeKbManagerImport_categoriesActionListItemGroupMap = new WeakMap(), _GxIdeKbManagerImport_dataTypeCategoryMap = new WeakMap(), _GxIdeKbManagerImport_dataTypeDataIdMap = new WeakMap(), _GxIdeKbManagerImport_lastArrowKey = new WeakMap(), _GxIdeKbManagerImport_selectedDataTypeIds = new WeakMap(), _GxIdeKbManagerImport_focusAlreadySet = new WeakMap(), _GxIdeKbManagerImport_actionListEl = new WeakMap(), _GxIdeKbManagerImport_evaluateSelectionChanged = new WeakMap(), _GxIdeKbManagerImport_listKeyDownHandler = new WeakMap(), _GxIdeKbManagerImport_listClickHandler = new WeakMap(), _GxIdeKbManagerImport_showAllObjects = new WeakMap(), _GxIdeKbManagerImport_showRecentlyObjects = new WeakMap(), _GxIdeKbManagerImport_handleButtonTab = new WeakMap(), _GxIdeKbManagerImport_renderFooter = new WeakMap(), _GxIdeKbManagerImport_setFocus = new WeakMap();
 GxIdeKbManagerImport.style = dataTypeSelectorCss;
 
 export { GxIdeKbManagerImport as gx_ide_data_type_selector };

package/dist/esm/gx-ide-data-type-selector.entry.js.map

@@ -1 +1 @@
-{"file":"gx-ide-data-type-selector.entry.js","mappings":"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","names":[],"sources":["src/components/data-type-selector/helpers.ts","src/components/data-type-selector/data-type-selector.scss?tag=gx-ide-data-type-selector&encapsulation=shadow","src/components/data-type-selector/data-type-selector.tsx"],"sourcesContent":["import { DataTypeCategoryData, DataTypeData } from \"./data-type-selector\";\nimport {\n  ActionListItemGroup,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n\nexport const mapCategoryToListItemGroup = (\n  category: DataTypeCategoryData\n): ActionListItemGroup => {\n  const categoryGroup: ActionListItemGroup = {\n    caption: category.name,\n    id: category.name,\n    type: \"group\",\n    expanded: true,\n    expandable: true,\n    items: category.types.map(type => {\n      return {\n        caption: type.name,\n        id: type.name,\n        additionalInformation: {\n          \"stretch-start\": {\n            center: [{ imgSrc: type.icon }]\n          }\n        },\n        type: \"actionable\"\n      };\n    })\n  };\n  return categoryGroup;\n};\n\nexport const mapDataTypesToList = (\n  dataTypes: DataTypeData[]\n): ActionListModel => {\n  return dataTypes.map((dataType, index) => {\n    return {\n      caption: dataType.name,\n      id: dataType.name,\n      additionalInformation: {\n        \"stretch-start\": {\n          center: [{ imgSrc: dataType.icon || undefined }]\n        }\n      },\n      type: \"actionable\",\n      order: index\n    };\n  });\n};\n",":host {\n  position: relative;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  grid-template-rows: 1fr max-content;\n\n  // WA: Prevent a custom css rule on genexus-web from overriding --control__border-width value.\n  // TDOO: remove this when the custom style is removed from genexus-web.\n  // custom stlye is: .gx-struct-editor .tabular-grid-cell {\n  //   --control__border-width: 0;\n  // }\n\n  --control__border-width: var(--mer-border__width--sm);\n  --control__border-radius: var(--mer-border__radius--sm);\n}\n\n.main {\n  display: contents;\n}\n\n.selected-category {\n  margin: 0;\n  text-transform: capitalize;\n  margin-inline-start: var(\n    --mer-spacing--md\n  ); // TODO: Create a semantic class in Mercury for this case.\n  white-space: nowrap;\n}\n\n.footer {\n  overflow: auto;\n}\n","// Stencil\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport {\n  ActionListItemActionable,\n  ActionListItemModel,\n  ActionListItemModelExtended,\n  ActionListItemType,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library\";\nimport {\n  ActionListItemAdditionalBase,\n  ActionListItemGroup\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n// Gx Ide Ui\nimport { Locale } from \"../../common/locale\";\nimport { mapCategoryToListItemGroup, mapDataTypesToList } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/tab\",\n  \"components/tooltip\",\n  \"components/list-box\",\n  \"components/tree-view\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst ALL_CATEGORY_ID = \"all\";\nconst RECENTLY_USED_CATEGORY_ID = \"recenttly-used\";\n\nconst CLOCK_ICON = getIconPath({\n  category: \"system\",\n  name: \"time\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-data-type-selector\",\n  styleUrl: \"data-type-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/data-type-selector\"]\n})\nexport class GxIdeKbManagerImport {\n  #_componentLocale: any;\n  #showAll: boolean = false;\n  #categoriesActionListItemGroupMap: Map<string, ActionListItemGroup> = new Map<\n    string,\n    ActionListItemGroup\n  >();\n\n  @Element() el: HTMLGxIdeDataTypeSelectorElement;\n\n  @State() categoriesListBoxModel: ActionListItemModel[] = [];\n  @State() selectedCategory: string;\n  @State() statusInfo: StatusInfo[] = [];\n  @State() recentlyUsedActionListModel: ActionListModel = [];\n  @State() loading: boolean = true;\n\n  /**\n   * All possible types and its category\n   */\n  @Prop() readonly categories: DataTypeCategoryData[] = undefined;\n  @Watch(\"categories\")\n  categoriesChanged(newCategories: DataTypeCategoryData[]) {\n    if (!newCategories?.length) {\n      return;\n    }\n    this.#categoriesActionListItemGroupMap.clear();\n    newCategories.forEach(category => {\n      const categoryListBoxModel = mapCategoryToListItemGroup(category);\n      this.#categoriesActionListItemGroupMap.set(\n        category.name,\n        categoryListBoxModel\n      );\n    });\n    this.loading = false;\n    this.#showAllObjects();\n  }\n\n  /**\n   * Callback invoked when user select an item type\n   */\n  @Prop() readonly dataTypeSelectedCallback: DataTypeSelectedCallback;\n\n  /**\n   * All recently used types list\n   */\n  @Prop() readonly recentlyUsed: DataTypeData[] = [];\n  @Watch(\"recentlyUsed\")\n  recentlyUsedChanged(newRecentlyUsed: DataTypeData[]) {\n    this.recentlyUsedActionListModel = null;\n    this.recentlyUsedActionListModel = mapDataTypesToList(newRecentlyUsed);\n  }\n\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n    // initialize models\n    this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);\n  }\n\n  #handleSelectionChange = (\n    event: CustomEvent<ActionListItemModelExtended[]>\n  ) => {\n    const eventType = event.detail[0]?.item.type;\n    if (eventType === \"actionable\") {\n      const name = event.detail[0].item.caption;\n\n      const itemAdditionalBase = event.detail[0].item.additionalInformation[\n        \"stretch-start\"\n      ].center[0] as ActionListItemAdditionalBase;\n      const icon = itemAdditionalBase.imgSrc;\n\n      this.dataTypeSelectedCallback({\n        name: name,\n        icon: icon\n      });\n\n      this.#updateListBoxModelState(event.detail[0].item.caption, \"actionable\");\n    } else if (eventType === \"group\") {\n      this.#updateListBoxModelState(event.detail[0].item.caption, \"group\");\n    }\n  };\n\n  #updateListBoxModelState = (name: string, type: ActionListItemType) => {\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      this.recentlyUsedActionListModel.forEach(item => {\n        // clear selected\n        (item as ActionListItemActionable).selected = false;\n      });\n      const selectedItemIndex = this.recentlyUsed.findIndex(\n        item => item.name === name\n      );\n      if (selectedItemIndex !== -1) {\n        (\n          this.recentlyUsedActionListModel[\n            selectedItemIndex\n          ] as ActionListItemActionable\n        ).selected = true;\n      }\n    } else if (\n      type === \"group\" &&\n      this.#categoriesActionListItemGroupMap.has(name)\n    ) {\n      const group = this.#categoriesActionListItemGroupMap.get(\n        name\n      ) as ActionListItemGroup;\n      const groupUpdated = { ...group, expanded: group.expanded };\n      this.#categoriesActionListItemGroupMap.set(name, groupUpdated);\n    }\n  };\n\n  #showAllObjects = () => {\n    if (!this.#showAll) {\n      const allCategoriesActionListModel: ActionListItemModel[] = [];\n      let counter = 1;\n      const mapLength = this.#categoriesActionListItemGroupMap.size;\n      for (const key of this.#categoriesActionListItemGroupMap.keys()) {\n        allCategoriesActionListModel.push(\n          this.#categoriesActionListItemGroupMap.get(key)\n        );\n        if (counter !== mapLength) {\n          allCategoriesActionListModel.push({ type: \"separator\" });\n        }\n        counter++;\n      }\n      this.categoriesListBoxModel = allCategoriesActionListModel;\n      this.#showAll = true;\n      this.selectedCategory = ALL_CATEGORY_ID;\n    }\n  };\n\n  #showRecentlyObjects = () => {\n    this.#showAll = false;\n    this.categoriesListBoxModel = this.recentlyUsedActionListModel;\n    this.selectedCategory = RECENTLY_USED_CATEGORY_ID;\n  };\n\n  private selectedCategoryHandler = (e: MouseEvent) => {\n    this.selectedCategory = (e.currentTarget as HTMLButtonElement).dataset.name;\n    const newSelectedCategory = [\n      this.#categoriesActionListItemGroupMap.get(this.selectedCategory)\n    ];\n    this.categoriesListBoxModel = newSelectedCategory;\n    this.#showAll = false;\n  };\n\n  #renderFooter = () => {\n    const recentlyUsedBtnClass =\n      this.selectedCategory === RECENTLY_USED_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    const allBtnClass =\n      this.selectedCategory === ALL_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    let selectedCategoryDescription = this.selectedCategory;\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      selectedCategoryDescription =\n        this.#_componentLocale.fixedTypes.recentlyUsed;\n    } else if (this.selectedCategory === ALL_CATEGORY_ID) {\n      selectedCategoryDescription = this.#_componentLocale.fixedTypes.all;\n    } else {\n      selectedCategoryDescription = this.selectedCategory;\n    }\n\n    return (\n      <footer\n        class=\"footer control-footer control-footer-start spacing-body-inline spacing-body-block scrollable\n      \"\n      >\n        <div class=\"buttons-spacer\">\n          {this.recentlyUsed && this.recentlyUsed.length > 0 && (\n            <button\n              class={`button-icon-only ${recentlyUsedBtnClass}`}\n              aria-label={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              title={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              onClick={this.#showRecentlyObjects}\n            >\n              <ch-image class=\"icon-md\" src={CLOCK_ICON}></ch-image>\n            </button>\n          )}\n          <button\n            class={`button-icon-only ${allBtnClass}`}\n            onClick={this.#showAllObjects}\n            aria-label={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n            title={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n          >\n            [*]\n          </button>\n          {this.categories.map(category => {\n            const buttonClass =\n              category.name === this.selectedCategory\n                ? \"button-secondary\"\n                : \"button-tertiary\";\n\n            return (\n              <button\n                class={`button-icon-only ${buttonClass}`}\n                aria-label={category.name}\n                title={category.name}\n                onClick={this.selectedCategoryHandler}\n                data-name={category.name}\n              >\n                <ch-image class=\"icon-md\" src={category.icon}></ch-image>\n              </button>\n            );\n          })}\n        </div>\n        <p class=\"body-regular-s selected-category\">\n          {selectedCategoryDescription}\n        </p>\n      </footer>\n    );\n  };\n\n  render(): void {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.loading ? (\n          <gx-ide-loader\n            loaderTitle={this.#_componentLocale.loader.title}\n            description={this.#_componentLocale.loader.description}\n            show\n          ></gx-ide-loader>\n        ) : (\n          <section class=\"main\">\n            <ch-action-list-render\n              class=\"list-box\"\n              model={this.categoriesListBoxModel}\n              selection=\"single\"\n              onSelectedItemsChange={this.#handleSelectionChange}\n            ></ch-action-list-render>\n            {this.#renderFooter()}\n          </section>\n        )}\n      </Host>\n    );\n  }\n}\n\ntype StatusInfo = {\n  [key: string]: {\n    display: boolean;\n  };\n};\n\nexport type DataTypeCategoryData = {\n  name: string;\n  icon: string;\n  types: DataTypeData[];\n};\nexport type DataTypeData = {\n  name: string;\n  icon: string;\n};\n\nexport type DataTypeSelectedCallback = (data: {\n  name: string;\n  icon: string;\n}) => Promise<void>;\n"],"version":3}
+{"file":"gx-ide-data-type-selector.entry.js","mappings":"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","names":[],"sources":["src/components/data-type-selector/helpers.ts","src/components/data-type-selector/data-type-selector.scss?tag=gx-ide-data-type-selector&encapsulation=shadow","src/components/data-type-selector/data-type-selector.tsx"],"sourcesContent":["import { DataTypeCategoryData, DataTypeData } from \"./data-type-selector\";\nimport {\n  ActionListItemGroup,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n\nexport const mapCategoryToListItemGroup = (\n  category: DataTypeCategoryData\n): ActionListItemGroup => {\n  const categoryGroup: ActionListItemGroup = {\n    caption: category.name,\n    id: category.name,\n    type: \"group\",\n    expanded: true,\n    expandable: true,\n    items: category.types.map(type => {\n      return {\n        caption: type.name,\n        id: type.name,\n        selected: type.selected,\n        additionalInformation: {\n          \"stretch-start\": {\n            center: [{ imgSrc: type.icon }]\n          }\n        },\n        type: \"actionable\"\n      };\n    })\n  };\n  return categoryGroup;\n};\n\nexport const mapDataTypesToList = (\n  dataTypes: DataTypeData[]\n): ActionListModel => {\n  return dataTypes.map((dataType, index) => {\n    return {\n      caption: dataType.name,\n      id: dataType.name,\n      selected: dataType.selected,\n      additionalInformation: {\n        \"stretch-start\": {\n          center: [{ imgSrc: dataType.icon || undefined }]\n        }\n      },\n      type: \"actionable\",\n      order: index\n    };\n  });\n};\n",":host {\n  position: relative;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  grid-template-rows: 1fr max-content;\n\n  // WA: Prevent a custom css rule on genexus-web from overriding --control__border-width value.\n  // TDOO: remove this when the custom style is removed from genexus-web.\n  // custom stlye is: .gx-struct-editor .tabular-grid-cell {\n  //   --control__border-width: 0;\n  // }\n\n  --control__border-width: var(--mer-border__width--sm);\n  --control__border-radius: var(--mer-border__radius--sm);\n}\n\n.main {\n  display: contents;\n}\n\n.selected-category {\n  margin: 0;\n  text-transform: capitalize;\n  margin-inline-start: var(\n    --mer-spacing--md\n  ); // TODO: Create a semantic class in Mercury for this case.\n  white-space: nowrap;\n}\n\n.footer {\n  overflow: auto;\n  padding: var(--mer-spacing--xs);\n}\n","// Stencil\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport {\n  ActionListItemModel,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library\";\nimport { ActionListItemGroup } from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n// Gx Ide Ui\nimport { Locale } from \"../../common/locale\";\nimport { mapCategoryToListItemGroup, mapDataTypesToList } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/list-box\",\n  \"utils/form--full\",\n  \"utils/typography\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst ARROW_UP_KEY = \"ArrowUp\";\nconst ARROW_DOWN_KEY = \"ArrowDown\";\nconst ENTER_KEY = \"Enter\";\nconst TAB_KEY = \"Tab\";\n\nconst ALL_CATEGORY_ID = \"all\";\nconst RECENTLY_USED_CATEGORY_ID = \"recenttly-used\";\n\nconst CLOCK_ICON = getIconPath({\n  category: \"system\",\n  name: \"time\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-data-type-selector\",\n  styleUrl: \"data-type-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/data-type-selector\"]\n})\nexport class GxIdeKbManagerImport {\n  #_componentLocale: any;\n  #showAll: boolean = false;\n  #categoriesActionListItemGroupMap: Map<string, ActionListItemGroup> = new Map<\n    string,\n    ActionListItemGroup\n  >();\n\n  #dataTypeCategoryMap: Map<string, string> = new Map<string, string>();\n  #dataTypeDataIdMap: Map<string, DataTypeData> = new Map<\n    string,\n    DataTypeData\n  >();\n  #lastArrowKey: typeof ARROW_UP_KEY | typeof ARROW_DOWN_KEY | null = null;\n  #selectedDataTypeIds: SelectedDataTypeIds = {\n    // For setting focus\n    categoryId: undefined,\n    dataTypeId: undefined\n  };\n  #focusAlreadySet: boolean = false;\n\n  #actionListEl!: HTMLChActionListRenderElement;\n  @Element() el: HTMLGxIdeDataTypeSelectorElement;\n\n  @State() categoriesListBoxModel: ActionListItemModel[] = [];\n  @State() selectedCategory: string;\n  @State() recentlyUsedActionListModel: ActionListModel = [];\n  @State() loading: boolean = true;\n  @State() categoriesJustChanged: boolean = false;\n  @State() actionListDidRender: boolean = false;\n\n  /**\n   * All possible types and its category\n   */\n  @Prop() readonly categories: DataTypeCategoryData[] = undefined;\n  @Watch(\"categories\")\n  categoriesChanged(newCategories: DataTypeCategoryData[]) {\n    if (!newCategories?.length) {\n      return;\n    }\n\n    this.#categoriesActionListItemGroupMap.clear();\n    newCategories.forEach(category => {\n      const categoryListBoxModel = mapCategoryToListItemGroup(category);\n      this.#categoriesActionListItemGroupMap.set(\n        category.name,\n        categoryListBoxModel\n      );\n      category.types.forEach(type => {\n        const isSelected = type.selected;\n        if (isSelected) {\n          // For setting focus\n          this.#selectedDataTypeIds.categoryId = category.name;\n          this.#selectedDataTypeIds.dataTypeId = type.name;\n        }\n\n        this.#dataTypeCategoryMap.set(type.name, category.id);\n        this.#dataTypeDataIdMap.set(type.name, {\n          id: category.id,\n          name: type.name,\n          icon: type.icon,\n          selected: type.selected\n        });\n      });\n    });\n    this.loading = false;\n    this.#showAllObjects();\n    this.categoriesJustChanged = true;\n  }\n\n  /**\n   * Callback invoked when the user has selected an item type\n   */\n  @Prop() readonly dataTypeSelectedCallback: DataTypeSelectedCallback;\n\n  /**\n   * Defines the type of focus applied when the component renders for the first time.\n   */\n  @Prop() readonly arrowUpOnFirstElement: ArrowFirstOnFirstElement;\n\n  /**\n   * Defines the type of focus applied when the component renders for the first time.\n   */\n  @Prop() readonly focusType: \"first-element\" | \"selected\" = \"first-element\";\n\n  /**\n   * All recently used types list\n   */\n  @Prop() readonly recentlyUsed: DataTypeData[] = [];\n  @Watch(\"recentlyUsed\")\n  recentlyUsedChanged(newRecentlyUsed: DataTypeData[]) {\n    this.recentlyUsedActionListModel = null;\n    this.recentlyUsedActionListModel = mapDataTypesToList(newRecentlyUsed);\n  }\n\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n    // initialize models\n    this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);\n  }\n\n  #evaluateSelectionChanged = (path: EventTarget[]) => {\n    const chActionListItem = path.find(\n      el => (el as HTMLElement).tagName === \"CH-ACTION-LIST-ITEM\"\n    );\n    if (chActionListItem) {\n      const id = (chActionListItem as HTMLElement).id;\n      const dataTypeData = this.#dataTypeDataIdMap.get(id);\n      this.dataTypeSelectedCallback(dataTypeData);\n    }\n  };\n\n  #listKeyDownHandler = (event: KeyboardEvent) => {\n    const pressedKey = event.key;\n    const path = event.composedPath();\n\n    if (pressedKey === ARROW_UP_KEY || pressedKey === ARROW_DOWN_KEY) {\n      this.#lastArrowKey = pressedKey;\n\n      if (pressedKey === ARROW_UP_KEY) {\n        // Check if this is the first group. IF it is, let the host know,\n        // so it can close the dialog.\n\n        const chActionListItem = path.find(\n          el => (el as HTMLElement).tagName === \"CH-ACTION-LIST-ITEM\"\n        );\n\n        if (chActionListItem !== undefined) {\n          return;\n        }\n\n        // This is a ch-action-list-group\n        const actionGroup = path.find(\n          el => (el as HTMLElement).tagName === \"CH-ACTION-LIST-GROUP\"\n        );\n        const currentFocusedActionGroupId = (actionGroup as HTMLElement).id;\n\n        const firstActionListGroupId =\n          this.#actionListEl.shadowRoot.firstElementChild.id;\n\n        if (currentFocusedActionGroupId === firstActionListGroupId) {\n          this.arrowUpOnFirstElement();\n        }\n      }\n    } else if (pressedKey === ENTER_KEY) {\n      this.#evaluateSelectionChanged(path);\n    } else if (pressedKey === TAB_KEY) {\n      event.stopPropagation();\n    }\n  };\n\n  #listClickHandler = (event: MouseEvent) => {\n    if (this.#lastArrowKey) {\n      // User navigated with ArrowUp or ArrowDown\n      // Ignore, since this was not a click event.\n    } else if (event.detail === 0) {\n      // ignore keyboard Enter (Enter happens by default on buttons on onClick)\n      return;\n    } else {\n      const path = event.composedPath();\n      this.#evaluateSelectionChanged(path);\n    }\n    this.#lastArrowKey = null;\n  };\n\n  #showAllObjects = () => {\n    if (!this.#showAll) {\n      const allCategoriesActionListModel: ActionListItemModel[] = [];\n      let counter = 1;\n      const mapLength = this.#categoriesActionListItemGroupMap.size;\n      for (const key of this.#categoriesActionListItemGroupMap.keys()) {\n        allCategoriesActionListModel.push(\n          this.#categoriesActionListItemGroupMap.get(key)\n        );\n        if (counter !== mapLength) {\n          allCategoriesActionListModel.push({ type: \"separator\" });\n        }\n        counter++;\n      }\n      this.categoriesListBoxModel = allCategoriesActionListModel;\n      this.#showAll = true;\n      this.selectedCategory = ALL_CATEGORY_ID;\n    }\n  };\n\n  #showRecentlyObjects = () => {\n    this.#showAll = false;\n    this.categoriesListBoxModel = this.recentlyUsedActionListModel;\n    this.selectedCategory = RECENTLY_USED_CATEGORY_ID;\n  };\n\n  private selectedCategoryHandler = (e: MouseEvent) => {\n    this.selectedCategory = (e.currentTarget as HTMLButtonElement).dataset.name;\n    const newSelectedCategory = [\n      this.#categoriesActionListItemGroupMap.get(this.selectedCategory)\n    ];\n    this.categoriesListBoxModel = newSelectedCategory;\n    this.#showAll = false;\n  };\n\n  #handleButtonTab = (event: KeyboardEvent) => {\n    // Prevents bubbling, which causes this component to close, due to how the IDE handles Tab event\n    // in a parent element.\n    if (event.key === TAB_KEY || event.key === ENTER_KEY) {\n      event.stopPropagation();\n    }\n  };\n\n  #renderFooter = () => {\n    const recentlyUsedBtnClass =\n      this.selectedCategory === RECENTLY_USED_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    const allBtnClass =\n      this.selectedCategory === ALL_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    let selectedCategoryDescription = this.selectedCategory;\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      selectedCategoryDescription =\n        this.#_componentLocale.fixedTypes.recentlyUsed;\n    } else if (this.selectedCategory === ALL_CATEGORY_ID) {\n      selectedCategoryDescription = this.#_componentLocale.fixedTypes.all;\n    } else {\n      selectedCategoryDescription = this.selectedCategory;\n    }\n\n    return (\n      <footer\n        class=\"footer control-footer control-footer-start scrollable\n      \"\n      >\n        <div class=\"buttons-spacer\">\n          {this.recentlyUsed && this.recentlyUsed.length > 0 && (\n            <button\n              class={`button-icon-only ${recentlyUsedBtnClass}`}\n              aria-label={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              title={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              onClick={this.#showRecentlyObjects}\n              onKeyDown={this.#handleButtonTab}\n            >\n              <ch-image class=\"icon-md\" src={CLOCK_ICON}></ch-image>\n            </button>\n          )}\n          <button\n            class={`button-icon-only ${allBtnClass}`}\n            onClick={this.#showAllObjects}\n            onKeyDown={this.#handleButtonTab}\n            aria-label={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n            title={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n          >\n            [*]\n          </button>\n          {this.categories.map(category => {\n            const buttonClass =\n              category.name === this.selectedCategory\n                ? \"button-secondary\"\n                : \"button-tertiary\";\n\n            return (\n              <button\n                class={`button-icon-only ${buttonClass}`}\n                aria-label={category.name}\n                title={category.name}\n                onClick={this.selectedCategoryHandler}\n                onKeyDown={this.#handleButtonTab}\n                data-name={category.name}\n              >\n                <ch-image class=\"icon-md\" src={category.icon}></ch-image>\n              </button>\n            );\n          })}\n        </div>\n        <p class=\"body-regular-s selected-category\">\n          {selectedCategoryDescription}\n        </p>\n      </footer>\n    );\n  };\n\n  #setFocus = async () => {\n    if (this.#focusAlreadySet) {\n      return;\n    }\n    let focusableElement: HTMLElement;\n\n    setTimeout(() => {\n      // setTimeout as a WA, since the list-box elements are not rendered/read immediatelly\n      if (\n        this.focusType === \"selected\" &&\n        this.#selectedDataTypeIds.categoryId &&\n        this.#selectedDataTypeIds.dataTypeId\n      ) {\n        // set focus on the selected element\n        const selectedDataTypeEl = this.#actionListEl.shadowRoot.getElementById(\n          this.#selectedDataTypeIds.dataTypeId\n        );\n        if (selectedDataTypeEl) {\n          focusableElement = selectedDataTypeEl;\n        }\n      } else {\n        // set focus of the first element\n        const firstActionListGroup =\n          this.#actionListEl.shadowRoot.firstElementChild;\n\n        const firstButton = firstActionListGroup.shadowRoot.firstElementChild;\n        focusableElement = firstButton as HTMLButtonElement;\n      }\n\n      focusableElement && (focusableElement as HTMLElement).focus();\n      this.#focusAlreadySet = true;\n    }, 150);\n  };\n\n  render(): void {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.loading ? (\n          <gx-ide-loader\n            loaderTitle={this.#_componentLocale.loader.title}\n            description={this.#_componentLocale.loader.description}\n            show\n          ></gx-ide-loader>\n        ) : (\n          <section class=\"main\">\n            <ch-action-list-render\n              ref={async el => {\n                this.#actionListEl = el as HTMLChActionListRenderElement;\n                this.#setFocus();\n              }}\n              class=\"list-box\"\n              model={this.categoriesListBoxModel}\n              selection=\"single\"\n              onKeyDown={this.#listKeyDownHandler}\n              onClick={this.#listClickHandler}\n            ></ch-action-list-render>\n            {this.#renderFooter()}\n          </section>\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type DataTypeCategoryData = {\n  id: string;\n  name: string;\n  icon: string;\n  types: DataTypeData[];\n};\nexport type DataTypeData = {\n  id: string;\n  name: string;\n  icon: string;\n  selected: boolean;\n};\n\nexport type DataTypeSelectedCallback = (data: DataTypeData) => Promise<void>;\n\ntype SelectedDataTypeIds = {\n  categoryId: string;\n  dataTypeId: string;\n};\n\nexport type ArrowFirstOnFirstElement = () => Promise<void>;\n"],"version":3}

package/dist/esm/gx-ide-empty-state.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-10af18cf.js';
 
-const gxIdeEmptyStateCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.pill-tag{padding:1px 4px;border-radius:2px;min-inline-size:40px;text-align:center;margin-inline-end:10px;font-size:11px}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:flex;align-items:center;justify-content:center;text-align:center;inline-size:100%;position:relative}:host(.animate){animation:fadeIn var(--mer-timing--fast) forwards;inset-block-start:0}.main-container{max-width:320px;margin:0 auto;gap:var(--mer-spacing--md);padding:var(--mer-spacing--md)}.main-container__icon-wrapper{border:var(--mer-border__width--sm) dashed var(--mer-accent__primary);border-radius:50%;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;pointer-events:none}.main-container__content{gap:var(--mer-spacing--sm)}.main-container,.main-container__content{display:flex;align-items:center;flex-direction:column}@keyframes fadeIn{0%{opacity:0;inset-block-start:5px}}";
+const gxIdeEmptyStateCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.pill-tag{padding:1px 4px;border-radius:2px;min-inline-size:40px;text-align:center;margin-inline-end:10px;font-size:11px}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:flex;align-items:center;justify-content:center;text-align:center;inline-size:100%;position:relative}:host(.animate){animation:fadeIn var(--mer-timing--fast) forwards;inset-block-start:0}.main-container{max-width:320px;margin:0 auto;gap:var(--mer-spacing--md);padding:var(--mer-spacing--md)}.main-container__icon-wrapper{border:var(--mer-border__width--sm) dashed var(--mer-accent__primary);border-radius:50%;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;pointer-events:none}.main-container__content{gap:var(--mer-spacing--sm)}.main-container,.main-container__content{display:flex;align-items:center;flex-direction:column}.description{line-height:1.5 !important}@keyframes fadeIn{0%{opacity:0;inset-block-start:5px}}";
 
 const CSS_BUNDLES = [
     "resets/box-sizing",
@@ -17,7 +17,7 @@ const GxIdeEmptyState = class {
         this.stateTitle = undefined;
     }
     render() {
-        return (h(Host, { class: { animate: this.isAnimated } }, h("ch-theme", { model: CSS_BUNDLES }), h("article", { class: "main-container" }, this.stateIconSrc && (h("span", { class: "main-container__icon-wrapper" }, h("ch-image", { src: this.stateIconSrc, class: "icon-md" }))), h("div", { class: "main-container__content" }, this.stateTitle && (h("h2", { class: "body-regular-m" }, this.stateTitle)), this.stateDescription && (h("p", { class: "body-regular-s" }, this.stateDescription))), h("slot", null))));
+        return (h(Host, { class: { animate: this.isAnimated } }, h("ch-theme", { model: CSS_BUNDLES }), h("article", { class: "main-container" }, this.stateIconSrc && (h("span", { class: "main-container__icon-wrapper" }, h("ch-image", { src: this.stateIconSrc, class: "icon-md" }))), h("div", { class: "main-container__content" }, this.stateTitle && (h("h2", { class: "body-regular-m" }, this.stateTitle)), this.stateDescription && (h("p", { class: "body-regular-s description" }, this.stateDescription))), h("slot", null))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/gx-ide-empty-state.entry.js.map

@@ -1 +1 @@
-{"file":"gx-ide-empty-state.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,g1ZAAg1Z;;ACG32Z,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IACjB,kBAAkB;CACnB,CAAC;MAOW,eAAe;;;0BAOa,KAAK;;;;;IAiB5C,MAAM;QACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,IACvC,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,gBAAgB,IAC5B,IAAI,CAAC,YAAY,KAChB,YAAM,KAAK,EAAC,8BAA8B,IACxC,gBAAU,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,SAAS,GAAY,CACxD,CACR,EACD,WAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,UAAU,KACd,UAAI,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,UAAU,CAAM,CAClD,EACA,IAAI,CAAC,gBAAgB,KACpB,SAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,gBAAgB,CAAK,CACtD,CACG,EACN,eAAa,CACL,CACL,EACP;KACH;;;;;;;","names":[],"sources":["src/components/_helpers/empty-state/gx-ide-empty-state.scss?tag=gx-ide-empty-state&encapsulation=shadow","src/components/_helpers/empty-state/gx-ide-empty-state.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n\n:host {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  inline-size: 100%;\n  position: relative;\n}\n:host(.animate) {\n  animation: fadeIn var(--mer-timing--fast) forwards;\n  inset-block-start: 0;\n}\n.main-container {\n  max-width: 320px;\n  margin: 0 auto;\n  gap: var(--mer-spacing--md);\n  padding: var(--mer-spacing--md);\n\n  &__icon-wrapper {\n    border: var(--mer-border__width--sm) dashed var(--mer-accent__primary);\n    border-radius: 50%;\n    min-width: 40px;\n    min-height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n  }\n\n  &__content {\n    gap: var(--mer-spacing--sm);\n  }\n}\n.main-container,\n.main-container__content {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n    inset-block-start: 5px;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/icon\",\n  \"utils/typography\"\n];\n\n@Component({\n  tag: \"gx-ide-empty-state\",\n  styleUrl: \"gx-ide-empty-state.scss\",\n  shadow: true\n})\nexport class GxIdeEmptyState {\n  @Element() el: HTMLGxIdeEmptyStateElement;\n\n  /**\n   * Includes a subtle entry animation\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() readonly isAnimated: boolean = false;\n\n  /**\n   * The state description\n   */\n  @Prop() readonly stateDescription?: string;\n\n  /**\n   * The state icon\n   */\n  @Prop() readonly stateIconSrc?: string;\n\n  /**\n   * The state title\n   */\n  @Prop() readonly stateTitle!: string;\n\n  render() {\n    return (\n      <Host class={{ animate: this.isAnimated }}>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <article class=\"main-container\">\n          {this.stateIconSrc && (\n            <span class=\"main-container__icon-wrapper\">\n              <ch-image src={this.stateIconSrc} class=\"icon-md\"></ch-image>\n            </span>\n          )}\n          <div class=\"main-container__content\">\n            {this.stateTitle && (\n              <h2 class=\"body-regular-m\">{this.stateTitle}</h2>\n            )}\n            {this.stateDescription && (\n              <p class=\"body-regular-s\">{this.stateDescription}</p>\n            )}\n          </div>\n          <slot></slot>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"gx-ide-empty-state.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,w3ZAAw3Z;;ACGn5Z,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IACjB,kBAAkB;CACnB,CAAC;MAOW,eAAe;;;0BAOa,KAAK;;;;;IAiB5C,MAAM;QACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,IACvC,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,gBAAgB,IAC5B,IAAI,CAAC,YAAY,KAChB,YAAM,KAAK,EAAC,8BAA8B,IACxC,gBAAU,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,SAAS,GAAY,CACxD,CACR,EACD,WAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,UAAU,KACd,UAAI,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,UAAU,CAAM,CAClD,EACA,IAAI,CAAC,gBAAgB,KACpB,SAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,gBAAgB,CAAK,CAClE,CACG,EACN,eAAa,CACL,CACL,EACP;KACH;;;;;;;","names":[],"sources":["src/components/_helpers/empty-state/gx-ide-empty-state.scss?tag=gx-ide-empty-state&encapsulation=shadow","src/components/_helpers/empty-state/gx-ide-empty-state.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n\n:host {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  inline-size: 100%;\n  position: relative;\n}\n:host(.animate) {\n  animation: fadeIn var(--mer-timing--fast) forwards;\n  inset-block-start: 0;\n}\n.main-container {\n  max-width: 320px;\n  margin: 0 auto;\n  gap: var(--mer-spacing--md);\n  padding: var(--mer-spacing--md);\n\n  &__icon-wrapper {\n    border: var(--mer-border__width--sm) dashed var(--mer-accent__primary);\n    border-radius: 50%;\n    min-width: 40px;\n    min-height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n  }\n\n  &__content {\n    gap: var(--mer-spacing--sm);\n  }\n}\n.main-container,\n.main-container__content {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.description {\n  // WA: current font style (.body-regular-m) has a tight line-height\n  line-height: 1.5 !important;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n    inset-block-start: 5px;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/icon\",\n  \"utils/typography\"\n];\n\n@Component({\n  tag: \"gx-ide-empty-state\",\n  styleUrl: \"gx-ide-empty-state.scss\",\n  shadow: true\n})\nexport class GxIdeEmptyState {\n  @Element() el: HTMLGxIdeEmptyStateElement;\n\n  /**\n   * Includes a subtle entry animation\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() readonly isAnimated: boolean = false;\n\n  /**\n   * The state description\n   */\n  @Prop() readonly stateDescription?: string;\n\n  /**\n   * The state icon\n   */\n  @Prop() readonly stateIconSrc?: string;\n\n  /**\n   * The state title\n   */\n  @Prop() readonly stateTitle!: string;\n\n  render() {\n    return (\n      <Host class={{ animate: this.isAnimated }}>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <article class=\"main-container\">\n          {this.stateIconSrc && (\n            <span class=\"main-container__icon-wrapper\">\n              <ch-image src={this.stateIconSrc} class=\"icon-md\"></ch-image>\n            </span>\n          )}\n          <div class=\"main-container__content\">\n            {this.stateTitle && (\n              <h2 class=\"body-regular-m\">{this.stateTitle}</h2>\n            )}\n            {this.stateDescription && (\n              <p class=\"body-regular-s description\">{this.stateDescription}</p>\n            )}\n          </div>\n          <slot></slot>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/gx-ide-file-uploader.entry.js

@@ -127,13 +127,11 @@ const FileUploader = class {
                         const stateWithPromise = Object.assign(Object.assign({}, this.fileStates.get(id)), { uploadPromise });
                         this.fileStates = new Map(this.fileStates.set(id, stateWithPromise));
                         const result = await uploadPromise;
-                        console.log("Upload result:", { id, result });
                         const state = this.fileStates.get(id);
                         if (state) {
                             if (result.success && result.remoteId) {
                                 const updatedState = Object.assign(Object.assign({}, state), { remoteId: result.remoteId, pending: false, progress: 100 });
                                 this.fileStates = new Map(this.fileStates.set(id, updatedState));
-                                console.log("File uploaded successfully:", updatedState);
                                 await ((_a = this.fileUploadedCallback) === null || _a === void 0 ? void 0 : _a.call(this, {
                                     name: state.name,
                                     originalName: state.file.name,
@@ -143,7 +141,6 @@ const FileUploader = class {
                             else {
                                 const updatedState = Object.assign(Object.assign({}, state), { error: ((_b = result.errors) === null || _b === void 0 ? void 0 : _b.upload) || "Upload failed", pending: false });
                                 this.fileStates = new Map(this.fileStates.set(id, updatedState));
-                                console.log("File upload failed:", updatedState);
                             }
                         }
                     }
@@ -154,7 +151,6 @@ const FileUploader = class {
                                     ? error.message
                                     : "Unknown error occurred", pending: false });
                             this.fileStates = new Map(this.fileStates.set(id, updatedState));
-                            console.log("File upload error:", updatedState);
                         }
                     }
                 }
@@ -228,14 +224,6 @@ const FileUploader = class {
             const uploadedFiles = Array.from(this.fileStates.values())
                 .filter(file => {
                 const isValid = !file.pending && file.remoteId && !file.error;
-                console.log("File validation:", {
-                    id: file.id,
-                    name: file.name,
-                    pending: file.pending,
-                    remoteId: file.remoteId,
-                    error: file.error,
-                    isValid
-                });
                 return isValid;
             })
                 .map(file => ({
@@ -243,7 +231,6 @@ const FileUploader = class {
                 originalName: file.file.name,
                 remoteId: file.remoteId
             }));
-            console.log("Files to be confirmed:", uploadedFiles);
             if (uploadedFiles.length > 0) {
                 await ((_a = this.dialogConfirmedCallback) === null || _a === void 0 ? void 0 : _a.call(this, uploadedFiles));
             }