@genexus/genexus-ide-ui 0.0.43 → 0.0.45

package/dist/collection/components/_template/template.css

@@ -9,6 +9,14 @@
   height: 100%;
 }
 
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
 .align-start {
   display: flex;
   align-items: start;
@@ -36,6 +44,22 @@ ch-grid-cell {
   display: flex;
 }
 
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 999;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
   box-shadow: var(--box-shadow-01) !important;

package/dist/collection/components/container/container.css

@@ -358,14 +358,6 @@ HOST / GENERAL
   flex-grow: 1;
 }
 
-/*reset fieldset*/
-fieldset {
-  padding: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  border: none;
-}
-
 .heading,
 .content,
 .footer {
@@ -428,9 +420,7 @@ HEADING
 CONTENT
 ********************************/
 .content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gxg-container-elements-spacing);
+  display: block;
   overflow-x: auto;
   /* Track */
   /* Handle */
@@ -455,6 +445,12 @@ CONTENT
 .content--no-padding {
   padding: 0;
 }
+.content--no-border-top {
+  border-top: none;
+}
+.content--flex {
+  display: flex;
+}
 .content--no-gap {
   gap: 0;
 }

package/dist/collection/components/container/container.js

@@ -12,8 +12,10 @@ export class GxIdeContainer {
     this.contentClasses = () => {
       return {
         "content": true,
+        "content--flex": this.flexContent,
         "content--no-padding": this.noContentPadding,
         "content--no-gap": this.noContentGap,
+        "content--no-border-top": this.noContentBorderTop,
         [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
         [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
       };
@@ -27,7 +29,6 @@ export class GxIdeContainer {
           ["footer--no-padding"]: this.noFooterPadding
         } }, h("div", { class: "footer__start" }, h("slot", { name: "footer-start" })), h("div", { class: "footer__end" }, h("slot", { name: "footer-end" })))) : null;
     };
-    this.fieldset = false;
     this.containerTitle = undefined;
     this.displayBorder = false;
     this.displayBorderTop = false;
@@ -40,6 +41,8 @@ export class GxIdeContainer {
     this.noHeadingBorder = false;
     this.noHeadingPadding = false;
     this.headingJustify = "center";
+    this.flexContent = false;
+    this.noContentBorderTop = false;
     this.noContentPadding = false;
     this.noContentGap = false;
     this.alignItems = undefined;
@@ -58,7 +61,6 @@ export class GxIdeContainer {
   // 6.COMPONENT LIFECYCLE EVENTS //
   componentWillLoad() {
     this.evaluateSlots();
-    this.evaluateFullHeight();
   }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
@@ -81,12 +83,6 @@ export class GxIdeContainer {
       this.hasFooterSlot = true;
     }
   }
-  evaluateFullHeight() {
-    if (this.fullHeight && this.fieldset) {
-      /* If full-height, fieldset has to be false*/
-      this.fieldset = false;
-    }
-  }
   evaluateSections() {
     if (!this.hasSlottedContent && !this.hasFooterSlot) {
       this.hasOnlyHeading = true;
@@ -98,20 +94,11 @@ export class GxIdeContainer {
   // 10.RENDER() FUNCTION //
   render() {
     this.evaluateSections();
-    let result;
-    if (this.fieldset) {
-      result = [
-        h("fieldset", null, this.containerTitle || this.hasHeaderSlot ? (h("legend", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null, this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null),
-        this.footer()
-      ];
-    }
-    else {
-      result = [
-        this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
-        this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null,
-        this.footer()
-      ];
-    }
+    const result = [
+      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
+      this.hasSlottedContent ? (h("div", { class: this.contentClasses(), part: "content" }, h("slot", null))) : null,
+      this.footer()
+    ];
     return (h(Host, null, h("div", { class: {
         "container": true,
         [`container--padding-${this.sectionsPadding}`]: true,
@@ -136,24 +123,6 @@ export class GxIdeContainer {
   }
   static get properties() {
     return {
-      "fieldset": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes this component content act as a fieldset"
-        },
-        "attribute": "fieldset",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "containerTitle": {
         "type": "string",
         "mutable": false,
@@ -382,6 +351,42 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "\"center\""
       },
+      "flexContent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the content a flex container"
+        },
+        "attribute": "flex-content",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noContentBorderTop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the border-top from the content"
+        },
+        "attribute": "no-content-border-top",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "noContentPadding": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/create-kb-from-server/create-kb-from-server.css

@@ -9,6 +9,14 @@
   height: 100%;
 }
 
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
 .align-start {
   display: flex;
   align-items: start;
@@ -36,6 +44,22 @@ ch-grid-cell {
   display: flex;
 }
 
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 999;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
   box-shadow: var(--box-shadow-01) !important;

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

@@ -9,6 +9,14 @@
   height: 100%;
 }
 
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
 .align-start {
   display: flex;
   align-items: start;
@@ -36,6 +44,22 @@ ch-grid-cell {
   display: flex;
 }
 
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 999;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
   box-shadow: var(--box-shadow-01) !important;
@@ -157,6 +181,7 @@ ch-grid-cell {
   flex-grow: 1;
   grid-template-columns: 1fr 1fr;
   gap: 0;
+  height: 100%;
 }
 .grid--basic > *:first-child {
   border-right: 1px solid var(--gx-ide-container-border-color);

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

@@ -77,12 +77,11 @@ export class GxIdeNewEnvironment {
       this.changedCallback(newEnvData);
     };
     this.renderTabBasic = () => {
-      return (h("gxg-tab", { tab: "basic", "no-padding": true }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, fieldset: true, displayBorderTop: true, displayBorderBottom: true }, h("gxg-form-radio-group", { ref: (el) => (this.runtimeGroup = el), row: true, onChange: this.runtimeEnvironmentChangedHandler, slot: "header" }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment"))), h("div", { class: "grid grid--no-gap grid--basic" }, h("gx-ide-container", { fieldset: true, noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: this.languages[0]["id"], ref: (el) => (this.languageEl = el), 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, part: "data-store" }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { fieldset: true, noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: (el) => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds))))));
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, displayBorderBottom: true }, h("gxg-form-radio-group", { ref: (el) => (this.runtimeGroup = el), row: true, onChange: this.runtimeEnvironmentChangedHandler, slot: "header" }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment"))), h("div", { class: "grid grid--no-gap grid--basic" }, h("gx-ide-container", { noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: this.languages[0]["id"], ref: (el) => (this.languageEl = el), 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, part: "data-store" }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: (el) => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds))))));
     };
     this.renderTabAdvanced = () => {
-      return (h("gxg-tab", { tab: "advanced", "no-padding": true }, h("gx-ide-container", { displayBorderTop: true }, h("slot", { name: "property-grid" }))));
+      return (h("gxg-tab", { tab: "advanced", "no-padding": true }, h("gx-ide-container", null, h("slot", { name: "property-grid" }))));
     };
-    this.hideTopBar = false;
     this.dataStores = undefined;
     this.frontEnd = undefined;
     this.frontEnds = undefined;
@@ -104,7 +103,7 @@ export class GxIdeNewEnvironment {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", null, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "NewEnvironment", "max-width": "100%", value: this.environmentName, ref: (el) => (this.nameEl = el), part: "environment-name" }))), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container" }, 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("gx-ide-container", { displayBorderTop: true }, 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", null, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "NewEnvironment", "max-width": "100%", value: this.environmentName, ref: (el) => (this.nameEl = el), part: "environment-name" }))), h("main", { class: "gxi-full-height gx-ide-overflow" }, 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("gx-ide-container", { displayBorderTop: true }, 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)))));
   }
   static get is() { return "gx-ide-new-environment"; }
   static get encapsulation() { return "shadow"; }
@@ -121,24 +120,6 @@ export class GxIdeNewEnvironment {
   static get assetsDirs() { return ["gx-ide-assets/new-environment"]; }
   static get properties() {
     return {
-      "hideTopBar": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "false",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If true, will hide the top-bar"
-        },
-        "attribute": "hide-top-bar",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "dataStores": {
         "type": "unknown",
         "mutable": false,

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

@@ -9,6 +9,14 @@
   height: 100%;
 }
 
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
 .align-start {
   display: flex;
   align-items: start;
@@ -36,6 +44,22 @@ ch-grid-cell {
   display: flex;
 }
 
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 999;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
   box-shadow: var(--box-shadow-01) !important;

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

@@ -13,11 +13,13 @@ export class GxIdeNewKb {
       prototypingTargets: null,
       userInterfaceLanguages: null,
       prototypingEnvironments: null,
-      dataSources: null,
+      defaultDataSources: null,
       serverNames: null,
       collations: null,
       authenticationTypes: null
     };
+    /* Used to evaluate what front end options need to be updated on 'getFrontEndsCallback'*/
+    this.previousFrontEndsState = [];
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
@@ -104,6 +106,63 @@ export class GxIdeNewKb {
       });
       return gxOptions;
     };
+    /**
+     * @description it evaluates what front end options need to be updated on 'getFrontEndsCallback', by comparing the new state (getFrontEndsCallback promise result) and the previous state (previousFrontEndsState)
+     */
+    this.updateFrontEnds = () => {
+      if (this.getFrontEndsCallback) {
+        const selectedPrototypingEnvironmentId = this.prototypingEnvironmentEl.value;
+        const updatedFrontEndsPromise = this.getFrontEndsCallback(selectedPrototypingEnvironmentId);
+        updatedFrontEndsPromise
+          .then(newFrontEndsOptions => {
+          if ((newFrontEndsOptions === null || newFrontEndsOptions === void 0 ? void 0 : newFrontEndsOptions.length) > 0) {
+            let newFrontEndOptionIndex;
+            const updatedFrontEnds = [];
+            this.previousFrontEndsState.forEach(prevFrontEndOption => {
+              const optionFound = newFrontEndsOptions.find((newFrontEndOption, index) => {
+                newFrontEndOptionIndex = index;
+                return newFrontEndOption.id === prevFrontEndOption.id;
+              });
+              if (optionFound) {
+                updatedFrontEnds.push(newFrontEndsOptions[newFrontEndOptionIndex]);
+              }
+              else {
+                updatedFrontEnds.push(prevFrontEndOption);
+              }
+            });
+            this.frontEnds = updatedFrontEnds;
+          }
+        })
+          .catch(() => {
+          // to do
+        });
+      }
+    };
+    this.getDataSources = () => {
+      if (this.getDataSourcesCallback) {
+        const selectedPrototypingEnvironmentId = this.prototypingEnvironmentEl.value;
+        const selectedPrototypingTargetId = this.prototypingTargetEl.value;
+        const updatedDefaultDataSourcesPromise = this.getDataSourcesCallback(selectedPrototypingEnvironmentId, selectedPrototypingTargetId);
+        updatedDefaultDataSourcesPromise
+          .then(result => {
+          if (result.length > 0) {
+            this.defaultDataSources = result;
+            // set first option as selected
+            this.dataSourceEl.value = this.defaultDataSources[0].id;
+          }
+        })
+          .catch(() => {
+          // to do
+        });
+      }
+    };
+    this.prototypingEnvironmentValueChangedHandler = () => {
+      this.getDataSources();
+      this.updateFrontEnds();
+    };
+    this.prototypingTargetValueChangedHandler = () => {
+      this.getDataSources();
+    };
     this.createKbHandler = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
       if (this.createCallback) {
@@ -137,12 +196,12 @@ export class GxIdeNewKb {
     // 10.RENDER() FUNCTION //
     this.renderTabBasic = () => {
       var _a, _b, _c, _d;
-      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderTop: true, displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.prototypingTarget, value: (_a = this._initialComboValue["prototypingTargets"]) !== null && _a !== void 0 ? _a : this.prototypingTargets[0].id, ref: (el) => (this.prototypingTargetEl = el), class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.userInterfaceLanguage, value: (_b = this._initialComboValue["userInterfaceLanguages"]) !== null && _b !== void 0 ? _b : this.userInterfaceLanguages[0].id, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment, value: (_c = this._initialComboValue["prototypingEnvironments"]) !== null && _c !== void 0 ? _c : this.prototypingEnvironments[0].id, ref: (el) => (this.prototypingEnvironmentEl = el), class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource, disableFilter: true, value: (_d = this._initialComboValue["dataSources"]) !== null && _d !== void 0 ? _d : this.dataSources[0].id, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.dataSources, "data-source"))), h("gx-ide-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.prototypingTarget, value: (_a = this._initialComboValue["prototypingTargets"]) !== null && _a !== void 0 ? _a : this.prototypingTargets[0].id, ref: (el) => (this.prototypingTargetEl = el), onValueChanged: this.prototypingTargetValueChangedHandler, class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.userInterfaceLanguage, value: (_b = this._initialComboValue["userInterfaceLanguages"]) !== null && _b !== void 0 ? _b : this.userInterfaceLanguages[0].id, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment, value: (_c = this._initialComboValue["prototypingEnvironments"]) !== null && _c !== void 0 ? _c : this.prototypingEnvironments[0].id, ref: (el) => (this.prototypingEnvironmentEl = el), onValueChanged: this.prototypingEnvironmentValueChangedHandler, class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource, disableFilter: true, value: (_d = this._initialComboValue["defaultDataSources"]) !== null && _d !== void 0 ? _d : this.defaultDataSources[0].id, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
     };
     this.renderTabAdvanced = () => {
       var _a, _b, _c;
-      return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderTop: true, displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), h("div", { class: "grid knowledge-base-storage" }, h("gx-ide-container", { fieldset: true }, h("div", { class: "grid knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName, disableFilter: true, value: (_a = this._initialComboValue["serverNames"]) !== null && _a !== void 0 ? _a : this.serverNames[0].id, ref: (el) => (this.serverNameEl = el), class: "server-name-combo-box", part: "server-name", onValueChanged: this.evaluateCreateDataInKbDisabled }, renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.databaseName, placeholder: "MyDatabase", ref: (el) => (this.databaseNameEl = el), value: this.databaseName, class: "database-name", part: "database-name" }), h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.collation, disableFilter: true, value: (_b = this._initialComboValue["collations"]) !== null && _b !== void 0 ? _b : this.collations[0].id, ref: (el) => (this.collationEl = el), class: "collation-combo-box", part: "collation" }, renderFormItems("gxg-combo-box-item", this.collations, "collation")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.createDataFilesInKbFolder, ref: (el) => (this.createDataFilesInKBFolderEl =
-          el), alignTop: true, checked: this.createDataFilesInKBFolder, disabled: this.createDataInKbDisabled, class: "create-data-in-kb", part: "create-data-in-kb" }))), h("gx-ide-container", { fieldset: true, noHeadingBorder: true }, h("div", { class: {
+      return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderTop: true, displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), h("div", { class: "grid knowledge-base-storage" }, h("gx-ide-container", null, h("div", { class: "grid knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName, disableFilter: true, value: (_a = this._initialComboValue["serverNames"]) !== null && _a !== void 0 ? _a : this.serverNames[0].id, ref: (el) => (this.serverNameEl = el), class: "server-name-combo-box", part: "server-name", onValueChanged: this.evaluateCreateDataInKbDisabled }, renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.databaseName, placeholder: "MyDatabase", ref: (el) => (this.databaseNameEl = el), value: this.databaseName, class: "database-name", part: "database-name" }), h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.collation, disableFilter: true, value: (_b = this._initialComboValue["collations"]) !== null && _b !== void 0 ? _b : this.collations[0].id, ref: (el) => (this.collationEl = el), class: "collation-combo-box", part: "collation" }, renderFormItems("gxg-combo-box-item", this.collations, "collation")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.createDataFilesInKbFolder, ref: (el) => (this.createDataFilesInKBFolderEl =
+          el), alignTop: true, checked: this.createDataFilesInKBFolder, disabled: this.createDataInKbDisabled, class: "create-data-in-kb", part: "create-data-in-kb" }))), h("gx-ide-container", { noHeadingBorder: true }, h("div", { class: {
           "grid": true,
           "knowledge-base-storage__col-right": true,
           "knowledge-base-storage__col-right--windows-authentication": !this.userNameVisible
@@ -152,7 +211,7 @@ export class GxIdeNewKb {
     this.userNameVisible = true;
     this.passwordVisible = true;
     this.savePasswordVisible = true;
-    this.dataSources = undefined;
+    this.defaultDataSources = undefined;
     this.frontEnds = undefined;
     this.isAdvanced = false;
     this.kbLocation = undefined;
@@ -172,6 +231,8 @@ export class GxIdeNewKb {
     this.test = undefined;
     this.createCallback = undefined;
     this.cancelCallback = undefined;
+    this.getDataSourcesCallback = undefined;
+    this.getFrontEndsCallback = undefined;
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
@@ -179,6 +240,7 @@ export class GxIdeNewKb {
     this.setInitialValues();
     this.evaluateCreateDataInKbDisabled(null);
     this.evaluateAuthenticationType(null);
+    this.previousFrontEndsState = this.frontEnds;
   }
   componentDidRender() {
     this.componentDidRenderEvent.emit(this._componentLocale.componentName);
@@ -187,7 +249,7 @@ export class GxIdeNewKb {
    *  11.RENDER() FUNCTION
    ********************************/
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", null, h("header", { class: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", null, h("header", { class: {
         "header": true,
         "grid": true,
         "header--is-advanced": this.isAdvanced
@@ -197,7 +259,7 @@ export class GxIdeNewKb {
         h("gxg-form-text", { labelPosition: "start", placeholder: "C:\\Models", maxWidth: "100%", value: this.kbLocation, ref: (el) => (this.locationEl = el), disabled: !this.isAdvanced, part: "kb-location", class: "location-input" }),
         h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" })
       ]
-      : null)), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar" }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", hidden: !this.isAdvanced, part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced())), h("gx-ide-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
+      : null)), h("main", { class: "gxi-full-height gxi-overflow-auto" }, h("gxg-tabs", { class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", hidden: !this.isAdvanced, part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced())), h("gx-ide-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
   }
   static get is() { return "gx-ide-new-kb"; }
   static get encapsulation() { return "shadow"; }
@@ -214,9 +276,9 @@ export class GxIdeNewKb {
   static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
   static get properties() {
     return {
-      "dataSources": {
+      "defaultDataSources": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "GxOption[]",
           "resolved": "GxOption[]",
@@ -236,7 +298,7 @@ export class GxIdeNewKb {
       },
       "frontEnds": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "GxOption[]",
           "resolved": "GxOption[]",
@@ -586,6 +648,44 @@ export class GxIdeNewKb {
           "tags": [],
           "text": "Callback invoked when the user wants to cancel KB creation (\u2018Cancel\u2019 button)"
         }
+      },
+      "getDataSourcesCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GetDataSourcesCallback",
+          "resolved": "(selectedPrototypingEnvironmentId: string, selectedPrototypingTargetId: string) => Promise<GxOption[]>",
+          "references": {
+            "GetDataSourcesCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to cancel KB creation (\u2018Cancel\u2019 button)"
+        }
+      },
+      "getFrontEndsCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GetFrontEndsCallback",
+          "resolved": "(selectedPrototypingEnvironmentId: string) => Promise<GxOption[]>",
+          "references": {
+            "GetFrontEndsCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user changes the prototyping environment, allowing for the modification of the list of front ends"
+        }
       }
     };
   }

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

@@ -9,6 +9,14 @@
   height: 100%;
 }
 
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
 .align-start {
   display: flex;
   align-items: start;
@@ -36,6 +44,22 @@ ch-grid-cell {
   display: flex;
 }
 
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 999;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
   box-shadow: var(--box-shadow-01) !important;