@genexus/genexus-ide-ui 1.0.17 → 1.0.19

package/dist/collection/components/new-object/new-object.js

@@ -1,64 +1,172 @@
+var __classPrivateFieldGet = (this && this.__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 = (this && this.__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;
 /* STENCIL IMPORTS */
 import { Host, h, getAssetPath } from "@stencil/core";
+import { config } from "../../common/config";
 /* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
-import { config } from "../../common/config";
+import { mapTypeCategoryDataToActionListModel, mapTypeDataToActionListModel } from "./helpers";
+import { sortActionListDefault } from "../../common/chameleon-helpers";
+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"
+];
 export class GxIdeNewObject {
     constructor() {
-        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;
             }
@@ -75,157 +183,119 @@ export class GxIdeNewObject {
                 }
             }
             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;
+        });
+        _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"
+                });
             }
-            else {
-                return this.selectedType.name;
-            }
-        };
-        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 is() { return "gx-ide-new-object"; }
     static get encapsulation() { return "shadow"; }
@@ -243,25 +313,45 @@ export class GxIdeNewObject {
     static get assetsDirs() { return ["gx-ide-assets/new-object"]; }
     static get properties() {
         return {
-            "displayTitle": {
-                "type": "boolean",
+            "defaultTypeId": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true it displays the component title on the header"
+                    "text": "Allows you to define the type selected by default when instantiating the dialog.\nRepresented by the type identifier."
                 },
-                "attribute": "display-title",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "default-type-id",
+                "reflect": false
             },
-            "shadow": {
+            "defaultParent": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "EntityData",
+                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
+                    "references": {
+                        "EntityData": {
+                            "location": "import",
+                            "path": "../../common/types",
+                            "id": "src/common/types.ts::EntityData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default value for the Module/Folder field."
+                }
+            },
+            "displayTitle": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -273,44 +363,23 @@ export class GxIdeNewObject {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Applies a shadow all around"
+                    "text": "If true it displays the component title on the header"
                 },
-                "attribute": "shadow",
+                "attribute": "display-title",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "typeCategories": {
+            "cancelCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "TypeCategoryData[]",
-                    "resolved": "TypeCategoryData[]",
+                    "original": "CancelCallback",
+                    "resolved": "() => Promise<void>",
                     "references": {
-                        "TypeCategoryData": {
+                        "CancelCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-object/new-object.tsx",
-                            "id": "src/components/new-object/new-object.tsx::TypeCategoryData"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Array containing category list and its corresponding types"
-                }
-            },
-            "parent": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "EntityData",
-                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
-                    "references": {
-                        "EntityData": {
-                            "location": "import",
-                            "path": "../../common/types",
-                            "id": "src/common/types.ts::EntityData"
+                            "id": "src/components/new-object/new-object.tsx::CancelCallback"
                         }
                     }
                 },
@@ -318,20 +387,20 @@ export class GxIdeNewObject {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Current value for Module/Folder"
+                    "text": "Callback invoked when user wants to cancel object creation"
                 }
             },
-            "defaultParent": {
+            "createCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "EntityData",
-                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
+                    "original": "CreateCallback",
+                    "resolved": "(data: NewObjectData) => Promise<string>",
                     "references": {
-                        "EntityData": {
-                            "location": "import",
-                            "path": "../../common/types",
-                            "id": "src/common/types.ts::EntityData"
+                        "CreateCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-object/new-object.tsx",
+                            "id": "src/components/new-object/new-object.tsx::CreateCallback"
                         }
                     }
                 },
@@ -339,58 +408,59 @@ export class GxIdeNewObject {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Default value for the Module/Folder field."
+                    "text": "Callback invoked when user wants to confirm object creation"
                 }
             },
-            "defaultTypeId": {
-                "type": "string",
+            "shadow": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "false",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Allows you to define the type selected by default when instantiating the dialog. Represented by the type identifier"
+                    "text": "Applies a shadow all around"
                 },
-                "attribute": "default-type-id",
-                "reflect": false
+                "attribute": "shadow",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "selectModuleCallback": {
+            "typeCategories": {
                 "type": "unknown",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "SelectModuleCallback",
-                    "resolved": "() => Promise<EntityData>",
+                    "original": "TypeCategoryData[]",
+                    "resolved": "TypeCategoryData[]",
                     "references": {
-                        "SelectModuleCallback": {
+                        "TypeCategoryData": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-object/new-object.tsx",
-                            "id": "src/components/new-object/new-object.tsx::SelectModuleCallback"
+                            "id": "src/components/new-object/new-object.tsx::TypeCategoryData"
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the action is executed on the Module/Folder filter (button '...'). It returns the information of the selected object (id and name) or 'undefined' if it was canceled."
+                    "text": "Array containing category list and its corresponding types"
                 }
             },
-            "validateNameCallback": {
+            "parent": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ValidateNameCallback",
-                    "resolved": "(name: string) => Promise<string>",
+                    "original": "EntityData",
+                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
                     "references": {
-                        "ValidateNameCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-object/new-object.tsx",
-                            "id": "src/components/new-object/new-object.tsx::ValidateNameCallback"
+                        "EntityData": {
+                            "location": "import",
+                            "path": "../../common/types",
+                            "id": "src/common/types.ts::EntityData"
                         }
                     }
                 },
@@ -398,20 +468,20 @@ export class GxIdeNewObject {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when you must validate a name. Returns error message or 'undefined' if name is not valid."
+                    "text": "Current value for Module/Folder"
                 }
             },
-            "createCallback": {
+            "selectModuleCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CreateCallback",
-                    "resolved": "(data: NewObjectData) => Promise<string>",
+                    "original": "SelectModuleCallback",
+                    "resolved": "() => Promise<EntityData>",
                     "references": {
-                        "CreateCallback": {
+                        "SelectModuleCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-object/new-object.tsx",
-                            "id": "src/components/new-object/new-object.tsx::CreateCallback"
+                            "id": "src/components/new-object/new-object.tsx::SelectModuleCallback"
                         }
                     }
                 },
@@ -419,20 +489,20 @@ export class GxIdeNewObject {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when user wants to cancel object creation"
+                    "text": "Callback invoked when the action is executed on the Module/Folder filter\n(button '...'). It returns the information of the selected object (id and\nname) or 'undefined' if it was canceled."
                 }
             },
-            "cancelCallback": {
+            "validateNameCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CancelCallback",
-                    "resolved": "() => Promise<void>",
+                    "original": "ValidateNameCallback",
+                    "resolved": "(name: string) => Promise<string>",
                     "references": {
-                        "CancelCallback": {
+                        "ValidateNameCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-object/new-object.tsx",
-                            "id": "src/components/new-object/new-object.tsx::CancelCallback"
+                            "id": "src/components/new-object/new-object.tsx::ValidateNameCallback"
                         }
                     }
                 },
@@ -440,22 +510,40 @@ export class GxIdeNewObject {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when user wants to confirm object creation"
+                    "text": "Callback invoked when you must validate a name. Returns an error message or\n'undefined' if the name is not valid."
                 }
             }
         };
     }
     static get states() {
         return {
+            "description": {},
+            "name": {},
+            "nameValidationErrorMessage": {},
             "selectedCategory": {},
             "selectedType": {},
-            "nameIsValid": {},
-            "name": {},
-            "description": {}
+            "typeCategoriesActionListModel": {},
+            "typesActionListModel": {},
+            "selectedTypeMap": {}
         };
     }
     static get events() {
         return [{
+                "method": "cancel",
+                "name": "cancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event emits the 'cancel' event"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
                 "method": "create",
                 "name": "create",
                 "bubbles": true,
@@ -484,58 +572,13 @@ export class GxIdeNewObject {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is trigger after a validation of the object name is made. Returns undefined if its valid, otherwise an error message"
+                    "text": "This event is triggered after a validation of the object name is made.\nReturns 'undefined' if it's valid, otherwise an error message."
                 },
                 "complexType": {
                     "original": "string | undefined",
                     "resolved": "string",
                     "references": {}
                 }
-            }, {
-                "method": "cancel",
-                "name": "cancel",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This event emits the 'cancel' event"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
-                "method": "componentDidLoadEvent",
-                "name": "componentDidLoadEvent",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This event is emitted once just after the component is fully loaded and the first render() occurs."
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
-                "method": "componentDidRenderFirstTime",
-                "name": "componentDidRenderFirstTime",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This event is emitted once just after the component is fully loaded and the first render() occurs"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
             }];
     }
     static get methods() {
@@ -566,9 +609,19 @@ export class GxIdeNewObject {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "selectedType",
-                "methodName": "watchSelectedTypeHandler"
+                "propName": "typeCategories",
+                "methodName": "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);
+        }
+    });
+};
 //# sourceMappingURL=new-object.js.map