npm - @zanichelli/albe-web-components - Versions diffs - 17.0.0 → 17.0.2 - Mend

@zanichelli/albe-web-components 17.0.0 → 17.0.2

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.

Files changed (695) hide show

package/dist/components/z-book-card-deprecated.js CHANGED Viewed

@@ -123,7 +123,7 @@ const ZBookCardDeprecated$1 = /*@__PURE__*/ proxyCustomElement(class ZBookCardDe
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '3f1180dbc4753548ce11a6827a9c4c0d5080ec71', class: {
+        return (h("article", { key: 'a2248d9206aec07d317dddb8cb8d6061eccc7a53', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));

package/dist/components/z-book-card.js CHANGED Viewed

@@ -113,9 +113,9 @@ const ZBookCard$1 = /*@__PURE__*/ proxyCustomElement(class ZBookCard extends HTM
             }, "aria-hidden": "true" })));
     }
     render() {
-        return (h("article", { key: '995a31329fdf85453bb26cbb42be924fba6c28bb', class: {
+        return (h("article", { key: 'a2b8d8a72f3868b6e846e552aa6b48012334b15b', class: {
                 [this.variant]: true,
-            } }, h("div", { key: 'd3bd68272b601c8e40e82da7f676900ff695b0ce', class: "main-content" }, this.renderCover(), h("div", { key: '7912fe6ec4b4b5b5bdf7594c6458841d5162c21d', class: "card-info" }, h("div", { key: '06bd27cc9a9a570232fa2e57b6a0616f82e072ac', class: "book-data" }, h("div", { key: '86042f5bc869d7da2bbc85ddf6b5ae8ec5392f94', class: "authors-title-cta-section" }, h("div", { key: 'e24123d9ef8631156c08b61c39729cc2fddfa44e', class: "authors body-4", "aria-description": "autori" }, this.authors), this.renderOperaTitle(), h("slot", { key: 'a441440afe2f15ffd43dcd7ac9dc307c54565f3f', name: "cta" })), h("div", { key: 'fb61ed950c98f1a8c76fe93f1ead60a2e6ecc6ad', class: "isbn-tags-link-section" }, h("div", { key: '5039b8f43161542692ed6004516159ebf36b31ef', class: "isbn-tags-section" }, h("div", { key: 'd8a79f00867e0eff27677accee806d0c14063fc4', class: "volume-title body-4" }, this.volumeTitle), h("div", { key: 'e28692cc30512b64fa6f7a4aebc38d26f84fb4de', class: "isbn body-4-sb", "aria-description": `isbn ${this.isbnLabel}` }, this.isbn, " ", this.renderIsbnLabel()), h("div", { key: '0bba463af67af4e6f45188a89673cf57a4ca84db', class: "tags" }, this.renderTags())), h("div", { key: 'a62fdf6c196fa5d658c1c71046297251b43a9cce', class: "link-section" }, h("div", { key: '62c16d7975cc5f99aaaf8f188bcbce7cd15fd34f', class: "catalog-link" }, this.catalogUrl && (h("a", { key: '51f9b145b1fcab1f68626bbd00202a1d897631d6', href: this.catalogUrl, target: "_blank", class: "z-link z-link-icon body-4-sb", onClick: () => this.emitCatalogClick() }, "Scheda catalogo", h("z-icon", { key: 'a1335bf42f6cc13014605679229f6c8702152562', name: "arrow-quad-north-east", height: 16, width: 16, fill: "color-primary01-icon" })))), this.adoption && h("div", { key: '51fbbef3b775af8920708c39d2389c05524fe550', class: "adoption-tag body-5-sb" }, "adottato")))), h("div", { key: 'fd73faa9f38d4a6642884bf04ae9f8e1c076e8b2', class: "ebook-container" }, h("slot", { key: 'dd6f6234eb44670fd33d8f4d4791beca5c58ba9d', name: "ebook" }, this.ebookUrl && (h("div", { key: '355d4c5ad17493694f7b7f28391919aa5534f2a6', class: "ebook" }, h("div", { key: 'd8309fa1e2ca8d75ae09956c911e09b6afec0b9a' }, h("div", { key: '31bfc193df2a7f54618db398a505b031aca2ba69', class: "app-name" }, h("img", { key: 'a76eafe70da54bb4b98c9933595174d1cac5ead8', class: "ebook-logo", "aria-hidden": "true" }), h("div", { key: '9eb1125a6dfd19ed330bb42a22ea0339c339dff8', class: "body-4-sb" }, h("span", { key: '2a5ee331b79a69bbbaa2e900954535dace718c8a', class: "laz" }, "laZ"), " Ebook")), this.variant === BookCardVariant.LANDSCAPE && (h("div", { key: '188812b860af28a7f3cc3dbb98e38c5d8c1c93e2', class: "body-5" }, "Anche nella versione libro liquido con", " ", h("button", { key: 'ccd26e5735e8ca5d201b2c790aa4e91372552644', class: "body-5-sb immersive-reader z-link", onClick: () => this.emitImmersiveReaderClick(), tabIndex: 0 }, "strumento di lettura immersiva")))), h("z-button", { key: 'fc84714fb404ec40f98a340ec2689d054f325bdb', size: ControlSize.X_SMALL, href: this.ebookUrl, target: "_blank", onClick: () => this.emitEbookClick(), role: "link", "aria-description": `leggi l'ebook ${this.operaTitle} su laZ Ebook` }, "leggi ebook"))))))), h("slot", { key: '213b1e5f32fe308b29f307815e8b9eb597182c45', name: "apps" })));
+            } }, h("div", { key: '24c08d9d84dc669395b1c255f6730a7a9d536886', class: "main-content" }, this.renderCover(), h("div", { key: '91389d7afb5971377c098cf8fb2dee3c870e870c', class: "card-info" }, h("div", { key: '3802460d92d4324c032ec3de0b978ce346b46827', class: "book-data" }, h("div", { key: 'e901801f93e778721b5def9c2cea89e4ae86a500', class: "authors-title-cta-section" }, h("div", { key: '44367ab6d0cdbe447133018b5dc3a6b77c6a6a51', class: "authors body-4", "aria-description": "autori" }, this.authors), this.renderOperaTitle(), h("slot", { key: '50b0ac7e8dfbc13601e9e89077b8f42345af6633', name: "cta" })), h("div", { key: '8a537e6ceb34a39ff9b0c2402e0d0a8ca09fda36', class: "isbn-tags-link-section" }, h("div", { key: '8fe9ab44fe6023b1c4239a0df7af05b93d9e6684', class: "isbn-tags-section" }, h("div", { key: '718d0984d6b8b856e784ba910327a91b160b915e', class: "volume-title body-4" }, this.volumeTitle), h("div", { key: 'db66e0b7d648cae395ed29eb010d568a181f5544', class: "isbn body-4-sb", "aria-description": `isbn ${this.isbnLabel}` }, this.isbn, " ", this.renderIsbnLabel()), h("div", { key: '70aeccbe9e186547b4b750a99e5509c2efa927d4', class: "tags" }, this.renderTags())), h("div", { key: '6764f5d95bf2ebf570087bb625bbda046578549a', class: "link-section" }, h("div", { key: '07bca683d50d1c8982b1904f856b37acbb2a94bd', class: "catalog-link" }, this.catalogUrl && (h("a", { key: '01bc30aa009c61f2a0e337683273a0dc1bcf86e6', href: this.catalogUrl, target: "_blank", class: "z-link z-link-icon body-4-sb", onClick: () => this.emitCatalogClick() }, "Scheda catalogo", h("z-icon", { key: '575ac4f528c9f6ecdd9a0f99b6b451fd6c75030c', name: "arrow-quad-north-east", height: 16, width: 16, fill: "color-primary01-icon" })))), this.adoption && h("div", { key: '5f381db04e1398792697415abdb25f57bc448899', class: "adoption-tag body-5-sb" }, "adottato")))), h("div", { key: '515817df1083eed2331f7fb5a51224f1ae5e0b64', class: "ebook-container" }, h("slot", { key: 'c684f825978bf2eab57d248cbc8a272db93c18b7', name: "ebook" }, this.ebookUrl && (h("div", { key: '0fb20bf6c1f9bf7a5d64d7cc8a8e143e467612fa', class: "ebook" }, h("div", { key: '53586381ba841fc773fff4918032968950d390e9' }, h("div", { key: '377fa3bbfa6c215cf1f341bf83ba2524253ba2e6', class: "app-name" }, h("img", { key: 'f78e924f246524c9a6d676d72b49d336c0c56ede', class: "ebook-logo", "aria-hidden": "true" }), h("div", { key: '3790c83efb86debff6283fbb75b5b56ee6875e68', class: "body-4-sb" }, h("span", { key: 'd080a30fcc3249e2532305e9470e53dc8f77ce2b', class: "laz" }, "laZ"), " Ebook")), this.variant === BookCardVariant.LANDSCAPE && (h("div", { key: '081ec1e670240b675be096c5274e9d80995c760a', class: "body-5" }, "Anche nella versione libro liquido con", " ", h("button", { key: 'a89d47b79ebb44549a64dcda3dd8798b7420b241', class: "body-5-sb immersive-reader z-link", onClick: () => this.emitImmersiveReaderClick(), tabIndex: 0 }, "strumento di lettura immersiva")))), h("z-button", { key: 'd3be56ff617467506e86f6a4b471fea124c009e1', size: ControlSize.X_SMALL, href: this.ebookUrl, target: "_blank", onClick: () => this.emitEbookClick(), role: "link", "aria-description": `leggi l'ebook ${this.operaTitle} su laZ Ebook` }, "leggi ebook"))))))), h("slot", { key: 'fda1bd7c66a38d1ac63fa37c2601975a8c780819', name: "apps" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/z-breadcrumb.js CHANGED Viewed

@@ -207,10 +207,10 @@ const ZBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class ZBreadcrumb extends
         ];
     }
     render() {
-        return (h(Host, { key: '541f493c93ddcdd7c7df9184e467bfb1f7def53d', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'c7a56dbddef89e934a255921d4aacd645974f1b7', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '3d0996a611fe483de9a015c3ac5b25b06d5e302c', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '8c45a561fcdebb6c7685010dc7105b6c756025e1', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'a1f4c39fa8afd87d307746b66a942a1f2029cb1a' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '5cbdbcb8a14a471ae6dbad1d5d7eeb4ca3c8482b' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/z-button-sort.js CHANGED Viewed

@@ -45,7 +45,7 @@ const ZButtonSort$1 = /*@__PURE__*/ proxyCustomElement(class ZButtonSort extends
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '6a27bbc29c4feedda219d3c48351e98e5424fc35', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '415ed91622a75e04dae5df0112d892f14015af61', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '58bd9c2614021ee41fcd4f0f27ef3fa41771c7b8', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '66689c59c79cf1d6ad15640d424fbb3ac14edde2', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'c6638b7e129f261bbcc9a7c79f02080accb6eed6', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '6f2fdeea8f8d8c233d6b06ce6a77a550ca003c43', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '2b73a9480490742c954d9f9319a035092e857313', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'ffabdef711dfc8489d816c34fd7c52254ac8c89f', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '7086a8caa5146d54b93affa0d901dbb60248d64b', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '17d0cce1ca76cc916bf8ff2af67570b755d5a12d', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get style() { return ZButtonSortStyle0; }
 }, [1, "z-button-sort", {

package/dist/components/z-combobox.js CHANGED Viewed

@@ -266,7 +266,7 @@ const ZCombobox$1 = /*@__PURE__*/ proxyCustomElement(class ZCombobox extends HTM
         return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: '66f1ab362f8b85bbea1887f0b20408704983b505', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '69b13355a675561cb0748a743e7509f8b944615e', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/z-cover-hero.js CHANGED Viewed

@@ -31,9 +31,9 @@ const ZCoverHero$1 = /*@__PURE__*/ proxyCustomElement(class ZCoverHero extends H
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: 'b10d16e5490c00d087ec8677e5453a989aca05cd' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '15c2c9a401700c3503e74f74637c2cbf3b474805' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'c920eda8a79cd4b7f70f3cdc7e3690b57a117bd9', class: "main-container" }, h("div", { key: '4b74fde8b3d196a772489f381e46ef5690f1d9cf', class: "cover-container" }, h("slot", { key: '4a67176c23dd62d34bc69a0c236bf9adc3b5088c', name: "cover" })), h("slot", { key: 'e71151ae06cc7c30436af153d6192fc2faf4f6ba', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '269c88ee41679ea7730c202f4ca927a1868c5506', class: "main-container" }, h("div", { key: '67b039d0ba87fdb8a3520035104d9c6263ca5dc1', class: "cover-container" }, h("slot", { key: '3c330cafa143f57e9b4d6615d966c4d62cedd9c8', name: "cover" })), h("slot", { key: 'c092503e4d24f52535182e570edb67428d7a8aa9', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

package/dist/components/z-date-picker.js CHANGED Viewed

@@ -465,7 +465,7 @@ const ZDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class ZDatePicker extends
             } })));
     }
     render() {
-        return (h("div", { key: '4f525de164851c67135fc6b4ea7789f9b671d74c', class: {
+        return (h("div", { key: '5008fbf943acb8f5ad3575646938266579d59e90', class: {
                 "flatpickr-toggle-container": true,
                 [this.flatpickrPosition]: true,
                 [this.mode]: true,

package/dist/components/z-file-upload.js CHANGED Viewed

@@ -1,33 +1,25 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { v as ZFileUploadType, p as Device, D as DividerSize } from './index2.js';
-import { g as getDevice } from './utils.js';
-import { d as defineCustomElement$6 } from './index4.js';
-import { d as defineCustomElement$5 } from './index6.js';
+import { v as ZFileUploadType } from './index2.js';
+import { d as defineCustomElement$5 } from './index4.js';
 import { d as defineCustomElement$4 } from './index7.js';
 import { d as defineCustomElement$3 } from './index9.js';
 import { d as defineCustomElement$2 } from './index16.js';
-const stylesCss = ":host{color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:flex;flex-direction:column}:host .modal-wrapper{display:flex;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2)}:host .modal-wrapper>.files-wrapper{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:flex;flex-direction:column;margin:auto}:host .text-container .body-1{text-align:center}:host .text-container .upload-link{color:var(--color-text-link-blue);cursor:pointer}:host .text-container .upload-link:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none !important}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin:calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);font-size:calc(var(--space-unit) * 3);font-weight:var(--font-sb)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>.heading-4-sb{display:inline-block;margin:calc(var(--space-unit) * 3) 0;font-size:calc(var(--space-unit) * 2);font-weight:var(--font-sb)}:host([type=\"dragdrop\"])>.container>.files-container>.heading-4-sb{margin-top:0;margin-bottom:calc(var(--space-unit) * 3)}:host>.container>.files-container>.files-wrapper{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}:host([type=\"dragdrop\"])>.container>.files-container>z-divider{margin:calc(var(--space-unit) * 3) 0}:host .error-message{font-size:14px;font-weight:400;letter-spacing:0.16%;line-height:20px;text-align:left}:host .error-message>.file-name{font-weight:600}@media only screen and (min-width: 768px){:host>.container>z-button{align-self:flex-start}:host .modal-wrapper{padding:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){:host .modal-wrapper{padding:calc(var(--space-unit) * 4)}}";
+const stylesCss = ".sc-z-file-upload-h{display:flex;flex-direction:column;align-items:flex-start;color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-upload-h .modal-wrapper.sc-z-file-upload{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}.sc-z-file-upload-h .modal-wrapper.sc-z-file-upload>.files-wrapper.sc-z-file-upload{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}.sc-z-file-upload-h .text-container.sc-z-file-upload{display:flex;flex-direction:column;margin:auto;text-align:center}.sc-z-file-upload-h .text-container.sc-z-file-upload .upload-link.sc-z-file-upload{color:var(--color-text-link-blue);cursor:pointer;text-decoration:underline}.sc-z-file-upload-h .text-container.sc-z-file-upload .upload-link.sc-z-file-upload:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none !important}.sc-z-file-upload-h .text-container.sc-z-file-upload .upload-link-text.sc-z-file-upload{margin-bottom:var(--space-unit)}.sc-z-file-upload-h input[type=\"file\"].sc-z-file-upload{display:none}.sc-z-file-upload-h #title.sc-z-file-upload+#description.sc-z-file-upload{margin-top:var(--space-unit)}.sc-z-file-upload-h>*.sc-z-file-upload+z-button.sc-z-file-upload,.sc-z-file-upload-h>.files-container.sc-z-file-upload+*.sc-z-file-upload,.sc-z-file-upload-h>.files-container.sc-z-file-upload:not(:first-child){margin-top:calc(var(--space-unit) * 3)}.sc-z-file-upload-h>.files-container.hidden.sc-z-file-upload{display:none}.sc-z-file-upload-h>.files-container.sc-z-file-upload>.uploaded-files-label.sc-z-file-upload{margin-bottom:calc(var(--space-unit) * 2)}.sc-z-file-upload-h>.files-container.sc-z-file-upload>.files-wrapper.sc-z-file-upload{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}@media (min-width: 768px){.sc-z-file-upload-h>.container.sc-z-file-upload>z-button.sc-z-file-upload{align-self:flex-start}.sc-z-file-upload-h .modal-wrapper.sc-z-file-upload{padding:calc(var(--space-unit) * 3)}}@media (min-width: 1152px){.sc-z-file-upload-h .modal-wrapper.sc-z-file-upload{padding:calc(var(--space-unit) * 4)}}";
 const ZFileUploadStyle0 = stylesCss;
 const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.fileInput = createEvent(this, "fileInput", 7);
-        this.inputAttributes = {
-            type: "file",
-            id: "file-elem",
-            multiple: true,
-        };
+        this.fileError = createEvent(this, "fileError", 7);
         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;
@@ -37,100 +29,88 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
         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];
-            }
+        const index = files.findIndex((file) => file.name === fileName);
+        if (index >= 0) {
+            files.splice(index, 1);
+            this.files = [...files];
         }
     }
-    getType() {
-        if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {
-            return ZFileUploadType.DEFAULT;
-        }
-        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) {
@@ -143,31 +123,30 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
         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() {
@@ -178,13 +157,13 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
                         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(),
         ];
@@ -192,25 +171,21 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
     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()))))));
     }
-    get el() { return this; }
+    get host() { return this; }
     static get style() { return ZFileUploadStyle0; }
-}, [1, "z-file-upload", {
+}, [6, "z-file-upload", {
         "type": [513],
         "buttonVariant": [1, "button-variant"],
         "acceptedFormat": [1, "accepted-format"],
@@ -226,16 +201,19 @@ const ZFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class ZFileUpload extends
         "errorModalMessage": [1, "error-modal-message"],
         "uploadedFilesLabel": [1, "uploaded-files-label"],
         "hasFileSection": [4, "has-file-section"],
+        "inputName": [1, "input-name"],
+        "showErrors": [4, "show-errors"],
+        "_type": [32],
         "files": [32],
         "invalidFiles": [32],
         "getFiles": [64],
         "removeFile": [64]
-    }, [[0, "removeFile", "removeFileListener"], [0, "fileDropped", "fileDroppedListener"]]]);
+    }, [[0, "removeFile", "onFileRemoved"], [0, "fileDropped", "fileDroppedListener"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-file-upload", "z-button", "z-divider", "z-dragdrop-area", "z-icon", "z-modal"];
+    const components = ["z-file-upload", "z-button", "z-dragdrop-area", "z-icon", "z-modal"];
     components.forEach(tagName => { switch (tagName) {
         case "z-file-upload":
             if (!customElements.get(tagName)) {
@@ -243,11 +221,6 @@ function defineCustomElement$1() {
             }
             break;
         case "z-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "z-divider":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/components/z-file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-file-upload.js","mappings":"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","names":["ZFileUpload"],"sources":["src/components/file-upload/z-file-upload/styles.css?tag=z-file-upload&encapsulation=shadow","src/components/file-upload/z-file-upload/index.tsx"],"sourcesContent":[":host {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > .container {\n display: flex;\n flex-direction: column;\n}\n\n:host .modal-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: calc(var(--space-unit) * 2);\n}\n\n:host .modal-wrapper > .files-wrapper {\n display: flex;\n flex-direction: column;\n margin: calc(var(--space-unit) * 4);\n gap: var(--space-unit);\n}\n\n:host .text-container {\n display: flex;\n flex-direction: column;\n margin: auto;\n}\n\n:host .text-container .body-1 {\n text-align: center;\n}\n\n:host .text-container .upload-link {\n color: var(--color-text-link-blue);\n cursor: pointer;\n}\n\n:host .text-container .upload-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host .text-container .upload-link-text {\n margin-bottom: var(--space-unit);\n}\n\ninput#file-elem {\n display: none;\n}\n\n#title {\n display: inline-block;\n margin: calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);\n font-size: calc(var(--space-unit) * 3);\n font-weight: var(--font-sb);\n}\n\n:host > .container > z-button {\n display: inline-block;\n margin-top: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container.hidden {\n display: none;\n}\n\n:host > .container > .files-container > .heading-4-sb {\n display: inline-block;\n margin: calc(var(--space-unit) * 3) 0;\n font-size: calc(var(--space-unit) * 2);\n font-weight: var(--font-sb);\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > .heading-4-sb {\n margin-top: 0;\n margin-bottom: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container > .files-wrapper {\n display: flex;\n flex-wrap: wrap;\n column-gap: calc(var(--space-unit) * 2);\n row-gap: calc(var(--space-unit) * 2);\n}\n\n:host > .container > .files-container > z-divider {\n margin-top: calc(var(--space-unit) * 3);\n margin-bottom: 0;\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > z-divider {\n margin: calc(var(--space-unit) * 3) 0;\n}\n\n:host .error-message {\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0.16%;\n line-height: 20px;\n text-align: left;\n}\n\n:host .error-message > .file-name {\n font-weight: 600;\n}\n\n/* Tablet breakpoint /\n@media only screen and (min-width: 768px) {\n :host > .container > z-button {\n align-self: flex-start;\n }\n\n :host .modal-wrapper {\n padding: calc(var(--space-unit) 3);\n }\n}\n\n@media only screen and (min-width: 1152px) {\n :host .modal-wrapper {\n padding: calc(var(--space-unit) * 4);\n }\n}\n","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}
1	+ {"file":"z-file-upload.js","mappings":"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","names":["ZFileUpload"],"sources":["src/components/file-upload/z-file-upload/styles.css?tag=z-file-upload&encapsulation=scoped","src/components/file-upload/z-file-upload/index.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host .modal-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: calc(var(--space-unit) * 2);\n row-gap: calc(var(--space-unit) * 2);\n}\n\n:host .modal-wrapper > .files-wrapper {\n display: flex;\n flex-direction: column;\n margin: calc(var(--space-unit) * 4);\n gap: var(--space-unit);\n}\n\n:host .text-container {\n display: flex;\n flex-direction: column;\n margin: auto;\n text-align: center;\n}\n\n:host .text-container .upload-link {\n color: var(--color-text-link-blue);\n cursor: pointer;\n text-decoration: underline;\n}\n\n:host .text-container .upload-link:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host .text-container .upload-link-text {\n margin-bottom: var(--space-unit);\n}\n\n:host input[type=\"file\"] {\n display: none;\n}\n\n:host #title + #description {\n margin-top: var(--space-unit);\n}\n\n:host > * + z-button,\n:host > .files-container + ,\n:host > .files-container:not(:first-child) {\n margin-top: calc(var(--space-unit) 3);\n}\n\n:host > .files-container.hidden {\n display: none;\n}\n\n:host > .files-container > .uploaded-files-label {\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > .files-container > .files-wrapper {\n display: flex;\n flex-wrap: wrap;\n column-gap: calc(var(--space-unit) * 2);\n row-gap: calc(var(--space-unit) * 2);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n :host > .container > z-button {\n align-self: flex-start;\n }\n\n :host .modal-wrapper {\n padding: calc(var(--space-unit) 3);\n }\n}\n\n@media (min-width: 1152px) {\n :host .modal-wrapper {\n padding: calc(var(--space-unit) * 4);\n }\n}\n","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"],"version":3}

package/dist/components/z-file.js CHANGED Viewed

@@ -42,7 +42,7 @@ const ZFile$1 = /*@__PURE__*/ proxyCustomElement(class ZFile extends HTMLElement
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: 'b99ff5a4dd4faa2f964189e52264b8f5af79b61c' }, this.allowPopover && (h("z-popover", { key: '41b672aeaf252c2eb231371c622b3632bc8f5046', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '1c9b014b23e9e40c282e9044484a77bb966251c9', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'dd727841dc90cb19abf85156cdacb83632528e18', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'f4d54ff1d4930793da78b03098ccacfa8ca94d37', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '9a670c454baa87afc7d1c9e47a744eecaa074c68' }, this.allowPopover && (h("z-popover", { key: '8d5d38d65a09aee75d56b888b9828a3f8a9e1626', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: 'c24e0d8afecbe3fdfb6370c76ddc0db54f597497', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'a5c4ff0f9366bb59d581c9d48606d8989bbed678', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: 'eed1a949170a44f7ff618ec3e363923aea656742', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     get el() { return this; }
     static get style() { return ZFileStyle0; }

package/dist/components/z-info-box.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ZInfoBox$1 = /*@__PURE__*/ proxyCustomElement(class ZInfoBox extends HTMLE
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '770d8904081080758219f87d24f5a56846f1fad1', id: this.boxid }, h("slot", { key: 'a6fa079647709fc3c8326c2d73cdd1da884c4b58', name: "content" }), this.isclosable && (h("z-icon", { key: '63de143e010971175608c651d2d2f0c87ee98797', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: 'bff4d7fdd01fae2697f23b03515d9cb93a53127d', id: this.boxid }, h("slot", { key: 'a2d80c39c0cc7c115974a4d5da52c2189ab830c9', name: "content" }), this.isclosable && (h("z-icon", { key: '555579d0bf7c1e654055fe4c552c4e89af0fb513', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get style() { return ZInfoBoxStyle0; }
 }, [1, "z-info-box", {

package/dist/components/z-logo.js CHANGED Viewed

@@ -23,7 +23,7 @@ const ZLogo$1 = /*@__PURE__*/ proxyCustomElement(class ZLogo extends HTMLElement
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '7e752127614823afe2441a9d3d316d9974f593d1', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '43def5f659303a7fa03bdf8a48bf03dacc379dde', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get style() { return ZLogoStyle0; }
 }, [1, "z-logo", {