@genexus/genexus-ide-ui 1.0.13 → 1.0.15

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

@@ -1,206 +1,317 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _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;
 /* STENCIL IMPORTS */
-import { Host, h, getAssetPath } from "@stencil/core";
-/* CUSTOM IMPORTS */
-import { Locale } from "../../common/locale";
-import { setInitialComboValue } from "../../common/helpers";
+import { getAssetPath, Host, h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
 import { config } from "../../common/config";
-import { renderFormItems } from "../../common/common";
-import { formSubmitValidation } from "../../common/helpers";
+import { Locale } from "../../common/locale";
+import { mapOptionsToComboBoxItemModel, renderChCheckboxItems } from "../../common/helpers";
+import { getSelectedItem } from "../../common/common";
+import { validateControls } from "../../common/form-validation";
+const CSS_BUNDLES = [
+    // TODO: review if "utils/form--full" is required.
+    "resets/box-sizing",
+    "components/tab",
+    "components/tooltip",
+    "utils/form--full",
+    "utils/layout",
+    "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() {
-        this.renderedFirstTime = false;
-        this.selectedFrontEndsIds = [];
-        this.envNameModifiedByUser = false;
-        this.shortcutsSrc = getAssetPath(`./gx-ide-assets/new-environment/shortcuts.json`);
-        // 9.LOCAL METHODS //
-        // 9.LOCAL METHODS -> Helpers //
-        this.initialSetup = () => {
-            this.updateSelectedFrontEndsIds();
-            this.setInitialRuntimeId();
-            this.setInitialLanguageId();
-            this.setInitialDataStoreId();
-        };
-        this.evaluateSelectedRuntimeEnvironmentId = () => {
-            if (this.runtimes.length === 1) {
-                this.selectedRuntimeEnvironmentId = this.runtimes[0].id;
+        _GxIdeNewEnvironment_instances.add(this);
+        _GxIdeNewEnvironment_advancedTabHasBeenRendered.set(this, false);
+        _GxIdeNewEnvironment_chShortcutsEl.set(this, void 0);
+        _GxIdeNewEnvironment_envNameModifiedByUser.set(this, false);
+        _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`));
+        _GxIdeNewEnvironment_newEnvironmentSectionsModel.set(this, []);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // 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*/
+        _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, () => {
+            /* the data store item id is used for the value (they are equal)*/
+            __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedDataStoreId, __classPrivateFieldGet(this, _GxIdeNewEnvironment_dataStoreEl, "f").value, "f");
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateEnvironmentName, "f").call(this);
+        });
+        _GxIdeNewEnvironment_envNameInputHandler.set(this, (e) => {
+            const newEnvName = e.detail.trim();
+            if (newEnvName !== this.environmentName) {
+                this.environmentName = newEnvName;
+                __classPrivateFieldSet(this, _GxIdeNewEnvironment_envNameModifiedByUser, true, "f");
             }
-        };
-        this.setInitialRuntimeId = () => {
+        });
+        _GxIdeNewEnvironment_evaluateSelectedRuntimeEnvironmentId.set(this, () => {
             var _a;
-            if ((_a = this.runtimeEnvironmentEl) === null || _a === void 0 ? void 0 : _a.value) {
-                const initialRuntimeEnvironment = this.runtimes.find(runtime => { var _a; return runtime.value === ((_a = this.runtimeEnvironmentEl) === null || _a === void 0 ? void 0 : _a.value); });
-                if (initialRuntimeEnvironment) {
-                    this.selectedRuntimeEnvironmentId = initialRuntimeEnvironment.id;
-                }
+            __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;
             }
-        };
-        this.setInitialLanguageId = () => {
-            var _a;
-            if ((_a = this.languageEl) === null || _a === void 0 ? void 0 : _a.value) {
-                const initialLanguage = this.languages.find(lang => { var _a; return lang.id === ((_a = this.languageEl) === null || _a === void 0 ? void 0 : _a.value); });
-                if (initialLanguage) {
-                    this.selectedLanguageId = initialLanguage.id;
-                }
+            else {
+                return GEMINI_TOOLS_GENEXUS_CLOUD_ON_SURFACE;
             }
-        };
-        this.setInitialDataStoreId = () => {
-            var _a;
-            if ((_a = this.dataStoreEl) === null || _a === void 0 ? void 0 : _a.value) {
-                const initialDataStore = this.dataStores.find(dataStore => { var _a; return dataStore.id === ((_a = this.dataStoreEl) === null || _a === void 0 ? void 0 : _a.value); });
-                if (initialDataStore) {
-                    this.selectedDataStoreId = initialDataStore.id;
+        });
+        // TODO: We must avoid performing the get 3 times.
+        // It is used on new-environment as well.
+        _GxIdeNewEnvironment_evaluateTooltipRender.set(this, (controlReference) => {
+            var _a, _b, _c;
+            return ((_b = (_a = this.validatableControls) === null || _a === void 0 ? void 0 : _a.get(controlReference === null || controlReference === void 0 ? void 0 : controlReference.id)) === null || _b === void 0 ? void 0 : _b.hasError) &&
+                ((_c = this.validatableControls.get(controlReference.id)) === null || _c === void 0 ? void 0 : _c.message) && (h("ch-tooltip", { class: "tooltip", actionElement: controlReference, blockAlign: config.tooltipSettings.blockAlign, inlineAlign: config.tooltipSettings.inlineAlign, delay: config.tooltipSettings.delay }, this.validatableControls.get(controlReference.id).message));
+        });
+        _GxIdeNewEnvironment_initializeValidatableControlsBasicTab.set(this, () => {
+            // populate #controlsValidation with the controls that could have errors.
+            const validatableControls = [
+                __classPrivateFieldGet(this, _GxIdeNewEnvironment_dataStoreEl, "f"),
+                __classPrivateFieldGet(this, _GxIdeNewEnvironment_languageEl, "f")
+            ];
+            validatableControls.forEach(validatableControl => {
+                if (validatableControl.id) {
+                    this.validatableControls.set(validatableControl.id, {
+                        reference: validatableControl,
+                        hasError: false,
+                        message: undefined
+                    });
                 }
-            }
-        };
-        // 9.LOCAL METHODS -> Not Helpers //
-        this.envNameInputHandler = (e) => {
-            const newEnvName = (e.detail + "").trim();
-            if (newEnvName !== this.environmentName) {
-                this.environmentName = newEnvName;
-                this.envNameModifiedByUser = true;
-            }
-        };
-        this.updateSelectedFrontEndsIds = () => {
-            this.selectedFrontEndsIds = [];
-            this.frontEndsEl.getValues().then(frontEndsCheckboxesInfo => {
-                frontEndsCheckboxesInfo.forEach(frontEnd => {
-                    if (frontEnd.value) {
-                        this.selectedFrontEndsIds.push(frontEnd.id);
-                    }
-                });
             });
-        };
-        this.setEnvironmentHandler = async () => {
-            if (this.createCallback) {
-                const newEnvData = {
-                    setAsCurrent: this.setAsCurrentEnvironmentEl.checked,
-                    name: this.environmentNameEl.value,
-                    runtime: this.selectedRuntimeEnvironmentId,
-                    language: this.languageEl.value,
-                    dataStores: this.dataStoreEl.value,
-                    frontEnds: this.selectedFrontEndsIds
-                };
-                const createCallbackPromise = this.createCallback(newEnvData);
-                createCallbackPromise.then(formSubmitResult => {
-                    formSubmitValidation(formSubmitResult, this);
-                });
-            }
-        };
-        this.cancelButtonClickedHandler = async () => {
-            if (this.cancelCallback) {
-                await this.cancelCallback();
-            }
-        };
-        this.runtimeEnvironmentChangedHandler = (event) => {
-            this.selectedRuntimeEnvironmentId = event.detail.id;
-            this.updateDataSources();
-        };
-        this.languageValueChangedHandler = () => {
+        });
+        _GxIdeNewEnvironment_languageValueChangedHandler.set(this, () => {
             /* the language item id is used for the value (they are equal)*/
-            this.selectedLanguageId = this.languageEl.value;
-            this.updateDataSources();
-            this.updateFrontEnds();
-            this.updateEnvironmentName();
-        };
-        this.dataStoreValueChangedHandler = () => {
-            /* the data store item id is used for the value (they are equal)*/
-            this.selectedDataStoreId = this.dataStoreEl.value;
-            this.updateEnvironmentName();
-        };
-        this.updateDataSources = async () => {
+            __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedLanguageId, __classPrivateFieldGet(this, _GxIdeNewEnvironment_languageEl, "f").value, "f");
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateDataSources, "f").call(this);
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateFrontEnds, "f").call(this);
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateEnvironmentName, "f").call(this);
+        });
+        _GxIdeNewEnvironment_renderAdvanced.set(this, () => {
+            return h("slot", { name: "property-grid" });
+        });
+        _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("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", {
+                    // #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("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"))))
+            ];
+        });
+        _GxIdeNewEnvironment_runtimeEnvironmentChangedHandler.set(this, (event) => {
+            __classPrivateFieldSet(this, _GxIdeNewEnvironment_selectedRuntimeEnvironmentId, event.detail, "f");
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateDataSources, "f").call(this);
+        });
+        _GxIdeNewEnvironment_setEnvironmentHandler.set(this, async () => {
+            var _a;
+            this.createCallback({
+                setAsCurrent: !!((_a = __classPrivateFieldGet(this, _GxIdeNewEnvironment_setAsCurrentEnvironmentEl, "f")) === null || _a === void 0 ? void 0 : _a.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")
+            }).then((formSubmitResult) => {
+                this.validatableControls = validateControls(formSubmitResult, this.validatableControls);
+            });
+        });
+        _GxIdeNewEnvironment_tabSelectionChangedHandler.set(this, (event) => {
+            if (event.detail.newSelectedId === ADVANCED_TAB_SELECTOR) {
+                this.advancedTabIsVisible = true;
+                // Some logic for advanced tab is done on componentDidRender lifecycle,
+                // since the reference to the elements is needed.
+            }
+        });
+        _GxIdeNewEnvironment_updateDataSources.set(this, async () => {
             if (this.getDataSourcesCallback) {
-                const updatedDataSources = await this.getDataSourcesCallback(this.selectedLanguageId, this.selectedRuntimeEnvironmentId);
+                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;
                 }
             }
-        };
-        this.updateFrontEnds = async () => {
-            if (this.getFrontEndsCallback) {
-                const updatedFrontEnds = await this.getFrontEndsCallback(this.selectedLanguageId);
-                if ((updatedFrontEnds === null || updatedFrontEnds === void 0 ? void 0 : updatedFrontEnds.length) > 0) {
-                    this.frontEnds = updatedFrontEnds;
-                }
-            }
-        };
-        this.updateEnvironmentName = async () => {
+        });
+        _GxIdeNewEnvironment_updateEnvironmentName.set(this, async () => {
             if (this.getEnvironmentNameCallback &&
-                this.environmentNameEl &&
-                this.envNameModifiedByUser) {
-                const updatedEnvName = await this.getEnvironmentNameCallback(this.selectedLanguageId, this.selectedDataStoreId);
+                __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;
                 }
             }
-        };
-        this.evaluateSingleRuntimeIcon = () => {
-            if (this.runtimes[0].id === "local") {
-                return "window-tools/rol";
-            }
-            else {
-                return "window-tools/genexus-cloud";
-            }
-        };
-        // 9.LOCAL METHODS -> Renders //
-        this.renderTabBasic = () => {
-            {
-                /* #basic tab*/
+        });
+        _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;
+                }
             }
-            return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true, class: "tab tab__basic", isSelected: !this.isAdvanced }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, noContentPadding: true, displayBorderBottom: true, flexRow: this.runtimes.length === 1 }, this.runtimes.length > 1 ? (h("gxg-form-radio-group", { slot: "header", radiosLabelSize: "large", ref: (el) => (this.runtimeEnvironmentEl = el), row: true, center: true, onChange: this.runtimeEnvironmentChangedHandler }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment"))) : ([
-                h("div", { class: "tab__basic__single-runtime", slot: "header" }, h("gxg-icon", { color: "disabled", type: this.evaluateSingleRuntimeIcon() }), h("gxg-text", { textAlign: "center" }, this.runtimes[0].label))
-            ]), h("div", { class: "basic-main" }, h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel, class: "basic-main__back-end", contentBorderEnd: true, titleType: "secondary" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: setInitialComboValue(this.languages), ref: (el) => (this.languageEl = el), toolTip: config.tooltip, onValueChanged: this.languageValueChangedHandler, part: "language" }, renderFormItems("gxg-combo-box-item", this.languages)), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.dataStores, value: setInitialComboValue(this.dataStores), ref: (el) => (this.dataStoreEl = el), onValueChanged: this.dataStoreValueChangedHandler, toolTip: config.tooltip, part: "data-store" }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel, class: "basic-main__front-end", titleType: "secondary" }, h("gxg-form-checkbox-group", { checkboxesLabelSize: "large", ref: (el) => (this.frontEndsEl = el), onGroupValuesChanged: this.updateSelectedFrontEndsIds }, renderFormItems("gxg-form-checkbox", this.frontEnds)))))));
-        };
-        this.renderTabAdvanced = () => {
-            return (h("gxg-tab", { tab: "advanced", "no-padding": true }, h("gx-ide-container", null, h("slot", { name: "property-grid" }))));
-        };
-        this.displayTitle = false;
+        });
+        this.advancedTabIsVisible = false;
+        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;
-        this.getDataSourcesCallback = undefined;
         this.isAdvanced = false;
         this.languages = undefined;
         this.runtimes = undefined;
         this.setAsTarget = true;
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.evaluateSelectedRuntimeEnvironmentId();
+    dataStoresChanged(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.dataStoresComboBoxModel = mapOptionsToComboBoxItemModel(newValue);
+            this.dataStoresInitialValue = getSelectedItem(newValue);
+        }
+    }
+    languagesChanged(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.languageComboBoxModel = mapOptionsToComboBoxItemModel(newValue);
+            this.languageInitialValue = getSelectedItem(newValue);
+        }
+    }
+    runtimesChanged(newValue) {
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            this.runtimesRadioGroupModel = mapOptionsToComboBoxItemModel(this.runtimes);
+        }
+    }
+    connectedCallback() {
+        this.dataStoresChanged(this.dataStores);
+        this.languagesChanged(this.languages);
+        this.runtimesChanged(this.runtimes);
     }
     componentDidLoad() {
-        this.initialSetup();
-        this.environmentNameEl.focus();
+        __classPrivateFieldGet(this, _GxIdeNewEnvironment_updateSelectedFrontEndsIds, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeNewEnvironment_initializeValidatableControlsBasicTab, "f").call(this);
     }
     componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+        if (this.advancedTabIsVisible && !__classPrivateFieldGet(this, _GxIdeNewEnvironment_advancedTabHasBeenRendered, "f")) {
+            // just call this once.
+            __classPrivateFieldSet(this, _GxIdeNewEnvironment_advancedTabHasBeenRendered, true, "f");
         }
     }
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeNewEnvironment_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        __classPrivateFieldSet(this, _GxIdeNewEnvironment_newEnvironmentSectionsModel, [
+            {
+                id: BASIC_TAB_SELECTOR,
+                name: __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabBasic.tabLabel
+            },
+            {
+                id: ADVANCED_TAB_SELECTOR,
+                name: __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").tabAdvanced.tabLabel
+            }
+        ], "f");
+        __classPrivateFieldGet(this, _GxIdeNewEnvironment_evaluateSelectedRuntimeEnvironmentId, "f").call(this);
+    }
     /**
      * Suspends or reactivates the shortcuts
      */
     async suspendShortcuts(suspendShortcuts) {
         if (suspendShortcuts) {
-            this.gxgShortcutsEl.suspend = true;
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_chShortcutsEl, "f").suspend = true;
         }
         else {
-            this.gxgShortcutsEl.suspend = false;
+            __classPrivateFieldGet(this, _GxIdeNewEnvironment_chShortcutsEl, "f").suspend = false;
         }
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noContentPadding: true, noBorderFooter: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { class: "header", slot: "header" }, h("gxg-label", { labelPosition: "start", class: "header__label" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "New Environment", "max-width": "100%", value: this.environmentName, ref: (el) => (this.environmentNameEl = el), onInput: !this.envNameModifiedByUser &&
-                this.envNameInputHandler, toolTip: config.tooltip, class: "header__text", part: "environment-name" })), h("main", { class: "main" }, h("gxg-tabs", { class: "gxg-tabs", noBorder: true }, this.isAdvanced ? (h("gxg-tab-bar", { slot: "tab-bar-container", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true }), this.isAdvanced ? (h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: this.disableAdvanced })) : null)) : null, this.renderTabBasic(), this.isAdvanced && this.renderTabAdvanced())), h("gxg-form-checkbox", { label: this._componentLocale.footer.setAsCurrentEnvironment, ref: (el) => (this.setAsCurrentEnvironmentEl =
-                el), checked: this.setAsTarget, part: "set-as-current-environment", slot: "footer-start" }), h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelButtonClickedHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-create", slot: "footer-end", type: "primary-text-only", onClick: this.setEnvironmentHandler, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnSetNewEnvironment))), h("gxg-shortcuts", { src: this.shortcutsSrc, ref: (el) => (this.gxgShortcutsEl = el) })));
+        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", {
+            // #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,
+            // 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", {
+            // main section
+            class: {
+                tab: true,
+                [MAIN_SECTION_CLASSES]: true
+            }, direction: "block", model: __classPrivateFieldGet(this, _GxIdeNewEnvironment_newEnvironmentSectionsModel, "f"), selectedId: BASIC_TAB_SELECTOR, overflow: "auto", contain: "size", onSelectedItemChange: !this.advancedTabIsVisible && __classPrivateFieldGet(this, _GxIdeNewEnvironment_tabSelectionChangedHandler, "f")
+        }, h("div", { slot: BASIC_TAB_SELECTOR, class: BASIC_SECTION_PARENT_CLASSES, part: "tab-button-basic" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_renderBasic, "f").call(this)), this.advancedTabIsVisible && (h("div", { slot: ADVANCED_TAB_SELECTOR, class: "advanced spacing-body-inline", part: "tab-button-advanced" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_renderAdvanced, "f").call(this))))) : (h("div", {
+            // main section
+            class: MAIN_SECTION_CLASSES
+        }, h("div", { class: BASIC_SECTION_PARENT_CLASSES }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_renderBasic, "f").call(this)))), h("footer", { class: {
+                "control-footer": this.isAdvanced,
+                "control-footer-with-border": !this.isAdvanced,
+                "control-footer-space-between": true,
+                "spacing-body-block-end": true,
+                "spacing-body-inline": true
+            } }, h("ch-checkbox", {
+            // #set as current environment
+            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"
+        }, __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"
+        }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").footer.btnCreate))))));
     }
     static get is() { return "gx-ide-new-environment"; }
     static get encapsulation() { return "shadow"; }
@@ -217,24 +328,6 @@ export class GxIdeNewEnvironment {
     static get assetsDirs() { return ["gx-ide-assets/new-environment"]; }
     static get properties() {
         return {
-            "displayTitle": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true it displays the component title on the header"
-                },
-                "attribute": "display-title",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "cancelCallback": {
                 "type": "unknown",
                 "mutable": false,
@@ -253,7 +346,7 @@ export class GxIdeNewEnvironment {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback that will be invoked when user wants to cancel"
+                    "text": "Callback invoked when user wants to cancel"
                 }
             },
             "createCallback": {
@@ -270,11 +363,11 @@ export class GxIdeNewEnvironment {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback that will be invoked when user confirms the KB creation"
+                    "text": "Callback invoked when user confirms the KB creation"
                 }
             },
             "dataStores": {
@@ -295,7 +388,7 @@ export class GxIdeNewEnvironment {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "It allows defining the DBMS that will be used in the solution"
+                    "text": "Allows defining the DBMS to be used in the solution"
                 }
             },
             "disableAdvanced": {
@@ -310,7 +403,7 @@ export class GxIdeNewEnvironment {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "It allows selecting multiple generators for the front end"
+                    "text": "Allows selecting multiple generators for the front end"
                 },
                 "attribute": "disable-advanced",
                 "reflect": false,
@@ -351,20 +444,20 @@ export class GxIdeNewEnvironment {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "It allows selecting multiple generators for the front end"
+                    "text": "Allows selecting multiple generators for the front end"
                 }
             },
-            "getEnvironmentNameCallback": {
+            "getDataSourcesCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GetEnvironmentNameCallback",
-                    "resolved": "(selectedLanguageId: string, selectedDataSourceId: string) => Promise<string>",
+                    "original": "GetDataSourcesCallback",
+                    "resolved": "(selectedLanguageId: string, selectedRuntimeId: string) => Promise<GxOption[]>",
                     "references": {
-                        "GetEnvironmentNameCallback": {
+                        "GetDataSourcesCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-environment/new-environment.tsx",
-                            "id": "src/components/new-environment/new-environment.tsx::GetEnvironmentNameCallback"
+                            "id": "src/components/new-environment/new-environment.tsx::GetDataSourcesCallback"
                         }
                     }
                 },
@@ -372,20 +465,20 @@ export class GxIdeNewEnvironment {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user changes the language or the selected data source, if and only if the environment name was not modified"
+                    "text": "Callback invoked when user changes the language or the runtime"
                 }
             },
-            "getFrontEndsCallback": {
+            "getEnvironmentNameCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GetFrontEndsCallback",
-                    "resolved": "(selectedLanguageId: string) => Promise<GxOption[]>",
+                    "original": "GetEnvironmentNameCallback",
+                    "resolved": "(selectedLanguageId: string, selectedDataSourceId: string) => Promise<string>",
                     "references": {
-                        "GetFrontEndsCallback": {
+                        "GetEnvironmentNameCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-environment/new-environment.tsx",
-                            "id": "src/components/new-environment/new-environment.tsx::GetFrontEndsCallback"
+                            "id": "src/components/new-environment/new-environment.tsx::GetEnvironmentNameCallback"
                         }
                     }
                 },
@@ -393,20 +486,20 @@ export class GxIdeNewEnvironment {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user changes the language, allows modifying the list of frontends"
+                    "text": "Callback invoked when user changes the language or data source"
                 }
             },
-            "getDataSourcesCallback": {
+            "getFrontEndsCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GetDataSourcesCallback",
-                    "resolved": "(selectedLanguageId: string, selectedRuntimeId: string) => Promise<GxOption[]>",
+                    "original": "GetFrontEndsCallback",
+                    "resolved": "(selectedLanguageId: string) => Promise<GxOption[]>",
                     "references": {
-                        "GetDataSourcesCallback": {
+                        "GetFrontEndsCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/new-environment/new-environment.tsx",
-                            "id": "src/components/new-environment/new-environment.tsx::GetDataSourcesCallback"
+                            "id": "src/components/new-environment/new-environment.tsx::GetFrontEndsCallback"
                         }
                     }
                 },
@@ -414,7 +507,7 @@ export class GxIdeNewEnvironment {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user changes the language or the runtime"
+                    "text": "Callback invoked when user changes the language"
                 }
             },
             "isAdvanced": {
@@ -500,26 +593,16 @@ export class GxIdeNewEnvironment {
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "componentDidRenderFirstTime",
-                "name": "componentDidRenderFirstTime",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "description",
-                            "text": "Gets fired when the component has rendered for the first time."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
+    static get states() {
+        return {
+            "advancedTabIsVisible": {},
+            "validatableControls": {},
+            "dataStoresComboBoxModel": {},
+            "dataStoresInitialValue": {},
+            "languageComboBoxModel": {},
+            "languageInitialValue": {},
+            "runtimesRadioGroupModel": {}
+        };
     }
     static get methods() {
         return {
@@ -547,5 +630,24 @@ export class GxIdeNewEnvironment {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "dataStores",
+                "methodName": "dataStoresChanged"
+            }, {
+                "propName": "languages",
+                "methodName": "languagesChanged"
+            }, {
+                "propName": "runtimes",
+                "methodName": "runtimesChanged"
+            }];
+    }
 }
+_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;
+};
 //# sourceMappingURL=new-environment.js.map