@genexus/genexus-ide-ui 0.0.12 → 0.0.13

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

@@ -1,10 +1,12 @@
-/*********************
-HELPER CLASSES
-*********************/
+/* Helper Classes */
 .gxi-hidden {
   display: none !important;
 }
 
+.gxi-full-height {
+  height: 100%;
+}
+
 .align-start {
   display: flex;
   align-items: start;
@@ -20,9 +22,7 @@ HELPER CLASSES
   align-items: end;
 }
 
-/*********************
-GRIDS
-*********************/
+/* Grids */
 .grid {
   display: grid;
   grid-row-gap: var(--gx-ide-grid-row-gap);
@@ -30,6 +30,90 @@ GRIDS
   grid-template-rows: auto;
 }
 
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  box-shadow: var(--box-shadow-01) !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.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;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.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-right: 2px;
+}
+
+.gx-ide-overflow {
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.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-right: 2px;
+}
+
 :host {
   display: block;
   border: 1px solid var(--gxg-border-color--regular);
@@ -74,14 +158,22 @@ GRIDS
   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);
 }
 
 /*Advanced*/
 .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;
@@ -92,7 +184,7 @@ GRIDS
 }
 .knowledge-base-storage__col-left .server-name-button {
   grid-area: server-name-button;
-  align-self: last baseline;
+  align-self: center;
 }
 .knowledge-base-storage__col-left .database-name {
   grid-area: database-name;
@@ -102,7 +194,7 @@ GRIDS
 }
 .knowledge-base-storage__col-left .collation-button {
   grid-area: collation-button;
-  align-self: last baseline;
+  align-self: center;
 }
 .knowledge-base-storage__col-left .create-data-in-kb {
   grid-area: create-data-in-kb;

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

@@ -1,7 +1,9 @@
 /* STENCIL IMPORTS */
 import { Host, h } from "@stencil/core";
+/* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
-import { renderFormItems, getSelectedGxgOption } from "../../common/common";
+import { renderFormItems, getSelectedGxOption } from "../../common/common";
+import { formSubmitValidation } from "../../common/form-validation";
 export class GxIdeNewKb {
   constructor() {
     /**
@@ -16,13 +18,16 @@ export class GxIdeNewKb {
       collations: null,
       authenticationTypes: null
     };
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
     /**
      * Set the initial/selected option for multi-option components
      */
     this.setInitialValues = () => {
       if (this._initialComboValue) {
         Object.keys(this._initialComboValue).forEach(property => {
-          const selectedOption = getSelectedGxgOption(this[property]);
+          const selectedOption = getSelectedGxOption(this[property]);
           const value = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.selected)
             ? selectedOption.id
             : null;
@@ -32,9 +37,6 @@ export class GxIdeNewKb {
         });
       }
     };
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
     /**
      * @description If Server Name first option is selected, "Create Data in Knowledge Base Folder" should be disabled
      */
@@ -88,28 +90,19 @@ export class GxIdeNewKb {
         }
       });
     };
-    this.getFrontEndsOptionsValues = () => {
-      this.frontEndsOptionsArray = [];
-      const frontEndsOptions = this.frontEndsBoxEl.querySelectorAll("gxg-form-checkbox");
-      frontEndsOptions === null || frontEndsOptions === void 0 ? void 0 : frontEndsOptions.forEach(frontEndsOption => {
-        this.frontEndsOptionsArray.push({
-          id: frontEndsOption.id,
-          checked: frontEndsOption.checked
+    this.getFrontEndOptionsValues = () => {
+      const gxOptions = [];
+      const frontEndValues = this.frontEndsEl.getValues();
+      frontEndValues.then(result => {
+        result.forEach(checkbox => {
+          gxOptions.push({
+            id: checkbox.id,
+            checked: checkbox.value,
+            disabled: checkbox.disabled
+          });
         });
       });
-      return this.frontEndsOptionsArray;
-    };
-    this.validation = (result) => {
-      result.forEach(item => {
-        const key = Object.entries(item)[0];
-        const reference = this[`${Object.keys(item)[0]}El`];
-        const status = key[1].status;
-        const message = key[1].message;
-        if (reference && status && message) {
-          reference.validationStatus = status;
-          reference.validationMessage = message;
-        }
-      });
+      return gxOptions;
     };
     this.createKbHandler = () => {
       var _a, _b, _c;
@@ -121,7 +114,7 @@ export class GxIdeNewKb {
           userInterfaceLanguage: this.userInterfaceLanguageEl.value,
           prototypingEnvironment: this.prototypingEnvironmentEl.value,
           dataSource: this.dataSourceEl.value,
-          frontEnds: this.getFrontEndsOptionsValues(),
+          frontEnds: this.getFrontEndOptionsValues(),
           serverName: this.serverNameEl.value,
           databaseName: this.databaseNameEl.value,
           collation: this.collationEl.value,
@@ -131,8 +124,8 @@ export class GxIdeNewKb {
           password: (_b = this.passwordEl) === null || _b === void 0 ? void 0 : _b.value,
           savePassword: (_c = this.savePasswordEl) === null || _c === void 0 ? void 0 : _c.checked
         });
-        createCallbackPromise.then(result => {
-          this.validation(result);
+        createCallbackPromise.then(formSubmitResult => {
+          formSubmitValidation(formSubmitResult, this);
         });
       }
     };
@@ -144,17 +137,22 @@ export class GxIdeNewKb {
     // 10.RENDER() FUNCTION //
     this.renderTabBasic = () => {
       var _a, _b, _c, _d;
-      return (h("gxg-tab", { tab: "basic", "no-padding": true }, h("gxg-container", { displayBorderTop: true, displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disabled: !this.isAdvanced, 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("gxg-container", { fieldset: true, displayBorderEnd: 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("gxg-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel, ref: el => (this.frontEndsBoxEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end")))));
+      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", { disabled: !this.isAdvanced, 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"))))));
     };
     this.renderTabAdvanced = () => {
       var _a, _b, _c;
-      return (h("gxg-tab", { tab: "advanced", "no-padding": true }, h("gxg-container", { displayBorderTop: true, displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), h("div", { class: "grid knowledge-base-storage" }, h("gxg-container", { fieldset: true, displayBorderEnd: 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("gxg-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", { 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: {
           "grid": true,
           "knowledge-base-storage__col-right": true,
           "knowledge-base-storage__col-right--windows-authentication": !this.userNameVisible
         } }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.authenticationType, disableFilter: true, value: (_c = this._initialComboValue["authenticationTypes"]) !== null && _c !== void 0 ? _c : this.authenticationTypes[0].id, ref: (el) => (this.authenticationTypeEl = el), class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), this.userNameVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.userName, ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" })) : null, this.passwordVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.password, password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" })) : null, this.savePasswordVisible ? (h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.savePassword, ref: (el) => (this.savePasswordEl = el), checked: this.savePassword, class: "save-password", part: "save-password" })) : null)))));
     };
+    this.createDataInKbDisabled = false;
+    this.userNameVisible = true;
+    this.passwordVisible = true;
+    this.savePasswordVisible = true;
+    this.hideTopBar = false;
     this.dataSources = undefined;
     this.frontEnds = undefined;
     this.isAdvanced = false;
@@ -175,29 +173,24 @@ export class GxIdeNewKb {
     this.test = undefined;
     this.createCallback = undefined;
     this.cancelCallback = undefined;
-    this.createDataInKbDisabled = false;
-    this.userNameVisible = true;
-    this.passwordVisible = true;
-    this.savePasswordVisible = true;
   }
-  // 6.METHODS //
+  // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
     this.setInitialValues();
     this.evaluateCreateDataInKbDisabled(null);
     this.evaluateAuthenticationType(null);
   }
-  componentDidLoad() {
-    this.kbNameEl.focus();
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
   }
   /** *****************************
    *  11.RENDER() FUNCTION
    ********************************/
   render() {
-    return (h(Host, { class: { "gx-ide-component": true } }, h("div", { class: `main-wrapper` }, h("gxg-container", null, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start", class: "kb-label" }, this._componentLocale.header.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation), 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" }))), h("header", { class: {
-        "header": true,
-        "header--no-location-folder": !this.selectLocationCallback
-      } }), h("main", { class: "main" }, 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, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: !this.isAdvanced, part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced(), h("gxg-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel" }, this._componentLocale.footer.btnCancel)))))));
+    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", class: "kb-label" }, this._componentLocale.header.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation), 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" }))), 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, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced",
+      // disabled={!this.isAdvanced}
+      part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced())), h("gx-ide-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
   }
   static get is() { return "gx-ide-new-kb"; }
   static get encapsulation() { return "shadow"; }
@@ -214,14 +207,32 @@ export class GxIdeNewKb {
   static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
   static get properties() {
     return {
+      "hideTopBar": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, will hide the top-bar"
+        },
+        "attribute": "hide-top-bar",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "dataSources": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxgOption[]",
-          "resolved": "GxgOption[]",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "GxgOption": {
+            "GxOption": {
               "location": "import",
               "path": "../../common/types"
             }
@@ -238,10 +249,10 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxgOption[]",
-          "resolved": "GxgOption[]",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "GxgOption": {
+            "GxOption": {
               "location": "import",
               "path": "../../common/types"
             }
@@ -293,11 +304,11 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "() => Promise<string>",
+          "original": "SelectLocationCallback",
           "resolved": "() => Promise<string>",
           "references": {
-            "Promise": {
-              "location": "global"
+            "SelectLocationCallback": {
+              "location": "local"
             }
           }
         },
@@ -329,10 +340,10 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxgOption[]",
-          "resolved": "GxgOption[]",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "GxgOption": {
+            "GxOption": {
               "location": "import",
               "path": "../../common/types"
             }
@@ -349,10 +360,10 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxgOption[]",
-          "resolved": "GxgOption[]",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "GxgOption": {
+            "GxOption": {
               "location": "import",
               "path": "../../common/types"
             }
@@ -369,10 +380,10 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxgOption[]",
-          "resolved": "GxgOption[]",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "GxgOption": {
+            "GxOption": {
               "location": "import",
               "path": "../../common/types"
             }
@@ -389,10 +400,10 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxgOption[]",
-          "resolved": "GxgOption[]",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "GxgOption": {
+            "GxOption": {
               "location": "import",
               "path": "../../common/types"
             }
@@ -409,10 +420,10 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxgOption[]",
-          "resolved": "GxgOption[]",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "GxgOption": {
+            "GxOption": {
               "location": "import",
               "path": "../../common/types"
             }
@@ -499,10 +510,10 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "GxgOption[]",
-          "resolved": "GxgOption[]",
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
           "references": {
-            "GxgOption": {
+            "GxOption": {
               "location": "import",
               "path": "../../common/types"
             }
@@ -553,18 +564,11 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "(\n    data: NewKBData\n  ) => Promise<FormSubmitResult[]>",
-          "resolved": "(data: NewKBData) => Promise<FormSubmitResult[]>",
+          "original": "CreateCallback",
+          "resolved": "(data: NewKBData) => Promise<FormSubmitResult>",
           "references": {
-            "NewKBData": {
+            "CreateCallback": {
               "location": "local"
-            },
-            "Promise": {
-              "location": "global"
-            },
-            "FormSubmitResult": {
-              "location": "import",
-              "path": "../../common/types"
             }
           }
         },
@@ -579,11 +583,11 @@ export class GxIdeNewKb {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "() => Promise<void>",
+          "original": "CancelCallback",
           "resolved": "() => Promise<void>",
           "references": {
-            "Promise": {
-              "location": "global"
+            "CancelCallback": {
+              "location": "local"
             }
           }
         },
@@ -606,8 +610,8 @@ export class GxIdeNewKb {
   }
   static get events() {
     return [{
-        "method": "componentDidLoadEvent",
-        "name": "componentDidLoadEvent",
+        "method": "componentDidRenderEvent",
+        "name": "componentDidRenderEvent",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/top-bar/top-bar.css

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--spacing-comp-01) var(--spacing-comp-02);
+  transition: background-color var(--gx-ide-timing-super-fast-ms);
+  background-color: var(--gray-01);
+}
+
+gxg-title::part(title) {
+  color: var(--color-on-secondary);
+  transition: color var(--gx-ide-timing-super-fast-ms);
+}

package/dist/collection/components/top-bar/top-bar.js

@@ -0,0 +1,62 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+export class GxIdeTopBar {
+  constructor() {
+    this.topBarTitle = undefined;
+  }
+  // 5.EVENTS (EMIT) //
+  // 6.METHODS //
+  componentWillLoad() {
+    this.evaluateSlots();
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
+  evaluateSlots() {
+    // header
+    const menuSlot = this.el.querySelectorAll('[slot="menu"]');
+    if (menuSlot.length) {
+      this._hasMenuSlot = true;
+    }
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, null, h("div", { class: "wrapper", part: "wrapper" }, h("div", { class: "wrapper__left", part: "wrapper-left" }, h("gxg-title", { type: "title-04", exportparts: "title: gxg-title" }, this.topBarTitle)), h("div", { class: "wrapper__right", part: "wrapper-right" }, this._hasMenuSlot ? (h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-vertical" }, h("slot", { name: "menu" }))) : null))));
+  }
+  static get is() { return "gx-ide-top-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["top-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["top-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "topBarTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The top bar title"
+        },
+        "attribute": "top-bar-title",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/pages/assets/common.js

@@ -1,11 +1,12 @@
 const toggleDarkBtn = document.getElementById("toggle-dark-btn");
 const toggleDirBtn = document.getElementById("toggle-dir-btn");
 const showPartsBtn = document.getElementById("show-parts-btn");
-const validateBtn = document.getElementById("validate-btn");
 const responsiveMobileBtn = document.getElementById("responsive-mobile-btn");
 const responsiveTabletBtn = document.getElementById("responsive-tablet-btn");
 const responsiveDesktopBtn = document.getElementById("responsive-desktop-btn");
+const toggleHeightBtn = document.getElementById("toggle-height-btn");
 const containerComponent = document.getElementById("container-component");
+
 /* Toggle Dark */
 toggleDarkBtn.addEventListener("click", function () {
   html.classList.toggle("dark");
@@ -77,13 +78,6 @@ showPartsBtn.addEventListener("click", function () {
   }
 });
 
-/* Test Validation */
-if (validateBtn) {
-  validateBtn.addEventListener("click", async function () {
-    await gxIdeComponent.validate();
-  });
-}
-
 /* Sidebar buttons */
 const sidebarButtons = document.querySelectorAll("gxg-button");
 if (sidebarButtons.length) {
@@ -172,3 +166,29 @@ responsiveDesktopBtn.addEventListener("click", () => {
   containerComponent.classList.remove("mobile");
   containerComponent.classList.add("desktop");
 });
+
+/* Toggle height button */
+/* Set initial height*/
+gxIdeComponent.addEventListener("componentDidRenderEvent", e => {
+  console.log(`${e.detail} did render`);
+  setTimeout(() => {
+    // Just to be completely sure.
+    containerComponent.style.height = `${containerComponent.offsetHeight}px`;
+  }, 250);
+});
+const heightVariation = 200;
+if (toggleHeightBtn) {
+  toggleHeightBtn.addEventListener("click", () => {
+    const containerActualHeight = containerComponent.offsetHeight;
+    if (html.classList.contains("taller")) {
+      // make shorter
+      containerComponent.style.height =
+        containerActualHeight - heightVariation + "px";
+    } else {
+      // make taller
+      containerComponent.style.height =
+        containerActualHeight + heightVariation + "px";
+    }
+    html.classList.toggle("taller");
+  });
+}