@genexus/genexus-ide-ui 1.1.2 → 1.1.4

package/dist/collection/components/file-uploader/file-item/file-item.js

@@ -0,0 +1,246 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _FileItem_handleNameChange, _FileItem_handleBlur, _FileItem_handleDelete, _FileItem_handleCancelClick, _FileItem_startEditing;
+import { h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+const FILE_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "file",
+    colorType: "primary"
+});
+const EDIT_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "edit",
+    colorType: "primary"
+});
+const DELETE_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "delete",
+    colorType: "primary"
+});
+const CANCEL_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "close",
+    colorType: "primary"
+});
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/button",
+    "components/icon",
+    "components/edit",
+    "utils/typography",
+    "utils/spacing",
+    "utils/form",
+    "utils/layout",
+    "utils/elevation"
+];
+export class FileItem {
+    constructor() {
+        _FileItem_handleNameChange.set(this, (event) => {
+            const newName = event.detail;
+            if (newName && newName !== this.currentName) {
+                this.currentName = newName;
+                this.fileNameChange.emit({
+                    id: this.file.id,
+                    name: newName
+                });
+            }
+        });
+        _FileItem_handleBlur.set(this, () => {
+            this.isEditing = false;
+        });
+        /** Handles file deletion */
+        _FileItem_handleDelete.set(this, () => {
+            this.fileDelete.emit(this.file.id);
+        });
+        /** Handles upload cancellation */
+        _FileItem_handleCancelClick.set(this, (e) => {
+            e.preventDefault();
+            this.fileCancel.emit(this.file.id);
+        });
+        /** Starts file name editing */
+        _FileItem_startEditing.set(this, () => {
+            if (this.editable) {
+                this.isEditing = true;
+            }
+        });
+        this.file = undefined;
+        this.editable = false;
+        this.fileDeletedCallback = undefined;
+        this.fileDeletionErrorCallback = undefined;
+        this.isEditing = false;
+        this.currentName = undefined;
+    }
+    /** Updates current name when file prop changes */
+    handleFileChange(newFile) {
+        this.currentName = newFile.name;
+    }
+    componentWillLoad() {
+        this.currentName = this.file.name;
+    }
+    render() {
+        return (h("div", { class: "file-item" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "file-item__icon" }, h("ch-image", { src: FILE_ICON, class: "icon-md" })), h("div", { class: "file-item__name" }, this.isEditing ? (h("ch-edit", { value: this.currentName, autoFocus: true, onInput: __classPrivateFieldGet(this, _FileItem_handleNameChange, "f"), onBlur: __classPrivateFieldGet(this, _FileItem_handleBlur, "f"), class: "input" })) : (h("label", { class: "label" }, this.currentName))), h("div", { class: "file-item__actions" }, !this.file.pending && this.editable && (h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_startEditing, "f") }, h("ch-image", { src: EDIT_ICON, class: "icon-md" }))), !this.file.pending && (h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleDelete, "f"), "aria-label": "Delete file" }, h("ch-image", { src: DELETE_ICON, class: "icon-md" })))), this.file.pending && (h("div", { class: "file-item__progress-container" }, h("div", { class: "file-item__progress-header" }, h("span", { class: "file-item__uploading-text" }, "Uploading ", this.currentName, "..."), h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleCancelClick, "f") }, h("ch-image", { src: CANCEL_ICON, class: "icon-md" }))), h("div", { class: "file-item__progress-bar" }, h("progress", { class: "elevation-1", value: this.file.progress, max: "100" }))))));
+    }
+    static get is() { return "gx-ide-file-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["file-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["file-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "file": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FileUploadState",
+                    "resolved": "FileUploadState",
+                    "references": {
+                        "FileUploadState": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/file-uploader/types.ts::FileUploadState"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "File state containing upload information"
+                }
+            },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the file name can be edited"
+                },
+                "attribute": "editable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "fileDeletedCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(fileId: string) => Promise<void>",
+                    "resolved": "(fileId: string) => Promise<void>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback when a file is deleted"
+                }
+            },
+            "fileDeletionErrorCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(data: {\n    fileName: string;\n    error: string;\n  }) => Promise<void>",
+                    "resolved": "(data: { fileName: string; error: string; }) => Promise<void>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback when a file deletion error occurs"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isEditing": {},
+            "currentName": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "fileNameChange",
+                "name": "fileNameChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the file name is changed"
+                },
+                "complexType": {
+                    "original": "{ id: string; name: string }",
+                    "resolved": "{ id: string; name: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "fileDelete",
+                "name": "fileDelete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the file is deleted"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "fileCancel",
+                "name": "fileCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the file upload is cancelled"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "file",
+                "methodName": "handleFileChange"
+            }];
+    }
+}
+_FileItem_handleNameChange = new WeakMap(), _FileItem_handleBlur = new WeakMap(), _FileItem_handleDelete = new WeakMap(), _FileItem_handleCancelClick = new WeakMap(), _FileItem_startEditing = new WeakMap();
+//# sourceMappingURL=file-item.js.map

package/dist/collection/components/file-uploader/file-item/file-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-item.js","sourceRoot":"","sources":["../../../../src/components/file-uploader/file-item/file-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch\n} from \"@stencil/core\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\nimport { FileUploadState } from \"../types\";\n\nconst FILE_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"file\",\n  colorType: \"primary\"\n});\n\nconst EDIT_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"edit\",\n  colorType: \"primary\"\n});\n\nconst DELETE_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"delete\",\n  colorType: \"primary\"\n});\n\nconst CANCEL_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"close\",\n  colorType: \"primary\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/icon\",\n  \"components/edit\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/elevation\"\n];\n\n@Component({\n  tag: \"gx-ide-file-item\",\n  styleUrl: \"file-item.scss\",\n  shadow: true\n})\nexport class FileItem {\n  /** File state containing upload information */\n  @Prop() readonly file!: FileUploadState;\n\n  /** Whether the file name can be edited */\n  @Prop() readonly editable: boolean = false;\n\n  /** Callback when a file is deleted */\n  @Prop() readonly fileDeletedCallback?: (fileId: string) => Promise<void>;\n\n  /** Callback when a file deletion error occurs */\n  @Prop() readonly fileDeletionErrorCallback?: (data: {\n    fileName: string;\n    error: string;\n  }) => Promise<void>;\n\n  /** Updates current name when file prop changes */\n  @Watch(\"file\")\n  handleFileChange(newFile: FileUploadState) {\n    this.currentName = newFile.name;\n  }\n\n  @State() isEditing: boolean = false;\n  @State() currentName: string;\n\n  /** Emitted when the file name is changed */\n  @Event() fileNameChange: EventEmitter<{ id: string; name: string }>;\n\n  /** Emitted when the file is deleted */\n  @Event() fileDelete: EventEmitter<string>;\n\n  /** Emitted when the file upload is cancelled */\n  @Event() fileCancel: EventEmitter<string>;\n\n  componentWillLoad() {\n    this.currentName = this.file.name;\n  }\n\n  #handleNameChange = (event: ChEditCustomEvent<string> | InputEvent) => {\n    const newName = (event as CustomEvent<string>).detail;\n\n    if (newName && newName !== this.currentName) {\n      this.currentName = newName;\n      this.fileNameChange.emit({\n        id: this.file.id,\n        name: newName\n      });\n    }\n  };\n\n  #handleBlur = () => {\n    this.isEditing = false;\n  };\n\n  /** Handles file deletion */\n  #handleDelete = () => {\n    this.fileDelete.emit(this.file.id);\n  };\n\n  /** Handles upload cancellation */\n  #handleCancelClick = (e: MouseEvent) => {\n    e.preventDefault();\n    this.fileCancel.emit(this.file.id);\n  };\n\n  /** Starts file name editing */\n  #startEditing = () => {\n    if (this.editable) {\n      this.isEditing = true;\n    }\n  };\n\n  render() {\n    return (\n      <div class=\"file-item\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"file-item__icon\">\n          <ch-image src={FILE_ICON} class=\"icon-md\" />\n        </div>\n\n        <div class=\"file-item__name\">\n          {this.isEditing ? (\n            <ch-edit\n              value={this.currentName}\n              autoFocus={true}\n              onInput={this.#handleNameChange}\n              onBlur={this.#handleBlur}\n              class=\"input\"\n            />\n          ) : (\n            <label class=\"label\">{this.currentName}</label>\n          )}\n        </div>\n\n        <div class=\"file-item__actions\">\n          {!this.file.pending && this.editable && (\n            <button\n              class=\"button-tertiary button-icon-only\"\n              type=\"button\"\n              onClick={this.#startEditing}\n            >\n              <ch-image src={EDIT_ICON} class=\"icon-md\" />\n            </button>\n          )}\n          {!this.file.pending && (\n            <button\n              class=\"button-tertiary button-icon-only\"\n              type=\"button\"\n              onClick={this.#handleDelete}\n              aria-label=\"Delete file\"\n            >\n              <ch-image src={DELETE_ICON} class=\"icon-md\" />\n            </button>\n          )}\n        </div>\n\n        {this.file.pending && (\n          <div class=\"file-item__progress-container\">\n            <div class=\"file-item__progress-header\">\n              <span class=\"file-item__uploading-text\">\n                Uploading {this.currentName}...\n              </span>\n              <button\n                class=\"button-tertiary button-icon-only\"\n                type=\"button\"\n                onClick={this.#handleCancelClick}\n              >\n                <ch-image src={CANCEL_ICON} class=\"icon-md\" />\n              </button>\n            </div>\n            <div class=\"file-item__progress-bar\">\n              <progress\n                class=\"elevation-1\"\n                value={this.file.progress}\n                max=\"100\"\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}