@zanichelli/albe-web-components 12.1.3-rc.0 → 12.1.3

package/dist/esm/z-card.entry.js

@@ -1,53 +1,49 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-f16bc2ca.js';
-import { C as CardVariant } from './index-2255c6c8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4968ce56.js';
+import { C as CardVariant } from './index-47f23745.js';
 
 const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;color:inherit;font-size:inherit;font-weight:var(--font-sb);-webkit-line-clamp:2;text-decoration:none}::slotted([slot=\"text\"]){margin:0;-webkit-line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
-const ZCardStyle0 = stylesCss;
 
 const ZCard = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.variant = undefined;
-        this.coverIcon = undefined;
-        this.showShadow = false;
-        this.clickable = false;
-        this.hasCoverImage = undefined;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Enable shadow. Default: false. */
+    this.showShadow = false;
+    /** Enable 'clickable' style like hover and focus style. */
+    this.clickable = false;
+  }
+  componentWillLoad() {
+    this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
+  }
+  /**
+   * Template for a card without image cover.
+   * A colored background replaces the image and some data is moved over it.
+   */
+  renderColorCoverCard() {
+    return [
+      h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
+      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
+    ];
+  }
+  /**
+   * Template for the content div.
+   */
+  renderContentDiv() {
+    return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
+  }
+  render() {
+    if (this.variant === CardVariant.TEXT) {
+      return h(Host, null, this.renderContentDiv());
     }
-    componentWillLoad() {
-        this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
+    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
+      return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
+        h("slot", { name: "cover" }),
+        this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
+      ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
     }
-    /**
-     * Template for a card without image cover.
-     * A colored background replaces the image and some data is moved over it.
-     */
-    renderColorCoverCard() {
-        return [
-            h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
-            h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
-        ];
-    }
-    /**
-     * Template for the content div.
-     */
-    renderContentDiv() {
-        return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
-    }
-    render() {
-        if (this.variant === CardVariant.TEXT) {
-            return h(Host, null, this.renderContentDiv());
-        }
-        if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
-            return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
-                h("slot", { name: "cover" }),
-                this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
-            ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
-        }
-        return h(Host, null, this.renderColorCoverCard());
-    }
-    get host() { return getElement(this); }
+    return h(Host, null, this.renderColorCoverCard());
+  }
+  get host() { return getElement(this); }
 };
-ZCard.style = ZCardStyle0;
+ZCard.style = stylesCss;
 
 export { ZCard as z_card };
-
-//# sourceMappingURL=z-card.entry.js.map

package/dist/esm/z-carousel.entry.js

@@ -1,154 +1,146 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-f16bc2ca.js';
-import { R as CarouselArrowsPosition, U as CarouselProgressMode, e as ControlSize, B as ButtonVariant } from './index-2255c6c8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4968ce56.js';
+import { R as CarouselArrowsPosition, U as CarouselProgressMode, e as ControlSize, B as ButtonVariant } from './index-47f23745.js';
 
 const stylesCss = "z-carousel{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0}z-carousel[single],z-carousel[single=\"true\"]{display:flex;flex-direction:column;align-items:center;justify-content:center}z-carousel[single=\"true\"] .z-carousel-container,z-carousel[single] .z-carousel-container{width:fit-content;max-width:100%}z-carousel .loading-items-container{display:none}z-carousel .z-carousel-container{display:flex;flex-direction:column}z-carousel .z-carousel-wrapper{position:relative}z-carousel .z-carousel-title{margin-bottom:var(--space-unit);color:var(--gray800)}z-carousel .z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-snap-type:x mandatory;scrollbar-width:none;}z-carousel .z-carousel-items-container::-webkit-scrollbar{display:none}z-carousel .z-carousel-items-container>*:not(:last-child){margin-right:var(--z-carousel-gutter)}z-carousel[single=\"true\"] .z-carousel-items-container>*:not(:last-child),z-carousel[single] .z-carousel-items-container>*:not(:last-child){margin-right:0}z-carousel .z-carousel-items-container>li{scroll-snap-align:center}z-button[data-direction]{--z-icon-width:32px;--z-icon-height:32px;position:absolute;bottom:50%;transform:translateY(50%)}z-button[data-direction=\"next\"]{right:0}z-carousel .z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:var(--space-unit)}z-carousel .z-carousel-footer .numbers-progress,z-carousel .z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}z-carousel .z-carousel-footer .dots-progress button{display:flex;align-items:center;padding:0;border:none;margin:0;background-color:transparent}z-carousel .z-carousel-footer .dots-progress button:not(.current){cursor:pointer}z-carousel .z-carousel-footer .numbers-progress{margin:0 calc(var(--space-unit) / 2);column-gap:calc(var(--space-unit) / 2)}z-carousel .z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}z-carousel .z-carousel-footer .dots-progress button.current z-icon{fill:var(--gray800)}z-carousel .z-carousel-footer .dots-progress button:not(.current) z-icon{fill:var(--gray200)}";
-const ZCarouselStyle0 = stylesCss;
 
 const ZCarousel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.indexChange = createEvent(this, "indexChange", 7);
-        /** 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;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.indexChange = createEvent(this, "indexChange", 7);
+    /** 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();
     }
-    onIndexChange() {
-        this.indexChange.emit({ currentItem: this.current });
+  }
+  /**
+   * 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;
     }
-    onSingleModeChange() {
-        if (this.single && !this.intersectionObserver) {
-            this.setIntersectionObserver();
-        }
+    const scroller = this.itemsContainer;
+    if (!scroller) {
+      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));
+    scroller.scrollBy({
+      left: -scroller.clientWidth / 2,
+      behavior: "smooth",
+    });
+  }
+  onNext() {
+    if (this.single) {
+      this.goTo(Math.min(this.current + 1, this.items.length - 1));
+      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",
-        });
+    const scroller = this.itemsContainer;
+    if (!scroller) {
+      return;
     }
-    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",
-        });
+    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;
     }
-    /**
-     * 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.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 footer can be rendered.
-     */
-    canShowFooter() {
-        return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
-            this.progressMode === CarouselProgressMode.DOTS ||
-            this.progressMode === CarouselProgressMode.NUMBERS);
+    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;
     }
-    /**
-     * 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.items = Array.from(this.itemsContainer.querySelectorAll(":scope > li"));
+    if (this.single) {
+      this.setIntersectionObserver();
     }
-    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");
-        });
+    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)))));
     }
-    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)))));
-        }
-        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" }))))));
-    }
-    get hostElement() { return getElement(this); }
-    static get watchers() { return {
-        "current": ["onIndexChange"],
-        "single": ["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" }))))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "current": ["onIndexChange"],
+    "single": ["onSingleModeChange"]
+  }; }
 };
-ZCarousel.style = ZCarouselStyle0;
+ZCarousel.style = stylesCss;
 
 export { ZCarousel as z_carousel };
-
-//# sourceMappingURL=z-carousel.entry.js.map

package/dist/esm/z-chip.entry.js

@@ -1,30 +1,28 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f16bc2ca.js';
-import { x as ZChipType } from './index-2255c6c8.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-4968ce56.js';
+import { x as ZChipType } from './index-47f23745.js';
 
 const stylesCss = ".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--color-surface01);border-radius:14px;color:var(--color-text01);fill:var(--color-text01);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]):hover>z-icon.sc-z-chip:first-child{fill:var(--color-icon02)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";
-const ZChipStyle0 = stylesCss;
 
 const ZChip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.interactiveIconClick = createEvent(this, "interactiveIconClick", 7);
-        this.icon = undefined;
-        this.type = ZChipType.DEFAULT;
-        this.interactiveIcon = undefined;
-        this.disabled = false;
-        this.ariaLabel = "";
-    }
-    render() {
-        return (h("div", { key: '6f854f9af61641c48e7870b320f330e08fa10115', class: {
-                "z-chip-container": true,
-                "z-chip-interactive": !!this.interactiveIcon,
-                [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { name: this.icon }), h("slot", { key: '17dd6eacc4edf0df59bd68f4c453126e954c5e86' }), this.interactiveIcon && (h("button", { type: "button", onClick: () => this.interactiveIconClick.emit(), onKeyUp: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { class: "interactive-icon", name: this.interactiveIcon })))));
-    }
-    get el() { return getElement(this); }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.interactiveIconClick = createEvent(this, "interactiveIconClick", 7);
+    /** z-chip size type, can be default, medium or small */
+    this.type = ZChipType.DEFAULT;
+    /** set z-chip as disabled */
+    this.disabled = false;
+    /** z-chip aria-label string */
+    this.ariaLabel = "";
+  }
+  render() {
+    return (h("div", { class: {
+        "z-chip-container": true,
+        "z-chip-interactive": !!this.interactiveIcon,
+        [this.type]: true,
+      }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { name: this.icon }), h("slot", null), this.interactiveIcon && (h("button", { type: "button", onClick: () => this.interactiveIconClick.emit(), onKeyUp: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { class: "interactive-icon", name: this.interactiveIcon })))));
+  }
+  get el() { return getElement(this); }
 };
-ZChip.style = ZChipStyle0;
+ZChip.style = stylesCss;
 
 export { ZChip as z_chip };
-
-//# sourceMappingURL=z-chip.entry.js.map