@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

package/dist/collection/components/deprecated/z-section-title/index.js

@@ -11,21 +11,14 @@ import { DividerSize, ZSectionTitleDividerPosition } from "../../../beans";
  */
 export class ZSectionTitle {
     constructor() {
-        /**
-         * Divider position for the primary title.
-         * This prop only works if the secondary title is not set.
-         */
         this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
-        /**
-         * Whether the primary title text is uppercase.
-         */
         this.uppercase = true;
     }
     componentWillRender() {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: 'b2a5c1767c66f1b993f95c4907e5b6ac4555a7a5' }, h("slot", { key: 'dd96a1b84d003243f6a48a074c3ebe92c5b3c3e3', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: '8de1932f1eee5210277e73ba1a25359570a2ab06', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'd0f29c94936e5ab2a7491b3b6273ce51a1c8a626', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '13f04775afe18fc3f76bb09f48c415486896b421', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: 'b42238fc6f9ecdd6b773746c1d97d2ac2d3d5c31' }, h("slot", { key: 'da33aa876ed2469b5cddf5f1dc34914afb87110f', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'e8c76d87a57c34b802e467cd9e5b4212a3464350', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'd65a8312c2b71b0976c63c2de93d7a35bf675736', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '9e70bb6279e893957314eda5344ffc1a7289315a', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     static get is() { return "z-section-title"; }
     static get encapsulation() { return "shadow"; }
@@ -51,8 +44,7 @@ export class ZSectionTitle {
                         "ZSectionTitleDividerPosition": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ZSectionTitleDividerPosition",
-                            "referenceLocation": "ZSectionTitleDividerPosition"
+                            "id": "src/beans/index.tsx::ZSectionTitleDividerPosition"
                         }
                     }
                 },
@@ -62,10 +54,8 @@ export class ZSectionTitle {
                     "tags": [],
                     "text": "Divider position for the primary title.\nThis prop only works if the secondary title is not set."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "divider-position",
+                "reflect": false,
                 "defaultValue": "ZSectionTitleDividerPosition.BEFORE"
             },
             "uppercase": {
@@ -82,13 +72,12 @@ export class ZSectionTitle {
                     "tags": [],
                     "text": "Whether the primary title text is uppercase."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "uppercase",
+                "reflect": true,
                 "defaultValue": "true"
             }
         };
     }
     static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/deprecated/z-section-title/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-section-title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,4BAA4B,EAAC,MAAM,gBAAgB,CAAC;AAEzE;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;;+BAMwB,4BAA4B,CAAC,MAAM;yBAMvE,IAAI;;IAMhB,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAC/E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,iBAAiB,GAAG;YAC9B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,MAAM,IAAI,CAC1F,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH;YACD,6DAAM,IAAI,EAAC,eAAe,GAAG;YAC5B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,KAAK,IAAI,CACzF,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/deprecated/z-section-title/index.stories.js

@@ -54,3 +54,4 @@ export const SecondaryTitle = {
     </z-section-title>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/deprecated/z-section-title/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-section-title/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,4BAA4B,EAAC,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAmB,sBAAsB,EAAC,MAAM,gCAAgC,CAAC;AACxF,OAAO,SAAS,CAAC;AAIjB;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,iBAAiB,EAAE;YACjB,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,4BAA4B,CAAC;YACpD,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,kCAAkC,EAAE,sBAAsB,EAAE;KAC7D;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;QACjB,kCAAkC,EAAE,eAAe;KACpD;CACuC,CAAC;AAE3C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE;QACJ,eAAe,EAAE,4BAA4B,CAAC,MAAM;KACrD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;mBAC1B,IAAI,CAAC,SAAS;kDACiB,IAAI,CAAC,kCAAkC,CAAC;;;;GAIvF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;SAC7B;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;mBAEL,IAAI,CAAC,SAAS;kDACiB,IAAI,CAAC,kCAAkC,CAAC;;;;;GAKvF;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZSectionTitle} from \".\";\nimport {ZSectionTitleDividerPosition} from \"../../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZSectionTitleStoriesArgs = ZSectionTitle & CSSVarsArguments<\"z-section-title--divider-color\">;\n\n/**\n * ⚠️ This component is **deprecated** and may be removed soon.\n * Use the typography tokens or classes instead (see `Typography/Typography classes` section).\n */\nconst StoryMeta = {\n  title: \"Deprecated/ZSectionTitle\",\n  component: \"z-section-title\",\n  argTypes: {\n    \"dividerPosition\": {\n      options: Object.values(ZSectionTitleDividerPosition),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    \"--z-section-title--divider-color\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"uppercase\": true,\n    \"--z-section-title--divider-color\": \"var(--red500)\",\n  },\n} satisfies Meta<ZSectionTitleStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZSectionTitleStoriesArgs>;\n\nexport const PrimaryTitleOnly = {\n  args: {\n    dividerPosition: ZSectionTitleDividerPosition.BEFORE,\n  },\n  render: (args) => html`\n    <z-section-title\n      .dividerPosition=${args.dividerPosition}\n      .uppercase=${args.uppercase}\n      .style=\"--z-section-title--divider-color: ${args[\"--z-section-title--divider-color\"]}\"\n    >\n      <h4 slot=\"primary-title\">Primary title</h4>\n    </z-section-title>\n  `,\n} satisfies Story;\n\nexport const SecondaryTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"dividerPosition\"],\n    },\n  },\n  render: (args) => html`\n    <z-section-title\n      .uppercase=${args.uppercase}\n      .style=\"--z-section-title--divider-color: ${args[\"--z-section-title--divider-color\"]}\"\n    >\n      <h5 slot=\"secondary-title\">Secondary title</h5>\n      <h4 slot=\"primary-title\">Primary title</h4>\n    </z-section-title>\n  `,\n} satisfies Story;\n"]}

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class ZDragdropArea {
     constructor() {
-        /** State that indicates if the user is dragging a file over the drag & drop area */
+        this.dragAndDropLabel = undefined;
         this.dragging = false;
     }
     onDrop(e) {
@@ -12,12 +12,12 @@ export class ZDragdropArea {
         }
     }
     render() {
-        return (h(Host, { key: '042a22ebd47c1bee49ca08121fa3ef23c99daa97', class: { dragover: this.dragging }, onDragOver: (e) => {
+        return (h(Host, { key: '32b072c1d8a73bfe406e587c2e9e0c7d43424615', class: { dragover: this.dragging }, onDragOver: (e) => {
                 e.preventDefault();
                 this.dragging = true;
             }, onDragLeave: () => {
                 this.dragging = false;
-            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '9f4cb47d47b9976a86f5eedba956aa3cf0939f81', class: "dragover-container" }, h("z-button", { key: 'fc12e55894affd3273bffa56f1508b0d1d23e92d' }, this.dragAndDropLabel)), h("slot", { key: '0f99ee53ef49d5792772b9993bade7d5b46e6c58' })));
+            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '8312cab9a38f7c4258ef705945717fb8b8ef4b92', class: "dragover-container" }, h("z-button", { key: '36bdf4d0361043294b29c5e7a7102344f74c2b67' }, this.dragAndDropLabel)), h("slot", { key: '8e60d77a01a662095594b085656492e96ac3b445' })));
     }
     static get is() { return "z-dragdrop-area"; }
     static get encapsulation() { return "shadow"; }
@@ -47,10 +47,8 @@ export class ZDragdropArea {
                     "tags": [],
                     "text": "drag & drop button label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "drag-and-drop-label"
+                "attribute": "drag-and-drop-label",
+                "reflect": false
             }
         };
     }
@@ -78,3 +76,4 @@ export class ZDragdropArea {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-dragdrop-area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOnF,MAAM,OAAO,aAAa;;;wBAOb,KAAK;;IAMR,MAAM,CAAC,CAAY;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EAChC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;YAE9B,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,mEAAW,IAAI,CAAC,gBAAgB,CAAY,CACxC;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** State that indicates if the user is dragging a file over the drag & drop area */\n  @State()\n  dragging = false;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.dragging = false;\n    if (e.dataTransfer.files.length) {\n      this.fileDropped.emit(e.dataTransfer.files);\n    }\n  }\n\n  render(): HTMLZDragdropAreaElement {\n    return (\n      <Host\n        class={{dragover: this.dragging}}\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragging = true;\n        }}\n        onDragLeave={() => {\n          this.dragging = false;\n        }}\n        onDrop={this.onDrop.bind(this)}\n      >\n        <div class=\"dragover-container\">\n          <z-button>{this.dragAndDropLabel}</z-button>\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -3,6 +3,8 @@ import { PopoverPosition, ZChipType } from "../../../beans";
 import { Breakpoints } from "../../../constants/breakpoints";
 export class ZFile {
     constructor() {
+        this.fileNumber = undefined;
+        this.fileName = undefined;
         this.allowPopover = false;
         this.popoverVisible = false;
     }
@@ -30,7 +32,7 @@ export class ZFile {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: 'b14de221b558a20b6a73755f4a299743fa5a7d23' }, this.allowPopover && (h("z-popover", { key: 'fc3a7c327d89a7a9ea6b9660d17d78de1922729c', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '7f33d40074ba639bd8da65132dad5b2fa1cf349e', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'ae8746950f0ee745c77a1b5602c4f6ecb0278afd', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '6ef36d2bebe82fbcb9919cce4c2a4c8d657ba255', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '7f9738fc5ab5714736fc9ce5f83cb31f41b0e099' }, this.allowPopover && (h("z-popover", { key: 'd5baa113aa7e90938197d6cbd4d90b6a952e4cc7', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: 'f4fc4a0a02c3475713b76ad1ece29dff2d514369', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '301e251425be64a0484dc397e3222d3790e14a80', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '5d3f8d4bdf1550b72e44aeed32a4cb59da15f5e8', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     static get is() { return "z-file"; }
     static get encapsulation() { return "scoped"; }
@@ -60,10 +62,8 @@ export class ZFile {
                     "tags": [],
                     "text": "File chip id"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "file-number"
+                "attribute": "file-number",
+                "reflect": false
             },
             "fileName": {
                 "type": "string",
@@ -79,10 +79,8 @@ export class ZFile {
                     "tags": [],
                     "text": "File name"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "file-name"
+                "attribute": "file-name",
+                "reflect": false
             }
         };
     }
@@ -133,3 +131,4 @@ export class ZFile {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACpG,OAAO,EAAC,eAAe,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,gCAAgC,CAAC;AAQ3D,MAAM,OAAO,KAAK;;;;4BAgBD,KAAK;8BAGH,KAAK;;IAQd,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC;IAGD,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,gBAAgB;;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;YACxE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,kDAAI,CAAC;IACvB,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,YAAY,IAAI,CACpB,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI;gBAEjB,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb;YACD,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO;gBAEvB,6DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {Breakpoints} from \"../../../constants/breakpoints\";\n\n@Component({\n  tag: \"z-file\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZFile {\n  private icon: HTMLElement;\n\n  private ellipsis?: HTMLSpanElement;\n\n  private chip?: HTMLZChipElement;\n\n  /** File chip id */\n  @Prop()\n  fileNumber: number;\n\n  /** File name */\n  @Prop()\n  fileName: string;\n\n  @State()\n  allowPopover = false;\n\n  @State()\n  popoverVisible = false;\n\n  @Element() el: HTMLZFileElement;\n\n  /** Emitted when a z-file component is removed from the DOM */\n  @Event()\n  removeFile: EventEmitter;\n\n  private removeFileHandler(): void {\n    this.removeFile.emit({fileName: this.fileName});\n    this.el.remove();\n  }\n\n  @Listen(\"mouseover\")\n  onMouseOver(): void {\n    this.popoverVisible = true;\n  }\n\n  @Listen(\"mouseleave\")\n  onMouseLeave(): void {\n    this.popoverVisible = false;\n  }\n\n  @Listen(\"interactiveIconClick\")\n  onInteractiveIconClick(): void {\n    this.removeFileHandler();\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n      this.allowPopover = true;\n    }\n\n    this.icon?.focus?.();\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLZFileElement {\n    return (\n      <Host>\n        {this.allowPopover && (\n          <z-popover\n            open={this.popoverVisible}\n            position={PopoverPosition.AUTO}\n            bindTo={this.chip}\n          >\n            <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n          </z-popover>\n        )}\n        <z-chip\n          ref={(el) => (this.chip = el as HTMLZChipElement)}\n          id={`chip-${this.fileNumber}`}\n          interactiveIcon=\"multiply-circled\"\n          type={ZChipType.DEFAULT}\n        >\n          <span\n            ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n            tabIndex={-1}\n          >\n            {this.fileName}\n          </span>\n        </z-chip>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -14,3 +14,4 @@ export const Default = {
       file-name="${args.fileName}"
     ></z-file>`,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;CACE,CAAC;AAExB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,wBAAwB;KACnC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;qBACa,IAAI,CAAC,UAAU;mBACjB,IAAI,CAAC,QAAQ;eACjB;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFile} from \".\";\nimport \"./index\";\n\nexport default {\n  title: \"ZFile\",\n  component: \"z-file\",\n} satisfies Meta<ZFile>;\n\nexport const Default = {\n  args: {\n    fileNumber: 1,\n    fileName: \"abcdefghilmnopqrst.jpg\",\n  },\n  render: (args) =>\n    html`<z-file\n      file-number=\"${args.fileNumber}\"\n      file-name=\"${args.fileName}\"\n    ></z-file>`,\n} satisfies StoryObj<ZFile>;\n"]}

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

@@ -1,36 +1,28 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { ZFileUploadType } from "../../../beans";
 export class ZFileUpload {
     constructor() {
-        /** Prop indicating the file upload type - can be default or dragdrop */
         this.type = ZFileUploadType.DEFAULT;
-        /** upoload button label */
+        this.buttonVariant = undefined;
+        this.acceptedFormat = undefined;
+        this.fileMaxSize = undefined;
+        this.mainTitle = undefined;
+        this.description = undefined;
         this.uploadBtnLabel = "allega";
-        /** drag & drop button label */
         this.dragAndDropLabel = "Rilascia i file in questa area per allegarli.";
-        /** upload clickable message */
+        this.allowedFilesMessage = undefined;
         this.uploadClickableMessage = "Carica";
-        /** upload message */
         this.uploadMessage = "o trascina dal tuo computer";
-        /** error modal title */
         this.errorModalTitle = "Errore di caricamento";
-        /** loaded files label */
+        this.errorModalMessage = undefined;
         this.uploadedFilesLabel = "File appena caricati";
-        /** uploaded files history rendering */
         this.hasFileSection = true;
-        /** Value to set on the file input's `name` attribute (for use with forms) */
         this.inputName = "z-file-upload";
-        /**
-         * Whether to show errors in the internal modal or leave the handling to the app.
-         * Errors will still be emitted.
-         */
         this.showErrors = true;
-        /** Internal store of the component type. It will change when viewport goes from desktop to tablet/mobile and vice versa */
         this._type = this.type;
-        /** Files added by the user */
         this.files = [];
-        /** Map of files whose upload caused an error and the relative errors, with the cause and a message */
         this.invalidFiles = new Map();
+        this.input = undefined;
     }
     /** Listen `removeFile` event sent from z-file component */
     onFileRemoved(e) {
@@ -178,7 +170,7 @@ export class ZFileUpload {
         });
     }
     render() {
-        return (h(Host, { key: '9f2aeeeb12f48f34a732137c809c48c23d6a190e' }, this.mainTitle && (h("div", { key: '63924f49200a966ed3e7244c685ae9df6eeefbc1', 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: 'e3c015962d22df4c1d769d6177417bbf8d6bcc93', modalid: `file-upload-${this.type}-error-modal`, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => this.resetErrors(), onModalBackgroundClick: () => this.resetErrors() }, h("div", { key: '0cc1b6a3a952e1e683a70b952af131b74e7021e0', slot: "modalContent" }, h("div", { key: '833875c9ffe28ad248a4cacd7249153c7230df0a', class: "modal-wrapper body-3" }, this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()))))));
+        return (h(Host, { key: '13ada780c37ca16c2153f8c1177864932fe299dd' }, this.mainTitle && (h("div", { key: 'dcf55ac93e6959136262d0422272ab4902c3cbed', 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: 'e7d8c001c513ab498779c752dc195ab03ec81a80', modalid: `file-upload-${this.type}-error-modal`, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => this.resetErrors(), onModalBackgroundClick: () => this.resetErrors() }, h("div", { key: 'e5262f2f8b42dfe38ad4b794b08b4bf6b83b4a7a', slot: "modalContent" }, h("div", { key: '5e50b460de47813678ea1e2d3a2a3e0e76d0a6d0', class: "modal-wrapper body-3" }, this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()))))));
     }
     static get is() { return "z-file-upload"; }
     static get encapsulation() { return "scoped"; }
@@ -204,8 +196,7 @@ export class ZFileUpload {
                         "ZFileUploadType": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ZFileUploadType",
-                            "referenceLocation": "ZFileUploadType"
+                            "id": "src/beans/index.tsx::ZFileUploadType"
                         }
                     }
                 },
@@ -215,10 +206,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "Prop indicating the file upload type - can be default or dragdrop"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "type",
+                "reflect": true,
                 "defaultValue": "ZFileUploadType.DEFAULT"
             },
             "buttonVariant": {
@@ -231,8 +220,7 @@ export class ZFileUpload {
                         "ButtonVariant": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ButtonVariant",
-                            "referenceLocation": "ButtonVariant"
+                            "id": "src/beans/index.tsx::ButtonVariant"
                         }
                     }
                 },
@@ -242,10 +230,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "Prop indicating the button variant"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-variant"
+                "attribute": "button-variant",
+                "reflect": false
             },
             "acceptedFormat": {
                 "type": "string",
@@ -261,10 +247,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "accepted-format"
+                "attribute": "accepted-format",
+                "reflect": false
             },
             "fileMaxSize": {
                 "type": "number",
@@ -280,10 +264,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "Max file dimension in Megabyte"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "file-max-size"
+                "attribute": "file-max-size",
+                "reflect": false
             },
             "mainTitle": {
                 "type": "string",
@@ -299,10 +281,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "Title"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "main-title"
+                "attribute": "main-title",
+                "reflect": false
             },
             "description": {
                 "type": "string",
@@ -318,10 +298,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "Description"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description"
+                "attribute": "description",
+                "reflect": false
             },
             "uploadBtnLabel": {
                 "type": "string",
@@ -337,10 +315,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "upoload button label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "upload-btn-label",
+                "reflect": false,
                 "defaultValue": "\"allega\""
             },
             "dragAndDropLabel": {
@@ -357,10 +333,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "drag & drop button label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "drag-and-drop-label",
+                "reflect": false,
                 "defaultValue": "\"Rilascia i file in questa area per allegarli.\""
             },
             "allowedFilesMessage": {
@@ -377,10 +351,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "allowed file message"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "allowed-files-message"
+                "attribute": "allowed-files-message",
+                "reflect": false
             },
             "uploadClickableMessage": {
                 "type": "string",
@@ -396,10 +368,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "upload clickable message"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "upload-clickable-message",
+                "reflect": false,
                 "defaultValue": "\"Carica\""
             },
             "uploadMessage": {
@@ -416,10 +386,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "upload message"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "upload-message",
+                "reflect": false,
                 "defaultValue": "\"o trascina dal tuo computer\""
             },
             "errorModalTitle": {
@@ -436,10 +404,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "error modal title"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "error-modal-title",
+                "reflect": false,
                 "defaultValue": "\"Errore di caricamento\""
             },
             "errorModalMessage": {
@@ -456,10 +422,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "error modal message"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "error-modal-message"
+                "attribute": "error-modal-message",
+                "reflect": false
             },
             "uploadedFilesLabel": {
                 "type": "string",
@@ -475,10 +439,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "loaded files label"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "uploaded-files-label",
+                "reflect": false,
                 "defaultValue": "\"File appena caricati\""
             },
             "hasFileSection": {
@@ -495,10 +457,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "uploaded files history rendering"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "has-file-section",
+                "reflect": false,
                 "defaultValue": "true"
             },
             "inputName": {
@@ -515,10 +475,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "Value to set on the file input's `name` attribute (for use with forms)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "input-name",
+                "reflect": false,
                 "defaultValue": "\"z-file-upload\""
             },
             "showErrors": {
@@ -535,10 +493,8 @@ export class ZFileUpload {
                     "tags": [],
                     "text": "Whether to show errors in the internal modal or leave the handling to the app.\nErrors will still be emitted."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "show-errors",
+                "reflect": false,
                 "defaultValue": "true"
             }
         };
@@ -658,3 +614,4 @@ export class ZFileUpload {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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, 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  /** Input ref */\n  @State()\n  private input: HTMLInputElement;\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 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.fileName);\n  }\n\n  /** Listen fileDropped event sent from z-dragdrop-area component */\n  @Listen(\"fileDropped\")\n  fileDroppedListener(e: CustomEvent): void {\n    this.input.files = e.detail;\n    this.checkFilesValidity(this.input.files);\n  }\n\n  /** Get the list of uploaded files */\n  @Method()\n  async getFiles(): Promise<File[]> {\n    return this.files;\n  }\n\n  /** Remove a previously uploaded file */\n  @Method()\n  async removeFile(fileName: string): Promise<void> {\n    const files = this.files;\n    const index = files.findIndex((file) => file.name === fileName);\n    if (index >= 0) {\n      files.splice(index, 1);\n      this.files = [...files];\n    }\n  }\n\n  private checkFilesValidity(files: FileList): Map<string, string[]> {\n    if (!files.length) {\n      return;\n    }\n\n    Array.from(files).forEach((file: File) => {\n      const fileSize = file.size / 1024 / 1024;\n      const fileFormatOk = this.acceptedFormat\n        .split(\",\")\n        .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n      const fileSizeOk = fileSize <= this.fileMaxSize;\n      if (fileSizeOk && fileFormatOk && !this.files.find((f) => f.name === file.name)) {\n        this.files = [...this.files, file];\n        this.fileInput.emit(file);\n        this.input.value = \"\";\n\n        return;\n      }\n\n      const sizeError = `Il file ${file.name} supera il limite di ${this.fileMaxSize}MB`;\n      const formatError = `Il file ${file.name} ha un formato non supportato`;\n      const errors = [\n        !fileSizeOk && {cause: \"size\" as const, message: sizeError},\n        !fileFormatOk && {cause: \"format\" as const, message: formatError},\n      ].filter(Boolean);\n      this.invalidFiles.set(file.name, errors);\n      this.invalidFiles = new Map(this.invalidFiles); // trigger state update\n      this.fileError.emit({file: file.name, errors});\n    });\n  }\n\n  private resetErrors(): void {\n    this.invalidFiles = new Map<string, ZFileUploadError[]>();\n  }\n\n  private onFilesChange(e: Event): void {\n    this.checkFilesValidity((e.target as HTMLInputElement).files);\n  }\n\n  componentWillLoad(): void {\n    // force default type on mobile and tablet viewport\n    const mql = window.matchMedia(\"(max-width: 1151px)\");\n    this._type = mql.matches ? ZFileUploadType.DEFAULT : this.type;\n    mql.addEventListener(\"change\", (e) => {\n      this._type = e.matches ? ZFileUploadType.DEFAULT : this.type;\n    });\n  }\n\n  componentDidUpdate(): void {\n    if (!this.showErrors || !this.invalidFiles.size) {\n      return;\n    }\n\n    this.errorModal.open();\n  }\n\n  private renderDescription(cssClass): HTMLElement | undefined {\n    if (!this.description) {\n      return;\n    }\n\n    return (\n      <span\n        id=\"description\"\n        class={cssClass}\n      >\n        {this.description}\n      </span>\n    );\n  }\n\n  private renderAllowedFilesMessage(): HTMLElement {\n    let fileFormatString = \"\";\n    let fileWeightString = \"\";\n\n    if (this.acceptedFormat) {\n      const fileFormat = this.acceptedFormat\n        .split(\", \")\n        .map((string) => string.substring(1).toUpperCase())\n        .join(\", \");\n      fileFormatString = ` nei formati ${fileFormat}`;\n    }\n\n    if (this.fileMaxSize) {\n      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n    }\n\n    const defaultMessage =\n      fileFormatString || fileWeightString ? `Puoi allegare file${fileFormatString}${fileWeightString}.` : undefined;\n\n    if (!this.allowedFilesMessage && !defaultMessage) {\n      return;\n    }\n\n    return <span class=\"allowed-files-message body-3\">{this.allowedFilesMessage || defaultMessage}</span>;\n  }\n\n  private renderFileSection(): HTMLElement {\n    if (!this.hasFileSection) {\n      return;\n    }\n\n    return (\n      <section class={{\"files-container\": true, \"hidden\": !this.files.length}}>\n        <div class=\"uploaded-files-label heading-3-sb\">{this.uploadedFilesLabel}</div>\n        <div class=\"files-wrapper\">\n          <slot name=\"files\" />\n        </div>\n      </section>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        type=\"file\"\n        name={this.inputName}\n        multiple\n        onChange={(e) => this.onFilesChange(e)}\n        accept={this.acceptedFormat}\n        ref={(val) => (this.input = val)}\n      />\n    );\n  }\n\n  private renderUploadButton(): unknown[] {\n    return [\n      <z-button\n        onClick={() => this.input.click()}\n        onKeyPress={(e) => {\n          if (e.code == \"Space\" || e.code == \"Enter\") {\n            e.preventDefault();\n            this.input.click();\n          }\n        }}\n        id=\"fileSelect\"\n        variant={this.buttonVariant}\n        icon=\"upload\"\n      >\n        {this.uploadBtnLabel}\n      </z-button>,\n      this.renderInput(),\n    ];\n  }\n\n  private renderUploadLink(): unknown[] {\n    return [\n      this.renderInput(),\n      <span class=\"body-1 upload-link-text\">\n        <span\n          tabIndex={0}\n          class=\"body-1-sb upload-link\"\n          onClick={() => this.input.click()}\n          onKeyPress={(e) => {\n            if (e.code == \"Space\" || e.code == \"Enter\") {\n              e.preventDefault();\n              this.input.click();\n            }\n          }}\n        >\n          {this.uploadClickableMessage}\n        </span>{\" \"}\n        {this.uploadMessage}\n      </span>,\n    ];\n  }\n\n  private renderDefaultMode(): unknown[] {\n    return [\n      this.renderDescription(\"body-3-sb\"),\n      this.renderAllowedFilesMessage(),\n      this.renderFileSection(),\n      this.renderUploadButton(),\n    ];\n  }\n\n  private renderDragDropMode(): unknown[] {\n    return [\n      this.renderFileSection(),\n      <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n        <div class=\"text-container\">\n          {this.renderDescription(\"body-1\")}\n          {this.renderUploadLink()}\n          {this.renderAllowedFilesMessage()}\n        </div>\n      </z-dragdrop-area>,\n    ];\n  }\n\n  private renderFileErrors(): HTMLElement[] {\n    return Array.from(this.invalidFiles).map(([fileName, errors]) => {\n      const prefix = `Il file ${fileName}`;\n\n      return (\n        <span class=\"error-message\">\n          Il file <span class=\"body-3-sb\">{fileName}</span>\n          {errors.map(({message}) => message.replace(prefix, \"\")).join(\" e \")}.\n        </span>\n      );\n    });\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        {this.mainTitle && (\n          <div\n            id=\"title\"\n            class=\"heading-3-sb\"\n          >\n            {this.mainTitle}\n          </div>\n        )}\n        {this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n        {!!this.invalidFiles.size && this.showErrors && (\n          <z-modal\n            modalid={`file-upload-${this.type}-error-modal`}\n            ref={(val) => (this.errorModal = val)}\n            modaltitle={this.errorModalTitle}\n            onModalClose={() => this.resetErrors()}\n            onModalBackgroundClick={() => this.resetErrors()}\n          >\n            <div slot=\"modalContent\">\n              <div class=\"modal-wrapper body-3\">\n                {this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()}\n              </div>\n            </div>\n          </z-modal>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -137,3 +137,4 @@ export const DragdropEnglish = {
         });
       </script>`,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/file-upload/z-file-upload/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZFileUpload} from \".\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZFileUpload\",\n  component: \"z-file-upload\",\n  argTypes: {\n    type: {\n      options: Object.values(ZFileUploadType),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    buttonVariant: {\n      options: Object.values(ButtonVariant),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    fileMaxSize: 50,\n    acceptedFormat: \".pdf, .doc, .tiff, .png, .jpg\",\n    mainTitle: \"Allega un file\",\n    description: \"Vuoi allegare un file per chiarire meglio la tua richiesta?\",\n    uploadBtnLabel: \"allega\",\n    hasFileSection: true,\n    showErrors: true,\n  },\n} satisfies Meta<ZFileUpload>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZFileUpload>;\n\nexport const Default = {\n  args: {\n    buttonVariant: ButtonVariant.PRIMARY,\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <z-file-upload\n        type=${ZFileUploadType.DEFAULT}\n        .showErrors=${args.showErrors}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .buttonVariant=${args.buttonVariant}\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .uploadBtnLabel=${args.uploadBtnLabel}\n      />\n      <script>\n        fileNumber = 0;\n        document.addEventListener(\"fileInput\", (e) => {\n          fileNumber++;\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"file-number\", fileNumber);\n          chip.setAttribute(\"file-name\", item.name);\n          document.querySelector(\"z-file-upload\")?.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n\nexport const Dragdrop = {\n  args: {\n    dragAndDropLabel: \"Rilascia i file in questa area per allegarli.\",\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <br />\n      <z-file-upload\n        type=${ZFileUploadType.DRAGDROP}\n        .showErrors=${args.showErrors}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .dragAndDropLabel=${args.dragAndDropLabel}\n      />\n      <script>\n        document.addEventListener(\"fileInput\", (e) => {\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"filetype\", item.type);\n          chip.setAttribute(\"file-name\", item.name);\n          document.querySelector(\"z-file-upload\")?.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n\nexport const DragdropEnglish = {\n  args: {\n    mainTitle: \"Attach a file\",\n    description: \"Do you want to attach a file to clarify your request?\",\n    uploadBtnLabel: \"Attach\",\n    dragAndDropLabel: \"Drop the image here\",\n    allowedFilesMessage: \"You can upload files in the format PDF, DOC, TIFF, PNG, JPG for a maximum of 50MB\",\n    uploadClickableMessage: \"Load\",\n    uploadMessage: \"or drag from your computer\",\n    errorModalTitle: \"Loading error\",\n    errorModalMessage: \"The file does not respect the allowed parameters.\",\n    uploadedFilesLabel: \"Uploaded files\",\n  },\n  render: (args) =>\n    html`<h4 class=\"heading-4\">\n        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before\n        using it!\n      </h4>\n      <br />\n      <z-file-upload\n        type=${ZFileUploadType.DRAGDROP}\n        .showErrors=${args.showErrors}\n        .hasFileSection=${args.hasFileSection}\n        description=\"${args.description}\"\n        .fileMaxSize=${args.fileMaxSize}\n        .acceptedFormat=${args.acceptedFormat}\n        .mainTitle=${args.mainTitle}\n        .dragAndDropLabel=${args.dragAndDropLabel}\n        .allowedFilesMessage=${args.allowedFilesMessage}\n        .uploadClickableMessage=${args.uploadClickableMessage}\n        .uploadMessage=${args.uploadMessage}\n        .errorModalTitle=${args.errorModalTitle}\n        .errorModalMessage=${args.errorModalMessage}\n        .uploadedFilesLabel=${args.uploadedFilesLabel}\n        .uploadBtnLabel=${args.uploadBtnLabel}\n      />\n      <script>\n        document.addEventListener(\"fileInput\", (e) => {\n          const item = e.detail;\n          const chip = document.createElement(\"Z-FILE\");\n          chip.setAttribute(\"slot\", \"files\");\n          chip.setAttribute(\"filetype\", item.type);\n          chip.setAttribute(\"file-name\", item.name);\n          document.querySelector(\"z-file-upload\")?.appendChild(chip);\n        });\n      </script>`,\n} satisfies Story;\n"]}

package/dist/collection/components/index.js

@@ -6,3 +6,4 @@
 //
 // Must be fixed
 //
+//# sourceMappingURL=index.js.map

package/dist/collection/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,mBAAmB;AACnB,EAAE;AACF,oEAAoE;AACpE,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,EAAE","sourcesContent":["//\n// Temp workaround:\n//\n// Empty file to prevent errors when importing beans in stencil apps\n// Stencil apps with React bindings will not work\n//\n// Must be fixed\n//\n"]}