@genexus/genexus-ide-ui 0.0.66 → 0.0.68

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/file-selector/file-selector.css

@@ -322,6 +322,7 @@ FORM ELEMENTS
 }
 .gxg-scrollbar::-webkit-scrollbar {
   width: var(--gxg-scrollbar-width, 6px);
+  height: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
   background-color: var(--gxg-scrollbar-track-background, --gray-02);

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;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
 }
 
 ch-grid-cell {
@@ -164,6 +175,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

@@ -100,10 +100,12 @@ export class GxIdeKbManagerExport {
         // returns Promise<boolean> but no procedure was detailed on the spec.
       }
     };
-    this.cancelCallbackHandler = () => {
+    this.cancelCallbackHandler = async () => {
       if (this.cancelCallback) {
-        this.cancelCallback();
-        // returns Promise<boolean> but no procedure was detailed on the spec.
+        const cancelled = await this.cancelCallback();
+        if (cancelled) {
+          this.exportingIsInProcess = false;
+        }
       }
     };
     this.clearButtonHandler = () => {
@@ -147,19 +149,20 @@ export class GxIdeKbManagerExport {
     this.clearButtonDisabledConditions = () => {
       return this.noObjects || this.checkedObjectsIds.length === 0;
     };
-    this.loaderCancelCallbackHandler = () => {
-      if (this.cancelCallback) {
-        this.cancelCallback();
-      }
+    this.loaderCancelCallbackHandler = async () => {
+      this.cancelCallbackHandler();
+    };
+    this.onClickCancelCallbackHandler = async () => {
+      this.cancelCallbackHandler();
     };
     this.exportAllIsChecked = false;
     this.addKbPropertiesIsChecked = false;
     this.checkedObjectsIds = [];
-    this.fileName = "";
-    this.exportFilePathName = undefined;
     this.noObjects = undefined;
     this.treeModel = [];
     this.exportingIsInProcess = false;
+    this.displayTitle = false;
+    this.fileName = undefined;
     this.loader = false;
     this.kbPropertiesTypes = undefined;
     this.objectTypes = undefined;
@@ -205,7 +208,7 @@ export class GxIdeKbManagerExport {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    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("gxg-form-text", { class: { "select-file-input": true }, value: this.fileName, part: "xpz-file", label: this._componentLocale.header.exportFileName, ref: el => (this.fileNameEl = el), icon: "gemini-tools/file", iconPosition: "start" }), 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.onClickCancelCallbackHandler, 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 ||
@@ -229,6 +232,41 @@ 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"
+      },
+      "fileName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It allows defining the default Export File Name"
+        },
+        "attribute": "file-name",
+        "reflect": false
+      },
       "loader": {
         "type": "boolean",
         "mutable": false,
@@ -443,8 +481,6 @@ export class GxIdeKbManagerExport {
       "exportAllIsChecked": {},
       "addKbPropertiesIsChecked": {},
       "checkedObjectsIds": {},
-      "fileName": {},
-      "exportFilePathName": {},
       "noObjects": {},
       "treeModel": {},
       "exportingIsInProcess": {}

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

@@ -23,13 +23,6 @@
       "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;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
 }
 
 ch-grid-cell {
@@ -164,6 +175,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/kb-manager-import/kb-manager-import.js

@@ -13,6 +13,7 @@ export class GxIdeKbManagerImport {
     /* ImportCategoryBasicData Holds the original name of category data, and its id. Used to create parent nodes on the imported tree*/
     this.importCategoryData = [];
     this.objectsInFileTotalNodes = 0;
+    this.selectedObjectsInFileIds = [];
     // 9.LOCAL METHODS //
     this.evaluateImportStatusMessage = () => {
       this.someStatusVisible =
@@ -20,28 +21,6 @@ export class GxIdeKbManagerImport {
           this.statusInfo.warning.display ||
           this.statusInfo.success.display;
     };
-    this.countMessages = () => {
-      /* totally inefficient way to count. This has to be improved*/
-      let errors = 0;
-      let warnings = 0;
-      let successes = 0;
-      this.importTreeState.forEach(category => {
-        category.items.forEach(object => {
-          if (object.class.includes("tree-view-item--error")) {
-            errors += object.items.length;
-          }
-          else if (object.class.includes("tree-view-item--warning")) {
-            warnings += object.items.length;
-          }
-          else if (object.class.includes("tree-view-item--success")) {
-            successes += object.items.length;
-          }
-        });
-      });
-      this.statusInfo.error.number = errors;
-      this.statusInfo.warning.number = warnings;
-      this.statusInfo.success.number = successes;
-    };
     this.evaluateObjects = () => {
       var _a;
       this.noObjects = !!(((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.objectsTreeState);
@@ -50,7 +29,7 @@ export class GxIdeKbManagerImport {
       var _a;
       this.noImport = !!(((_a = this.importTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.importTreeState);
     };
-    this.selectFileHandler = () => {
+    this.selectFileAndLoadHandler = () => {
       this.fileInputEl.openFile();
     };
     this.loadFileHandler = async () => {
@@ -67,17 +46,11 @@ export class GxIdeKbManagerImport {
     this.fileSelectedHandler = (fileEvent) => {
       this.selectedFile = fileEvent.detail[0];
     };
-    this.evaluateHeaderActiveButton = () => {
-      if (!this.selectedFile) {
-        this.headerButtonsGroup.activeButtonId = "select-file-btn";
-        this.fileInputEl.clearInput();
-      }
-      else {
-        this.headerButtonsGroup.activeButtonId = "load-file-btn";
-      }
-    };
     this.importObjectsHandler = async () => {
       if (this.importCallback) {
+        /* first clear imported objects (this clears errors/warnings/success counts as well)*/
+        this.clearStatusHandler();
+        /* then do the import*/
         this.importingIsInProcess = true;
         this.objectsButtonsGroup.activeButtonId = "cancel-import-btn";
         this.importCallback(this.checkedObjectsIds).then(() => {
@@ -144,12 +117,18 @@ export class GxIdeKbManagerImport {
       /* /End of caption update*/
       this.checkedObjectsIds = checkedObjectsIds;
     };
+    this.objectsTreeSelectedItemsChangedHandler = (e) => {
+      this.selectedObjectsInFileIds = [];
+      e.detail.forEach(object => {
+        this.selectedObjectsInFileIds.push(object.id);
+      });
+    };
     this.objectsTreeContextMenuHandler = (event) => {
       if (this.objectContextMenuCallback && event.detail.metadata === KB_OBJECT) {
-        this.objectContextMenuCallback({
-          objectId: event.detail.id,
-          screenX: event.detail.contextmenuEvent.screenX,
-          screenY: event.detail.contextmenuEvent.screenY
+        this.objectContextMenuCallback("imported", {
+          selection: this.selectedObjectsInFileIds,
+          clientX: event.detail.contextmenuEvent.screenX,
+          clientY: event.detail.contextmenuEvent.screenY
         });
       }
     };
@@ -237,7 +216,8 @@ export class GxIdeKbManagerImport {
     this.noImport = undefined;
     this.importTreeState = [];
     this.importingIsInProcess = false;
-    this.loader = false;
+    this.displayTitle = false;
+    this.loader = true;
     this.selectedFile = undefined;
     this.optionsCallback = undefined;
     this.importCallback = undefined;
@@ -250,8 +230,8 @@ export class GxIdeKbManagerImport {
     this.noObjects = !!(newState.length === 0 || !newState);
     this.objectsInFileTotalNodes = countTreeItems(newState);
   }
-  watchImportTreeStateHandler(newState) {
-    this.noImport = !!(newState.length === 0 || !newState);
+  watchImportTreeStateHandler() {
+    this.evaluateImport();
     if (this.noImport) {
       this.importStatusMessage =
         this._componentLocale.main.importStatus.noImportedFiles;
@@ -269,8 +249,10 @@ export class GxIdeKbManagerImport {
       this.loaderEl.show = false;
     }
   }
-  watchSelectedFileHandler() {
-    this.evaluateHeaderActiveButton();
+  watchSelectedFileHandler(file) {
+    if (file && file.name && file.size > 0) {
+      this.loadFileHandler();
+    }
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
@@ -295,28 +277,26 @@ export class GxIdeKbManagerImport {
    */
   async addResultItem(item) {
     this.importTreeState = addImportItemResultDataItem(item, this.importCategoryData, this.importTreeState);
-    this.countMessages();
+    this.statusInfo[item.status].number++;
   }
   //  10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noFooterPadding: true, containerTitle: this._componentLocale.componentName }, h("header", { class: "header", slot: "header" }, h("gxg-form-text", { type: "file", class: "select-file", label: this._componentLocale.header.fileNameLabel, placeholder: this._componentLocale.header.fileNamePlaceholder, part: "file-name", acceptFile: ".xpz, .xml", clearButton: true, iconPosition: "start", onFileSelected: this.fileSelectedHandler, onClearButtonClicked: this.fileClearedHandler, ref: (el) => (this.fileInputEl = el) }), h("gxg-button-group", {
-      // default-selected-btn-id="select-file-btn"
-      ref: (el) => (this.headerButtonsGroup = el)
-    }, h("button", { id: "select-file-btn", part: "select-file-button", onClick: this.selectFileHandler, disabled: this.importingIsInProcess }, this._componentLocale.header.selectFileButton), h("button", { id: "load-file-btn", part: "load-file-button", disabled: !this.selectedFile || this.importingIsInProcess, onClick: this.loadFileHandler }, this._componentLocale.header.loadButton))), h("main", { class: "main" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.objectsInFile.title, noContentPadding: true, noBorderFooter: true, class: "left-grid-item", slimmerFooter: true, inactiveTitle: this.noObjects, footerSubtleShadow: !this.noObjects, titleType: "secondary" }, h("div", { class: {
+    var _a;
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noFooterPadding: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("header", { class: "header", slot: "header" }, h("gxg-form-text", { type: "file", class: "select-file", label: this._componentLocale.header.fileNameLabel, placeholder: this._componentLocale.header.fileNamePlaceholder, part: "file-name", acceptFile: ".xpz, .xml", clearButton: true, iconPosition: "start", onFileSelected: this.fileSelectedHandler, onClearButtonClicked: this.fileClearedHandler, ref: (el) => (this.fileInputEl = el) }), h("gxg-button", { type: "primary-text-icon", icon: "gemini-tools/file", part: "select-file-load-button", onClick: this.selectFileAndLoadHandler, disabled: this.importingIsInProcess }, this._componentLocale.header.selectFileButton)), h("main", { class: "main" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.objectsInFile.title, noContentPadding: true, noBorderFooter: true, class: "left-grid-item", slimmerFooter: true, inactiveTitle: this.noObjects, footerSubtleShadow: !this.noObjects, titleType: "secondary" }, h("div", { class: {
         "tree-container": true,
         "tree-container--objects-in-file": true,
         "tree-container--empty": this.noObjects
-      } }, !this.noObjects ? (h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, onItemContextmenu: this.objectsTreeContextMenuHandler, ref: el => (this.objectsTreeEl = el) })) : (h("div", { class: "gx-ide-message" }, h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message" }, "There are no Objects. ", h("br", null), h("gxg-text", { type: "text-link-no-line", onClick: this.selectFileHandler }, "Begin by selecting a file."))))), h("gxg-form-checkbox", { label: this._componentLocale.main.objectsInFile.selectUnselect, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingIsInProcess ||
+      } }, !this.noObjects ? (h("gxg-tree-view", { treeModel: this.objectsTreeState, dragDisabled: true, dropDisabled: true, toggleCheckboxes: true, checkbox: true, checked: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, onSelectedItemsChange: this.objectsTreeSelectedItemsChangedHandler, onItemContextmenu: this.objectsTreeContextMenuHandler, ref: el => (this.objectsTreeEl = el) })) : (h("div", { class: "gx-ide-message" }, h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message" }, "There are no Objects. ", h("br", null), h("gxg-text", { type: "text-link-no-line", onClick: this.selectFileAndLoadHandler }, "Begin by selecting a file."))))), h("gxg-form-checkbox", { label: this._componentLocale.main.objectsInFile.selectUnselect, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingIsInProcess ||
         this.objectsTreeState.length === 0, checked: this.evaluateCheckAllValue(), onClick: this.toggleSelectionClickHandler, ref: (el) => (this.toggleObjectsCheckboxEl =
-        el) }), h("gxg-button-group", { slot: "footer-end", ref: (el) => (this.objectsButtonsGroup = el) }, h("button", { id: "import-btn", part: "import-button", disabled: this.importingIsInProcess ||
-        this.checkedObjectsIds.length === 0, onClick: this.importObjectsHandler }, this._componentLocale.main.objectsInFile.importButton), h("button", { id: "cancel-import-btn", part: "cancel-import-button", disabled: !this.importingIsInProcess, onClick: this.cancelImportHandler }, this._componentLocale.main.objectsInFile.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", slot: "footer-end", part: "select-kb-btn", onClick: this.optionsHandler }, this._componentLocale.header.optionsButton)), h("gx-ide-container", { containerTitle: this._componentLocale.main.importStatus.title, noContentPadding: true, noBorderFooter: true, slimmerFooter: true, inactiveTitle: this.noImport, footerSubtleShadow: !this.noImport, titleType: "secondary" }, h("div", { class: {
+        el) }), h("gxg-button-group", { slot: "footer-end", ref: (el) => (this.objectsButtonsGroup = el) }, h("button", { id: "import-btn", part: "import-button", disabled: ((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 ||
+        this.importingIsInProcess, onClick: this.importObjectsHandler }, this._componentLocale.main.objectsInFile.importButton), h("button", { id: "cancel-import-btn", part: "cancel-import-button", disabled: !this.importingIsInProcess, onClick: this.cancelImportHandler }, this._componentLocale.main.objectsInFile.cancelButton)), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/settings", slot: "footer-end", part: "select-kb-btn", onClick: this.optionsHandler }, this._componentLocale.header.optionsButton)), h("gx-ide-container", { containerTitle: this._componentLocale.main.importStatus.title, noContentPadding: true, noBorderFooter: true, slimmerFooter: true, inactiveTitle: this.noImport, footerSubtleShadow: !this.noImport, titleType: "secondary" }, h("div", { class: {
         "tree-container": true,
         "tree-container--import-status": true,
         "tree-container--empty": this.noImport || !this.someStatusVisible,
         "tree-container--no-warnings": !this.statusInfo.warning.display,
         "tree-container--no-errors": !this.statusInfo.error.display,
-        "tree-container--no-successes": !this.statusInfo.success.display
-      } }, !this.noImport && this.someStatusVisible ? (h("gxg-tree-view", { treeModel: this.importTreeState, toggleCheckboxes: true, ref: el => (this.objectsTreeEl = el) })) : (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message", class: "gx-ide-message" }, this.importStatusMessage))), h("gxg-text", { type: "button-like", slot: "footer-end", part: "select-kb-btn", onClick: this.clearStatusHandler, disabled: this.noImport || this.importingIsInProcess }, this._componentLocale.main.importStatus.clearButton), h("span", { class: "ghost-element", slot: "footer-start" }))), h("footer", { slot: "footer-start" }, h("gx-ide-status-buttons", { errors: this.statusInfo.error.number, warnings: this.statusInfo.warning.number, successes: this.statusInfo.success.number, compact: true, noBorderTop: true, noBorderBottom: true, noBorderStart: true, minimal: this.statusMinimal, onSelectionChanged: this.statusButtonsSelectionChangedHandler }))), h("gxg-ide-loader", { description: "Importing objects..." })), this.loader ? (h("gxg-ide-loader", { cancelLabel: this._componentLocale.loader.cancelLabel, container: this.el, loaderTitle: this._componentLocale.loader.title, ref: el => (this.loaderEl = el), cancelCallback: this.loaderCancelCallbackHandler })) : null));
+        "tree-container--no-succeeded": !this.statusInfo.success.display
+      } }, !this.noImport && this.someStatusVisible ? (h("gxg-tree-view", { treeModel: this.importTreeState, toggleCheckboxes: true, ref: el => (this.objectsTreeEl = el) })) : (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "objects-in-file-empty-status-message", class: "gx-ide-message" }, this.importStatusMessage))), h("gxg-text", { type: "button-like", slot: "footer-end", part: "select-kb-btn", onClick: this.clearStatusHandler, disabled: this.noImport || this.importingIsInProcess }, this._componentLocale.main.importStatus.clearButton), h("span", { class: "ghost-element", slot: "footer-start" }))), h("footer", { slot: "footer-start" }, h("gx-ide-status-buttons", { errors: this.statusInfo.error.number, warnings: this.statusInfo.warning.number, succeeded: this.statusInfo.success.number, compact: true, noBorderTop: true, noBorderBottom: true, noBorderStart: true, minimal: this.statusMinimal, onSelectionChanged: this.statusButtonsSelectionChangedHandler }))), h("gxg-ide-loader", { description: "Importing objects..." })), this.loader ? (h("gxg-ide-loader", { cancelLabel: this._componentLocale.loader.cancelLabel, container: this.el, loaderTitle: this._componentLocale.loader.title, ref: el => (this.loaderEl = el), cancelCallback: this.loaderCancelCallbackHandler })) : null));
   }
   static get is() { return "gx-ide-kb-manager-import"; }
   static get encapsulation() { return "shadow"; }
@@ -333,7 +313,7 @@ export class GxIdeKbManagerImport {
   static get assetsDirs() { return ["gx-ide-assets/kb-manager-import"]; }
   static get properties() {
     return {
-      "loader": {
+      "displayTitle": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -343,13 +323,31 @@ export class GxIdeKbManagerImport {
         },
         "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,
+        "complexType": {
+          "original": "true",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "If true, it will display a loader when needed."
         },
         "attribute": "loader",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "true"
       },
       "selectedFile": {
         "type": "unknown",
@@ -461,7 +459,7 @@ export class GxIdeKbManagerImport {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "It displays the status buttons (errors, warning, successes) with the minimal ui (no captions)"
+          "text": "It displays the status buttons (errors, warning, succeeded) with the minimal ui (no captions)"
         },
         "attribute": "status-minimal",
         "reflect": false,
@@ -472,7 +470,7 @@ export class GxIdeKbManagerImport {
         "mutable": false,
         "complexType": {
           "original": "ObjectContextMenuCallback",
-          "resolved": "(objectContextMenu: ObjectContextMenuInfo) => Promise<void>",
+          "resolved": "(tree: ObjectsSourceType, contextMenuInfo: ContextMenuInfo) => Promise<void>",
           "references": {
             "ObjectContextMenuCallback": {
               "location": "local"
@@ -483,7 +481,7 @@ export class GxIdeKbManagerImport {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "It displays the status buttons (errors, warning, successes) with the minimal ui (no captions)"
+          "text": "It displays the status buttons (errors, warning, succeeded) with the minimal ui (no captions)"
         }
       }
     };

package/dist/collection/components/new-environment/gx-ide-assets/new-environment/langs/new-environment.lang.en.json

@@ -2,7 +2,6 @@
   "componentName": "New Environment",
   "name": "Environment Name",
   "location": "Location",
-  "setCurrentEnvironment": "Set as current environment",
   "runtime": "Runtime Environment",
   "tabBasic": {
     "tabLabel": "BASIC",
@@ -20,6 +19,7 @@
     "tabLabel": "ADVANCED"
   },
   "footer": {
+    "setAsCurrentEnvironment": "Set as current environment",
     "btnSetNewEnvironment": "Set New Environment",
     "btnCancel": "Cancel"
   }

package/dist/collection/components/new-environment/new-environment.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;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
 }
 
 ch-grid-cell {
@@ -164,6 +175,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);
@@ -194,6 +209,13 @@ gxg-tabs {
   box-shadow: none;
 }
 
+.tab__basic__single-runtime {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-comp-01);
+}
+
 /*Main > Gxg-Tabs > Basic*/
 .basic-main {
   display: flex;