@genexus/genexus-ide-ui 1.0.14 → 1.0.16

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

@@ -14,15 +14,15 @@ 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 _GxIdeNewEnvironment_instances, _GxIdeNewEnvironment_advancedTabHasBeenRendered, _GxIdeNewEnvironment_chShortcutsEl, _GxIdeNewEnvironment_envNameModifiedByUser, _GxIdeNewEnvironment_selectedDataStoreId, _GxIdeNewEnvironment_selectedFrontEndsIds, _GxIdeNewEnvironment_selectedLanguageId, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, _GxIdeNewEnvironment_shortcutsSrc, _GxIdeNewEnvironment_newEnvironmentSectionsModel, _GxIdeNewEnvironment_componentLocale, _GxIdeNewEnvironment_dataStoreEl, _GxIdeNewEnvironment_environmentNameEl, _GxIdeNewEnvironment_frontEndsEl, _GxIdeNewEnvironment_languageEl, _GxIdeNewEnvironment_setAsCurrentEnvironmentEl, _GxIdeNewEnvironment_dataStoreValueChangedHandler, _GxIdeNewEnvironment_envNameInputHandler, _GxIdeNewEnvironment_evaluateSelectedRuntimeEnvironmentId, _GxIdeNewEnvironment_evaluateSingleRuntimeIcon, _GxIdeNewEnvironment_evaluateTooltipRender, _GxIdeNewEnvironment_getCheckboxValues, _GxIdeNewEnvironment_initializeValidatableControlsBasicTab, _GxIdeNewEnvironment_languageValueChangedHandler, _GxIdeNewEnvironment_renderAdvanced, _GxIdeNewEnvironment_renderBasic, _GxIdeNewEnvironment_runtimeEnvironmentChangedHandler, _GxIdeNewEnvironment_setEnvironmentHandler, _GxIdeNewEnvironment_tabSelectionChangedHandler, _GxIdeNewEnvironment_updateDataSources, _GxIdeNewEnvironment_updateEnvironmentName, _GxIdeNewEnvironment_updateSelectedFrontEndsIds, _GxIdeNewEnvironment_updateFrontEnds;
+var _GxIdeNewEnvironment_advancedTabHasBeenRendered, _GxIdeNewEnvironment_chShortcutsEl, _GxIdeNewEnvironment_envNameModifiedByUser, _GxIdeNewEnvironment_frontEndsCheckedMap, _GxIdeNewEnvironment_selectedDataStoreId, _GxIdeNewEnvironment_selectedLanguageId, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, _GxIdeNewEnvironment_shortcutsSrc, _GxIdeNewEnvironment_newEnvironmentSectionsModel, _GxIdeNewEnvironment_componentLocale, _GxIdeNewEnvironment_dataStoreEl, _GxIdeNewEnvironment_environmentNameEl, _GxIdeNewEnvironment_languageEl, _GxIdeNewEnvironment_setAsCurrentEnvironmentEl, _GxIdeNewEnvironment_dataStoreValueChangedHandler, _GxIdeNewEnvironment_envNameInputHandler, _GxIdeNewEnvironment_evaluateSelectedRuntimeEnvironmentId, _GxIdeNewEnvironment_evaluateTooltipRender, _GxIdeNewEnvironment_initializeValidatableControlsBasicTab, _GxIdeNewEnvironment_languageValueChangedHandler, _GxIdeNewEnvironment_renderAdvanced, _GxIdeNewEnvironment_renderBasic, _GxIdeNewEnvironment_runtimeEnvironmentChangedHandler, _GxIdeNewEnvironment_createCallbackHandler, _GxIdeNewEnvironment_tabSelectionChangedHandler, _GxIdeNewEnvironment_updateDataSources, _GxIdeNewEnvironment_updateEnvironmentName, _GxIdeNewEnvironment_updateFrontEnds, _GxIdeNewEnvironment_frontEndCheckboxInputHandler, _GxIdeNewEnvironment_updateFrontEndsCheckedMap;
 /* STENCIL IMPORTS */
 import { getAssetPath, Host, h } from "@stencil/core";
-import { getIconPath } from "@genexus/mercury";
 import { config } from "../../common/config";
 import { Locale } from "../../common/locale";
 import { mapOptionsToComboBoxItemModel, renderChCheckboxItems } from "../../common/helpers";
 import { getSelectedItem } from "../../common/common";
 import { validateControls } from "../../common/form-validation";
+import { removeIndex } from "../../common/array";
 const CSS_BUNDLES = [
     // TODO: review if "utils/form--full" is required.
     "resets/box-sizing",
@@ -33,28 +33,22 @@ const CSS_BUNDLES = [
     "utils/typography",
     "chameleon/scrollbar"
 ];
-const GEMINI_TOOLS_GENEXUS_CLOUD_ON_SURFACE = getIconPath({
-    category: "window-tools",
-    name: "genexus-cloud",
-    colorType: "on-surface"
-});
-const GEMINI_TOOLS_ROL_ON_SURFACE = getIconPath({
-    category: "window-tools",
-    name: "rol",
-    colorType: "on-surface"
-});
 const MAIN_SECTION_CLASSES = "main";
 const BASIC_SECTION_PARENT_CLASSES = "basic";
 const BASIC_TAB_SELECTOR = "basic";
 const ADVANCED_TAB_SELECTOR = "advanced";
 export class GxIdeNewEnvironment {
     constructor() {
-        _GxIdeNewEnvironment_instances.add(this);
         _GxIdeNewEnvironment_advancedTabHasBeenRendered.set(this, false);
         _GxIdeNewEnvironment_chShortcutsEl.set(this, void 0);
         _GxIdeNewEnvironment_envNameModifiedByUser.set(this, false);
+        /**
+         * frontEndsState saves the id's of the front ends checkboxes that are checked
+         */
+        // TODO (Use a set instead of an array to improve performance)
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNewEnvironment_frontEndsCheckedMap.set(this, new Map());
         _GxIdeNewEnvironment_selectedDataStoreId.set(this, void 0);
-        _GxIdeNewEnvironment_selectedFrontEndsIds.set(this, []);
         _GxIdeNewEnvironment_selectedLanguageId.set(this, void 0);
         _GxIdeNewEnvironment_selectedRuntimeEnvironmentId.set(this, void 0);
         _GxIdeNewEnvironment_shortcutsSrc.set(this, getAssetPath(`./gx-ide-assets/new-environment/shortcuts.json`));
@@ -64,10 +58,9 @@ export class GxIdeNewEnvironment {
          */
         // eslint-disable-next-line @stencil-community/own-props-must-be-private
         _GxIdeNewEnvironment_componentLocale.set(this, void 0);
-        /* References needed to collect data con "createCallback" button submit*/
+        // References needed to collect data con "createCallback" button submit*/
         _GxIdeNewEnvironment_dataStoreEl.set(this, void 0);
         _GxIdeNewEnvironment_environmentNameEl.set(this, void 0);
-        _GxIdeNewEnvironment_frontEndsEl.set(this, void 0);
         _GxIdeNewEnvironment_languageEl.set(this, void 0);
         _GxIdeNewEnvironment_setAsCurrentEnvironmentEl.set(this, void 0);
         _GxIdeNewEnvironment_dataStoreValueChangedHandler.set(this, () => {
@@ -77,23 +70,12 @@ export class GxIdeNewEnvironment {
         });
         _GxIdeNewEnvironment_envNameInputHandler.set(this, (e) => {
             const newEnvName = e.detail.trim();
-            if (newEnvName !== this.environmentName) {
-                this.environmentName = newEnvName;
-                __classPrivateFieldSet(this, _GxIdeNewEnvironment_envNameModifiedByUser, true, "f");
-            }
+            __classPrivateFieldSet(this, _GxIdeNewEnvironment_envNameModifiedByUser, newEnvName !== this.environmentName, "f");
         });
         _GxIdeNewEnvironment_evaluateSelectedRuntimeEnvironmentId.set(this, () => {
             var _a;
             __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, (_a = this.runtimes[0]) === null || _a === void 0 ? void 0 : _a.value, "f");
         });
-        _GxIdeNewEnvironment_evaluateSingleRuntimeIcon.set(this, () => {
-            if (this.runtimes[0].id === "local") {
-                return GEMINI_TOOLS_ROL_ON_SURFACE;
-            }
-            else {
-                return GEMINI_TOOLS_GENEXUS_CLOUD_ON_SURFACE;
-            }
-        });
         // TODO: We must avoid performing the get 3 times.
         // It is used on new-environment as well.
         _GxIdeNewEnvironment_evaluateTooltipRender.set(this, (controlReference) => {
@@ -117,10 +99,9 @@ export class GxIdeNewEnvironment {
                 }
             });
         });
-        _GxIdeNewEnvironment_languageValueChangedHandler.set(this, () => {
-            /* the language item id is used for the value (they are equal)*/
-            __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedLanguageId, __classPrivateFieldGet(this, _GxIdeNewEnvironment_languageEl, "f").value, "f");
-            __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateDataSources, "f").call(this);
+        _GxIdeNewEnvironment_languageValueChangedHandler.set(this, async (event) => {
+            __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedLanguageId, event.detail, "f");
+            await __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateDataSources, "f").call(this);
             __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateFrontEnds, "f").call(this);
             __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateEnvironmentName, "f").call(this);
         });
@@ -129,39 +110,53 @@ export class GxIdeNewEnvironment {
         });
         _GxIdeNewEnvironment_renderBasic.set(this, () => {
             return [
-                h("div", { class: "basic__runtime-environment control-header-with-border" }, h("h2", {
-                    // back end
-                    class: "control-header heading-5 text-align-center"
-                }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").runtime), this.runtimes.length > 1 ? (h("ch-radio-group-render", { class: "radio-group", onChange: __classPrivateFieldGet(this, _GxIdeNewEnvironment_runtimeEnvironmentChangedHandler, "f"), model: this.runtimesRadioGroupModel, value: __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, "f") })) : (h("div", null, h("ch-image", { class: "icon-sm", src: __classPrivateFieldGet(this, _GxIdeNewEnvironment_evaluateSingleRuntimeIcon, "f").call(this) }), h("p", { class: "text-body" }, this.runtimes[0].label, " ")))),
+                h("div", { class: {
+                        "basic__runtime-environment": true,
+                        "control-header-with-border": true,
+                        "one-runtime-only": this.runtimes.length === 1
+                    } }, this.runtimes.length > 1
+                    ? [
+                        h("h2", {
+                            // Runtime Environment
+                            class: "heading-5 text-align-center"
+                        }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").runtime),
+                        h("ch-radio-group-render", { class: "radio-group", onChange: __classPrivateFieldGet(this, _GxIdeNewEnvironment_runtimeEnvironmentChangedHandler, "f"), model: this.runtimesRadioGroupModel, value: __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, "f") })
+                    ]
+                    : [
+                        h("h2", { class: "heading-5 text-align-center" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").runtime, ":"),
+                        h("p", null, this.runtimesRadioGroupModel[0].caption)
+                    ]),
                 h("section", { class: "basic__back-end scrollable" }, h("h2", {
                     // back end
                     class: "control-header control-header-with-border control-header__back-end heading-5 text-align-center spacing-body-inline"
                 }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.backEnd.backEndLabel), h("div", { class: "field-group main__back-end spacing-body-inline scrollable" }, h("div", {
                     // #language
                     class: "field field-block"
-                }, h("label", { class: "label", htmlFor: "language" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.backEnd.language), h("ch-combo-box-render", { id: "language", class: "combo-box", part: "language", value: this.languageInitialValue, disabled: this.languages.length === 0, model: this.languageComboBoxModel, onInput: this.languages.length > 0 && __classPrivateFieldGet(this, _GxIdeNewEnvironment_languageValueChangedHandler, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_languageEl, el, "f")) }), __classPrivateFieldGet(this, _GxIdeNewEnvironment_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewEnvironment_languageEl, "f"))), h("div", {
+                }, h("label", { class: "label", htmlFor: "language" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.backEnd.language), h("ch-combo-box-render", { id: "language", class: "combo-box", part: "language", value: __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"), disabled: this.languages.length === 0, model: this.languageComboBoxModel, onInput: __classPrivateFieldGet(this, _GxIdeNewEnvironment_languageValueChangedHandler, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_languageEl, el, "f")) }), __classPrivateFieldGet(this, _GxIdeNewEnvironment_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewEnvironment_languageEl, "f"))), h("div", {
                     // #data stores
                     class: "field field-block"
-                }, h("label", { class: "label", htmlFor: "data-store" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.backEnd.dataStores), h("ch-combo-box-render", { id: "data-store", class: "combo-box", part: "data-store", value: this.dataStoresInitialValue, model: this.dataStoresComboBoxModel, onInput: __classPrivateFieldGet(this, _GxIdeNewEnvironment_dataStoreValueChangedHandler, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_dataStoreEl, el, "f")) }), __classPrivateFieldGet(this, _GxIdeNewEnvironment_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewEnvironment_dataStoreEl, "f"))))),
+                }, h("label", { class: "label", htmlFor: "data-store" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.backEnd.dataStores), h("ch-combo-box-render", { id: "data-store", class: "combo-box", part: "data-store", value: __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedDataStoreId, "f"), model: this.dataStoresComboBoxModel, onInput: __classPrivateFieldGet(this, _GxIdeNewEnvironment_dataStoreValueChangedHandler, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_dataStoreEl, el, "f")) }), __classPrivateFieldGet(this, _GxIdeNewEnvironment_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewEnvironment_dataStoreEl, "f"))))),
                 h("section", { class: "basic__front-end scrollable" }, h("h2", {
                     // front end
                     class: "control-header control-header-with-border control-header__front-end heading-5 text-align-center spacing-body-inline"
-                }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.frontEnd.frontEndLabel), h("div", { class: "field-group front-end__checkboxes spacing-body-inline main__front-end scrollable", role: "group", "aria-labelledby": __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.frontEnd.generators, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_frontEndsEl, el, "f")) }, renderChCheckboxItems(this.frontEnds, "front-end", __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateSelectedFrontEndsIds, "f"))))
+                }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.frontEnd.frontEndLabel), h("div", { class: "field-group front-end__checkboxes spacing-body-inline main__front-end scrollable", role: "group", "aria-labelledby": __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.frontEnd.generators }, renderChCheckboxItems(this.frontEnds, __classPrivateFieldGet(this, _GxIdeNewEnvironment_frontEndCheckboxInputHandler, "f"), __classPrivateFieldGet(this, _GxIdeNewEnvironment_frontEndsCheckedMap, "f").get(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f")))))
             ];
         });
         _GxIdeNewEnvironment_runtimeEnvironmentChangedHandler.set(this, (event) => {
             __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, event.detail, "f");
             __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateDataSources, "f").call(this);
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateEnvironmentName, "f").call(this);
         });
-        _GxIdeNewEnvironment_setEnvironmentHandler.set(this, async () => {
-            var _a;
+        _GxIdeNewEnvironment_createCallbackHandler.set(this, async () => {
+            var _a, _b;
+            const selectedFrontEndIds = (_a = __classPrivateFieldGet(this, _GxIdeNewEnvironment_frontEndsCheckedMap, "f").get(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"))) !== null && _a !== void 0 ? _a : [];
             this.createCallback({
-                setAsCurrent: !!((_a = __classPrivateFieldGet(this, _GxIdeNewEnvironment_setAsCurrentEnvironmentEl, "f")) === null || _a === void 0 ? void 0 : _a.value),
+                setAsCurrent: !!((_b = __classPrivateFieldGet(this, _GxIdeNewEnvironment_setAsCurrentEnvironmentEl, "f")) === null || _b === void 0 ? void 0 : _b.value),
                 name: __classPrivateFieldGet(this, _GxIdeNewEnvironment_environmentNameEl, "f").value,
                 runtime: __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, "f"),
                 language: __classPrivateFieldGet(this, _GxIdeNewEnvironment_languageEl, "f").value,
                 dataStores: __classPrivateFieldGet(this, _GxIdeNewEnvironment_dataStoreEl, "f").value,
-                frontEnds: __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedFrontEndsIds, "f")
+                frontEnds: selectedFrontEndIds
             }).then((formSubmitResult) => {
                 this.validatableControls = validateControls(formSubmitResult, this.validatableControls);
             });
@@ -174,47 +169,59 @@ export class GxIdeNewEnvironment {
             }
         });
         _GxIdeNewEnvironment_updateDataSources.set(this, async () => {
-            if (this.getDataSourcesCallback) {
-                const updatedDataSources = await this.getDataSourcesCallback(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"), __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, "f"));
-                if ((updatedDataSources === null || updatedDataSources === void 0 ? void 0 : updatedDataSources.length) > 0) {
-                    this.dataStores = updatedDataSources;
-                }
+            const updatedDataSources = await this.getDataSourcesCallback(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"), __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, "f"));
+            if ((updatedDataSources === null || updatedDataSources === void 0 ? void 0 : updatedDataSources.length) > 0) {
+                this.dataStores = updatedDataSources;
             }
         });
         _GxIdeNewEnvironment_updateEnvironmentName.set(this, async () => {
-            if (this.getEnvironmentNameCallback &&
-                __classPrivateFieldGet(this, _GxIdeNewEnvironment_environmentNameEl, "f") &&
-                !__classPrivateFieldGet(this, _GxIdeNewEnvironment_envNameModifiedByUser, "f")) {
-                const updatedEnvName = await this.getEnvironmentNameCallback(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"), __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedDataStoreId, "f"));
-                if (updatedEnvName) {
-                    this.environmentName = updatedEnvName;
-                }
+            if (!__classPrivateFieldGet(this, _GxIdeNewEnvironment_envNameModifiedByUser, "f")) {
+                this.environmentName = await this.getEnvironmentNameCallback(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"), __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedDataStoreId, "f"), __classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, "f"));
             }
         });
-        _GxIdeNewEnvironment_updateSelectedFrontEndsIds.set(this, () => {
-            __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedFrontEndsIds, __classPrivateFieldGet(this, _GxIdeNewEnvironment_instances, "m", _GxIdeNewEnvironment_getCheckboxValues).call(this), "f");
-        });
         _GxIdeNewEnvironment_updateFrontEnds.set(this, async () => {
-            if (this.getFrontEndsCallback) {
-                const updatedFrontEnds = await this.getFrontEndsCallback(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"));
-                if ((updatedFrontEnds === null || updatedFrontEnds === void 0 ? void 0 : updatedFrontEnds.length) > 0) {
-                    this.frontEnds = updatedFrontEnds;
-                }
+            const updatedFrontEnds = await this.getFrontEndsCallback(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"));
+            if ((updatedFrontEnds === null || updatedFrontEnds === void 0 ? void 0 : updatedFrontEnds.length) > 0) {
+                this.frontEnds = updatedFrontEnds;
+            }
+        });
+        _GxIdeNewEnvironment_frontEndCheckboxInputHandler.set(this, (event) => {
+            const checkedValue = event.target.checkedValue;
+            const checked = event.detail === checkedValue;
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_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
+        _GxIdeNewEnvironment_updateFrontEndsCheckedMap.set(this, (checkboxId, checked) => {
+            let currentState = __classPrivateFieldGet(this, _GxIdeNewEnvironment_frontEndsCheckedMap, "f").get(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"));
+            if (!currentState) {
+                // first time
+                currentState = [];
+                __classPrivateFieldGet(this, _GxIdeNewEnvironment_frontEndsCheckedMap, "f").set(__classPrivateFieldGet(this, _GxIdeNewEnvironment_selectedLanguageId, "f"), currentState);
+            }
+            if (checked) {
+                // update by adding
+                currentState.push(checkboxId);
+            }
+            else {
+                // update by removing
+                const checkboxIndex = currentState.findIndex(id => id === checkboxId);
+                removeIndex(currentState, checkboxIndex);
             }
         });
         this.advancedTabIsVisible = false;
+        this.frontEnds = undefined;
         this.validatableControls = new Map();
         this.dataStoresComboBoxModel = [];
-        this.dataStoresInitialValue = undefined;
         this.languageComboBoxModel = [];
-        this.languageInitialValue = undefined;
         this.runtimesRadioGroupModel = [];
         this.cancelCallback = undefined;
         this.createCallback = undefined;
         this.dataStores = undefined;
-        this.disableAdvanced = false;
         this.environmentName = undefined;
-        this.frontEnds = undefined;
         this.getDataSourcesCallback = undefined;
         this.getEnvironmentNameCallback = undefined;
         this.getFrontEndsCallback = undefined;
@@ -226,13 +233,14 @@ export class GxIdeNewEnvironment {
     dataStoresChanged(newValue) {
         if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
             this.dataStoresComboBoxModel = mapOptionsToComboBoxItemModel(newValue);
-            this.dataStoresInitialValue = getSelectedItem(newValue);
+            __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedDataStoreId, getSelectedItem(newValue), "f");
         }
     }
     languagesChanged(newValue) {
         if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
             this.languageComboBoxModel = mapOptionsToComboBoxItemModel(newValue);
-            this.languageInitialValue = getSelectedItem(newValue);
+            __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedLanguageId, getSelectedItem(newValue), "f");
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateFrontEnds, "f").call(this);
         }
     }
     runtimesChanged(newValue) {
@@ -246,7 +254,6 @@ export class GxIdeNewEnvironment {
         this.runtimesChanged(this.runtimes);
     }
     componentDidLoad() {
-        __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateSelectedFrontEndsIds, "f").call(this);
         __classPrivateFieldGet(this, _GxIdeNewEnvironment_initializeValidatableControlsBasicTab, "f").call(this);
     }
     componentDidRender() {
@@ -281,13 +288,21 @@ export class GxIdeNewEnvironment {
         }
     }
     render() {
-        return (h(Host, { class: "widget scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeNewEnvironment_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_chShortcutsEl, el, "f")) }), h("section", { class: "section" }, h("header", { class: "header control-header-with-border spacing-body-inline spacing-body-block-start" }, h("div", {
+        return (h(Host, { class: "widget scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeNewEnvironment_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_chShortcutsEl, el, "f")) }), h("section", { class: "section" }, h("header", { class: {
+                "header": true,
+                "spacing-body-inline": true,
+                "spacing-body-block-start": true,
+                "control-header": this.isAdvanced,
+                "control-header-with-border": !this.isAdvanced
+            } }, h("div", {
             // #environment name
             class: "field field-inline"
-        }, h("label", { class: "label", htmlFor: "environment-name" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").name), h("ch-edit", { autoFocus: true, id: "environment-name", class: "form-input", part: "environment-name", value: this.environmentName, placeholder: __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").environmentNamePlaceholder,
+        }, h("label", { class: "label", htmlFor: "environment-name" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").name), h("ch-edit", {
+            // environment name
+            autoFocus: true, id: "environment-name", class: "form-input", part: "environment-name", value: this.environmentName, placeholder: __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").environmentNamePlaceholder,
             // TODO: toolTip={config.tooltip}
-            ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_environmentNameEl, el, "f")), onInput: !__classPrivateFieldGet(this, _GxIdeNewEnvironment_envNameModifiedByUser, "f") &&
-                __classPrivateFieldGet(this, _GxIdeNewEnvironment_envNameInputHandler, "f") }))), this.isAdvanced ? (h("ch-tab-render", {
+            ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_environmentNameEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeNewEnvironment_envNameInputHandler, "f")
+        }))), this.isAdvanced ? (h("ch-tab-render", {
             // main section
             class: {
                 tab: true,
@@ -307,10 +322,10 @@ export class GxIdeNewEnvironment {
             class: "checkbox", caption: __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").footer.setAsCurrentEnvironment, ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_setAsCurrentEnvironmentEl, el, "f")), checkedValue: "current-environment", value: this.setAsTarget ? "current-environment" : "", part: "set-as-current-environment"
         }), h("div", { class: "buttons-spacer" }, h("button", {
             // #cancel
-            class: "button-secondary", onClick: this.cancelCallback, part: "button button--cancel"
+            class: "button-secondary", onClick: this.cancelCallback, part: "button button-cancel"
         }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").footer.btnCancel), h("button", {
-            // #set new environment
-            class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeNewEnvironment_setEnvironmentHandler, "f"), part: "button button--create"
+            // #create
+            class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeNewEnvironment_createCallbackHandler, "f"), part: "button button-create"
         }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").footer.btnCreate))))));
     }
     static get is() { return "gx-ide-new-environment"; }
@@ -391,24 +406,6 @@ export class GxIdeNewEnvironment {
                     "text": "Allows defining the DBMS to be used in the solution"
                 }
             },
-            "disableAdvanced": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Allows selecting multiple generators for the front end"
-                },
-                "attribute": "disable-advanced",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "environmentName": {
                 "type": "string",
                 "mutable": true,
@@ -426,27 +423,6 @@ export class GxIdeNewEnvironment {
                 "attribute": "environment-name",
                 "reflect": 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": "Allows selecting multiple generators for the front end"
-                }
-            },
             "getDataSourcesCallback": {
                 "type": "unknown",
                 "mutable": false,
@@ -461,7 +437,7 @@ export class GxIdeNewEnvironment {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -473,7 +449,7 @@ export class GxIdeNewEnvironment {
                 "mutable": false,
                 "complexType": {
                     "original": "GetEnvironmentNameCallback",
-                    "resolved": "(selectedLanguageId: string, selectedDataSourceId: string) => Promise<string>",
+                    "resolved": "(selectedLanguageId: string, selectedDataSourceId: string, selectedRuntimeId: string) => Promise<string>",
                     "references": {
                         "GetEnvironmentNameCallback": {
                             "location": "local",
@@ -482,7 +458,7 @@ export class GxIdeNewEnvironment {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -503,7 +479,7 @@ export class GxIdeNewEnvironment {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -596,11 +572,10 @@ export class GxIdeNewEnvironment {
     static get states() {
         return {
             "advancedTabIsVisible": {},
+            "frontEnds": {},
             "validatableControls": {},
             "dataStoresComboBoxModel": {},
-            "dataStoresInitialValue": {},
             "languageComboBoxModel": {},
-            "languageInitialValue": {},
             "runtimesRadioGroupModel": {}
         };
     }
@@ -643,11 +618,5 @@ export class GxIdeNewEnvironment {
             }];
     }
 }
-_GxIdeNewEnvironment_advancedTabHasBeenRendered = new WeakMap(), _GxIdeNewEnvironment_chShortcutsEl = new WeakMap(), _GxIdeNewEnvironment_envNameModifiedByUser = new WeakMap(), _GxIdeNewEnvironment_selectedDataStoreId = new WeakMap(), _GxIdeNewEnvironment_selectedFrontEndsIds = new WeakMap(), _GxIdeNewEnvironment_selectedLanguageId = new WeakMap(), _GxIdeNewEnvironment_selectedRuntimeEnvironmentId = new WeakMap(), _GxIdeNewEnvironment_shortcutsSrc = new WeakMap(), _GxIdeNewEnvironment_newEnvironmentSectionsModel = new WeakMap(), _GxIdeNewEnvironment_componentLocale = new WeakMap(), _GxIdeNewEnvironment_dataStoreEl = new WeakMap(), _GxIdeNewEnvironment_environmentNameEl = new WeakMap(), _GxIdeNewEnvironment_frontEndsEl = new WeakMap(), _GxIdeNewEnvironment_languageEl = new WeakMap(), _GxIdeNewEnvironment_setAsCurrentEnvironmentEl = new WeakMap(), _GxIdeNewEnvironment_dataStoreValueChangedHandler = new WeakMap(), _GxIdeNewEnvironment_envNameInputHandler = new WeakMap(), _GxIdeNewEnvironment_evaluateSelectedRuntimeEnvironmentId = new WeakMap(), _GxIdeNewEnvironment_evaluateSingleRuntimeIcon = new WeakMap(), _GxIdeNewEnvironment_evaluateTooltipRender = new WeakMap(), _GxIdeNewEnvironment_initializeValidatableControlsBasicTab = new WeakMap(), _GxIdeNewEnvironment_languageValueChangedHandler = new WeakMap(), _GxIdeNewEnvironment_renderAdvanced = new WeakMap(), _GxIdeNewEnvironment_renderBasic = new WeakMap(), _GxIdeNewEnvironment_runtimeEnvironmentChangedHandler = new WeakMap(), _GxIdeNewEnvironment_setEnvironmentHandler = new WeakMap(), _GxIdeNewEnvironment_tabSelectionChangedHandler = new WeakMap(), _GxIdeNewEnvironment_updateDataSources = new WeakMap(), _GxIdeNewEnvironment_updateEnvironmentName = new WeakMap(), _GxIdeNewEnvironment_updateSelectedFrontEndsIds = new WeakMap(), _GxIdeNewEnvironment_updateFrontEnds = new WeakMap(), _GxIdeNewEnvironment_instances = new WeakSet(), _GxIdeNewEnvironment_getCheckboxValues = function _GxIdeNewEnvironment_getCheckboxValues() {
-    const checkboxes = __classPrivateFieldGet(this, _GxIdeNewEnvironment_frontEndsEl, "f").querySelectorAll("ch-checkbox");
-    const values = Array.from(checkboxes)
-        .map((checkbox) => checkbox.value)
-        .filter(Boolean);
-    return values;
-};
+_GxIdeNewEnvironment_advancedTabHasBeenRendered = new WeakMap(), _GxIdeNewEnvironment_chShortcutsEl = new WeakMap(), _GxIdeNewEnvironment_envNameModifiedByUser = new WeakMap(), _GxIdeNewEnvironment_frontEndsCheckedMap = new WeakMap(), _GxIdeNewEnvironment_selectedDataStoreId = new WeakMap(), _GxIdeNewEnvironment_selectedLanguageId = new WeakMap(), _GxIdeNewEnvironment_selectedRuntimeEnvironmentId = new WeakMap(), _GxIdeNewEnvironment_shortcutsSrc = new WeakMap(), _GxIdeNewEnvironment_newEnvironmentSectionsModel = new WeakMap(), _GxIdeNewEnvironment_componentLocale = new WeakMap(), _GxIdeNewEnvironment_dataStoreEl = new WeakMap(), _GxIdeNewEnvironment_environmentNameEl = new WeakMap(), _GxIdeNewEnvironment_languageEl = new WeakMap(), _GxIdeNewEnvironment_setAsCurrentEnvironmentEl = new WeakMap(), _GxIdeNewEnvironment_dataStoreValueChangedHandler = new WeakMap(), _GxIdeNewEnvironment_envNameInputHandler = new WeakMap(), _GxIdeNewEnvironment_evaluateSelectedRuntimeEnvironmentId = new WeakMap(), _GxIdeNewEnvironment_evaluateTooltipRender = new WeakMap(), _GxIdeNewEnvironment_initializeValidatableControlsBasicTab = new WeakMap(), _GxIdeNewEnvironment_languageValueChangedHandler = new WeakMap(), _GxIdeNewEnvironment_renderAdvanced = new WeakMap(), _GxIdeNewEnvironment_renderBasic = new WeakMap(), _GxIdeNewEnvironment_runtimeEnvironmentChangedHandler = new WeakMap(), _GxIdeNewEnvironment_createCallbackHandler = new WeakMap(), _GxIdeNewEnvironment_tabSelectionChangedHandler = new WeakMap(), _GxIdeNewEnvironment_updateDataSources = new WeakMap(), _GxIdeNewEnvironment_updateEnvironmentName = new WeakMap(), _GxIdeNewEnvironment_updateFrontEnds = new WeakMap(), _GxIdeNewEnvironment_frontEndCheckboxInputHandler = new WeakMap(), _GxIdeNewEnvironment_updateFrontEndsCheckedMap = new WeakMap();
 //# sourceMappingURL=new-environment.js.map

package/dist/collection/components/new-environment/new-environment.js.map

@@ -1 +1 @@
-{"version":3,"file":"new-environment.js","sourceRoot":"","sources":["../../../src/components/new-environment/new-environment.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Element,\n  getAssetPath,\n  Host,\n  Method,\n  Prop,\n  State,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { config } from \"../../common/config\";\nimport { Locale } from \"../../common/locale\";\nimport {\n  mapOptionsToComboBoxItemModel,\n  renderChCheckboxItems\n} from \"../../common/helpers\";\nimport { getSelectedItem } from \"../../common/common\";\nimport { FormSubmitResult, GxOption } from \"../../common/types\";\nimport {\n  ControlValidation,\n  validateControls\n} from \"../../common/form-validation\";\nimport {\n  ChRadioGroupRenderCustomEvent,\n  TabModel,\n  ComboBoxModel,\n  ChEditCustomEvent,\n  RadioGroupModel\n} from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  // TODO: review if \"utils/form--full\" is required.\n  \"resets/box-sizing\",\n  \"components/tab\",\n  \"components/tooltip\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"chameleon/scrollbar\"\n];\nconst GEMINI_TOOLS_GENEXUS_CLOUD_ON_SURFACE = getIconPath({\n  category: \"window-tools\",\n  name: \"genexus-cloud\",\n  colorType: \"on-surface\"\n});\nconst GEMINI_TOOLS_ROL_ON_SURFACE = getIconPath({\n  category: \"window-tools\",\n  name: \"rol\",\n  colorType: \"on-surface\"\n});\n\nconst MAIN_SECTION_CLASSES: string = \"main\";\nconst BASIC_SECTION_PARENT_CLASSES: string = \"basic\";\nconst BASIC_TAB_SELECTOR: string = \"basic\";\nconst ADVANCED_TAB_SELECTOR: string = \"advanced\";\n\n@Component({\n  tag: \"gx-ide-new-environment\",\n  styleUrl: \"new-environment.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/new-environment\"]\n})\nexport class GxIdeNewEnvironment {\n  #advancedTabHasBeenRendered: boolean = false;\n  #chShortcutsEl!: HTMLChShortcutsElement;\n  #envNameModifiedByUser = false;\n  #selectedDataStoreId: string;\n  #selectedFrontEndsIds: string[] = [];\n  #selectedLanguageId: string;\n  #selectedRuntimeEnvironmentId: string;\n  #shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/new-environment/shortcuts.json`\n  );\n  #newEnvironmentSectionsModel: TabModel = [];\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeNewEnvironmentElement;\n\n  /* References needed to collect data con \"createCallback\" button submit*/\n  #dataStoreEl!: HTMLChComboBoxRenderElement;\n  #environmentNameEl!: HTMLChEditElement;\n  #frontEndsEl!: HTMLDivElement;\n  #languageEl!: HTMLChComboBoxRenderElement;\n  #setAsCurrentEnvironmentEl!: HTMLChCheckboxElement;\n\n  @State() advancedTabIsVisible: boolean = false;\n  @State() validatableControls = new Map<string, ControlValidation>();\n\n  // representations of GxOption[] as ComboBoxModel or RadioGroupModel.\n  @State() dataStoresComboBoxModel: ComboBoxModel = [];\n  @State() dataStoresInitialValue: string;\n  @State() languageComboBoxModel: ComboBoxModel = [];\n  @State() languageInitialValue: string;\n  @State() runtimesRadioGroupModel: RadioGroupModel = [];\n\n  /**\n   * Callback invoked when user wants to cancel\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback invoked when user confirms the KB creation\n   */\n  @Prop() readonly createCallback!: CreateCallback;\n\n  /**\n   * Allows defining the DBMS to be used in the solution\n   */\n  @Prop({ mutable: true }) dataStores!: GxOption[];\n  @Watch(\"dataStores\")\n  dataStoresChanged(newValue: GxOption[]) {\n    if (newValue?.length) {\n      this.dataStoresComboBoxModel = mapOptionsToComboBoxItemModel(newValue);\n      this.dataStoresInitialValue = getSelectedItem(newValue);\n    }\n  }\n\n  /**\n   * Allows selecting multiple generators for the front end\n   */\n  @Prop() readonly disableAdvanced: boolean = false;\n\n  /**\n   * Name of the new environment\n   */\n  @Prop({ mutable: true }) environmentName: string;\n\n  /**\n   * Allows selecting multiple generators for the front end\n   */\n  @Prop({ mutable: true }) frontEnds!: GxOption[];\n\n  /**\n   * Callback invoked when user changes the language or the runtime\n   */\n  @Prop() readonly getDataSourcesCallback: GetDataSourcesCallback;\n\n  /**\n   * Callback invoked when user changes the language or data source\n   */\n  @Prop() readonly getEnvironmentNameCallback: GetEnvironmentNameCallback;\n\n  /**\n   * Callback invoked when user changes the language\n   */\n  @Prop() readonly getFrontEndsCallback: GetFrontEndsCallback;\n\n  /**\n   * Define if the Advanced tab should be displayed\n   */\n  @Prop() readonly isAdvanced: boolean = false;\n\n  /**\n   * Possible values for 'Language' combo\n   */\n  @Prop() readonly languages!: GxOption[];\n  @Watch(\"languages\")\n  languagesChanged(newValue: GxOption[]) {\n    if (newValue?.length) {\n      this.languageComboBoxModel = mapOptionsToComboBoxItemModel(newValue);\n      this.languageInitialValue = getSelectedItem(newValue);\n    }\n  }\n\n  /**\n   * Possible values for 'Runtime Environment' radio button\n   */\n  @Prop() readonly runtimes!: GxOption[];\n  @Watch(\"runtimes\")\n  runtimesChanged(newValue: GxOption[]) {\n    if (newValue?.length) {\n      this.runtimesRadioGroupModel = mapOptionsToComboBoxItemModel(\n        this.runtimes\n      );\n    }\n  }\n\n  /**\n   * Belongs to checkbox 'Set as current environment' @default true\n   *\n   */\n  @Prop() readonly setAsTarget?: boolean = true;\n\n  connectedCallback() {\n    this.dataStoresChanged(this.dataStores);\n    this.languagesChanged(this.languages);\n    this.runtimesChanged(this.runtimes);\n  }\n\n  componentDidLoad() {\n    this.#updateSelectedFrontEndsIds();\n    this.#initializeValidatableControlsBasicTab();\n  }\n\n  componentDidRender() {\n    if (this.advancedTabIsVisible && !this.#advancedTabHasBeenRendered) {\n      // just call this once.\n      this.#advancedTabHasBeenRendered = true;\n    }\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.#newEnvironmentSectionsModel = [\n      {\n        id: BASIC_TAB_SELECTOR,\n        name: this.#componentLocale.tabBasic.tabLabel\n      },\n      {\n        id: ADVANCED_TAB_SELECTOR,\n        name: this.#componentLocale.tabAdvanced.tabLabel\n      }\n    ];\n    this.#evaluateSelectedRuntimeEnvironmentId();\n  }\n\n  /**\n   * Suspends or reactivates the shortcuts\n   */\n  @Method()\n  async suspendShortcuts(suspendShortcuts: boolean) {\n    if (suspendShortcuts) {\n      this.#chShortcutsEl.suspend = true;\n    } else {\n      this.#chShortcutsEl.suspend = false;\n    }\n  }\n\n  #dataStoreValueChangedHandler = () => {\n    /* the data store item id is used for the value (they are equal)*/\n    this.#selectedDataStoreId = this.#dataStoreEl.value;\n    this.#updateEnvironmentName();\n  };\n\n  #envNameInputHandler = (e: ChEditCustomEvent<string> | InputEvent) => {\n    const newEnvName = (e as ChEditCustomEvent<string>).detail.trim();\n    if (newEnvName !== this.environmentName) {\n      this.environmentName = newEnvName;\n      this.#envNameModifiedByUser = true;\n    }\n  };\n\n  #evaluateSelectedRuntimeEnvironmentId = () => {\n    this.#selectedRuntimeEnvironmentId = this.runtimes[0]?.value;\n  };\n\n  #evaluateSingleRuntimeIcon = () => {\n    if (this.runtimes[0].id === \"local\") {\n      return GEMINI_TOOLS_ROL_ON_SURFACE;\n    } else {\n      return GEMINI_TOOLS_GENEXUS_CLOUD_ON_SURFACE;\n    }\n  };\n\n  // TODO: We must avoid performing the get 3 times.\n  // It is used on new-environment as well.\n  #evaluateTooltipRender = (\n    controlReference: HTMLElement\n  ): HTMLChTooltipElement =>\n    this.validatableControls?.get(controlReference?.id)?.hasError &&\n    this.validatableControls.get(controlReference.id)?.message && (\n      <ch-tooltip\n        class=\"tooltip\"\n        actionElement={controlReference as unknown as HTMLButtonElement}\n        blockAlign={config.tooltipSettings.blockAlign}\n        inlineAlign={config.tooltipSettings.inlineAlign}\n        delay={config.tooltipSettings.delay}\n      >\n        {this.validatableControls.get(controlReference.id).message}\n      </ch-tooltip>\n    );\n\n  #getCheckboxValues() {\n    const checkboxes = this.#frontEndsEl.querySelectorAll(\"ch-checkbox\");\n    const values: Array<string> = Array.from(checkboxes)\n      .map((checkbox: any) => checkbox.value)\n      .filter(Boolean);\n    return values;\n  }\n\n  #initializeValidatableControlsBasicTab = () => {\n    // populate #controlsValidation with the controls that could have errors.\n    const validatableControls: HTMLElement[] = [\n      this.#dataStoreEl,\n      this.#languageEl\n    ];\n    validatableControls.forEach(validatableControl => {\n      if (validatableControl.id) {\n        this.validatableControls.set(validatableControl.id, {\n          reference: validatableControl,\n          hasError: false,\n          message: undefined\n        });\n      }\n    });\n  };\n\n  #languageValueChangedHandler = () => {\n    /* the language item id is used for the value (they are equal)*/\n    this.#selectedLanguageId = this.#languageEl.value;\n    this.#updateDataSources();\n    this.#updateFrontEnds();\n    this.#updateEnvironmentName();\n  };\n\n  #renderAdvanced = (): Element => {\n    return <slot name=\"property-grid\"></slot>;\n  };\n\n  #renderBasic = (): HTMLElement[] => {\n    return [\n      <div class=\"basic__runtime-environment control-header-with-border\">\n        <h2\n          // back end\n          class=\"control-header heading-5 text-align-center\"\n        >\n          {this.#componentLocale.runtime}\n        </h2>\n        {this.runtimes.length > 1 ? (\n          <ch-radio-group-render\n            class=\"radio-group\"\n            onChange={this.#runtimeEnvironmentChangedHandler}\n            model={this.runtimesRadioGroupModel}\n            value={this.#selectedRuntimeEnvironmentId}\n          ></ch-radio-group-render>\n        ) : (\n          <div>\n            <ch-image\n              class=\"icon-sm\"\n              src={this.#evaluateSingleRuntimeIcon()}\n            ></ch-image>\n            <p class=\"text-body\">{this.runtimes[0].label} </p>\n          </div>\n        )}\n      </div>,\n      <section class=\"basic__back-end scrollable\">\n        <h2\n          // back end\n          class=\"control-header control-header-with-border control-header__back-end heading-5 text-align-center spacing-body-inline\"\n        >\n          {this.#componentLocale.tabBasic.backEnd.backEndLabel}\n        </h2>\n\n        <div class=\"field-group main__back-end spacing-body-inline scrollable\">\n          <div\n            // #language\n            class=\"field field-block\"\n          >\n            <label class=\"label\" htmlFor=\"language\">\n              {this.#componentLocale.tabBasic.backEnd.language}\n            </label>\n            <ch-combo-box-render\n              id=\"language\"\n              class=\"combo-box\"\n              part=\"language\"\n              value={this.languageInitialValue}\n              disabled={this.languages.length === 0}\n              model={this.languageComboBoxModel}\n              onInput={\n                this.languages.length > 0 && this.#languageValueChangedHandler\n              }\n              ref={(el: HTMLChComboBoxRenderElement) =>\n                (this.#languageEl = el as HTMLChComboBoxRenderElement)\n              }\n              // TODO: toolTip={config.tooltip}\n            ></ch-combo-box-render>\n            {this.#evaluateTooltipRender(this.#languageEl)}\n          </div>\n\n          <div\n            // #data stores\n            class=\"field field-block\"\n          >\n            <label class=\"label\" htmlFor=\"data-store\">\n              {this.#componentLocale.tabBasic.backEnd.dataStores}\n            </label>\n            <ch-combo-box-render\n              id=\"data-store\"\n              class=\"combo-box\"\n              part=\"data-store\"\n              value={this.dataStoresInitialValue}\n              model={this.dataStoresComboBoxModel}\n              onInput={this.#dataStoreValueChangedHandler}\n              ref={(el: HTMLChComboBoxRenderElement) =>\n                (this.#dataStoreEl = el as HTMLChComboBoxRenderElement)\n              }\n              // TODO: toolTip={config.tooltip}\n            ></ch-combo-box-render>\n            {this.#evaluateTooltipRender(this.#dataStoreEl)}\n          </div>\n        </div>\n      </section>,\n\n      <section class=\"basic__front-end scrollable\">\n        <h2\n          // front end\n          class=\"control-header control-header-with-border control-header__front-end heading-5 text-align-center spacing-body-inline\"\n        >\n          {this.#componentLocale.tabBasic.frontEnd.frontEndLabel}\n        </h2>\n        <div\n          class=\"field-group front-end__checkboxes spacing-body-inline main__front-end scrollable\"\n          role=\"group\"\n          aria-labelledby={this.#componentLocale.tabBasic.frontEnd.generators}\n          ref={(el: HTMLDivElement) =>\n            (this.#frontEndsEl = el as HTMLDivElement)\n          }\n        >\n          {renderChCheckboxItems(\n            this.frontEnds,\n            \"front-end\",\n            this.#updateSelectedFrontEndsIds\n          )}\n        </div>\n      </section>\n    ];\n  };\n\n  #runtimeEnvironmentChangedHandler = (\n    event: ChRadioGroupRenderCustomEvent<string>\n  ): void => {\n    this.#selectedRuntimeEnvironmentId = event.detail;\n    this.#updateDataSources();\n  };\n\n  #setEnvironmentHandler = async () => {\n    this.createCallback({\n      setAsCurrent: !!this.#setAsCurrentEnvironmentEl?.value,\n      name: this.#environmentNameEl.value,\n      runtime: this.#selectedRuntimeEnvironmentId,\n      language: this.#languageEl.value,\n      dataStores: this.#dataStoreEl.value,\n      frontEnds: this.#selectedFrontEndsIds\n    }).then((formSubmitResult: FormSubmitResult) => {\n      this.validatableControls = validateControls(\n        formSubmitResult,\n        this.validatableControls\n      );\n    });\n  };\n\n  #tabSelectionChangedHandler = (\n    event: CustomEvent<{\n      lastSelectedIndex: number;\n      newSelectedId: string;\n      newSelectedIndex: number;\n    }>\n  ): void => {\n    if (event.detail.newSelectedId === ADVANCED_TAB_SELECTOR) {\n      this.advancedTabIsVisible = true;\n      // Some logic for advanced tab is done on componentDidRender lifecycle,\n      // since the reference to the elements is needed.\n    }\n  };\n\n  #updateDataSources = async () => {\n    if (this.getDataSourcesCallback) {\n      const updatedDataSources = await this.getDataSourcesCallback(\n        this.#selectedLanguageId,\n        this.#selectedRuntimeEnvironmentId\n      );\n      if (updatedDataSources?.length > 0) {\n        this.dataStores = updatedDataSources;\n      }\n    }\n  };\n\n  #updateEnvironmentName = async () => {\n    if (\n      this.getEnvironmentNameCallback &&\n      this.#environmentNameEl &&\n      !this.#envNameModifiedByUser\n    ) {\n      const updatedEnvName = await this.getEnvironmentNameCallback(\n        this.#selectedLanguageId,\n        this.#selectedDataStoreId\n      );\n      if (updatedEnvName) {\n        this.environmentName = updatedEnvName;\n      }\n    }\n  };\n\n  #updateSelectedFrontEndsIds = () => {\n    this.#selectedFrontEndsIds = this.#getCheckboxValues();\n  };\n\n  #updateFrontEnds = async () => {\n    if (this.getFrontEndsCallback) {\n      const updatedFrontEnds = await this.getFrontEndsCallback(\n        this.#selectedLanguageId\n      );\n      if (updatedFrontEnds?.length > 0) {\n        this.frontEnds = updatedFrontEnds;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"widget scrollable\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <ch-shortcuts\n          src={this.#shortcutsSrc}\n          ref={(el: HTMLChShortcutsElement) =>\n            (this.#chShortcutsEl = el as HTMLChShortcutsElement)\n          }\n        ></ch-shortcuts>\n\n        <section class=\"section\">\n          <header class=\"header control-header-with-border spacing-body-inline spacing-body-block-start\">\n            <div\n              // #environment name\n              class=\"field field-inline\"\n            >\n              <label class=\"label\" htmlFor=\"environment-name\">\n                {this.#componentLocale.name}\n              </label>\n              <ch-edit\n                autoFocus\n                id=\"environment-name\"\n                class=\"form-input\"\n                part=\"environment-name\"\n                value={this.environmentName}\n                placeholder={this.#componentLocale.environmentNamePlaceholder}\n                // TODO: toolTip={config.tooltip}\n                ref={(el: HTMLChEditElement) =>\n                  (this.#environmentNameEl = el as HTMLChEditElement)\n                }\n                onInput={\n                  !this.#envNameModifiedByUser &&\n                  (this.#envNameInputHandler as any)\n                }\n              ></ch-edit>\n            </div>\n          </header>\n\n          {this.isAdvanced ? (\n            <ch-tab-render\n              // main section\n              class={{\n                tab: true,\n                [MAIN_SECTION_CLASSES]: true\n              }}\n              direction=\"block\"\n              model={this.#newEnvironmentSectionsModel}\n              selectedId={BASIC_TAB_SELECTOR}\n              overflow=\"auto\"\n              contain=\"size\"\n              onSelectedItemChange={\n                !this.advancedTabIsVisible && this.#tabSelectionChangedHandler\n              }\n            >\n              <div\n                slot={BASIC_TAB_SELECTOR}\n                class={BASIC_SECTION_PARENT_CLASSES}\n                part=\"tab-button-basic\"\n              >\n                {this.#renderBasic()}\n              </div>\n              {this.advancedTabIsVisible && (\n                <div\n                  slot={ADVANCED_TAB_SELECTOR}\n                  class=\"advanced spacing-body-inline\"\n                  part=\"tab-button-advanced\"\n                >\n                  {this.#renderAdvanced()}\n                </div>\n              )}\n            </ch-tab-render>\n          ) : (\n            <div\n              // main section\n              class={MAIN_SECTION_CLASSES}\n            >\n              <div class={BASIC_SECTION_PARENT_CLASSES}>\n                {this.#renderBasic()}\n              </div>\n            </div>\n          )}\n\n          <footer\n            class={{\n              \"control-footer\": this.isAdvanced,\n              \"control-footer-with-border\": !this.isAdvanced,\n              \"control-footer-space-between\": true,\n              \"spacing-body-block-end\": true,\n              \"spacing-body-inline\": true\n            }}\n          >\n            <ch-checkbox\n              // #set as current environment\n              class=\"checkbox\"\n              caption={this.#componentLocale.footer.setAsCurrentEnvironment}\n              ref={(el: HTMLChCheckboxElement) =>\n                (this.#setAsCurrentEnvironmentEl = el as HTMLChCheckboxElement)\n              }\n              checkedValue=\"current-environment\"\n              value={this.setAsTarget ? \"current-environment\" : \"\"}\n              part=\"set-as-current-environment\"\n            ></ch-checkbox>\n\n            <div class=\"buttons-spacer\">\n              <button\n                // #cancel\n                class=\"button-secondary\"\n                onClick={this.cancelCallback}\n                part=\"button button--cancel\"\n              >\n                {this.#componentLocale.footer.btnCancel}\n              </button>\n\n              <button\n                // #set new environment\n                class=\"button-primary\"\n                onClick={this.#setEnvironmentHandler}\n                part=\"button button--create\"\n              >\n                {this.#componentLocale.footer.btnCreate}\n              </button>\n            </div>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type ChangedCallback = (data: NewEnvironmentData) => Promise<void>;\n\nexport type CreateCallback = (\n  data: NewEnvironmentData\n) => Promise<FormSubmitResult>;\n\nexport type GetDataSourcesCallback = (\n  selectedLanguageId: string,\n  selectedRuntimeId: string\n) => Promise<GxOption[]>;\n\nexport type GetEnvironmentNameCallback = (\n  selectedLanguageId: string,\n  selectedDataSourceId: string\n) => Promise<string | undefined>;\n\nexport type GetFrontEndsCallback = (\n  selectedLanguageId: string\n) => Promise<GxOption[]>;\n\nexport interface NewEnvironmentData {\n  setAsCurrent: boolean;\n  name: string;\n  runtime: string;\n  language: string;\n  dataStores: string;\n  frontEnds: string[];\n}\n"]}
+{"version":3,"file":"new-environment.js","sourceRoot":"","sources":["../../../src/components/new-environment/new-environment.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Element,\n  getAssetPath,\n  Host,\n  Method,\n  Prop,\n  State,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nimport { config } from \"../../common/config\";\nimport { Locale } from \"../../common/locale\";\nimport {\n  mapOptionsToComboBoxItemModel,\n  renderChCheckboxItems\n} from \"../../common/helpers\";\nimport { getSelectedItem } from \"../../common/common\";\nimport { FormSubmitResult, GxOption } from \"../../common/types\";\nimport {\n  ControlValidation,\n  validateControls\n} from \"../../common/form-validation\";\nimport {\n  ChRadioGroupRenderCustomEvent,\n  TabModel,\n  ComboBoxModel,\n  ChEditCustomEvent,\n  RadioGroupModel,\n  ChCheckboxCustomEvent\n} from \"@genexus/chameleon-controls-library\";\nimport { removeIndex } from \"../../common/array\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  // TODO: review if \"utils/form--full\" is required.\n  \"resets/box-sizing\",\n  \"components/tab\",\n  \"components/tooltip\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"chameleon/scrollbar\"\n];\n\nconst MAIN_SECTION_CLASSES: string = \"main\";\nconst BASIC_SECTION_PARENT_CLASSES: string = \"basic\";\nconst BASIC_TAB_SELECTOR: string = \"basic\";\nconst ADVANCED_TAB_SELECTOR: string = \"advanced\";\n\n@Component({\n  tag: \"gx-ide-new-environment\",\n  styleUrl: \"new-environment.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/new-environment\"]\n})\nexport class GxIdeNewEnvironment {\n  #advancedTabHasBeenRendered: boolean = false;\n  #chShortcutsEl!: HTMLChShortcutsElement;\n  #envNameModifiedByUser = false;\n  /**\n   * frontEndsState saves the id's of the front ends checkboxes that are checked\n   */\n  // TODO (Use a set instead of an array to improve performance)\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #frontEndsCheckedMap = new Map<string, string[]>();\n  #selectedDataStoreId: string;\n  #selectedLanguageId: string;\n  #selectedRuntimeEnvironmentId: string;\n  #shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/new-environment/shortcuts.json`\n  );\n  #newEnvironmentSectionsModel: TabModel = [];\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeNewEnvironmentElement;\n\n  // References needed to collect data con \"createCallback\" button submit*/\n  #dataStoreEl!: HTMLChComboBoxRenderElement;\n  #environmentNameEl!: HTMLChEditElement;\n  #languageEl!: HTMLChComboBoxRenderElement;\n  #setAsCurrentEnvironmentEl!: HTMLChCheckboxElement;\n\n  @State() advancedTabIsVisible: boolean = false;\n\n  /**\n   * Allows selecting multiple generators for the front end\n   * TODO: Check if this property can be deleted, since we can call getFrontEndsCallback.\n   */\n  @State() frontEnds: GxOption[];\n\n  @State() validatableControls = new Map<string, ControlValidation>();\n\n  // representations of GxOption[] as ComboBoxModel or RadioGroupModel.\n  @State() dataStoresComboBoxModel: ComboBoxModel = [];\n  @State() languageComboBoxModel: ComboBoxModel = [];\n  @State() runtimesRadioGroupModel: RadioGroupModel = [];\n\n  /**\n   * Callback invoked when user wants to cancel\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback invoked when user confirms the KB creation\n   */\n  @Prop() readonly createCallback!: CreateCallback;\n\n  /**\n   * Allows defining the DBMS to be used in the solution\n   */\n  @Prop({ mutable: true }) dataStores!: GxOption[];\n  @Watch(\"dataStores\")\n  dataStoresChanged(newValue: GxOption[]) {\n    if (newValue?.length) {\n      this.dataStoresComboBoxModel = mapOptionsToComboBoxItemModel(newValue);\n      this.#selectedDataStoreId = getSelectedItem(newValue);\n    }\n  }\n\n  /**\n   * Name of the new environment\n   */\n  @Prop({ mutable: true }) environmentName: string;\n\n  /**\n   * Callback invoked when user changes the language or the runtime\n   */\n  @Prop() readonly getDataSourcesCallback!: GetDataSourcesCallback;\n\n  /**\n   * Callback invoked when user changes the language or data source\n   */\n  @Prop() readonly getEnvironmentNameCallback!: GetEnvironmentNameCallback;\n\n  /**\n   * Callback invoked when user changes the language\n   */\n  @Prop() readonly getFrontEndsCallback!: GetFrontEndsCallback;\n\n  /**\n   * Define if the Advanced tab should be displayed\n   */\n  @Prop() readonly isAdvanced: boolean = false;\n\n  /**\n   * Possible values for 'Language' combo\n   */\n  @Prop() readonly languages!: GxOption[];\n  @Watch(\"languages\")\n  languagesChanged(newValue: GxOption[]) {\n    if (newValue?.length) {\n      this.languageComboBoxModel = mapOptionsToComboBoxItemModel(newValue);\n      this.#selectedLanguageId = getSelectedItem(newValue);\n      this.#updateFrontEnds();\n    }\n  }\n\n  /**\n   * Possible values for 'Runtime Environment' radio button\n   */\n  @Prop() readonly runtimes!: GxOption[];\n  @Watch(\"runtimes\")\n  runtimesChanged(newValue: GxOption[]) {\n    if (newValue?.length) {\n      this.runtimesRadioGroupModel = mapOptionsToComboBoxItemModel(\n        this.runtimes\n      );\n    }\n  }\n\n  /**\n   * Belongs to checkbox 'Set as current environment' @default true\n   *\n   */\n  @Prop() readonly setAsTarget?: boolean = true;\n\n  connectedCallback() {\n    this.dataStoresChanged(this.dataStores);\n    this.languagesChanged(this.languages);\n    this.runtimesChanged(this.runtimes);\n  }\n\n  componentDidLoad() {\n    this.#initializeValidatableControlsBasicTab();\n  }\n\n  componentDidRender() {\n    if (this.advancedTabIsVisible && !this.#advancedTabHasBeenRendered) {\n      // just call this once.\n      this.#advancedTabHasBeenRendered = true;\n    }\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.#newEnvironmentSectionsModel = [\n      {\n        id: BASIC_TAB_SELECTOR,\n        name: this.#componentLocale.tabBasic.tabLabel\n      },\n      {\n        id: ADVANCED_TAB_SELECTOR,\n        name: this.#componentLocale.tabAdvanced.tabLabel\n      }\n    ];\n    this.#evaluateSelectedRuntimeEnvironmentId();\n  }\n\n  /**\n   * Suspends or reactivates the shortcuts\n   */\n  @Method()\n  async suspendShortcuts(suspendShortcuts: boolean) {\n    if (suspendShortcuts) {\n      this.#chShortcutsEl.suspend = true;\n    } else {\n      this.#chShortcutsEl.suspend = false;\n    }\n  }\n\n  #dataStoreValueChangedHandler = () => {\n    /* the data store item id is used for the value (they are equal)*/\n    this.#selectedDataStoreId = this.#dataStoreEl.value;\n    this.#updateEnvironmentName();\n  };\n\n  #envNameInputHandler = (e: ChEditCustomEvent<string> | InputEvent) => {\n    const newEnvName = (e as ChEditCustomEvent<string>).detail.trim();\n    this.#envNameModifiedByUser = newEnvName !== this.environmentName;\n  };\n\n  #evaluateSelectedRuntimeEnvironmentId = () => {\n    this.#selectedRuntimeEnvironmentId = this.runtimes[0]?.value;\n  };\n\n  // TODO: We must avoid performing the get 3 times.\n  // It is used on new-environment as well.\n  #evaluateTooltipRender = (\n    controlReference: HTMLElement\n  ): HTMLChTooltipElement =>\n    this.validatableControls?.get(controlReference?.id)?.hasError &&\n    this.validatableControls.get(controlReference.id)?.message && (\n      <ch-tooltip\n        class=\"tooltip\"\n        actionElement={controlReference as unknown as HTMLButtonElement}\n        blockAlign={config.tooltipSettings.blockAlign}\n        inlineAlign={config.tooltipSettings.inlineAlign}\n        delay={config.tooltipSettings.delay}\n      >\n        {this.validatableControls.get(controlReference.id).message}\n      </ch-tooltip>\n    );\n\n  #initializeValidatableControlsBasicTab = () => {\n    // populate #controlsValidation with the controls that could have errors.\n    const validatableControls: HTMLElement[] = [\n      this.#dataStoreEl,\n      this.#languageEl\n    ];\n    validatableControls.forEach(validatableControl => {\n      if (validatableControl.id) {\n        this.validatableControls.set(validatableControl.id, {\n          reference: validatableControl,\n          hasError: false,\n          message: undefined\n        });\n      }\n    });\n  };\n\n  #languageValueChangedHandler = async (\n    event: CustomEvent<string> | InputEvent\n  ) => {\n    this.#selectedLanguageId = event.detail as string;\n    await this.#updateDataSources();\n    this.#updateFrontEnds();\n    this.#updateEnvironmentName();\n  };\n\n  #renderAdvanced = (): Element => {\n    return <slot name=\"property-grid\"></slot>;\n  };\n\n  #renderBasic = (): HTMLElement[] => {\n    return [\n      <div\n        class={{\n          \"basic__runtime-environment\": true,\n          \"control-header-with-border\": true,\n          \"one-runtime-only\": this.runtimes.length === 1\n        }}\n      >\n        {this.runtimes.length > 1\n          ? [\n              <h2\n                // Runtime Environment\n                class=\"heading-5 text-align-center\"\n              >\n                {this.#componentLocale.runtime}\n              </h2>,\n              <ch-radio-group-render\n                class=\"radio-group\"\n                onChange={this.#runtimeEnvironmentChangedHandler}\n                model={this.runtimesRadioGroupModel}\n                value={this.#selectedRuntimeEnvironmentId}\n              ></ch-radio-group-render>\n            ]\n          : [\n              <h2 class=\"heading-5 text-align-center\">\n                {this.#componentLocale.runtime}:\n              </h2>,\n              <p>{this.runtimesRadioGroupModel[0].caption}</p>\n            ]}\n      </div>,\n      <section class=\"basic__back-end scrollable\">\n        <h2\n          // back end\n          class=\"control-header control-header-with-border control-header__back-end heading-5 text-align-center spacing-body-inline\"\n        >\n          {this.#componentLocale.tabBasic.backEnd.backEndLabel}\n        </h2>\n\n        <div class=\"field-group main__back-end spacing-body-inline scrollable\">\n          <div\n            // #language\n            class=\"field field-block\"\n          >\n            <label class=\"label\" htmlFor=\"language\">\n              {this.#componentLocale.tabBasic.backEnd.language}\n            </label>\n            <ch-combo-box-render\n              id=\"language\"\n              class=\"combo-box\"\n              part=\"language\"\n              value={this.#selectedLanguageId}\n              disabled={this.languages.length === 0}\n              model={this.languageComboBoxModel}\n              onInput={this.#languageValueChangedHandler}\n              ref={(el: HTMLChComboBoxRenderElement) =>\n                (this.#languageEl = el as HTMLChComboBoxRenderElement)\n              }\n              // TODO: toolTip={config.tooltip}\n            ></ch-combo-box-render>\n            {this.#evaluateTooltipRender(this.#languageEl)}\n          </div>\n\n          <div\n            // #data stores\n            class=\"field field-block\"\n          >\n            <label class=\"label\" htmlFor=\"data-store\">\n              {this.#componentLocale.tabBasic.backEnd.dataStores}\n            </label>\n            <ch-combo-box-render\n              id=\"data-store\"\n              class=\"combo-box\"\n              part=\"data-store\"\n              value={this.#selectedDataStoreId}\n              model={this.dataStoresComboBoxModel}\n              onInput={this.#dataStoreValueChangedHandler}\n              ref={(el: HTMLChComboBoxRenderElement) =>\n                (this.#dataStoreEl = el as HTMLChComboBoxRenderElement)\n              }\n              // TODO: toolTip={config.tooltip}\n            ></ch-combo-box-render>\n            {this.#evaluateTooltipRender(this.#dataStoreEl)}\n          </div>\n        </div>\n      </section>,\n\n      <section class=\"basic__front-end scrollable\">\n        <h2\n          // front end\n          class=\"control-header control-header-with-border control-header__front-end heading-5 text-align-center spacing-body-inline\"\n        >\n          {this.#componentLocale.tabBasic.frontEnd.frontEndLabel}\n        </h2>\n        <div\n          class=\"field-group front-end__checkboxes spacing-body-inline main__front-end scrollable\"\n          role=\"group\"\n          aria-labelledby={this.#componentLocale.tabBasic.frontEnd.generators}\n        >\n          {renderChCheckboxItems(\n            this.frontEnds,\n            this.#frontEndCheckboxInputHandler,\n            this.#frontEndsCheckedMap.get(this.#selectedLanguageId)\n          )}\n        </div>\n      </section>\n    ];\n  };\n\n  #runtimeEnvironmentChangedHandler = (\n    event: ChRadioGroupRenderCustomEvent<string>\n  ): void => {\n    this.#selectedRuntimeEnvironmentId = event.detail;\n    this.#updateDataSources();\n    this.#updateEnvironmentName();\n  };\n\n  #createCallbackHandler = async () => {\n    const selectedFrontEndIds =\n      this.#frontEndsCheckedMap.get(this.#selectedLanguageId) ?? [];\n\n    this.createCallback({\n      setAsCurrent: !!this.#setAsCurrentEnvironmentEl?.value,\n      name: this.#environmentNameEl.value,\n      runtime: this.#selectedRuntimeEnvironmentId,\n      language: this.#languageEl.value,\n      dataStores: this.#dataStoreEl.value,\n      frontEnds: selectedFrontEndIds\n    }).then((formSubmitResult: FormSubmitResult) => {\n      this.validatableControls = validateControls(\n        formSubmitResult,\n        this.validatableControls\n      );\n    });\n  };\n\n  #tabSelectionChangedHandler = (\n    event: CustomEvent<{\n      lastSelectedIndex: number;\n      newSelectedId: string;\n      newSelectedIndex: number;\n    }>\n  ): void => {\n    if (event.detail.newSelectedId === ADVANCED_TAB_SELECTOR) {\n      this.advancedTabIsVisible = true;\n      // Some logic for advanced tab is done on componentDidRender lifecycle,\n      // since the reference to the elements is needed.\n    }\n  };\n\n  #updateDataSources = async () => {\n    const updatedDataSources = await this.getDataSourcesCallback(\n      this.#selectedLanguageId,\n      this.#selectedRuntimeEnvironmentId\n    );\n    if (updatedDataSources?.length > 0) {\n      this.dataStores = updatedDataSources;\n    }\n  };\n\n  #updateEnvironmentName = async () => {\n    if (!this.#envNameModifiedByUser) {\n      this.environmentName = await this.getEnvironmentNameCallback(\n        this.#selectedLanguageId,\n        this.#selectedDataStoreId,\n        this.#selectedRuntimeEnvironmentId\n      );\n    }\n  };\n\n  #updateFrontEnds = async () => {\n    const updatedFrontEnds = await this.getFrontEndsCallback(\n      this.#selectedLanguageId\n    );\n    if (updatedFrontEnds?.length > 0) {\n      this.frontEnds = updatedFrontEnds;\n    }\n  };\n\n  #frontEndCheckboxInputHandler = (\n    event: ChCheckboxCustomEvent<string> | InputEvent\n  ) => {\n    const checkedValue = (event.target as HTMLChCheckboxElement).checkedValue;\n    const checked = event.detail === checkedValue;\n    this.#updateFrontEndsCheckedMap(checkedValue, checked);\n  };\n\n  /**\n   * This function updates frontEndsCheckedMap, that contains the checked\n   * checkboxes for each language front ends.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #updateFrontEndsCheckedMap = (checkboxId: string, checked: boolean) => {\n    let currentState = this.#frontEndsCheckedMap.get(this.#selectedLanguageId);\n    if (!currentState) {\n      // first time\n      currentState = [];\n      this.#frontEndsCheckedMap.set(this.#selectedLanguageId, currentState);\n    }\n    if (checked) {\n      // update by adding\n      currentState.push(checkboxId);\n    } else {\n      // update by removing\n      const checkboxIndex = currentState.findIndex(id => id === checkboxId);\n      removeIndex(currentState, checkboxIndex);\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"widget scrollable\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <ch-shortcuts\n          src={this.#shortcutsSrc}\n          ref={(el: HTMLChShortcutsElement) =>\n            (this.#chShortcutsEl = el as HTMLChShortcutsElement)\n          }\n        ></ch-shortcuts>\n\n        <section class=\"section\">\n          {/* <header class=\" spacing-body-inline \n          spacing-body-block-start\"> */}\n          <header\n            class={{\n              \"header\": true,\n              \"spacing-body-inline\": true,\n              \"spacing-body-block-start\": true,\n              \"control-header\": this.isAdvanced,\n              \"control-header-with-border\": !this.isAdvanced\n            }}\n          >\n            <div\n              // #environment name\n              class=\"field field-inline\"\n            >\n              <label class=\"label\" htmlFor=\"environment-name\">\n                {this.#componentLocale.name}\n              </label>\n              <ch-edit\n                // environment name\n                autoFocus\n                id=\"environment-name\"\n                class=\"form-input\"\n                part=\"environment-name\"\n                value={this.environmentName}\n                placeholder={this.#componentLocale.environmentNamePlaceholder}\n                // TODO: toolTip={config.tooltip}\n                ref={(el: HTMLChEditElement) =>\n                  (this.#environmentNameEl = el as HTMLChEditElement)\n                }\n                onInput={this.#envNameInputHandler}\n              ></ch-edit>\n            </div>\n          </header>\n\n          {this.isAdvanced ? (\n            <ch-tab-render\n              // main section\n              class={{\n                tab: true,\n                [MAIN_SECTION_CLASSES]: true\n              }}\n              direction=\"block\"\n              model={this.#newEnvironmentSectionsModel}\n              selectedId={BASIC_TAB_SELECTOR}\n              overflow=\"auto\"\n              contain=\"size\"\n              onSelectedItemChange={\n                !this.advancedTabIsVisible && this.#tabSelectionChangedHandler\n              }\n            >\n              <div\n                slot={BASIC_TAB_SELECTOR}\n                class={BASIC_SECTION_PARENT_CLASSES}\n                part=\"tab-button-basic\"\n              >\n                {this.#renderBasic()}\n              </div>\n              {this.advancedTabIsVisible && (\n                <div\n                  slot={ADVANCED_TAB_SELECTOR}\n                  class=\"advanced spacing-body-inline\"\n                  part=\"tab-button-advanced\"\n                >\n                  {this.#renderAdvanced()}\n                </div>\n              )}\n            </ch-tab-render>\n          ) : (\n            <div\n              // main section\n              class={MAIN_SECTION_CLASSES}\n            >\n              <div class={BASIC_SECTION_PARENT_CLASSES}>\n                {this.#renderBasic()}\n              </div>\n            </div>\n          )}\n\n          <footer\n            class={{\n              \"control-footer\": this.isAdvanced,\n              \"control-footer-with-border\": !this.isAdvanced,\n              \"control-footer-space-between\": true,\n              \"spacing-body-block-end\": true,\n              \"spacing-body-inline\": true\n            }}\n          >\n            <ch-checkbox\n              // #set as current environment\n              class=\"checkbox\"\n              caption={this.#componentLocale.footer.setAsCurrentEnvironment}\n              ref={(el: HTMLChCheckboxElement) =>\n                (this.#setAsCurrentEnvironmentEl = el as HTMLChCheckboxElement)\n              }\n              checkedValue=\"current-environment\"\n              value={this.setAsTarget ? \"current-environment\" : \"\"}\n              part=\"set-as-current-environment\"\n            ></ch-checkbox>\n\n            <div class=\"buttons-spacer\">\n              <button\n                // #cancel\n                class=\"button-secondary\"\n                onClick={this.cancelCallback}\n                part=\"button button-cancel\"\n              >\n                {this.#componentLocale.footer.btnCancel}\n              </button>\n\n              <button\n                // #create\n                class=\"button-primary\"\n                onClick={this.#createCallbackHandler}\n                part=\"button button-create\"\n              >\n                {this.#componentLocale.footer.btnCreate}\n              </button>\n            </div>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type CreateCallback = (\n  data: NewEnvironmentData\n) => Promise<FormSubmitResult>;\n\nexport type GetDataSourcesCallback = (\n  selectedLanguageId: string,\n  selectedRuntimeId: string\n) => Promise<GxOption[]>;\n\nexport type GetEnvironmentNameCallback = (\n  selectedLanguageId: string,\n  selectedDataSourceId: string,\n  selectedRuntimeId: string\n) => Promise<string | undefined>;\n\nexport type GetFrontEndsCallback = (\n  selectedLanguageId: string\n) => Promise<GxOption[]>;\n\nexport interface NewEnvironmentData {\n  setAsCurrent: boolean;\n  name: string;\n  runtime: string;\n  language: string;\n  dataStores: string;\n  frontEnds: string[];\n}\n"]}