@genexus/genexus-ide-ui 0.0.64 → 0.0.65

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

@@ -209,6 +209,7 @@ gxg-tabs {
   height: var(--spacing-comp-02);
   border-radius: 50%;
   background-color: var(--gray-03);
+  margin-inline-end: var(--spacing-comp-01);
   background-color: var(--color-success-dark);
 }
 .main .tree-container--import-status .tree-view-item--warning::part(action) {
@@ -221,6 +222,7 @@ gxg-tabs {
   height: var(--spacing-comp-02);
   border-radius: 50%;
   background-color: var(--gray-03);
+  margin-inline-end: var(--spacing-comp-01);
   background-color: var(--color-warning-dark);
 }
 .main .tree-container--import-status .tree-view-item--error::part(action) {
@@ -233,6 +235,7 @@ gxg-tabs {
   height: var(--spacing-comp-02);
   border-radius: 50%;
   background-color: var(--gray-03);
+  margin-inline-end: var(--spacing-comp-01);
   background-color: var(--color-error-dark);
 }
 .main .tree-container--no-warnings .tree-view-item--warning {

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

@@ -4,6 +4,7 @@ import { Host, h } from "@stencil/core";
 import { Locale } from "../../common/locale";
 import { config } from "../../common/config";
 import { convertImportCategoryToTreeView, addImportItemResultDataItem } from "./helpers";
+// import { CheckboxInfo } from "@genexus/gemini/dist/types/components/form-checkbox/form-checkbox";
 import { countTreeItems } from "../../common/helpers";
 import { KB_OBJECT } from "./helpers";
 export class GxIdeKbManagerImport {
@@ -13,6 +14,34 @@ export class GxIdeKbManagerImport {
     this.importCategoryData = [];
     this.objectsInFileTotalNodes = 0;
     // 9.LOCAL METHODS //
+    this.evaluateImportStatusMessage = () => {
+      this.someStatusVisible =
+        this.statusInfo.error.display ||
+          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);
@@ -41,7 +70,7 @@ export class GxIdeKbManagerImport {
     this.evaluateHeaderActiveButton = () => {
       if (!this.selectedFile) {
         this.headerButtonsGroup.activeButtonId = "select-file-btn";
-        this.fileInputEl.value = undefined;
+        this.fileInputEl.clearInput();
       }
       else {
         this.headerButtonsGroup.activeButtonId = "load-file-btn";
@@ -59,7 +88,7 @@ export class GxIdeKbManagerImport {
       }
     };
     this.objectsTreeCheckedItemsChangedHandler = (event) => {
-      /* Begin of evaluate 'select/unselect checkbox' state*/
+      /* 1. Begin of evaluate 'select/unselect checkbox' state*/
       if (event.detail == null) {
         this.toggleObjectsCheckboxEl.checked = false;
         this.toggleObjectsCheckboxEl.indeterminate = false;
@@ -76,19 +105,56 @@ export class GxIdeKbManagerImport {
       this.toggleObjectsCheckboxEl.checked = firstItemCheckedValue;
       this.toggleObjectsCheckboxEl.indeterminate =
         !allItemsHaveTheSameCheckedValue;
-      /* End of evaluate 'select/unselect checkbox' state*/
+      /* /End of evaluate 'select/unselect checkbox' state*/
+      /* 2. Begin of checked items evaluation*/
       const checkedItems = allItemsWithCheckbox.filter(node => node.item.checked);
       // objects checked
       const checkedObjects = checkedItems.filter(node => node.item.metadata === KB_OBJECT);
-      console.log("checkedObjects", checkedObjects);
       const checkedObjectsIds = [];
       if (checkedObjects.length > 0) {
         checkedObjects.forEach(objectChecked => {
           checkedObjectsIds.push(objectChecked.item.id);
         });
       }
+      /* /End of checked items evaluation*/
+      /* 3. Begin of caption update*/
+      /* TO DO (when we can differentiate the caption from the number of children)*/
+      // const categoryItems = allItemsWithCheckbox.filter(
+      //   node => node.item.metadata === KB_CATEGORY
+      // );
+      // categoryItems.forEach(category => {
+      //   const itemInfo = category.item;
+      //   // Update the amount of checked values
+      //   if (itemInfo.leaf !== true) {
+      //     const totalItems = itemInfo.items.length;
+      //     const totalItemsChecked = itemInfo.items.filter(
+      //       itemUIModel => itemUIModel.checked
+      //     ).length;
+      //     const newItemCaption =
+      //       totalItems !== totalItemsChecked
+      //         ? `${itemInfo.caption} (${totalItemsChecked}/${totalItems})`
+      //         : `${itemInfo.caption} (${totalItems})`;
+      //     // Only update the item caption if needed
+      //     if (newItemCaption !== itemInfo.caption) {
+      //       this.objectsTreeEl.updateItemsProperties([itemInfo.id], {
+      //         id: itemInfo.id,
+      //         caption: newItemCaption
+      //       });
+      //     }
+      //   }
+      // });
+      /* /End of caption update*/
       this.checkedObjectsIds = checkedObjectsIds;
     };
+    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.cancelImportHandler = () => {
       if (this.cancelCallback) {
         this.cancelCallback();
@@ -107,23 +173,31 @@ export class GxIdeKbManagerImport {
       this.statusInfo.warning.number = 0;
       this.statusInfo.success.number = 0;
     };
-    this.toggleSelectionHandler = (e) => {
-      const checked = e.detail.value;
+    this.toggleSelectionClickHandler = (e) => {
+      const checked = e.target.checked;
       this.toggleObjectsCheckboxEl.indeterminate = false;
       this.objectsTreeEl.updateAllItemsProperties({ checked: checked });
     };
     this.statusButtonsSelectionChangedHandler = (e) => {
       const activeStates = e.detail;
-      const newStatusInfo = Object.assign({}, this.statusInfo);
-      newStatusInfo.warning.display = false;
-      newStatusInfo.error.display = false;
-      newStatusInfo.success.display = false;
-      activeStates.forEach(activeState => {
-        const status = activeState.itemId;
-        newStatusInfo[status].display = true;
-        this.statusInfo = newStatusInfo;
-      });
-      this.evaluateHiddenImportsMessage();
+      const errorIndex = activeStates.findIndex(state => state.itemId === "error");
+      const warningIndex = activeStates.findIndex(state => state.itemId === "warning");
+      const successIndex = activeStates.findIndex(state => state.itemId === "success");
+      this.statusInfo = {
+        error: {
+          display: errorIndex !== -1,
+          number: this.statusInfo.error.number
+        },
+        warning: {
+          display: warningIndex !== -1,
+          number: this.statusInfo.warning.number
+        },
+        success: {
+          display: successIndex !== -1,
+          number: this.statusInfo.success.number
+        }
+      };
+      this.evaluateImportStatusMessage();
     };
     this.evaluateCheckAllValue = () => {
       let checked = true;
@@ -134,8 +208,8 @@ export class GxIdeKbManagerImport {
       }
       return checked;
     };
-    this.evaluateHiddenImportsMessage = () => {
-      /* to do*/
+    this.fileClearedHandler = () => {
+      this.selectedFile = null;
     };
     this.checkedObjectsIds = [];
     this.noObjects = undefined;
@@ -155,6 +229,8 @@ export class GxIdeKbManagerImport {
       }
     };
     this.objectsTreeState = [];
+    this.importStatusMessage = undefined;
+    this.someStatusVisible = undefined;
     this.noImport = undefined;
     this.importTreeState = [];
     this.importingObjects = false;
@@ -164,6 +240,7 @@ export class GxIdeKbManagerImport {
     this.loadCallback = undefined;
     this.cancelCallback = undefined;
     this.statusMinimal = false;
+    this.objectContextMenuCallback = undefined;
   }
   watchObjectsTreeStateHandler(newState) {
     this.noObjects = !!(newState.length === 0 || !newState);
@@ -171,6 +248,14 @@ export class GxIdeKbManagerImport {
   }
   watchImportTreeStateHandler(newState) {
     this.noImport = !!(newState.length === 0 || !newState);
+    if (this.noImport) {
+      this.importStatusMessage =
+        this._componentLocale.main.importStatus.noImportedFiles;
+    }
+    else {
+      this.importStatusMessage =
+        this._componentLocale.main.importStatus.importedButHidden;
+    }
   }
   watchSelectedFileHandler() {
     this.evaluateHeaderActiveButton();
@@ -181,6 +266,9 @@ export class GxIdeKbManagerImport {
     this.componentDidLoadEvent.emit(true);
     this.evaluateObjects();
     this.evaluateImport();
+    this.importStatusMessage =
+      this._componentLocale.main.importStatus.noImportedFiles;
+    this.evaluateImportStatusMessage();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -195,27 +283,27 @@ export class GxIdeKbManagerImport {
    */
   async addResultItem(item) {
     this.importTreeState = addImportItemResultDataItem(item, this.importCategoryData, this.importTreeState);
-    this.statusInfo[`${item.status}`].number += item.messages.length;
+    this.countMessages();
   }
   //  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, ref: (el) => (this.fileInputEl = el) }), h("gxg-button-group", {
+    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 }, this._componentLocale.header.selectFileButton), h("button", { id: "load-file-btn", part: "load-file-button", disabled: !this.selectedFile, 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: {
+    }, h("button", { id: "select-file-btn", part: "select-file-button", onClick: this.selectFileHandler, disabled: this.importingObjects }, this._componentLocale.header.selectFileButton), h("button", { id: "load-file-btn", part: "load-file-button", disabled: !this.selectedFile || this.importingObjects, 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: {
         "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, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, 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.importingObjects || this.objectsTreeState.length === 0, checked: this.evaluateCheckAllValue(), onChange: this.toggleSelectionHandler, ref: (el) => (this.toggleObjectsCheckboxEl =
+      } }, !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.importingObjects || 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.importingObjects ||
         this.checkedObjectsIds.length === 0, onClick: this.importObjectsHandler }, this._componentLocale.main.objectsInFile.importButton), h("button", { id: "cancel-import-btn", part: "cancel-import-button", disabled: !this.importingObjects, 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,
+        "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 === false
-      } }, !this.noImport ? (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" }, "There are no Imported files."))), h("gxg-text", { type: "button-like", slot: "footer-end", part: "select-kb-btn", onClick: this.clearStatusHandler, disabled: this.noImport }, 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..." }))));
+        "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.importingObjects }, 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..." }))));
   }
   static get is() { return "gx-ide-kb-manager-import"; }
   static get encapsulation() { return "shadow"; }
@@ -347,6 +435,25 @@ export class GxIdeKbManagerImport {
         "attribute": "status-minimal",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "objectContextMenuCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ObjectContextMenuCallback",
+          "resolved": "(objectContextMenu: ObjectContextMenuInfo) => Promise<void>",
+          "references": {
+            "ObjectContextMenuCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It displays the status buttons (errors, warning, successes) with the minimal ui (no captions)"
+        }
       }
     };
   }
@@ -357,6 +464,8 @@ export class GxIdeKbManagerImport {
       "showHiddenImportsMessage": {},
       "statusInfo": {},
       "objectsTreeState": {},
+      "importStatusMessage": {},
+      "someStatusVisible": {},
       "noImport": {},
       "importTreeState": {},
       "importingObjects": {}

package/dist/components/config.js

@@ -13,6 +13,10 @@ const config = {
   },
   gxIdeContainer: {
     slimmerFooter: true
+  },
+  loader: {
+    /* The amount of milliseconds the loader will display, before abort because of timeout*/
+    timeout: 4000
   }
 };
 

package/dist/components/form-text.js

@@ -222,6 +222,9 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.fileInputEl.click();
     }
   }
+  async clearInput() {
+    this.clearButtonFunc();
+  }
   componentWillLoad() {
     this.evaluateIcon();
     this.attachExportParts();
@@ -473,7 +476,8 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "mouseCoordinates": [32],
     "rtl": [32],
     "selectInputText": [64],
-    "openFile": [64]
+    "openFile": [64],
+    "clearInput": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/gx-ide-kb-manager-export.js

@@ -1,19 +1,22 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
 import { c as config } from './config.js';
-import { d as defineCustomElement$j } from './checkbox.js';
-import { d as defineCustomElement$i } from './icon.js';
-import { d as defineCustomElement$h } from './tree-view.js';
-import { d as defineCustomElement$g } from './tree-view-item.js';
-import { d as defineCustomElement$f } from './tree-view-render.js';
-import { d as defineCustomElement$e } from './container.js';
-import { d as defineCustomElement$d } from './directory-selector.js';
-import { d as defineCustomElement$c } from './title.js';
-import { d as defineCustomElement$b } from './button.js';
-import { d as defineCustomElement$a } from './button-group.js';
-import { d as defineCustomElement$9 } from './form-checkbox.js';
-import { d as defineCustomElement$8 } from './form-text.js';
-import { d as defineCustomElement$7 } from './icon2.js';
+import { d as defineCustomElement$m } from './checkbox.js';
+import { d as defineCustomElement$l } from './icon.js';
+import { d as defineCustomElement$k } from './tree-view.js';
+import { d as defineCustomElement$j } from './tree-view-item.js';
+import { d as defineCustomElement$i } from './tree-view-render.js';
+import { d as defineCustomElement$h } from './ch-window2.js';
+import { d as defineCustomElement$g } from './ch-window-close2.js';
+import { d as defineCustomElement$f } from './container.js';
+import { d as defineCustomElement$e } from './directory-selector.js';
+import { d as defineCustomElement$d } from './title.js';
+import { d as defineCustomElement$c } from './button.js';
+import { d as defineCustomElement$b } from './button-group.js';
+import { d as defineCustomElement$a } from './form-checkbox.js';
+import { d as defineCustomElement$9 } from './form-text.js';
+import { d as defineCustomElement$8 } from './icon2.js';
+import { d as defineCustomElement$7 } from './ide-loader.js';
 import { d as defineCustomElement$6 } from './gxg-label2.js';
 import { d as defineCustomElement$5 } from './text.js';
 import { d as defineCustomElement$4 } from './title2.js';
@@ -179,7 +182,6 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.__registerHost();
     this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
     this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-    this.checkedObjectsIds = [];
     this.checkedPropertiesIds = [];
     this.renderedFirstTime = false;
     this.flattenedObjectTypes = new Map();
@@ -256,6 +258,7 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     };
     this.exportCallbackHandler = async () => {
       if (this.exportCallback) {
+        this.exportingIsInProcess = true;
         const exportAllChecked = this.exportAllCheckboxEl.checked;
         const fileName = this.fileNameEl.value;
         const checkedKbPropertiesIds = this.addKbPropertiesIsChecked
@@ -264,7 +267,9 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
         const checkedObjectIds = exportAllChecked
           ? undefined
           : this.checkedObjectsIds;
-        this.exportCallback(fileName, checkedKbPropertiesIds, checkedObjectIds);
+        this.exportCallback(fileName, checkedKbPropertiesIds, checkedObjectIds).then(() => {
+          this.exportingIsInProcess = false;
+        });
         // returns Promise<boolean> but no procedure was detailed on the spec.
       }
     };
@@ -312,14 +317,23 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
         h("gxg-text", { type: "text-link-no-line", textAlign: "center", onClick: this.addObjectsCallbackHandler }, this._componentLocale.main.beginByADdingSomeObjects)
       ]) : (h("span", null, this._componentLocale.main.exportAllMessage))));
     };
+    this.clearButtonDisabledConditions = () => {
+      return this.noObjects || this.checkedObjectsIds.length === 0;
+    };
+    this.loaderCancelCallbackHandler = () => {
+      if (this.cancelCallback) {
+        this.cancelCallback();
+      }
+    };
     this.exportAllIsChecked = false;
-    this.exportingIsInProcess = false;
     this.addKbPropertiesIsChecked = false;
+    this.checkedObjectsIds = [];
     this.fileName = "";
     this.exportFilePathName = undefined;
     this.noObjects = undefined;
     this.treeModel = [];
-    this.dummyInitialTree = undefined;
+    this.exportingIsInProcess = false;
+    this.loader = false;
     this.kbPropertiesTypes = undefined;
     this.objectTypes = undefined;
     this.exportFileDirectoryCallback = undefined;
@@ -333,10 +347,15 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   watchTreeModelHandler(newState) {
     this.noObjects = !!(newState.length === 0 || !newState);
   }
-  watchDummyInitialTreeHandler(newTree) {
-    this.treeModel = newTree;
+  watchExportingIsInProcessHandler(isExporting) {
+    if (isExporting && this.loader) {
+      this.loaderEl.show = true;
+    }
+    else if (!isExporting && this.loader) {
+      this.loaderEl.show = true;
+    }
   }
-  watchObjectTypeslHandler(newState) {
+  watchObjectTypesHandler(newState) {
     this.flattenObjectTypes(newState);
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
@@ -359,9 +378,9 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   // 10.RENDER() FUNCTION //
   render() {
-    // console.log("checkedObjectsIds", this.checkedObjectsIds);
-    // console.log("checkedPropertiesIds", this.checkedPropertiesIds);
-    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", "default-selected-btn-id": "responsive-tablet-btn" }, 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.noObjects || this.exportingIsInProcess }, 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 =
+    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 =
         el), disabled: this.noObjects, onChange: this.exportAllChangedHandler })))), h("div", { class: {
         "tree-container": true,
         "tree-container--empty": this.noObjects ||
@@ -369,18 +388,18 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
             this.exportAllIsChecked &&
             !this.addKbPropertiesIsChecked)
         // "tree-container--export-all": this.exportAllIsChecked
-      } }, this.evaluateContentToDisplay()), h("gxg-text", { type: "button-like", part: "export-button", slot: "footer-start", onClick: this.clearButtonHandler }, this._componentLocale.footer.clearButton), h("div", { class: { "footer-right-wrapper": true }, slot: "footer-end" }, h("gxg-button", { onClick: this.addReferencesCallbackHandler, type: "outlined-text-icon", icon: "general/references", part: "export-button", class: { "cancel-btn": true }, disabled: this.exportAllIsChecked }, this._componentLocale.footer.referencesButton), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", part: "export-button", class: { "cancel-btn": true }, onClick: this.addObjectsCallbackHandler, disabled: this.exportAllIsChecked }, this._componentLocale.footer.addButton))))));
+      } }, this.evaluateContentToDisplay()), h("gxg-text", { type: "button-like", part: "export-button", slot: "footer-start", onClick: this.clearButtonHandler, disabled: this.clearButtonDisabledConditions() }, this._componentLocale.footer.clearButton), h("div", { class: { "footer-right-wrapper": true }, slot: "footer-end" }, h("gxg-button", { onClick: this.addReferencesCallbackHandler, type: "outlined-text-icon", icon: "general/references", part: "export-button", class: { "cancel-btn": true }, disabled: this.exportAllIsChecked }, this._componentLocale.footer.referencesButton), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", part: "export-button", class: { "cancel-btn": true }, onClick: this.addObjectsCallbackHandler, disabled: this.exportAllIsChecked }, this._componentLocale.footer.addButton)))), 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 assetsDirs() { return ["gx-ide-assets/kb-manager-export"]; }
   get el() { return this; }
   static get watchers() { return {
     "treeModel": ["watchTreeModelHandler"],
-    "dummyInitialTree": ["watchDummyInitialTreeHandler"],
-    "objectTypes": ["watchObjectTypeslHandler"]
+    "exportingIsInProcess": ["watchExportingIsInProcessHandler"],
+    "objectTypes": ["watchObjectTypesHandler"]
   }; }
   static get style() { return kbManagerExportCss; }
 }, [0, "gx-ide-kb-manager-export", {
-    "dummyInitialTree": [16],
+    "loader": [4],
     "kbPropertiesTypes": [16],
     "objectTypes": [16],
     "exportFileDirectoryCallback": [16],
@@ -391,18 +410,19 @@ const GxIdeKbManagerExport$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "exportCallback": [16],
     "cancelCallback": [16],
     "exportAllIsChecked": [32],
-    "exportingIsInProcess": [32],
     "addKbPropertiesIsChecked": [32],
+    "checkedObjectsIds": [32],
     "fileName": [32],
     "exportFilePathName": [32],
     "noObjects": [32],
-    "treeModel": [32]
+    "treeModel": [32],
+    "exportingIsInProcess": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-kb-manager-export", "ch-checkbox", "ch-icon", "ch-tree-view", "ch-tree-view-item", "ch-tree-view-render", "gx-ide-container", "gx-ide-directory-selector", "gx-ide-title", "gxg-button", "gxg-button-group", "gxg-form-checkbox", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree-view"];
+  const components = ["gx-ide-kb-manager-export", "ch-checkbox", "ch-icon", "ch-tree-view", "ch-tree-view-item", "ch-tree-view-render", "ch-window", "ch-window-close", "gx-ide-container", "gx-ide-directory-selector", "gx-ide-title", "gxg-button", "gxg-button-group", "gxg-form-checkbox", "gxg-form-text", "gxg-icon", "gxg-ide-loader", "gxg-label", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree-view"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-kb-manager-export":
       if (!customElements.get(tagName)) {
@@ -411,65 +431,80 @@ function defineCustomElement$1() {
       break;
     case "ch-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$m();
       }
       break;
     case "ch-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$l();
       }
       break;
     case "ch-tree-view":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$k();
       }
       break;
     case "ch-tree-view-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$j();
       }
       break;
     case "ch-tree-view-render":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$i();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
       }
       break;
     case "gx-ide-container":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "gx-ide-directory-selector":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "gx-ide-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "gxg-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "gxg-button-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "gxg-form-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "gxg-form-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-ide-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }