@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

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;;wBAKK,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.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification-list/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE/C,QAAQ,CAAC,mCAAmC,EAAE,GAAG,EAAE;IACjD,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,sBAAsB,CAAC;YACpC,IAAI,EAAE,yDAAyD;SAChE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,sBAAsB,CAAC;YACpC,IAAI,EAAE,mGAAmG;SAC1G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAChF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,sBAAsB,CAAC;YACpC,IAAI,EAAE;;;;;;;mCAOuB;SAC9B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZToastNotificationList} from \"./index\";\n\ndescribe(\"Suite test ZToastNotificationList\", () => {\n  it(\"Test render ZToastNotificationList vuoto senza props\", async () => {\n    const page = await newSpecPage({\n      components: [ZToastNotificationList],\n      html: `<z-toast-notification-list></z-toast-notification-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toast-notification-list position=\"top-right\">\n        <mock:shadow-root>\n            <slot name=\"toasts\"></slot>\n        </mock:shadow-root>\n      </z-toast-notification-list>\n    `);\n  });\n\n  it(\"Test render ZToastNotificationList vuoto con props\", async () => {\n    const page = await newSpecPage({\n      components: [ZToastNotificationList],\n      html: `<z-toast-notification-list newestontop=\"false\" position=\"top-centre\"></z-toast-notification-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toast-notification-list newestontop=\"false\" position=\"top-centre\">\n        <mock:shadow-root>\n            <slot name=\"toasts\"></slot>\n        </mock:shadow-root>\n      </z-toast-notification-list>\n    `);\n  });\n\n  it(\"Test render ZToastNotificationList con elementi slottati e props\", async () => {\n    const page = await newSpecPage({\n      components: [ZToastNotificationList],\n      html: `<z-toast-notification-list position=\"top-centre\">\n        <z-toast-notification type=\"error\" heading=\"Notification\" message=\"Senza pulsante.\"\n            transition=\"slide-in-up\" draggablepercentage=\"50\" closebutton>\n        </z-toast-notification>\n        <z-toast-notification type=\"error\" heading=\"Notification\" message=\"Senza pulsante.\"\n            transition=\"slide-in-up\" draggablepercentage=\"50\" closebutton>\n        </z-toast-notification>\n      </z-toast-notification-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toast-notification-list position=\"top-centre\">\n        <mock:shadow-root>\n            <slot name=\"toasts\"></slot>\n        </mock:shadow-root>\n        <z-toast-notification type=\"error\" heading=\"Notification\" message=\"Senza pulsante.\"\n          transition=\"slide-in-up\" draggablepercentage=\"50\" closebutton>\n        </z-toast-notification>\n        <z-toast-notification type=\"error\" heading=\"Notification\" message=\"Senza pulsante.\"\n          transition=\"slide-in-up\" draggablepercentage=\"50\" closebutton>\n        </z-toast-notification>\n      </z-toast-notification-list>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,124 @@
+import { html } from "lit";
+import { ToastNotificationPosition, ToastNotificationTransition } from "../../beans";
+import "../z-button/index";
+import "../z-toast-notification/index";
+import "./index";
+import "./index.stories.css";
+const template = (args, notificationTransition = ToastNotificationTransition.SLIDE_IN_DOWN) => html `<div class="z-toast-notification-container">
+    <z-toast-notification-list
+      position="${args.position}"
+      newestontop="${args.newestontop}"
+    >
+      <z-toast-notification
+        slot="toasts"
+        type="dark"
+        heading="Notification"
+        message="Autoclose 18s."
+        .transition=${notificationTransition}
+        draggablepercentage="50"
+        autoclose="18000"
+        closebutton
+      >
+      </z-toast-notification>
+      <z-toast-notification
+        slot="toasts"
+        type="dark"
+        heading="Notification"
+        message="Senza pulsante."
+        .transition=${notificationTransition}
+        draggablepercentage="50"
+        closebutton
+      >
+      </z-toast-notification>
+      <z-toast-notification
+        slot="toasts"
+        type="dark"
+        heading="Notification"
+        message="Con pulsante"
+        .transition=${notificationTransition}
+        draggablepercentage="50"
+        closebutton
+      >
+        <z-button
+          slot="button"
+          size="small"
+          >button</z-button
+        >
+      </z-toast-notification>
+    </z-toast-notification-list>
+  </div>`;
+const StoryMeta = {
+    title: "ZToastNotificationList",
+    component: "z-toast-notification-list",
+    argTypes: {
+        position: {
+            control: {
+                type: "select",
+            },
+            options: Object.values(ToastNotificationPosition),
+        },
+    },
+    args: {
+        newestontop: true,
+    },
+    render: (args) => template(args),
+};
+export default StoryMeta;
+export const TopLeftSlideInDown = {
+    args: {
+        position: ToastNotificationPosition.TOP_LEFT,
+    },
+};
+export const TopLeftSlideInRight = {
+    args: {
+        position: ToastNotificationPosition.TOP_LEFT,
+    },
+    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),
+};
+export const TopCentre = {
+    args: {
+        position: ToastNotificationPosition.TOP_CENTRE,
+    },
+};
+export const TopRightSlideInDown = {
+    args: {
+        position: ToastNotificationPosition.TOP_RIGHT,
+    },
+};
+export const TopRightSlideInLeft = {
+    args: {
+        position: ToastNotificationPosition.TOP_RIGHT,
+    },
+    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),
+};
+export const BottomRightSlideInUp = {
+    args: {
+        position: ToastNotificationPosition.BOTTOM_RIGHT,
+    },
+    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),
+};
+export const BottomRightSlideInLeft = {
+    args: {
+        position: ToastNotificationPosition.BOTTOM_RIGHT,
+    },
+    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),
+};
+export const BottomCentre = {
+    args: {
+        position: ToastNotificationPosition.BOTTOM_CENTRE,
+    },
+    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),
+};
+export const BottomCentreSlideInUp = {
+    args: {
+        position: ToastNotificationPosition.BOTTOM_LEFT,
+    },
+    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),
+};
+export const BottomLeftSlideInRight = {
+    args: {
+        position: ToastNotificationPosition.BOTTOM_LEFT,
+    },
+    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),
+};
+//# 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":"AACA,OAAO,EAAC,IAAI,EAAsB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,yBAAyB,EAAE,2BAA2B,EAAC,MAAM,aAAa,CAAC;AACnF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,+BAA+B,CAAC;AACvC,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,QAAQ,GAAG,CACf,IAAI,EACJ,yBAAsD,2BAA2B,CAAC,aAAa,EAC/E,EAAE,CAClB,IAAI,CAAA;;kBAEY,IAAI,CAAC,QAAQ;qBACV,IAAI,CAAC,WAAW;;;;;;;sBAOf,sBAAsB;;;;;;;;;;;sBAWtB,sBAAsB;;;;;;;;;;sBAUtB,sBAAsB;;;;;;;;;;;SAWnC,CAAC;AAEV,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,2BAA2B;IACtC,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,yBAAyB,CAAC;SAClD;KACF;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;KAClB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACM,CAAC;AAEzC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,QAAQ;KAC7C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,QAAQ;KAC7C;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,cAAc,CAAC;CAC7D,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,UAAU;KAC/C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,SAAS;KAC9C;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,SAAS;KAC9C;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,aAAa,CAAC;CAC5D,CAAC;AAElB,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,YAAY;KACjD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,WAAW,CAAC;CAC1D,CAAC;AAElB,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,YAAY;KACjD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,aAAa,CAAC;CAC5D,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,aAAa;KAClD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,WAAW,CAAC;CAC1D,CAAC;AAElB,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,WAAW;KAChD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,WAAW,CAAC;CAC1D,CAAC;AAElB,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE;QACJ,QAAQ,EAAE,yBAAyB,CAAC,WAAW;KAChD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC,cAAc,CAAC;CAC7D,CAAC","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): TemplateResult =>\n  html`<div class=\"z-toast-notification-container\">\n    <z-toast-notification-list\n      position=\"${args.position}\"\n      newestontop=\"${args.newestontop}\"\n    >\n      <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      <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"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../../src/components/z-toast-notification-list/test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndescribe(\"z-toast-notification-list test end2end\", () => {\n  it(\"Test correct exit animation on close button click\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`\n      <z-toast-notification-list position=\"bottom-centre\">\n        <z-toast-notification slot=\"toasts\" type=\"dark\" heading=\"Notification\" message=\"Senza pulsante.\"\n          transition=\"slide-in-up\" draggablepercentage=\"50\" closebutton>\n        </z-toast-notification>\n      </z-toast-notification-list>\n    `);\n    const notificationlist = await page.find(\"z-toast-notification-list z-toast-notification\");\n    const closebutton = await page.find(\"z-toast-notification-list z-toast-notification >>> div > z-icon\");\n\n    await closebutton.click();\n    await page.waitForChanges();\n\n    expect(notificationlist).toHaveClass(\"slide-out-down\");\n  });\n\n  it(\"Test event on close button click \", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`\n    <z-toast-notification-list position=\"bottom-centre\">\n      <z-toast-notification slot=\"toasts\" type=\"dark\" heading=\"Notification\" message=\"Senza pulsante.\"\n        transition=\"slide-in-up\" draggablepercentage=\"50\" closebutton>\n      </z-toast-notification>\n    </z-toast-notification-list>`);\n\n    const notification = await page.find(\"z-toast-notification-list z-toast-notification\");\n    expect(notification).not.toBeNull();\n\n    const closebutton = await page.find(\"z-toast-notification-list z-toast-notification >>> div > z-icon \");\n\n    await closebutton.click();\n\n    await page.waitForFunction(() => !document.querySelector(\"z-toast-notification\"));\n\n    const checkNotification = await page.find(\"z-toast-notification-list z-toast-notification\");\n    expect(checkNotification).toBeNull();\n  });\n\n  it(\"Test z-toast-notification autoclose\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`\n    <z-toast-notification-list position=\"bottom-centre\">\n      <z-toast-notification slot=\"toasts\" type=\"dark\" heading=\"Notification\" message=\"Senza pulsante.\"\n        transition=\"slide-in-up\" draggablepercentage=\"50\" closebutton autoclose=\"1000\">\n      </z-toast-notification>\n    </z-toast-notification-list>`);\n\n    const notification = await page.find(\"z-toast-notification-list z-toast-notification\");\n    expect(notification).not.toBeNull();\n\n    await page.waitForFunction(() => !document.querySelector(\"z-toast-notification\"));\n\n    const checkNotification = await page.find(\"z-toast-notification-list z-toast-notification\");\n    expect(checkNotification).toBeNull();\n  });\n\n  it(\"Test z-toast-notification drag\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`\n    <z-toast-notification-list position=\"bottom-centre\">\n      <z-toast-notification slot=\"toasts\" type=\"dark\" heading=\"Notification\" message=\"Senza pulsante.\"\n        transition=\"slide-in-up\" draggablepercentage=\"50\" closebutton autoclose=\"1000\">\n      </z-toast-notification>\n    </z-toast-notification-list>`);\n\n    const notification = await page.find(\"z-toast-notification-list z-toast-notification\");\n    expect(notification).not.toBeNull();\n\n    const example = await page.$(\"z-toast-notification\");\n    const bounding_box = await example.boundingBox();\n    await page.mouse.move(bounding_box.x + bounding_box.width / 2, bounding_box.y + bounding_box.height / 2);\n    await page.mouse.down();\n    await page.mouse.move(bounding_box.width / 2, 0);\n    await page.mouse.up();\n\n    await page.waitForFunction(() => !document.querySelector(\"z-toast-notification\"));\n\n    const checkNotification = await page.find(\"z-toast-notification-list z-toast-notification\");\n    expect(checkNotification).toBeNull();\n  });\n});\n"]}

package/dist/collection/components/z-toggle-button/index.js

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+export class ZToggleButton {
+    constructor() {
+        this.label = undefined;
+        this.isdisabled = false;
+        this.avoidclick = undefined;
+        this.opened = false;
+        this.ariaLabel = "";
+    }
+    emitToggleClick() {
+        if (this.isdisabled) {
+            return;
+        }
+        this.opened = !this.opened;
+        this.toggleClick.emit(this.opened);
+    }
+    render() {
+        return (h("button", { key: '809ca74c63187ce21d411516d595bda6ed5b082b', tabindex: this.avoidclick ? "-1" : "0", class: {
+                "isopen": this.opened,
+                "avoid-clicks": this.avoidclick,
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '66af2faa257599724f2506230eae3c0c612c0700', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+    }
+    static get is() { return "z-toggle-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "label text"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "isdisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "disabled status flag (optional)"
+                },
+                "attribute": "isdisabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "avoidclick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "avoidclick status flag"
+                },
+                "attribute": "avoidclick",
+                "reflect": false
+            },
+            "opened": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "open by default (optional)"
+                },
+                "attribute": "opened",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label for the button"
+                },
+                "attribute": "aria-label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleClick",
+                "name": "toggleClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "emitted on toggle button click, returns isOpen"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-toggle-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOtE,MAAM,OAAO,aAAa;;;0BAOD,KAAK;;sBAQT,KAAK;yBAIZ,EAAE;;IAMN,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;YAErC,+DACE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV;YACD,IAAI,CAAC,KAAK,CACJ,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-toggle-button/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-button/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZToggleButton} from \"./index\";\n\ndescribe(\"Suite test ZToggleButton\", () => {\n  it(\"Test render ZToggleButton vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleButton],\n      html: `<z-toggle-button></z-toggle-button>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-button>\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" tabindex=\"0\" aria-label=\"\">\n            <z-icon height=\"16\" name=\"chevron-up\" width=\"16\"></z-icon>\n          </button>\n        </mock:shadow-root>\n      </z-toggle-button>\n    `);\n  });\n\n  it(\"Test render ZToggleButton con label\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleButton],\n      html: `<z-toggle-button label=\"label\"></z-toggle-button>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-button label=\"label\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" tabindex=\"0\" aria-label=\"\">\n            <z-icon height=\"16\" name=\"chevron-up\" width=\"16\"></z-icon>\n            label\n          </button>\n        </mock:shadow-root>\n      </z-toggle-button>\n    `);\n  });\n\n  it(\"Test render ZToggleButton disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleButton],\n      html: `<z-toggle-button label=\"label\" isdisabled=\"true\"></z-toggle-button>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-button label=\"label\" isdisabled=\"true\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" disabled tabindex=\"0\" aria-label=\"\">\n            <z-icon height=\"16\" name=\"chevron-up\" width=\"16\"></z-icon>\n            label\n          </button>\n        </mock:shadow-root>\n      </z-toggle-button>\n    `);\n  });\n\n  it(\"Test render ZToggleButton avoidclick\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleButton],\n      html: `<z-toggle-button label=\"label\" avoidclick=\"true\"></z-toggle-button>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-button avoidclick=\"true\" label=\"label\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" class=\"avoid-clicks\" tabindex=\"-1\" aria-label=\"\">\n            <z-icon height=\"16\" name=\"chevron-up\" width=\"16\"></z-icon>\n            label\n          </button>\n        </mock:shadow-root>\n      </z-toggle-button>\n    `);\n  });\n\n  it(\"Test render ZToggleButton opened\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleButton],\n      html: `<z-toggle-button label=\"label\" opened=\"true\"></z-toggle-button>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-button opened=\"true\" label=\"label\">\n        <mock:shadow-root>\n          <button aria-expanded=\"true\" class=\"isopen\" tabindex=\"0\" aria-label=\"\">\n            <z-icon height=\"16\" name=\"chevron-down\" width=\"16\"></z-icon>\n            label\n          </button>\n        </mock:shadow-root>\n      </z-toggle-button>\n    `);\n  });\n\n  it(\"Test click ZToggleButton\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleButton],\n      html: `<z-toggle-button></z-toggle-button>`,\n    });\n\n    const button = page.root.shadowRoot.querySelector(\"button\");\n    expect(page.rootInstance.opened).toEqual(false);\n    button.click();\n    await page.waitForChanges();\n    expect(page.rootInstance.opened).toEqual(true);\n    button.click();\n    await page.waitForChanges();\n    expect(page.rootInstance.opened).toEqual(false);\n  });\n\n  it(\"Test click ZToggleButton disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleButton],\n      html: `<z-toggle-button isdisabled=\"true\"></z-toggle-button>`,\n    });\n\n    const button = page.root.shadowRoot.querySelector(\"button\");\n    expect(page.rootInstance.opened).toEqual(false);\n    button.click();\n    await page.waitForChanges();\n    expect(page.rootInstance.opened).toEqual(false);\n  });\n\n  it(\"Test render ZToggleButton con arialabel\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleButton],\n      html: `<z-toggle-button aria-label=\"aria label\"></z-toggle-button>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-button aria-label=\"aria label\">\n        <mock:shadow-root>\n          <button aria-expanded=\"false\" aria-label=\"aria label\" tabindex=\"0\">\n            <z-icon height=\"16\" name=\"chevron-up\" width=\"16\"></z-icon>\n          </button>\n        </mock:shadow-root>\n      </z-toggle-button>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-toggle-button/index.stories.js

@@ -0,0 +1,23 @@
+import { html } from "lit";
+import "./index";
+const StoryMeta = {
+    title: "ZToggleButton",
+    args: {
+        label: "Toggle",
+        ariaLabel: "",
+        avoidclick: false,
+        isdisabled: false,
+        opened: false,
+    },
+};
+export default StoryMeta;
+export const Default = {
+    render: (args) => html `<z-toggle-button
+      label=${args.label}
+      .ariaLabel=${args.ariaLabel}
+      .avoidclick=${args.avoidclick}
+      .isdisabled=${args.isdisabled}
+      .opened=${args.opened}
+    ></z-toggle-button>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-button/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,KAAK;QACjB,MAAM,EAAE,KAAK;KACd;CAC4B,CAAC;AAEhC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,KAAK;mBACL,IAAI,CAAC,SAAS;oBACb,IAAI,CAAC,UAAU;oBACf,IAAI,CAAC,UAAU;gBACnB,IAAI,CAAC,MAAM;wBACH;CACP,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToggleButton} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZToggleButton\",\n  args: {\n    label: \"Toggle\",\n    ariaLabel: \"\",\n    avoidclick: false,\n    isdisabled: false,\n    opened: false,\n  },\n} satisfies Meta<ZToggleButton>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToggleButton>;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-toggle-button\n      label=${args.label}\n      .ariaLabel=${args.ariaLabel}\n      .avoidclick=${args.avoidclick}\n      .isdisabled=${args.isdisabled}\n      .opened=${args.opened}\n    ></z-toggle-button>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-toggle-switch/index.js

@@ -0,0 +1,147 @@
+import { Host, h } from "@stencil/core";
+import { LabelPosition } from "../../beans";
+import { randomId } from "../../utils/utils";
+export class ZToggleSwitch {
+    constructor() {
+        this.disabled = false;
+        this.labelPosition = LabelPosition.LEFT;
+        this.checked = false;
+        this.htmlid = `toggle-switch-id-${randomId()}`;
+    }
+    emitToggleClick() {
+        this.toggleClick.emit({
+            id: this.htmlid,
+            checked: this.checked,
+        });
+    }
+    handleClick(ev) {
+        if (this.disabled) {
+            return;
+        }
+        this.checked = ev.target.checked;
+        this.emitToggleClick();
+    }
+    render() {
+        return (h(Host, { key: '1435f2d332c0a6ba1845640836e129eee281f1b0' }, h("input", { key: 'baea7ca82f300316bd418cadfc82718da7dc2f18', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '510a2f196cd5f67af2602c5c6e948e2f63395f6f', htmlFor: this.htmlid, class: {
+                [this.labelPosition]: true,
+                disabled: this.disabled,
+            } }, h("span", { key: 'e32ef84026463fb9a99bcb303d0097ffed6ee994' }, h("slot", { key: '07344703d351893b5ab39e4e4a617e4038f1042a' })), h("span", { key: 'cec720a047a8fbc016048e9139639e04233f8f24', class: {
+                container: true,
+                disabled: this.disabled,
+                checked: this.checked,
+            } }, h("span", { key: '4639384b98d6de8009678681d71d1097b2c687e6', class: "circle" }, this.checked && (h("z-icon", { key: 'd34f45d60cece7a6969be1a03ad51be4ab0b0f04', width: 12, height: 12, name: "checkmark" })))))));
+    }
+    static get is() { return "z-toggle-switch"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled flag"
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LabelPosition",
+                    "resolved": "LabelPosition.LEFT | LabelPosition.RIGHT",
+                    "references": {
+                        "LabelPosition": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::LabelPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label position"
+                },
+                "attribute": "label-position",
+                "reflect": true,
+                "defaultValue": "LabelPosition.LEFT"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checked state"
+                },
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "htmlid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML id attribute to set to the internal checkbox"
+                },
+                "attribute": "htmlid",
+                "reflect": false,
+                "defaultValue": "`toggle-switch-id-${randomId()}`"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleClick",
+                "name": "toggleClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggle click event"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-toggle-switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAQ3C,MAAM,OAAO,aAAa;;wBAGH,KAAK;6BAIT,aAAa,CAAC,IAAI;uBAIf,KAAK;sBAIhB,oBAAoB,QAAQ,EAAE,EAAE;;IAMjC,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACrC;YACF,8DACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE;oBACL,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI;oBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED;oBACE,8DAAQ,CACH;gBACP,6DACE,KAAK,EAAE;wBACL,SAAS,EAAE,IAAI;wBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;wBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;qBACtB;oBAED,6DAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO,IAAI,CACf,+DACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,WAAW,GACR,CACX,CACI,CACF,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {LabelPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-toggle-switch\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZToggleSwitch {\n  /** Disabled flag */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** Label position */\n  @Prop({reflect: true})\n  labelPosition? = LabelPosition.LEFT;\n\n  /** Checked state */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** HTML id attribute to set to the internal checkbox */\n  @Prop()\n  htmlid = `toggle-switch-id-${randomId()}`;\n\n  /** Toggle click event */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    this.toggleClick.emit({\n      id: this.htmlid,\n      checked: this.checked,\n    });\n  }\n\n  private handleClick(ev): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = ev.target.checked;\n    this.emitToggleClick();\n  }\n\n  render(): HTMLZToggleSwitchElement {\n    return (\n      <Host>\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.handleClick.bind(this)}\n        />\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            [this.labelPosition]: true,\n            disabled: this.disabled,\n          }}\n        >\n          <span>\n            <slot />\n          </span>\n          <span\n            class={{\n              container: true,\n              disabled: this.disabled,\n              checked: this.checked,\n            }}\n          >\n            <span class=\"circle\">\n              {this.checked && (\n                <z-icon\n                  width={12}\n                  height={12}\n                  name=\"checkmark\"\n                ></z-icon>\n              )}\n            </span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-toggle-switch/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-switch/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZToggleSwitch} from \"./index\";\n\ndescribe(\"Suite test ZToggleSwitch\", () => {\n  it(\"Test render ZToggleSwitch label position left\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleSwitch],\n      html: `<z-toggle-switch htmlid=\"toggle-id\" label-position=\"left\"></z-toggle-switch>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-switch htmlid=\"toggle-id\" label-position=\"left\">\n        <input id=\"toggle-id\" type=\"checkbox\">\n        <label class=\"left\" htmlfor=\"toggle-id\">\n          <span></span>\n          <span class=\"container\">\n            <span class=\"circle\"></span>\n          </span>\n        </label>\n      </z-toggle-switch>\n    `);\n  });\n\n  it(\"Test render ZToggleSwitch label position right\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleSwitch],\n      html: `<z-toggle-switch htmlid=\"toggle-id\" label-position=\"right\"></z-toggle-switch>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-switch htmlid=\"toggle-id\" label-position=\"right\">\n          <input id=\"toggle-id\" type=\"checkbox\">\n          <label class=\"right\" htmlfor=\"toggle-id\">\n            <span></span>\n            <span class=\"container\">\n              <span class=\"circle\"></span>\n            </span>\n          </label>\n      </z-toggle-switch>\n    `);\n  });\n\n  it(\"Test render ZToggleSwitch label position left disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleSwitch],\n      html: `<z-toggle-switch htmlid=\"toggle-id\" label-position=\"left\" disabled></z-toggle-switch>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-switch htmlid=\"toggle-id\" label-position=\"left\" disabled=\"\">\n          <input disabled id=\"toggle-id\" type=\"checkbox\">\n          <label class=\"disabled left\" htmlfor=\"toggle-id\">\n            <span></span>\n            <span class=\"container disabled\">\n              <span class=\"circle\"></span>\n            </span>\n          </label>\n      </z-toggle-switch>\n    `);\n  });\n\n  it(\"Test render ZToggleSwitch label position right disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleSwitch],\n      html: `<z-toggle-switch htmlid=\"toggle-id\" label-position=\"right\" disabled></z-toggle-switch>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-switch htmlid=\"toggle-id\" label-position=\"right\" disabled=\"\">\n        <input disabled id=\"toggle-id\" type=\"checkbox\">\n        <label class=\"disabled right\" htmlfor=\"toggle-id\">\n          <span></span>\n          <span class=\"container disabled\">\n            <span class=\"circle\"></span>\n          </span>\n        </label>\n      </z-toggle-switch>\n    `);\n  });\n\n  it(\"Test render ZToggleSwitch label position left active\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleSwitch],\n      html: `<z-toggle-switch htmlid=\"toggle-id\" label-position=\"left\" checked></z-toggle-switch>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-switch htmlid=\"toggle-id\" label-position=\"left\" checked=\"\">\n          <input checked=\"\" id=\"toggle-id\" type=\"checkbox\">\n          <label class=\"left\" htmlfor=\"toggle-id\">\n            <span></span>\n            <span class=\"container checked\">\n              <span class=\"circle\">\n                <z-icon height=\"12\" name=\"checkmark\" width=\"12\"></z-icon>\n              </span>\n            </span>\n          </label>\n      </z-toggle-switch>\n    `);\n  });\n\n  it(\"Test render ZToggleSwitch label position right active\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleSwitch],\n      html: `<z-toggle-switch htmlid=\"toggle-id\" label-position=\"right\" checked></z-toggle-switch>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-switch htmlid=\"toggle-id\" label-position=\"right\" checked=\"\">\n        <input checked=\"\" id=\"toggle-id\" type=\"checkbox\">\n        <label class=\"right\" htmlfor=\"toggle-id\">\n          <span></span>\n          <span class=\"container checked\">\n            <span class=\"circle\">\n              <z-icon height=\"12\" name=\"checkmark\" width=\"12\"></z-icon>\n            </span>\n          </span>\n        </label>\n      </z-toggle-switch>\n    `);\n  });\n\n  it(\"Test render ZToggleSwitch label position left active disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleSwitch],\n      html: `<z-toggle-switch htmlid=\"toggle-id\" label-position=\"left\" disabled checked></z-toggle-switch>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-switch htmlid=\"toggle-id\" label-position=\"left\" disabled=\"\" checked=\"\">\n        <input disabled=\"\" checked=\"\" id=\"toggle-id\" type=\"checkbox\">\n        <label class=\"disabled left\" htmlfor=\"toggle-id\">\n          <span></span>\n          <span class=\"container disabled checked\">\n            <span class=\"circle\">\n              <z-icon height=\"12\" name=\"checkmark\" width=\"12\"></z-icon>\n            </span>\n          </span>\n        </label>\n      </z-toggle-switch>\n    `);\n  });\n\n  it(\"Test render ZToggleSwitch label position right active disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZToggleSwitch],\n      html: `<z-toggle-switch htmlid=\"toggle-id\" label-position=\"right\" disabled checked></z-toggle-switch>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-toggle-switch htmlid=\"toggle-id\" disabled=\"\" label-position=\"right\" checked=\"\">\n        <input disabled=\"\" checked=\"\" id=\"toggle-id\" type=\"checkbox\">\n        <label class=\"disabled right\" htmlfor=\"toggle-id\">\n          <span></span>\n          <span class=\"container checked disabled\">\n            <span class=\"circle\">\n              <z-icon height=\"12\" name=\"checkmark\" width=\"12\"></z-icon>\n            </span>\n          </span>\n        </label>\n      </z-toggle-switch>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-toggle-switch/index.stories.js

@@ -0,0 +1,27 @@
+import { html } from "lit";
+import { LabelPosition } from "../../beans";
+import "./index";
+const StoryMeta = {
+    title: "ZToggleSwitch",
+    argTypes: {
+        labelPosition: {
+            options: Object.values(LabelPosition),
+            control: { type: "radio" },
+        },
+    },
+};
+export default StoryMeta;
+export const Default = {
+    args: {
+        labelPosition: LabelPosition.LEFT,
+        disabled: false,
+    },
+    render: (args) => html `
+    <z-toggle-switch
+      .labelPosition=${args.labelPosition}
+      disabled=${args.disabled}
+      >Toggle
+    </z-toggle-switch>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toggle-switch/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAC1C,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC;YACrC,OAAO,EAAE,EAAC,IAAI,EAAE,OAAO,EAAC;SACzB;KACF;CAC4B,CAAC;AAEhC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,aAAa,EAAE,aAAa,CAAC,IAAI;QACjC,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAED,IAAI,CAAC,aAAa;iBACxB,IAAI,CAAC,QAAQ;;;GAG3B;CACgC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToggleSwitch} from \".\";\nimport {LabelPosition} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZToggleSwitch\",\n  argTypes: {\n    labelPosition: {\n      options: Object.values(LabelPosition),\n      control: {type: \"radio\"},\n    },\n  },\n} satisfies Meta<ZToggleSwitch>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  args: {\n    labelPosition: LabelPosition.LEFT,\n    disabled: false,\n  },\n  render: (args) => html`\n    <z-toggle-switch\n      .labelPosition=${args.labelPosition}\n      disabled=${args.disabled}\n      >Toggle\n    </z-toggle-switch>\n  `,\n} satisfies StoryObj<ZToggleSwitch>;\n"]}