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

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

@@ -0,0 +1,292 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { CardVariant } from "../../beans";
+import "../z-icon/index";
+import "./index";
+import "./index.stories.css";
+const StoryMeta = {
+    title: "ZCard",
+    component: "z-card",
+    argTypes: {
+        variant: {
+            control: {
+                type: "inline-radio",
+                labels: {
+                    null: "default",
+                },
+            },
+            options: [null, ...Object.values(CardVariant)],
+        },
+    },
+    args: {
+        variant: null,
+        showShadow: false,
+        clickable: false,
+    },
+};
+export default StoryMeta;
+export const WithImage = {
+    render: (args) => html `
+    <z-card
+      class="demo-card"
+      .variant="${args.variant}"
+      .showShadow="${args.showShadow}"
+      .clickable="${args.clickable}"
+    >
+      <img
+        slot="cover"
+        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
+      />
+      <span
+        class="body-5"
+        slot="metadata"
+      >
+        metadata
+      </span>
+      <a
+        href="https://google.it"
+        target="_blank"
+        slot="title"
+      >
+        <span>Card title</span>
+      </a>
+      <p
+        class="body-3"
+        slot="text"
+      >
+        Some description for the content of the card.
+      </p>
+      <button slot="action"><z-icon name="share"></z-icon></button>
+      <button slot="action"><z-icon name="delete"></z-icon></button>
+    </z-card>
+  `,
+};
+export const WithImageAndIcon = {
+    args: {
+        coverIcon: "play-filled",
+    },
+    render: (args) => html `
+    <z-card
+      class="demo-card"
+      cover-icon="${args.coverIcon}"
+      .variant="${args.variant}"
+      .showShadow="${args.showShadow}"
+      .clickable="${args.clickable}"
+    >
+      <img
+        slot="cover"
+        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
+      />
+      <h2
+        class="body-5"
+        slot="metadata"
+      >
+        metadata
+      </h2>
+      <a
+        href="https://google.it"
+        target="_blank"
+        slot="title"
+      >
+        <span>Card title</span>
+      </a>
+      <p
+        class="body-3"
+        slot="text"
+      >
+        Some description for the content of the card.
+      </p>
+      <button slot="action"><z-icon name="share"></z-icon></button>
+      <button slot="action"><z-icon name="delete"></z-icon></button>
+    </z-card>
+  `,
+};
+export const ColorCover = {
+    args: {
+        "--z-card--color-cover-background": "var(--yellow500)",
+    },
+    render: (args) => html `
+    <z-card
+      class="demo-card"
+      .variant="${args.variant}"
+      .showShadow="${args.showShadow}"
+      .clickable="${args.clickable}"
+      style="--z-card--color-cover-background: ${args["--z-card--color-cover-background"]};"
+    >
+      <h2
+        class="body-5"
+        slot="metadata"
+      >
+        metadata
+      </h2>
+      <a
+        href="https://google.it"
+        target="_blank"
+        slot="title"
+      >
+        <span>Card title</span>
+      </a>
+      <p
+        class="body-3"
+        slot="text"
+      >
+        Some description for the content of the card.
+      </p>
+      <button slot="action"><z-icon name="share"></z-icon></button>
+      <button slot="action"><z-icon name="delete"></z-icon></button>
+    </z-card>
+  `,
+};
+export const TextVariantPrimaryBackground = {
+    args: {
+        "--z-card--text-border-radius": "4px",
+    },
+    parameters: {
+        controls: {
+            exclude: ["variant"],
+        },
+    },
+    render: (args) => html `
+    <z-card
+      class="text-variant-card"
+      variant="text"
+      .showShadow="${args.showShadow}"
+      .clickable="${args.clickable}"
+      style=${styleMap({
+        "--z-card--text-background": "var(--color-primary01)",
+        "--z-card--text-border-radius": `${args["--z-card--text-border-radius"]}`,
+        "color": "var(--color-text-inverse)",
+    })}
+    >
+      <h2
+        class="body-5"
+        slot="metadata"
+      >
+        metadata
+      </h2>
+      <a
+        href="https://google.it"
+        target="_blank"
+        slot="title"
+      >
+        <span>Card title</span>
+      </a>
+      <p
+        class="body-3"
+        slot="text"
+      >
+        Some description for the content of the card.
+      </p>
+      <button slot="action">
+        <z-icon
+          name="share"
+          fill="color-surface01"
+        ></z-icon>
+      </button>
+      <button slot="action">
+        <z-icon
+          name="delete"
+          fill="color-surface01"
+        ></z-icon>
+      </button>
+    </z-card>
+  `,
+};
+export const TextVariantWhiteBackgroundAndBordered = {
+    args: {
+        "--z-card--text-border": "2px solid var(--gray800)",
+        "--z-card--text-border-radius": "4px",
+        "--z-card--text-padding": "16px 8px",
+    },
+    parameters: {
+        controls: {
+            exclude: ["variant"],
+        },
+    },
+    render: (args) => html `<z-card
+      class="text-variant-card"
+      variant="text"
+      .showShadow="${args.showShadow}"
+      .clickable="${args.clickable}"
+      style=${styleMap({
+        "--z-card--text-background": `var(--color-white)`,
+        "--z-card--text-border": `${args["--z-card--text-border"]}`,
+        "--z-card--text-border-radius": `${args["--z-card--text-border-radius"]}`,
+        "--z-card--text-padding": `${args["--z-card--text-padding"]}`,
+    })}
+    >
+      <h2
+        class="body-5"
+        slot="metadata"
+      >
+        metadata
+      </h2>
+      <a
+        href="https://google.it"
+        target="_blank"
+        slot="title"
+      >
+        <span>Card title</span>
+      </a>
+      <p
+        class="body-3"
+        slot="text"
+      >
+        Some description for the content of the card.
+      </p>
+      <button slot="action">
+        <z-icon
+          name="share"
+          fill="color-primary01"
+        ></z-icon>
+      </button>
+      <button slot="action">
+        <z-icon
+          name="delete"
+          fill="color-primary01"
+        ></z-icon>
+      </button>
+    </z-card>`,
+};
+export const WithImageAndClick = {
+    render: (args) => html `
+    <script>
+      document.getElementById("btn-card").addEventListener("click", (e) => {
+        // emit event, do stuff
+        alert("Click on card");
+      });
+    </script>
+    <z-card
+      class="demo-card"
+      .variant="${args.variant}"
+      .showShadow="${args.showShadow}"
+      .clickable="${args.clickable}"
+    >
+      <img
+        slot="cover"
+        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
+      />
+      <span
+        class="body-5"
+        slot="metadata"
+      >
+        metadata
+      </span>
+      <button
+        id="btn-card"
+        slot="title"
+      >
+        <span>Card title</span>
+      </button>
+      <p
+        class="body-3"
+        slot="text"
+      >
+        Some description for the content of the card.
+      </p>
+      <button slot="action"><z-icon name="share"></z-icon></button>
+      <button slot="action"><z-icon name="delete"></z-icon></button>
+    </z-card>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-card/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAExC,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAU7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,MAAM,EAAE;oBACN,IAAI,EAAE,SAAS;iBAChB;aACF;YACD,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;SAC/C;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;KACjB;CAC+B,CAAC;AAEnC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;kBAGN,IAAI,CAAC,OAAO;qBACT,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4B/B;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;oBAGJ,IAAI,CAAC,SAAS;kBAChB,IAAI,CAAC,OAAO;qBACT,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4B/B;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,kCAAkC,EAAE,kBAAkB;KACvD;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;kBAGN,IAAI,CAAC,OAAO;qBACT,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;iDACe,IAAI,CAAC,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;GAwBtF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,IAAI,EAAE;QACJ,8BAA8B,EAAE,KAAK;KACtC;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,SAAS,CAAC;SACrB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;qBAIH,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;cACpB,QAAQ,CAAC;QACf,2BAA2B,EAAE,wBAAwB;QACrD,8BAA8B,EAAE,GAAG,IAAI,CAAC,8BAA8B,CAAC,EAAE;QACzE,OAAO,EAAE,2BAA2B;KACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCL;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,qCAAqC,GAAG;IACnD,IAAI,EAAE;QACJ,uBAAuB,EAAE,0BAA0B;QACnD,8BAA8B,EAAE,KAAK;QACrC,wBAAwB,EAAE,UAAU;KACrC;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,SAAS,CAAC;SACrB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;qBAGa,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;cACpB,QAAQ,CAAC;QACf,2BAA2B,EAAE,oBAAoB;QACjD,uBAAuB,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC,EAAE;QAC3D,8BAA8B,EAAE,GAAG,IAAI,CAAC,8BAA8B,CAAC,EAAE;QACzE,wBAAwB,EAAE,GAAG,IAAI,CAAC,wBAAwB,CAAC,EAAE;KAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCM;CACG,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;kBASN,IAAI,CAAC,OAAO;qBACT,IAAI,CAAC,UAAU;oBAChB,IAAI,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2B/B;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZCard} from \".\";\nimport {CardVariant} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCardStoriesArgs = ZCard &\n  CSSVarsArguments<\n    | \"z-card--color-cover-background\"\n    | \"z-card--color-cover-background\"\n    | \"z-card--text-border\"\n    | \"z-card--text-border-radius\"\n    | \"z-card--text-padding\"\n  >;\nconst StoryMeta = {\n  title: \"ZCard\",\n  component: \"z-card\",\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n        labels: {\n          null: \"default\",\n        },\n      },\n      options: [null, ...Object.values(CardVariant)],\n    },\n  },\n  args: {\n    variant: null,\n    showShadow: false,\n    clickable: false,\n  },\n} satisfies Meta<ZCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCardStoriesArgs>;\n\nexport const WithImage = {\n  render: (args) => html`\n    <z-card\n      class=\"demo-card\"\n      .variant=\"${args.variant}\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n    >\n      <img\n        slot=\"cover\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <span\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </span>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n      <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n    </z-card>\n  `,\n} satisfies Story;\n\nexport const WithImageAndIcon = {\n  args: {\n    coverIcon: \"play-filled\",\n  },\n  render: (args) => html`\n    <z-card\n      class=\"demo-card\"\n      cover-icon=\"${args.coverIcon}\"\n      .variant=\"${args.variant}\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n    >\n      <img\n        slot=\"cover\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <h2\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </h2>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n      <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n    </z-card>\n  `,\n} satisfies Story;\n\nexport const ColorCover = {\n  args: {\n    \"--z-card--color-cover-background\": \"var(--yellow500)\",\n  },\n  render: (args) => html`\n    <z-card\n      class=\"demo-card\"\n      .variant=\"${args.variant}\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n      style=\"--z-card--color-cover-background: ${args[\"--z-card--color-cover-background\"]};\"\n    >\n      <h2\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </h2>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n      <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n    </z-card>\n  `,\n} satisfies Story;\n\nexport const TextVariantPrimaryBackground = {\n  args: {\n    \"--z-card--text-border-radius\": \"4px\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"variant\"],\n    },\n  },\n  render: (args) => html`\n    <z-card\n      class=\"text-variant-card\"\n      variant=\"text\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n      style=${styleMap({\n        \"--z-card--text-background\": \"var(--color-primary01)\",\n        \"--z-card--text-border-radius\": `${args[\"--z-card--text-border-radius\"]}`,\n        \"color\": \"var(--color-text-inverse)\",\n      })}\n    >\n      <h2\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </h2>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\">\n        <z-icon\n          name=\"share\"\n          fill=\"color-surface01\"\n        ></z-icon>\n      </button>\n      <button slot=\"action\">\n        <z-icon\n          name=\"delete\"\n          fill=\"color-surface01\"\n        ></z-icon>\n      </button>\n    </z-card>\n  `,\n} satisfies Story;\n\nexport const TextVariantWhiteBackgroundAndBordered = {\n  args: {\n    \"--z-card--text-border\": \"2px solid var(--gray800)\",\n    \"--z-card--text-border-radius\": \"4px\",\n    \"--z-card--text-padding\": \"16px 8px\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"variant\"],\n    },\n  },\n  render: (args) =>\n    html`<z-card\n      class=\"text-variant-card\"\n      variant=\"text\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n      style=${styleMap({\n        \"--z-card--text-background\": `var(--color-white)`,\n        \"--z-card--text-border\": `${args[\"--z-card--text-border\"]}`,\n        \"--z-card--text-border-radius\": `${args[\"--z-card--text-border-radius\"]}`,\n        \"--z-card--text-padding\": `${args[\"--z-card--text-padding\"]}`,\n      })}\n    >\n      <h2\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </h2>\n      <a\n        href=\"https://google.it\"\n        target=\"_blank\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </a>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\">\n        <z-icon\n          name=\"share\"\n          fill=\"color-primary01\"\n        ></z-icon>\n      </button>\n      <button slot=\"action\">\n        <z-icon\n          name=\"delete\"\n          fill=\"color-primary01\"\n        ></z-icon>\n      </button>\n    </z-card>`,\n} satisfies Story;\n\nexport const WithImageAndClick = {\n  render: (args) => html`\n    <script>\n      document.getElementById(\"btn-card\").addEventListener(\"click\", (e) => {\n        // emit event, do stuff\n        alert(\"Click on card\");\n      });\n    </script>\n    <z-card\n      class=\"demo-card\"\n      .variant=\"${args.variant}\"\n      .showShadow=\"${args.showShadow}\"\n      .clickable=\"${args.clickable}\"\n    >\n      <img\n        slot=\"cover\"\n        src=\"https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg\"\n      />\n      <span\n        class=\"body-5\"\n        slot=\"metadata\"\n      >\n        metadata\n      </span>\n      <button\n        id=\"btn-card\"\n        slot=\"title\"\n      >\n        <span>Card title</span>\n      </button>\n      <p\n        class=\"body-3\"\n        slot=\"text\"\n      >\n        Some description for the content of the card.\n      </p>\n      <button slot=\"action\"><z-icon name=\"share\"></z-icon></button>\n      <button slot=\"action\"><z-icon name=\"delete\"></z-icon></button>\n    </z-card>\n  `,\n} satisfies Story;\n"]}

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

@@ -1,5 +1,5 @@
-import { h, Host } from "@stencil/core";
-import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant } from "../../beans";
+import { Host, h } from "@stencil/core";
+import { ButtonVariant, CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
 /**
  * ZCarousel component.
  * @cssprop --z-carousel-gutter - The gutter between items.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-carousel/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Prop, Element, Watch, Event, EventEmitter, State, Host} from \"@stencil/core\";\nimport {CarouselArrowsPosition, CarouselProgressMode, ButtonVariant} from \"../../beans\";\n\n/**\n * ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @cssprop --z-carousel-items-shadow - The shadow around the items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n */\n@Component({\n  tag: \"z-carousel\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCarousel {\n  @Element() host: HTMLZCarouselElement;\n\n  /** The z-carousel is on loading state */\n  @Prop()\n  isLoading: boolean;\n\n  /** The z-carousel title */\n  @Prop()\n  label?: string;\n\n  /** Shows only one content at a time */\n  @Prop({reflect: true})\n  single = false;\n\n  /** Arrow buttons position */\n  @Prop({reflect: true})\n  arrowsPosition?: CarouselArrowsPosition;\n\n  /** Progress indicator type. Only available for `single` mode */\n  @Prop()\n  progressMode?: CarouselProgressMode;\n\n  /**\n   * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n   * If set to `false`, the arrows will not be visible on mobile.\n   * Only meaningful with `arrowsPosition` set to `OVER`.\n   */\n  @Prop({reflect: true})\n  fixedArrows = true;\n\n  /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */\n  @Prop()\n  ghostLoadingHeight = 100;\n\n  /** When enabled, navigating next the last item will go back to the first item and vice versa. */\n  @Prop()\n  infinite = false;\n\n  /** Current item index for single mode. */\n  @State()\n  current = 0;\n\n  /** Items on the slider. */\n  @State()\n  items: HTMLLIElement[];\n\n  /** Index of the indicator to highlight. */\n  @State()\n  highlightedIndicator: number;\n\n  @State()\n  canNavigatePrev: boolean;\n\n  @State()\n  canNavigateNext: boolean;\n\n  /** Reference for the items container element. */\n  protected itemsContainer: HTMLUListElement;\n\n  /** Observer that handles current index change when scrolling on single mode. */\n  private intersectionObserver: IntersectionObserver;\n\n  /** Observer to check if navigation can still be enabled/showed when the size of the items' container changes */\n  private resizeObserver: ResizeObserver;\n\n  /** Flag indicating the items container is about to scroll programmatically towards the stored index. */\n  private scrollingTo: number = null;\n\n  /** Emitted on index change and only in `single` mode. */\n  @Event()\n  indexChange: EventEmitter<{currentItem: number}>;\n\n  @Watch(\"current\")\n  onIndexChange(): void {\n    this.indexChange.emit({currentItem: this.current});\n  }\n\n  @Watch(\"single\")\n  onSingleModeChange(): void {\n    if (this.single && !this.intersectionObserver) {\n      this.setIntersectionObserver();\n    }\n  }\n\n  @Watch(\"infinite\")\n  onInfiniteModeChange(): void {\n    this.checkNavigationValidity();\n  }\n\n  /**\n   * Set an intersection observer to:\n   * - highlight the indicator of the intersecting item during scroll\n   * - set the current item to the last intersecting item\n   */\n  private setIntersectionObserver(): void {\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        const entry = entries.find(({isIntersecting}) => isIntersecting);\n        if (!entry) {\n          return;\n        }\n\n        const entryIndex = this.items.findIndex((item) => item === entry.target);\n        this.highlightedIndicator = entryIndex;\n\n        /* skip setting the current item if intersection has been triggered by a programmatic scroll\n        (@see `goTo` function) and the final index has not been reached */\n        if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n          return;\n        }\n\n        this.scrollingTo = null;\n        this.current = entryIndex;\n      },\n      {\n        root: this.itemsContainer,\n        threshold: 0.5,\n      }\n    );\n\n    this.items.forEach((element) => this.intersectionObserver.observe(element));\n  }\n\n  /** Update items' list and check conditions to allow navigation */\n  private onSlotChange(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.checkNavigationValidity();\n    this.setIntersectionObserver();\n    this.goTo(this.current);\n  }\n\n  private onPrev(): void {\n    if (this.single) {\n      this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n      return;\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite && this.itemsContainer.scrollLeft == 0\n          ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          : -this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  private onNext(): void {\n    if (this.single) {\n      const next =\n        this.infinite && this.current + 1 > this.items.length - 1\n          ? 0\n          : Math.min(this.current + 1, this.items.length - 1);\n\n      return this.goTo(next);\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite &&\n        this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          ? -this.itemsContainer.scrollWidth\n          : this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if navigation buttons can be enabled and set the related local states.\n   */\n  private checkNavigationValidity(): void {\n    if (this.single) {\n      this.canNavigatePrev = this.current > 0;\n      this.canNavigateNext = this.current < this.items.length - 1;\n\n      return;\n    }\n\n    this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n    this.canNavigateNext =\n      this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n  }\n\n  /**\n   * Check if footer has to be rendered.\n   */\n  private canShowFooter(): boolean {\n    if (!this.canNavigatePrev && !this.canNavigateNext) {\n      return false;\n    }\n\n    return (\n      this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||\n      this.progressMode === CarouselProgressMode.DOTS ||\n      this.progressMode === CarouselProgressMode.NUMBERS\n    );\n  }\n\n  /**\n   * Set current item to passed index.\n   * @param index Index to set\n   */\n  private goTo(index: number): void {\n    if (this.current === index) {\n      return;\n    }\n\n    this.scrollingTo = index;\n    const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n    // the scroll will trigger the IntersectionObserver and set the current item\n    this.itemsContainer.scroll({\n      left,\n      behavior: \"smooth\",\n    });\n  }\n\n  /** Check if navigation of at least one direction is enabled */\n  private get canNavigate(): boolean {\n    return this.canNavigatePrev || this.canNavigateNext;\n  }\n\n  private setupItems(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.items.forEach((item) => {\n      item.setAttribute(\"role\", \"group\");\n      item.setAttribute(\"aria-roledescription\", \"slide\");\n    });\n  }\n\n  componentDidLoad(): void {\n    this.itemsContainer?.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n    this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n    this.resizeObserver.observe(this.itemsContainer);\n    this.setupItems();\n    if (this.single) {\n      this.setIntersectionObserver();\n    }\n    this.checkNavigationValidity();\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLDivElement | HTMLZCarouselElement {\n    if (this.isLoading) {\n      return (\n        <div class=\"z-carousel-container\">\n          {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n          <div style={{height: `${this.ghostLoadingHeight}px`}}>\n            <z-ghost-loading></z-ghost-loading>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <div\n          class=\"z-carousel-container\"\n          role=\"group\"\n          aria-roledescription=\"carousel\"\n          aria-label={this.label || \"Carousel\"}\n        >\n          {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n          <div class=\"z-carousel-wrapper\">\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"prev\"\n              icon=\"arrow-left\"\n              onClick={this.onPrev.bind(this)}\n              disabled={!this.infinite && !this.canNavigatePrev}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n            />\n            <ul\n              class=\"z-carousel-items-container\"\n              aria-atomic=\"false\"\n              aria-live=\"polite\"\n              ref={(el) => (this.itemsContainer = el)}\n            >\n              <slot onSlotchange={this.onSlotChange.bind(this)} />\n            </ul>\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"next\"\n              icon=\"arrow-right\"\n              onClick={this.onNext.bind(this)}\n              disabled={!this.infinite && !this.canNavigateNext}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n            />\n          </div>\n        </div>\n\n        {this.canShowFooter() && (\n          <div class=\"z-carousel-footer\">\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-left\"\n                onClick={this.onPrev.bind(this)}\n                disabled={!this.infinite && !this.canNavigatePrev}\n                ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n              />\n            )}\n            {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n              <div class=\"dots-progress\">\n                {this.items.map((_, index) => (\n                  <button\n                    type=\"button\"\n                    class={{current: this.highlightedIndicator === index}}\n                    aria-label={\n                      this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n                    }\n                    onClick={() => this.goTo(index)}\n                  />\n                ))}\n              </div>\n            )}\n            {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n              <div class=\"numbers-progress interactive-1\">\n                <span class=\"current\">{this.current + 1}</span>\n                <span>di</span>\n                <span>{this.items.length}</span>\n              </div>\n            )}\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-right\"\n                onClick={this.onNext.bind(this)}\n                disabled={!this.infinite && !this.canNavigateNext}\n                ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n              />\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAE,oBAAoB,EAAC,MAAM,aAAa,CAAC;AAExF;;;;;GAKG;AAMH,MAAM,OAAO,SAAS;;QAkEpB,wGAAwG;QAChG,gBAAW,GAAW,IAAI,CAAC;;;sBAtD1B,KAAK;;;2BAgBA,IAAI;kCAIG,GAAG;wBAIb,KAAK;uBAIN,CAAC;;;;;;IAiCX,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAC;IACrD,CAAC;IAGD,kBAAkB;QAChB,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9C,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACK,uBAAuB;QAC7B,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAClD,CAAC,OAAO,EAAE,EAAE;YACV,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAC,cAAc,EAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC;YACjE,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO;YACT,CAAC;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC;YACzE,IAAI,CAAC,oBAAoB,GAAG,UAAU,CAAC;YAEvC;8EACkE;YAClE,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;gBACjE,OAAO;YACT,CAAC;YAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC5B,CAAC,EACD;YACE,IAAI,EAAE,IAAI,CAAC,cAAc;YACzB,SAAS,EAAE,GAAG;SACf,CACF,CAAC;QAEF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9E,CAAC;IAED,kEAAkE;IAC1D,YAAY;QAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAoB,CAAC;QAC/D,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC;YAEzG,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;YAC3B,IAAI,EACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,IAAI,CAAC;gBAClD,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW;gBACnE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC;YAC1C,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,IAAI,GACR,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;gBACvD,CAAC,CAAC,CAAC;gBACH,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAExD,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;YAC3B,IAAI,EACF,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,cAAc,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW;gBACjG,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW;gBAClC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC;YACzC,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,uBAAuB;QAC7B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAE5D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,GAAG,CAAC,CAAC;QAC1D,IAAI,CAAC,eAAe;YAClB,IAAI,CAAC,cAAc,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;IACvG,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YACnD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,CACL,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,MAAM;YACrD,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,IAAI;YAC/C,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,OAAO,CACnD,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,IAAI,CAAC,KAAa;QACxB,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5F,4EAA4E;QAC5E,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;YACzB,IAAI;YACJ,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAED,+DAA+D;IAC/D,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC;IACtD,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAoB,CAAC;QAC/D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;;QACd,MAAA,IAAI,CAAC,cAAc,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAC1G,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;QACD,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB;gBAC9B,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,KAAK,CAAO;gBAC5E,WAAK,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,IAAI,CAAC,kBAAkB,IAAI,EAAC;oBAClD,0BAAmC,CAC/B,CACF,CACP,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,WACE,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,OAAO,0BACS,UAAU,gBACnB,IAAI,CAAC,KAAK,IAAI,UAAU;gBAEnC,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,KAAK,CAAO;gBAC5E,WAAK,KAAK,EAAC,oBAAoB;oBAC7B,gBACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,aAAa,CAAC,SAAS,oBACjB,MAAM,EACrB,IAAI,EAAC,YAAY,EACjB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EACjD,MAAM,EAAE,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAChF,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,gCAAgC,GAC1F;oBACF,UACE,KAAK,EAAC,4BAA4B,iBACtB,OAAO,eACT,QAAQ,EAClB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;wBAEvC,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACjD;oBACL,gBACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,aAAa,CAAC,SAAS,oBACjB,MAAM,EACrB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EACjD,MAAM,EAAE,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAChF,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,gCAAgC,GAC1F,CACE,CACF;YAEL,IAAI,CAAC,aAAa,EAAE,IAAI,CACvB,WAAK,KAAK,EAAC,mBAAmB;gBAC3B,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,MAAM,IAAI,CACxD,gBACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,YAAY,EACjB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EACjD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,gCAAgC,GAC1F,CACH;gBACA,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,CAC/E,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,KAAK,KAAK,EAAC,gBAEnD,IAAI,CAAC,oBAAoB,KAAK,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,yBAAyB,KAAK,GAAG,CAAC,EAAE,EAElG,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,CACH,CAAC,CACE,CACP;gBACA,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,CAClF,WAAK,KAAK,EAAC,gCAAgC;oBACzC,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAQ;oBAC/C,qBAAe;oBACf,gBAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,CAC5B,CACP;gBACA,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,MAAM,IAAI,CACxD,gBACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EACjD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,gCAAgC,GAC1F,CACH,CACG,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\n\n/**\n * ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @cssprop --z-carousel-items-shadow - The shadow around the items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n */\n@Component({\n  tag: \"z-carousel\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCarousel {\n  @Element() host: HTMLZCarouselElement;\n\n  /** The z-carousel is on loading state */\n  @Prop()\n  isLoading: boolean;\n\n  /** The z-carousel title */\n  @Prop()\n  label?: string;\n\n  /** Shows only one content at a time */\n  @Prop({reflect: true})\n  single = false;\n\n  /** Arrow buttons position */\n  @Prop({reflect: true})\n  arrowsPosition?: CarouselArrowsPosition;\n\n  /** Progress indicator type. Only available for `single` mode */\n  @Prop()\n  progressMode?: CarouselProgressMode;\n\n  /**\n   * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n   * If set to `false`, the arrows will not be visible on mobile.\n   * Only meaningful with `arrowsPosition` set to `OVER`.\n   */\n  @Prop({reflect: true})\n  fixedArrows = true;\n\n  /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */\n  @Prop()\n  ghostLoadingHeight = 100;\n\n  /** When enabled, navigating next the last item will go back to the first item and vice versa. */\n  @Prop()\n  infinite = false;\n\n  /** Current item index for single mode. */\n  @State()\n  current = 0;\n\n  /** Items on the slider. */\n  @State()\n  items: HTMLLIElement[];\n\n  /** Index of the indicator to highlight. */\n  @State()\n  highlightedIndicator: number;\n\n  @State()\n  canNavigatePrev: boolean;\n\n  @State()\n  canNavigateNext: boolean;\n\n  /** Reference for the items container element. */\n  protected itemsContainer: HTMLUListElement;\n\n  /** Observer that handles current index change when scrolling on single mode. */\n  private intersectionObserver: IntersectionObserver;\n\n  /** Observer to check if navigation can still be enabled/showed when the size of the items' container changes */\n  private resizeObserver: ResizeObserver;\n\n  /** Flag indicating the items container is about to scroll programmatically towards the stored index. */\n  private scrollingTo: number = null;\n\n  /** Emitted on index change and only in `single` mode. */\n  @Event()\n  indexChange: EventEmitter<{currentItem: number}>;\n\n  @Watch(\"current\")\n  onIndexChange(): void {\n    this.indexChange.emit({currentItem: this.current});\n  }\n\n  @Watch(\"single\")\n  onSingleModeChange(): void {\n    if (this.single && !this.intersectionObserver) {\n      this.setIntersectionObserver();\n    }\n  }\n\n  @Watch(\"infinite\")\n  onInfiniteModeChange(): void {\n    this.checkNavigationValidity();\n  }\n\n  /**\n   * Set an intersection observer to:\n   * - highlight the indicator of the intersecting item during scroll\n   * - set the current item to the last intersecting item\n   */\n  private setIntersectionObserver(): void {\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        const entry = entries.find(({isIntersecting}) => isIntersecting);\n        if (!entry) {\n          return;\n        }\n\n        const entryIndex = this.items.findIndex((item) => item === entry.target);\n        this.highlightedIndicator = entryIndex;\n\n        /* skip setting the current item if intersection has been triggered by a programmatic scroll\n        (@see `goTo` function) and the final index has not been reached */\n        if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n          return;\n        }\n\n        this.scrollingTo = null;\n        this.current = entryIndex;\n      },\n      {\n        root: this.itemsContainer,\n        threshold: 0.5,\n      }\n    );\n\n    this.items.forEach((element) => this.intersectionObserver.observe(element));\n  }\n\n  /** Update items' list and check conditions to allow navigation */\n  private onSlotChange(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.checkNavigationValidity();\n    this.setIntersectionObserver();\n    this.goTo(this.current);\n  }\n\n  private onPrev(): void {\n    if (this.single) {\n      this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n      return;\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite && this.itemsContainer.scrollLeft == 0\n          ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          : -this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  private onNext(): void {\n    if (this.single) {\n      const next =\n        this.infinite && this.current + 1 > this.items.length - 1\n          ? 0\n          : Math.min(this.current + 1, this.items.length - 1);\n\n      return this.goTo(next);\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite &&\n        this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          ? -this.itemsContainer.scrollWidth\n          : this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if navigation buttons can be enabled and set the related local states.\n   */\n  private checkNavigationValidity(): void {\n    if (this.single) {\n      this.canNavigatePrev = this.current > 0;\n      this.canNavigateNext = this.current < this.items.length - 1;\n\n      return;\n    }\n\n    this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n    this.canNavigateNext =\n      this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n  }\n\n  /**\n   * Check if footer has to be rendered.\n   */\n  private canShowFooter(): boolean {\n    if (!this.canNavigatePrev && !this.canNavigateNext) {\n      return false;\n    }\n\n    return (\n      this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||\n      this.progressMode === CarouselProgressMode.DOTS ||\n      this.progressMode === CarouselProgressMode.NUMBERS\n    );\n  }\n\n  /**\n   * Set current item to passed index.\n   * @param index Index to set\n   */\n  private goTo(index: number): void {\n    if (this.current === index) {\n      return;\n    }\n\n    this.scrollingTo = index;\n    const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n    // the scroll will trigger the IntersectionObserver and set the current item\n    this.itemsContainer.scroll({\n      left,\n      behavior: \"smooth\",\n    });\n  }\n\n  /** Check if navigation of at least one direction is enabled */\n  private get canNavigate(): boolean {\n    return this.canNavigatePrev || this.canNavigateNext;\n  }\n\n  private setupItems(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.items.forEach((item) => {\n      item.setAttribute(\"role\", \"group\");\n      item.setAttribute(\"aria-roledescription\", \"slide\");\n    });\n  }\n\n  componentDidLoad(): void {\n    this.itemsContainer?.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n    this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n    this.resizeObserver.observe(this.itemsContainer);\n    this.setupItems();\n    if (this.single) {\n      this.setIntersectionObserver();\n    }\n    this.checkNavigationValidity();\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLDivElement | HTMLZCarouselElement {\n    if (this.isLoading) {\n      return (\n        <div class=\"z-carousel-container\">\n          {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n          <div style={{height: `${this.ghostLoadingHeight}px`}}>\n            <z-ghost-loading></z-ghost-loading>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <div\n          class=\"z-carousel-container\"\n          role=\"group\"\n          aria-roledescription=\"carousel\"\n          aria-label={this.label || \"Carousel\"}\n        >\n          {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n          <div class=\"z-carousel-wrapper\">\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"prev\"\n              icon=\"arrow-left\"\n              onClick={this.onPrev.bind(this)}\n              disabled={!this.infinite && !this.canNavigatePrev}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n            />\n            <ul\n              class=\"z-carousel-items-container\"\n              aria-atomic=\"false\"\n              aria-live=\"polite\"\n              ref={(el) => (this.itemsContainer = el)}\n            >\n              <slot onSlotchange={this.onSlotChange.bind(this)} />\n            </ul>\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"next\"\n              icon=\"arrow-right\"\n              onClick={this.onNext.bind(this)}\n              disabled={!this.infinite && !this.canNavigateNext}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n            />\n          </div>\n        </div>\n\n        {this.canShowFooter() && (\n          <div class=\"z-carousel-footer\">\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-left\"\n                onClick={this.onPrev.bind(this)}\n                disabled={!this.infinite && !this.canNavigatePrev}\n                ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n              />\n            )}\n            {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n              <div class=\"dots-progress\">\n                {this.items.map((_, index) => (\n                  <button\n                    type=\"button\"\n                    class={{current: this.highlightedIndicator === index}}\n                    aria-label={\n                      this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n                    }\n                    onClick={() => this.goTo(index)}\n                  />\n                ))}\n              </div>\n            )}\n            {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n              <div class=\"numbers-progress interactive-1\">\n                <span class=\"current\">{this.current + 1}</span>\n                <span>di</span>\n                <span>{this.items.length}</span>\n              </div>\n            )}\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-right\"\n                onClick={this.onNext.bind(this)}\n                disabled={!this.infinite && !this.canNavigateNext}\n                ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n              />\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,129 @@
+import { html } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
+import "../z-ghost-loading/index";
+import "./index";
+import "./index.stories.css";
+/**
+ * This component was conceived as a list of elements to respect the rules of accessibility (https://www.w3.org/WAI/tutorials/carousels/working-example/).
+ * Pass any number of elements inside its main `slot`.
+ * @example```html
+ * <z-carousel>
+ *  <li>element</li>
+ *  <li>element</li>
+ *  <li>element</li>
+ * </z-carousel>
+ * ```
+ * > Note: always use `li` elements as direct children of `z-carousel`, as it wraps them with an `ul` element.
+ * You can set the gutter between the elements by using the `--z-carousel-gutter` custom property.
+ * @example```css
+ * z-carousel {
+ *  --z-carousel-gutter: calc(var(--space-unit) * 2);
+ * }```
+ */
+const StoryMeta = {
+    title: "ZCarousel",
+    component: "z-carousel",
+    decorators: [(Story) => html `<div class="z-carousel-story-container">${Story()}</div>`],
+};
+export default StoryMeta;
+export const SlideshowWithArrowsOver = {
+    args: {
+        "label": "",
+        "--z-carousel-gutter": "var(--space-unit)",
+        "infinite": false,
+        "fixedArrows": true,
+        "itemsCount": 8,
+    },
+    render: (args) => html `<z-carousel
+      .arrowsPosition=${CarouselArrowsPosition.OVER}
+      .fixedArrows=${args.fixedArrows}
+      .infinite=${args.infinite}
+      label=${args.label}
+      style="--z-carousel-gutter: ${args["--z-carousel-gutter"]}"
+    >
+      ${repeat([...new Array(args.itemsCount)].map((_, i) => i), (i) => i, (_, index) => html `<li><div class="carousel-box">${index + 1}</div></li>`)}
+    </z-carousel>`,
+};
+export const SingleMode = {
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        arrowsPosition: {
+            control: {
+                type: "inline-radio",
+            },
+            options: Object.values(CarouselArrowsPosition),
+        },
+        progressMode: {
+            control: {
+                type: "inline-radio",
+            },
+            options: Object.values(CarouselProgressMode),
+        },
+    },
+    args: {
+        label: "Carousel title",
+        progressMode: CarouselProgressMode.DOTS,
+        arrowsPosition: CarouselArrowsPosition.BOTTOM,
+        infinite: false,
+        fixedArrows: true,
+        itemsCount: 8,
+    },
+    render: (args) => html `<z-carousel
+      .arrowsPosition=${args.arrowsPosition}
+      .fixedArrows=${args.fixedArrows}
+      .infinite=${args.infinite}
+      .progressMode=${args.progressMode}
+      .single=${true}
+      label=${args.label}
+    >
+      ${repeat([...new Array(args.itemsCount)].map((_, i) => i), (i) => i, (_, index) => html `<li><div class="carousel-box">${index + 1}</div></li>`)}
+    </z-carousel>`,
+};
+/**
+ * You can handle ghost loading for the whole z-carousel by setting two properties:
+ * - `isLoading` (boolean): to show a `z-ghost-loading` component instead of the carousel content.
+ * - `ghostLoadingHeight` (number): to set the height of the `z-ghost-loading` component.
+ * You can also manually handle ghost loading by putting <z-ghost-loading> elements as items.
+ */
+export const GhostLoading = {
+    args: {
+        label: "Carousel title",
+        ghostLoadingHeight: 265,
+    },
+    parameters: {
+        controls: {
+            exclude: ["infinite"],
+        },
+    },
+    render: (args) => html `<z-carousel
+      label=${args.label}
+      .isLoading=${true}
+      .ghostLoadingHeight=${args.ghostLoadingHeight}
+    ></z-carousel>`,
+};
+export const LoadingItems = {
+    args: {
+        "label": "Carousel title",
+        "--z-carousel-gutter": "8px",
+    },
+    parameters: {
+        controls: {
+            exclude: ["infinite"],
+        },
+    },
+    render: (args) => html `<z-carousel
+      label=${args.label}
+      .infinite=${args.infinite}
+      style="--z-carousel-gutter: ${args["--z-carousel-gutter"]}"
+    >
+      ${repeat(new Array(8), () => html `<li>
+            <div class="carousel-box-loading">
+              <z-ghost-loading></z-ghost-loading>
+            </div>
+          </li>`)}
+    </z-carousel>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-carousel/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {type ZCarousel} from \".\";\nimport {CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-ghost-loading/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZCarouselStoriesArgs = ZCarousel & {itemsCount: number} & CSSVarsArguments<\"z-carousel-gutter\">;\n\n/**\n * This component was conceived as a list of elements to respect the rules of accessibility (https://www.w3.org/WAI/tutorials/carousels/working-example/).\n * Pass any number of elements inside its main `slot`.\n * @example```html\n * <z-carousel>\n *  <li>element</li>\n *  <li>element</li>\n *  <li>element</li>\n * </z-carousel>\n * ```\n * > Note: always use `li` elements as direct children of `z-carousel`, as it wraps them with an `ul` element.\n * You can set the gutter between the elements by using the `--z-carousel-gutter` custom property.\n * @example```css\n * z-carousel {\n *  --z-carousel-gutter: calc(var(--space-unit) * 2);\n * }```\n */\nconst StoryMeta = {\n  title: \"ZCarousel\",\n  component: \"z-carousel\",\n  decorators: [(Story) => html`<div class=\"z-carousel-story-container\">${Story()}</div>`],\n} satisfies Meta<ZCarouselStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZCarouselStoriesArgs>;\n\nexport const SlideshowWithArrowsOver = {\n  args: {\n    \"label\": \"\",\n    \"--z-carousel-gutter\": \"var(--space-unit)\",\n    \"infinite\": false,\n    \"fixedArrows\": true,\n    \"itemsCount\": 8,\n  },\n  render: (args) =>\n    html`<z-carousel\n      .arrowsPosition=${CarouselArrowsPosition.OVER}\n      .fixedArrows=${args.fixedArrows}\n      .infinite=${args.infinite}\n      label=${args.label}\n      style=\"--z-carousel-gutter: ${args[\"--z-carousel-gutter\"]}\"\n    >\n      ${repeat(\n        [...new Array(args.itemsCount)].map((_, i) => i),\n        (i) => i,\n        (_, index) => html`<li><div class=\"carousel-box\">${index + 1}</div></li>`\n      )}\n    </z-carousel>`,\n} satisfies Story;\n\nexport const SingleMode = {\n  parameters: {\n    layout: \"centered\",\n  },\n  argTypes: {\n    arrowsPosition: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(CarouselArrowsPosition),\n    },\n    progressMode: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(CarouselProgressMode),\n    },\n  },\n  args: {\n    label: \"Carousel title\",\n    progressMode: CarouselProgressMode.DOTS,\n    arrowsPosition: CarouselArrowsPosition.BOTTOM,\n    infinite: false,\n    fixedArrows: true,\n    itemsCount: 8,\n  },\n  render: (args) =>\n    html`<z-carousel\n      .arrowsPosition=${args.arrowsPosition}\n      .fixedArrows=${args.fixedArrows}\n      .infinite=${args.infinite}\n      .progressMode=${args.progressMode}\n      .single=${true}\n      label=${args.label}\n    >\n      ${repeat(\n        [...new Array(args.itemsCount)].map((_, i) => i),\n        (i) => i,\n        (_, index) => html`<li><div class=\"carousel-box\">${index + 1}</div></li>`\n      )}\n    </z-carousel>`,\n} satisfies Story;\n\n/**\n * You can handle ghost loading for the whole z-carousel by setting two properties:\n * - `isLoading` (boolean): to show a `z-ghost-loading` component instead of the carousel content.\n * - `ghostLoadingHeight` (number): to set the height of the `z-ghost-loading` component.\n * You can also manually handle ghost loading by putting <z-ghost-loading> elements as items.\n */\nexport const GhostLoading = {\n  args: {\n    label: \"Carousel title\",\n    ghostLoadingHeight: 265,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"infinite\"],\n    },\n  },\n  render: (args) =>\n    html`<z-carousel\n      label=${args.label}\n      .isLoading=${true}\n      .ghostLoadingHeight=${args.ghostLoadingHeight}\n    ></z-carousel>`,\n} satisfies Story;\n\nexport const LoadingItems = {\n  args: {\n    \"label\": \"Carousel title\",\n    \"--z-carousel-gutter\": \"8px\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"infinite\"],\n    },\n  },\n  render: (args) =>\n    html`<z-carousel\n      label=${args.label}\n      .infinite=${args.infinite}\n      style=\"--z-carousel-gutter: ${args[\"--z-carousel-gutter\"]}\"\n    >\n      ${repeat(\n        new Array(8),\n        () =>\n          html`<li>\n            <div class=\"carousel-box-loading\">\n              <z-ghost-loading></z-ghost-loading>\n            </div>\n          </li>`\n      )}\n    </z-carousel>`,\n} satisfies Story;\n"]}