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

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

@@ -2,13 +2,13 @@ import { h } from "@stencil/core";
 import { Breakpoints } from "../../constants/breakpoints";
 export class ZButtonSort {
     constructor() {
-        /** sort label content (ascending) (optional) */
+        this.buttonid = undefined;
+        this.label = undefined;
+        this.desclabel = undefined;
+        this.counter = undefined;
         this.sortlabelasc = "A-Z";
-        /** sort label content (descending) (optional) */
         this.sortlabeldesc = "Z-A";
-        /** selected flag (optional) */
         this.isselected = false;
-        /** sortable flag (optional) */
         this.sortasc = true;
         this.allowTooltip = false;
     }
@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '30d0203657443c589241b25ae37155cfbd203f89', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '3934b6a866c2c791aa80e0de90197f5ae372aa88', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '1bb900d3b3d364b912e67ae44e3f60cf245c0672', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '066c842f00e3d26301e63fa91849dd4f414f05e8', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '00b771b5c276eff3ca761acb28ba9df42b8d0a6c', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '6a27bbc29c4feedda219d3c48351e98e5424fc35', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '415ed91622a75e04dae5df0112d892f14015af61', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '58bd9c2614021ee41fcd4f0f27ef3fa41771c7b8', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '66689c59c79cf1d6ad15640d424fbb3ac14edde2', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'c6638b7e129f261bbcc9a7c79f02080accb6eed6', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }
@@ -66,10 +66,8 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "id, should be unique"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "buttonid"
+                "attribute": "buttonid",
+                "reflect": false
             },
             "label": {
                 "type": "string",
@@ -85,10 +83,8 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "label content (ascending)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
+                "attribute": "label",
+                "reflect": false
             },
             "desclabel": {
                 "type": "string",
@@ -104,10 +100,8 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "label content (descending)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "desclabel"
+                "attribute": "desclabel",
+                "reflect": false
             },
             "counter": {
                 "type": "number",
@@ -123,10 +117,8 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "occurrences counter (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "counter"
+                "attribute": "counter",
+                "reflect": false
             },
             "sortlabelasc": {
                 "type": "string",
@@ -142,10 +134,8 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sort label content (ascending) (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "sortlabelasc",
+                "reflect": false,
                 "defaultValue": "\"A-Z\""
             },
             "sortlabeldesc": {
@@ -162,10 +152,8 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sort label content (descending) (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "sortlabeldesc",
+                "reflect": false,
                 "defaultValue": "\"Z-A\""
             },
             "isselected": {
@@ -182,10 +170,8 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "selected flag (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "isselected",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "sortasc": {
@@ -202,10 +188,8 @@ export class ZButtonSort {
                     "tags": [],
                     "text": "sortable flag (optional)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "sortasc",
+                "reflect": false,
                 "defaultValue": "true"
             }
         };
@@ -234,3 +218,4 @@ export class ZButtonSort {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-button-sort/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAC;AAMxD,MAAM,OAAO,WAAW;;;;;;4BAmBE,KAAK;6BAIJ,KAAK;0BAIP,KAAK;uBAIR,IAAI;4BAGT,KAAK;;IAQZ,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;YACxE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAClF,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAC,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAEzC,6DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,KAAK,EAAC,UAAU,IAEf,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CACzD;YACP,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,OAAO,GAAG,CAAQ;YACnE,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAQ;YACjF,+DACE,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\n@Component({\n  tag: \"z-button-sort\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZButtonSort {\n  /** id, should be unique */\n  @Prop()\n  buttonid: string;\n\n  /** label content (ascending) */\n  @Prop()\n  label: string;\n\n  /** label content (descending) */\n  @Prop()\n  desclabel?: string;\n\n  /** occurrences counter (optional) */\n  @Prop()\n  counter?: number;\n\n  /** sort label content (ascending) (optional) */\n  @Prop()\n  sortlabelasc?: string = \"A-Z\";\n\n  /** sort label content (descending) (optional) */\n  @Prop()\n  sortlabeldesc?: string = \"Z-A\";\n\n  /** selected flag (optional) */\n  @Prop({mutable: true})\n  isselected?: boolean = false;\n\n  /** sortable flag (optional) */\n  @Prop({mutable: true})\n  sortasc?: boolean = true;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLSpanElement;\n\n  /** sorting direction click event, returns `buttonid` and `sortAsc` */\n  @Event()\n  buttonSortClick: EventEmitter;\n\n  private emitButtonSortClick(): void {\n    if (!this.isselected) {\n      this.isselected = true;\n    } else {\n      this.sortasc = !this.sortasc;\n    }\n    this.buttonSortClick.emit({\n      buttonid: this.buttonid,\n      sortAsc: this.sortasc,\n    });\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private setButtonTitle(): string {\n    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : \"\";\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        title={this.setButtonTitle()}\n        id={this.buttonid}\n        class={{selected: this.isselected}}\n        onClick={() => this.emitButtonSortClick()}\n      >\n        <span\n          ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n          class=\"ellipsis\"\n        >\n          {!this.sortasc && this.desclabel ? this.desclabel : this.label}\n        </span>\n        <span class=\"counter\">{this.counter && ` (${this.counter})`}</span>\n        <span class=\"sort\">{this.sortasc ? this.sortlabelasc : this.sortlabeldesc}</span>\n        <z-icon\n          name=\"caret-up-down\"\n          width={16}\n          height={16}\n        />\n      </button>\n    );\n  }\n}\n"]}

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

@@ -28,3 +28,4 @@ export const Ellipsis = {
         label: "Testo molto lungo lungo lungo lunghissimo lunghissimo lunghissimo ancora di più",
     },
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-button-sort/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,YAAY;QACvB,YAAY,EAAE,KAAK;QACnB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;eACO,IAAI,CAAC,KAAK;iBACR,IAAI,CAAC,OAAO;mBACV,IAAI,CAAC,SAAS;sBACX,IAAI,CAAC,YAAY;uBAChB,IAAI,CAAC,aAAa;oBACrB,IAAI,CAAC,UAAU;iBAClB,IAAI,CAAC,OAAO;sBACP;CACO,CAAC;AAE9B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,KAAK,EAAE,iFAAiF;KACzF;CACc,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport type {ZButtonSort} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZButtonSort\",\n  args: {\n    label: \"sort\",\n    counter: 3,\n    desclabel: \"label DESC\",\n    sortlabelasc: \"1-9\",\n    sortlabeldesc: \"9-1\",\n    isselected: true,\n    sortasc: true,\n  },\n  render: (args) =>\n    html`<z-button-sort\n      label=\"${args.label}\"\n      counter=\"${args.counter}\"\n      desclabel=\"${args.desclabel}\"\n      sortlabelasc=\"${args.sortlabelasc}\"\n      sortlabeldesc=\"${args.sortlabeldesc}\"\n      isselected=\"${args.isselected}\"\n      sortasc=\"${args.sortasc}\"\n    ></z-button-sort>`,\n} satisfies Meta<ZButtonSort>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZButtonSort>;\n\nexport const Default = {};\n\nexport const Ellipsis = {\n  args: {\n    label: \"Testo molto lungo lungo lungo lunghissimo lunghissimo lunghissimo ancora di più\",\n  },\n} satisfies Story;\n"]}

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

@@ -19,13 +19,11 @@ import { CardVariant } from "../../beans";
  */
 export class ZCard {
     constructor() {
-        /** Enable shadow. Default: false. */
+        this.variant = undefined;
+        this.coverIcon = undefined;
         this.showShadow = false;
-        /**
-         * Enable "clickable" styles like hover background and cursor, focus shadow on the whole card, etc.
-         * Always set this to `true` when putting an `<a>` tag in the `title` slot.
-         */
         this.clickable = false;
+        this.hasCoverImage = undefined;
     }
     componentWillLoad() {
         this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
@@ -82,8 +80,7 @@ export class ZCard {
                         "CardVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CardVariant",
-                            "referenceLocation": "CardVariant"
+                            "id": "src/beans/index.tsx::CardVariant"
                         }
                     }
                 },
@@ -93,10 +90,8 @@ export class ZCard {
                     "tags": [],
                     "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "variant"
+                "attribute": "variant",
+                "reflect": true
             },
             "coverIcon": {
                 "type": "string",
@@ -112,10 +107,8 @@ export class ZCard {
                     "tags": [],
                     "text": "Name of the icon to place over the image cover"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "cover-icon"
+                "attribute": "cover-icon",
+                "reflect": false
             },
             "showShadow": {
                 "type": "boolean",
@@ -131,10 +124,8 @@ export class ZCard {
                     "tags": [],
                     "text": "Enable shadow. Default: false."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "show-shadow",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "clickable": {
@@ -151,10 +142,8 @@ export class ZCard {
                     "tags": [],
                     "text": "Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\nAlways set this to `true` when putting an `<a>` tag in the `title` slot."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "clickable",
+                "reflect": true,
                 "defaultValue": "false"
             }
         };
@@ -166,3 +155,4 @@ export class ZCard {
     }
     static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAExC;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,KAAK;;;;0BAeH,KAAK;yBAON,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,CAAC;IAED;;;OAGG;IACK,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,WAAK,KAAK,EAAC,aAAa;oBACtB,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,UAAU,GAAQ;wBAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,WAAK,KAAK,EAAC,SAAS;oBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,OAAO,CACL,WAAK,KAAK,EAAC,SAAS;YAClB,YAAM,IAAI,EAAC,UAAU,GAAQ;YAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ;YACzB,WAAK,KAAK,EAAC,SAAS;gBAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE,CAAC;YACtC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;QAC7C,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC/D,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,KAAK,EAAC,iBAAiB;oBACzB,IAAI,CAAC,aAAa,IAAI;wBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;wBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;qBAClG;oBACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD;gBACL,IAAI,CAAC,aAAa,EAAE,CAChB,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;IACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n *\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /**\n   * Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n   * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n   */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContent()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContent()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"]}

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

@@ -300,3 +300,4 @@ export const WithImageAndClickListener = {
     <div id="click-alert-container">Card click count: 0</div>
   `,
 };
+//# 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":"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","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 TextVariantSurfaceBackgroundAndBordered = {\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-surface01)`,\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 WithImageAndClickListener = {\n  parameters: {\n    controls: {\n      exclude: [\"clickable\", \"showShadow\"],\n    },\n  },\n  render: (args) => html`\n    <script>\n      window.cardClickCount = 0;\n      document.getElementById(\"btn-card\").addEventListener(\"click\", (e) => {\n        window.cardClickCount = window.cardClickCount + 1;\n        const alertBox = document.getElementById(\"click-alert-container\");\n        if (!alertBox) {\n          return;\n        }\n\n        alertBox.innerText = \"Card click count: \" + window.cardClickCount;\n      });\n    </script>\n    <z-card\n      class=\"demo-card\"\n      variant=${args.variant}\n      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    <div id=\"click-alert-container\">Card click count: 0</div>\n  `,\n} satisfies Story;\n"]}

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

@@ -8,22 +8,21 @@ import { ButtonVariant, CarouselArrowsPosition, CarouselProgressMode } from "../
  */
 export class ZCarousel {
     constructor() {
-        /** Shows only one content at a time */
+        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
+        this.scrollingTo = null;
+        this.isLoading = undefined;
+        this.label = undefined;
         this.single = false;
-        /**
-         * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.
-         * If set to `false`, the arrows will not be visible on mobile.
-         * Only meaningful with `arrowsPosition` set to `OVER`.
-         */
+        this.arrowsPosition = undefined;
+        this.progressMode = undefined;
         this.fixedArrows = true;
-        /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */
         this.ghostLoadingHeight = 100;
-        /** When enabled, navigating next the last item will go back to the first item and vice versa. */
         this.infinite = false;
-        /** Current item index for single mode. */
         this.current = 0;
-        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
-        this.scrollingTo = null;
+        this.items = undefined;
+        this.highlightedIndicator = undefined;
+        this.canNavigatePrev = undefined;
+        this.canNavigateNext = undefined;
     }
     onIndexChange() {
         this.indexChange.emit({ currentItem: this.current });
@@ -36,24 +35,6 @@ export class ZCarousel {
     onInfiniteModeChange() {
         this.checkNavigationValidity();
     }
-    onLoadingChange() {
-        if (!this.isLoading) {
-            // when loading is finished, we need to set up things with the real items that were not present during the loading phase
-            this.setupObserversAndListeners();
-        }
-    }
-    /** Set up all observers and listeners related to the rendered items. */
-    setupObserversAndListeners() {
-        var _a;
-        this.setupItems();
-        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
-        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
-        this.resizeObserver.observe(this.itemsContainer);
-        if (this.single) {
-            this.setIntersectionObserver();
-        }
-        this.checkNavigationValidity();
-    }
     /**
      * Set an intersection observer to:
      * - highlight the indicator of the intersecting item during scroll
@@ -165,10 +146,15 @@ export class ZCarousel {
         });
     }
     componentDidLoad() {
-        if (this.isLoading) {
-            return;
+        var _a, _b;
+        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.itemsContainer);
+        this.setupItems();
+        if (this.single) {
+            this.setIntersectionObserver();
         }
-        this.setupObserversAndListeners();
+        this.checkNavigationValidity();
     }
     disconnectedCallback() {
         var _a;
@@ -184,12 +170,12 @@ export class ZCarousel {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css", "../../tokens/typography.css"]
+            "$": ["styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css", "../../tokens/typography.css"]
+            "$": ["styles.css"]
         };
     }
     static get properties() {
@@ -208,10 +194,8 @@ export class ZCarousel {
                     "tags": [],
                     "text": "The z-carousel is on loading state"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-loading"
+                "attribute": "is-loading",
+                "reflect": false
             },
             "label": {
                 "type": "string",
@@ -227,10 +211,8 @@ export class ZCarousel {
                     "tags": [],
                     "text": "The z-carousel title"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
+                "attribute": "label",
+                "reflect": false
             },
             "single": {
                 "type": "boolean",
@@ -246,10 +228,8 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Shows only one content at a time"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "single",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "arrowsPosition": {
@@ -262,8 +242,7 @@ export class ZCarousel {
                         "CarouselArrowsPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CarouselArrowsPosition",
-                            "referenceLocation": "CarouselArrowsPosition"
+                            "id": "src/beans/index.tsx::CarouselArrowsPosition"
                         }
                     }
                 },
@@ -273,10 +252,8 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Arrow buttons position"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "arrows-position"
+                "attribute": "arrows-position",
+                "reflect": true
             },
             "progressMode": {
                 "type": "string",
@@ -288,8 +265,7 @@ export class ZCarousel {
                         "CarouselProgressMode": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CarouselProgressMode",
-                            "referenceLocation": "CarouselProgressMode"
+                            "id": "src/beans/index.tsx::CarouselProgressMode"
                         }
                     }
                 },
@@ -299,10 +275,8 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Progress indicator type. Only available for `single` mode"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "progress-mode"
+                "attribute": "progress-mode",
+                "reflect": false
             },
             "fixedArrows": {
                 "type": "boolean",
@@ -318,10 +292,8 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\nIf set to `false`, the arrows will not be visible on mobile.\nOnly meaningful with `arrowsPosition` set to `OVER`."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "fixed-arrows",
+                "reflect": true,
                 "defaultValue": "true"
             },
             "ghostLoadingHeight": {
@@ -338,10 +310,8 @@ export class ZCarousel {
                     "tags": [],
                     "text": "The height of the ghost loader (only visible when `isLoading` is set to `true`)"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "ghost-loading-height",
+                "reflect": false,
                 "defaultValue": "100"
             },
             "infinite": {
@@ -358,10 +328,8 @@ export class ZCarousel {
                     "tags": [],
                     "text": "When enabled, navigating next the last item will go back to the first item and vice versa."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "infinite",
+                "reflect": false,
                 "defaultValue": "false"
             }
         };
@@ -404,9 +372,7 @@ export class ZCarousel {
             }, {
                 "propName": "infinite",
                 "methodName": "onInfiniteModeChange"
-            }, {
-                "propName": "isLoading",
-                "methodName": "onLoadingChange"
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-carousel/index.tsx"],"names":[],"mappings":"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","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(\"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          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

@@ -7,7 +7,7 @@ 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```
+ * @example```html
  * <z-carousel>
  *  <li>element</li>
  *  <li>element</li>
@@ -16,7 +16,7 @@ import "./index.stories.css";
  * ```
  * > 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```
+ * @example```css
  * z-carousel {
  *  --z-carousel-gutter: calc(var(--space-unit) * 2);
  * }```
@@ -126,3 +126,4 @@ export const LoadingItems = {
           </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"]}