@zanichelli/albe-web-components 12.4.0 → 12.4.1

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

@@ -6,299 +6,307 @@ import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ControlSiz
  * @slot - carousel items. use `<li>` elements inside this slot as it is wrapped inside an `<ul>`
  */
 export class ZCarousel {
-  constructor() {
-    /** Shows only one content at a time */
-    this.single = false;
-    /** The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */
-    this.ghostLoadingHeight = 100;
-    /** 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;
-  }
-  onIndexChange() {
-    this.indexChange.emit({ currentItem: this.current });
-  }
-  onSingleModeChange() {
-    if (this.single && !this.intersectionObserver) {
-      this.setIntersectionObserver();
+    constructor() {
+        /** 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;
+        this.arrowsPosition = undefined;
+        this.progressMode = undefined;
+        this.ghostLoadingHeight = 100;
+        this.current = 0;
+        this.items = undefined;
+        this.highlightedIndicator = undefined;
+        this.canNavigatePrev = undefined;
+        this.canNavigateNext = undefined;
     }
-  }
-  /**
-   * Set an intersection observer to:
-   * - highlight the indicator of the intersecting item during scroll
-   * - set the current item to the last intersecting item
-   */
-  setIntersectionObserver() {
-    this.intersectionObserver = new window.IntersectionObserver((entries) => {
-      const entry = entries.find((entry) => entry.isIntersecting);
-      if (!entry) {
-        return;
-      }
-      const entryIndex = this.items.findIndex((item) => item === entry.target);
-      this.highlightedIndicator = entryIndex;
-      /* skip setting the current item if intersection has been triggered by a programmatic scroll
-      (@see `goTo` function) and the final index has not been reached */
-      if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {
-        return;
-      }
-      this.scrollingTo = null;
-      this.current = entryIndex;
-    }, {
-      root: this.itemsContainer,
-      threshold: 0.5,
-    });
-    this.items.forEach((element) => this.intersectionObserver.observe(element));
-  }
-  onPrev() {
-    if (this.single) {
-      this.goTo(Math.max(0, this.current - 1));
-      return;
+    onIndexChange() {
+        this.indexChange.emit({ currentItem: this.current });
     }
-    const scroller = this.itemsContainer;
-    if (!scroller) {
-      return;
+    onSingleModeChange() {
+        if (this.single && !this.intersectionObserver) {
+            this.setIntersectionObserver();
+        }
     }
-    scroller.scrollBy({
-      left: -scroller.clientWidth / 2,
-      behavior: "smooth",
-    });
-  }
-  onNext() {
-    if (this.single) {
-      this.goTo(Math.min(this.current + 1, this.items.length - 1));
-      return;
+    /**
+     * Set an intersection observer to:
+     * - highlight the indicator of the intersecting item during scroll
+     * - set the current item to the last intersecting item
+     */
+    setIntersectionObserver() {
+        this.intersectionObserver = new window.IntersectionObserver((entries) => {
+            const entry = entries.find((entry) => entry.isIntersecting);
+            if (!entry) {
+                return;
+            }
+            const entryIndex = this.items.findIndex((item) => item === entry.target);
+            this.highlightedIndicator = entryIndex;
+            /* skip setting the current item if intersection has been triggered by a programmatic scroll
+            (@see `goTo` function) and the final index has not been reached */
+            if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {
+                return;
+            }
+            this.scrollingTo = null;
+            this.current = entryIndex;
+        }, {
+            root: this.itemsContainer,
+            threshold: 0.5,
+        });
+        this.items.forEach((element) => this.intersectionObserver.observe(element));
     }
-    const scroller = this.itemsContainer;
-    if (!scroller) {
-      return;
+    onPrev() {
+        if (this.single) {
+            this.goTo(Math.max(0, this.current - 1));
+            return;
+        }
+        const scroller = this.itemsContainer;
+        if (!scroller) {
+            return;
+        }
+        scroller.scrollBy({
+            left: -scroller.clientWidth / 2,
+            behavior: "smooth",
+        });
     }
-    scroller.scrollBy({
-      left: scroller.clientWidth / 2,
-      behavior: "smooth",
-    });
-  }
-  /**
-   * Check if navigation buttons can be enabled or not and set local states.
-   */
-  checkNavigationValidity() {
-    if (this.single) {
-      this.canNavigatePrev = this.current > 1;
-      this.canNavigateNext = this.current < this.items.length - 1;
+    onNext() {
+        if (this.single) {
+            this.goTo(Math.min(this.current + 1, this.items.length - 1));
+            return;
+        }
+        const scroller = this.itemsContainer;
+        if (!scroller) {
+            return;
+        }
+        scroller.scrollBy({
+            left: scroller.clientWidth / 2,
+            behavior: "smooth",
+        });
     }
-    this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;
-    this.canNavigateNext =
-      this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;
-  }
-  /**
-   * Check if footer can be rendered.
-   */
-  canShowFooter() {
-    return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
-      this.progressMode === CarouselProgressMode.DOTS ||
-      this.progressMode === CarouselProgressMode.NUMBERS);
-  }
-  /**
-   * Set current item to passed index.
-   * @param {number} index Index to set
-   */
-  goTo(index) {
-    if (this.current === index) {
-      return;
+    /**
+     * Check if navigation buttons can be enabled or not and set local states.
+     */
+    checkNavigationValidity() {
+        if (this.single) {
+            this.canNavigatePrev = this.current > 1;
+            this.canNavigateNext = this.current < this.items.length - 1;
+        }
+        this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;
+        this.canNavigateNext =
+            this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;
     }
-    this.scrollingTo = index;
-    // the scroll will trigger the IntersectionObserver and set the current item
-    this.itemsContainer.scroll({
-      left: this.items[index].offsetLeft,
-      behavior: "smooth",
-    });
-  }
-  componentDidLoad() {
-    this.itemsContainer = this.hostElement.querySelector(".z-carousel-items-container");
-    if (!this.itemsContainer) {
-      return;
+    /**
+     * Check if footer can be rendered.
+     */
+    canShowFooter() {
+        return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
+            this.progressMode === CarouselProgressMode.DOTS ||
+            this.progressMode === CarouselProgressMode.NUMBERS);
     }
-    this.items = Array.from(this.itemsContainer.querySelectorAll(":scope > li"));
-    if (this.single) {
-      this.setIntersectionObserver();
+    /**
+     * Set current item to passed index.
+     * @param {number} index Index to set
+     */
+    goTo(index) {
+        if (this.current === index) {
+            return;
+        }
+        this.scrollingTo = index;
+        // the scroll will trigger the IntersectionObserver and set the current item
+        this.itemsContainer.scroll({
+            left: this.items[index].offsetLeft,
+            behavior: "smooth",
+        });
     }
-    this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
-    this.checkNavigationValidity();
-    this.items.forEach((item) => {
-      item.setAttribute("role", "group");
-      item.setAttribute("aria-roledescription", "slide");
-    });
-  }
-  render() {
-    if (this.isLoading) {
-      return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
+    componentDidLoad() {
+        this.itemsContainer = this.hostElement.querySelector(".z-carousel-items-container");
+        if (!this.itemsContainer) {
+            return;
+        }
+        this.items = Array.from(this.itemsContainer.querySelectorAll(":scope > li"));
+        if (this.single) {
+            this.setIntersectionObserver();
+        }
+        this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+        this.checkNavigationValidity();
+        this.items.forEach((item) => {
+            item.setAttribute("role", "group");
+            item.setAttribute("aria-roledescription", "slide");
+        });
     }
-    return (h(Host, null, h("div", { class: "z-carousel-container", role: "group", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, "aria-label": this.highlightedIndicator === key ? "Elemento corrente" : `Spostati all'elemento ${key + 1}`, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
-  }
-  static get is() { return "z-carousel"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "isLoading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The z-carousel is on loading state"
-        },
-        "attribute": "is-loading",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The z-carousel title, if given."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "single": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Shows only one content at a time"
-        },
-        "attribute": "single",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "arrowsPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CarouselArrowsPosition",
-          "resolved": "CarouselArrowsPosition.BOTTOM | CarouselArrowsPosition.OVER",
-          "references": {
-            "CarouselArrowsPosition": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Arrow buttons position"
-        },
-        "attribute": "arrows-position",
-        "reflect": false
-      },
-      "progressMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CarouselProgressMode",
-          "resolved": "CarouselProgressMode.DOTS | CarouselProgressMode.NUMBERS",
-          "references": {
-            "CarouselProgressMode": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Progress indicator. Only available for `single` mode"
-        },
-        "attribute": "progress-mode",
-        "reflect": false
-      },
-      "ghostLoadingHeight": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show."
-        },
-        "attribute": "ghost-loading-height",
-        "reflect": false,
-        "defaultValue": "100"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "current": {},
-      "items": {},
-      "highlightedIndicator": {},
-      "canNavigatePrev": {},
-      "canNavigateNext": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "indexChange",
-        "name": "indexChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on index change and only in `single` mode."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    render() {
+        if (this.isLoading) {
+            return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
         }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "current",
-        "methodName": "onIndexChange"
-      }, {
-        "propName": "single",
-        "methodName": "onSingleModeChange"
-      }];
-  }
+        return (h(Host, null, h("div", { class: "z-carousel-container", role: "group", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, "aria-label": this.highlightedIndicator === key ? "Elemento corrente" : `Spostati all'elemento ${key + 1}`, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
+    }
+    static get is() { return "z-carousel"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The z-carousel is on loading state"
+                },
+                "attribute": "is-loading",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The z-carousel title, if given."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "single": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows only one content at a time"
+                },
+                "attribute": "single",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "arrowsPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CarouselArrowsPosition",
+                    "resolved": "CarouselArrowsPosition.BOTTOM | CarouselArrowsPosition.OVER",
+                    "references": {
+                        "CarouselArrowsPosition": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::CarouselArrowsPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Arrow buttons position"
+                },
+                "attribute": "arrows-position",
+                "reflect": false
+            },
+            "progressMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CarouselProgressMode",
+                    "resolved": "CarouselProgressMode.DOTS | CarouselProgressMode.NUMBERS",
+                    "references": {
+                        "CarouselProgressMode": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::CarouselProgressMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress indicator. Only available for `single` mode"
+                },
+                "attribute": "progress-mode",
+                "reflect": false
+            },
+            "ghostLoadingHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show."
+                },
+                "attribute": "ghost-loading-height",
+                "reflect": false,
+                "defaultValue": "100"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "current": {},
+            "items": {},
+            "highlightedIndicator": {},
+            "canNavigatePrev": {},
+            "canNavigateNext": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indexChange",
+                "name": "indexChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on index change and only in `single` mode."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "current",
+                "methodName": "onIndexChange"
+            }, {
+                "propName": "single",
+                "methodName": "onSingleModeChange"
+            }];
+    }
 }
+//# 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, h, Prop, Element, Watch, Event, EventEmitter, State, Host} from \"@stencil/core\";\nimport {CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ControlSize} from \"../../beans\";\n\n/**\n * ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @slot - carousel items. use `<li>` elements inside this slot as it is wrapped inside an `<ul>`\n */\n@Component({\n  tag: \"z-carousel\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZCarousel {\n  @Element() hostElement: HTMLZCarouselElement;\n\n  /** The z-carousel is on loading state */\n  @Prop()\n  isLoading: boolean;\n\n  /** The z-carousel title, if given. */\n  @Prop()\n  label?: string;\n\n  /** Shows only one content at a time */\n  @Prop()\n  single = false;\n\n  /** Arrow buttons position */\n  @Prop()\n  arrowsPosition?: CarouselArrowsPosition;\n\n  /** Progress indicator. Only available for `single` mode */\n  @Prop()\n  progressMode?: CarouselProgressMode;\n\n  /** The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */\n  @Prop()\n  ghostLoadingHeight = 100;\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  private itemsContainer: HTMLUListElement;\n\n  /** Observer that handles current index change when scrolling on single mode. */\n  private intersectionObserver: IntersectionObserver;\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;\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  /**\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 window.IntersectionObserver(\n      (entries) => {\n        const entry = entries.find((entry) => entry.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  private onPrev(): void {\n    if (this.single) {\n      this.goTo(Math.max(0, this.current - 1));\n\n      return;\n    }\n\n    const scroller = this.itemsContainer;\n    if (!scroller) {\n      return;\n    }\n\n    scroller.scrollBy({\n      left: -scroller.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  private onNext(): void {\n    if (this.single) {\n      this.goTo(Math.min(this.current + 1, this.items.length - 1));\n\n      return;\n    }\n\n    const scroller = this.itemsContainer;\n    if (!scroller) {\n      return;\n    }\n\n    scroller.scrollBy({\n      left: scroller.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if navigation buttons can be enabled or not and set local states.\n   */\n  private checkNavigationValidity(): void {\n    if (this.single) {\n      this.canNavigatePrev = this.current > 1;\n      this.canNavigateNext = this.current < this.items.length - 1;\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 can be rendered.\n   */\n  private canShowFooter(): boolean {\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 {number} index Index to set\n   */\n  private goTo(index): void {\n    if (this.current === index) {\n      return;\n    }\n\n    this.scrollingTo = index;\n    // the scroll will trigger the IntersectionObserver and set the current item\n    this.itemsContainer.scroll({\n      left: this.items[index].offsetLeft,\n      behavior: \"smooth\",\n    });\n  }\n\n  componentDidLoad(): void {\n    this.itemsContainer = this.hostElement.querySelector(\".z-carousel-items-container\");\n    if (!this.itemsContainer) {\n      return;\n    }\n\n    this.items = Array.from(this.itemsContainer.querySelectorAll(\":scope > li\"));\n\n    if (this.single) {\n      this.setIntersectionObserver();\n    }\n\n    this.itemsContainer.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n    this.checkNavigationValidity();\n\n    this.items.forEach((item) => {\n      item.setAttribute(\"role\", \"group\");\n      item.setAttribute(\"aria-roledescription\", \"slide\");\n    });\n  }\n\n  render(): HTMLZCarouselElement {\n    if (this.isLoading) {\n      return (\n        <Host>\n          {this.label && <div class=\"heading-4 z-carousel-title\">{this.label}</div>}\n          <div style={{height: `${this.ghostLoadingHeight}px`}}>\n            <z-ghost-loading></z-ghost-loading>\n            <div class=\"loading-items-container\">\n              <slot />\n            </div>\n          </div>\n        </Host>\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=\"heading-4 z-carousel-title\">{this.label}</div>}\n          <div class=\"z-carousel-wrapper\">\n            {this.arrowsPosition === CarouselArrowsPosition.OVER && (\n              <z-button\n                size={ControlSize.SMALL}\n                data-direction=\"prev\"\n                icon=\"chevron-left\"\n                onClick={this.onPrev.bind(this)}\n                disabled={!this.canNavigatePrev}\n                ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n              />\n            )}\n            <ul\n              class=\"z-carousel-items-container\"\n              aria-atomic=\"false\"\n              aria-live=\"polite\"\n            >\n              <slot />\n            </ul>\n            {this.arrowsPosition === CarouselArrowsPosition.OVER && (\n              <z-button\n                size={ControlSize.SMALL}\n                data-direction=\"next\"\n                icon=\"chevron-right\"\n                onClick={this.onNext.bind(this)}\n                disabled={!this.canNavigateNext}\n                ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n              />\n            )}\n          </div>\n        </div>\n\n        {this.canShowFooter() && (\n          <div class=\"z-carousel-footer\">\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                size={ControlSize.SMALL}\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-simple-left-filled\"\n                onClick={this.onPrev.bind(this)}\n                disabled={!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((_item, key) => (\n                  <button\n                    type=\"button\"\n                    class={{current: this.highlightedIndicator === key}}\n                    aria-label={\n                      this.highlightedIndicator === key ? \"Elemento corrente\" : `Spostati all'elemento ${key + 1}`\n                    }\n                    onClick={() => this.goTo(key)}\n                  >\n                    <z-icon name={this.highlightedIndicator === key ? \"white-circle-filled\" : \"black-circle-filled\"} />\n                  </button>\n                ))}\n              </div>\n            )}\n            {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n              <div class=\"numbers-progress interactive-3\">\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                size={ControlSize.SMALL}\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-simple-right-filled\"\n                onClick={this.onNext.bind(this)}\n                disabled={!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"]}