@genexus/genexus-ide-ui 1.0.15 → 1.0.16

package/dist/components/gx-ide-new-kb.js

@@ -5,6 +5,7 @@ import { g as getSelectedItem } from './common.js';
 import { r as renderChCheckboxItems, m as mapOptionsToComboBoxItemModel } from './helpers.js';
 import { v as validateControls } from './form-validation.js';
 import { g as getIconPath } from './assets-manager.js';
+import { r as removeIndex } from './array.js';
 
 const newKbCss = ":host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header-one-col{grid-template-columns:1fr}.header-two-cols{grid-template-columns:1fr 1fr}.location-wrapper{display:flex;gap:var(--mer-spacing--2xs)}.location{flex-grow:1;grid-area:location}.basic{display:grid;grid-template:\"basic-top basic-top\" max-content \"back-end front-end\" 1fr;grid-template-columns:1fr 1fr}.basic__header{grid-area:basic-top;grid-template-columns:1fr 1fr}.control-header__back-end,.control-header__front-end{padding-block-start:var(--mer-spacing--md)}.main__back-end{border-inline-end:var(--section-common-border)}.main__back-end,.main__front-end{grid-auto-rows:max-content;padding-block:var(--content-block-spacing);overflow:auto}.section__back-end{grid-area:back-end;grid-auto-rows:max-content}.section__front-end{grid-area:front-end}.section__back-end,.section__front-end{display:grid;grid-template-rows:max-content 1fr;overflow:auto}.tab-advanced-title{grid-area:tab-advanced-title}.layout-tab-advanced-left-col{grid-area:layout-tab-advanced-left-col}.layout-tab-advanced-right-col{grid-area:layout-tab-advanced-right-col}.basic,.advanced{padding-block-start:var(--content-block-spacing);overflow:auto;block-size:100%}.tab-advanced__field-group{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto}.text-align-center{text-align:center}.tab::part(page){scrollbar-width:thin}";
 
@@ -24,7 +25,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _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;
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "components/tab",
@@ -49,14 +50,18 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         super();
         this.__registerHost();
         this.__attachShadow();
-        _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*/
@@ -65,7 +70,6 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         _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);
@@ -76,9 +80,17 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         _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);
@@ -86,7 +98,8 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         _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);
         });
@@ -173,16 +186,14 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                     .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")))))
             ];
         });
         // - - - - - - - - - -
@@ -192,23 +203,24 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
             }
         });
         _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);
             });
@@ -251,6 +263,33 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                 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;
@@ -269,15 +308,6 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
                 });
             }
         });
-        _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);
@@ -353,34 +383,14 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
          * 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;
@@ -407,8 +417,6 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         this.createDataFilesInKBFolder = false;
         this.databaseName = undefined;
         this.defaultDataSources = undefined;
-        this.displayTitle = false;
-        this.frontEnds = undefined;
         this.getDataSourcesCallback = undefined;
         this.getFrontEndsCallback = undefined;
         this.isAdvanced = false;
@@ -447,7 +455,8 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         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) {
@@ -472,7 +481,6 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
     }
     async componentWillLoad() {
         __classPrivateFieldSet(this, _GxIdeNewKb_componentLocale, await Locale.getComponentStrings(this.el), "f");
-        this.previousFrontEndsState = this.frontEnds;
         __classPrivateFieldSet(this, _GxIdeNewKb_kbSectionsModel, [
             {
                 id: BASIC_TAB_SELECTOR,
@@ -484,8 +492,14 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
             }
         ], "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() {
@@ -569,8 +583,6 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         "createDataFilesInKBFolder": [4, "create-data-files-in-k-b-folder"],
         "databaseName": [1, "database-name"],
         "defaultDataSources": [1040],
-        "displayTitle": [4, "display-title"],
-        "frontEnds": [1040],
         "getDataSourcesCallback": [16],
         "getFrontEndsCallback": [16],
         "isAdvanced": [4, "is-advanced"],
@@ -585,6 +597,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         "userInterfaceLanguages": [16],
         "userName": [1, "user-name"],
         "advancedTabIsVisible": [32],
+        "frontEnds": [32],
         "validatableControls": [32],
         "createDataInKbDisabled": [32],
         "userNameVisible": [32],
@@ -614,14 +627,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewKb extends H
         "serverNames": ["watchServerNames"],
         "userInterfaceLanguages": ["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;
-};
+_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();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;