@zanichelli/albe-web-components 17.0.0 → 17.0.2

package/dist/collection/components/file-upload/z-file-upload/index.js

@@ -1,20 +1,13 @@
 import { Host, h } from "@stencil/core";
-import { Device, DividerSize, ZFileUploadType } from "../../../beans";
-import { getDevice } from "../../../utils/utils";
+import { ZFileUploadType } from "../../../beans";
 export class ZFileUpload {
     constructor() {
-        this.inputAttributes = {
-            type: "file",
-            id: "file-elem",
-            multiple: true,
-        };
         this.type = ZFileUploadType.DEFAULT;
         this.buttonVariant = undefined;
         this.acceptedFormat = undefined;
         this.fileMaxSize = undefined;
         this.mainTitle = undefined;
         this.description = undefined;
-        this.files = [];
         this.uploadBtnLabel = "allega";
         this.dragAndDropLabel = "Rilascia i file in questa area per allegarli.";
         this.allowedFilesMessage = undefined;
@@ -24,100 +17,88 @@ export class ZFileUpload {
         this.errorModalMessage = undefined;
         this.uploadedFilesLabel = "File appena caricati";
         this.hasFileSection = true;
-        this.invalidFiles = undefined;
+        this.inputName = "z-file-upload";
+        this.showErrors = true;
+        this._type = this.type;
+        this.files = [];
+        this.invalidFiles = new Map();
     }
-    /** Listen removeFile event sent from z-file component */
-    removeFileListener(e) {
-        this.removeFileHandler(e.detail);
+    /** Listen `removeFile` event sent from z-file component */
+    onFileRemoved(e) {
+        this.removeFile(e.detail);
     }
     /** Listen fileDropped event sent from z-dragdrop-area component */
     fileDroppedListener(e) {
         this.input.files = e.detail;
-        this.fileInputHandler();
-    }
-    componentDidUpdate() {
-        this.handleAccessibility();
-        this.invalidFiles.size && this.errorModal.focus();
-    }
-    componentWillLoad() {
-        this.invalidFiles = new Map();
-    }
-    fileInputHandler() {
-        if (this.input.files.length) {
-            this.invalidFiles = this.checkFiles(Array.from(this.input.files));
-        }
+        this.checkFilesValidity(this.input.files);
     }
-    /** get array of uploaded files */
+    /** Get the list of uploaded files */
     async getFiles() {
         return this.files;
     }
-    /** remove file from the array */
+    /** Remove a previously uploaded file */
     async removeFile(fileName) {
-        this.removeFileHandler(fileName);
-    }
-    removeFileHandler(fileName) {
         const files = this.files;
-        const file = files.find((file) => file.name === fileName);
-        if (file) {
-            const index = files.indexOf(file);
-            if (index >= 0) {
-                files.splice(index, 1);
-                this.files = [...files];
-            }
-        }
-    }
-    getType() {
-        if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {
-            return ZFileUploadType.DEFAULT;
+        const index = files.findIndex((file) => file.name === fileName);
+        if (index >= 0) {
+            files.splice(index, 1);
+            this.files = [...files];
         }
-        return this.type;
     }
-    handleAccessibility() {
-        const lastFile = this.el.querySelector("z-file:last-child z-chip button");
-        if (this.files.length > 0 && lastFile) {
-            lastFile.focus();
-        }
-        else {
-            this.getType() === ZFileUploadType.DEFAULT
-                ? this.button.querySelector("button").focus()
-                : this.uploadLink.focus();
+    checkFilesValidity(files) {
+        if (!files.length) {
+            return;
         }
-    }
-    checkFiles(files) {
-        const errors = new Map();
-        const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;
-        const formatErrorString = " ha un formato non supportato";
-        files.forEach((file) => {
+        Array.from(files).forEach((file) => {
             const fileSize = file.size / 1024 / 1024;
             const fileFormatOk = this.acceptedFormat
                 .split(",")
                 .some((ext) => file.name.toLowerCase().endsWith(ext.trim()));
             const fileSizeOk = fileSize <= this.fileMaxSize;
-            if (fileSizeOk && fileFormatOk) {
-                if (!this.files.find((f) => f.name === file.name)) {
-                    this.files.push(file);
-                    this.fileInput.emit(file);
-                    this.input.value = "";
-                }
+            if (fileSizeOk && fileFormatOk && !this.files.find((f) => f.name === file.name)) {
+                this.files = [...this.files, file];
+                this.fileInput.emit(file);
+                this.input.value = "";
                 return;
             }
-            errors.set(file.name, []);
-            if (!fileSizeOk) {
-                errors.get(file.name).push(sizeErrorString);
-            }
-            if (!fileFormatOk) {
-                errors.get(file.name).push(formatErrorString);
-            }
+            const sizeError = `Il file ${file.name} supera il limite di ${this.fileMaxSize}MB`;
+            const formatError = `Il file ${file.name} ha un formato non supportato`;
+            const errors = [
+                !fileSizeOk && { cause: "size", message: sizeError },
+                !fileFormatOk && { cause: "format", message: formatError },
+            ].filter(Boolean);
+            this.invalidFiles.set(file.name, errors);
+            this.invalidFiles = new Map(this.invalidFiles); // trigger state update
+            this.fileError.emit({ file: file.name, errors });
         });
-        return errors;
     }
-    renderTitle() {
-        return h("span", { id: "title" }, this.mainTitle);
+    resetErrors() {
+        this.invalidFiles = new Map();
+    }
+    onFilesChange(e) {
+        this.checkFilesValidity(e.target.files);
+    }
+    componentWillLoad() {
+        // force default type on mobile and tablet viewport
+        const mql = window.matchMedia("(max-width: 1151px)");
+        this._type = mql.matches ? ZFileUploadType.DEFAULT : this.type;
+        mql.addEventListener("change", (e) => {
+            this._type = e.matches ? ZFileUploadType.DEFAULT : this.type;
+        });
+    }
+    componentDidUpdate() {
+        if (!this.showErrors || !this.invalidFiles.size) {
+            return;
+        }
+        this.errorModal.open();
     }
     renderDescription(cssClass) {
-        return h("span", { class: cssClass }, this.description);
+        if (!this.description) {
+            return;
+        }
+        return (h("span", { id: "description", class: cssClass }, this.description));
     }
-    renderAllowedFileExtensions() {
+    renderAllowedFilesMessage() {
         let fileFormatString = "";
         let fileWeightString = "";
         if (this.acceptedFormat) {
@@ -130,31 +111,30 @@ export class ZFileUpload {
         if (this.fileMaxSize) {
             fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;
         }
-        const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;
-        return (h("span", { class: "body-3" }, this.allowedFilesMessage
-            ? this.allowedFilesMessage
-            : fileFormatString || fileWeightString
-                ? finalString
-                : null));
+        const defaultMessage = fileFormatString || fileWeightString ? `Puoi allegare file${fileFormatString}${fileWeightString}.` : undefined;
+        if (!this.allowedFilesMessage && !defaultMessage) {
+            return;
+        }
+        return h("span", { class: "allowed-files-message body-3" }, this.allowedFilesMessage || defaultMessage);
     }
     renderFileSection() {
         if (!this.hasFileSection) {
             return;
         }
-        return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("span", { class: "heading-4-sb" }, this.uploadedFilesLabel), h("div", { class: "files-wrapper" }, h("slot", { name: "files" })), h("z-divider", { size: DividerSize.MEDIUM })));
+        return (h("section", { class: { "files-container": true, "hidden": !this.files.length } }, h("div", { class: "uploaded-files-label heading-3-sb" }, this.uploadedFilesLabel), h("div", { class: "files-wrapper" }, h("slot", { name: "files" }))));
     }
     renderInput() {
-        return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
+        return (h("input", { type: "file", name: this.inputName, multiple: true, onChange: (e) => this.onFilesChange(e), accept: this.acceptedFormat, ref: (val) => (this.input = val) }));
     }
     renderUploadButton() {
         return [
-            this.renderInput(),
             h("z-button", { onClick: () => this.input.click(), onKeyPress: (e) => {
                     if (e.code == "Space" || e.code == "Enter") {
                         e.preventDefault();
                         this.input.click();
                     }
-                }, id: "fileSelect", variant: this.buttonVariant, icon: "upload", ref: (val) => (this.button = val) }, this.uploadBtnLabel),
+                }, id: "fileSelect", variant: this.buttonVariant, icon: "upload" }, this.uploadBtnLabel),
+            this.renderInput(),
         ];
     }
     renderUploadLink() {
@@ -165,13 +145,13 @@ export class ZFileUpload {
                         e.preventDefault();
                         this.input.click();
                     }
-                }, ref: (val) => (this.uploadLink = val) }, this.uploadClickableMessage), " ", this.uploadMessage),
+                } }, this.uploadClickableMessage), " ", this.uploadMessage),
         ];
     }
     renderDefaultMode() {
         return [
             this.renderDescription("body-3-sb"),
-            this.renderAllowedFileExtensions(),
+            this.renderAllowedFilesMessage(),
             this.renderFileSection(),
             this.renderUploadButton(),
         ];
@@ -179,24 +159,20 @@ export class ZFileUpload {
     renderDragDropMode() {
         return [
             this.renderFileSection(),
-            h("z-dragdrop-area", { "drag-and-drop-label": this.dragAndDropLabel }, h("div", { class: "text-container" }, this.renderDescription("body-1"), this.renderUploadLink(), this.renderAllowedFileExtensions())),
+            h("z-dragdrop-area", { "drag-and-drop-label": this.dragAndDropLabel }, h("div", { class: "text-container" }, this.renderDescription("body-1"), this.renderUploadLink(), this.renderAllowedFilesMessage())),
         ];
     }
-    formatErrorString(key, value) {
-        var _a, _b;
-        const bothErrors = value[0] && value[1] ? " e " : "";
-        return (h("span", { class: "error-message" }, "Il file ", h("span", { class: "file-name" }, key), " ", (_a = value[1]) !== null && _a !== void 0 ? _a : "", bothErrors, (_b = value[0]) !== null && _b !== void 0 ? _b : "", "."));
-    }
-    handleErrorModalContent() {
-        return (h("div", { slot: "modalContent" }, h("div", { class: "modal-wrapper" }, h("div", { class: "files" }, this.errorModalMessage ? (h("span", { class: "body-3" }, this.errorModalMessage)) : (Array.from(this.invalidFiles).map(([key, value]) => {
-            return h("span", { class: "body-3" }, this.formatErrorString(key, value));
-        }))))));
+    renderFileErrors() {
+        return Array.from(this.invalidFiles).map(([fileName, errors]) => {
+            const prefix = `Il file ${fileName}`;
+            return (h("span", { class: "error-message" }, "Il file ", h("span", { class: "body-3-sb" }, fileName), errors.map(({ message }) => message.replace(prefix, "")).join(" e "), "."));
+        });
     }
     render() {
-        return (h(Host, { key: '516d51d19835f55e0a5696d3f3b847f2f253e915' }, h("div", { key: '41a4196b48636cf761673ce0672bd3c5246ba8f8', class: `container ${this.getType()}` }, this.mainTitle && this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { key: '8c790bf5dd9b70557b4479bae9ef3a949d9bb4c3', modalid: `file-upload-${this.type}-error-modal`, tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
+        return (h(Host, { key: 'ea57cc0462e4358d04bfc8f5709b61be50947e7a' }, this.mainTitle && (h("div", { key: '59e23f66172333b963922832782a8ac89611acb9', id: "title", class: "heading-3-sb" }, this.mainTitle)), this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode(), !!this.invalidFiles.size && this.showErrors && (h("z-modal", { key: '64cb55a1c0fb491a9dd5b414a309b284e4f2d24e', modalid: `file-upload-${this.type}-error-modal`, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => this.resetErrors(), onModalBackgroundClick: () => this.resetErrors() }, h("div", { key: '255cf2140f1ca881f90df6952965abc8f364f4d0', slot: "modalContent" }, h("div", { key: '03638b6b970c72c73ac7014f0c7848a032029963', class: "modal-wrapper body-3" }, this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()))))));
     }
     static get is() { return "z-file-upload"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["styles.css"]
@@ -483,11 +459,48 @@ export class ZFileUpload {
                 "attribute": "has-file-section",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "inputName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to set on the file input's `name` attribute (for use with forms)"
+                },
+                "attribute": "input-name",
+                "reflect": false,
+                "defaultValue": "\"z-file-upload\""
+            },
+            "showErrors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show errors in the internal modal or leave the handling to the app.\nErrors will still be emitted."
+                },
+                "attribute": "show-errors",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
+            "_type": {},
             "files": {},
             "invalidFiles": {}
         };
@@ -504,9 +517,35 @@ export class ZFileUpload {
                     "text": "Emitted when user select one or more files"
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "File",
+                    "resolved": "File",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "fileError",
+                "name": "fileError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an array of error messages related to one or more files not allowed.\nEmitted when some file is dropped or selected."
+                },
+                "complexType": {
+                    "original": "{file: string; errors: ZFileUploadError[]}",
+                    "resolved": "{ file: string; errors: ZFileUploadError[]; }",
+                    "references": {
+                        "ZFileUploadError": {
+                            "location": "local",
+                            "path": "/home/runner/work/design-system/design-system/src/components/file-upload/z-file-upload/index.tsx",
+                            "id": "src/components/file-upload/z-file-upload/index.tsx::ZFileUploadError"
+                        }
+                    }
                 }
             }];
     }
@@ -529,7 +568,7 @@ export class ZFileUpload {
                     "return": "Promise<File[]>"
                 },
                 "docs": {
-                    "text": "get array of uploaded files",
+                    "text": "Get the list of uploaded files",
                     "tags": []
                 }
             },
@@ -550,17 +589,17 @@ export class ZFileUpload {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "remove file from the array",
+                    "text": "Remove a previously uploaded file",
                     "tags": []
                 }
             }
         };
     }
-    static get elementRef() { return "el"; }
+    static get elementRef() { return "host"; }
     static get listeners() {
         return [{
                 "name": "removeFile",
-                "method": "removeFileListener",
+                "method": "onFileRemoved",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/file-upload/z-file-upload/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, Device, DividerSize, ZFileUploadType} from \"../../../beans\";\nimport {getDevice} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"z-file-upload\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZFileUpload {\n  /** Prop indicating the file upload type - can be default or dragdrop */\n  @Prop({reflect: true})\n  type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n  /** Prop indicating the button variant*/\n  @Prop()\n  buttonVariant?: ButtonVariant;\n\n  /** Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" */\n  @Prop()\n  acceptedFormat?: string;\n\n  /** Max file dimension in Megabyte */\n  @Prop()\n  fileMaxSize?: number;\n\n  /** Title */\n  @Prop()\n  mainTitle?: string;\n\n  /** Description */\n  @Prop()\n  description?: string;\n\n  /** Files added by the user */\n  @State()\n  files: File[] = [];\n\n  /** upoload button label */\n  @Prop()\n  uploadBtnLabel?: string = \"allega\";\n\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n  /** allowed file message */\n  @Prop()\n  allowedFilesMessage?: string;\n\n  /** upload clickable message */\n  @Prop()\n  uploadClickableMessage?: string = \"Carica\";\n\n  /** upload message */\n  @Prop()\n  uploadMessage?: string = \"o trascina dal tuo computer\";\n\n  /** error modal title */\n  @Prop()\n  errorModalTitle?: string = \"Errore di caricamento\";\n\n  /** error modal message */\n  @Prop()\n  errorModalMessage?: string;\n\n  /** loaded files label */\n  @Prop()\n  uploadedFilesLabel?: string = \"File appena caricati\";\n\n  /** uploaded files history rendering */\n  @Prop()\n  hasFileSection?: boolean = true;\n\n  /** List of files not allowed to be uploaded */\n  @State()\n  invalidFiles: Map<string, string[]>;\n\n  @Element() el: HTMLZFileUploadElement;\n\n  private input: HTMLInputElement;\n\n  private button: HTMLZButtonElement;\n\n  private errorModal: HTMLZModalElement;\n\n  private uploadLink: HTMLSpanElement;\n\n  private inputAttributes = {\n    type: \"file\",\n    id: \"file-elem\",\n    multiple: true,\n  };\n\n  /** Listen removeFile event sent from z-file component */\n  @Listen(\"removeFile\")\n  removeFileListener(e: CustomEvent): void {\n    this.removeFileHandler(e.detail);\n  }\n\n  /** Listen fileDropped event sent from z-dragdrop-area component */\n  @Listen(\"fileDropped\")\n  fileDroppedListener(e: CustomEvent): void {\n    this.input.files = e.detail;\n    this.fileInputHandler();\n  }\n\n  componentDidUpdate(): void {\n    this.handleAccessibility();\n    this.invalidFiles.size && this.errorModal.focus();\n  }\n\n  componentWillLoad(): void {\n    this.invalidFiles = new Map<string, string[]>();\n  }\n\n  /** Emitted when user select one or more files */\n  @Event()\n  fileInput: EventEmitter;\n\n  private fileInputHandler(): void {\n    if (this.input.files.length) {\n      this.invalidFiles = this.checkFiles(Array.from(this.input.files));\n    }\n  }\n\n  /** get array of uploaded files */\n  @Method()\n  async getFiles(): Promise<File[]> {\n    return this.files;\n  }\n\n  /** remove file from the array */\n  @Method()\n  async removeFile(fileName: string): Promise<void> {\n    this.removeFileHandler(fileName);\n  }\n\n  private removeFileHandler(fileName: string): void {\n    const files = this.files;\n    const file = files.find((file) => file.name === fileName);\n    if (file) {\n      const index = files.indexOf(file);\n      if (index >= 0) {\n        files.splice(index, 1);\n        this.files = [...files];\n      }\n    }\n  }\n\n  private getType(): ZFileUploadType {\n    if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {\n      return ZFileUploadType.DEFAULT;\n    }\n\n    return this.type;\n  }\n\n  private handleAccessibility(): void {\n    const lastFile = this.el.querySelector(\"z-file:last-child z-chip button\");\n    if (this.files.length > 0 && lastFile) {\n      (lastFile as HTMLElement).focus();\n    } else {\n      this.getType() === ZFileUploadType.DEFAULT\n        ? this.button.querySelector(\"button\").focus()\n        : this.uploadLink.focus();\n    }\n  }\n\n  private checkFiles(files: File[]): Map<string, string[]> {\n    const errors = new Map<string, string[]>();\n    const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;\n    const formatErrorString = \" ha un formato non supportato\";\n    files.forEach((file: File) => {\n      const fileSize = file.size / 1024 / 1024;\n      const fileFormatOk = this.acceptedFormat\n        .split(\",\")\n        .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n      const fileSizeOk = fileSize <= this.fileMaxSize;\n      if (fileSizeOk && fileFormatOk) {\n        if (!this.files.find((f) => f.name === file.name)) {\n          this.files.push(file);\n          this.fileInput.emit(file);\n          this.input.value = \"\";\n        }\n\n        return;\n      }\n      errors.set(file.name, []);\n      if (!fileSizeOk) {\n        errors.get(file.name).push(sizeErrorString);\n      }\n      if (!fileFormatOk) {\n        errors.get(file.name).push(formatErrorString);\n      }\n    });\n\n    return errors;\n  }\n\n  private renderTitle(): HTMLElement {\n    return <span id=\"title\">{this.mainTitle}</span>;\n  }\n\n  private renderDescription(cssClass): HTMLElement {\n    return <span class={cssClass}>{this.description}</span>;\n  }\n\n  private renderAllowedFileExtensions(): HTMLElement {\n    let fileFormatString = \"\";\n    let fileWeightString = \"\";\n\n    if (this.acceptedFormat) {\n      const fileFormat = this.acceptedFormat\n        .split(\", \")\n        .map((string) => string.substring(1).toUpperCase())\n        .join(\", \");\n      fileFormatString = ` nei formati ${fileFormat}`;\n    }\n\n    if (this.fileMaxSize) {\n      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n    }\n\n    const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;\n\n    return (\n      <span class=\"body-3\">\n        {this.allowedFilesMessage\n          ? this.allowedFilesMessage\n          : fileFormatString || fileWeightString\n            ? finalString\n            : null}\n      </span>\n    );\n  }\n\n  private renderFileSection(): HTMLElement {\n    if (!this.hasFileSection) {\n      return;\n    }\n\n    return (\n      <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n        <span class=\"heading-4-sb\">{this.uploadedFilesLabel}</span>\n        <div class=\"files-wrapper\">\n          <slot name=\"files\" />\n        </div>\n        <z-divider size={DividerSize.MEDIUM} />\n      </section>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        {...this.inputAttributes}\n        onChange={() => this.fileInputHandler()}\n        accept={this.acceptedFormat}\n        ref={(val) => (this.input = val)}\n      />\n    );\n  }\n\n  private renderUploadButton(): unknown[] {\n    return [\n      this.renderInput(),\n      <z-button\n        onClick={() => this.input.click()}\n        onKeyPress={(e) => {\n          if (e.code == \"Space\" || e.code == \"Enter\") {\n            e.preventDefault();\n            this.input.click();\n          }\n        }}\n        id=\"fileSelect\"\n        variant={this.buttonVariant}\n        icon=\"upload\"\n        ref={(val) => (this.button = val)}\n      >\n        {this.uploadBtnLabel}\n      </z-button>,\n    ];\n  }\n\n  private renderUploadLink(): unknown[] {\n    return [\n      this.renderInput(),\n      <span class=\"body-1 upload-link-text\">\n        <span\n          tabIndex={0}\n          class=\"body-1-sb upload-link\"\n          onClick={() => this.input.click()}\n          onKeyPress={(e) => {\n            if (e.code == \"Space\" || e.code == \"Enter\") {\n              e.preventDefault();\n              this.input.click();\n            }\n          }}\n          ref={(val) => (this.uploadLink = val)}\n        >\n          {this.uploadClickableMessage}\n        </span>{\" \"}\n        {this.uploadMessage}\n      </span>,\n    ];\n  }\n\n  private renderDefaultMode(): unknown[] {\n    return [\n      this.renderDescription(\"body-3-sb\"),\n      this.renderAllowedFileExtensions(),\n      this.renderFileSection(),\n      this.renderUploadButton(),\n    ];\n  }\n\n  private renderDragDropMode(): unknown[] {\n    return [\n      this.renderFileSection(),\n      <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n        <div class=\"text-container\">\n          {this.renderDescription(\"body-1\")}\n          {this.renderUploadLink()}\n          {this.renderAllowedFileExtensions()}\n        </div>\n      </z-dragdrop-area>,\n    ];\n  }\n\n  private formatErrorString(key, value): string {\n    const bothErrors = value[0] && value[1] ? \" e \" : \"\";\n\n    return (\n      <span class=\"error-message\">\n        Il file <span class=\"file-name\">{key}</span> {value[1] ?? \"\"}\n        {bothErrors}\n        {value[0] ?? \"\"}.\n      </span>\n    );\n  }\n\n  private handleErrorModalContent(): HTMLDivElement {\n    return (\n      <div slot=\"modalContent\">\n        <div class=\"modal-wrapper\">\n          <div class=\"files\">\n            {this.errorModalMessage ? (\n              <span class=\"body-3\">{this.errorModalMessage}</span>\n            ) : (\n              Array.from(this.invalidFiles).map(([key, value]) => {\n                return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n              })\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        <div class={`container ${this.getType()}`}>\n          {this.mainTitle && this.renderTitle()}\n          {this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n        </div>\n        {!!this.invalidFiles.size && (\n          <z-modal\n            modalid={`file-upload-${this.type}-error-modal`}\n            tabIndex={0}\n            ref={(val) => (this.errorModal = val)}\n            modaltitle={this.errorModalTitle}\n            onModalClose={() => (this.invalidFiles = new Map<string, string[]>())}\n            onModalBackgroundClick={() => (this.invalidFiles = new Map<string, string[]>())}\n          >\n            {this.handleErrorModalContent()}\n          </z-modal>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\n\nexport type ZFileUploadError = {cause: \"format\" | \"size\"; message: string};\n\n@Component({\n  tag: \"z-file-upload\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZFileUpload {\n  /** Prop indicating the file upload type - can be default or dragdrop */\n  @Prop({reflect: true})\n  type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n  /** Prop indicating the button variant*/\n  @Prop()\n  buttonVariant?: ButtonVariant;\n\n  /** Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" */\n  @Prop()\n  acceptedFormat?: string;\n\n  /** Max file dimension in Megabyte */\n  @Prop()\n  fileMaxSize?: number;\n\n  /** Title */\n  @Prop()\n  mainTitle?: string;\n\n  /** Description */\n  @Prop()\n  description?: string;\n\n  /** upoload button label */\n  @Prop()\n  uploadBtnLabel?: string = \"allega\";\n\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n  /** allowed file message */\n  @Prop()\n  allowedFilesMessage?: string;\n\n  /** upload clickable message */\n  @Prop()\n  uploadClickableMessage?: string = \"Carica\";\n\n  /** upload message */\n  @Prop()\n  uploadMessage?: string = \"o trascina dal tuo computer\";\n\n  /** error modal title */\n  @Prop()\n  errorModalTitle?: string = \"Errore di caricamento\";\n\n  /** error modal message */\n  @Prop()\n  errorModalMessage?: string;\n\n  /** loaded files label */\n  @Prop()\n  uploadedFilesLabel?: string = \"File appena caricati\";\n\n  /** uploaded files history rendering */\n  @Prop()\n  hasFileSection?: boolean = true;\n\n  /** Value to set on the file input's `name` attribute (for use with forms) */\n  @Prop()\n  inputName? = \"z-file-upload\";\n\n  /**\n   * Whether to show errors in the internal modal or leave the handling to the app.\n   * Errors will still be emitted.\n   */\n  @Prop()\n  showErrors = true;\n\n  /** Internal store of the component type. It will change when viewport goes from desktop to tablet/mobile and vice versa */\n  @State()\n  private _type: ZFileUploadType = this.type;\n\n  /** Files added by the user */\n  @State()\n  files: File[] = [];\n\n  /** Map of files whose upload caused an error and the relative errors, with the cause and a message */\n  @State()\n  invalidFiles: Map<string, ZFileUploadError[]> = new Map<string, ZFileUploadError[]>();\n\n  /** Emitted when user select one or more files */\n  @Event()\n  fileInput: EventEmitter<File>;\n\n  /**\n   * Emits an array of error messages related to one or more files not allowed.\n   * Emitted when some file is dropped or selected.\n   */\n  @Event()\n  fileError: EventEmitter<{file: string; errors: ZFileUploadError[]}>;\n\n  @Element() host: HTMLZFileUploadElement;\n\n  private input: HTMLInputElement;\n\n  private errorModal: HTMLZModalElement;\n\n  /** Listen `removeFile` event sent from z-file component */\n  @Listen(\"removeFile\")\n  onFileRemoved(e: CustomEvent): void {\n    this.removeFile(e.detail);\n  }\n\n  /** Listen fileDropped event sent from z-dragdrop-area component */\n  @Listen(\"fileDropped\")\n  fileDroppedListener(e: CustomEvent): void {\n    this.input.files = e.detail;\n    this.checkFilesValidity(this.input.files);\n  }\n\n  /** Get the list of uploaded files */\n  @Method()\n  async getFiles(): Promise<File[]> {\n    return this.files;\n  }\n\n  /** Remove a previously uploaded file */\n  @Method()\n  async removeFile(fileName: string): Promise<void> {\n    const files = this.files;\n    const index = files.findIndex((file) => file.name === fileName);\n    if (index >= 0) {\n      files.splice(index, 1);\n      this.files = [...files];\n    }\n  }\n\n  private checkFilesValidity(files: FileList): Map<string, string[]> {\n    if (!files.length) {\n      return;\n    }\n\n    Array.from(files).forEach((file: File) => {\n      const fileSize = file.size / 1024 / 1024;\n      const fileFormatOk = this.acceptedFormat\n        .split(\",\")\n        .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n      const fileSizeOk = fileSize <= this.fileMaxSize;\n      if (fileSizeOk && fileFormatOk && !this.files.find((f) => f.name === file.name)) {\n        this.files = [...this.files, file];\n        this.fileInput.emit(file);\n        this.input.value = \"\";\n\n        return;\n      }\n\n      const sizeError = `Il file ${file.name} supera il limite di ${this.fileMaxSize}MB`;\n      const formatError = `Il file ${file.name} ha un formato non supportato`;\n      const errors = [\n        !fileSizeOk && {cause: \"size\" as const, message: sizeError},\n        !fileFormatOk && {cause: \"format\" as const, message: formatError},\n      ].filter(Boolean);\n      this.invalidFiles.set(file.name, errors);\n      this.invalidFiles = new Map(this.invalidFiles); // trigger state update\n      this.fileError.emit({file: file.name, errors});\n    });\n  }\n\n  private resetErrors(): void {\n    this.invalidFiles = new Map<string, ZFileUploadError[]>();\n  }\n\n  private onFilesChange(e: Event): void {\n    this.checkFilesValidity((e.target as HTMLInputElement).files);\n  }\n\n  componentWillLoad(): void {\n    // force default type on mobile and tablet viewport\n    const mql = window.matchMedia(\"(max-width: 1151px)\");\n    this._type = mql.matches ? ZFileUploadType.DEFAULT : this.type;\n    mql.addEventListener(\"change\", (e) => {\n      this._type = e.matches ? ZFileUploadType.DEFAULT : this.type;\n    });\n  }\n\n  componentDidUpdate(): void {\n    if (!this.showErrors || !this.invalidFiles.size) {\n      return;\n    }\n\n    this.errorModal.open();\n  }\n\n  private renderDescription(cssClass): HTMLElement | undefined {\n    if (!this.description) {\n      return;\n    }\n\n    return (\n      <span\n        id=\"description\"\n        class={cssClass}\n      >\n        {this.description}\n      </span>\n    );\n  }\n\n  private renderAllowedFilesMessage(): HTMLElement {\n    let fileFormatString = \"\";\n    let fileWeightString = \"\";\n\n    if (this.acceptedFormat) {\n      const fileFormat = this.acceptedFormat\n        .split(\", \")\n        .map((string) => string.substring(1).toUpperCase())\n        .join(\", \");\n      fileFormatString = ` nei formati ${fileFormat}`;\n    }\n\n    if (this.fileMaxSize) {\n      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n    }\n\n    const defaultMessage =\n      fileFormatString || fileWeightString ? `Puoi allegare file${fileFormatString}${fileWeightString}.` : undefined;\n\n    if (!this.allowedFilesMessage && !defaultMessage) {\n      return;\n    }\n\n    return <span class=\"allowed-files-message body-3\">{this.allowedFilesMessage || defaultMessage}</span>;\n  }\n\n  private renderFileSection(): HTMLElement {\n    if (!this.hasFileSection) {\n      return;\n    }\n\n    return (\n      <section class={{\"files-container\": true, \"hidden\": !this.files.length}}>\n        <div class=\"uploaded-files-label heading-3-sb\">{this.uploadedFilesLabel}</div>\n        <div class=\"files-wrapper\">\n          <slot name=\"files\" />\n        </div>\n      </section>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        type=\"file\"\n        name={this.inputName}\n        multiple\n        onChange={(e) => this.onFilesChange(e)}\n        accept={this.acceptedFormat}\n        ref={(val) => (this.input = val)}\n      />\n    );\n  }\n\n  private renderUploadButton(): unknown[] {\n    return [\n      <z-button\n        onClick={() => this.input.click()}\n        onKeyPress={(e) => {\n          if (e.code == \"Space\" || e.code == \"Enter\") {\n            e.preventDefault();\n            this.input.click();\n          }\n        }}\n        id=\"fileSelect\"\n        variant={this.buttonVariant}\n        icon=\"upload\"\n      >\n        {this.uploadBtnLabel}\n      </z-button>,\n      this.renderInput(),\n    ];\n  }\n\n  private renderUploadLink(): unknown[] {\n    return [\n      this.renderInput(),\n      <span class=\"body-1 upload-link-text\">\n        <span\n          tabIndex={0}\n          class=\"body-1-sb upload-link\"\n          onClick={() => this.input.click()}\n          onKeyPress={(e) => {\n            if (e.code == \"Space\" || e.code == \"Enter\") {\n              e.preventDefault();\n              this.input.click();\n            }\n          }}\n        >\n          {this.uploadClickableMessage}\n        </span>{\" \"}\n        {this.uploadMessage}\n      </span>,\n    ];\n  }\n\n  private renderDefaultMode(): unknown[] {\n    return [\n      this.renderDescription(\"body-3-sb\"),\n      this.renderAllowedFilesMessage(),\n      this.renderFileSection(),\n      this.renderUploadButton(),\n    ];\n  }\n\n  private renderDragDropMode(): unknown[] {\n    return [\n      this.renderFileSection(),\n      <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n        <div class=\"text-container\">\n          {this.renderDescription(\"body-1\")}\n          {this.renderUploadLink()}\n          {this.renderAllowedFilesMessage()}\n        </div>\n      </z-dragdrop-area>,\n    ];\n  }\n\n  private renderFileErrors(): HTMLElement[] {\n    return Array.from(this.invalidFiles).map(([fileName, errors]) => {\n      const prefix = `Il file ${fileName}`;\n\n      return (\n        <span class=\"error-message\">\n          Il file <span class=\"body-3-sb\">{fileName}</span>\n          {errors.map(({message}) => message.replace(prefix, \"\")).join(\" e \")}.\n        </span>\n      );\n    });\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        {this.mainTitle && (\n          <div\n            id=\"title\"\n            class=\"heading-3-sb\"\n          >\n            {this.mainTitle}\n          </div>\n        )}\n        {this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n        {!!this.invalidFiles.size && this.showErrors && (\n          <z-modal\n            modalid={`file-upload-${this.type}-error-modal`}\n            ref={(val) => (this.errorModal = val)}\n            modaltitle={this.errorModalTitle}\n            onModalClose={() => this.resetErrors()}\n            onModalBackgroundClick={() => this.resetErrors()}\n          >\n            <div slot=\"modalContent\">\n              <div class=\"modal-wrapper body-3\">\n                {this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()}\n              </div>\n            </div>\n          </z-modal>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/file-upload/z-file-upload/index.stories.js

@@ -25,6 +25,7 @@ const StoryMeta = {
         description: "Vuoi allegare un file per chiarire meglio la tua richiesta?",
         uploadBtnLabel: "allega",
         hasFileSection: true,
+        showErrors: true,
     },
 };
 export default StoryMeta;
@@ -38,6 +39,7 @@ export const Default = {
       </h4>
       <z-file-upload
         type=${ZFileUploadType.DEFAULT}
+        .showErrors=${args.showErrors}
         .hasFileSection=${args.hasFileSection}
         description="${args.description}"
         .buttonVariant=${args.buttonVariant}
@@ -45,11 +47,9 @@ export const Default = {
         .acceptedFormat=${args.acceptedFormat}
         .mainTitle=${args.mainTitle}
         .uploadBtnLabel=${args.uploadBtnLabel}
-      >
-      </z-file-upload>
+      />
       <script>
-        let uploaderDefault = document.querySelector("z-file-upload");
-        let fileNumber = 0;
+        fileNumber = 0;
         document.addEventListener("fileInput", (e) => {
           fileNumber++;
           const item = e.detail;
@@ -57,7 +57,7 @@ export const Default = {
           chip.setAttribute("slot", "files");
           chip.setAttribute("file-number", fileNumber);
           chip.setAttribute("file-name", item.name);
-          uploaderDefault.appendChild(chip);
+          document.querySelector("z-file-upload")?.appendChild(chip);
         });
       </script>`,
 };
@@ -72,23 +72,22 @@ export const Dragdrop = {
       <br />
       <z-file-upload
         type=${ZFileUploadType.DRAGDROP}
+        .showErrors=${args.showErrors}
         .hasFileSection=${args.hasFileSection}
         description="${args.description}"
         .fileMaxSize=${args.fileMaxSize}
         .acceptedFormat=${args.acceptedFormat}
         .mainTitle=${args.mainTitle}
         .dragAndDropLabel=${args.dragAndDropLabel}
-      >
-      </z-file-upload>
+      />
       <script>
-        const uploaderDragdrop = document.querySelector("z-file-upload");
         document.addEventListener("fileInput", (e) => {
           const item = e.detail;
           const chip = document.createElement("Z-FILE");
           chip.setAttribute("slot", "files");
           chip.setAttribute("filetype", item.type);
           chip.setAttribute("file-name", item.name);
-          uploaderDragdrop.appendChild(chip);
+          document.querySelector("z-file-upload")?.appendChild(chip);
         });
       </script>`,
 };
@@ -112,6 +111,7 @@ export const DragdropEnglish = {
       <br />
       <z-file-upload
         type=${ZFileUploadType.DRAGDROP}
+        .showErrors=${args.showErrors}
         .hasFileSection=${args.hasFileSection}
         description="${args.description}"
         .fileMaxSize=${args.fileMaxSize}
@@ -125,17 +125,15 @@ export const DragdropEnglish = {
         .errorModalMessage=${args.errorModalMessage}
         .uploadedFilesLabel=${args.uploadedFilesLabel}
         .uploadBtnLabel=${args.uploadBtnLabel}
-      >
-      </z-file-upload>
+      />
       <script>
-        const uploaderDragdrop = document.querySelector("z-file-upload");
         document.addEventListener("fileInput", (e) => {
           const item = e.detail;
           const chip = document.createElement("Z-FILE");
           chip.setAttribute("slot", "files");
           chip.setAttribute("filetype", item.type);
           chip.setAttribute("file-name", item.name);
-          uploaderDragdrop.appendChild(chip);
+          document.querySelector("z-file-upload")?.appendChild(chip);
         });
       </script>`,
 };

package/dist/collection/components/file-upload/z-file-upload/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC;YACrC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,EAAE;QACf,cAAc,EAAE,+BAA+B;QAC/C,SAAS,EAAE,gBAAgB;QAC3B,WAAW,EAAE,6DAA6D;QAC1E,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,IAAI;KACrB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,aAAa,EAAE,aAAa,CAAC,OAAO;KACrC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;eAKO,eAAe,CAAC,OAAO;0BACZ,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;yBACd,IAAI,CAAC,aAAa;uBACpB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;0BACT,IAAI,CAAC,cAAc;;;;;;;;;;;;;;;gBAe7B;CACC,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,gBAAgB,EAAE,+CAA+C;KAClE;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;eAMO,eAAe,CAAC,QAAQ;0BACb,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;gBAajC;CACC,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,SAAS,EAAE,eAAe;QAC1B,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,QAAQ;QACxB,gBAAgB,EAAE,qBAAqB;QACvC,mBAAmB,EAAE,mFAAmF;QACxG,sBAAsB,EAAE,MAAM;QAC9B,aAAa,EAAE,4BAA4B;QAC3C,eAAe,EAAE,eAAe;QAChC,iBAAiB,EAAE,mDAAmD;QACtE,kBAAkB,EAAE,gBAAgB;KACrC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;eAMO,eAAe,CAAC,QAAQ;0BACb,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;0BACb,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,SAAS;4BACP,IAAI,CAAC,gBAAgB;+BAClB,IAAI,CAAC,mBAAmB;kCACrB,IAAI,CAAC,sBAAsB;yBACpC,IAAI,CAAC,aAAa;2BAChB,IAAI,CAAC,eAAe;6BAClB,IAAI,CAAC,iBAAiB;8BACrB,IAAI,CAAC,kBAAkB;0BAC3B,IAAI,CAAC,cAAc;;;;;;;;;;;;;gBAa7B;CACC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFileUpload} from \".\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZFileUpload\",\n  component: \"z-file-upload\",\n  argTypes: {\n    type: {\n      options: Object.values(ZFileUploadType),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    buttonVariant: {\n      options: Object.values(ButtonVariant),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    fileMaxSize: 50,\n    acceptedFormat: \".pdf, .doc, .tiff, .png, .jpg\",\n    mainTitle: \"Allega un file\",\n    description: \"Vuoi allegare un file per chiarire meglio la tua richiesta?\",\n    uploadBtnLabel: \"allega\",\n    hasFileSection: true,\n  },\n} satisfies Meta<ZFileUpload>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZFileUpload>;\n\nexport const Default = {\n  args: {\n    buttonVariant: ButtonVariant.PRIMARY,\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <z-file-upload\n        type=${ZFileUploadType.DEFAULT}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .buttonVariant=${args.buttonVariant}\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .uploadBtnLabel=${args.uploadBtnLabel}\n      >\n      </z-file-upload>\n      <script>\n        let uploaderDefault = document.querySelector(\"z-file-upload\");\n        let fileNumber = 0;\n        document.addEventListener(\"fileInput\", (e) => {\n          fileNumber++;\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"file-number\", fileNumber);\n          chip.setAttribute(\"file-name\", item.name);\n          uploaderDefault.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n\nexport const Dragdrop = {\n  args: {\n    dragAndDropLabel: \"Rilascia i file in questa area per allegarli.\",\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <br />\n      <z-file-upload\n        type=${ZFileUploadType.DRAGDROP}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .dragAndDropLabel=${args.dragAndDropLabel}\n      >\n      </z-file-upload>\n      <script>\n        const uploaderDragdrop = document.querySelector(\"z-file-upload\");\n        document.addEventListener(\"fileInput\", (e) => {\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"filetype\", item.type);\n          chip.setAttribute(\"file-name\", item.name);\n          uploaderDragdrop.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n\nexport const DragdropEnglish = {\n  args: {\n    mainTitle: \"Attach a file\",\n    description: \"Do you want to attach a file to clarify your request?\",\n    uploadBtnLabel: \"Attach\",\n    dragAndDropLabel: \"Drop the image here\",\n    allowedFilesMessage: \"You can upload files in the format PDF, DOC, TIFF, PNG, JPG for a maximum of 50MB\",\n    uploadClickableMessage: \"Load\",\n    uploadMessage: \"or drag from your computer\",\n    errorModalTitle: \"Loading error\",\n    errorModalMessage: \"The file does not respect the allowed parameters.\",\n    uploadedFilesLabel: \"Uploaded files\",\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <br />\n      <z-file-upload\n        type=${ZFileUploadType.DRAGDROP}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .dragAndDropLabel=${args.dragAndDropLabel}\n        .allowedFilesMessage=${args.allowedFilesMessage}\n        .uploadClickableMessage=${args.uploadClickableMessage}\n        .uploadMessage=${args.uploadMessage}\n        .errorModalTitle=${args.errorModalTitle}\n        .errorModalMessage=${args.errorModalMessage}\n        .uploadedFilesLabel=${args.uploadedFilesLabel}\n        .uploadBtnLabel=${args.uploadBtnLabel}\n      >\n      </z-file-upload>\n      <script>\n        const uploaderDragdrop = document.querySelector(\"z-file-upload\");\n        document.addEventListener(\"fileInput\", (e) => {\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"filetype\", item.type);\n          chip.setAttribute(\"file-name\", item.name);\n          uploaderDragdrop.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFileUpload} from \".\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZFileUpload\",\n  component: \"z-file-upload\",\n  argTypes: {\n    type: {\n      options: Object.values(ZFileUploadType),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    buttonVariant: {\n      options: Object.values(ButtonVariant),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    fileMaxSize: 50,\n    acceptedFormat: \".pdf, .doc, .tiff, .png, .jpg\",\n    mainTitle: \"Allega un file\",\n    description: \"Vuoi allegare un file per chiarire meglio la tua richiesta?\",\n    uploadBtnLabel: \"allega\",\n    hasFileSection: true,\n    showErrors: true,\n  },\n} satisfies Meta<ZFileUpload>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZFileUpload>;\n\nexport const Default = {\n  args: {\n    buttonVariant: ButtonVariant.PRIMARY,\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <z-file-upload\n        type=${ZFileUploadType.DEFAULT}\n        .showErrors=${args.showErrors}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .buttonVariant=${args.buttonVariant}\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .uploadBtnLabel=${args.uploadBtnLabel}\n      />\n      <script>\n        fileNumber = 0;\n        document.addEventListener(\"fileInput\", (e) => {\n          fileNumber++;\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"file-number\", fileNumber);\n          chip.setAttribute(\"file-name\", item.name);\n          document.querySelector(\"z-file-upload\")?.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n\nexport const Dragdrop = {\n  args: {\n    dragAndDropLabel: \"Rilascia i file in questa area per allegarli.\",\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <br />\n      <z-file-upload\n        type=${ZFileUploadType.DRAGDROP}\n        .showErrors=${args.showErrors}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .dragAndDropLabel=${args.dragAndDropLabel}\n      />\n      <script>\n        document.addEventListener(\"fileInput\", (e) => {\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"filetype\", item.type);\n          chip.setAttribute(\"file-name\", item.name);\n          document.querySelector(\"z-file-upload\")?.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n\nexport const DragdropEnglish = {\n  args: {\n    mainTitle: \"Attach a file\",\n    description: \"Do you want to attach a file to clarify your request?\",\n    uploadBtnLabel: \"Attach\",\n    dragAndDropLabel: \"Drop the image here\",\n    allowedFilesMessage: \"You can upload files in the format PDF, DOC, TIFF, PNG, JPG for a maximum of 50MB\",\n    uploadClickableMessage: \"Load\",\n    uploadMessage: \"or drag from your computer\",\n    errorModalTitle: \"Loading error\",\n    errorModalMessage: \"The file does not respect the allowed parameters.\",\n    uploadedFilesLabel: \"Uploaded files\",\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <br />\n      <z-file-upload\n        type=${ZFileUploadType.DRAGDROP}\n        .showErrors=${args.showErrors}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .dragAndDropLabel=${args.dragAndDropLabel}\n        .allowedFilesMessage=${args.allowedFilesMessage}\n        .uploadClickableMessage=${args.uploadClickableMessage}\n        .uploadMessage=${args.uploadMessage}\n        .errorModalTitle=${args.errorModalTitle}\n        .errorModalMessage=${args.errorModalMessage}\n        .uploadedFilesLabel=${args.uploadedFilesLabel}\n        .uploadBtnLabel=${args.uploadBtnLabel}\n      />\n      <script>\n        document.addEventListener(\"fileInput\", (e) => {\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"filetype\", item.type);\n          chip.setAttribute(\"file-name\", item.name);\n          document.querySelector(\"z-file-upload\")?.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n"]}