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

package/dist/collection/components/z-stepper-item/index.js

@@ -1,5 +1,12 @@
 import { Host, h } from "@stencil/core";
 export class ZStepperItem {
+    constructor() {
+        this.index = undefined;
+        this.href = undefined;
+        this.pressed = undefined;
+        this.checked = undefined;
+        this.disabled = undefined;
+    }
     getAttributes() {
         const href = this.href && !this.pressed && !this.disabled ? { onClick: () => (location.href = this.href) } : undefined;
         const role = href ? { role: "link" } : undefined;
@@ -8,7 +15,7 @@ export class ZStepperItem {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: 'acd637314062ec1e9700fcc22e0ced7c5dd653fa', role: "listitem" }, h("button", Object.assign({ key: 'aef1782ce8d72fc5a5379ab6b2abe3f29d3e4531', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'bbe3ac96d02e98a5434fbde7a9426698dd7fe6a3', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'c78b4f569cbe831b4ed2ecb2276c4f357d44b46a' }, h("slot", { key: '725a59150a00624f3ae3e742b34100b475b496e8' })))));
+        return (h(Host, { key: '91f2e37b743cbd76bad5b23d6a7038377ed325c3', role: "listitem" }, h("button", Object.assign({ key: '8f9c85524aff451dfa316fe050295cd17a95d817', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '5f28d57cc6bc5508655297367ac09252f6df9452', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'e24121243032ab104e2e19a373ec264db070525a' }, h("slot", { key: '06e7d27fa7a997c7fff44a539d065af3f7814880' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }
@@ -38,10 +45,8 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The number of the step item."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "index"
+                "attribute": "index",
+                "reflect": true
             },
             "href": {
                 "type": "string",
@@ -57,10 +62,8 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The href to navigate on click."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "href"
+                "attribute": "href",
+                "reflect": true
             },
             "pressed": {
                 "type": "boolean",
@@ -76,10 +79,8 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The pressed state of the item."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "pressed"
+                "attribute": "pressed",
+                "reflect": true
             },
             "checked": {
                 "type": "boolean",
@@ -95,10 +96,8 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The checked state of the item."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "checked"
+                "attribute": "checked",
+                "reflect": true
             },
             "disabled": {
                 "type": "boolean",
@@ -114,11 +113,10 @@ export class ZStepperItem {
                     "tags": [],
                     "text": "The disabled state of the item."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled"
+                "attribute": "disabled",
+                "reflect": true
             }
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-stepper-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-stepper-item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOvD,MAAM,OAAO,YAAY;;;;;;;;IA+Bf,aAAa;QACnB,MAAM,IAAI,GACR,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC1G,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,cAAc,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACtF,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAE/E,mEACK,IAAI,GACJ,IAAI,GACJ,OAAO,GACP,QAAQ,EACX;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,6EACE,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACnB,IAAI,CAAC,aAAa,EAAE;gBAExB,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAQ,IAAI,EAAC,WAAW,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAO;gBACtF;oBACE,8DAAQ,CACH,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-stepper-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepperItem {\n  /**\n   * The number of the step item.\n   */\n  @Prop({reflect: true})\n  index: number;\n\n  /**\n   * The href to navigate on click.\n   */\n  @Prop({reflect: true})\n  href: string;\n\n  /**\n   * The pressed state of the item.\n   */\n  @Prop({reflect: true})\n  pressed: boolean;\n\n  /**\n   * The checked state of the item.\n   */\n  @Prop({reflect: true})\n  checked: boolean;\n\n  /**\n   * The disabled state of the item.\n   */\n  @Prop({reflect: true})\n  disabled: boolean;\n\n  private getAttributes(): Record<string, unknown> {\n    const href =\n      this.href && !this.pressed && !this.disabled ? {onClick: () => (location.href = this.href)} : undefined;\n    const role = href ? {role: \"link\"} : undefined;\n    const current = this.pressed && !this.disabled ? {\"aria-current\": \"step\"} : undefined;\n    const tabindex = this.pressed || this.href === \"\" ? {tabIndex: -1} : undefined;\n\n    return {\n      ...href,\n      ...role,\n      ...current,\n      ...tabindex,\n    };\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class=\"stepper-item\"\n          disabled={this.disabled}\n          {...this.getAttributes()}\n        >\n          <div class=\"indicator\">{this.checked ? <z-icon name=\"checkmark\" /> : this.index}</div>\n          <span>\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-stepper-item/index.stories.js

@@ -56,3 +56,4 @@ export const Checked = {
       >${args.text}</z-stepper-item
     >`,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-stepper-item/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper-item/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAIjB,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,CAAC;QACR,IAAI,EAAE,YAAY;KACnB;CACsC,CAAC;AAE1C,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;SACpB,IAAI,CAAC,IAAI;MACZ;CACL,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepperItem} from \".\";\nimport \"./index\";\n\ntype ZStepperItemStoriesArgs = ZStepperItem & {text: string};\n\nexport default {\n  title: \"ZStepper/ZStepperItem\",\n  component: \"z-stepper-item\",\n  args: {\n    pressed: false,\n    disabled: false,\n    checked: false,\n    index: 1,\n    text: \"First Item\",\n  },\n} satisfies Meta<ZStepperItemStoriesArgs>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-stepper-item\n      index=${args.index}\n      ?pressed=${args.pressed}\n      ?disabled=${args.disabled}\n      ?checked=${args.checked}\n      >${args.text}</z-stepper-item\n    >`,\n};\n\nexport const Pressed = {\n  args: {\n    pressed: true,\n  },\n  render: (args) =>\n    html`<z-stepper-item\n      index=${args.index}\n      ?pressed=${args.pressed}\n      ?disabled=${args.disabled}\n      ?checked=${args.checked}\n      >${args.text}</z-stepper-item\n    >`,\n};\n\nexport const Disabled = {\n  args: {\n    disabled: true,\n  },\n  render: (args) =>\n    html`<z-stepper-item\n      index=${args.index}\n      ?pressed=${args.pressed}\n      ?disabled=${args.disabled}\n      ?checked=${args.checked}\n      >${args.text}</z-stepper-item\n    >`,\n};\n\nexport const Checked = {\n  args: {\n    checked: true,\n  },\n  render: (args) =>\n    html`<z-stepper-item\n      index=${args.index}\n      ?pressed=${args.pressed}\n      ?disabled=${args.disabled}\n      ?checked=${args.checked}\n      >${args.text}</z-stepper-item\n    >`,\n};\n"]}

package/dist/collection/components/z-tag/index.js

@@ -6,11 +6,17 @@ import { Host, h } from "@stencil/core";
  * @cssprop --z-tag-bg - background color of the z-tag.
  */
 export class ZTag {
+    constructor() {
+        this.icon = undefined;
+        this.expandable = undefined;
+    }
     render() {
-        return (h(Host, { key: '79058b7bd9a1c161e6bc55fc0a737e6f2f3c8a06', class: {
+        var _a;
+        const hasText = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0;
+        return (h(Host, { key: 'ed05949bf1f4fb03fdbecfaa7acb43bfbb6f8841', class: {
                 "expandable": this.expandable && !!this.icon,
-                "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && h("z-icon", { key: 'ac25c974cbb40a04bb83adabe53011bb4dd89dd3', name: this.icon }), h("div", { key: '4150a1f6301110f690a595c5e2b5169d90aa4802' }, h("slot", { key: 'd3f2e88bf2635ec142a71c5752f264cd9e0077f7' }))));
+                "has-text": hasText,
+            } }, this.icon && h("z-icon", { key: '72ebeed5930725102f4131acedeabc536d887a44', name: this.icon }), h("div", { key: '7528424efc94fad4b910f54365a20dd644962936' }, h("slot", { key: '951b325ae2b157d343fd6fbed8bc8d40fcdd9e37' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }
@@ -40,10 +46,8 @@ export class ZTag {
                     "tags": [],
                     "text": "[optional] Tag icon"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon"
+                "attribute": "icon",
+                "reflect": false
             },
             "expandable": {
                 "type": "boolean",
@@ -59,12 +63,11 @@ export class ZTag {
                     "tags": [],
                     "text": "[optional] Hide the text and show it on hover"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "expandable"
+                "attribute": "expandable",
+                "reflect": false
             }
         };
     }
     static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEhE;;;;;GAKG;AAOH,MAAM,OAAO,IAAI;;;;;IAWf,MAAM;;QACJ,MAAM,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,WAAW,0CAAE,IAAI,GAAG,MAAM,IAAG,CAAC,CAAC;QAEzD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC5C,UAAU,EAAE,OAAO;aACpB;YAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC;gBACE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n */\n@Component({\n  tag: \"z-tag\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZTag {\n  @Element() host: HTMLZTagElement;\n\n  /** [optional] Tag icon */\n  @Prop()\n  icon?: string;\n\n  /** [optional] Hide the text and show it on hover*/\n  @Prop()\n  expandable?: boolean;\n\n  render(): HTMLZTagElement {\n    const hasText = this.host.textContent?.trim().length > 0;\n\n    return (\n      <Host\n        class={{\n          \"expandable\": this.expandable && !!this.icon,\n          \"has-text\": hasText,\n        }}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <div>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-tag/index.stories.js

@@ -61,3 +61,4 @@ export const LongText = {
       >${args.text}
     </z-tag>`,
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,SAAS,CAAC;AAIjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;SACnC;QACD,oBAAoB,EAAE,sBAAsB,EAAE;QAC9C,YAAY,EAAE,sBAAsB,EAAE;KACvC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,aAAa;QACnB,UAAU,EAAE,KAAK;QACjB,IAAI,EAAE,MAAM;KACb;CAC8B,CAAC;AAElC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;aACK,IAAI,CAAC,IAAI;mBACH,IAAI,CAAC,UAAU;SACzB,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,oBAAoB,EAAE,IAAI;QAC1B,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,6EAA6E;QACrF,oBAAoB,EAAE,IAAI;QAC1B,YAAY,EAAE,IAAI;KACnB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,QAAQ,CAAC;QACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAChD,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC;KACjC,CAAC;cACM,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,UAAU;SAC1B,IAAI,CAAC,IAAI;aACL;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTag} from \".\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\ntype ZTagStoriesArgs = ZTag & CSSVarsArguments<\"z-tag-text-color\" | \"z-tag-bg\"> & {text: string};\n\nconst StoryMeta = {\n  title: \"ZTag\",\n  component: \"z-tag\",\n  argTypes: {\n    \"icon\": {\n      control: {\n        type: \"select\",\n      },\n      options: Object.keys(ICONS).sort(),\n    },\n    \"--z-tag-text-color\": getColorTokenArgConfig(),\n    \"--z-tag-bg\": getColorTokenArgConfig(),\n  },\n  args: {\n    text: \"In progress\",\n    expandable: false,\n    icon: \"gear\",\n  },\n} satisfies Meta<ZTagStoriesArgs>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-tag\n      icon=${args.icon}\n      expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n\nexport const ColorTokens = {\n  args: {\n    \"--z-tag-text-color\": null,\n    \"--z-tag-bg\": null,\n  },\n  render: (args) =>\n    html`<z-tag\n      style=${styleMap({\n        \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n        \"--z-tag-bg\": args[\"--z-tag-bg\"],\n      })}\n      .icon=${args.icon}\n      .expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n\nexport const LongText = {\n  args: {\n    \"text\": \"In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo\",\n    \"--z-tag-text-color\": null,\n    \"--z-tag-bg\": null,\n  },\n  render: (args) =>\n    html`<z-tag\n      style=${styleMap({\n        \"--z-tag-text-color\": args[\"--z-tag-text-color\"],\n        \"--z-tag-bg\": args[\"--z-tag-bg\"],\n      })}\n      .icon=${args.icon}\n      .expandable=${args.expandable}\n      >${args.text}\n    </z-tag>`,\n};\n"]}

package/dist/collection/components/z-toast-notification/index.js

@@ -16,13 +16,18 @@ const SLIDE_OUT_TRANSITION_MAP = {
  */
 export class ZToastNotification {
     constructor() {
-        /** toast notification autoclose can be paused */
+        this.isCloseEventCalled = false;
+        this.heading = undefined;
+        this.message = undefined;
+        this.closebutton = undefined;
+        this.autoclose = undefined;
         this.pauseonfocusloss = true;
-        /** toast notification can be draggable*/
+        this.type = undefined;
         this.isdraggable = true;
-        /** toast notification draggable percentage*/
         this.draggablepercentage = 80;
-        this.isCloseEventCalled = false;
+        this.transition = undefined;
+        this.percentage = undefined;
+        this.hasSlottedButton = undefined;
     }
     watchPropIsdraggable(newValue) {
         if (newValue) {
@@ -62,12 +67,10 @@ export class ZToastNotification {
     }
     visibilityChangeEventHandler() {
         if (document.visibilityState === "hidden") {
-            if (this.timeoutHandle) {
-                this.onBlur();
-            }
+            this.timeoutHandle && this.onBlur();
         }
-        else if (this.elapsedTime) {
-            this.onFocus();
+        else {
+            this.elapsedTime && this.onFocus();
         }
     }
     validateAutoclose() {
@@ -146,24 +149,22 @@ export class ZToastNotification {
                 this.startClosingTimeout(this.autoclose);
             }
         }
-        if (this.isdraggable) {
-            this.handleSlideOutDragAnimation();
-        }
+        this.isdraggable && this.handleSlideOutDragAnimation();
     }
     render() {
-        return (h(Host, { key: 'a49b625adab9d778f69c84e8bbe75ab565b894a1', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (h(Host, { key: 'a5863e7ce8d266fba25e2a0503b57413ea276420', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, h("div", { key: 'a2677d79e89624c6043343f45d2d182fa957ced8', class: "toast-notification-container" }, h("div", { key: '3abed7d27e3229a0ffb7136788bea5ff1f9b42ca', class: "toast-notification-content" }, h("div", { key: '8360c7b1918dd43a6e20efbd8a7acc698114708e', class: "toast-notification-text" }, this.heading && h("span", { key: '6e90506018c059dba7c4c7dbf0a6b691554af361', class: "title" }, this.heading), h("span", { key: '98808e38b56eef6f6fa7d1356a70e67727cefca8', class: "message" }, h("slot", { key: 'cd3c796108dcd61863aa2f6b675397226a7c597e', name: "message" }, this.message && h("span", { key: 'b10e53ae700e37ea0725cb99d4e58fcf14b6b137', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: 'd65f0c44ac30edf17510b2f046b6ebf1251122d3', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'cab7ecb2f6d03bf2b1e6f459db4dd00cf7fb9dc1', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: 'aec76fdc32aa73389b7ecede4a082b9873422a04', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, h("div", { key: '2ff98af17ebad39c00098acfc17b842784b268e0', class: "toast-notification-container" }, h("div", { key: '9e12233cc275ad5f4d00b72253005d1b6d45feab', class: "toast-notification-content" }, h("div", { key: 'a10e179aa0895c1ed51861e8818ae35eaeed195c', class: "toast-notification-text" }, this.heading && h("span", { key: '88d3e049e558a3f107e6a8fcab1f4c3835173def', class: "title" }, this.heading), h("span", { key: '73624c5b86d0d842477e9a5f0512d24359b6f939', class: "message" }, h("slot", { key: 'e7ad8066daef392d83fa77340a16d384204f59fc', name: "message" }, this.message && h("span", { key: '59582a721c306d09cd5c2ca12bfaac649b2e5a1f', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '071e7a3a9a85f931bf8cc7d264c76f5109f69cc0', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: '3ff74ad6ce9cc2d4fca76032ff0aa68c7553f8de', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '26e256f736a3b04e5ccc7ed158305f69d806c42d', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
                 if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
                     e.preventDefault();
                     this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
                 }
-            } }, h("z-icon", { key: '9776de1410dbc02f319ae67a284da485949ab4c8', name: "multiply-circled" }))))));
+            } }, h("z-icon", { key: '25a4e24b16fb29ecd7148700367d319dbb9d9c6d', name: "multiply-circled" }))))));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -193,10 +194,8 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification's title"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "heading"
+                "attribute": "heading",
+                "reflect": false
             },
             "message": {
                 "type": "string",
@@ -212,10 +211,8 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification's message"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "message"
+                "attribute": "message",
+                "reflect": false
             },
             "closebutton": {
                 "type": "boolean",
@@ -231,10 +228,8 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toggles closing button rendering"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "closebutton"
+                "attribute": "closebutton",
+                "reflect": false
             },
             "autoclose": {
                 "type": "number",
@@ -250,10 +245,8 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification closing timeout (ms)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "autoclose"
+                "attribute": "autoclose",
+                "reflect": false
             },
             "pauseonfocusloss": {
                 "type": "boolean",
@@ -269,10 +262,8 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification autoclose can be paused"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "pauseonfocusloss",
+                "reflect": false,
                 "defaultValue": "true"
             },
             "type": {
@@ -285,8 +276,7 @@ export class ZToastNotification {
                         "ToastNotification": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ToastNotification",
-                            "referenceLocation": "ToastNotification"
+                            "id": "src/beans/index.tsx::ToastNotification"
                         }
                     }
                 },
@@ -296,10 +286,8 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification type: dark, light, accent, error, success, warning"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type"
+                "attribute": "type",
+                "reflect": false
             },
             "isdraggable": {
                 "type": "boolean",
@@ -315,10 +303,8 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification can be draggable"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "isdraggable",
+                "reflect": false,
                 "defaultValue": "true"
             },
             "draggablepercentage": {
@@ -335,10 +321,8 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification draggable percentage"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "draggablepercentage",
+                "reflect": false,
                 "defaultValue": "80"
             },
             "transition": {
@@ -351,8 +335,7 @@ export class ZToastNotification {
                         "ToastNotificationTransition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ToastNotificationTransition",
-                            "referenceLocation": "ToastNotificationTransition"
+                            "id": "src/beans/index.tsx::ToastNotificationTransition"
                         }
                     }
                 },
@@ -362,10 +345,8 @@ export class ZToastNotification {
                     "tags": [],
                     "text": "toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "transition"
+                "attribute": "transition",
+                "reflect": false
             }
         };
     }
@@ -407,3 +388,4 @@ export class ZToastNotification {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-toast-notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, ToastNotification, ToastNotificationTransition} from \"../../beans\";\n\nimport DOMPurify from \"dompurify\";\nimport Hammer from \"hammerjs\";\n\n/** Map of slide-in transitions to their corresponding slide-out transitions */\nconst SLIDE_OUT_TRANSITION_MAP = {\n  [ToastNotificationTransition.SLIDE_IN_DOWN]: ToastNotificationTransition.SLIDE_OUT_UP,\n  [ToastNotificationTransition.SLIDE_IN_UP]: ToastNotificationTransition.SLIDE_OUT_DOWN,\n  [ToastNotificationTransition.SLIDE_IN_LEFT]: ToastNotificationTransition.SLIDE_OUT_RIGHT,\n  [ToastNotificationTransition.SLIDE_IN_RIGHT]: ToastNotificationTransition.SLIDE_OUT_LEFT,\n};\n\n/**\n * ZToastNotification component.\n * @slot message - Custom HTML message\n * @slot button - Custom button\n */\n@Component({\n  tag: \"z-toast-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotification {\n  @Element() hostElement: HTMLZToastNotificationElement;\n\n  /** toast notification's title */\n  @Prop()\n  heading?: string;\n\n  /** toast notification's message */\n  @Prop()\n  message: string;\n\n  /** toggles closing button rendering */\n  @Prop()\n  closebutton: boolean;\n\n  /** toast notification closing timeout (ms) */\n  @Prop()\n  autoclose?: number;\n\n  /** toast notification autoclose can be paused */\n  @Prop()\n  pauseonfocusloss?: boolean = true;\n\n  /** toast notification type: dark, light, accent, error, success, warning */\n  @Prop()\n  type?: ToastNotification;\n\n  /** toast notification can be draggable*/\n  @Prop()\n  isdraggable?: boolean = true;\n\n  /** toast notification draggable percentage*/\n  @Prop()\n  draggablepercentage?: number = 80;\n\n  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/\n  @Prop()\n  transition?: ToastNotificationTransition;\n\n  @State()\n  percentage: number;\n\n  /** Indicates if the toast notification has a slotted button. */\n  @State()\n  hasSlottedButton: boolean;\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\n\n  private isCloseEventCalled = false;\n\n  @Watch(\"isdraggable\")\n  watchPropIsdraggable(newValue: boolean): void {\n    if (newValue) {\n      this.sliderManager.get(\"pan\").set({enable: true});\n    } else {\n      this.sliderManager.get(\"pan\").set({enable: false});\n    }\n  }\n\n  @Watch(\"autoclose\")\n  watchPropAutoclose(newValue: number): void {\n    clearTimeout(this.timeoutHandle);\n    this.startClosingTimeout(newValue);\n  }\n\n  @Watch(\"pauseonfocusloss\")\n  watchPropPauseonfocusloss(newValue: boolean): void {\n    if (this.autoclose) {\n      if (newValue) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      } else {\n        document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n    }\n  }\n\n  private close(closingTransition: string, stopTimer: boolean): void {\n    if (stopTimer && this.timeoutHandle) {\n      clearTimeout(this.timeoutHandle);\n    }\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.toastClose.emit();\n    if (closingTransition) {\n      this.hostElement.classList.add(closingTransition);\n    } else {\n      this.hostElement.parentNode.removeChild(this.hostElement);\n    }\n  }\n\n  private visibilityChangeEventHandler(): void {\n    if (document.visibilityState === \"hidden\") {\n      this.timeoutHandle && this.onBlur();\n    } else {\n      this.elapsedTime && this.onFocus();\n    }\n  }\n\n  private validateAutoclose(): void {\n    if (!this.autoclose && !this.closebutton) {\n      console.error(\"At least one between autoclose and closebutton must be present\");\n    }\n  }\n\n  private calculateDraggedPercentage(e): number {\n    const bounding = this.hostElement.getBoundingClientRect();\n\n    return Math.round((100 * e.deltaX) / bounding.width);\n  }\n\n  private handleSlideOutDragAnimation(): void {\n    this.sliderManager = new Hammer(this.hostElement);\n    this.sliderManager.get(\"pan\").set({\n      direction: Hammer.DIRECTION_HORIZONTAL,\n    });\n\n    this.sliderManager.on(\"pan\", (e) => {\n      this.percentage = this.calculateDraggedPercentage(e);\n      this.hostElement.style.transition = \"none\";\n      if (this.transition) {\n        this.hostElement.classList.remove(this.transition);\n      }\n      const translateObj = {\n        translate: `translateX(${this.percentage}%)`,\n        translateBack: \"translateX(0)\",\n      };\n\n      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n      if (e.eventType === Hammer.DIRECTION_LEFT || e.eventType === Hammer.DIRECTION_RIGHT) {\n        this.hostElement.style.transform = translateObj.translate;\n        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n          this.isCloseEventCalled = true;\n          this.close(\n            e.direction === Hammer.DIRECTION_LEFT\n              ? ToastNotificationTransition.SLIDE_OUT_LEFT\n              : ToastNotificationTransition.SLIDE_OUT_RIGHT,\n            true\n          );\n        }\n      }\n\n      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n        this.hostElement.style.transform = translateObj.translateBack;\n        this.hostElement.style.transition = \"all 1s\";\n        this.hostElement.style.opacity = \"100%\";\n        this.percentage = 0;\n      }\n    });\n  }\n\n  private onFocus(): void {\n    let time = this.autoclose;\n    if (this.elapsedTime) {\n      time = this.autoclose - this.elapsedTime;\n    }\n    if (time > 0) {\n      this.startClosingTimeout(time);\n    }\n  }\n\n  private onBlur(): void {\n    this.elapsedTime = Date.now() - this.startTime;\n    clearTimeout(this.timeoutHandle);\n  }\n\n  private startClosingTimeout(time: number): void {\n    this.timeoutHandle = window.setTimeout(() => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], false), time);\n  }\n\n  private checkSlottedButton(): void {\n    this.hasSlottedButton = !!this.hostElement.querySelector(\"[slot='button']\");\n  }\n\n  componentWillLoad(): void {\n    this.validateAutoclose();\n    this.checkSlottedButton();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.startTime = Date.now();\n    if (this.autoclose) {\n      if (this.pauseonfocusloss) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n      if (!this.transition) {\n        this.startClosingTimeout(this.autoclose);\n      }\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\"--percentuale\": `${this.percentage}%`}}\n        class={{[this.transition]: !!this.transition, [this.type]: !!this.type}}\n        onAnimationEnd={(e: AnimationEvent) => {\n          if (this.autoclose && e.animationName.includes(\"slidein\")) {\n            this.startClosingTimeout(this.autoclose);\n          }\n          if (e.animationName.includes(\"slideout\")) {\n            this.hostElement.parentNode.removeChild(this.hostElement);\n          }\n        }}\n      >\n        <div class=\"toast-notification-container\">\n          <div class=\"toast-notification-content\">\n            <div class=\"toast-notification-text\">\n              {this.heading && <span class=\"title\">{this.heading}</span>}\n              <span class=\"message\">\n                <slot name=\"message\">{this.message && <span innerHTML={DOMPurify.sanitize(this.message)} />}</slot>\n              </span>\n            </div>\n            <div\n              class=\"button-container\"\n              hidden={!this.hasSlottedButton}\n            >\n              <slot\n                name=\"button\"\n                onSlotchange={() => this.checkSlottedButton()}\n              />\n            </div>\n          </div>\n          {this.closebutton && (\n            <button\n              class=\"close-button\"\n              aria-label=\"Chiudi notifica\"\n              onClick={() => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true)}\n              onKeyDown={(e) => {\n                if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {\n                  e.preventDefault();\n                  this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);\n                }\n              }}\n            >\n              <z-icon name=\"multiply-circled\" />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-toast-notification/index.stories.js

@@ -174,3 +174,4 @@ export const SlottedMessageLongText = {
       </z-toast-notification>
     </div>`,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-toast-notification/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotification} from \".\";\nimport {ToastNotification, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"./index\";\n\nconst longText =\n  \"Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.\";\n\nconst template = (args): TemplateResult =>\n  html`<div class=\"toast-container\">\n    <z-toast-notification\n      heading=\"${args.heading}\"\n      message=\"${args.message}\"\n      closebutton=\"${args.closebutton}\"\n      autoclose=\"${args.autoclose}\"\n      pauseonfocusloss=\"${args.pauseonfocusloss}\"\n      type=\"${args.type}\"\n      isdraggable=\"${args.isdraggable}\"\n      draggablepercentage=\"${args.draggablepercentage}\"\n      transition=\"${args.transition}\"\n    ></z-toast-notification>\n  </div>`;\n\nconst StoryMeta = {\n  title: \"ZToastNotification\",\n  component: \"z-toast-notification\",\n  argTypes: {\n    type: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ToastNotification),\n    },\n    transition: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ToastNotificationTransition),\n    },\n  },\n  args: {\n    heading: \"Titolo\",\n    message: \"Questo è un messaggio di prova.\",\n    closebutton: true,\n    autoclose: null,\n    pauseonfocusloss: false,\n    type: ToastNotification.DARK,\n    isdraggable: true,\n    draggablepercentage: 80,\n  },\n  render: (args) => template(args),\n} satisfies Meta<ZToastNotification>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotification>;\nexport const NoSlideIn = {\n  args: {\n    message: \"Messaggio con <b>grassetto</b> e altro <i>html</i> renderizzato\",\n  },\n} satisfies Story;\n\nexport const SlideInRight = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_RIGHT,\n  },\n} satisfies Story;\n\nexport const SlideInLeft = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_LEFT,\n  },\n} satisfies Story;\n\nexport const SlideInDownNoCloseButton = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n    closebutton: false,\n  },\n} satisfies Story;\n\nexport const SlideInUpLongText = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_UP,\n    message: longText,\n  },\n} satisfies Story;\n\nexport const SlottedButton = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n  },\n  render: (args) =>\n    html`<div class=\"toast-container slotted-button\">\n      <z-toast-notification\n        heading=\"${args.heading}\"\n        message=\"${args.message}\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          variant=\"tertiary\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedButtonLongText = {\n  args: {\n    transition: ToastNotificationTransition.SLIDE_IN_DOWN,\n  },\n  render: (args) =>\n    html`<div class=\"toast-container slotted-button\">\n      <z-toast-notification\n        heading=\"Titolo abbastanza lungo\"\n        message=${longText}\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          variant=\"tertiary\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedMessage = {\n  args: {transition: ToastNotificationTransition.SLIDE_IN_DOWN},\n  parameters: {controls: {exclude: [\"message\"]}},\n  render: (args) =>\n    html`<div class=\"toast-container\">\n      <z-toast-notification\n        heading=\"${args.heading}\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <span slot=\"message\"\n          >Messaggio con\n          <a\n            href=\"#\"\n            class=\"z-link z-link-blue\"\n            >link</a\n          >\n          e <b>grassetto</b></span\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n\nexport const SlottedMessageLongText = {\n  args: {transition: ToastNotificationTransition.SLIDE_IN_DOWN},\n  parameters: {controls: {exclude: [\"message\"]}},\n  render: (args) =>\n    html`<div class=\"toast-container\">\n      <z-toast-notification\n        heading=\"Titolo abbastanza lungo\"\n        closebutton=\"${args.closebutton}\"\n        autoclose=\"${args.autoclose}\"\n        pauseonfocusloss=\"${args.pauseonfocusloss}\"\n        type=\"${args.type}\"\n        isdraggable=\"${args.isdraggable}\"\n        draggablepercentage=\"${args.draggablepercentage}\"\n        transition=\"${args.transition}\"\n      >\n        <span slot=\"message\"\n          >${longText}\n          <a\n            href=\"#\"\n            class=\"z-link z-link-blue\"\n            >link</a\n          ></span\n        >\n      </z-toast-notification>\n    </div>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-toast-notification-list/index.js

@@ -2,11 +2,9 @@ import { h } from "@stencil/core";
 import { ToastNotificationPosition } from "../../beans";
 export class ZToastNotificationList {
     constructor() {
-        /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */
+        this.notificationArray = [];
         this.position = ToastNotificationPosition.TOP_RIGHT;
-        /**Set the entry position of new notification in the list */
         this.newestontop = true;
-        this.notificationArray = [];
     }
     watchPropNewestontop(newValue) {
         this.hostElement.append(...this.notificationArray.reverse());
@@ -39,7 +37,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: 'e039a28729e3d350f3db450429acd01ff47b5afe', name: "toasts" });
+        return h("slot", { key: '188e85fc561b690f63f4f66edbbf63a0ed434cdf', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }
@@ -65,8 +63,7 @@ export class ZToastNotificationList {
                         "ToastNotificationPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ToastNotificationPosition",
-                            "referenceLocation": "ToastNotificationPosition"
+                            "id": "src/beans/index.tsx::ToastNotificationPosition"
                         }
                     }
                 },
@@ -76,10 +73,8 @@ export class ZToastNotificationList {
                     "tags": [],
                     "text": "Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "position",
+                "reflect": true,
                 "defaultValue": "ToastNotificationPosition.TOP_RIGHT"
             },
             "newestontop": {
@@ -96,10 +91,8 @@ export class ZToastNotificationList {
                     "tags": [],
                     "text": "Set the entry position of new notification in the list"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "newestontop",
+                "reflect": false,
                 "defaultValue": "true"
             }
         };
@@ -112,3 +105,4 @@ export class ZToastNotificationList {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-toast-notification-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,yBAAyB,EAAC,MAAM,aAAa,CAAC;AAOtD,MAAM,OAAO,sBAAsB;;QAWzB,sBAAiB,GAAc,EAAE,CAAC;wBANJ,yBAAyB,CAAC,SAAS;2BAIjD,IAAI;;IAK5B,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrF,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAChG,CAAC;IAEO,iBAAiB;QACvB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAClH,IAAI,UAAU,EAAE,CAAC;YACf,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC1B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAClC,MAAM,OAAO,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CAAC;IACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Prop, Watch, h} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-toast-notification-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotificationList {\n  @Element() hostElement: HTMLZToastNotificationListElement;\n\n  /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n  @Prop({reflect: true})\n  position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n  /**Set the entry position of new notification in the list */\n  @Prop()\n  newestontop?: boolean = true;\n\n  private notificationArray: Element[] = [];\n\n  @Watch(\"newestontop\")\n  watchPropNewestontop(newValue: boolean): void {\n    this.hostElement.append(...this.notificationArray.reverse());\n    if (newValue) {\n      this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n    } else {\n      this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.newestontop) {\n      this.handleNewestOnTop();\n    }\n  }\n\n  private handleNewestOnTop(): void {\n    this.notificationArray = Array.from(this.hostElement.children);\n    this.hostElement.append(...this.notificationArray.reverse());\n    this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n  }\n\n  private slotChangeHandler(): void {\n    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n    if (difference) {\n      difference.forEach((elem) => {\n        this.notificationArray.push(elem);\n        const newElem = elem;\n        elem.remove();\n        this.hostElement.prepend(newElem);\n      });\n    }\n  }\n\n  render(): HTMLSlotElement {\n    return <slot name=\"toasts\"></slot>;\n  }\n}\n"]}

package/dist/collection/components/z-toast-notification-list/index.stories.js

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

package/dist/collection/components/z-toast-notification-list/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification-list/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {type ZToastNotificationList} from \".\";\nimport {ToastNotificationPosition, ToastNotificationTransition} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"../z-toast-notification/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst template = (\n  args,\n  notificationTransition: ToastNotificationTransition = ToastNotificationTransition.SLIDE_IN_DOWN,\n  slottedMessage?: TemplateResult\n): TemplateResult =>\n  html`<div class=\"z-toast-notification-container\">\n    <z-toast-notification-list\n      position=\"${args.position}\"\n      newestontop=\"${args.newestontop}\"\n    >\n      ${slottedMessage\n        ? html`<z-toast-notification\n            slot=\"toasts\"\n            type=\"dark\"\n            heading=\"Notification\"\n            .transition=${notificationTransition}\n            draggablepercentage=\"50\"\n            autoclose=\"18000\"\n            closebutton\n          >\n            ${slottedMessage}\n          </z-toast-notification>`\n        : html`<z-toast-notification\n            slot=\"toasts\"\n            type=\"dark\"\n            heading=\"Notification\"\n            message=\"Autoclose 18s.\"\n            .transition=${notificationTransition}\n            draggablepercentage=\"50\"\n            autoclose=\"18000\"\n            closebutton\n          >\n          </z-toast-notification>`}\n\n      <z-toast-notification\n        slot=\"toasts\"\n        type=\"dark\"\n        heading=\"Notification\"\n        message=\"Senza pulsante.\"\n        .transition=${notificationTransition}\n        draggablepercentage=\"50\"\n        closebutton\n      >\n      </z-toast-notification>\n      <z-toast-notification\n        slot=\"toasts\"\n        type=\"dark\"\n        heading=\"Notification\"\n        message=\"Con pulsante\"\n        .transition=${notificationTransition}\n        draggablepercentage=\"50\"\n        closebutton\n      >\n        <z-button\n          slot=\"button\"\n          size=\"small\"\n          >button</z-button\n        >\n      </z-toast-notification>\n    </z-toast-notification-list>\n  </div>`;\n\nconst StoryMeta = {\n  title: \"ZToastNotificationList\",\n  component: \"z-toast-notification-list\",\n  argTypes: {\n    position: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ToastNotificationPosition),\n    },\n  },\n  args: {\n    newestontop: true,\n  },\n  render: (args) => template(args),\n} satisfies Meta<ZToastNotificationList>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToastNotificationList>;\n\nexport const TopLeftSlideInDown = {\n  args: {\n    position: ToastNotificationPosition.TOP_LEFT,\n  },\n} satisfies Story;\n\nexport const TopLeftSlideInRight = {\n  args: {\n    position: ToastNotificationPosition.TOP_LEFT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),\n} satisfies Story;\n\nexport const TopCentre = {\n  args: {\n    position: ToastNotificationPosition.TOP_CENTRE,\n  },\n} satisfies Story;\n\nexport const TopRightSlideInDown = {\n  args: {\n    position: ToastNotificationPosition.TOP_RIGHT,\n  },\n} satisfies Story;\n\nexport const TopRightSlideInLeft = {\n  args: {\n    position: ToastNotificationPosition.TOP_RIGHT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),\n} satisfies Story;\n\nexport const BottomRightSlideInUp = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_RIGHT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),\n} satisfies Story;\n\nexport const BottomRightSlideInLeft = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_RIGHT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),\n} satisfies Story;\n\nexport const BottomCentre = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_CENTRE,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),\n} satisfies Story;\n\nexport const BottomCentreSlideInUp = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_LEFT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),\n} satisfies Story;\n\nexport const BottomLeftSlideInRight = {\n  args: {\n    position: ToastNotificationPosition.BOTTOM_LEFT,\n  },\n  render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),\n} satisfies Story;\n\nexport const TopLeftWithSlottedMessage = {\n  args: {position: ToastNotificationPosition.TOP_LEFT},\n  render: (args) =>\n    template(\n      args,\n      ToastNotificationTransition.SLIDE_IN_DOWN,\n      html`<span slot=\"message\"\n        >Autoclose 18s con\n        <a\n          href=\"#\"\n          class=\"z-link z-link-blue\"\n          >link</a\n        ></span\n      >`\n    ),\n} satisfies Story;\n"]}