@genexus/genexus-ide-ui 0.0.43 → 0.0.45

package/dist/esm/{gxg-tab_4.entry.js → gx-ide-container_5.entry.js}

@@ -2,7 +2,124 @@ import { r as registerInstance, h, H as Host, g as getElement, c as createEvent
 import { s as state } from './store-c2650ca5.js';
 import { e as exportParts } from './export-parts-7f208d57.js';
 
-const tabCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{height:100%;display:block}:host .container{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;height:100%;box-sizing:border-box;padding:var(--spacing-comp-03)}:host(.not-selected){display:none}:host(.no-padding) .container{padding:0}.container--flex{display:flex}.container--flex.flex-column{flex-direction:column}.container--flex.flex-row{flex-direction:row}:host(.large) .container{font-size:var(--font-size-lg)}";
+const containerCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block}:host([full-height]){height:100%}:host([full-height]) .container{height:100%;display:flex;flex-direction:column}:host([full-height]) .content{flex-grow:1}.heading,.content,.footer{padding:var(--gxg-container--padding)}.container--padding-s{--gxg-container--padding:var(--spacing-comp-02)}.container--padding-m{--gxg-container--padding:var(--spacing-comp-03)}.container--padding-l{--gxg-container--padding:var(--spacing-comp-04)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.heading{display:flex;flex-direction:column;gap:var(--gxg-container--padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.content{display:block;overflow-x:auto;}.content::-webkit-scrollbar{width:6px;height:6px}.content::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.content::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.content::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.content--no-padding{padding:0}.content--no-border-top{border-top:none}.content--flex{display:flex}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.footer{display:flex;gap:var(--gxg-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gxg-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}";
+
+const GxIdeContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.headingClasses = () => {
+      return {
+        "heading": true,
+        "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
+        [`heading--justify-${this.headingJustify}`]: true,
+        ["heading--no-padding"]: this.noHeadingPadding
+      };
+    };
+    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
+      };
+    };
+    this.footer = () => {
+      return this.hasFooterSlot ? (h("footer", { class: {
+          "footer": true,
+          "footer--no-border": this.hasOnlyFooter || !this.hasSlottedContent,
+          [`footer--justify-${this.footerJustify}`]: true,
+          [`footer--justify-${this.footerJustify}`]: true,
+          ["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.containerTitle = undefined;
+    this.displayBorder = false;
+    this.displayBorderTop = false;
+    this.displayBorderEnd = false;
+    this.displayBorderBottom = false;
+    this.displayBorderStart = false;
+    this.sectionsPadding = "m";
+    this.fullHeight = false;
+    this.titleAlignment = "center";
+    this.noHeadingBorder = false;
+    this.noHeadingPadding = false;
+    this.headingJustify = "center";
+    this.flexContent = false;
+    this.noContentBorderTop = false;
+    this.noContentPadding = false;
+    this.noContentGap = false;
+    this.alignItems = undefined;
+    this.justifyContent = undefined;
+    this.noFooterPadding = false;
+    this.footerJustify = "end";
+    this.noBorderFooter = false;
+    this.hasHeaderSlot = false;
+    this.hasSlottedContent = false;
+    this.hasFooterSlot = false;
+    this.hasOnlyHeading = false;
+    this.hasOnlyFooter = false;
+  }
+  // 4.PUBLIC PROPERTY API /
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  componentWillLoad() {
+    this.evaluateSlots();
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
+  evaluateSlots() {
+    // header
+    const headerSlot = this.el.querySelectorAll(':scope > [slot="header"]');
+    if (headerSlot.length) {
+      this.hasHeaderSlot = true;
+    }
+    // content
+    const slottedContent = this.el.querySelectorAll(":scope >  :not([slot])");
+    if (slottedContent.length) {
+      this.hasSlottedContent = true;
+    }
+    // footer
+    const footerStartSlot = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
+    const footerEndSlot = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
+    if (footerStartSlot.length || footerEndSlot.length) {
+      this.hasFooterSlot = true;
+    }
+  }
+  evaluateSections() {
+    if (!this.hasSlottedContent && !this.hasFooterSlot) {
+      this.hasOnlyHeading = true;
+    }
+    if (!this.hasSlottedContent && !this.containerTitle) {
+      this.hasOnlyFooter = true;
+    }
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    this.evaluateSections();
+    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,
+        "container--display-border": this.displayBorder,
+        "container--display-border-top": this.displayBorderTop,
+        "container--display-border-end": this.displayBorderEnd,
+        "container--display-border-bottom": this.displayBorderBottom,
+        "container--display-border-start": this.displayBorderStart
+      } }, result)));
+  }
+  get el() { return getElement(this); }
+};
+GxIdeContainer.style = containerCss;
+
+const tabCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{height:100%;display:block}:host .container{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;height:100%;box-sizing:border-box;padding:var(--spacing-comp-03)}:host(.not-selected){display:none}:host(.no-padding) .container{padding:0}:host(.flex){display:flex}:host(.overflow-auto){overflow:auto}.container--flex{display:flex}.container--flex.flex-column{flex-direction:column}.container--flex.flex-row{flex-direction:row}:host(.large) .container{font-size:var(--font-size-lg)}";
 
 const GxgTab = class {
   constructor(hostRef) {
@@ -15,6 +132,14 @@ const GxgTab = class {
      * The presence of this attribute makes the container display flex
      */
     this.flexContainer = false;
+    /**
+     * The presence of this attribute makes the display of the tab 'flex' only when is open
+     */
+    this.flex = false;
+    /**
+     * The presence of this attribute makes the .container overflow property set to 'auto'
+     */
+    this.overflowAuto = false;
     /**
      * The container flex-direction, if container is flex.
      */
@@ -26,6 +151,8 @@ const GxgTab = class {
   }
   render() {
     return (h(Host, { class: {
+        "overflow-auto": this.overflowAuto,
+        flex: this.flex && this.isSelected,
         open: this.isSelected,
         "not-selected": !this.isSelected,
         "no-padding": this.noPadding,
@@ -41,7 +168,7 @@ const GxgTab = class {
 };
 GxgTab.style = tabCss;
 
-const tabBarCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{--tabBarMenuHeight:0;--tabBarMenuWidth:0;display:inline-flex;text-align:right;position:relative;display:flex;justify-content:space-between}:host .nav{display:flex;justify-content:space-between;width:100%}:host .tab-bar{list-style-type:none;padding-inline-start:0;display:flex !important;margin-bottom:0;margin-top:0;font-family:var(--font-family-primary);background-color:var(--color-background)}:host .tab-bar__menu{display:flex;align-items:center}:host .tab-bar-menu{border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);height:var(--tabBarMenuHeight);position:absolute;z-index:10;background-color:var(--color-on-primary);right:0;margin:0;padding:0;list-style:none;display:inline-flex;flex-direction:column;overflow:hidden;transition-property:height;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-bar-menu.bottom{bottom:0}:host .tab-bar-menu.right{bottom:0;rotate:90deg;transform-origin:top right;transform:translateX(100%);height:auto !important;width:var(--tabBarMenuHeight)}:host .tab-bar-menu--collapsed{height:0}:host .tab-bar-menu--collapsed.right{width:0}:host(.gxg-tab-bar--hidden){display:none}:host(.rtl) .tab-bar-menu{left:0;right:auto}";
+const tabBarCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{--tabBarMenuHeight:0;--tabBarMenuWidth:0;display:inline-flex;text-align:right;position:relative;display:flex;justify-content:space-between}:host .nav{display:flex;justify-content:space-between;width:100%}:host .nav--border{border-bottom:1px solid var(--gxg-border-color--regular)}:host .tab-bar{list-style-type:none;padding-inline-start:0;display:flex !important;margin-bottom:0;margin-top:0;font-family:var(--font-family-primary);background-color:var(--color-background)}:host .tab-bar__menu{display:flex;align-items:center}:host .tab-bar-menu{border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);height:var(--tabBarMenuHeight);position:absolute;z-index:10;background-color:var(--color-on-primary);right:0;margin:0;padding:0;list-style:none;display:inline-flex;flex-direction:column;overflow:hidden;transition-property:height;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-bar-menu.bottom{bottom:0}:host .tab-bar-menu.right{bottom:0;rotate:90deg;transform-origin:top right;transform:translateX(100%);height:auto !important;width:var(--tabBarMenuHeight)}:host .tab-bar-menu--collapsed{height:0}:host .tab-bar-menu--collapsed.right{width:0}:host(.gxg-tab-bar--hidden){display:none}:host(.rtl) .tab-bar-menu{left:0;right:auto}";
 
 const GxgTabBar = class {
   constructor(hostRef) {
@@ -61,6 +188,10 @@ const GxgTabBar = class {
     this.tabBarMenuWidth = "auto";
     this.tabBarMenuCollapsed = true;
     this.lastAddedOrRemovedTabBarButtonWidth = 0;
+    /**
+     * The presence of this attribute displays a border-bottom line on the tab bar
+     */
+    this.displayBorder = false;
     /**
      * Reading direction
      */
@@ -255,6 +386,7 @@ const GxgTabBar = class {
         "gxg-tab-bar--hidden": this.hidden,
       }, exportParts: this.exportparts ? this.exportparts : null }, h("nav", { class: {
         nav: true,
+        "nav--border": this.displayBorder,
       } }, h("ul", { class: "tab-bar", ref: (el) => (this.tabBar = el) }, h("slot", { name: "tab-bar" })), this.renderTabBarMenu(), h("ul", { class: {
         "tab-bar-menu": true,
         "tab-bar-menu--collapsed": this.tabBarMenuCollapsed,
@@ -400,6 +532,7 @@ const GxgTabs = class {
     this.height = "100%";
     this.maxHeight = "100%";
     this.minWidth = "200px";
+    this.tabBarBorder = false;
     /**
      * The presence of this attribute removes each tab .container padding
      */
@@ -459,4 +592,4 @@ const GxgTabs = class {
 };
 GxgTabs.style = tabsCss;
 
-export { GxgTab as gxg_tab, GxgTabBar as gxg_tab_bar, GxgTabButton as gxg_tab_button, GxgTabs as gxg_tabs };
+export { GxIdeContainer as gx_ide_container, GxgTab as gxg_tab, GxgTabBar as gxg_tab_bar, GxgTabButton as gxg_tab_button, GxgTabs as gxg_tabs };

package/dist/esm/gx-ide-create-kb-from-server.entry.js

@@ -3,7 +3,7 @@ import { L as Locale } from './locale-e183487a.js';
 import { r as renderFormItems } from './common-a3df0966.js';
 import { f as formSubmitValidation } from './form-validation-09bd4504.js';
 
-const createKbFromServerCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items: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}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.grid-data{grid-template-columns:repeat(2, 1fr)}.grid-data-account{grid-template-columns:auto 1fr}.grid-data-account>:nth-child(1){grid-area:1/1/2/3}.grid-data-account>:nth-child(6){grid-area:4/2/5/3}.grid-data-kbs .search-kbs{width:100%;display:flex}.grid-data-kbs .box-kbs{height:150px}.grid-data-kbs-footer{grid-template-columns:repeat(2, auto)}.flex{display:flex}.flex>:nth-child(2){flex:1}";
+const createKbFromServerCss = ".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}.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:999;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.grid-data{grid-template-columns:repeat(2, 1fr)}.grid-data-account{grid-template-columns:auto 1fr}.grid-data-account>:nth-child(1){grid-area:1/1/2/3}.grid-data-account>:nth-child(6){grid-area:4/2/5/3}.grid-data-kbs .search-kbs{width:100%;display:flex}.grid-data-kbs .box-kbs{height:150px}.grid-data-kbs-footer{grid-template-columns:repeat(2, auto)}.flex{display:flex}.flex>:nth-child(2){flex:1}";
 
 const GxIdeCreateKbFromServer = class {
   constructor(hostRef) {

package/dist/esm/gx-ide-new-environment.entry.js

@@ -3,7 +3,7 @@ import { L as Locale } from './locale-e183487a.js';
 import { r as renderFormItems } from './common-a3df0966.js';
 import { f as formSubmitValidation } from './form-validation-09bd4504.js';
 
-const newEnvironmentCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items: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}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-new-environment--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr;grid-template-columns:auto 1fr auto}.header *:nth-child(1){grid-area:1/1/2/2}.header *:nth-child(2){grid-area:1/2/2/3}.gxg-tabs{margin-top:0;box-shadow:none}.grid--basic{flex-grow:1;grid-template-columns:1fr 1fr;gap:0}.grid--basic>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.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 = ".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}.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:999;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-new-environment--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr;grid-template-columns:auto 1fr auto}.header *:nth-child(1){grid-area:1/1/2/2}.header *:nth-child(2){grid-area:1/2/2/3}.gxg-tabs{margin-top:0;box-shadow:none}.grid--basic{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)}.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 GxIdeNewEnvironment = class {
   constructor(hostRef) {
@@ -79,12 +79,11 @@ const GxIdeNewEnvironment = class {
       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;
@@ -106,7 +105,7 @@ const GxIdeNewEnvironment = class {
   }
   // 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 assetsDirs() { return ["gx-ide-assets/new-environment"]; }
   get el() { return getElement(this); }

package/dist/esm/gx-ide-new-kb.entry.js

@@ -3,7 +3,7 @@ import { L as Locale } from './locale-e183487a.js';
 import { r as renderFormItems, g as getSelectedGxOption } from './common-a3df0966.js';
 import { f as formSubmitValidation } from './form-validation-09bd4504.js';
 
-const newKbCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items: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}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.header{grid-template-columns:auto 1fr;grid-template-areas:\"kb-name-label kb-input\"}.header--is-advanced{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-name-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-name-label{grid-area:kb-label}.header .location-label{grid-area:location-label}.header .location-input{grid-area:location-input}.header .location-icon{grid-area:location-icon}.gxg-tabs{margin-top:0;box-shadow:none}.basic-row-first{grid-template-areas:\"prototyping-target user-interface-language\";grid-template-columns:repeat(2, 1fr)}.basic-row-second{grid-template-areas:\"prototyping-environment data-source\";grid-template-columns:repeat(2, 1fr);grid-column-gap:0;grid-row-gap:0;flex-grow:1}.basic-row-second>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage{grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);flex-grow:1;gap:0}.knowledge-base-storage>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage__col-left{grid-area:knowledge-base-storage__col-left;grid-template-columns:1fr auto;grid-template-areas:\"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\"}.knowledge-base-storage__col-left .server-name-combo-box{grid-area:server-name-combo-box}.knowledge-base-storage__col-left .server-name-button{grid-area:server-name-button;align-self:end}.knowledge-base-storage__col-left .database-name{grid-area:database-name}.knowledge-base-storage__col-left .collation-combo-box{grid-area:collation-combo-box}.knowledge-base-storage__col-left .collation-button{grid-area:collation-button;align-self:end}.knowledge-base-storage__col-left .create-data-in-kb{grid-area:create-data-in-kb}.knowledge-base-storage__col-right{grid-area:knowledge-base-storage__col-right;grid-template-columns:1fr;grid-template-areas:\"authentication-type\" \"user-name\" \"password\" \"save-password\"}.knowledge-base-storage__col-right .authentication-type{grid-area:authentication-type}.knowledge-base-storage__col-right .user-name{grid-area:user-name}.knowledge-base-storage__col-right .password{grid-area:password}.knowledge-base-storage__col-right .save-password{grid-area:save-password}.knowledge-base-storage__col-right--windows-authentication{grid-template-areas:\"authentication-type\"}";
+const newKbCss = ".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}.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:999;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.header{grid-template-columns:auto 1fr;grid-template-areas:\"kb-name-label kb-input\"}.header--is-advanced{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-name-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-name-label{grid-area:kb-label}.header .location-label{grid-area:location-label}.header .location-input{grid-area:location-input}.header .location-icon{grid-area:location-icon}.gxg-tabs{margin-top:0;box-shadow:none}.basic-row-first{grid-template-areas:\"prototyping-target user-interface-language\";grid-template-columns:repeat(2, 1fr)}.basic-row-second{grid-template-areas:\"prototyping-environment data-source\";grid-template-columns:repeat(2, 1fr);grid-column-gap:0;grid-row-gap:0;flex-grow:1}.basic-row-second>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage{grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);flex-grow:1;gap:0}.knowledge-base-storage>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage__col-left{grid-area:knowledge-base-storage__col-left;grid-template-columns:1fr auto;grid-template-areas:\"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\"}.knowledge-base-storage__col-left .server-name-combo-box{grid-area:server-name-combo-box}.knowledge-base-storage__col-left .server-name-button{grid-area:server-name-button;align-self:end}.knowledge-base-storage__col-left .database-name{grid-area:database-name}.knowledge-base-storage__col-left .collation-combo-box{grid-area:collation-combo-box}.knowledge-base-storage__col-left .collation-button{grid-area:collation-button;align-self:end}.knowledge-base-storage__col-left .create-data-in-kb{grid-area:create-data-in-kb}.knowledge-base-storage__col-right{grid-area:knowledge-base-storage__col-right;grid-template-columns:1fr;grid-template-areas:\"authentication-type\" \"user-name\" \"password\" \"save-password\"}.knowledge-base-storage__col-right .authentication-type{grid-area:authentication-type}.knowledge-base-storage__col-right .user-name{grid-area:user-name}.knowledge-base-storage__col-right .password{grid-area:password}.knowledge-base-storage__col-right .save-password{grid-area:save-password}.knowledge-base-storage__col-right--windows-authentication{grid-template-areas:\"authentication-type\"}";
 
 const GxIdeNewKb = class {
   constructor(hostRef) {
@@ -16,11 +16,13 @@ const GxIdeNewKb = class {
       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 @@ const GxIdeNewKb = class {
       });
       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 @@ const GxIdeNewKb = class {
     // 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 @@ const GxIdeNewKb = class {
     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 @@ const GxIdeNewKb = class {
     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 @@ const GxIdeNewKb = class {
     this.setInitialValues();
     this.evaluateCreateDataInKbDisabled(null);
     this.evaluateAuthenticationType(null);
+    this.previousFrontEndsState = this.frontEnds;
   }
   componentDidRender() {
     this.componentDidRenderEvent.emit(this._componentLocale.componentName);
@@ -187,7 +249,7 @@ const GxIdeNewKb = class {
    *  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 @@ const GxIdeNewKb = class {
         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 assetsDirs() { return ["gx-ide-assets/new-kb"]; }
   get el() { return getElement(this); }

package/dist/esm/gx-ide-new-object.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 import { L as Locale } from './locale-e183487a.js';
 
-const newObjectCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items: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}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-new-object--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{grid-template-columns:auto 1fr}.first-row{grid-template-columns:1fr 3fr;grid-template-rows:1fr}.first-row *:nth-child(3){grid-column:1/3}";
+const newObjectCss = ".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}.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:999;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-new-object--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{grid-template-columns:auto 1fr}.first-row{grid-template-columns:1fr 3fr;grid-template-rows:1fr}.first-row *:nth-child(3){grid-column:1/3}";
 
 const GxIdeNewObject = class {
   constructor(hostRef) {
@@ -150,9 +150,9 @@ const GxIdeNewObject = class {
     return (h(Host, { class: {
         "gxi-new-kb": true,
         "gxi-new-object--shadow": this.shadow
-      } }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("main", { class: "main" }, h("gxg-container", { fieldset: true, displayBorderBottom: true }, h("div", { class: "grid first-row" }, this.typeCategories.length > 1 ? (h("gxg-list-box", { "single-selection": true, id: "list-box-category", "the-title": this._componentLocale.categorySelection, height: "100%", onSelectionChanged: this.categoryOnSelectionChangedHandler }, this.typeCategories.map(category => (h("gxg-list-box-item", { key: category.id, value: category.id, icon: category.icon, part: `${category}-${category.id}` }, category.name))))) : null, h("gxg-list-box", { "single-selection": true, id: "list-box-type", "the-title": this._componentLocale.typeSelection, height: "100%", onSelectionChanged: this.typeOnSelectionChangedHandler }, this.selectedCategory.types
+      } }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("main", { class: "main" }, h("gxg-container", { displayBorderBottom: true }, h("div", { class: "grid first-row" }, this.typeCategories.length > 1 ? (h("gxg-list-box", { "single-selection": true, id: "list-box-category", "the-title": this._componentLocale.categorySelection, height: "100%", onSelectionChanged: this.categoryOnSelectionChangedHandler }, this.typeCategories.map(category => (h("gxg-list-box-item", { key: category.id, value: category.id, icon: category.icon, part: `${category}-${category.id}` }, category.name))))) : null, h("gxg-list-box", { "single-selection": true, id: "list-box-type", "the-title": this._componentLocale.typeSelection, height: "100%", onSelectionChanged: this.typeOnSelectionChangedHandler }, this.selectedCategory.types
       ? this.selectedCategory.types.map(type => (h("gxg-list-box-item", { key: `${this.selectedCategory.id}-${type.id}`, icon: type.icon, selected: this.selectedType.id === type.id, part: `${type}-${type.id}` }, type.name)))
-      : null), h("gxg-title", { type: "title-05" }, "Text about the ", this.selectedType.name))), h("gxg-container", { fieldset: true }, h("div", { class: "grid" }, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.name, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.description), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.description, ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-container", { fieldset: true, displayBorderTop: true }, h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel))))));
+      : null), h("gxg-title", { type: "title-05" }, "Text about the ", this.selectedType.name))), h("gxg-container", null, h("div", { class: "grid" }, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.name, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.description), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.description, ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel))))));
   }
   static get assetsDirs() { return ["gx-ide-assets/new-object"]; }
   get el() { return getElement(this); }