@genexus/genexus-ide-ui 1.0.17 → 1.0.19

package/dist/esm/gx-ide-new-object.entry.js

@@ -1,71 +1,215 @@
 import { r as registerInstance, c as createEvent, a as getAssetPath, h, H as Host, g as getElement } from './index-27c691bc.js';
-import { L as Locale } from './locale-3c32f251.js';
 import { c as config } from './config-ed1f26d7.js';
+import { L as Locale } from './locale-3c32f251.js';
+
+const mapTypeCategoryDataToActionListModel = (categories) => {
+    return categories.map(category => {
+        return {
+            id: category.id,
+            type: "actionable",
+            additionalInformation: {
+                "stretch-start": {
+                    center: [{ imgSrc: category.icon || undefined }]
+                }
+            },
+            caption: category.name,
+            part: `category-${category.id}`
+        };
+    });
+};
+const mapTypeDataToActionListModel = (types, selectedCategoryId, selectedTypeId) => {
+    return types.map(type => {
+        return {
+            id: `${type.id}`,
+            type: "actionable",
+            imageSrc: "objects/design",
+            selected: selectedTypeId === type.id,
+            additionalInformation: {
+                "stretch-start": {
+                    center: [{ imgSrc: type.icon }]
+                }
+            },
+            caption: type.name,
+            part: `type-${selectedCategoryId}-${type.id}`
+        };
+    });
+};
+
+/**
+ * Order the items in the same order as they come.
+ */
+const sortActionListDefault = (subModel) => {
+    return subModel;
+};
 
-const newObjectCss = ":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}.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:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--mer-color__surface)}.main{display:grid;grid-template-rows:1fr auto;overflow:auto;height:100%}.categories-types-container{display:flex;flex-direction:row;flex-shrink:1;overflow:hidden;border-bottom:1px solid var(--gx-ide-container-border-color)}.categories-types-container .categories{flex:1}.categories-types-container .types{flex:2}.api-description{display:flex;flex-direction:column;flex-shrink:0;gap:var(--gx-ide-grid-row-gap);padding:var(--gx-ide-grid-row-gap)}.form{display:grid;grid-template-columns:minmax(95px, auto) 1fr;grid-template-areas:\"name-label name-input\" \"description-label description-input\" \"module-label module-input\";gap:var(--gx-ide-grid-row-gap);column-gap:0}.form .name-label{grid-area:\"name-label\"}.form .name-input{grid-area:\"name-input\"}.form .description-label{grid-area:\"description-label\"}.form .description-input{grid-area:\"description-input\"}.form .module-label{grid-area:\"module-label\"}.form .module-input{grid-area:\"module-input\"}";
+const newObjectCss = ":host{display:grid;block-size:100%}.main{display:grid;grid-template-rows:1fr max-content max-content}.categories-types-layout{grid-template-columns:1fr 1fr}.api-description-layout{padding-block:calc( var(--content-block-spacing) * 2 );display:grid;grid-template:\"api-description-title api-description-title\" \"api-name-label api-name-control\" \"api-description-label api-description-control\" \"api-module-label api-module-control\";grid-template-columns:max-content 1fr}.api-description-title{grid-area:api-description-title}.api-name-label{grid-area:api-name-label}.api-name-control{grid-area:api-name-control}.api-description-label{grid-area:api-description-label}.api-description-control{grid-area:api-description-control}.api-module-label{grid-area:api-module-label}.api-module-control{grid-area:api-module-control}";
 
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        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 _GxIdeNewObject_instances, _GxIdeNewObject_componentLocale, _GxIdeNewObject_shortcutsSrc, _GxIdeNewObject_categoriesActionListEl, _GxIdeNewObject_chShortcutsEl, _GxIdeNewObject_descriptionEl, _GxIdeNewObject_descriptionModifiedByUser, _GxIdeNewObject_moduleFolderEl, _GxIdeNewObject_nameEl, _GxIdeNewObject_nameModifiedByUser, _GxIdeNewObject_cancelCallbackHandler, _GxIdeNewObject_categoryOnSelectionChangedHandler, _GxIdeNewObject_createCallbackHandler, _GxIdeNewObject_descriptionValueHandler, _GxIdeNewObject_getNameSuggestion, _GxIdeNewObject_init, _GxIdeNewObject_initializeSelectedTypeMap, _GxIdeNewObject_nameValueHandler, _GxIdeNewObject_onBlurNameHandler, _GxIdeNewObject_onInputDescriptionHandler, _GxIdeNewObject_onInputNameHandler, _GxIdeNewObject_onNameValueChangedHandler, _GxIdeNewObject_renderModuleFolder, _GxIdeNewObject_setDefaultType, _GxIdeNewObject_setSelectedCategoryOnActionList, _GxIdeNewObject_typeOnSelectionChangedHandler, _GxIdeNewObject_validateNameHandler;
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/button",
+    "components/edit",
+    "components/icon",
+    "components/tooltip",
+    "components/list-box",
+    "utils/form",
+    "utils/layout",
+    "utils/spacing",
+    "utils/typography"
+];
 const GxIdeNewObject = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.cancel = createEvent(this, "cancel", 7);
         this.create = createEvent(this, "create", 7);
         this.validateName = createEvent(this, "validateName", 7);
-        this.cancel = createEvent(this, "cancel", 7);
-        this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        this.renderedFirstTime = false;
-        this.shortcutsSrc = getAssetPath(`./gx-ide-assets/new-object/shortcuts.json`);
-        this.descriptionModifiedByUser = false;
-        this.nameModifiedByUser = false;
-        // 9.LOCAL METHODS //
+        _GxIdeNewObject_instances.add(this);
         /**
-         * Scroll into view on both list-boxes. Only makes sense if defaultTypeId is not undefined, since otherwise in both list-boxes the initial selected item should be the first one, in which case is not needed to do scrollIntoView. Only call this method after the first render on new-object.
+         * The component hard-coded strings translations.
          */
-        this.scrollIntoViewListBoxes = () => {
-            if (this.defaultTypeId) {
-                this.categoryListBox.scrollToSelected();
-                this.typeListBox.scrollToSelected();
-            }
-        };
-        this.setFirstFocusableElement = () => {
-            this.el.addEventListener("focus", () => {
-                this.nameEl.focus();
-            });
-        };
-        this.validateInitialName = async () => {
-            const result = await this.validateNameCallback(this.name);
-            this.validateNameHandler(result);
-        };
-        this.renderModuleFolder = () => {
-            if (this.selectedType.hasModule || this.selectedType.hasFolder) {
-                let labelDescription = this._componentLocale.moduleFolder;
-                if (!this.selectedType.hasFolder) {
-                    labelDescription = this._componentLocale.moduleOnly;
-                }
-                else if (!this.selectedType.hasModule) {
-                    labelDescription = this._componentLocale.folderOnly;
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewObject_componentLocale.set(this, void 0);
+        _GxIdeNewObject_shortcutsSrc.set(this, getAssetPath(`./gx-ide-assets/new-object/shortcuts.json`));
+        /* References needed to collect data on "Create" button submit */
+        _GxIdeNewObject_categoriesActionListEl.set(this, void 0);
+        _GxIdeNewObject_chShortcutsEl.set(this, void 0);
+        _GxIdeNewObject_descriptionEl.set(this, void 0);
+        _GxIdeNewObject_descriptionModifiedByUser.set(this, false);
+        _GxIdeNewObject_moduleFolderEl.set(this, void 0);
+        _GxIdeNewObject_nameEl.set(this, void 0);
+        _GxIdeNewObject_nameModifiedByUser.set(this, false);
+        // - - - - - - - - - - -
+        _GxIdeNewObject_cancelCallbackHandler.set(this, async () => {
+            await this.cancelCallback();
+        });
+        _GxIdeNewObject_categoryOnSelectionChangedHandler.set(this, (selectionEvent) => {
+            const selection = selectionEvent.detail;
+            if (selection.length > 0) {
+                const selectedCategory = this.typeCategories.find(category => category.id === selection[0].item.id);
+                if (selectedCategory) {
+                    this.selectedCategory = selectedCategory;
+                    if (selectedCategory.types.length > 0) {
+                        this.selectedType = selectedCategory.types.find(type => type.id === this.selectedTypeMap.get(selectedCategory.id));
+                    }
                 }
-                return [
-                    h("gxg-label", { labelPosition: "start" }, labelDescription),
-                    h("gx-ide-entity-selector", { value: this.parent, defaultValue: this.defaultParent, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.moduleFolderEl = el), id: "module", part: "module" })
-                ];
             }
-            return null;
-        };
+        });
+        _GxIdeNewObject_createCallbackHandler.set(this, async () => {
+            var _a, _b, _c;
+            // validate name first
+            const nameValidation = await this.validateNameCallback(__classPrivateFieldGet(this, _GxIdeNewObject_nameEl, "f").value);
+            if (!!nameValidation) {
+                // name is invalid
+                __classPrivateFieldGet(this, _GxIdeNewObject_validateNameHandler, "f").call(this, nameValidation);
+                return;
+            }
+            const data = {
+                typeId: (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.id,
+                name: __classPrivateFieldGet(this, _GxIdeNewObject_nameEl, "f").value,
+                description: !__classPrivateFieldGet(this, _GxIdeNewObject_descriptionModifiedByUser, "f")
+                    ? undefined
+                    : __classPrivateFieldGet(this, _GxIdeNewObject_descriptionEl, "f").value,
+                moduleId: (_c = (_b = __classPrivateFieldGet(this, _GxIdeNewObject_moduleFolderEl, "f")) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.id
+            };
+            const result = await this.createCallback(data);
+            __classPrivateFieldGet(this, _GxIdeNewObject_validateNameHandler, "f").call(this, result);
+        });
+        _GxIdeNewObject_descriptionValueHandler.set(this, () => {
+            if (__classPrivateFieldGet(this, _GxIdeNewObject_nameModifiedByUser, "f") || __classPrivateFieldGet(this, _GxIdeNewObject_descriptionModifiedByUser, "f")) {
+                console.log("description modified by user");
+                return __classPrivateFieldGet(this, _GxIdeNewObject_descriptionEl, "f").value;
+            }
+            else {
+                return this.selectedType.name;
+            }
+        });
+        _GxIdeNewObject_getNameSuggestion.set(this, (selectedType) => {
+            // Type name can include whitespaces; we need to replace all whitespaces to
+            // avoid invalid suggestions:
+            return selectedType.name.replace(/\s/g, "");
+        });
         /**
-         * This method defines the initial selected category and type, and it thens initializes tha name value.
+         * This method defines the initial selected category and type, and it then
+         * initializes the name value.
          */
-        this.init = () => {
-            const defaultTypeFound = this.setDefaultType(this.defaultTypeId);
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewObject_init.set(this, () => {
+            const defaultTypeFound = __classPrivateFieldGet(this, _GxIdeNewObject_setDefaultType, "f").call(this, this.defaultTypeId);
             if (!defaultTypeFound) {
                 this.selectedCategory = this.typeCategories[0];
                 this.selectedType = this.selectedCategory.types[0];
             }
             if (this.selectedType && this.selectedType.name.length > 0) {
-                this.name = this.getNameSuggestion(this.selectedType);
+                this.name = __classPrivateFieldGet(this, _GxIdeNewObject_getNameSuggestion, "f").call(this, this.selectedType);
                 this.description = this.selectedType.name;
             }
-        };
-        this.setDefaultType = (typeId) => {
+        });
+        _GxIdeNewObject_nameValueHandler.set(this, () => {
+            if (__classPrivateFieldGet(this, _GxIdeNewObject_nameModifiedByUser, "f")) {
+                return __classPrivateFieldGet(this, _GxIdeNewObject_nameEl, "f").value;
+            }
+            else {
+                return __classPrivateFieldGet(this, _GxIdeNewObject_getNameSuggestion, "f").call(this, this.selectedType);
+            }
+        });
+        _GxIdeNewObject_onBlurNameHandler.set(this, async () => {
+            const result = await this.validateNameCallback(__classPrivateFieldGet(this, _GxIdeNewObject_nameEl, "f").value);
+            __classPrivateFieldGet(this, _GxIdeNewObject_validateNameHandler, "f").call(this, result);
+        });
+        _GxIdeNewObject_onInputDescriptionHandler.set(this, (e) => {
+            this.description = e.detail;
+            __classPrivateFieldSet(this, _GxIdeNewObject_descriptionModifiedByUser, true, "f");
+        });
+        _GxIdeNewObject_onInputNameHandler.set(this, async (e) => {
+            const name = e.detail;
+            if (!__classPrivateFieldGet(this, _GxIdeNewObject_descriptionModifiedByUser, "f")) {
+                // Description should be equal to name, unless the description was already
+                // modified by the user.
+                __classPrivateFieldGet(this, _GxIdeNewObject_descriptionEl, "f").value = name;
+            }
+            __classPrivateFieldSet(this, _GxIdeNewObject_nameModifiedByUser, true, "f");
+        });
+        _GxIdeNewObject_onNameValueChangedHandler.set(this, async (e) => {
+            const name = e.detail;
+            const result = await this.validateNameCallback(name);
+            __classPrivateFieldGet(this, _GxIdeNewObject_validateNameHandler, "f").call(this, result);
+        });
+        _GxIdeNewObject_renderModuleFolder.set(this, () => {
+            if (this.selectedType.hasModule || this.selectedType.hasFolder) {
+                let labelDescription = __classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").moduleFolder;
+                if (!this.selectedType.hasFolder) {
+                    labelDescription = __classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").moduleOnly;
+                }
+                else if (!this.selectedType.hasModule) {
+                    labelDescription = __classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").folderOnly;
+                }
+                return [
+                    h("label", {
+                        // Module/folder
+                        class: "label api-module-label", htmlFor: "module"
+                    }, labelDescription),
+                    h("gx-ide-entity-selector", { id: "module", class: "api-module-control", part: "module", labelPosition: "none", value: this.parent, defaultValue: this.defaultParent, selectEntityCallback: this.selectModuleCallback, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewObject_moduleFolderEl, el, "f")) })
+                ];
+            }
+            return null;
+        });
+        _GxIdeNewObject_setDefaultType.set(this, (typeId) => {
             if (!typeId) {
                 return false;
             }
@@ -82,165 +226,137 @@ const GxIdeNewObject = class {
                 }
             }
             return found;
-        };
-        this.getNameSuggestion = (selectedType) => {
-            // Type name can include whitespaces, we need to replace all whitespaces to avoid invalid suggestions:
-            return selectedType.name.replace(/\s/g, "");
-        };
-        this.nameValueHandler = () => {
-            if (this.nameModifiedByUser) {
-                return this.nameEl.value;
-            }
-            else {
-                return this.getNameSuggestion(this.selectedType);
-            }
-        };
-        this.descriptionValueHandler = () => {
-            if (this.nameModifiedByUser) {
-                return this.descriptionEl.value;
-            }
-            else {
-                return this.selectedType.name;
+        });
+        _GxIdeNewObject_setSelectedCategoryOnActionList.set(this, () => {
+            if (this.selectedCategory) {
+                // update model by setting the selected category
+                __classPrivateFieldGet(this, _GxIdeNewObject_categoriesActionListEl, "f").updateItemProperties(this.selectedCategory.id, {
+                    selected: true,
+                    type: "actionable"
+                });
             }
-        };
-        this.onInputNameHandler = (e) => {
-            const name = e.detail;
-            if (!this.descriptionModifiedByUser) {
-                // description should be equal to name, unless the description was already modified by the user.
-                this.descriptionEl.value = name;
+        });
+        _GxIdeNewObject_typeOnSelectionChangedHandler.set(this, (selectionEvent) => {
+            const selection = selectionEvent.detail;
+            if (selection.length > 0) {
+                this.selectedType = this.selectedCategory.types.find(type => type.id === selection[0].item.id);
+                this.selectedTypeMap.set(this.selectedCategory.id, this.selectedType.id);
             }
-            this.nameModifiedByUser = true;
-        };
-        this.onBlurNameHandler = async () => {
-            const result = await this.validateNameCallback(this.nameEl.value);
-            this.validateNameHandler(result);
-        };
-        this.onNameValueChangedHandler = async (e) => {
-            const name = e.detail;
-            const result = await this.validateNameCallback(name);
-            this.validateNameHandler(result);
-        };
-        this.onInputDescriptionHandler = (e) => {
-            this.description = e.detail;
-            this.descriptionModifiedByUser = true;
-        };
+        });
+        // #validateInitialName = async () => {
+        //   const result: string | undefined = await this.validateNameCallback(
+        //     this.name
+        //   );
+        //   this.#validateNameHandler(result);
+        // };
         /**
-         * If the parameter is undefined, is because the name is valid. Otherwise, if it receives a string, is because the name is not valid. The string is the error message to display.
+         * If the parameter is undefined, it means the name is valid. Otherwise, if it
+         * receives a string, it indicates that the name is not valid. The string is the
+         * error message to display.
          */
-        this.validateNameHandler = (result) => {
-            if (result !== undefined) {
-                // the name is not valid. display message
-                this.nameEl.validationMessage = result;
-                this.nameEl.validationStatus = "error";
-                this.nameIsValid = false;
-            }
-            else {
-                // valid name
-                this.nameEl.validationMessage = null;
-                this.nameEl.validationStatus = "indeterminate";
-                this.nameIsValid = true;
-            }
-        };
-        this.createCallbackHandler = async () => {
-            var _a, _b, _c;
-            const data = {
-                typeId: (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.id,
-                name: this.nameEl.value,
-                description: !this.descriptionModifiedByUser
-                    ? undefined
-                    : this.descriptionEl.value,
-                moduleId: (_c = (_b = this.moduleFolderEl) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.id
-            };
-            const result = await this.createCallback(data);
-            this.validateNameHandler(result);
-        };
-        this.cancelCallbackHandler = async () => {
-            await this.cancelCallback();
-        };
-        this.categoryOnSelectionChangedHandler = (selectionEvent) => {
-            const selection = selectionEvent.detail.items;
-            if (selection.length > 0) {
-                const selectedCategory = this.typeCategories[selection[0].index];
-                if (selectedCategory) {
-                    this.selectedCategory = selectedCategory;
-                    if (selectedCategory.types.length > 0) {
-                        this.selectedType = selectedCategory.types[0];
-                    }
-                }
-            }
-        };
-        this.typeOnSelectionChangedHandler = (selectionEvent) => {
-            const selection = selectionEvent.detail.items;
-            if (selection.length > 0) {
-                const selected = selection[0];
-                this.selectedType = this.selectedCategory.types[selected.index];
-            }
-        };
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewObject_validateNameHandler.set(this, (result) => {
+            this.nameValidationErrorMessage = result;
+        });
+        this.description = undefined;
+        this.name = undefined;
+        this.nameValidationErrorMessage = undefined;
         this.selectedCategory = undefined;
         this.selectedType = undefined;
-        this.nameIsValid = false;
-        this.name = undefined;
-        this.description = undefined;
+        this.typeCategoriesActionListModel = [];
+        this.typesActionListModel = [];
+        this.selectedTypeMap = new Map();
+        this.defaultTypeId = undefined;
+        this.defaultParent = undefined;
         this.displayTitle = false;
+        this.cancelCallback = undefined;
+        this.createCallback = undefined;
         this.shadow = false;
         this.typeCategories = undefined;
         this.parent = undefined;
-        this.defaultParent = undefined;
-        this.defaultTypeId = undefined;
         this.selectModuleCallback = undefined;
         this.validateNameCallback = undefined;
-        this.createCallback = undefined;
-        this.cancelCallback = undefined;
     }
-    watchSelectedTypeHandler() {
-        this.descriptionModifiedByUser = false;
+    typeCategoriesChanged(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.typeCategoriesActionListModel = mapTypeCategoryDataToActionListModel(this.typeCategories);
+        }
+    }
+    connectedCallback() {
+        // this.#validateInitialName();
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
     async componentWillLoad() {
-        this.init();
-        this._componentLocale = await Locale.getComponentStrings(this.el);
+        __classPrivateFieldGet(this, _GxIdeNewObject_init, "f").call(this);
+        __classPrivateFieldSet(this, _GxIdeNewObject_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        this.typeCategoriesChanged(this.typeCategories);
+        __classPrivateFieldGet(this, _GxIdeNewObject_instances, "m", _GxIdeNewObject_initializeSelectedTypeMap).call(this);
     }
     componentDidLoad() {
-        this.nameEl.focus();
-        this.setFirstFocusableElement();
-        this.validateInitialName();
-        this.componentDidLoadEvent.emit(true);
-    }
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
-            this.scrollIntoViewListBoxes();
-        }
+        __classPrivateFieldGet(this, _GxIdeNewObject_setSelectedCategoryOnActionList, "f").call(this);
     }
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
     /**
      * Suspends or reactivates the shortcuts
      */
     async suspendShortcuts(suspendShortcuts) {
         if (suspendShortcuts) {
-            this.gxgShortcutsEl.suspend = true;
+            __classPrivateFieldGet(this, _GxIdeNewObject_chShortcutsEl, "f").suspend = true;
         }
         else {
-            this.gxgShortcutsEl.suspend = false;
+            __classPrivateFieldGet(this, _GxIdeNewObject_chShortcutsEl, "f").suspend = false;
         }
     }
-    // 10.LOCAL METHODS (RENDER) //
-    // 11.RENDER() FUNCTION //
     render() {
         var _a;
-        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noHeadingBorder: true }, h("main", { class: "main" }, h("div", { class: "categories-types-container" }, h("div", { class: "categories" }, this.typeCategories.length > 0 ? (h("gxg-list-box", { class: "category", "single-selection": true, noBorder: true, borderEnd: true, "the-title": this._componentLocale.categorySelectionTitle, onSelectionChanged: this.categoryOnSelectionChangedHandler, ref: el => (this.categoryListBox = el) }, this.typeCategories.map(category => (h("gxg-list-box-item", { key: category.id, value: category.id, icon: category.icon, part: `category-${category.id}`, selected: this.selectedCategory.id === category.id }, category.name))))) : null), h("div", { class: "types" }, this.selectedCategory.types.length > 0 ? (h("gxg-list-box", { class: "types", "single-selection": true, noBorder: true, theTitle: this.selectedCategory.name
-                ? `${this.selectedCategory.name} ${this._componentLocale.typeSelectionTitleSuffix}`
-                : this._componentLocale.typeSelectionTitle, key: this.selectedCategory.id, onSelectionChanged: this.typeOnSelectionChangedHandler, ref: el => (this.typeListBox = el) }, this.selectedCategory.types.map(type => (h("gxg-list-box-item", { key: `${this.selectedCategory.id}-${type.id}`, icon: type.icon, part: `type-${this.selectedCategory.id}-${type.id}`, selected: this.selectedType.id === type.id }, type.name))))) : (h("p", null, "No Categories to display")))), h("div", { class: "api-description" }, h("gxg-title", { type: "title-05" }, (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.description), h("div", { class: "form" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectName), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.nameValueHandler(), toolTip: config.tooltip, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, onValueChanged: this.onNameValueChangedHandler, debounce: true, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.objectDescription), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.descriptionValueHandler(), ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-create", slot: "footer-end", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate))), h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) })));
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeNewObject_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewObject_chShortcutsEl, el, "f")) }), h("section", { class: "main" }, h("section", { class: "field-group categories-types-layout spacing-body-inline spacing-body-block-start" }, h("div", { class: "field field-block" }, h("label", { class: "label" }, __classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").categorySelectionTitle), h("ch-action-list-render", {
+            // #select a category
+            // TODO: The "scrollable" class is a WA since the action-list currently does not support scrollbar customization
+            class: "list-box", selection: "single", model: this.typeCategoriesActionListModel, sortItemsCallback: sortActionListDefault, onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeNewObject_categoryOnSelectionChangedHandler, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewObject_categoriesActionListEl, el, "f"))
+        })), h("div", { class: "field field-block" }, h("label", { class: "label" }, this.selectedCategory.name
+            ? `${this.selectedCategory.name} ${__classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").typeSelectionTitleSuffix}`
+            : __classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").typeSelectionTitle), h("ch-action-list-render", {
+            // #data management types
+            // TODO: The "scrollable" class is a WA since the action-list currently does not support scrollbar customization
+            class: "list-box", selection: "single", sortItemsCallback: sortActionListDefault, model: mapTypeDataToActionListModel(this.selectedCategory.types, this.selectedCategory.id, this.selectedType.id), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeNewObject_typeOnSelectionChangedHandler, "f")
+        }))), h("section", { class: "api-description-layout field-group spacing-body-inline" }, h("h2", {
+            // API Description
+            class: "text-align-center api-description-title heading-5"
+        }, (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.description), h("label", {
+            // Name
+            class: "label api-name-label", htmlFor: "name"
+        }, __classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").objectName), h("div", null, h("ch-edit", { autoFocus: true, class: {
+                "input": true,
+                "api-name-control": true,
+                "input-error": !!this.nameValidationErrorMessage
+            }, placeholder: "Name", value: __classPrivateFieldGet(this, _GxIdeNewObject_nameValueHandler, "f").call(this), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewObject_nameEl, el, "f")), onChange: __classPrivateFieldGet(this, _GxIdeNewObject_onNameValueChangedHandler, "f"), onInput: __classPrivateFieldGet(this, _GxIdeNewObject_onInputNameHandler, "f"), onBlur: __classPrivateFieldGet(this, _GxIdeNewObject_onBlurNameHandler, "f"), part: "name" }), this.nameValidationErrorMessage && (h("ch-tooltip", { class: "tooltip", actionElement: __classPrivateFieldGet(this, _GxIdeNewObject_nameEl, "f"), blockAlign: config.tooltipSettings.blockAlign, inlineAlign: config.tooltipSettings.inlineAlign, delay: config.tooltipSettings.delay }, this.nameValidationErrorMessage))), h("label", {
+            // Description
+            class: "label api-description-label", htmlFor: "description"
+        }, __classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").objectDescription), h("ch-edit", { autoFocus: true, class: "input api-description-control", placeholder: "Description", value: __classPrivateFieldGet(this, _GxIdeNewObject_descriptionValueHandler, "f").call(this),
+            // TODO: toolTip={config.tooltip}
+            ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewObject_descriptionEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeNewObject_onInputDescriptionHandler, "f"), part: "description" }), __classPrivateFieldGet(this, _GxIdeNewObject_renderModuleFolder, "f").call(this)), h("footer", { class: "footer control-footer-with-border spacing-body-inline spacing-body-block-end " }, h("div", { class: "buttons-spacer" }, h("button", {
+            // cancel
+            class: "button-secondary", onClick: __classPrivateFieldGet(this, _GxIdeNewObject_cancelCallbackHandler, "f"), part: "button button-cancel"
+        }, __classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").footer.btnCancel), h("button", {
+            // create
+            class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeNewObject_createCallbackHandler, "f"), disabled: !!this.nameValidationErrorMessage, part: "button button-create"
+        }, __classPrivateFieldGet(this, _GxIdeNewObject_componentLocale, "f").footer.btnCreate))))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["gx-ide-assets/new-object"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "selectedType": ["watchSelectedTypeHandler"]
+        "typeCategories": ["typeCategoriesChanged"]
     }; }
 };
+_GxIdeNewObject_componentLocale = new WeakMap(), _GxIdeNewObject_shortcutsSrc = new WeakMap(), _GxIdeNewObject_categoriesActionListEl = new WeakMap(), _GxIdeNewObject_chShortcutsEl = new WeakMap(), _GxIdeNewObject_descriptionEl = new WeakMap(), _GxIdeNewObject_descriptionModifiedByUser = new WeakMap(), _GxIdeNewObject_moduleFolderEl = new WeakMap(), _GxIdeNewObject_nameEl = new WeakMap(), _GxIdeNewObject_nameModifiedByUser = new WeakMap(), _GxIdeNewObject_cancelCallbackHandler = new WeakMap(), _GxIdeNewObject_categoryOnSelectionChangedHandler = new WeakMap(), _GxIdeNewObject_createCallbackHandler = new WeakMap(), _GxIdeNewObject_descriptionValueHandler = new WeakMap(), _GxIdeNewObject_getNameSuggestion = new WeakMap(), _GxIdeNewObject_init = new WeakMap(), _GxIdeNewObject_nameValueHandler = new WeakMap(), _GxIdeNewObject_onBlurNameHandler = new WeakMap(), _GxIdeNewObject_onInputDescriptionHandler = new WeakMap(), _GxIdeNewObject_onInputNameHandler = new WeakMap(), _GxIdeNewObject_onNameValueChangedHandler = new WeakMap(), _GxIdeNewObject_renderModuleFolder = new WeakMap(), _GxIdeNewObject_setDefaultType = new WeakMap(), _GxIdeNewObject_setSelectedCategoryOnActionList = new WeakMap(), _GxIdeNewObject_typeOnSelectionChangedHandler = new WeakMap(), _GxIdeNewObject_validateNameHandler = new WeakMap(), _GxIdeNewObject_instances = new WeakSet(), _GxIdeNewObject_initializeSelectedTypeMap = function _GxIdeNewObject_initializeSelectedTypeMap() {
+    this.typeCategories.forEach(category => {
+        if (this.defaultTypeId && category.id === this.selectedCategory.id) {
+            this.selectedTypeMap.set(category.id, this.selectedType.id);
+        }
+        else {
+            this.selectedTypeMap.set(category.id, category.types[0].id);
+        }
+    });
+};
 GxIdeNewObject.style = newObjectCss;
 
 export { GxIdeNewObject as gx_ide_new_object };