@genexus/genexus-ide-ui 0.0.59 → 0.0.61

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

@@ -0,0 +1,233 @@
+/*Gemini*/
+/*Gx Ide*/
+/* Helper Classes */
+.gxi-hidden {
+  display: none !important;
+}
+
+.gxi-full-height {
+  height: 100%;
+}
+
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
+.align-start {
+  display: flex;
+  align-items: start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+/* Grids */
+.grid {
+  display: grid;
+  grid-row-gap: var(--gx-ide-grid-row-gap);
+  grid-column-gap: var(--gx-ide-grid-column-gap);
+  grid-template-rows: auto;
+}
+
+ch-grid-cell {
+  display: flex;
+}
+
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 99;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  box-shadow: var(--box-shadow-01) !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+  line-height: 1.6em;
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-main::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-main::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-main .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+.gx-ide-overflow {
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-overflow::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-overflow::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-overflow .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+/*Gemini*/
+/*Gx Ide*/
+:host {
+  display: block;
+}
+
+/*Header*/
+.header {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gx-ide-grid-column-gap);
+}
+.header .select-file {
+  flex: 1;
+}
+
+/*Main*/
+.main {
+  min-height: 250px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.main .left-grid-item {
+  border-right: 1px solid var(--gx-ide-container-border-color);
+}
+.main .tree-container {
+  height: 100%;
+  max-height: 300px;
+  display: flex;
+  /*import status display/hide status (warning, error, success)*/
+}
+.main .tree-container--empty {
+  align-items: center;
+  justify-content: center;
+}
+.main .tree-container--import-status .tree-view-item--success::part(action) {
+  grid-template: "first-img left-img text right-img"/max-content max-content 1fr max-content;
+}
+.main .tree-container--import-status .tree-view-item--success::part(action)::before {
+  grid-area: first-img;
+  content: "";
+  width: var(--spacing-comp-02);
+  height: var(--spacing-comp-02);
+  border-radius: 50%;
+  background-color: var(--gray-03);
+  background-color: var(--color-success-dark);
+}
+.main .tree-container--import-status .tree-view-item--warning::part(action) {
+  grid-template: "first-img left-img text right-img"/max-content max-content 1fr max-content;
+}
+.main .tree-container--import-status .tree-view-item--warning::part(action)::before {
+  grid-area: first-img;
+  content: "";
+  width: var(--spacing-comp-02);
+  height: var(--spacing-comp-02);
+  border-radius: 50%;
+  background-color: var(--gray-03);
+  background-color: var(--color-warning-dark);
+}
+.main .tree-container--import-status .tree-view-item--error::part(action) {
+  grid-template: "first-img left-img text right-img"/max-content max-content 1fr max-content;
+}
+.main .tree-container--import-status .tree-view-item--error::part(action)::before {
+  grid-area: first-img;
+  content: "";
+  width: var(--spacing-comp-02);
+  height: var(--spacing-comp-02);
+  border-radius: 50%;
+  background-color: var(--gray-03);
+  background-color: var(--color-error-dark);
+}
+.main .tree-container--no-warnings .tree-view-item--warning {
+  display: none;
+}
+.main .tree-container--no-errors .tree-view-item--error {
+  display: none;
+}
+.main .tree-container--no-successes .tree-view-item--success {
+  display: none;
+}
+
+.ghost-element {
+  display: block;
+  width: 0;
+  height: 24px;
+  /*this is the taller element on the "objects in file container footer (which is the button group, at the time of writing)"*/
+}

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"
+      }];
+  }
+}