@genexus/genexus-ide-ui 0.0.139 → 0.0.141

package/dist/collection/components/bpm/import-files/gx-ide-assets/bpm-import-files/langs/bpm-import-files.lang.en.json

@@ -0,0 +1,18 @@
+{
+  "componentName": "BPM Import Files",
+  "header": {},
+  "main": {
+    "listLabel": "Path List",
+    "addFilesButton": "Add Files",
+    "removeFilesButton": "Remove",
+    "automaticBackupLabel": "Automatic backup"
+  },
+  "footer": {
+    "confirmButton": "OK",
+    "cancelButton": "Cancel"
+  },
+  "loader": {
+    "title": "Loading...",
+    "cancelLabel": "Cancel"
+  }
+}

package/dist/collection/components/bpm/import-files/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../../src/components/bpm/import-files/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAc,EAAE;IAC3E,MAAM,SAAS,GAAe,EAAE,CAAC;IACjC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACnB,MAAM,MAAM,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3D,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9D,MAAM,QAAQ,GAAW,SAAS,CAAC;QACnC,MAAM,WAAW,GAAY,KAAK,CAAC;QACnC,SAAS,CAAC,IAAI,CAAC;YACb,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,QAAQ;YAClB,WAAW,EAAE,WAAW;SACzB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import { ItemData } from \"../../_helpers/list-selector/list-selector-item/list-selector-item\";\n\nexport const filesToListItemsData = (files: string[] | File[]): ItemData[] => {\n  const itemsData: ItemData[] = [];\n  files.forEach(file => {\n    const itemId = typeof file === \"string\" ? file : file.name;\n    const itemValue = typeof file === \"string\" ? file : file.name;\n    const itemIcon: string = undefined;\n    const itemChecked: boolean = false;\n    itemsData.push({\n      itemId: itemId,\n      itemValue: itemValue,\n      itemIcon: itemIcon,\n      itemChecked: itemChecked\n    });\n  });\n  return itemsData;\n};\n"]}

package/dist/collection/components/bpm/{files-selector/files-selector.css → import-files/import-files.css}

@@ -554,6 +554,33 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   display: block;
 }
 
+.main {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  height: 100%;
+  gap: var(--gx-ide-form-items-gap);
+}
+
+.path-list {
+  width: 100%;
+  height: 100%;
+}
+
+gx-ide-list-selector::part(list) {
+  height: 100%;
+}
+
 .hidden-input {
   display: none;
+}
+
+.checkbox-container {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gx-ide-form-items-gap);
 }

package/dist/collection/components/bpm/{files-selector/files-selector.js → import-files/import-files.js}

@@ -21,26 +21,28 @@ export class GxIdeTemplate {
         this.loadFileHandle = async () => {
             this.fileInput.click();
         };
-        this.handleFileInputChange = async (event) => {
+        this.handleFileInputChange = (event) => {
             const fileInput = event.target;
             if (fileInput.files && fileInput.files.length > 0) {
                 const newFiles = Array.from(fileInput.files);
                 const uniqueFiles = newFiles.filter(newFile => !this.files.some(existingFile => existingFile.name === newFile.name));
                 this.files = [...this.files, ...uniqueFiles];
             }
-            if (this.addCallback) {
-                await this.addCallback(this.files);
-            }
             this.fileInput.value = null;
         };
+        this.confirmCallbackHandle = async () => {
+            if (this.confirmCallback && this.files.length > 0) {
+                const data = {
+                    automaticBackup: this.automaticBackupEl.checked,
+                    files: this.files
+                };
+                await this.confirmCallback(data);
+            }
+        };
         this.removeFiles = (filesToRemove) => {
-            const removedFiles = this.files.filter(file => filesToRemove.includes(file.name));
             this.files = this.files.filter(file => !filesToRemove.includes(file.name));
-            if (this.removeCallback) {
-                this.removeCallback(removedFiles);
-                this.selectedFiles = [];
-                this.fileInput.value = null;
-            }
+            this.selectedFiles = [];
+            this.fileInput.value = null;
         };
         this.handleRemoveButtonClick = () => {
             this.removeFiles(this.selectedFiles);
@@ -49,8 +51,8 @@ export class GxIdeTemplate {
         this.selectedFiles = [];
         this.displayTitle = false;
         this.allowedExtensions = undefined;
-        this.addCallback = undefined;
-        this.removeCallback = undefined;
+        this.confirmCallback = undefined;
+        this.cancelCallback = undefined;
     }
     // 6.COMPONENT LIFECYCLE METHODS //
     async componentWillLoad() {
@@ -65,21 +67,21 @@ export class GxIdeTemplate {
     // 10.RENDER() FUNCTION //
     render() {
         var _a;
-        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("label", { htmlFor: "path-list" }, this._componentLocale.main.listLabel), h("gx-ide-list-selector", { id: "path-list", type: "multi-selection", listName: "path-list", noListBorder: true, ordered: true, onSelectionChanged: this.fileSelectionChangedHandler, class: "path-list" }, renderListItems(filesToListItemsData(this.files))), h("div", { class: "controls-wrapper" }, h("input", { type: "file", id: "input_file", accept: (_a = this.allowedExtensions) === null || _a === void 0 ? void 0 : _a.join(", "), ref: el => (this.fileInput = el), onChange: this.handleFileInputChange, class: "hidden-input", multiple: true }), h("button", { onClick: this.loadFileHandle }, this._componentLocale.main.addFilesButton), h("button", { onClick: this.handleRemoveButtonClick, disabled: this.selectedFiles.length === 0 }, this._componentLocale.main.removeFilesButton, " (", this.selectedFiles.length, ")"))))));
+        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "main" }, h("div", { class: "controls-wrapper controls-wrapper--vertical" }, h("label", { htmlFor: "path-list" }, this._componentLocale.main.listLabel), h("gx-ide-list-selector", { id: "path-list", type: "multi-selection", listName: "path-list", ordered: true, onSelectionChanged: this.fileSelectionChangedHandler, class: "path-list" }, renderListItems(filesToListItemsData(this.files)))), h("div", { class: "footer" }, h("div", { class: "checkbox-container" }, h("ch-checkbox", { id: "automatic-backup", accessibleName: this._componentLocale.main.automaticBackupLabel, checkedValue: "true", unCheckedValue: "false", value: "checked", ref: el => (this.automaticBackupEl = el) }), h("label", { htmlFor: "automatic-backup" }, this._componentLocale.main.automaticBackupLabel)), h("div", { class: "controls-wrapper" }, h("input", { type: "file", id: "input_file", accept: (_a = this.allowedExtensions) === null || _a === void 0 ? void 0 : _a.join(", "), ref: el => (this.fileInput = el), onChange: this.handleFileInputChange, class: "hidden-input", multiple: true }), h("button", { onClick: this.loadFileHandle }, this._componentLocale.main.addFilesButton), h("button", { onClick: this.handleRemoveButtonClick, disabled: this.selectedFiles.length === 0 }, this._componentLocale.main.removeFilesButton, " (", this.selectedFiles.length, ")")))), h("button", { slot: "footer-end", onClick: this.confirmCallbackHandle }, this._componentLocale.footer.confirmButton), h("button", { slot: "footer-end", onClick: this.cancelCallback }, this._componentLocale.footer.cancelButton)))));
     }
-    static get is() { return "gx-ide-bpm-files-selector"; }
+    static get is() { return "gx-ide-bpm-import-files"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["files-selector.scss"]
+            "$": ["import-files.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["files-selector.css"]
+            "$": ["import-files.css"]
         };
     }
-    static get assetsDirs() { return ["gx-ide-assets/bpm-files-selector"]; }
+    static get assetsDirs() { return ["gx-ide-assets/bpm-import-files"]; }
     static get properties() {
         return {
             "displayTitle": {
@@ -115,16 +117,17 @@ export class GxIdeTemplate {
                     "text": "Allowed extensions when 'Add files' button is pressed"
                 }
             },
-            "addCallback": {
+            "confirmCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(files: File[]) => Promise<void>",
-                    "resolved": "(files: File[]) => Promise<void>",
+                    "original": "(data: ImportData) => Promise<boolean>",
+                    "resolved": "(data: ImportData) => Promise<boolean>",
                     "references": {
-                        "File": {
-                            "location": "global",
-                            "id": "global::File"
+                        "ImportData": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/import-files/import-files.tsx",
+                            "id": "src/components/bpm/import-files/import-files.tsx::ImportData"
                         },
                         "Promise": {
                             "location": "global",
@@ -136,20 +139,16 @@ export class GxIdeTemplate {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when user press 'Add files' button. Returns a list with selected files."
+                    "text": "Callback invoked when user press 'OK' button"
                 }
             },
-            "removeCallback": {
+            "cancelCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(files: File[] | string[]) => Promise<void>",
-                    "resolved": "(files: string[] | File[]) => Promise<void>",
+                    "original": "() => Promise<void>",
+                    "resolved": "() => Promise<void>",
                     "references": {
-                        "File": {
-                            "location": "global",
-                            "id": "global::File"
-                        },
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
@@ -160,7 +159,7 @@ export class GxIdeTemplate {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when remove button is pressed."
+                    "text": "Callback invoked when user press 'Cancel' button."
                 }
             }
         };
@@ -212,4 +211,4 @@ export class GxIdeTemplate {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=files-selector.js.map
+//# sourceMappingURL=import-files.js.map

package/dist/collection/components/bpm/import-files/import-files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"import-files.js","sourceRoot":"","sources":["../../../../src/components/bpm/import-files/import-files.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { CheckedItemsInfo } from \"../../_helpers/list-selector/list-selector\";\n/* CUSTOM IMPORTS */\nimport { config } from \"../../../common/config\";\nimport { Locale } from \"../../../common/locale\";\nimport { renderListItems } from \"../../../common/render-list-item\";\nimport { filesToListItemsData } from \"./helpers\";\n\n@Component({\n  tag: \"gx-ide-bpm-import-files\",\n  styleUrl: \"import-files.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/bpm-import-files\"]\n})\nexport class GxIdeTemplate {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeBpmImportFilesElement;\n\n  private fileInput: HTMLInputElement;\n  private automaticBackupEl: HTMLChCheckboxElement;\n\n  // 3.STATE() VARIABLES //\n  /**\n   * Contains the list of files\n   */\n  @State() files: File[] = [];\n\n  /**\n   * Contains the list of selected files\n   */\n  @State() selectedFiles: string[] = [];\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Allowed extensions when 'Add files' button is pressed\n   */\n  @Prop() readonly allowedExtensions: string[];\n\n  /**\n   * Callback invoked when user press 'OK' button\n   */\n  @Prop() readonly confirmCallback: (data: ImportData) => Promise<boolean>;\n\n  /**\n   * Callback invoked when user press 'Cancel' button.\n   */\n  @Prop() readonly cancelCallback: () => Promise<void>;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  /**\n   * @description Gets fired when something changes on items section.\n   */\n  @Event() selectionChanged: EventEmitter<void>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private fileSelectionChangedHandler = (\n    selectedItem: CustomEvent<CheckedItemsInfo>\n  ) => {\n    this.selectionChanged.emit();\n\n    const selectedFiles = Array.isArray(selectedItem.detail)\n      ? selectedItem.detail\n      : [selectedItem.detail];\n\n    this.selectedFiles = selectedFiles.map(item => item.itemValue);\n  };\n\n  private loadFileHandle = async () => {\n    this.fileInput.click();\n  };\n\n  private handleFileInputChange = (event: Event) => {\n    const fileInput = event.target as HTMLInputElement;\n\n    if (fileInput.files && fileInput.files.length > 0) {\n      const newFiles: File[] = Array.from(fileInput.files);\n      const uniqueFiles = newFiles.filter(\n        newFile =>\n          !this.files.some(existingFile => existingFile.name === newFile.name)\n      );\n      this.files = [...this.files, ...uniqueFiles];\n    }\n\n    this.fileInput.value = null;\n  };\n\n  private confirmCallbackHandle = async () => {\n    if (this.confirmCallback && this.files.length > 0) {\n      const data: ImportData = {\n        automaticBackup: this.automaticBackupEl.checked,\n        files: this.files\n      };\n\n      await this.confirmCallback(data);\n    }\n  };\n\n  private removeFiles = (filesToRemove: string[]) => {\n    this.files = this.files.filter(file => !filesToRemove.includes(file.name));\n\n    this.selectedFiles = [];\n    this.fileInput.value = null;\n  };\n\n  private handleRemoveButtonClick = () => {\n    this.removeFiles(this.selectedFiles);\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n          >\n            <div class=\"main\">\n              {/* path list*/}\n              <div class=\"controls-wrapper controls-wrapper--vertical\">\n                <label htmlFor=\"path-list\">\n                  {this._componentLocale.main.listLabel}\n                </label>\n                <gx-ide-list-selector\n                  id=\"path-list\"\n                  type=\"multi-selection\"\n                  listName=\"path-list\"\n                  ordered\n                  onSelectionChanged={this.fileSelectionChangedHandler}\n                  class=\"path-list\"\n                >\n                  {renderListItems(filesToListItemsData(this.files))}\n                </gx-ide-list-selector>\n              </div>\n\n              <div class=\"footer\">\n                <div class=\"checkbox-container\">\n                  <ch-checkbox\n                    id=\"automatic-backup\"\n                    accessibleName={\n                      this._componentLocale.main.automaticBackupLabel\n                    }\n                    checkedValue=\"true\"\n                    unCheckedValue=\"false\"\n                    value=\"checked\"\n                    ref={el =>\n                      (this.automaticBackupEl = el as HTMLChCheckboxElement)\n                    }\n                  ></ch-checkbox>\n                  <label htmlFor=\"automatic-backup\">\n                    {this._componentLocale.main.automaticBackupLabel}\n                  </label>\n                </div>\n                <div class=\"controls-wrapper\">\n                  <input\n                    type=\"file\"\n                    id=\"input_file\"\n                    accept={this.allowedExtensions?.join(\", \")}\n                    ref={el => (this.fileInput = el as HTMLInputElement)}\n                    onChange={this.handleFileInputChange}\n                    class=\"hidden-input\"\n                    multiple\n                  />\n                  <button onClick={this.loadFileHandle}>\n                    {this._componentLocale.main.addFilesButton}\n                  </button>\n                  <button\n                    onClick={this.handleRemoveButtonClick}\n                    disabled={this.selectedFiles.length === 0}\n                  >\n                    {this._componentLocale.main.removeFilesButton} (\n                    {this.selectedFiles.length})\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <button slot=\"footer-end\" onClick={this.confirmCallbackHandle}>\n              {this._componentLocale.footer.confirmButton}\n            </button>\n            <button slot=\"footer-end\" onClick={this.cancelCallback}>\n              {this._componentLocale.footer.cancelButton}\n            </button>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type ImportData = {\n  files: File[];\n  automaticBackup: boolean;\n};\n"]}