@genexus/genexus-ide-ui 0.0.65 → 0.0.67

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

@@ -1,50 +1,80 @@
 /* STENCIL IMPORTS */
 import { Host, h } from "@stencil/core";
-/* OTHER LIBRARIES IMPORTS */
 /* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
+import { setInitialComboValue } from "../../common/helpers";
 import { config } from "../../common/config";
 import { renderFormItems } from "../../common/common";
 import { formSubmitValidation } from "../../common/form-validation";
 export class GxIdeNewEnvironment {
   constructor() {
     this.renderedFirstTime = false;
+    this.selectedFrontEndsIds = [];
+    this.envNameModifiedByUser = false;
     // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
+    // 8.PUBLIC METHODS API //selectedFrontEndsIds
     // 9.LOCAL METHODS //
-    this.getFrontEndOptionsValues = () => {
-      const gxOptions = [];
-      const frontEndValues = this.frontEndsEl.getValues();
-      frontEndValues.then(result => {
-        result.forEach((checkbox) => {
-          gxOptions.push({
-            id: checkbox.id,
-            checked: checkbox.value,
-            disabled: checkbox.disabled
-          });
-        });
-      });
-      return gxOptions;
+    // 9.LOCAL METHODS -> Helpers //
+    this.initialSetup = () => {
+      this.updateSelectedFrontEndsIds();
+      this.setInitialRuntimeId();
+      this.setInitialLanguageId();
+      this.setInitialDataStoreId();
+    };
+    this.setInitialRuntimeId = () => {
+      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;
+        }
+      }
+    };
+    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;
+        }
+      }
+    };
+    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;
+        }
+      }
+    };
+    // 9.LOCAL METHODS -> Not Helpers //
+    this.envNameInputHandler = (e) => {
+      const newEnvName = (e.detail + "").trim();
+      if (newEnvName !== this.environmentName) {
+        this.environmentName = newEnvName;
+        this.envNameModifiedByUser = true;
+      }
     };
-    this.getRuntimeValue = () => {
-      this.runtimeEl = [];
-      const radioGroupOptions = this.runtimeGroup.querySelectorAll("gxg-form-radio");
-      radioGroupOptions === null || radioGroupOptions === void 0 ? void 0 : radioGroupOptions.forEach(radioGroupOption => {
-        this.runtimeEl.push({
-          id: radioGroupOption.id,
-          checked: radioGroupOption.checked
+    this.updateSelectedFrontEndsIds = () => {
+      this.selectedFrontEndsIds = [];
+      this.frontEndsEl.getValues().then(frontEndsCheckboxesInfo => {
+        frontEndsCheckboxesInfo.forEach(frontEnd => {
+          if (frontEnd.value) {
+            this.selectedFrontEndsIds.push(frontEnd.id);
+          }
         });
       });
-      return this.runtimeEl;
     };
     this.setEnvironmentHandler = async () => {
       if (this.createCallback) {
         const newEnvData = {
-          name: this.nameEl.value,
-          runtime: this.getRuntimeValue(),
+          setAsCurrent: this.setAsCurrentEnvironmentEl.checked,
+          name: this.environmentNameEl.value,
+          runtime: this.runtimeEnvironmentEl.value,
           language: this.languageEl.value,
           dataStores: this.dataStoreEl.value,
-          frontEnds: this.getFrontEndOptionsValues()
+          frontEnds: this.selectedFrontEndsIds
         };
         const createCallbackPromise = this.createCallback(newEnvData);
         createCallbackPromise.then(formSubmitResult => {
@@ -55,50 +85,80 @@ export class GxIdeNewEnvironment {
     this.cancelButtonClickedHandler = async () => {
       await this.cancelCallback();
     };
-    this.runtimeEnvironmentChangedHandler = () => {
-      this.changedHandler();
+    this.runtimeEnvironmentChangedHandler = (event) => {
+      this.selectedRuntimeEnvironmentId = event.detail.id;
+      this.updateDataSources();
     };
     this.languageValueChangedHandler = () => {
-      this.changedHandler();
+      /* 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 = () => {
-      this.changedHandler();
+      /* the data store item id is used for the value (they are equal)*/
+      this.selectedDataStoreId = this.dataStoreEl.value;
+      this.updateEnvironmentName();
+    };
+    this.updateDataSources = async () => {
+      if (this.getDataSourcesCallback) {
+        const updatedDataSources = await this.getDataSourcesCallback(this.selectedLanguageId, this.selectedRuntimeEnvironmentId);
+        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;
+        }
+      }
     };
-    /**
-     * @description This function is called when any of the following data is modified: "Runtime Environment", "Data Store", "Language".
-     */
-    this.changedHandler = () => {
-      const newEnvData = {
-        name: this.nameEl.value,
-        runtime: this.getRuntimeValue(),
-        language: this.languageEl.value,
-        dataStores: this.dataStoreEl.value,
-        frontEnds: this.getFrontEndOptionsValues()
-      };
-      this.changedCallback(newEnvData);
+    this.updateEnvironmentName = async () => {
+      if (this.getEnvironmentNameCallback &&
+        this.environmentNameEl &&
+        this.envNameModifiedByUser) {
+        const updatedEnvName = await this.getEnvironmentNameCallback(this.selectedLanguageId, this.selectedDataStoreId);
+        if (updatedEnvName) {
+          this.environmentName = updatedEnvName;
+        }
+      }
     };
+    // 9.LOCAL METHODS -> Renders //
     this.renderTabBasic = () => {
-      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, noContentPadding: true, displayBorderBottom: true }, h("gxg-form-radio-group", { slot: "header", ref: (el) => (this.runtimeGroup = el), row: true, center: true, onChange: this.runtimeEnvironmentChangedHandler }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment")), 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: this.languages[0]["id"], 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: this.dataStores[0]["id"], 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", { ref: (el) => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds)))))));
+      {
+        /* #basic tab*/
+      }
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, noContentPadding: true, displayBorderBottom: true }, h("gxg-form-radio-group", { slot: "header", ref: (el) => (this.runtimeEnvironmentEl = el), row: true, center: true, onChange: this.runtimeEnvironmentChangedHandler }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment")), 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", { 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.cancelCallback = undefined;
+    this.createCallback = undefined;
     this.dataStores = undefined;
-    this.frontEnd = undefined;
-    this.frontEnds = undefined;
     this.disableAdvanced = false;
-    this.setAsTarget = true;
-    this.runtimes = undefined;
-    this.languages = undefined;
     this.environmentName = undefined;
-    this.createCallback = undefined;
-    this.cancelCallback = undefined;
-    this.changedCallback = undefined;
+    this.frontEnds = 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);
   }
+  componentDidLoad() {
+    this.initialSetup();
+  }
   componentDidRender() {
     if (!this.renderedFirstTime) {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
@@ -107,7 +167,8 @@ export class GxIdeNewEnvironment {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { 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.nameEl = el), toolTip: config.tooltip, class: "header__text", part: "environment-name" })), h("main", { class: "main" }, h("gxg-tabs", { class: "gxg-tabs" }, 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 }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: this.disableAdvanced })), this.renderTabBasic(), this.renderTabAdvanced())), h("gxg-form-checkbox", { label: this._componentLocale.setCurrentEnvironment, id: "show-current-environment", checked: this.setAsTarget, slot: "footer-start" }), 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-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelButtonClickedHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel)))));
+    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" }, 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), 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)))));
   }
   static get is() { return "gx-ide-new-environment"; }
   static get encapsulation() { return "shadow"; }
@@ -124,49 +185,65 @@ export class GxIdeNewEnvironment {
   static get assetsDirs() { return ["gx-ide-assets/new-environment"]; }
   static get properties() {
     return {
-      "dataStores": {
+      "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,
         "complexType": {
-          "original": "GxOption[]",
-          "resolved": "GxOption[]",
+          "original": "CancelCallback",
+          "resolved": "() => Promise<void>",
           "references": {
-            "GxOption": {
-              "location": "import",
-              "path": "../../common/types"
+            "CancelCallback": {
+              "location": "local"
             }
           }
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "It allows defining the DBMS that will be used in the solution"
+          "text": "Callback that will be invoked when user wants to cancel"
         }
       },
-      "frontEnd": {
+      "createCallback": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxOption[]",
-          "resolved": "GxOption[]",
+          "original": "CreateCallback",
+          "resolved": "(data: NewEnvironmentData) => Promise<FormSubmitResult>",
           "references": {
-            "GxOption": {
-              "location": "import",
-              "path": "../../common/types"
+            "CreateCallback": {
+              "location": "local"
             }
           }
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "It allows selecting multiple generators for the front end"
+          "text": "Callback that will be invoked when user confirms the KB creation"
         }
       },
-      "frontEnds": {
+      "dataStores": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "GxOption[]",
           "resolved": "GxOption[]",
@@ -181,7 +258,7 @@ export class GxIdeNewEnvironment {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "It allows selecting multiple generators for the front end"
+          "text": "It allows defining the DBMS that will be used in the solution"
         }
       },
       "disableAdvanced": {
@@ -202,27 +279,26 @@ export class GxIdeNewEnvironment {
         "reflect": false,
         "defaultValue": "false"
       },
-      "setAsTarget": {
-        "type": "boolean",
-        "mutable": false,
+      "environmentName": {
+        "type": "string",
+        "mutable": true,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Belongs to checkbox 'Set as current environment' @default true"
+          "text": "Name of the new environment"
         },
-        "attribute": "set-as-target",
-        "reflect": false,
-        "defaultValue": "true"
+        "attribute": "environment-name",
+        "reflect": false
       },
-      "runtimes": {
+      "frontEnds": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "GxOption[]",
           "resolved": "GxOption[]",
@@ -237,54 +313,55 @@ export class GxIdeNewEnvironment {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Possible values for 'Runtime Environment' radio button"
+          "text": "It allows selecting multiple generators for the front end"
         }
       },
-      "languages": {
+      "getEnvironmentNameCallback": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxOption[]",
-          "resolved": "GxOption[]",
+          "original": "GetEnvironmentNameCallback",
+          "resolved": "(selectedLanguageId: string, selectedDataSourceId: string) => Promise<string>",
           "references": {
-            "GxOption": {
-              "location": "import",
-              "path": "../../common/types"
+            "GetEnvironmentNameCallback": {
+              "location": "local"
             }
           }
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Possible values for 'Language' combo"
+          "text": "Callback invoked when the user changes the language or the selected data source, if and only if the environment name was not modified"
         }
       },
-      "environmentName": {
-        "type": "string",
+      "getFrontEndsCallback": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "GetFrontEndsCallback",
+          "resolved": "(selectedLanguageId: string) => Promise<GxOption[]>",
+          "references": {
+            "GetFrontEndsCallback": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Name of the new environment"
-        },
-        "attribute": "environment-name",
-        "reflect": false
+          "text": "Callback invoked when the user changes the language, allows modifying the list of frontends"
+        }
       },
-      "createCallback": {
+      "getDataSourcesCallback": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "CreateCallback",
-          "resolved": "(data: NewEnvironmentData) => Promise<FormSubmitResult>",
+          "original": "GetDataSourcesCallback",
+          "resolved": "(selectedLanguageId: string, selectedRuntimeId: string) => Promise<GxOption[]>",
           "references": {
-            "CreateCallback": {
+            "GetDataSourcesCallback": {
               "location": "local"
             }
           }
@@ -293,46 +370,84 @@ export class GxIdeNewEnvironment {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Callback that will be invoked when user confirms the KB creation"
+          "text": "Callback invoked when the user changes the language or the runtime"
         }
       },
-      "cancelCallback": {
+      "isAdvanced": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if the Advanced tab should be displayed"
+        },
+        "attribute": "is-advanced",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "languages": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "CancelCallback",
-          "resolved": "() => Promise<void>",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "CancelCallback": {
-              "location": "local"
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
             }
           }
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Callback that will be invoked when user wants to cancel"
+          "text": "Possible values for 'Language' combo"
         }
       },
-      "changedCallback": {
+      "runtimes": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "ChangedCallback",
-          "resolved": "(data: NewEnvironmentData) => Promise<void>",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "ChangedCallback": {
-              "location": "local"
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
             }
           }
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Callback that will be invoked when when any of the following data is modified: \"Runtime Environment\", \"Data Store\", \"Language\"."
+          "text": "Possible values for 'Runtime Environment' radio button"
         }
+      },
+      "setAsTarget": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Belongs to checkbox 'Set as current environment' @default true"
+        },
+        "attribute": "set-as-target",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/new-kb/new-kb.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,6 +172,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
   border: 1px solid var(--gxg-border-color--regular);
@@ -203,12 +215,24 @@ gxg-tabs {
 
 /*Basic*/
 .basic-row-first {
+  container-name: basic-row-first;
+  container-type: inline-size;
+}
+.basic-row-first__container {
   display: grid;
   gap: var(--gx-ide-grid-column-gap);
   padding: var(--gxg-container--padding);
   border-bottom: 1px solid var(--gx-ide-container-border-color);
   grid-template-columns: repeat(2, 1fr);
 }
+@container (max-width: 640px) {
+  .basic-row-first {
+    /* this will work but you will see the vs-code complaining about some syntax error, so just ignore it */
+  }
+  .basic-row-first .basic-row-first__container {
+    grid-template-columns: 1fr;
+  }
+}
 
 .basic-row-second {
   grid-template-columns: repeat(2, 1fr);