@genexus/genexus-ide-ui 1.0.12 → 1.0.14

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

@@ -1,251 +1,376 @@
-import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
-import { L as Locale } from './locale.js';
-import { f as formSubmitValidation, s as setInitialComboValue } from './helpers.js';
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './assets-manager.js';
 import { c as config } from './config.js';
-import { r as renderFormItems } from './common.js';
-import { d as defineCustomElement$3 } from './container.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { L as Locale } from './locale.js';
+import { r as renderChCheckboxItems, m as mapOptionsToComboBoxItemModel } from './helpers.js';
+import { g as getSelectedItem } from './common.js';
+import { v as validateControls } from './form-validation.js';
 
-const newEnvironmentCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--mer-color__surface)}.header{display:flex}.header__label{flex:none}.main{height:100%}.gxg-tabs{margin-top:0;box-shadow:none}.tab__basic__single-runtime{display:flex;align-items:center;justify-content:center;gap:var(--mer-spacing--2xs)}.basic-main{display:flex;height:100%}.basic-main__back-end{flex:1}.basic-main__front-end{flex:1}.advanced-second-row{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr}.advanced-second-row>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(4, 1fr);grid-template-columns:1fr auto}.advanced-second-row-col-left>*{display:flex;align-items:self-end}.advanced-second-row-col-left>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-left>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left>*:nth-child(3){grid-area:2/1/3/2}.advanced-second-row-col-left>*:nth-child(4){grid-area:2/2/3/3}.advanced-second-row-col-left>*:nth-child(5){grid-area:3/1/4/2}.advanced-second-row-col-left>*:nth-child(6){grid-area:3/2/4/3}.advanced-second-row-col-left>*:nth-child(7){grid-area:4/1/5/2}.advanced-second-row-col-left>*:nth-child(8){grid-area:4/2/5/3}.advanced-second-row-col-right{grid-template-columns:1fr;grid-template-rows:repeat(4, 1fr);grid-auto-rows:1fr}.advanced-second-row-col-right *:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-right *:nth-child(2){grid-area:2/1/3/2}.advanced-second-row-col-right *:nth-child(3){grid-area:3/1/4/2}.advanced-second-row-col-right *:nth-child(4){grid-area:4/1/5/2}";
+const newEnvironmentCss = ":host{display:grid;block-size:100%;grid-template-rows:max-content 1fr max-content}.section{display:contents}.basic,.advanced{padding-block-start:var(--content-block-spacing);block-size:100%;overflow:auto}.advanced{padding-block-end:var(--content-block-spacing)}.basic{display:grid;grid-template:\"runtime-environment runtime-environment\" max-content \"back-end front-end\" 1fr;grid-template-columns:1fr 1fr}.basic__runtime-environment{grid-area:runtime-environment;display:flex;flex-direction:column;align-items:center}.control-header__back-end,.control-header__front-end{padding-block-start:var(--mer-spacing--md)}.basic__back-end{grid-area:back-end}.basic__front-end{grid-area:front-end}.basic__back-end,.basic__front-end{display:grid;grid-template-rows:max-content 1fr;grid-auto-rows:max-content;overflow:auto}.main__back-end{border-inline-end:var(--section-common-border)}.main__back-end,.main__front-end{grid-auto-rows:max-content;padding-block:var(--content-block-spacing);overflow:auto}.text-align-center{text-align:center}.tab::part(page){scrollbar-width:thin}";
 
+var __classPrivateFieldGet = (undefined && undefined.__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 = (undefined && undefined.__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;
+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";
 const GxIdeNewEnvironment$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeNewEnvironment extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        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";
+        });
+        _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;
+                }
             }
-        };
-        // 9.LOCAL METHODS -> Renders //
-        this.renderTabBasic = () => {
-            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 assetsDirs() { return ["gx-ide-assets/new-environment"]; }
     get el() { return this; }
+    static get watchers() { return {
+        "dataStores": ["dataStoresChanged"],
+        "languages": ["languagesChanged"],
+        "runtimes": ["runtimesChanged"]
+    }; }
     static get style() { return newEnvironmentCss; }
 }, [1, "gx-ide-new-environment", {
-        "displayTitle": [4, "display-title"],
         "cancelCallback": [16],
         "createCallback": [16],
         "dataStores": [1040],
         "disableAdvanced": [4, "disable-advanced"],
         "environmentName": [1025, "environment-name"],
         "frontEnds": [1040],
+        "getDataSourcesCallback": [16],
         "getEnvironmentNameCallback": [16],
         "getFrontEndsCallback": [16],
-        "getDataSourcesCallback": [16],
         "isAdvanced": [4, "is-advanced"],
         "languages": [16],
         "runtimes": [16],
         "setAsTarget": [4, "set-as-target"],
+        "advancedTabIsVisible": [32],
+        "validatableControls": [32],
+        "dataStoresComboBoxModel": [32],
+        "dataStoresInitialValue": [32],
+        "languageComboBoxModel": [32],
+        "languageInitialValue": [32],
+        "runtimesRadioGroupModel": [32],
         "suspendShortcuts": [64]
+    }, undefined, {
+        "dataStores": ["dataStoresChanged"],
+        "languages": ["languagesChanged"],
+        "runtimes": ["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;
+};
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-new-environment", "gx-ide-container", "gx-ide-title"];
+    const components = ["gx-ide-new-environment"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-new-environment":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxIdeNewEnvironment$1);
             }
             break;
-        case "gx-ide-container":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "gx-ide-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }