@genexus/genexus-ide-ui 1.0.15 → 1.0.16

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

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         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;
+var _GxIdeNewKb_advancedTabHasBeenRendered, _GxIdeNewKb_componentLocale, _GxIdeNewKb_frontEndsCheckedMap, _GxIdeNewKb_selectedPrototypingEnvironmentId, _GxIdeNewKb_shortcutsSrc, _GxIdeNewKb_kbSectionsModel, _GxIdeNewKb_authenticationTypeEl, _GxIdeNewKb_collationEl, _GxIdeNewKb_createDataFilesInKBFolderEl, _GxIdeNewKb_databaseNameEl, _GxIdeNewKb_dataSourceEl, _GxIdeNewKb_kbNameEl, _GxIdeNewKb_locationEl, _GxIdeNewKb_passwordEl, _GxIdeNewKb_prototypingEnvironmentEl, _GxIdeNewKb_prototypingTargetEl, _GxIdeNewKb_savePasswordEl, _GxIdeNewKb_serverNameEl, _GxIdeNewKb_userInterfaceLanguageEl, _GxIdeNewKb_userNameEl, _GxIdeNewKb_chShortcutsEl, _GxIdeNewKb_handlerAuthenticationTypeInput, _GxIdeNewKb_handlerServerNameInput, _GxIdeNewKb_prototypingEnvironmentValueChangedHandler, _GxIdeNewKb_prototypingTargetValueChangedHandler, _GxIdeNewKb_renderAdvanced, _GxIdeNewKb_renderBasic, _GxIdeNewKb_cancelKbHandler, _GxIdeNewKb_createKbHandler, _GxIdeNewKb_evaluateCreateDataCheckboxEnabled, _GxIdeNewKb_evaluateTooltipRender, _GxIdeNewKb_evaluateUserInputsDisplay, _GxIdeNewKb_frontEndCheckboxInputHandler, _GxIdeNewKb_updateFrontEndsCheckedMap, _GxIdeNewKb_getDataSources, _GxIdeNewKb_initialSetupAdvancedTab, _GxIdeNewKb_initializeValidatableControlsBasicTab, _GxIdeNewKb_initializeValidatableControlsAdvancedTab, _GxIdeNewKb_selectLocationHandler, _GxIdeNewKb_tabSelectionChangedHandler, _GxIdeNewKb_updateFrontEnds;
 import { Host, getAssetPath, h } from "@stencil/core";
 import { config } from "../../common/config";
 import { Locale } from "../../common/locale";
@@ -22,6 +22,7 @@ import { getSelectedItem } from "../../common/common";
 import { mapOptionsToComboBoxItemModel, renderChCheckboxItems } from "../../common/helpers";
 import { validateControls } from "../../common/form-validation";
 import { getIconPath } from "@genexus/mercury";
+import { removeIndex } from "../../common/array";
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "components/tab",
@@ -43,14 +44,18 @@ const BASIC_TAB_SELECTOR = "basic";
 const ADVANCED_TAB_SELECTOR = "advanced";
 export class GxIdeNewKb {
     constructor() {
-        _GxIdeNewKb_instances.add(this);
         _GxIdeNewKb_advancedTabHasBeenRendered.set(this, false);
         /**
          * The component hard-coded strings translations.
          */
         // eslint-disable-next-line @stencil-community/own-props-must-be-private
         _GxIdeNewKb_componentLocale.set(this, void 0);
-        _GxIdeNewKb_selectedFrontEndsIds.set(this, []);
+        /**
+         * frontEndsState saves the id's of the front ends checkboxes that are checked
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_frontEndsCheckedMap.set(this, new Map());
+        _GxIdeNewKb_selectedPrototypingEnvironmentId.set(this, void 0);
         _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*/
@@ -59,7 +64,6 @@ export class GxIdeNewKb {
         _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);
@@ -70,9 +74,17 @@ export class GxIdeNewKb {
         _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);
-        });
+        // Uncomment when "TODO: define button handler and logic" is done.
+        // #geminiToolsSearchPrimary = getIconPath({
+        //   category: "gemini-tools",
+        //   name: "search",
+        //   colorType: "primary"
+        // });
+        // #geminiToolsResetPrimary = getIconPath({
+        //   category: "gemini-tools",
+        //   name: "reset",
+        //   colorType: "primary"
+        // });
         _GxIdeNewKb_handlerAuthenticationTypeInput.set(this, (e) => {
             const authenticationTypeValue = e === null || e === void 0 ? void 0 : e.detail;
             __classPrivateFieldGet(this, _GxIdeNewKb_evaluateUserInputsDisplay, "f").call(this, authenticationTypeValue);
@@ -80,7 +92,8 @@ export class GxIdeNewKb {
         _GxIdeNewKb_handlerServerNameInput.set(this, (e) => {
             __classPrivateFieldGet(this, _GxIdeNewKb_evaluateCreateDataCheckboxEnabled, "f").call(this, e.detail);
         });
-        _GxIdeNewKb_prototypingEnvironmentValueChangedHandler.set(this, () => {
+        _GxIdeNewKb_prototypingEnvironmentValueChangedHandler.set(this, (event) => {
+            __classPrivateFieldSet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, event.detail, "f");
             __classPrivateFieldGet(this, _GxIdeNewKb_getDataSources, "f").call(this);
             __classPrivateFieldGet(this, _GxIdeNewKb_updateFrontEnds, "f").call(this);
         });
@@ -167,16 +180,14 @@ export class GxIdeNewKb {
                     .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", {
+                        : "", value: __classPrivateFieldGet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_prototypingEnvironmentEl, el, "f")), model: this.prototypingEnvironmentsComboBoxModel, onInput: __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentValueChangedHandler, "f"), 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("section", { class: "section__front-end" }, h("h2", { class: "control-header control-header-with-border control-header__front-end heading-5 text-align-center spacing-body-inline" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.frontEnd.frontEndLabel), h("div", { class: "field-group main__front-end spacing-body-inline scrollable", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_frontEndsEl, el, "f")) }, renderChCheckboxItems(this.frontEnds, "front-end", __classPrivateFieldGet(this, _GxIdeNewKb_handleCheckboxStatusChange, "f"))))
+                h("section", { class: "section__front-end" }, h("h2", { class: "control-header control-header-with-border control-header__front-end heading-5 text-align-center spacing-body-inline" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.frontEnd.frontEndLabel), h("div", { class: "field-group main__front-end spacing-body-inline scrollable" }, renderChCheckboxItems(this.frontEnds, __classPrivateFieldGet(this, _GxIdeNewKb_frontEndCheckboxInputHandler, "f"), __classPrivateFieldGet(this, _GxIdeNewKb_frontEndsCheckedMap, "f").get(__classPrivateFieldGet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, "f")))))
             ];
         });
         // - - - - - - - - - -
@@ -186,23 +197,24 @@ export class GxIdeNewKb {
             }
         });
         _GxIdeNewKb_createKbHandler.set(this, () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            const selectedFrontEndIds = (_a = __classPrivateFieldGet(this, _GxIdeNewKb_frontEndsCheckedMap, "f").get(__classPrivateFieldGet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, "f"))) !== null && _a !== void 0 ? _a : [];
             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
+                authenticationType: (_b = __classPrivateFieldGet(this, _GxIdeNewKb_authenticationTypeEl, "f")) === null || _b === void 0 ? void 0 : _b.value,
+                collation: (_c = __classPrivateFieldGet(this, _GxIdeNewKb_collationEl, "f")) === null || _c === void 0 ? void 0 : _c.value,
+                createDataFilesInKBFolder: !!((_d = __classPrivateFieldGet(this, _GxIdeNewKb_createDataFilesInKBFolderEl, "f")) === null || _d === void 0 ? void 0 : _d.value),
+                dataSource: (_e = __classPrivateFieldGet(this, _GxIdeNewKb_dataSourceEl, "f")) === null || _e === void 0 ? void 0 : _e.value,
+                databaseName: (_f = __classPrivateFieldGet(this, _GxIdeNewKb_databaseNameEl, "f")) === null || _f === void 0 ? void 0 : _f.value,
+                frontEnds: selectedFrontEndIds,
+                kbLocation: (_g = __classPrivateFieldGet(this, _GxIdeNewKb_locationEl, "f")) === null || _g === void 0 ? void 0 : _g.value,
+                kbName: (_h = __classPrivateFieldGet(this, _GxIdeNewKb_kbNameEl, "f")) === null || _h === void 0 ? void 0 : _h.value,
+                password: (_j = __classPrivateFieldGet(this, _GxIdeNewKb_passwordEl, "f")) === null || _j === void 0 ? void 0 : _j.value,
+                prototypingEnvironment: (_k = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f")) === null || _k === void 0 ? void 0 : _k.value,
+                prototypingTarget: (_l = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingTargetEl, "f")) === null || _l === void 0 ? void 0 : _l.value,
+                savePassword: !!((_m = __classPrivateFieldGet(this, _GxIdeNewKb_savePasswordEl, "f")) === null || _m === void 0 ? void 0 : _m.value),
+                serverName: (_o = __classPrivateFieldGet(this, _GxIdeNewKb_serverNameEl, "f")) === null || _o === void 0 ? void 0 : _o.value,
+                userInterfaceLanguage: (_p = __classPrivateFieldGet(this, _GxIdeNewKb_userInterfaceLanguageEl, "f")) === null || _p === void 0 ? void 0 : _p.value,
+                userName: (_q = __classPrivateFieldGet(this, _GxIdeNewKb_userNameEl, "f")) === null || _q === void 0 ? void 0 : _q.value
             }).then((formSubmitResult) => {
                 this.validatableControls = validateControls(formSubmitResult, this.validatableControls);
             });
@@ -245,6 +257,33 @@ export class GxIdeNewKb {
                 this.savePasswordVisible = true;
             }
         });
+        _GxIdeNewKb_frontEndCheckboxInputHandler.set(this, (event) => {
+            const checkedValue = event.target.checkedValue;
+            const checked = event.detail === checkedValue;
+            __classPrivateFieldGet(this, _GxIdeNewKb_updateFrontEndsCheckedMap, "f").call(this, checkedValue, checked);
+        });
+        /**
+         * This function updates frontEndsCheckedMap, that contains the checked
+         * checkboxes for each language front ends.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewKb_updateFrontEndsCheckedMap.set(this, (checkboxId, checked) => {
+            let currentState = __classPrivateFieldGet(this, _GxIdeNewKb_frontEndsCheckedMap, "f").get(__classPrivateFieldGet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, "f"));
+            if (!currentState) {
+                // first time
+                currentState = [];
+                __classPrivateFieldGet(this, _GxIdeNewKb_frontEndsCheckedMap, "f").set(__classPrivateFieldGet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, "f"), currentState);
+            }
+            if (checked) {
+                // update by adding
+                currentState.push(checkboxId);
+            }
+            else {
+                // update by removing
+                const checkboxIndex = currentState.findIndex(id => id === checkboxId);
+                removeIndex(currentState, checkboxIndex);
+            }
+        });
         _GxIdeNewKb_getDataSources.set(this, () => {
             if (this.getDataSourcesCallback) {
                 const selectedPrototypingEnvironmentId = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f").value;
@@ -263,15 +302,6 @@ export class GxIdeNewKb {
                 });
             }
         });
-        _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);
@@ -350,34 +380,14 @@ export class GxIdeNewKb {
          * by comparing the new state (getFrontEndsCallback result) and previous state.
          */
         // eslint-disable-next-line @stencil-community/own-props-must-be-private
-        _GxIdeNewKb_updateFrontEnds.set(this, () => {
-            if (this.getFrontEndsCallback) {
-                const selectedPrototypingEnvironmentId = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f").value;
-                const updatedFrontEndsPromise = this.getFrontEndsCallback(selectedPrototypingEnvironmentId);
-                updatedFrontEndsPromise
-                    .then(newFrontEndsOptions => {
-                    const updatedFrontEnds = [];
-                    newFrontEndsOptions.forEach(newFrontEnd => {
-                        const foundActualFrontEnd = this.frontEnds.find(actualFrontEnd => {
-                            return newFrontEnd.id === actualFrontEnd.id;
-                        });
-                        if (foundActualFrontEnd) {
-                            // update newFrontEnd checked status with actual frontEnd checked status
-                            newFrontEnd.checked = foundActualFrontEnd.checked;
-                        }
-                        updatedFrontEnds.push(newFrontEnd);
-                    });
-                    this.frontEnds = updatedFrontEnds;
-                })
-                    .catch(() => {
-                    // to do
-                });
+        _GxIdeNewKb_updateFrontEnds.set(this, async () => {
+            const updatedFrontEnds = await this.getFrontEndsCallback(__classPrivateFieldGet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, "f"));
+            if ((updatedFrontEnds === null || updatedFrontEnds === void 0 ? void 0 : updatedFrontEnds.length) > 0) {
+                this.frontEnds = updatedFrontEnds;
             }
         });
-        _GxIdeNewKb_updateSelectedFrontEndsIds.set(this, () => {
-            __classPrivateFieldSet(this, _GxIdeNewKb_selectedFrontEndsIds, __classPrivateFieldGet(this, _GxIdeNewKb_instances, "m", _GxIdeNewKb_getCheckboxValues).call(this), "f");
-        });
         this.advancedTabIsVisible = false;
+        this.frontEnds = undefined;
         this.validatableControls = new Map();
         this.createDataInKbDisabled = false;
         this.userNameVisible = true;
@@ -404,8 +414,6 @@ export class GxIdeNewKb {
         this.createDataFilesInKBFolder = false;
         this.databaseName = undefined;
         this.defaultDataSources = undefined;
-        this.displayTitle = false;
-        this.frontEnds = undefined;
         this.getDataSourcesCallback = undefined;
         this.getFrontEndsCallback = undefined;
         this.isAdvanced = false;
@@ -444,7 +452,8 @@ export class GxIdeNewKb {
         if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
             this.prototypingEnvironmentsComboBoxModel =
                 mapOptionsToComboBoxItemModel(newValue);
-            this.prototypingEnvironmentsInitialValue = getSelectedItem(newValue);
+            __classPrivateFieldSet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, getSelectedItem(newValue), "f");
+            __classPrivateFieldGet(this, _GxIdeNewKb_updateFrontEnds, "f").call(this);
         }
     }
     watchPrototypingTargets(newValue) {
@@ -469,7 +478,6 @@ export class GxIdeNewKb {
     }
     async componentWillLoad() {
         __classPrivateFieldSet(this, _GxIdeNewKb_componentLocale, await Locale.getComponentStrings(this.el), "f");
-        this.previousFrontEndsState = this.frontEnds;
         __classPrivateFieldSet(this, _GxIdeNewKb_kbSectionsModel, [
             {
                 id: BASIC_TAB_SELECTOR,
@@ -481,8 +489,14 @@ export class GxIdeNewKb {
             }
         ], "f");
     }
+    connectedCallback() {
+        this.watchDefaultDataSources(this.defaultDataSources);
+        this.watchPrototypingEnvironments(this.prototypingEnvironments);
+        this.watchPrototypingTargets(this.prototypingTargets);
+        this.watchServerNames(this.serverNames);
+        this.watchUserInterfaceLanguages(this.userInterfaceLanguages);
+    }
     componentDidLoad() {
-        __classPrivateFieldGet(this, _GxIdeNewKb_initialSetup, "f").call(this);
         __classPrivateFieldGet(this, _GxIdeNewKb_initializeValidatableControlsBasicTab, "f").call(this);
     }
     componentDidRender() {
@@ -701,45 +715,6 @@ export class GxIdeNewKb {
                     "text": "It allows defining the DBMS that will be used in the solution"
                 }
             },
-            "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"
-            },
-            "frontEnds": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "GxOption[]",
-                    "resolved": "GxOption[]",
-                    "references": {
-                        "GxOption": {
-                            "location": "import",
-                            "path": "../../common/types",
-                            "id": "src/common/types.ts::GxOption"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "It allows selecting multiple generators for the front end"
-                }
-            },
             "getDataSourcesCallback": {
                 "type": "unknown",
                 "mutable": false,
@@ -996,6 +971,7 @@ export class GxIdeNewKb {
     static get states() {
         return {
             "advancedTabIsVisible": {},
+            "frontEnds": {},
             "validatableControls": {},
             "createDataInKbDisabled": {},
             "userNameVisible": {},
@@ -1068,12 +1044,5 @@ export class GxIdeNewKb {
             }];
     }
 }
-_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;
-};
+_GxIdeNewKb_advancedTabHasBeenRendered = new WeakMap(), _GxIdeNewKb_componentLocale = new WeakMap(), _GxIdeNewKb_frontEndsCheckedMap = new WeakMap(), _GxIdeNewKb_selectedPrototypingEnvironmentId = 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_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_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_frontEndCheckboxInputHandler = new WeakMap(), _GxIdeNewKb_updateFrontEndsCheckedMap = new WeakMap(), _GxIdeNewKb_getDataSources = 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();
 //# sourceMappingURL=new-kb.js.map