@genexus/genexus-ide-ui 0.0.60 → 0.0.61

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

@@ -0,0 +1,415 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+import { config } from "../../common/config";
+import { convertImportCategoryToTreeView, addImportItemResultDataItem } from "./helpers";
+import { countTreeItems } from "../../common/helpers";
+export class GxIdeKbManagerImport {
+  constructor() {
+    this.renderedFirstTime = false;
+    /* 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;
+    // 9.LOCAL METHODS //
+    this.evaluateObjects = () => {
+      var _a;
+      this.noObjects = !!(((_a = this.objectsTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.objectsTreeState);
+    };
+    this.evaluateImport = () => {
+      var _a;
+      this.noImport = !!(((_a = this.importTreeState) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.importTreeState);
+    };
+    this.selectFileHandler = () => {
+      this.fileInputEl.openFile();
+    };
+    this.loadFileHandler = async () => {
+      if (this.loadCallback && this.selectedFile) {
+        this.importCategoryData = await this.loadCallback(this.selectedFile);
+        const importCategoryTreeData = convertImportCategoryToTreeView(this.importCategoryData);
+        this.objectsTreeState = importCategoryTreeData;
+        if (this.importCategoryData.length > 0) {
+          // clear input
+          this.selectedFile = null;
+        }
+      }
+    };
+    this.fileSelectedHandler = (fileEvent) => {
+      this.selectedFile = fileEvent.detail[0];
+    };
+    this.evaluateHeaderActiveButton = () => {
+      if (!this.selectedFile) {
+        this.headerButtonsGroup.activeButtonId = "select-file-btn";
+        this.fileInputEl.value = undefined;
+      }
+      else {
+        this.headerButtonsGroup.activeButtonId = "load-file-btn";
+      }
+    };
+    this.importObjectsHandler = async () => {
+      if (this.importCallback) {
+        this.importingObjects = true;
+        this.objectsButtonsGroup.activeButtonId = "cancel-import-btn";
+        const result = await this.importCallback(this.checkedObjectsIds);
+        if (result || result === false) {
+          this.importingObjects = false;
+          this.objectsButtonsGroup.activeButtonId = "import-btn";
+        }
+      }
+    };
+    this.objectsTreeCheckedItemsChangedHandler = (event) => {
+      const allItemsWithCheckbox = [...event.detail.values()];
+      const checkedItems = allItemsWithCheckbox.filter(node => node.item.checked);
+      // objects checked
+      const checkedObjects = checkedItems.filter(node => node.item.class === "object");
+      const checkedObjectsIds = [];
+      if (checkedObjects.length > 0) {
+        checkedObjects.forEach(objectChecked => {
+          checkedObjectsIds.push(objectChecked.item.id);
+        });
+      }
+      this.checkedObjectsIds = checkedObjectsIds;
+    };
+    this.cancelImportHandler = () => {
+      if (this.cancelCallback) {
+        this.cancelCallback();
+        // returns boolean
+      }
+    };
+    this.optionsHandler = () => {
+      if (this.optionsCallback) {
+        this.optionsCallback();
+        // returns boolean
+      }
+    };
+    this.clearStatusHandler = () => {
+      this.importTreeState = [];
+      this.statusInfo.error.number = 0;
+      this.statusInfo.warning.number = 0;
+      this.statusInfo.success.number = 0;
+    };
+    this.selectAllClickedHandler = () => {
+      const checked = this.checkAllCheckboxEl.checked;
+      if (checked && this.objectsTreeEl) {
+        console.log("check");
+        this.objectsTreeEl.updateAllItemsProperties({ checked: true });
+      }
+    };
+    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();
+    };
+    this.evaluateHiddenImportsMessage = () => {
+      /* to do*/
+    };
+    this.checkedObjectsIds = [];
+    this.noObjects = undefined;
+    this.showHiddenImportsMessage = false;
+    this.statusInfo = {
+      error: {
+        display: true,
+        number: 0
+      },
+      warning: {
+        display: true,
+        number: 0
+      },
+      success: {
+        display: true,
+        number: 0
+      }
+    };
+    this.objectsTreeState = [];
+    this.noImport = undefined;
+    this.importTreeState = [];
+    this.importingObjects = false;
+    this.selectedFile = undefined;
+    this.optionsCallback = undefined;
+    this.importCallback = undefined;
+    this.loadCallback = undefined;
+    this.cancelCallback = undefined;
+    this.statusMinimal = false;
+  }
+  watchObjectsTreeStateHandler(newState) {
+    this.noObjects = !!(newState.length === 0 || !newState);
+    this.objectsInFileTotalNodes = countTreeItems(newState);
+  }
+  watchImportTreeStateHandler(newState) {
+    this.noImport = !!(newState.length === 0 || !newState);
+  }
+  watchSelectedFileHandler() {
+    this.evaluateHeaderActiveButton();
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+    this.componentDidLoadEvent.emit(true);
+    this.evaluateObjects();
+    this.evaluateImport();
+  }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  /**
+   * Add the result of importing an item
+   */
+  async addResultItem(item) {
+    this.importTreeState = addImportItemResultDataItem(item, this.importCategoryData, this.importTreeState);
+    this.statusInfo[`${item.status}`].number += item.messages.length;
+  }
+  //  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 }, 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", {
+      // 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 }, h("div", { class: {
+        "tree-container": true,
+        "tree-container--objects-in-file": true,
+        "tree-container--empty": this.noObjects
+      } }, !this.noObjects ? (h("gxg-tree-view", { positionRelative: true, treeModel: this.objectsTreeState, toggleCheckboxes: true, onCheckedItemsChange: this.objectsTreeCheckedItemsChangedHandler, 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" }, "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.objectsTreeState.length > 0 &&
+        this.objectsInFileTotalNodes ===
+          this.checkedObjectsIds.length
+        ? this._componentLocale.main.objectsInFile.deselectAll
+        : this._componentLocale.main.objectsInFile.selectAll, part: "select-all-checkbox", slot: "footer-start", disabled: this.importingObjects || this.objectsTreeState.length === 0, ref: el => (this.checkAllCheckboxEl = el), onClick: this.selectAllClickedHandler }), 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, class: "right-grid-item" }, h("div", { class: {
+        "tree-container": true,
+        "tree-container--import-status": true,
+        "tree-container--empty": this.noImport,
+        "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", { positionRelative: true, 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" }, "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..." }))));
+  }
+  static get is() { return "gx-ide-kb-manager-import"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kb-manager-import.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kb-manager-import.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/kb-manager-import"]; }
+  static get properties() {
+    return {
+      "selectedFile": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "File",
+          "resolved": "File",
+          "references": {
+            "File": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the imported xml or xps file"
+        }
+      },
+      "optionsCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "OptionsCallback",
+          "resolved": "() => Promise<void>",
+          "references": {
+            "OptionsCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to access the export options."
+        }
+      },
+      "importCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ImportCallback",
+          "resolved": "(itemIds: string[]) => Promise<boolean>",
+          "references": {
+            "ImportCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to initiate the import process."
+        }
+      },
+      "loadCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "LoadCallback",
+          "resolved": "(file: File) => Promise<ImportCategoryData[]>",
+          "references": {
+            "LoadCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the user wants to load the xpz information"
+        }
+      },
+      "cancelCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CancelCallback",
+          "resolved": "() => Promise<boolean>",
+          "references": {
+            "CancelCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "returns",
+              "text": "It returns a boolean indicating whether the process could be canceled or not."
+            }],
+          "text": "Callback invoked when the user wants to cancel the export process."
+        }
+      },
+      "statusMinimal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It displays the status buttons (errors, warning, successes) with the minimal ui (no captions)"
+        },
+        "attribute": "status-minimal",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "checkedObjectsIds": {},
+      "noObjects": {},
+      "showHiddenImportsMessage": {},
+      "statusInfo": {},
+      "objectsTreeState": {},
+      "noImport": {},
+      "importTreeState": {},
+      "importingObjects": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emitted once just after the component is fully loaded and the first render() occurs"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "componentDidLoadEvent",
+        "name": "componentDidLoadEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emitted once just after the component is fully loaded and the first render() occurs."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "addResultItem": {
+        "complexType": {
+          "signature": "(item: ImportItemResultData) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ImportItemResultData": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Add the result of importing an item",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "objectsTreeState",
+        "methodName": "watchObjectsTreeStateHandler"
+      }, {
+        "propName": "importTreeState",
+        "methodName": "watchImportTreeStateHandler"
+      }, {
+        "propName": "selectedFile",
+        "methodName": "watchSelectedFileHandler"
+      }];
+  }
+}

package/dist/collection/components/list-selector/list-selector-item/list-selector-item.css

@@ -10,20 +10,33 @@ gx-ide-list-selector-item {
   display: block;
   max-width: 100%;
   display: flex;
+  font-size: inherit;
+}
+gx-ide-list-selector-item:hover .label {
+  background-color: var(--gxg-background-color--hover);
+  cursor: pointer;
+}
+gx-ide-list-selector-item:hover input:checked + .label {
+  background-color: var(--gxg-background-color--selected-hover);
 }
 
-gx-ide-list-selector-item:not(:last-child) {
-  border-block-end: 1px solid var(--gx-ide-container-border-color);
+gx-ide-list-selector-item:not(:first-child) {
+  border-block-start: 1px solid var(--gx-ide-container-border-color);
 }
 
-/*selectable*/
-gx-ide-list-selector-item[selectable]:not([selectable=false]):hover label {
-  cursor: pointer;
-  background-color: var(--gxg-background-color-item-hover);
+/*change border color if checked*/
+gx-ide-list-selector-item:not(:first-child):has(input:checked) {
+  border-block-color: var(--gxg-border-color--selected);
+}
+
+/*readonly*/
+gx-ide-list-selector-item[readonly]:not([readonly=false]) .label {
+  pointer-events: none;
+  background-color: transparent;
 }
 
 /*ellipsis*/
-gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) label {
+gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) .label__description {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -35,17 +48,41 @@ input {
   opacity: 0;
   margin: 0;
 }
-input:focus + label {
+input:focus + .label {
   outline: var(--border-width-md) solid var(--color-primary-active);
   outline-offset: -2px;
 }
-input:checked + label {
-  background-color: var(--gxg-background-color-item-selected);
+input:checked + .label {
+  background-color: var(--gxg-background-color--selected);
 }
 
-label {
-  flex-shrink: 0;
-  display: block;
-  padding: var(--spacing-comp-01);
+/*label-wrapper*/
+.label {
   width: 100%;
+}
+
+/*label*/
+.label__wrapper {
+  display: flex;
+  min-height: 28px;
+  /*this prevents height difference between items that have icons and items that do not*/
+  align-items: center;
+  gap: var(--spacing-comp-02);
+  padding: var(--spacing-comp-01) var(--spacing-comp-02);
+  width: 100%;
+}
+.label__wrapper__description {
+  flex: 1;
+}
+
+/*no border*/
+gx-ide-list-selector-item[no-border] {
+  border-block-start: none;
+}
+
+/*universal slot*/
+.label__universal-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }