@genexus/genexus-ide-ui 0.0.65 → 0.0.67

package/dist/collection/components/_helpers/status-buttons/gx-ide-status-buttons.js

@@ -11,7 +11,13 @@ export class GxIdeStatusButtons {
       }
     };
     this.evaluateLabel = (type) => {
-      const label = !this.minimal ? type : "";
+      let label = "";
+      if (!this.minimal && type !== "success") {
+        label = type;
+      }
+      else if (!this.minimal && type === "success") {
+        label = "succeeded";
+      }
       let refType;
       if (type === "error") {
         refType = this.errors;
@@ -20,13 +26,13 @@ export class GxIdeStatusButtons {
         refType = this.warnings;
       }
       else if (type === "success") {
-        refType = this.successes;
+        refType = this.succeeded;
       }
       if (this.minimal) {
         return refType === 0 ? "none" : `${refType}`;
       }
       else {
-        const suffix = type === "success" ? "es" : "s";
+        const suffix = type === "success" ? "" : "s";
         return refType === 1 ? `1 ${label}` : `${refType} ${label}${suffix}`;
       }
     };
@@ -37,7 +43,7 @@ export class GxIdeStatusButtons {
     this.active = false;
     this.errors = 0;
     this.warnings = 0;
-    this.successes = 0;
+    this.succeeded = 0;
     this.minimal = false;
     this.compact = false;
     this.noBorder = false;
@@ -58,7 +64,7 @@ export class GxIdeStatusButtons {
         "active-indicator": true
       } })), h("gx-ide-list-selector-item", { itemId: "warning", itemValue: this.evaluateLabel("warning"), icon: "gx-test/result-warning", iconColor: this.warnings === 0 ? "disabled" : "auto", class: { "warning": true, "not-zero": this.warnings !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
         "active-indicator": true
-      } })), h("gx-ide-list-selector-item", { itemId: "success", itemValue: this.evaluateLabel("success"), icon: "gx-test/result-ok", iconColor: this.successes === 0 ? "disabled" : "auto", class: { "success": true, "not-zero": this.successes !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
+      } })), h("gx-ide-list-selector-item", { itemId: "success", itemValue: this.evaluateLabel("success"), icon: "gx-test/result-ok", iconColor: this.succeeded === 0 ? "disabled" : "auto", class: { "success": true, "not-zero": this.succeeded !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
         "active-indicator": true
       } })))));
   }
@@ -130,7 +136,7 @@ export class GxIdeStatusButtons {
         "reflect": false,
         "defaultValue": "0"
       },
-      "successes": {
+      "succeeded": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -142,9 +148,9 @@ export class GxIdeStatusButtons {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The successes amount"
+          "text": "The succeded amount"
         },
-        "attribute": "successes",
+        "attribute": "succeeded",
         "reflect": false,
         "defaultValue": "0"
       },

package/dist/collection/components/_starting-template/gx-ide-assets/template/langs/template.lang.en.json

@@ -1,3 +1,10 @@
 {
-  "componentName": "Component Title"
+  "componentName": "Component Title",
+  "header": {},
+  "main": {},
+  "footer": {},
+  "loader": {
+    "title": "Loading...",
+    "cancelLabel": "Cancel"
+  }
 }

package/dist/collection/components/_starting-template/template.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,6 +172,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
 }

package/dist/collection/components/_starting-template/template.js

@@ -7,14 +7,14 @@ import { Locale } from "../../common/locale";
 export class GxIdeTemplate {
   constructor() {
     this.renderedFirstTime = false;
-    this.mainTile = undefined;
+    this.displayTitle = false;
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
   }
   componentDidRender() {
-    if (this.renderedFirstTime) {
+    if (!this.renderedFirstTime) {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
       this.renderedFirstTime = true;
     }
@@ -24,7 +24,7 @@ export class GxIdeTemplate {
   // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { "container-title": "Header Title", slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer" }, "Create")))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("p", { style: { marginTop: "0" } }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer-end" }, "Create")))));
   }
   static get is() { return "gx-ide-template"; }
   static get encapsulation() { return "shadow"; }
@@ -41,22 +41,23 @@ export class GxIdeTemplate {
   static get assetsDirs() { return ["gx-ide-assets/template"]; }
   static get properties() {
     return {
-      "mainTile": {
-        "type": "string",
+      "displayTitle": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "false",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The main title"
+          "text": "If true it displays the component title on the header"
         },
-        "attribute": "main-tile",
-        "reflect": false
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/_test/test.css

@@ -2,7 +2,19 @@
   display: block;
 }
 
-.tree-container {
-  display: flex;
-  height: 200px;
+section {
+  border-top: 1px solid #ccc;
+  margin-top: 300px;
+  container-name: section;
+  container-type: inline-size;
+}
+
+gxg-combo-box {
+  opacity: 1;
+}
+
+@container section (width < 400px) {
+  gxg-combo-box {
+    opacity: 0.5;
+  }
 }

package/dist/collection/components/_test/test.js

@@ -21,12 +21,6 @@ export class GxIdeTest {
   */
     // 1.OWN PROPERTIES //
     this.renderedFirstTime = false;
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.checkAllHandler = () => {
-      this.treeViewEl.updateAllItemsProperties({ checked: true });
-    };
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   componentDidRender() {
@@ -35,97 +29,12 @@ export class GxIdeTest {
       this.renderedFirstTime = true;
     }
   }
-  componentDidLoad() {
-    this.treeViewEl.treeModel = [
-      {
-        id: "number-1",
-        caption: "number-1 label (always editable)",
-        class: "tree-view-item tree-view-item--success",
-        leaf: false,
-        leftImgSrc: "./objects/datastore",
-        editable: true,
-        checkbox: true,
-        items: [
-          {
-            id: "number-1-1",
-            caption: "number-1-1 (always editable)",
-            leaf: false,
-            leftImgSrc: "/build/ch-icon-assets/patterns",
-            editable: true,
-            checkbox: true,
-            items: [
-              {
-                id: "number-1-1-1",
-                caption: "number-1-1-1",
-                leaf: true,
-                checkbox: true,
-                leftImgSrc: "./objects/knowledge-base"
-              },
-              {
-                id: "number-1-1-2",
-                caption: "number-1-1-2",
-                leaf: false,
-                checkbox: true,
-                leftImgSrc: "./objects/knowledge-base",
-                items: [
-                  {
-                    id: "number-1-1-2-1",
-                    caption: "number-1-1-2-1 (lazy, drag disabled)",
-                    leaf: false,
-                    leftImgSrc: "./objects/knowledge-base",
-                    lazy: true,
-                    checkbox: true,
-                    dragDisabled: true,
-                    toggleCheckboxes: true
-                  },
-                  {
-                    id: "number-1-1-2-2",
-                    caption: "number-1-1-2-2",
-                    leaf: true,
-                    checkbox: true,
-                    leftImgSrc: "/build/ch-icon-assets/java"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            id: "number-1-2",
-            caption: "number-1-2",
-            leaf: true,
-            checkbox: true,
-            leftImgSrc: "./objects/knowledge-base"
-          }
-        ]
-      },
-      {
-        id: "number-2",
-        caption: "number-2",
-        class: "tree-view-item tree-view-item--custom-image",
-        checkbox: true,
-        leaf: false,
-        items: [
-          {
-            id: "number-2-1",
-            caption: "number-2-1",
-            leaf: true,
-            checkbox: true,
-            leftImgSrc: "/build/ch-icon-assets/java"
-          },
-          {
-            id: "number-2-2",
-            caption: "number-2-2",
-            leaf: true,
-            checkbox: true,
-            leftImgSrc: "./objects/knowledge-base"
-          }
-        ]
-      }
-    ];
-  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h("div", null, h("div", { class: "tree-container" }, h("gxg-tree-view", { ref: el => (this.treeViewEl = el) })), h("label", null, "Check item", h("input", { type: "checkbox", name: "", id: "check-all", onInput: this.checkAllHandler }))));
+    return (h("div", { class: "container" }, h("h2", null, "combo-box"), h("p", null, "AAA Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor est culpa laborum illo, tenetur, quaerat quae eum rem magni voluptatem quasi eos repellendus nostrum commodi. Quasi aperiam eveniet dicta id."), h("section", null, h("gxg-combo-box", null, h("gxg-combo-box-item", { value: "manzana" }, "Manzana"), h("gxg-combo-box-item", { value: "banana" }, "Banana"), h("gxg-combo-box-item", { value: "mandarina" }, "Mandarina"), h("gxg-combo-box-item", { value: "uva" }, "Uvas")))));
   }
   static get is() { return "gx-ide-test"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/bpm-application-declaration/bpm-app-declaration.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,6 +172,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
   /*data mappings*/

package/dist/collection/components/bpm-application-declaration/bpm-app-declaration.js

@@ -98,6 +98,7 @@ export class GxIdeBpmAppDeclaration {
       }))));
     };
     this.suggestedApplications = undefined;
+    this.displayTitle = false;
     this.application = undefined;
     this.suggestApplicationsCallback = undefined;
     this.selectApplicationCallback = undefined;
@@ -127,7 +128,7 @@ export class GxIdeBpmAppDeclaration {
   // 10.RENDER() FUNCTION //
   render() {
     var _a;
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, footerSubtleShadow: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this._componentLocale.header.applicationLabel }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__first-row" }, h("gxg-suggest", { class: "application-suggest" }, h("ch-suggest", { value: ((_a = this.application.application) === null || _a === void 0 ? void 0 : _a.name) || null, onValueChanged: this.applicationSuggestValueChangedHandler, ref: el => (this.applicationSuggestEl = el), part: "application-suggest" }, renderSuggestLists(this.suggestedApplications))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.selectApplicationCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" }), h("gxg-button", { type: "outlined", part: "clear-application-button", onClick: this.clearApplicationHandler }, "Clear")), h("div", { class: "header__second-row" }, h("gx-ide-title", { type: "secondary" }, this._componentLocale.dataMappings.title))), h("div", { class: "data-mappings" }, this.renderDataMappingsGrid()), h("gxg-button", { type: "secondary-text-only", slot: "footer-end", onClick: this.cancelCallbackHandler }, this._componentLocale.buttons.cancelButton), h("gxg-button", { type: "primary-text-only", slot: "footer-end", icon: "general/datastore", onClick: this.confirmCallbackHandler }, this._componentLocale.buttons.confirmButton)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, footerSubtleShadow: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__first-row" }, h("gxg-suggest", { class: "application-suggest" }, h("ch-suggest", { value: ((_a = this.application.application) === null || _a === void 0 ? void 0 : _a.name) || null, onValueChanged: this.applicationSuggestValueChangedHandler, ref: el => (this.applicationSuggestEl = el), part: "application-suggest" }, renderSuggestLists(this.suggestedApplications))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.selectApplicationCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" }), h("gxg-button", { type: "outlined", part: "clear-application-button", onClick: this.clearApplicationHandler }, "Clear")), h("div", { class: "header__second-row" }, h("gx-ide-title", { type: "secondary" }, this._componentLocale.dataMappings.title))), h("div", { class: "data-mappings" }, this.renderDataMappingsGrid()), h("gxg-button", { type: "secondary-text-only", slot: "footer-end", onClick: this.cancelCallbackHandler }, this._componentLocale.buttons.cancelButton), h("gxg-button", { type: "primary-text-only", slot: "footer-end", icon: "general/datastore", onClick: this.confirmCallbackHandler }, this._componentLocale.buttons.confirmButton)))));
   }
   static get is() { return "gx-ide-bpm-app-declaration"; }
   static get encapsulation() { return "shadow"; }
@@ -144,6 +145,24 @@ export class GxIdeBpmAppDeclaration {
   static get assetsDirs() { return ["gx-ide-assets/bpm-app-declaration"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "application": {
         "type": "unknown",
         "mutable": true,

package/dist/collection/components/bpm-application-declaration/gx-ide-assets/bpm-app-declaration/langs/bpm-app-declaration.lang.en.json

@@ -1,7 +1,6 @@
 {
-  "header": {
-    "applicationLabel": "Application Declaration"
-  },
+  "componentName": "Application Declaration",
+  "header": {},
   "dataMappings": {
     "title": "Data Mappings",
     "firstColName": "Primary Key Attribute",

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

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,6 +172,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
   border: 1px solid var(--gxg-border-color--regular);

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

@@ -62,6 +62,7 @@ export class GxIdeCreateKbFromServer {
     };
     this.connectCallbackHandler = () => {
       var _a, _b;
+      console.log("connect callback");
       if (this.connectCallback) {
         const connectCallbackPromise = this.connectCallback({
           serverUrl: this.serverUrlsEl.value,
@@ -82,6 +83,7 @@ export class GxIdeCreateKbFromServer {
     this.selectionKbDisabled = true;
     this.kbs = [];
     this.kbSearchText = "";
+    this.displayTitle = false;
     this.connectCallback = undefined;
     this.createKBCallback = undefined;
     this.enableCustomServer = false;
@@ -116,17 +118,17 @@ export class GxIdeCreateKbFromServer {
   // 10.RENDER() FUNCTION //
   // 11.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this._componentLocale.componentName }, h("div", { class: "flex" }, h("gxg-label", { labelPosition: "start", class: "kb-label" }, this._componentLocale.label.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, ref: (el) => (this.serverUrlsEl = el), class: "server-urls-combo-box", part: "server-urls" }, this.serverUrls
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("div", { class: "flex" }, h("gxg-label", { labelPosition: "start", class: "kb-label" }, this._componentLocale.label.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, ref: (el) => (this.serverUrlsEl = el), class: "server-urls-combo-box", part: "server-urls" }, this.serverUrls
       ? renderFormItems("gxg-combo-box-item", this.serverUrls.map(sUrl => ({
         id: sUrl,
         label: sUrl,
         value: sUrl
       })), "server-urls")
-      : null)), h("div", { class: "grid grid-data" }, h("div", null, h("div", { class: "grid grid-data-account" }, h("gxg-combo-box", { disableFilter: true, value: 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")), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.userName}:`), h("gxg-form-text", { ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" }), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.password}:`), h("gxg-form-text", { password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" }), h("div", null, h("gxg-button", { id: "button-connect", type: "primary-text-only", onClick: this.connectCallbackHandler, part: "button-connect" }, this._componentLocale.btn.btnConnect)))), h("div", { class: "grid" }, h("div", { class: "grid-data-kbs" }, h("div", { class: "search-kbs" }, h("gxg-form-text", { ref: (el) => (this.searchKBEl = el), class: "search-kb-input", part: "search-kb", disabled: this.selectionKbDisabled, placeholder: this._componentLocale.label.searchKbs })), h("div", { class: "box-kbs" }, h("gxg-list-box", { "single-selection": true, disabled: this.selectionKbDisabled, ref: (el) => (this.listBoxEl = el), part: "kbs", onSelectionChanged: this.kbsOnSelectionChangedHandler }, this.kbs
+      : null)), h("div", { class: "grid grid-data" }, h("div", null, h("div", { class: "grid grid-data-account" }, h("gxg-combo-box", { disableFilter: true, value: 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")), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.userName}:`), h("gxg-form-text", { ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" }), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.password}:`), h("gxg-form-text", { password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" }), h("div", null, h("gxg-button", { id: "button-connect", type: "primary-text-only", onClick: this.connectCallbackHandler, part: "button-connect" }, this._componentLocale.buttons.connect)))), h("div", { class: "grid" }, h("div", { class: "grid-data-kbs" }, h("div", { class: "search-kbs" }, h("gxg-form-text", { ref: (el) => (this.searchKBEl = el), class: "search-kb-input", part: "search-kb", disabled: this.selectionKbDisabled, placeholder: this._componentLocale.label.searchKbs })), h("div", { class: "box-kbs" }, h("gxg-list-box", { "single-selection": true, disabled: this.selectionKbDisabled, ref: (el) => (this.listBoxEl = el), part: "kbs", onSelectionChanged: this.kbsOnSelectionChangedHandler }, this.kbs
       .filter(kb => kb.name
       .toLowerCase()
       .includes(this.kbSearchText.toLowerCase()))
-      .map(kb => (h("gxg-list-box-item", { value: kb.id, key: kb.id }, kb.name)))))), h("div", { class: "grid grid-data-kbs-footer" }, h("gxg-form-text", { ref: (el) => (this.kbNameEl = el), value: this.kbName, class: "kb-name", part: "kb-name", disabled: this.selectionKbDisabled }), h("div", null, h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", disabled: this.selectionKbDisabled }, this._componentLocale.btn.btnCreate)))))))));
+      .map(kb => (h("gxg-list-box-item", { value: kb.id, key: kb.id }, kb.name)))))), h("div", { class: "grid grid-data-kbs-footer" }, h("gxg-form-text", { ref: (el) => (this.kbNameEl = el), label: this._componentLocale.localKb, value: this.kbName, class: "kb-name", part: "kb-name", disabled: this.selectionKbDisabled }), h("div", null, h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", disabled: this.selectionKbDisabled }, this._componentLocale.buttons.create)))))))));
   }
   static get is() { return "gx-ide-create-kb-from-server"; }
   static get encapsulation() { return "shadow"; }
@@ -143,6 +145,24 @@ export class GxIdeCreateKbFromServer {
   static get assetsDirs() { return ["gx-ide-assets/create-kb-from-server"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "connectCallback": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/create-kb-from-server/gx-ide-assets/create-kb-from-server/langs/create-kb-from-server.lang.en.json

@@ -11,8 +11,9 @@
     "genexusAccount": "GeneXus Account",
     "local": "Local"
   },
-  "btn": {
-    "btnCreate": "Create",
-    "btnConnect": "Connect"
+  "localKb": "My KB Name:",
+  "buttons": {
+    "create": "Create",
+    "connect": "Connect"
   }
 }

package/dist/collection/components/kb-manager-export/kb-manager-export.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,6 +172,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /*general*/
 .tree-view-container {
   display: flex;

package/dist/collection/components/kb-manager-export/kb-manager-export.js

@@ -160,6 +160,7 @@ export class GxIdeKbManagerExport {
     this.noObjects = undefined;
     this.treeModel = [];
     this.exportingIsInProcess = false;
+    this.displayTitle = false;
     this.loader = false;
     this.kbPropertiesTypes = undefined;
     this.objectTypes = undefined;
@@ -179,7 +180,7 @@ export class GxIdeKbManagerExport {
       this.loaderEl.show = true;
     }
     else if (!isExporting && this.loader) {
-      this.loaderEl.show = true;
+      this.loaderEl.show = false;
     }
   }
   watchObjectTypesHandler(newState) {
@@ -205,9 +206,7 @@ export class GxIdeKbManagerExport {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    console.log("this.noObjects", this.noObjects);
-    console.log("this.exportingIsInProcess", this.exportingIsInProcess);
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noHeadingPadding: true, headingPaddingTop: true, containerTitle: this._componentLocale.componentName, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__top" }, h("gx-ide-directory-selector", { class: { "select-file-input": true }, value: this.exportFilePathName, part: "xpz-file", label: this._componentLocale.header.exportFileName, ref: el => (this.fileNameEl = el), selectDirectoryCallback: this.exportFileDirectoryCallback }), h("gxg-button-group", { class: "export-cancel-buttons-group" }, h("button", { id: "export-kb-btn", part: "export-btn", onClick: this.exportCallbackHandler, disabled: this.noObjects }, this._componentLocale.header.exportButton), h("button", { id: "cancel-kb-export-btn", part: "cancel-button", onClick: this.cancelCallbackHandler, disabled: !this.exportingIsInProcess || this.noObjects }, this._componentLocale.header.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", part: "select-kb-btn", class: { "options-btn": true }, onClick: this.optionsCallbackHandler }, this._componentLocale.header.optionsButton)), h("div", { class: "header__bottom" }, h("div", { class: { "checkboxes-wrapper": true } }, h("gxg-form-checkbox", { label: this._componentLocale.main.addKnowledgeBaseDescription, onChange: this.addKBPropertiesCallbackHandler, part: "add-kb-checkbox" }), h("gxg-form-checkbox", { label: this._componentLocale.main.exportAll, part: "export-all-checkbox", ref: el => (this.exportAllCheckboxEl =
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noHeadingPadding: true, headingPaddingTop: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__top" }, h("gx-ide-directory-selector", { class: { "select-file-input": true }, value: this.exportFilePathName, part: "xpz-file", label: this._componentLocale.header.exportFileName, ref: el => (this.fileNameEl = el), selectDirectoryCallback: this.exportFileDirectoryCallback }), h("gxg-button-group", { class: "export-cancel-buttons-group" }, h("button", { id: "export-kb-btn", part: "export-btn", onClick: this.exportCallbackHandler, disabled: this.noObjects }, this._componentLocale.header.exportButton), h("button", { id: "cancel-kb-export-btn", part: "cancel-button", onClick: this.cancelCallbackHandler, disabled: !this.exportingIsInProcess || this.noObjects }, this._componentLocale.header.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", part: "select-kb-btn", class: { "options-btn": true }, onClick: this.optionsCallbackHandler }, this._componentLocale.header.optionsButton)), h("div", { class: "header__bottom" }, h("div", { class: { "checkboxes-wrapper": true } }, h("gxg-form-checkbox", { label: this._componentLocale.main.addKnowledgeBaseDescription, onChange: this.addKBPropertiesCallbackHandler, part: "add-kb-checkbox" }), h("gxg-form-checkbox", { label: this._componentLocale.main.exportAll, part: "export-all-checkbox", ref: el => (this.exportAllCheckboxEl =
         el), disabled: this.noObjects, onChange: this.exportAllChangedHandler })))), h("div", { class: {
         "tree-container": true,
         "tree-container--empty": this.noObjects ||
@@ -231,6 +230,24 @@ export class GxIdeKbManagerExport {
   static get assetsDirs() { return ["gx-ide-assets/kb-manager-export"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "loader": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/kb-manager-import/gx-ide-assets/kb-manager-import/langs/kb-manager-import.lang.en.json

@@ -23,11 +23,8 @@
       "importedButHidden": "There are imported files, but all are hidden. Try by activating errors, warnings or success."
     }
   },
-  "footer": {
-    "selectDeselectAll": "Select All | Deselect All",
-    "errorsButton": "Errors",
-    "warningsButton": "Warnings",
-    "successButton": "Success",
-    "clearStatusButton": "Clear Status"
+  "loader": {
+    "title": "Importing Objects...",
+    "cancelLabel": "Cancel Import"
   }
 }

package/dist/collection/components/kb-manager-import/kb-manager-import.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,6 +172,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
 }