@genexus/genexus-ide-ui 1.0.8 → 1.0.10

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

@@ -1,62 +1,247 @@
-/* STENCIL IMPORTS */
-import { Host, h, getAssetPath } from "@stencil/core";
-/* CUSTOM IMPORTS */
-import { Locale } from "../../common/locale";
+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 _GxIdeNewKb_instances, _GxIdeNewKb_advancedTabHasBeenRendered, _GxIdeNewKb_componentLocale, _GxIdeNewKb_selectedFrontEndsIds, _GxIdeNewKb_shortcutsSrc, _GxIdeNewKb_kbSectionsModel, _GxIdeNewKb_authenticationTypeEl, _GxIdeNewKb_collationEl, _GxIdeNewKb_createDataFilesInKBFolderEl, _GxIdeNewKb_databaseNameEl, _GxIdeNewKb_dataSourceEl, _GxIdeNewKb_frontEndsEl, _GxIdeNewKb_kbNameEl, _GxIdeNewKb_locationEl, _GxIdeNewKb_passwordEl, _GxIdeNewKb_prototypingEnvironmentEl, _GxIdeNewKb_prototypingTargetEl, _GxIdeNewKb_savePasswordEl, _GxIdeNewKb_serverNameEl, _GxIdeNewKb_userInterfaceLanguageEl, _GxIdeNewKb_userNameEl, _GxIdeNewKb_chShortcutsEl, _GxIdeNewKb_getCheckboxValues, _GxIdeNewKb_handleCheckboxStatusChange, _GxIdeNewKb_handlerAuthenticationTypeInput, _GxIdeNewKb_handlerServerNameInput, _GxIdeNewKb_prototypingEnvironmentValueChangedHandler, _GxIdeNewKb_prototypingTargetValueChangedHandler, _GxIdeNewKb_renderAdvanced, _GxIdeNewKb_renderBasic, _GxIdeNewKb_cancelKbHandler, _GxIdeNewKb_createKbHandler, _GxIdeNewKb_evaluateCreateDataCheckboxEnabled, _GxIdeNewKb_evaluateTooltipRender, _GxIdeNewKb_evaluateUserInputsDisplay, _GxIdeNewKb_getDataSources, _GxIdeNewKb_initialSetup, _GxIdeNewKb_initialSetupAdvancedTab, _GxIdeNewKb_initializeValidatableControlsBasicTab, _GxIdeNewKb_initializeValidatableControlsAdvancedTab, _GxIdeNewKb_selectLocationHandler, _GxIdeNewKb_tabSelectionChangedHandler, _GxIdeNewKb_updateFrontEnds, _GxIdeNewKb_updateSelectedFrontEndsIds;
+import { Host, getAssetPath, h } from "@stencil/core";
 import { config } from "../../common/config";
-import { renderFormItems, getSelectedGxOption } from "../../common/common";
-import { formSubmitValidation } from "../../common/helpers";
+import { Locale } from "../../common/locale";
+import { getSelectedItem } from "../../common/common";
+import { validateControls } from "../../common/form-validation";
+import { getIconPath } from "@genexus/mercury";
+import { mapOptionsToComboBoxItemModel, renderChCheckboxItems } from "./helpers";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/tab",
+    "components/tooltip",
+    "utils/form--full",
+    "utils/layout",
+    "utils/typography",
+    "chameleon/scrollbar"
+];
+const WINDOWS_AUTHENTICATION_VALUE = "windows-authentication";
+const MAIN_SECTION_CLASSES = "main";
+const BASIC_SECTION_PARENT_CLASSES = "basic field-group spacing-body-inline";
+const SYSTEM_ICON = getIconPath({
+    category: "system",
+    name: "folder",
+    colorType: "primary"
+});
+const BASIC_TAB_SELECTOR = "basic";
+const ADVANCED_TAB_SELECTOR = "advanced";
 export class GxIdeNewKb {
     constructor() {
-        this.renderedFirstTime = false;
-        this.selectedFrontEndsIds = [];
-        this.shortcutsSrc = getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`);
-        // 9.LOCAL METHODS //
-        // 9.LOCAL METHODS -> Helpers //
-        this.initialSetup = () => {
-            this.updateSelectedFrontEndsIds();
-        };
-        // 9.LOCAL METHODS -> Not Helpers //
-        this.updateSelectedFrontEndsIds = () => {
-            this.selectedFrontEndsIds = [];
-            this.frontEndsEl.getValues().then(frontEndsCheckboxesInfo => {
-                frontEndsCheckboxesInfo.forEach(frontEnd => {
-                    if (frontEnd.value) {
-                        this.selectedFrontEndsIds.push(frontEnd.id);
-                    }
-                });
-            });
-        };
+        _GxIdeNewKb_instances.add(this);
+        _GxIdeNewKb_advancedTabHasBeenRendered.set(this, false);
         /**
-         * @description If Server Name first option is selected, "Create Data in Knowledge Base Folder" should be disabled
+         * The component hard-coded strings translations.
          */
-        this.evaluateCreateDataInKbDisabled = (e) => {
-            var _a, _b;
-            if (e) {
-                if (((_a = this.serverNames[0]) === null || _a === void 0 ? void 0 : _a.id) === e.detail) {
-                    this.createDataInKbDisabled = true;
-                }
-                else {
-                    this.createDataInKbDisabled = false;
-                }
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_componentLocale.set(this, void 0);
+        _GxIdeNewKb_selectedFrontEndsIds.set(this, []);
+        _GxIdeNewKb_shortcutsSrc.set(this, getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`));
+        _GxIdeNewKb_kbSectionsModel.set(this, []);
+        /* References needed to collect data con "Create" button submit*/
+        _GxIdeNewKb_authenticationTypeEl.set(this, void 0);
+        _GxIdeNewKb_collationEl.set(this, void 0);
+        _GxIdeNewKb_createDataFilesInKBFolderEl.set(this, void 0);
+        _GxIdeNewKb_databaseNameEl.set(this, void 0);
+        _GxIdeNewKb_dataSourceEl.set(this, void 0);
+        _GxIdeNewKb_frontEndsEl.set(this, void 0);
+        _GxIdeNewKb_kbNameEl.set(this, void 0);
+        _GxIdeNewKb_locationEl.set(this, void 0);
+        _GxIdeNewKb_passwordEl.set(this, void 0);
+        _GxIdeNewKb_prototypingEnvironmentEl.set(this, void 0);
+        _GxIdeNewKb_prototypingTargetEl.set(this, void 0);
+        _GxIdeNewKb_savePasswordEl.set(this, void 0);
+        _GxIdeNewKb_serverNameEl.set(this, void 0);
+        _GxIdeNewKb_userInterfaceLanguageEl.set(this, void 0);
+        _GxIdeNewKb_userNameEl.set(this, void 0);
+        _GxIdeNewKb_chShortcutsEl.set(this, void 0);
+        _GxIdeNewKb_handleCheckboxStatusChange.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_updateSelectedFrontEndsIds, "f").call(this);
+        });
+        _GxIdeNewKb_handlerAuthenticationTypeInput.set(this, (e) => {
+            const authenticationTypeValue = e === null || e === void 0 ? void 0 : e.detail;
+            __classPrivateFieldGet(this, _GxIdeNewKb_evaluateUserInputsDisplay, "f").call(this, authenticationTypeValue);
+        });
+        _GxIdeNewKb_handlerServerNameInput.set(this, (e) => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_evaluateCreateDataCheckboxEnabled, "f").call(this, e.detail);
+        });
+        _GxIdeNewKb_prototypingEnvironmentValueChangedHandler.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_getDataSources, "f").call(this);
+            __classPrivateFieldGet(this, _GxIdeNewKb_updateFrontEnds, "f").call(this);
+        });
+        _GxIdeNewKb_prototypingTargetValueChangedHandler.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_getDataSources, "f").call(this);
+        });
+        _GxIdeNewKb_renderAdvanced.set(this, () => {
+            return [
+                h("h2", {
+                    // #knowledge base storage
+                    class: "control-header heading-5 text-align-center"
+                }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.tabTitle),
+                h("div", { class: "field-group tab-advanced__field-group" }, h("div", {
+                    // #server name
+                    class: "field field-block server-name-field"
+                }, h("label", { class: "label", htmlFor: "serverName" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.serverName.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.serverNames.length === 0, placeholder: this.serverNames.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.serverName
+                            .disabledPlaceholder
+                        : "", value: this.serverNamesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_serverNameEl, el, "f")), model: this.serverNamesComboBoxModel, onInput: this.serverNames.length > 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_handlerServerNameInput, "f")
+                        : undefined, id: "serverName", part: "server-name" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f"))), h("div", {
+                    // #authentication type
+                    class: "field field-block authentication-type-field"
+                }, h("label", { class: "label", htmlFor: "authenticationType" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.authenticationType.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.authenticationTypes.length === 0, placeholder: this.authenticationTypes.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.authenticationType
+                            .disabledPlaceholder
+                        : "", value: this.authenticationTypesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_authenticationTypeEl, el, "f")), model: this.authenticationTypesComboBoxModel, id: "authenticationType", part: "authentication-type", onInput: this.authenticationTypes.length > 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_handlerAuthenticationTypeInput, "f")
+                        : undefined }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f"))), h("div", {
+                    // #database
+                    class: "field field-block database-field"
+                }, h("label", { class: "label", htmlFor: "databaseName" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.databaseName.label), h("ch-edit", {
+                    // TODO add placeholder
+                    class: "form-input", value: this.databaseName, id: "databaseName", part: "database-name", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_databaseNameEl, el, "f"))
+                }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_databaseNameEl, "f"))), this.userNameVisible ? (h("div", {
+                    // #username
+                    class: "field field-block username-field"
+                }, h("label", { class: "label", htmlFor: "userName" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.userName.label), h("ch-edit", {
+                    // TODO add placeholder
+                    class: "form-input", value: this.userName, id: "userName", part: "user-name", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_userNameEl, el, "f"))
+                }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_userNameEl, "f")))) : null, h("div", {
+                    // #collation
+                    class: "field field-block collation-field"
+                }, h("label", { class: "label", htmlFor: "collation" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.collation.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.serverNames.length === 0, placeholder: this.collations.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.collation
+                            .disabledPlaceholder
+                        : "", value: this.collationsInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_collationEl, el, "f")), model: this.collationsComboBoxModel, id: "collation", part: "collation" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_collationEl, "f"))), this.passwordVisible ? (h("div", {
+                    // #password
+                    class: "field field-block password-field"
+                }, h("label", { class: "label", htmlFor: "password" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.password.label), h("ch-edit", {
+                    // TODO add placeholder
+                    class: "form-input", type: "password", value: this.password, id: "password", part: "password", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_passwordEl, el, "f"))
+                }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_passwordEl, "f")))) : null, h("ch-checkbox", {
+                    // #create data in knowledge base folder
+                    class: "checkbox create-data-in-kb-checkbox", checkedValue: "createDataFilesInKBFolder", caption: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.createDataFilesInKbFolder, disabled: this.createDataInKbDisabled, part: "create-data-in-kb", id: "createDataFilesInKBFolder", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_createDataFilesInKBFolderEl, el, "f"))
+                }), this.savePasswordVisible ? (h("ch-checkbox", {
+                    // #save password
+                    class: "checkbox save-password-checkbox", checkedValue: "password", caption: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.savePassword, part: "save-password", id: "savePassword", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_savePasswordEl, el, "f"))
+                })) : null)
+            ];
+        });
+        _GxIdeNewKb_renderBasic.set(this, () => {
+            return [
+                h("div", {
+                    // #prototyping  target
+                    class: "field field-block prototyping-target"
+                }, h("label", { class: "label", htmlFor: "prototypingTarget" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.prototypingTarget.label), h("ch-combo-box-render", { id: "prototypingTarget", class: "combo-box", part: "prototyping-target", disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.prototypingTarget
+                            .disabledPlaceholder
+                        : "", value: this.prototypingTargetsInitialValue, model: this.prototypingTargetsComboBoxModel, onInput: this.prototypingTargets.length > 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetValueChangedHandler, "f")
+                        : undefined, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_prototypingTargetEl, el, "f")) }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f"))),
+                h("div", {
+                    // #user interface
+                    class: "field field-block user-interface-language"
+                }, h("label", { class: "label", htmlFor: "userInterfaceLanguage" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.userInterfaceLanguage.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.userInterfaceLanguages.length === 0, placeholder: this.userInterfaceLanguages.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.userInterfaceLanguage
+                            .disabledPlaceholder
+                        : "", value: this.userInterfaceLanguagesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_userInterfaceLanguageEl, el, "f")), model: this.userInterfaceLanguagesComboBoxModel, id: "userInterfaceLanguage", part: "user-interface-language" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f"))),
+                h("div", null, h("h2", {
+                    // back end
+                    class: "control-header heading-5 text-align-center"
+                }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.backEndLabel), h("div", { class: "field-group back-end" }, h("div", {
+                    // #prototyping environment
+                    class: "field field-block"
+                }, h("label", { class: "label", htmlFor: "prototypingEnvironment" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.prototypingEnvironment
+                    .label), h("ch-combo-box-render", { class: "combo-box", disabled: this.prototypingEnvironments.length === 0, placeholder: this.prototypingEnvironments.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd
+                            .prototypingEnvironment.disabledPlaceholder
+                        : "", value: this.prototypingEnvironmentsInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_prototypingEnvironmentEl, el, "f")), model: this.prototypingEnvironmentsComboBoxModel, onInput: this.prototypingEnvironments.length > 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentValueChangedHandler, "f")
+                        : undefined, part: "prototyping-environment", id: "prototypingEnvironment" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f"))), h("div", {
+                    // #data source
+                    class: "field field-block"
+                }, h("label", { class: "label", htmlFor: "dataSource" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.dataSource.label), h("ch-combo-box-render", { class: "combo-box", disabled: this.defaultDataSources.length === 0, placeholder: this.defaultDataSources.length === 0
+                        ? __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.dataSource
+                            .disabledPlaceholder
+                        : "", value: this.defaultDataSourcesInitialValue, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_dataSourceEl, el, "f")), model: this.defaultDataSourcesComboBoxModel, part: "data-source", id: "dataSource" }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f"))))),
+                h("div", null, h("h2", {
+                    // front end
+                    class: "control-header heading-5 text-align-center"
+                }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.frontEnd.frontEndLabel), h("div", { class: "field-group front-end", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_frontEndsEl, el, "f")) }, renderChCheckboxItems(this.frontEnds, "front-end", __classPrivateFieldGet(this, _GxIdeNewKb_handleCheckboxStatusChange, "f"))))
+            ];
+        });
+        // - - - - - - - - - -
+        _GxIdeNewKb_cancelKbHandler.set(this, () => {
+            if (this.cancelCallback) {
+                this.cancelCallback();
+            }
+        });
+        _GxIdeNewKb_createKbHandler.set(this, () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            if (this.createCallback) {
+                const createCallbackPromise = this.createCallback({
+                    authenticationType: (_a = __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f")) === null || _a === void 0 ? void 0 : _a.value,
+                    collation: (_b = __classPrivateFieldGet(this, _GxIdeNewKb_collationEl, "f")) === null || _b === void 0 ? void 0 : _b.value,
+                    createDataFilesInKBFolder: !!((_c = __classPrivateFieldGet(this, _GxIdeNewKb_createDataFilesInKBFolderEl, "f")) === null || _c === void 0 ? void 0 : _c.value),
+                    dataSource: (_d = __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f")) === null || _d === void 0 ? void 0 : _d.value,
+                    databaseName: (_e = __classPrivateFieldGet(this, _GxIdeNewKb_databaseNameEl, "f")) === null || _e === void 0 ? void 0 : _e.value,
+                    frontEnds: __classPrivateFieldGet(this, _GxIdeNewKb_selectedFrontEndsIds, "f"),
+                    kbLocation: (_f = __classPrivateFieldGet(this, _GxIdeNewKb_locationEl, "f")) === null || _f === void 0 ? void 0 : _f.value,
+                    kbName: (_g = __classPrivateFieldGet(this, _GxIdeNewKb_kbNameEl, "f")) === null || _g === void 0 ? void 0 : _g.value,
+                    password: (_h = __classPrivateFieldGet(this, _GxIdeNewKb_passwordEl, "f")) === null || _h === void 0 ? void 0 : _h.value,
+                    prototypingEnvironment: (_j = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f")) === null || _j === void 0 ? void 0 : _j.value,
+                    prototypingTarget: (_k = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f")) === null || _k === void 0 ? void 0 : _k.value,
+                    savePassword: !!((_l = __classPrivateFieldGet(this, _GxIdeNewKb_savePasswordEl, "f")) === null || _l === void 0 ? void 0 : _l.value),
+                    serverName: (_m = __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f")) === null || _m === void 0 ? void 0 : _m.value,
+                    userInterfaceLanguage: (_o = __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f")) === null || _o === void 0 ? void 0 : _o.value,
+                    userName: (_p = __classPrivateFieldGet(this, _GxIdeNewKb_userNameEl, "f")) === null || _p === void 0 ? void 0 : _p.value
+                });
+                createCallbackPromise.then((formSubmitResult) => {
+                    this.validatableControls = validateControls(formSubmitResult, this.validatableControls);
+                });
             }
-            else if ((_b = this.serverNames[0]) === null || _b === void 0 ? void 0 : _b.selected) {
+        });
+        /**
+         * Disable "Create Data in Knowledge Base Folder" if the first Server Name
+         * option is selected.
+         * */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_evaluateCreateDataCheckboxEnabled.set(this, (serverNameValue) => {
+            var _a;
+            if (((_a = this.serverNames[0]) === null || _a === void 0 ? void 0 : _a.id) === serverNameValue) {
                 this.createDataInKbDisabled = true;
             }
-        };
+            else {
+                this.createDataInKbDisabled = false;
+            }
+        });
+        _GxIdeNewKb_evaluateTooltipRender.set(this, (controlReference) => {
+            var _a, _b, _c;
+            return ((_b = (_a = this.validatableControls) === null || _a === void 0 ? void 0 : _a.get(controlReference === null || controlReference === void 0 ? void 0 : controlReference.id)) === null || _b === void 0 ? void 0 : _b.hasError) &&
+                ((_c = this.validatableControls.get(controlReference.id)) === null || _c === void 0 ? void 0 : _c.message) && (h("ch-tooltip", { class: "tooltip", actionElement: controlReference, blockAlign: config.tooltipSettings.blockAlign, inlineAlign: config.tooltipSettings.inlineAlign, delay: config.tooltipSettings.delay }, this.validatableControls.get(controlReference.id).message));
+        });
         /**
-         * @description if "Authentication Type" is "Windows Authentication" then User Name, Password, and Save Password should not be visible.
+         * If "Authentication Type" is "Windows Authentication", hide User Name,
+         * Password, and Save Password fields.
          */
-        this.evaluateAuthenticationType = (e) => {
-            var _a, _b;
-            let selectedOption;
-            if ((_a = this.authenticationTypes) === null || _a === void 0 ? void 0 : _a.length) {
-                selectedOption =
-                    ((_b = this.authenticationTypes) === null || _b === void 0 ? void 0 : _b.find(item => item.selected)) ||
-                        this.authenticationTypes[0];
-            }
-            const conditionA = (e === null || e === void 0 ? void 0 : e.detail) === "windows-authentication";
-            const conditionB = selectedOption && selectedOption.id === "windows-authentication";
-            if (conditionA || (conditionB && e === null)) {
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_evaluateUserInputsDisplay.set(this, (authenticationTypeValue) => {
+            if (authenticationTypeValue === WINDOWS_AUTHENTICATION_VALUE) {
                 this.userNameVisible = false;
                 this.passwordVisible = false;
                 this.savePasswordVisible = false;
@@ -66,11 +251,91 @@ export class GxIdeNewKb {
                 this.passwordVisible = true;
                 this.savePasswordVisible = true;
             }
-        };
+        });
+        _GxIdeNewKb_getDataSources.set(this, () => {
+            if (this.getDataSourcesCallback) {
+                const selectedPrototypingEnvironmentId = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f").value;
+                const selectedPrototypingTargetId = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f").value;
+                const updatedDefaultDataSourcesPromise = this.getDataSourcesCallback(selectedPrototypingEnvironmentId, selectedPrototypingTargetId);
+                updatedDefaultDataSourcesPromise
+                    .then(result => {
+                    if (result.length > 0) {
+                        this.defaultDataSources = result;
+                        // set first option as selected
+                        __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f").value = this.defaultDataSources[0].id;
+                    }
+                })
+                    .catch(() => {
+                    // to do
+                });
+            }
+        });
+        _GxIdeNewKb_initialSetup.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeNewKb_updateSelectedFrontEndsIds, "f").call(this);
+            // map all "Basic Tab" GxOption[]'s to ComboBoxModel's
+            this.watchDefaultDataSources(this.defaultDataSources);
+            this.watchPrototypingEnvironments(this.prototypingEnvironments);
+            this.watchPrototypingTargets(this.prototypingTargets);
+            this.watchServerNames(this.serverNames);
+            this.watchUserInterfaceLanguages(this.userInterfaceLanguages);
+        });
+        _GxIdeNewKb_initialSetupAdvancedTab.set(this, () => {
+            const selectedServerNameValue = __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f").value;
+            __classPrivateFieldGet(this, _GxIdeNewKb_evaluateCreateDataCheckboxEnabled, "f").call(this, selectedServerNameValue);
+            const selectedAuthenticationType = __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f").value;
+            __classPrivateFieldGet(this, _GxIdeNewKb_evaluateUserInputsDisplay, "f").call(this, selectedAuthenticationType);
+            // map all "Advanced Tab" GxOption[]'s to ComboBoxModel's
+            this.watchAuthenticationTypes(this.authenticationTypes);
+            this.watchCollations(this.collations);
+        });
+        _GxIdeNewKb_initializeValidatableControlsBasicTab.set(this, () => {
+            // populate #controlsValidation with the controls that could have errors.
+            const validatableControls = [
+                __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_kbNameEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f")
+            ];
+            validatableControls.forEach(validatableControl => {
+                if (validatableControl.id) {
+                    this.validatableControls.set(validatableControl.id, {
+                        reference: validatableControl,
+                        hasError: false,
+                        message: undefined
+                    });
+                }
+            });
+        });
+        _GxIdeNewKb_initializeValidatableControlsAdvancedTab.set(this, () => {
+            // populate #controlsValidation with the controls that could have errors.
+            const validatableControls = [
+                __classPrivateFieldGet(this, _GxIdeNewKb_locationEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_createDataFilesInKBFolderEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_databaseNameEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_userNameEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_collationEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_passwordEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewKb_savePasswordEl, "f")
+            ];
+            validatableControls.forEach(validatableControl => {
+                if (validatableControl.id) {
+                    this.validatableControls.set(validatableControl.id, {
+                        reference: validatableControl,
+                        hasError: false,
+                        message: undefined
+                    });
+                }
+            });
+        });
         /**
          * @description It allows defining the DBMS that will be used in the solution
          */
-        this.selectLocationHandler = () => {
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_selectLocationHandler.set(this, () => {
             this.selectLocationCallback().then(kbLocation => {
                 if (kbLocation) {
                     this.kbLocation = kbLocation;
@@ -79,13 +344,22 @@ export class GxIdeNewKb {
                     // to be defined
                 }
             });
-        };
+        });
+        _GxIdeNewKb_tabSelectionChangedHandler.set(this, (event) => {
+            if (event.detail.newSelectedId === ADVANCED_TAB_SELECTOR) {
+                this.advancedTabIsVisible = true;
+                // Some logic for advanced tab is done on componentDidRender lifecycle,
+                // since the reference to the elements is needed.
+            }
+        });
         /**
-         * @description it evaluates what front end options need to be updated on 'getFrontEndsCallback', by comparing the new state (getFrontEndsCallback promise result) and the previous state (previousFrontEndsState)
+         * Evaluates which front-end options need updates on 'getFrontEndsCallback'
+         * by comparing the new state (getFrontEndsCallback result) and previous state.
          */
-        this.updateFrontEnds = () => {
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_updateFrontEnds.set(this, () => {
             if (this.getFrontEndsCallback) {
-                const selectedPrototypingEnvironmentId = this.prototypingEnvironmentEl.value;
+                const selectedPrototypingEnvironmentId = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f").value;
                 const updatedFrontEndsPromise = this.getFrontEndsCallback(selectedPrototypingEnvironmentId);
                 updatedFrontEndsPromise
                     .then(newFrontEndsOptions => {
@@ -106,168 +380,178 @@ export class GxIdeNewKb {
                     // to do
                 });
             }
-        };
-        this.getDataSources = () => {
-            if (this.getDataSourcesCallback) {
-                const selectedPrototypingEnvironmentId = this.prototypingEnvironmentEl.value;
-                const selectedPrototypingTargetId = this.prototypingTargetEl.value;
-                const updatedDefaultDataSourcesPromise = this.getDataSourcesCallback(selectedPrototypingEnvironmentId, selectedPrototypingTargetId);
-                updatedDefaultDataSourcesPromise
-                    .then(result => {
-                    if (result.length > 0) {
-                        this.defaultDataSources = result;
-                        // set first option as selected
-                        this.dataSourceEl.value = this.defaultDataSources[0].id;
-                    }
-                })
-                    .catch(() => {
-                    // to do
-                });
-            }
-        };
-        this.prototypingEnvironmentValueChangedHandler = () => {
-            this.getDataSources();
-            this.updateFrontEnds();
-        };
-        this.prototypingTargetValueChangedHandler = () => {
-            this.getDataSources();
-        };
-        this.createKbHandler = () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-            if (this.createCallback) {
-                const createCallbackPromise = this.createCallback({
-                    kbName: (_a = this.kbNameEl) === null || _a === void 0 ? void 0 : _a.value,
-                    kbLocation: (_b = this.locationEl) === null || _b === void 0 ? void 0 : _b.value,
-                    prototypingTarget: (_c = this.prototypingTargetEl) === null || _c === void 0 ? void 0 : _c.value,
-                    userInterfaceLanguage: (_d = this.userInterfaceLanguageEl) === null || _d === void 0 ? void 0 : _d.value,
-                    prototypingEnvironment: (_e = this.prototypingEnvironmentEl) === null || _e === void 0 ? void 0 : _e.value,
-                    dataSource: (_f = this.dataSourceEl) === null || _f === void 0 ? void 0 : _f.value,
-                    frontEnds: this.selectedFrontEndsIds,
-                    serverName: (_g = this.serverNameEl) === null || _g === void 0 ? void 0 : _g.value,
-                    databaseName: (_h = this.databaseNameEl) === null || _h === void 0 ? void 0 : _h.value,
-                    collation: (_j = this.collationEl) === null || _j === void 0 ? void 0 : _j.value,
-                    createDataFilesInKBFolder: (_k = this.createDataFilesInKBFolderEl) === null || _k === void 0 ? void 0 : _k.checked,
-                    authenticationType: (_l = this.authenticationTypeEl) === null || _l === void 0 ? void 0 : _l.value,
-                    userName: (_m = this.userNameEl) === null || _m === void 0 ? void 0 : _m.value,
-                    password: (_o = this.passwordEl) === null || _o === void 0 ? void 0 : _o.value,
-                    savePassword: (_p = this.savePasswordEl) === null || _p === void 0 ? void 0 : _p.checked
-                });
-                createCallbackPromise.then((formSubmitResult) => {
-                    formSubmitValidation(formSubmitResult, this);
-                });
-            }
-        };
-        this.cancelKbHandler = () => {
-            if (this.cancelCallback) {
-                this.cancelCallback();
-            }
-        };
-        // 10.RENDER() FUNCTION //
-        this.renderTabBasic = () => {
-            return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true, isSelected: !this.isAdvanced }, h("div", { class: "basic-row-first" }, h("div", { class: "basic-row-first__container" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.prototypingTarget.label, value: getSelectedGxOption(this.prototypingTargets), ref: (el) => (this.prototypingTargetEl = el), disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
-                    ? this._componentLocale.tabBasic.prototypingTarget
-                        .disabledPlaceholder
-                    : "", onValueChanged: this.prototypingTargetValueChangedHandler, class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.userInterfaceLanguage.label, value: getSelectedGxOption(this.userInterfaceLanguages), placeholder: this.userInterfaceLanguages.length === 0
-                    ? this._componentLocale.tabBasic.userInterfaceLanguage
-                        .disabledPlaceholder
-                    : "", disabled: this.userInterfaceLanguages.length === 0, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel, contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment
-                    .label, value: getSelectedGxOption(this.prototypingEnvironments), placeholder: this.prototypingEnvironments.length === 0
-                    ? this._componentLocale.tabBasic.backEnd
-                        .prototypingEnvironment.disabledPlaceholder
-                    : "", disabled: this.prototypingEnvironments.length === 0, ref: (el) => (this.prototypingEnvironmentEl = el), onValueChanged: this.prototypingEnvironmentValueChangedHandler, class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource.label, toolTip: config.tooltip, disableFilter: true, value: getSelectedGxOption(this.defaultDataSources), placeholder: this.defaultDataSources.length === 0
-                    ? this._componentLocale.tabBasic.backEnd.dataSource
-                        .disabledPlaceholder
-                    : "", disabled: this.defaultDataSources.length === 0, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel, titleType: "secondary" }, h("gxg-form-checkbox-group", { checkboxesLabelSize: "large", ref: el => (this.frontEndsEl = el), onGroupValuesChanged: this.updateSelectedFrontEndsIds }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
-        };
-        this.renderTabAdvanced = () => {
-            return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { noContentPadding: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle, titleType: "secondary" }, h("div", { class: "knowledge-base-storage" }, h("div", { class: "knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.serverNames), placeholder: this.serverNames.length === 0
-                    ? this._componentLocale.tabAdvanced.serverName
-                        .disabledPlaceholder
-                    : "", disabled: this.serverNames.length === 0, ref: (el) => (this.serverNameEl = el), class: "server-name-combo-box", part: "server-name", onValueChanged: this.evaluateCreateDataInKbDisabled }, renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.databaseName.label, placeholder: "MyDatabase", ref: (el) => (this.databaseNameEl = el), toolTip: config.tooltip, value: this.databaseName, class: "database-name", part: "database-name" }), h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.collation.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.collations), ref: (el) => (this.collationEl = el), placeholder: this.collations.length === 0
-                    ? this._componentLocale.tabAdvanced.collation
-                        .disabledPlaceholder
-                    : "", disabled: this.serverNames.length === 0, class: "collation-combo-box", part: "collation" }, renderFormItems("gxg-combo-box-item", this.collations, "collation")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.createDataFilesInKbFolder, ref: (el) => (this.createDataFilesInKBFolderEl =
-                    el), alignTop: true, checked: this.createDataFilesInKBFolder, disabled: this.createDataInKbDisabled, class: "create-data-in-kb", part: "create-data-in-kb" })), h("div", { class: {
-                    "knowledge-base-storage__col-right": true,
-                    "knowledge-base-storage__col-right--windows-authentication": !this.userNameVisible
-                } }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.authenticationType.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.authenticationTypes), ref: (el) => (this.authenticationTypeEl = el), placeholder: this.authenticationTypes.length === 0
-                    ? this._componentLocale.tabAdvanced.authenticationType
-                        .disabledPlaceholder
-                    : "", disabled: this.authenticationTypes.length === 0, class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), this.userNameVisible ? (h("gxg-form-text", { labelPosition: "above", toolTip: config.tooltip, label: this._componentLocale.tabAdvanced.userName.label, ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" })) : null, this.passwordVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.password.label, password: true, toolTip: config.tooltip, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" })) : null, this.savePasswordVisible ? (h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.savePassword, ref: (el) => (this.savePasswordEl = el), checked: this.savePassword, class: "save-password", part: "save-password" })) : null)))));
-        };
+        });
+        _GxIdeNewKb_updateSelectedFrontEndsIds.set(this, () => {
+            __classPrivateFieldSet(this, _GxIdeNewKb_selectedFrontEndsIds, __classPrivateFieldGet(this, _GxIdeNewKb_instances, "m", _GxIdeNewKb_getCheckboxValues).call(this), "f");
+        });
+        this.advancedTabIsVisible = false;
+        this.validatableControls = new Map();
         this.createDataInKbDisabled = false;
         this.userNameVisible = true;
         this.passwordVisible = true;
         this.savePasswordVisible = true;
-        this.displayTitle = false;
+        this.authenticationTypesComboBoxModel = [];
+        this.authenticationTypesInitialValue = undefined;
+        this.collationsComboBoxModel = [];
+        this.collationsInitialValue = undefined;
+        this.defaultDataSourcesComboBoxModel = [];
+        this.defaultDataSourcesInitialValue = undefined;
+        this.prototypingTargetsComboBoxModel = [];
+        this.prototypingTargetsInitialValue = undefined;
+        this.prototypingEnvironmentsComboBoxModel = [];
+        this.prototypingEnvironmentsInitialValue = undefined;
+        this.serverNamesComboBoxModel = [];
+        this.serverNamesInitialValue = undefined;
+        this.userInterfaceLanguagesComboBoxModel = [];
+        this.userInterfaceLanguagesInitialValue = undefined;
+        this.authenticationTypes = undefined;
+        this.cancelCallback = undefined;
+        this.collations = undefined;
+        this.createCallback = undefined;
+        this.createDataFilesInKBFolder = false;
+        this.databaseName = undefined;
         this.defaultDataSources = undefined;
+        this.displayTitle = false;
         this.frontEnds = undefined;
+        this.getDataSourcesCallback = undefined;
+        this.getFrontEndsCallback = undefined;
         this.isAdvanced = false;
         this.kbLocation = undefined;
-        this.selectLocationCallback = undefined;
         this.kbName = undefined;
+        this.password = undefined;
         this.prototypingEnvironments = undefined;
         this.prototypingTargets = undefined;
-        this.userInterfaceLanguages = undefined;
-        this.authenticationTypes = undefined;
-        this.collations = undefined;
-        this.createDataFilesInKBFolder = false;
-        this.databaseName = undefined;
-        this.password = undefined;
         this.savePassword = false;
+        this.selectLocationCallback = undefined;
         this.serverNames = undefined;
+        this.userInterfaceLanguages = undefined;
         this.userName = undefined;
-        this.test = undefined;
-        this.createCallback = undefined;
-        this.cancelCallback = undefined;
-        this.getDataSourcesCallback = undefined;
-        this.getFrontEndsCallback = undefined;
     }
-    // 6.COMPONENT LIFECYCLE METHODS //
+    watchAuthenticationTypes(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.authenticationTypesComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.authenticationTypesInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchCollations(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.collationsComboBoxModel = mapOptionsToComboBoxItemModel(newValue);
+            this.collationsInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchDefaultDataSources(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.defaultDataSourcesComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.defaultDataSourcesInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchPrototypingEnvironments(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.prototypingEnvironmentsComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.prototypingEnvironmentsInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchPrototypingTargets(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.prototypingTargetsComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.prototypingTargetsInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchServerNames(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.serverNamesComboBoxModel = mapOptionsToComboBoxItemModel(newValue);
+            this.serverNamesInitialValue = getSelectedItem(newValue);
+        }
+    }
+    watchUserInterfaceLanguages(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.userInterfaceLanguagesComboBoxModel =
+                mapOptionsToComboBoxItemModel(newValue);
+            this.userInterfaceLanguagesInitialValue = getSelectedItem(newValue);
+        }
+    }
     async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.evaluateCreateDataInKbDisabled(null);
-        this.evaluateAuthenticationType(null);
+        __classPrivateFieldSet(this, _GxIdeNewKb_componentLocale, await Locale.getComponentStrings(this.el), "f");
         this.previousFrontEndsState = this.frontEnds;
+        __classPrivateFieldSet(this, _GxIdeNewKb_kbSectionsModel, [
+            {
+                id: BASIC_TAB_SELECTOR,
+                name: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.tabLabel
+            },
+            {
+                id: ADVANCED_TAB_SELECTOR,
+                name: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabAdvanced.tabLabel
+            }
+        ], "f");
     }
     componentDidLoad() {
-        this.initialSetup();
-        this.kbNameEl.focus();
+        __classPrivateFieldGet(this, _GxIdeNewKb_initialSetup, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeNewKb_initializeValidatableControlsBasicTab, "f").call(this);
     }
     componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+        if (this.advancedTabIsVisible && !__classPrivateFieldGet(this, _GxIdeNewKb_advancedTabHasBeenRendered, "f")) {
+            // just call this once.
+            __classPrivateFieldGet(this, _GxIdeNewKb_initialSetupAdvancedTab, "f").call(this);
+            __classPrivateFieldGet(this, _GxIdeNewKb_initializeValidatableControlsAdvancedTab, "f").call(this);
+            __classPrivateFieldSet(this, _GxIdeNewKb_advancedTabHasBeenRendered, true, "f");
         }
     }
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
     /**
      * Suspends or reactivates the shortcuts
      */
     async suspendShortcuts(suspendShortcuts) {
         if (suspendShortcuts) {
-            this.gxgShortcutsEl.suspend = true;
+            __classPrivateFieldGet(this, _GxIdeNewKb_chShortcutsEl, "f").suspend = true;
         }
         else {
-            this.gxgShortcutsEl.suspend = false;
+            __classPrivateFieldGet(this, _GxIdeNewKb_chShortcutsEl, "f").suspend = false;
         }
     }
-    /** *****************************
-     *  11.RENDER() FUNCTION
-     ********************************/
     render() {
-        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("header", { class: {
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeNewKb_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_chShortcutsEl, el, "f")) }), h("section", { class: "section" }, h("header", { class: {
+                "field-group": true,
+                "control-header-with-border": !this.isAdvanced,
+                "control-header": this.isAdvanced,
                 "header": true,
-                "grid": true,
-                "header--is-advanced": this.isAdvanced
-            }, slot: "header" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.header.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, toolTip: config.tooltip, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), this.isAdvanced
-            ? [
-                h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation),
-                h("gxg-form-text", { labelPosition: "start", placeholder: "C:\\Models", maxWidth: "100%", value: this.kbLocation, ref: (el) => (this.locationEl = el), disabled: !this.isAdvanced, part: "kb-location", class: "location-input" }),
-                h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" })
-            ]
-            : null), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { class: "gxg-tabs", noBorder: true }, this.isAdvanced ? (h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", hidden: !this.isAdvanced, part: "tab-button-advanced" }))) : null, this.renderTabBasic(), this.isAdvanced && this.renderTabAdvanced())), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate))), h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) })));
+                "header-two-cols": this.isAdvanced,
+                "header-one-col": !this.isAdvanced,
+                "spacing-body-block-start": true,
+                "spacing-body-inline": true
+            } }, h("div", {
+            // #kb name
+            class: "field field-inline kb-name"
+        }, h("label", { class: "label kb-label", htmlFor: "kbName" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").header.kbName), h("ch-edit", {
+            // TODO add placeholder
+            autoFocus: true, class: "form-input kb-input", placeholder: "SalesInventory", value: this.kbName, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_kbNameEl, el, "f")), id: "kbName", part: "kb-name"
+        }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_kbNameEl, "f"))), this.isAdvanced && (h("div", { class: "location-wrapper" }, h("div", {
+            // #location
+            class: "field field-inline location"
+        }, h("label", { class: "label location-label", htmlFor: "kbLocation" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").header.kbLocation), h("ch-edit", {
+            // TODO add placeholder
+            class: "form-input location-input", value: this.kbLocation, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_locationEl, el, "f")), id: "kbLocation", part: "kb-location"
+        }), __classPrivateFieldGet(this, _GxIdeNewKb_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewKb_locationEl, "f"))), h("button", { class: "button-tertiary button-icon-only location-icon", "aria-label": __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").header.selectLocationButton, title: __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").header.selectLocationButton, part: "button-select-location", onClick: __classPrivateFieldGet(this, _GxIdeNewKb_selectLocationHandler, "f") }, h("ch-image", { class: "icon-md", src: SYSTEM_ICON }))))), this.isAdvanced ? (h("ch-tab-render", {
+            // #tab
+            class: {
+                scrollable: true,
+                tab: true,
+                [MAIN_SECTION_CLASSES]: true
+            }, direction: "block", model: __classPrivateFieldGet(this, _GxIdeNewKb_kbSectionsModel, "f"), selectedId: BASIC_TAB_SELECTOR, overflow: "auto scroll", contain: "size", onSelectedItemChange: !this.advancedTabIsVisible && __classPrivateFieldGet(this, _GxIdeNewKb_tabSelectionChangedHandler, "f")
+        }, h("div", { slot: BASIC_TAB_SELECTOR, class: BASIC_SECTION_PARENT_CLASSES, part: "tab-button-basic" }, __classPrivateFieldGet(this, _GxIdeNewKb_renderBasic, "f").call(this)), this.advancedTabIsVisible && (h("div", { slot: ADVANCED_TAB_SELECTOR, class: "advanced spacing-body-inline", part: "tab-button-advanced" }, __classPrivateFieldGet(this, _GxIdeNewKb_renderAdvanced, "f").call(this))))) : (h("div", { class: MAIN_SECTION_CLASSES }, h("div", { class: BASIC_SECTION_PARENT_CLASSES }, __classPrivateFieldGet(this, _GxIdeNewKb_renderBasic, "f").call(this)))), h("footer", { class: {
+                "control-footer": this.isAdvanced,
+                "control-footer-with-border": !this.isAdvanced,
+                "spacing-body-block-end": true,
+                "spacing-body-inline": true
+            } }, h("div", { class: "buttons-spacer" }, h("button", {
+            // #cancel
+            class: "button-secondary", id: "button-cancel", onClick: __classPrivateFieldGet(this, _GxIdeNewKb_cancelKbHandler, "f"), part: "button-cancel"
+        }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").footer.btnCancel), h("button", {
+            // #create
+            class: "button-primary", id: "button-create", onClick: __classPrivateFieldGet(this, _GxIdeNewKb_createKbHandler, "f"), part: "button-create"
+        }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").footer.btnCreate))))));
     }
     static get is() { return "gx-ide-new-kb"; }
     static get encapsulation() { return "shadow"; }
@@ -284,27 +568,9 @@ export class GxIdeNewKb {
     static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
     static get properties() {
         return {
-            "displayTitle": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true it displays the component title on the header"
-                },
-                "attribute": "display-title",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "defaultDataSources": {
+            "authenticationTypes": {
                 "type": "unknown",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "GxOption[]",
                     "resolved": "GxOption[]",
@@ -320,12 +586,33 @@ export class GxIdeNewKb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "It allows defining the DBMS that will be used in the solution"
+                    "text": "Defines the type of authentication for the connection to the previously defined database"
                 }
             },
-            "frontEnds": {
+            "cancelCallback": {
                 "type": "unknown",
-                "mutable": true,
+                "mutable": false,
+                "complexType": {
+                    "original": "CancelCallback",
+                    "resolved": "() => Promise<void>",
+                    "references": {
+                        "CancelCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-kb/new-kb.tsx",
+                            "id": "src/components/new-kb/new-kb.tsx::CancelCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked when the user wants to cancel KB creation (\u2018Cancel\u2019 button)"
+                }
+            },
+            "collations": {
+                "type": "unknown",
+                "mutable": false,
                 "complexType": {
                     "original": "GxOption[]",
                     "resolved": "GxOption[]",
@@ -341,66 +628,49 @@ export class GxIdeNewKb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "It allows selecting multiple generators for the front end"
+                    "text": "DB Collations"
                 }
             },
-            "isAdvanced": {
-                "type": "boolean",
+            "createCallback": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "CreateCallback",
+                    "resolved": "(data: NewKBData) => Promise<FormSubmitResult>",
+                    "references": {
+                        "CreateCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-kb/new-kb.tsx",
+                            "id": "src/components/new-kb/new-kb.tsx::CreateCallback"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specify whether it is feasible to display information related to local configuration parameters"
-                },
-                "attribute": "is-advanced",
-                "reflect": false,
-                "defaultValue": "false"
+                    "text": "Callback that will be invoked when the user confirms KB creation (\u2018Create\u2019 button)"
+                }
             },
-            "kbLocation": {
-                "type": "string",
-                "mutable": true,
+            "createDataFilesInKBFolder": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Default suggested path to a directory where the information related to the KB will be stored/generated"
-                },
-                "attribute": "kb-location",
-                "reflect": false
-            },
-            "selectLocationCallback": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectLocationCallback",
-                    "resolved": "() => Promise<string>",
-                    "references": {
-                        "SelectLocationCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-kb/new-kb.tsx",
-                            "id": "src/components/new-kb/new-kb.tsx::SelectLocationCallback"
-                        }
-                    }
+                    "text": "Disabled if the first item of the 'Server Name' combo is selected"
                 },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "This is a function provided by the developer that returns a string, with the location path"
-                }
+                "attribute": "create-data-files-in-k-b-folder",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "kbName": {
+            "databaseName": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -412,14 +682,14 @@ export class GxIdeNewKb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The knowledge base default suggested name"
+                    "text": "Name of the database where we are going to persist the information of our KB"
                 },
-                "attribute": "kb-name",
+                "attribute": "database-name",
                 "reflect": false
             },
-            "prototypingEnvironments": {
+            "defaultDataSources": {
                 "type": "unknown",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "GxOption[]",
                     "resolved": "GxOption[]",
@@ -435,33 +705,30 @@ export class GxIdeNewKb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "It allows selecting the default environment that the KB will have (additional environments can be created later)"
+                    "text": "It allows defining the DBMS that will be used in the solution"
                 }
             },
-            "prototypingTargets": {
-                "type": "unknown",
+            "displayTitle": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "GxOption[]",
-                    "resolved": "GxOption[]",
-                    "references": {
-                        "GxOption": {
-                            "location": "import",
-                            "path": "../../common/types",
-                            "id": "src/common/types.ts::GxOption"
-                        }
-                    }
+                    "original": "false",
+                    "resolved": "boolean",
+                    "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Path to a directory where the information related to the KB will be stored/generated"
-                }
+                    "text": "If true it displays the component title on the header"
+                },
+                "attribute": "display-title",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "userInterfaceLanguages": {
+            "frontEnds": {
                 "type": "unknown",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "GxOption[]",
                     "resolved": "GxOption[]",
@@ -477,56 +744,56 @@ export class GxIdeNewKb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specify the language in which the application screens will be developed (default language)"
+                    "text": "It allows selecting multiple generators for the front end"
                 }
             },
-            "authenticationTypes": {
+            "getDataSourcesCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GxOption[]",
-                    "resolved": "GxOption[]",
+                    "original": "GetDataSourcesCallback",
+                    "resolved": "(selectedPrototypingEnvironmentId: string, selectedPrototypingTargetId: string) => Promise<GxOption[]>",
                     "references": {
-                        "GxOption": {
-                            "location": "import",
-                            "path": "../../common/types",
-                            "id": "src/common/types.ts::GxOption"
+                        "GetDataSourcesCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-kb/new-kb.tsx",
+                            "id": "src/components/new-kb/new-kb.tsx::GetDataSourcesCallback"
                         }
                     }
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the type of authentication for the connection to the previously defined database"
+                    "text": "Callback invoked when the user wants to cancel KB creation (\u2018Cancel\u2019 button)"
                 }
             },
-            "collations": {
+            "getFrontEndsCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GxOption[]",
-                    "resolved": "GxOption[]",
+                    "original": "GetFrontEndsCallback",
+                    "resolved": "(selectedPrototypingEnvironmentId: string) => Promise<GxOption[]>",
                     "references": {
-                        "GxOption": {
-                            "location": "import",
-                            "path": "../../common/types",
-                            "id": "src/common/types.ts::GxOption"
+                        "GetFrontEndsCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-kb/new-kb.tsx",
+                            "id": "src/components/new-kb/new-kb.tsx::GetFrontEndsCallback"
                         }
                     }
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "DB Collations"
+                    "text": "Callback invoked when the user changes the prototyping environment, allowing for the modification of the list of front ends"
                 }
             },
-            "createDataFilesInKBFolder": {
+            "isAdvanced": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
+                    "original": "false",
                     "resolved": "boolean",
                     "references": {}
                 },
@@ -534,15 +801,15 @@ export class GxIdeNewKb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled if the first item of the 'Server Name' combo is selected"
+                    "text": "Specify whether it is feasible to display information related to local configuration parameters"
                 },
-                "attribute": "create-data-files-in-k-b-folder",
+                "attribute": "is-advanced",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "databaseName": {
+            "kbLocation": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -552,12 +819,12 @@ export class GxIdeNewKb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Name of the database where we are going to persist the information of our KB"
+                    "text": "Default suggested path to a directory where the information related to the KB will be stored/generated"
                 },
-                "attribute": "database-name",
+                "attribute": "kb-location",
                 "reflect": false
             },
-            "password": {
+            "kbName": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -569,30 +836,29 @@ export class GxIdeNewKb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Password for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)"
+                    "text": "The knowledge base default suggested name"
                 },
-                "attribute": "password",
+                "attribute": "kb-name",
                 "reflect": false
             },
-            "savePassword": {
-                "type": "boolean",
+            "password": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visible if something other than Windows Authentication is selected"
+                    "text": "Password for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)"
                 },
-                "attribute": "save-password",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "password",
+                "reflect": false
             },
-            "serverNames": {
+            "prototypingEnvironments": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -610,155 +876,154 @@ export class GxIdeNewKb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Name of the DB server where we want to persist the information of our KB"
+                    "text": "It allows selecting the default environment that the KB will have (additional environments can be created later)"
                 }
             },
-            "userName": {
-                "type": "string",
+            "prototypingTargets": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "GxOption[]",
+                    "resolved": "GxOption[]",
+                    "references": {
+                        "GxOption": {
+                            "location": "import",
+                            "path": "../../common/types",
+                            "id": "src/common/types.ts::GxOption"
+                        }
+                    }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Username for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)"
-                },
-                "attribute": "user-name",
-                "reflect": false
+                    "text": "Path to a directory where the information related to the KB will be stored/generated"
+                }
             },
-            "test": {
-                "type": "string",
+            "savePassword": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Username for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)"
+                    "text": "Visible if something other than Windows Authentication is selected"
                 },
-                "attribute": "test",
-                "reflect": false
+                "attribute": "save-password",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "createCallback": {
+            "selectLocationCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CreateCallback",
-                    "resolved": "(data: NewKBData) => Promise<FormSubmitResult>",
+                    "original": "SelectLocationCallback",
+                    "resolved": "() => Promise<string>",
                     "references": {
-                        "CreateCallback": {
+                        "SelectLocationCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-kb/new-kb.tsx",
-                            "id": "src/components/new-kb/new-kb.tsx::CreateCallback"
+                            "id": "src/components/new-kb/new-kb.tsx::SelectLocationCallback"
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback that will be invoked when the user confirms KB creation (\u2018Create\u2019 button)"
+                    "text": "This is a function provided by the developer that returns a string, with the location path"
                 }
             },
-            "cancelCallback": {
+            "serverNames": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CancelCallback",
-                    "resolved": "() => Promise<void>",
+                    "original": "GxOption[]",
+                    "resolved": "GxOption[]",
                     "references": {
-                        "CancelCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-kb/new-kb.tsx",
-                            "id": "src/components/new-kb/new-kb.tsx::CancelCallback"
+                        "GxOption": {
+                            "location": "import",
+                            "path": "../../common/types",
+                            "id": "src/common/types.ts::GxOption"
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user wants to cancel KB creation (\u2018Cancel\u2019 button)"
+                    "text": "Name of the DB server where we want to persist the information of our KB"
                 }
             },
-            "getDataSourcesCallback": {
+            "userInterfaceLanguages": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GetDataSourcesCallback",
-                    "resolved": "(selectedPrototypingEnvironmentId: string, selectedPrototypingTargetId: string) => Promise<GxOption[]>",
+                    "original": "GxOption[]",
+                    "resolved": "GxOption[]",
                     "references": {
-                        "GetDataSourcesCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-kb/new-kb.tsx",
-                            "id": "src/components/new-kb/new-kb.tsx::GetDataSourcesCallback"
+                        "GxOption": {
+                            "location": "import",
+                            "path": "../../common/types",
+                            "id": "src/common/types.ts::GxOption"
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user wants to cancel KB creation (\u2018Cancel\u2019 button)"
+                    "text": "Specify the language in which the application screens will be developed (default language)"
                 }
             },
-            "getFrontEndsCallback": {
-                "type": "unknown",
+            "userName": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "GetFrontEndsCallback",
-                    "resolved": "(selectedPrototypingEnvironmentId: string) => Promise<GxOption[]>",
-                    "references": {
-                        "GetFrontEndsCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-kb/new-kb.tsx",
-                            "id": "src/components/new-kb/new-kb.tsx::GetFrontEndsCallback"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user changes the prototyping environment, allowing for the modification of the list of front ends"
-                }
+                    "text": "Username for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)"
+                },
+                "attribute": "user-name",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
+            "advancedTabIsVisible": {},
+            "validatableControls": {},
             "createDataInKbDisabled": {},
             "userNameVisible": {},
             "passwordVisible": {},
-            "savePasswordVisible": {}
+            "savePasswordVisible": {},
+            "authenticationTypesComboBoxModel": {},
+            "authenticationTypesInitialValue": {},
+            "collationsComboBoxModel": {},
+            "collationsInitialValue": {},
+            "defaultDataSourcesComboBoxModel": {},
+            "defaultDataSourcesInitialValue": {},
+            "prototypingTargetsComboBoxModel": {},
+            "prototypingTargetsInitialValue": {},
+            "prototypingEnvironmentsComboBoxModel": {},
+            "prototypingEnvironmentsInitialValue": {},
+            "serverNamesComboBoxModel": {},
+            "serverNamesInitialValue": {},
+            "userInterfaceLanguagesComboBoxModel": {},
+            "userInterfaceLanguagesInitialValue": {}
         };
     }
-    static get events() {
-        return [{
-                "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() {
         return {
             "suspendShortcuts": {
@@ -785,5 +1050,37 @@ export class GxIdeNewKb {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "authenticationTypes",
+                "methodName": "watchAuthenticationTypes"
+            }, {
+                "propName": "collations",
+                "methodName": "watchCollations"
+            }, {
+                "propName": "defaultDataSources",
+                "methodName": "watchDefaultDataSources"
+            }, {
+                "propName": "prototypingEnvironments",
+                "methodName": "watchPrototypingEnvironments"
+            }, {
+                "propName": "prototypingTargets",
+                "methodName": "watchPrototypingTargets"
+            }, {
+                "propName": "serverNames",
+                "methodName": "watchServerNames"
+            }, {
+                "propName": "userInterfaceLanguages",
+                "methodName": "watchUserInterfaceLanguages"
+            }];
+    }
 }
+_GxIdeNewKb_advancedTabHasBeenRendered = new WeakMap(), _GxIdeNewKb_componentLocale = new WeakMap(), _GxIdeNewKb_selectedFrontEndsIds = new WeakMap(), _GxIdeNewKb_shortcutsSrc = new WeakMap(), _GxIdeNewKb_kbSectionsModel = new WeakMap(), _GxIdeNewKb_authenticationTypeEl = new WeakMap(), _GxIdeNewKb_collationEl = new WeakMap(), _GxIdeNewKb_createDataFilesInKBFolderEl = new WeakMap(), _GxIdeNewKb_databaseNameEl = new WeakMap(), _GxIdeNewKb_dataSourceEl = new WeakMap(), _GxIdeNewKb_frontEndsEl = new WeakMap(), _GxIdeNewKb_kbNameEl = new WeakMap(), _GxIdeNewKb_locationEl = new WeakMap(), _GxIdeNewKb_passwordEl = new WeakMap(), _GxIdeNewKb_prototypingEnvironmentEl = new WeakMap(), _GxIdeNewKb_prototypingTargetEl = new WeakMap(), _GxIdeNewKb_savePasswordEl = new WeakMap(), _GxIdeNewKb_serverNameEl = new WeakMap(), _GxIdeNewKb_userInterfaceLanguageEl = new WeakMap(), _GxIdeNewKb_userNameEl = new WeakMap(), _GxIdeNewKb_chShortcutsEl = new WeakMap(), _GxIdeNewKb_handleCheckboxStatusChange = new WeakMap(), _GxIdeNewKb_handlerAuthenticationTypeInput = new WeakMap(), _GxIdeNewKb_handlerServerNameInput = new WeakMap(), _GxIdeNewKb_prototypingEnvironmentValueChangedHandler = new WeakMap(), _GxIdeNewKb_prototypingTargetValueChangedHandler = new WeakMap(), _GxIdeNewKb_renderAdvanced = new WeakMap(), _GxIdeNewKb_renderBasic = new WeakMap(), _GxIdeNewKb_cancelKbHandler = new WeakMap(), _GxIdeNewKb_createKbHandler = new WeakMap(), _GxIdeNewKb_evaluateCreateDataCheckboxEnabled = new WeakMap(), _GxIdeNewKb_evaluateTooltipRender = new WeakMap(), _GxIdeNewKb_evaluateUserInputsDisplay = new WeakMap(), _GxIdeNewKb_getDataSources = new WeakMap(), _GxIdeNewKb_initialSetup = new WeakMap(), _GxIdeNewKb_initialSetupAdvancedTab = new WeakMap(), _GxIdeNewKb_initializeValidatableControlsBasicTab = new WeakMap(), _GxIdeNewKb_initializeValidatableControlsAdvancedTab = new WeakMap(), _GxIdeNewKb_selectLocationHandler = new WeakMap(), _GxIdeNewKb_tabSelectionChangedHandler = new WeakMap(), _GxIdeNewKb_updateFrontEnds = new WeakMap(), _GxIdeNewKb_updateSelectedFrontEndsIds = new WeakMap(), _GxIdeNewKb_instances = new WeakSet(), _GxIdeNewKb_getCheckboxValues = function _GxIdeNewKb_getCheckboxValues() {
+    // TODO (We shouldn't be using querySelector)
+    const checkboxes = __classPrivateFieldGet(this, _GxIdeNewKb_frontEndsEl, "f").querySelectorAll("ch-checkbox");
+    const values = Array.from(checkboxes)
+        .map((checkbox) => checkbox.value)
+        .filter(Boolean);
+    return values;
+};
 //# sourceMappingURL=new-kb.js.map