@zanichelli/albe-web-components 14.6.0 → 14.6.2-RC
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-file-upload.cjs.entry.js +17 -7
- package/dist/cjs/z-file-upload.cjs.entry.js.map +1 -1
- package/dist/collection/components/file-upload/z-file-upload/index.js +123 -7
- package/dist/collection/components/file-upload/z-file-upload/index.js.map +1 -1
- package/dist/collection/components/file-upload/z-file-upload/index.spec.js +2 -3
- package/dist/collection/components/file-upload/z-file-upload/index.spec.js.map +1 -1
- package/dist/collection/components/file-upload/z-file-upload/index.stories.js +47 -0
- package/dist/collection/components/file-upload/z-file-upload/index.stories.js.map +1 -1
- package/dist/collection/utils/storybook-utils.js +21 -6
- package/dist/collection/utils/storybook-utils.js.map +1 -1
- package/dist/components/z-file-upload.js +23 -7
- package/dist/components/z-file-upload.js.map +1 -1
- package/dist/docs/themes/index.stories.js +9 -6
- package/dist/docs/themes/index.stories.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-file-upload.entry.js +17 -7
- package/dist/esm/z-file-upload.entry.js.map +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/esm-es5/web-components-library.js +1 -1
- package/dist/esm-es5/web-components-library.js.map +1 -1
- package/dist/esm-es5/z-file-upload.entry.js +1 -1
- package/dist/esm-es5/z-file-upload.entry.js.map +1 -1
- package/dist/types/components/file-upload/z-file-upload/index.d.ts +12 -0
- package/dist/types/components/file-upload/z-file-upload/index.stories.d.ts +15 -0
- package/dist/types/components.d.ts +48 -0
- package/dist/types/utils/storybook-utils.d.ts +8 -1
- package/dist/web-components-library/p-2c986164.system.entry.js +2 -0
- package/dist/web-components-library/p-2c986164.system.entry.js.map +1 -0
- package/dist/web-components-library/p-52290ecc.entry.js +2 -0
- package/dist/web-components-library/p-52290ecc.entry.js.map +1 -0
- package/dist/web-components-library/p-f530271b.system.js +1 -1
- package/dist/web-components-library/p-f530271b.system.js.map +1 -1
- package/dist/web-components-library/web-components-library.css +4 -3
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/dist/web-components-library/web-components-library.esm.js.map +1 -1
- package/package.json +2 -2
- package/www/build/p-2c986164.system.entry.js +2 -0
- package/www/build/p-2c986164.system.entry.js.map +1 -0
- package/www/build/p-52290ecc.entry.js +2 -0
- package/www/build/p-52290ecc.entry.js.map +1 -0
- package/www/build/p-5b1cca82.js +2 -0
- package/www/build/p-8a6eba90.css +4 -0
- package/www/build/p-f530271b.system.js +1 -1
- package/www/build/p-f530271b.system.js.map +1 -1
- package/www/build/web-components-library.css +4 -3
- package/www/build/web-components-library.esm.js +1 -1
- package/www/build/web-components-library.esm.js.map +1 -1
- package/www/index.html +1 -1
- package/dist/web-components-library/p-10572f51.entry.js +0 -2
- package/dist/web-components-library/p-10572f51.entry.js.map +0 -1
- package/dist/web-components-library/p-f4512e82.system.entry.js +0 -2
- package/dist/web-components-library/p-f4512e82.system.entry.js.map +0 -1
- package/www/build/p-10572f51.entry.js +0 -2
- package/www/build/p-10572f51.entry.js.map +0 -1
- package/www/build/p-aea73067.js +0 -2
- package/www/build/p-d8d23599.css +0 -3
- package/www/build/p-f4512e82.system.entry.js +0 -2
- package/www/build/p-f4512e82.system.entry.js.map +0 -1
|
@@ -17,6 +17,12 @@ export class ZFileUpload {
|
|
|
17
17
|
this.files = [];
|
|
18
18
|
this.uploadBtnLabel = "allega";
|
|
19
19
|
this.dragAndDropLabel = "Rilascia i file in questa area per allegarli.";
|
|
20
|
+
this.allowedFilesMessage = undefined;
|
|
21
|
+
this.uploadClickableMessage = "Carica";
|
|
22
|
+
this.uploadMessage = "o trascina dal tuo computer";
|
|
23
|
+
this.errorModalTitle = "Errore di caricamento";
|
|
24
|
+
this.errorModalMessage = undefined;
|
|
25
|
+
this.uploadedFilesLabel = "File appena caricati";
|
|
20
26
|
this.hasFileSection = true;
|
|
21
27
|
this.invalidFiles = undefined;
|
|
22
28
|
}
|
|
@@ -125,13 +131,17 @@ export class ZFileUpload {
|
|
|
125
131
|
fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;
|
|
126
132
|
}
|
|
127
133
|
const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;
|
|
128
|
-
return h("span", { class: "body-3" },
|
|
134
|
+
return (h("span", { class: "body-3" }, this.allowedFilesMessage
|
|
135
|
+
? this.allowedFilesMessage
|
|
136
|
+
: fileFormatString || fileWeightString
|
|
137
|
+
? finalString
|
|
138
|
+
: null));
|
|
129
139
|
}
|
|
130
140
|
renderFileSection() {
|
|
131
141
|
if (!this.hasFileSection) {
|
|
132
142
|
return;
|
|
133
143
|
}
|
|
134
|
-
return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("span", { class: "heading-4-sb" },
|
|
144
|
+
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 })));
|
|
135
145
|
}
|
|
136
146
|
renderInput() {
|
|
137
147
|
return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
|
|
@@ -150,12 +160,12 @@ export class ZFileUpload {
|
|
|
150
160
|
renderUploadLink() {
|
|
151
161
|
return [
|
|
152
162
|
this.renderInput(),
|
|
153
|
-
h("span", { class: "body-1 upload-link-text" },
|
|
163
|
+
h("span", { class: "body-1 upload-link-text" }, h("span", { tabIndex: 0, class: "body-1-sb upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
|
|
154
164
|
if (e.code == "Space" || e.code == "Enter") {
|
|
155
165
|
e.preventDefault();
|
|
156
166
|
this.input.click();
|
|
157
167
|
}
|
|
158
|
-
}, ref: (val) => (this.uploadLink = val) },
|
|
168
|
+
}, ref: (val) => (this.uploadLink = val) }, this.uploadClickableMessage), " ", this.uploadMessage),
|
|
159
169
|
];
|
|
160
170
|
}
|
|
161
171
|
renderDefaultMode() {
|
|
@@ -178,12 +188,12 @@ export class ZFileUpload {
|
|
|
178
188
|
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 : "", "."));
|
|
179
189
|
}
|
|
180
190
|
handleErrorModalContent() {
|
|
181
|
-
return (h("div", { slot: "modalContent" }, h("div", { class: "modal-wrapper" }, h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
|
|
191
|
+
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]) => {
|
|
182
192
|
return h("span", { class: "body-3" }, this.formatErrorString(key, value));
|
|
183
|
-
})))));
|
|
193
|
+
}))))));
|
|
184
194
|
}
|
|
185
195
|
render() {
|
|
186
|
-
return (h(Host, { key: '
|
|
196
|
+
return (h(Host, { key: '30d78f7ce88aa6e994de1355cf4bb8bbc79e6f85' }, h("div", { key: '95a606aeda5279d50acb1b127f2d4784ccd95411', tabIndex: 0, class: `container ${this.getType()}` }, this.mainTitle && this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { key: '576e0e283b6fc92d6099a94178fde4c4eaa280b9', 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()))));
|
|
187
197
|
}
|
|
188
198
|
static get is() { return "z-file-upload"; }
|
|
189
199
|
static get encapsulation() { return "shadow"; }
|
|
@@ -350,6 +360,112 @@ export class ZFileUpload {
|
|
|
350
360
|
"reflect": false,
|
|
351
361
|
"defaultValue": "\"Rilascia i file in questa area per allegarli.\""
|
|
352
362
|
},
|
|
363
|
+
"allowedFilesMessage": {
|
|
364
|
+
"type": "string",
|
|
365
|
+
"mutable": false,
|
|
366
|
+
"complexType": {
|
|
367
|
+
"original": "string",
|
|
368
|
+
"resolved": "string",
|
|
369
|
+
"references": {}
|
|
370
|
+
},
|
|
371
|
+
"required": false,
|
|
372
|
+
"optional": true,
|
|
373
|
+
"docs": {
|
|
374
|
+
"tags": [],
|
|
375
|
+
"text": "allowed file message"
|
|
376
|
+
},
|
|
377
|
+
"attribute": "allowed-files-message",
|
|
378
|
+
"reflect": false
|
|
379
|
+
},
|
|
380
|
+
"uploadClickableMessage": {
|
|
381
|
+
"type": "string",
|
|
382
|
+
"mutable": false,
|
|
383
|
+
"complexType": {
|
|
384
|
+
"original": "string",
|
|
385
|
+
"resolved": "string",
|
|
386
|
+
"references": {}
|
|
387
|
+
},
|
|
388
|
+
"required": false,
|
|
389
|
+
"optional": true,
|
|
390
|
+
"docs": {
|
|
391
|
+
"tags": [],
|
|
392
|
+
"text": "upload clickable message"
|
|
393
|
+
},
|
|
394
|
+
"attribute": "upload-clickable-message",
|
|
395
|
+
"reflect": false,
|
|
396
|
+
"defaultValue": "\"Carica\""
|
|
397
|
+
},
|
|
398
|
+
"uploadMessage": {
|
|
399
|
+
"type": "string",
|
|
400
|
+
"mutable": false,
|
|
401
|
+
"complexType": {
|
|
402
|
+
"original": "string",
|
|
403
|
+
"resolved": "string",
|
|
404
|
+
"references": {}
|
|
405
|
+
},
|
|
406
|
+
"required": false,
|
|
407
|
+
"optional": true,
|
|
408
|
+
"docs": {
|
|
409
|
+
"tags": [],
|
|
410
|
+
"text": "upload message"
|
|
411
|
+
},
|
|
412
|
+
"attribute": "upload-message",
|
|
413
|
+
"reflect": false,
|
|
414
|
+
"defaultValue": "\"o trascina dal tuo computer\""
|
|
415
|
+
},
|
|
416
|
+
"errorModalTitle": {
|
|
417
|
+
"type": "string",
|
|
418
|
+
"mutable": false,
|
|
419
|
+
"complexType": {
|
|
420
|
+
"original": "string",
|
|
421
|
+
"resolved": "string",
|
|
422
|
+
"references": {}
|
|
423
|
+
},
|
|
424
|
+
"required": false,
|
|
425
|
+
"optional": true,
|
|
426
|
+
"docs": {
|
|
427
|
+
"tags": [],
|
|
428
|
+
"text": "error modal title"
|
|
429
|
+
},
|
|
430
|
+
"attribute": "error-modal-title",
|
|
431
|
+
"reflect": false,
|
|
432
|
+
"defaultValue": "\"Errore di caricamento\""
|
|
433
|
+
},
|
|
434
|
+
"errorModalMessage": {
|
|
435
|
+
"type": "string",
|
|
436
|
+
"mutable": false,
|
|
437
|
+
"complexType": {
|
|
438
|
+
"original": "string",
|
|
439
|
+
"resolved": "string",
|
|
440
|
+
"references": {}
|
|
441
|
+
},
|
|
442
|
+
"required": false,
|
|
443
|
+
"optional": true,
|
|
444
|
+
"docs": {
|
|
445
|
+
"tags": [],
|
|
446
|
+
"text": "error modal message"
|
|
447
|
+
},
|
|
448
|
+
"attribute": "error-modal-message",
|
|
449
|
+
"reflect": false
|
|
450
|
+
},
|
|
451
|
+
"uploadedFilesLabel": {
|
|
452
|
+
"type": "string",
|
|
453
|
+
"mutable": false,
|
|
454
|
+
"complexType": {
|
|
455
|
+
"original": "string",
|
|
456
|
+
"resolved": "string",
|
|
457
|
+
"references": {}
|
|
458
|
+
},
|
|
459
|
+
"required": false,
|
|
460
|
+
"optional": true,
|
|
461
|
+
"docs": {
|
|
462
|
+
"tags": [],
|
|
463
|
+
"text": "loaded files label"
|
|
464
|
+
},
|
|
465
|
+
"attribute": "uploaded-files-label",
|
|
466
|
+
"reflect": false,
|
|
467
|
+
"defaultValue": "\"File appena caricati\""
|
|
468
|
+
},
|
|
353
469
|
"hasFileSection": {
|
|
354
470
|
"type": "boolean",
|
|
355
471
|
"mutable": false,
|
|
@@ -1 +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 /** 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 <span class=\"body-3\">{fileFormatString || fileWeightString ? finalString : null}</span>;\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\">File appena caricati</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 Trascina o{\" \"}\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 carica\n </span>{\" \"}\n dal tuo computer\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 {Array.from(this.invalidFiles).map(([key, value]) => {\n return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n })}\n </div>\n </div>\n </div>\n );\n }\n\n render(): HTMLZFileUploadElement {\n return (\n <Host>\n <div\n tabIndex={0}\n class={`container ${this.getType()}`}\n >\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=\"Errore di caricamento\"\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"]}
|
|
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\n tabIndex={0}\n class={`container ${this.getType()}`}\n >\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"]}
|
|
@@ -76,11 +76,10 @@ describe("Suite test ZFileUpload", () => {
|
|
|
76
76
|
</span>
|
|
77
77
|
<input accept=".pdf, .doc, .tiff, .png, .jpg, .jpeg" id="file-elem" multiple="" type="file">
|
|
78
78
|
<span class="body-1 upload-link-text">
|
|
79
|
-
Trascina o
|
|
80
79
|
<span class="body-1-sb upload-link" tabindex="0">
|
|
81
|
-
|
|
80
|
+
Carica
|
|
82
81
|
</span>
|
|
83
|
-
dal tuo computer
|
|
82
|
+
o trascina dal tuo computer
|
|
84
83
|
</span>
|
|
85
84
|
<span class="body-3">
|
|
86
85
|
Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;;8BAMkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA6Bb,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;8BAKkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC
|
|
1
|
+
{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;;8BAMkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA6Bb,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;8BAKkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;aACd,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmCI,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC5E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;;;8BAOkB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0Bb,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZFileUpload} from \"./index\";\n\ndescribe(\"Suite test ZFileUpload\", () => {\n it(\"Test render ZFileUpload default\", async () => {\n const page = await newSpecPage({\n components: [ZFileUpload],\n html: `<z-file-upload type=\"default\"\n variant=\"primary\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">>\n </z-file-upload>`,\n });\n expect(page.root).toEqualHtml(`\n <z-file-upload accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\" file-max-size=\"50\" main-title=\"Allega un file\" type=\"default\" variant=\"primary\">\n <mock:shadow-root>\n <div class=\"container default\" tabindex=\"0\">\n <span id=\"title\">\n Allega un file\n </span>\n <span class=\"body-3-sb\">\n Vuoi allegare un file per chiarire meglio la tua richiesta?\n </span>\n <span class=\"body-3\">\n Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.\n </span>\n <section class=\"files-container hidden\">\n <span class=\"heading-4-sb\">\n File appena caricati\n </span>\n <div class=\"files-wrapper\">\n <slot name=\"files\"></slot>\n </div>\n <z-divider size=\"medium\"></z-divider>\n </section>\n <input accept=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" id=\"file-elem\" multiple=\"\" type=\"file\">\n <z-button icon=\"upload\" id=\"fileSelect\">\n allega\n </z-button>\n </div>\n </mock:shadow-root>\n >\n </z-file-upload>`);\n });\n\n it(\"Test render ZFileUpload dragdrop\", async () => {\n const page = await newSpecPage({\n components: [ZFileUpload],\n html: `<z-file-upload type=\"dragdrop\"\n main-title=\"Allega un file\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format= \".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n file-max-size=\"50\">>\n </z-file-upload>`,\n });\n expect(page.root)\n .toEqualHtml(` <z-file-upload accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\" file-max-size=\"50\" main-title=\"Allega un file\" type=\"dragdrop\">\n <mock:shadow-root>\n <div class=\"container dragdrop\" tabindex=\"0\">\n <span id=\"title\">\n Allega un file\n </span>\n <section class=\"files-container hidden\">\n <span class=\"heading-4-sb\">\n File appena caricati\n </span>\n <div class=\"files-wrapper\">\n <slot name=\"files\"></slot>\n </div>\n <z-divider size=\"medium\"></z-divider>\n </section>\n <z-dragdrop-area drag-and-drop-label=\"Rilascia i file in questa area per allegarli.\">\n <div class=\"text-container\">\n <span class=\"body-1\">\n Vuoi allegare un file per chiarire meglio la tua richiesta?\n </span>\n <input accept=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" id=\"file-elem\" multiple=\"\" type=\"file\">\n <span class=\"body-1 upload-link-text\">\n <span class=\"body-1-sb upload-link\" tabindex=\"0\">\n Carica\n </span>\n o trascina dal tuo computer\n </span>\n <span class=\"body-3\">\n Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.\n </span>\n </div>\n </z-dragdrop-area>\n </div>\n </mock:shadow-root>\n >\n </z-file-upload>`);\n });\n\n it(\"Test render ZFileUpload with custom label and not main-title\", async () => {\n const page = await newSpecPage({\n components: [ZFileUpload],\n html: `<z-file-upload type=\"default\"\n variant=\"primary\"\n description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\"\n accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\"\n upload-btn-label=\"testo custom\"\n drag-and-drop-label=\"drag and drop custom label\"\n file-max-size=\"50\">>\n </z-file-upload>`,\n });\n expect(page.root).toEqualHtml(`\n <z-file-upload accepted-format=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" description=\"Vuoi allegare un file per chiarire meglio la tua richiesta?\" file-max-size=\"50\" upload-btn-label=\"testo custom\" drag-and-drop-label=\"drag and drop custom label\" type=\"default\" variant=\"primary\">\n <mock:shadow-root>\n <div class=\"container default\" tabindex=\"0\">\n <span class=\"body-3-sb\">\n Vuoi allegare un file per chiarire meglio la tua richiesta?\n </span>\n <span class=\"body-3\">\n Puoi allegare file nei formati PDF, DOC, TIFF, PNG, JPG, JPEG per un massimo di 50MB di peso.\n </span>\n <section class=\"files-container hidden\">\n <span class=\"heading-4-sb\">\n File appena caricati\n </span>\n <div class=\"files-wrapper\">\n <slot name=\"files\"></slot>\n </div>\n <z-divider size=\"medium\"></z-divider>\n </section>\n <input accept=\".pdf, .doc, .tiff, .png, .jpg, .jpeg\" id=\"file-elem\" multiple=\"\" type=\"file\">\n <z-button icon=\"upload\" id=\"fileSelect\">\n testo custom\n </z-button>\n </div>\n </mock:shadow-root>\n >\n </z-file-upload>`);\n });\n});\n"]}
|
|
@@ -92,4 +92,51 @@ export const Dragdrop = {
|
|
|
92
92
|
});
|
|
93
93
|
</script>`,
|
|
94
94
|
};
|
|
95
|
+
export const DragdropEnglish = {
|
|
96
|
+
args: {
|
|
97
|
+
mainTitle: "Attach a file",
|
|
98
|
+
description: "Do you want to attach a file to clarify your request?",
|
|
99
|
+
uploadBtnLabel: "Attach",
|
|
100
|
+
dragAndDropLabel: "Drop the image here",
|
|
101
|
+
allowedFilesMessage: "You can upload files in the format PDF, DOC, TIFF, PNG, JPG for a maximum of 50MB",
|
|
102
|
+
uploadClickableMessage: "Load",
|
|
103
|
+
uploadMessage: "or drag from your computer",
|
|
104
|
+
errorModalTitle: "Loading error",
|
|
105
|
+
errorModalMessage: "The file does not respect the allowed parameters.",
|
|
106
|
+
uploadedFilesLabel: "Uploaded files",
|
|
107
|
+
},
|
|
108
|
+
render: (args) => html `<h4 class="heading-4">
|
|
109
|
+
This story embeds a piece of js script to allow the component to work properly. Please refresh the page before
|
|
110
|
+
using it!
|
|
111
|
+
</h4>
|
|
112
|
+
<br />
|
|
113
|
+
<z-file-upload
|
|
114
|
+
type=${ZFileUploadType.DRAGDROP}
|
|
115
|
+
.hasFileSection=${args.hasFileSection}
|
|
116
|
+
description="${args.description}"
|
|
117
|
+
.fileMaxSize=${args.fileMaxSize}
|
|
118
|
+
.acceptedFormat=${args.acceptedFormat}
|
|
119
|
+
.mainTitle=${args.mainTitle}
|
|
120
|
+
.dragAndDropLabel=${args.dragAndDropLabel}
|
|
121
|
+
.allowedFilesMessage=${args.allowedFilesMessage}
|
|
122
|
+
.uploadClickableMessage=${args.uploadClickableMessage}
|
|
123
|
+
.uploadMessage=${args.uploadMessage}
|
|
124
|
+
.errorModalTitle=${args.errorModalTitle}
|
|
125
|
+
.errorModalMessage=${args.errorModalMessage}
|
|
126
|
+
.uploadedFilesLabel=${args.uploadedFilesLabel}
|
|
127
|
+
.uploadBtnLabel=${args.uploadBtnLabel}
|
|
128
|
+
>
|
|
129
|
+
</z-file-upload>
|
|
130
|
+
<script>
|
|
131
|
+
const uploaderDragdrop = document.querySelector("z-file-upload");
|
|
132
|
+
document.addEventListener("fileInput", (e) => {
|
|
133
|
+
const item = e.detail;
|
|
134
|
+
const chip = document.createElement("Z-FILE");
|
|
135
|
+
chip.setAttribute("slot", "files");
|
|
136
|
+
chip.setAttribute("filetype", item.type);
|
|
137
|
+
chip.setAttribute("file-name", item.name);
|
|
138
|
+
uploaderDragdrop.appendChild(chip);
|
|
139
|
+
});
|
|
140
|
+
</script>`,
|
|
141
|
+
};
|
|
95
142
|
//# sourceMappingURL=index.stories.js.map
|
|
@@ -1 +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","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"]}
|
|
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"]}
|
|
@@ -13,11 +13,9 @@ var PALETTES;
|
|
|
13
13
|
*/
|
|
14
14
|
function getRootCssProperties() {
|
|
15
15
|
return Array.from(document.styleSheets)
|
|
16
|
-
.
|
|
17
|
-
.
|
|
18
|
-
.
|
|
19
|
-
.map((rule) => Object.values(rule.style || {}))
|
|
20
|
-
.flat()
|
|
16
|
+
.flatMap((sheet) => Array.from(sheet.cssRules))
|
|
17
|
+
.filter((rule) => { var _a; return rule instanceof CSSStyleRule && ((_a = rule.selectorText) === null || _a === void 0 ? void 0 : _a.includes(":root")); })
|
|
18
|
+
.flatMap((rule) => Object.values(rule.style || {}))
|
|
21
19
|
.filter(Boolean);
|
|
22
20
|
}
|
|
23
21
|
/**
|
|
@@ -90,10 +88,27 @@ export function getColorVarsLabels() {
|
|
|
90
88
|
* Get Design System themes tokens.
|
|
91
89
|
*/
|
|
92
90
|
export function getThemesColorTokens() {
|
|
93
|
-
const colorTokens = getRootCssProperties().filter((token) => token.startsWith(
|
|
91
|
+
const colorTokens = getRootCssProperties().filter((token) => token.startsWith("--color"));
|
|
94
92
|
// remove duplicates
|
|
95
93
|
return [...new Set(colorTokens)];
|
|
96
94
|
}
|
|
95
|
+
/**
|
|
96
|
+
* Get the value of a token for a given theme.
|
|
97
|
+
* @param themeClass CSS class name of the theme
|
|
98
|
+
* @param token Token name to get the value of
|
|
99
|
+
* @returns The value of the token for the given theme.
|
|
100
|
+
*/
|
|
101
|
+
export function getThemeTokenValue(themeClass, token) {
|
|
102
|
+
var _a, _b;
|
|
103
|
+
const themeStyle = Array.from(document.styleSheets)
|
|
104
|
+
.flatMap((sheet) => Array.from(sheet.cssRules))
|
|
105
|
+
.filter((rule) => rule instanceof CSSStyleRule)
|
|
106
|
+
.find((rule) => rule.selectorText.includes(themeClass));
|
|
107
|
+
const value = (_a = themeStyle.styleMap.get(token)) === null || _a === void 0 ? void 0 : _a[0];
|
|
108
|
+
return value instanceof CSSVariableReferenceValue
|
|
109
|
+
? getComputedStyle(document.documentElement).getPropertyValue(value.variable)
|
|
110
|
+
: (_b = value === null || value === void 0 ? void 0 : value.toString()) !== null && _b !== void 0 ? _b : undefined;
|
|
111
|
+
}
|
|
97
112
|
/**
|
|
98
113
|
* Get a Storybook Arg config for Design System color tokens.
|
|
99
114
|
* Useful to configure a control for the stories.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"storybook-utils.js","sourceRoot":"","sources":["../../../src/utils/storybook-utils.ts"],"names":[],"mappings":"AASA,IAAK,QAQJ;AARD,WAAK,QAAQ;IACX,uBAAW,CAAA;IACX,2BAAe,CAAA;IACf,yBAAa,CAAA;IACb,6BAAiB,CAAA;IACjB,yBAAa,CAAA;IACb,6BAAiB,CAAA;IACjB,+BAAmB,CAAA;AACrB,CAAC,EARI,QAAQ,KAAR,QAAQ,QAQZ;AAED;;GAEG;AACH,SAAS,oBAAoB;IAC3B,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;SACpC,
|
|
1
|
+
{"version":3,"file":"storybook-utils.js","sourceRoot":"","sources":["../../../src/utils/storybook-utils.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport {OptionsConfig} from \"@storybook/blocks\";\nimport {Args} from \"@storybook/web-components\";\n\ntype CSSCustomProp = `--${string}`;\ntype EnsurePrefix<T extends string, P extends string> = T extends `${P}${string}` ? T : `${P}${T}`;\n\nexport type CSSVarsArguments<T extends string = string> = {[x in EnsurePrefix<T, \"--\">]: string};\n\nenum PALETTES {\n RED = \"red\",\n GREEN = \"green\",\n BLUE = \"blue\",\n YELLOW = \"yellow\",\n GRAY = \"gray\",\n AVATAR = \"avatar\",\n SUBJECT = \"subject\",\n}\n\n/**\n * Get all root CSS properties.\n */\nfunction getRootCssProperties(): string[] {\n return Array.from(document.styleSheets)\n .flatMap((sheet) => Array.from(sheet.cssRules))\n .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule && rule.selectorText?.includes(\":root\"))\n .flatMap((rule) => Object.values(rule.style || {}))\n .filter(Boolean);\n}\n\n/**\n * Get Design System color tokens.\n * Can be used in components stories controls as follows:\n * @example ```\n * argTypes={{\n * \"--z-component--background-color\": {\n * control: {type: \"select\"},\n * options: getColorTokens(),\n * }\n * }}```\n *\n * and then in the component tag\n *\n * ```<z-component style=\"--z-component--background-color: var(${args[\"--z-component--background-color\"]})\" />```\n */\nexport function getColorTokens(): CSSCustomProp[] {\n const tokenGroups = [...Object.values(PALETTES), \"color\"];\n const colorTokens = getRootCssProperties().filter((token): token is CSSCustomProp =>\n tokenGroups.some((group) => token.startsWith(`--${group}`))\n );\n\n return [...new Set(colorTokens)].sort();\n}\n\n/**\n * Get Design System color palettes.\n */\nexport function getPalettes(): Record<keyof typeof PALETTES, CSSCustomProp[]> {\n return Object.values(PALETTES).reduce(\n (acc, paletteName) => {\n const tokens = getRootCssProperties().filter((token): token is CSSCustomProp =>\n token.startsWith(`--${paletteName}`)\n );\n\n return {\n ...acc,\n [paletteName]: tokens.sort((a, b) => +a.replace(/\\D/g, \"\") - +b.replace(/\\D/g, \"\")),\n };\n },\n {} as Record<keyof typeof PALETTES, CSSCustomProp[]>\n );\n}\n\n/**\n * Get Design System color tokens wrapped with CSS `var()`.\n * @example ```\n * argTypes={{\n * \"--z-component--background-color\": {\n * control: {type: \"select\"},\n * options: getColorTokens(),\n * }\n * }}```\n *\n * and then in the component tag\n *\n * ```<z-component style=\"--z-component--background-color: ${args[\"--z-component--background-color\"]}\" />```\n */\nexport function getColorVars(): `var(${CSSCustomProp})`[] {\n return getColorTokens().map((token) => `var(${token})` as const);\n}\n\n/**\n * Get Design System color tokens as readable labels for `control` configuration.\n * It assumes you set the options using the `getColorTokens()` function, so expected options are something like `var(--color-token)`.\n * @example ```\n * argTypes={{\n * \"--z-component--background-color\": {\n * options: getColorTokens(),\n * control: {\n * type: \"select\",\n * labels: getColorVarsLabels(),\n * },\n * }\n * }}```\n */\nexport function getColorVarsLabels(): OptionsConfig[\"labels\"] {\n return getColorVars().reduce(\n (acc, tokenVar) => {\n const tokenLabel = tokenVar.replace(/^var\\(--(.*)\\)/, \"$1\");\n\n return {\n ...acc,\n [tokenVar]: tokenLabel,\n };\n },\n {null: \"default\"}\n );\n}\n\n/**\n * Get Design System themes tokens.\n */\nexport function getThemesColorTokens(): `--color${string}`[] {\n const colorTokens = getRootCssProperties().filter((token): token is `--color${string}` =>\n token.startsWith(\"--color\")\n );\n\n // remove duplicates\n return [...new Set(colorTokens)];\n}\n\n/**\n * Get the value of a token for a given theme.\n * @param themeClass CSS class name of the theme\n * @param token Token name to get the value of\n * @returns The value of the token for the given theme.\n */\nexport function getThemeTokenValue(themeClass: string, token: `--${string}`): string | undefined {\n const themeStyle = Array.from(document.styleSheets)\n .flatMap((sheet) => Array.from(sheet.cssRules))\n .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule)\n .find((rule) => rule.selectorText.includes(themeClass));\n\n const value = themeStyle.styleMap.get(token)?.[0] as CSSStyleValue | undefined;\n\n return value instanceof CSSVariableReferenceValue\n ? getComputedStyle(document.documentElement).getPropertyValue(value.variable)\n : value?.toString() ?? undefined;\n}\n\n/**\n * Get a Storybook Arg config for Design System color tokens.\n * Useful to configure a control for the stories.\n * @param nullable - If true, it will add a `null` option to the list of options, with a label of \"-\" to allow the user to deselect a color value.\n * @example ```\n * \"--z-component--background-color\": getColorTokenArgConfig()\n * ```\n */\nexport function getColorTokenArgConfig(nullable = false): Args {\n const colorTokens = getColorVars();\n if (nullable) {\n colorTokens.unshift(null);\n }\n\n return {\n options: colorTokens,\n control: {\n type: \"select\",\n labels: getColorVarsLabels(),\n },\n } satisfies Args;\n}\n"]}
|
|
@@ -30,6 +30,12 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
|
|
|
30
30
|
this.files = [];
|
|
31
31
|
this.uploadBtnLabel = "allega";
|
|
32
32
|
this.dragAndDropLabel = "Rilascia i file in questa area per allegarli.";
|
|
33
|
+
this.allowedFilesMessage = undefined;
|
|
34
|
+
this.uploadClickableMessage = "Carica";
|
|
35
|
+
this.uploadMessage = "o trascina dal tuo computer";
|
|
36
|
+
this.errorModalTitle = "Errore di caricamento";
|
|
37
|
+
this.errorModalMessage = undefined;
|
|
38
|
+
this.uploadedFilesLabel = "File appena caricati";
|
|
33
39
|
this.hasFileSection = true;
|
|
34
40
|
this.invalidFiles = undefined;
|
|
35
41
|
}
|
|
@@ -138,13 +144,17 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
|
|
|
138
144
|
fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;
|
|
139
145
|
}
|
|
140
146
|
const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;
|
|
141
|
-
return h("span", { class: "body-3" },
|
|
147
|
+
return (h("span", { class: "body-3" }, this.allowedFilesMessage
|
|
148
|
+
? this.allowedFilesMessage
|
|
149
|
+
: fileFormatString || fileWeightString
|
|
150
|
+
? finalString
|
|
151
|
+
: null));
|
|
142
152
|
}
|
|
143
153
|
renderFileSection() {
|
|
144
154
|
if (!this.hasFileSection) {
|
|
145
155
|
return;
|
|
146
156
|
}
|
|
147
|
-
return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("span", { class: "heading-4-sb" },
|
|
157
|
+
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 })));
|
|
148
158
|
}
|
|
149
159
|
renderInput() {
|
|
150
160
|
return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
|
|
@@ -163,12 +173,12 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
|
|
|
163
173
|
renderUploadLink() {
|
|
164
174
|
return [
|
|
165
175
|
this.renderInput(),
|
|
166
|
-
h("span", { class: "body-1 upload-link-text" },
|
|
176
|
+
h("span", { class: "body-1 upload-link-text" }, h("span", { tabIndex: 0, class: "body-1-sb upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
|
|
167
177
|
if (e.code == "Space" || e.code == "Enter") {
|
|
168
178
|
e.preventDefault();
|
|
169
179
|
this.input.click();
|
|
170
180
|
}
|
|
171
|
-
}, ref: (val) => (this.uploadLink = val) },
|
|
181
|
+
}, ref: (val) => (this.uploadLink = val) }, this.uploadClickableMessage), " ", this.uploadMessage),
|
|
172
182
|
];
|
|
173
183
|
}
|
|
174
184
|
renderDefaultMode() {
|
|
@@ -191,12 +201,12 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
|
|
|
191
201
|
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 : "", "."));
|
|
192
202
|
}
|
|
193
203
|
handleErrorModalContent() {
|
|
194
|
-
return (h("div", { slot: "modalContent" }, h("div", { class: "modal-wrapper" }, h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
|
|
204
|
+
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]) => {
|
|
195
205
|
return h("span", { class: "body-3" }, this.formatErrorString(key, value));
|
|
196
|
-
})))));
|
|
206
|
+
}))))));
|
|
197
207
|
}
|
|
198
208
|
render() {
|
|
199
|
-
return (h(Host, { key: '
|
|
209
|
+
return (h(Host, { key: '30d78f7ce88aa6e994de1355cf4bb8bbc79e6f85' }, h("div", { key: '95a606aeda5279d50acb1b127f2d4784ccd95411', tabIndex: 0, class: `container ${this.getType()}` }, this.mainTitle && this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (h("z-modal", { key: '576e0e283b6fc92d6099a94178fde4c4eaa280b9', 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()))));
|
|
200
210
|
}
|
|
201
211
|
get el() { return this; }
|
|
202
212
|
static get style() { return ZFileUploadStyle0; }
|
|
@@ -209,6 +219,12 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
|
|
|
209
219
|
"description": [1],
|
|
210
220
|
"uploadBtnLabel": [1, "upload-btn-label"],
|
|
211
221
|
"dragAndDropLabel": [1, "drag-and-drop-label"],
|
|
222
|
+
"allowedFilesMessage": [1, "allowed-files-message"],
|
|
223
|
+
"uploadClickableMessage": [1, "upload-clickable-message"],
|
|
224
|
+
"uploadMessage": [1, "upload-message"],
|
|
225
|
+
"errorModalTitle": [1, "error-modal-title"],
|
|
226
|
+
"errorModalMessage": [1, "error-modal-message"],
|
|
227
|
+
"uploadedFilesLabel": [1, "uploaded-files-label"],
|
|
212
228
|
"hasFileSection": [4, "has-file-section"],
|
|
213
229
|
"files": [32],
|
|
214
230
|
"invalidFiles": [32],
|