@genexus/genexus-ide-ui 1.0.15 → 1.0.16

package/dist/cjs/gx-ide-new-kb.cjs.entry.js

@@ -6,9 +6,10 @@ const index = require('./index-b87e3ee0.js');
 const config = require('./config-b21feeee.js');
 const locale = require('./locale-bf43b87c.js');
 const common = require('./common-10d3b190.js');
-const helpers = require('./helpers-74cf5c16.js');
+const helpers = require('./helpers-b5b4a659.js');
 const formValidation = require('./form-validation-df39cabb.js');
 const assetsManager = require('./assets-manager-64c42a1e.js');
+const array = require('./array-b1e04a85.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}";
 
@@ -28,7 +29,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",
@@ -51,14 +52,18 @@ const ADVANCED_TAB_SELECTOR = "advanced";
 const GxIdeNewKb = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        _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, index.getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`));
         _GxIdeNewKb_kbSectionsModel.set(this, []);
         /* References needed to collect data con "Create" button submit*/
@@ -67,7 +72,6 @@ const GxIdeNewKb = class {
         _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);
@@ -78,9 +82,17 @@ const GxIdeNewKb = class {
         _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);
@@ -88,7 +100,8 @@ const GxIdeNewKb = class {
         _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);
         });
@@ -175,16 +188,14 @@ const GxIdeNewKb = class {
                     .label), index.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"))), index.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"))), index.h("div", {
                     // #data source
                     class: "field field-block"
                 }, index.h("label", { class: "label", htmlFor: "dataSource" }, __classPrivateFieldGet(this, _GxIdeNewKb_componentLocale, "f").tabBasic.backEnd.dataSource.label), index.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"))))),
-                index.h("section", { class: "section__front-end" }, index.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), index.h("div", { class: "field-group main__front-end spacing-body-inline scrollable", ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewKb_frontEndsEl, el, "f")) }, helpers.renderChCheckboxItems(this.frontEnds, "front-end", __classPrivateFieldGet(this, _GxIdeNewKb_handleCheckboxStatusChange, "f"))))
+                index.h("section", { class: "section__front-end" }, index.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), index.h("div", { class: "field-group main__front-end spacing-body-inline scrollable" }, helpers.renderChCheckboxItems(this.frontEnds, __classPrivateFieldGet(this, _GxIdeNewKb_frontEndCheckboxInputHandler, "f"), __classPrivateFieldGet(this, _GxIdeNewKb_frontEndsCheckedMap, "f").get(__classPrivateFieldGet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, "f")))))
             ];
         });
         // - - - - - - - - - -
@@ -194,23 +205,24 @@ const GxIdeNewKb = class {
             }
         });
         _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 = formValidation.validateControls(formSubmitResult, this.validatableControls);
             });
@@ -253,6 +265,33 @@ const GxIdeNewKb = class {
                 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);
+                array.removeIndex(currentState, checkboxIndex);
+            }
+        });
         _GxIdeNewKb_getDataSources.set(this, () => {
             if (this.getDataSourcesCallback) {
                 const selectedPrototypingEnvironmentId = __classPrivateFieldGet(this, _GxIdeNewKb_prototypingEnvironmentEl, "f").value;
@@ -271,15 +310,6 @@ const GxIdeNewKb = class {
                 });
             }
         });
-        _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);
@@ -355,34 +385,14 @@ const GxIdeNewKb = class {
          * 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;
@@ -409,8 +419,6 @@ const GxIdeNewKb = class {
         this.createDataFilesInKBFolder = false;
         this.databaseName = undefined;
         this.defaultDataSources = undefined;
-        this.displayTitle = false;
-        this.frontEnds = undefined;
         this.getDataSourcesCallback = undefined;
         this.getFrontEndsCallback = undefined;
         this.isAdvanced = false;
@@ -449,7 +457,8 @@ const GxIdeNewKb = class {
         if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
             this.prototypingEnvironmentsComboBoxModel =
                 helpers.mapOptionsToComboBoxItemModel(newValue);
-            this.prototypingEnvironmentsInitialValue = common.getSelectedItem(newValue);
+            __classPrivateFieldSet(this, _GxIdeNewKb_selectedPrototypingEnvironmentId, common.getSelectedItem(newValue), "f");
+            __classPrivateFieldGet(this, _GxIdeNewKb_updateFrontEnds, "f").call(this);
         }
     }
     watchPrototypingTargets(newValue) {
@@ -474,7 +483,6 @@ const GxIdeNewKb = class {
     }
     async componentWillLoad() {
         __classPrivateFieldSet(this, _GxIdeNewKb_componentLocale, await locale.Locale.getComponentStrings(this.el), "f");
-        this.previousFrontEndsState = this.frontEnds;
         __classPrivateFieldSet(this, _GxIdeNewKb_kbSectionsModel, [
             {
                 id: BASIC_TAB_SELECTOR,
@@ -486,8 +494,14 @@ const GxIdeNewKb = class {
             }
         ], "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() {
@@ -563,14 +577,7 @@ const GxIdeNewKb = class {
         "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();
 GxIdeNewKb.style = newKbCss;
 
 exports.gx_ide_new_kb = GxIdeNewKb;