@zanichelli/albe-web-components 7.0.0 → 7.1.0

package/dist/esm/z-button-sort.entry.js

@@ -1,49 +1,49 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { t as tabletBreakpoint } from './breakpoints-14432d05.js';
+import { t as tabletBreakpoint } from './breakpoints-c386984e.js';
 
 const stylesCss = ":host,button{max-width:100%}button{height:36px;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--myz-blue);background-color:var(--bg-white);border-radius:var(--border-radius);color:var(--myz-blue);cursor:pointer;fill:var(--myz-blue);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--myz-blue-dark);color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button:focus{border-color:var(--myz-blue);box-shadow:0 0 2px 2px var(--accent-dark);color:var(--myz-blue);fill:var(--myz-blue)}button:active{border-color:var(--myz-blue-light);box-shadow:0 2px 4px 0 rgb(0 0 0 / 40%);color:var(--myz-blue-light);fill:var(--myz-blue-light)}button.selected{border-color:var(--myz-blue-dark);background-color:var(--myz-blue-dark);color:var(--bg-white);fill:var(--bg-white)}button>label{display:flex;align-items:center;cursor:pointer;font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb)}button>label>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>label>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>label>span.sort{margin-right:var(--half-x1);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) * 0.5);font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-rg)}button>z-icon{padding-top:calc(var(--space-unit) * 0.5)}@media only screen and (min-width: 768px){:host,button{max-width:325px}}@media only screen and (min-width: 1025px){:host,button{max-width:490px}}";
 
-const ZButtonSort = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.buttonSortClick = createEvent(this, "buttonSortClick", 7);
-    /** sort label content (ascending) (optional) */
-    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;
-  }
-  emitButtonSortClick() {
-    if (!this.isselected) {
-      this.isselected = true;
-    }
-    else {
-      this.sortasc = !this.sortasc;
-    }
-    this.buttonSortClick.emit({
-      buttonid: this.buttonid,
-      sortAsc: this.sortasc,
-    });
-  }
-  componentDidLoad() {
-    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {
-      this.allowTooltip = true;
-    }
-  }
-  setButtonTitle() {
-    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : "";
-  }
-  elementHasEllipsis() {
-    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
-  }
-  render() {
-    return (h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, h("label", null, h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { class: "counter" }, this.counter && ` (${this.counter})`), h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { name: "caret-up-down", width: 16, height: 16 }))));
-  }
-};
+const ZButtonSort = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.buttonSortClick = createEvent(this, "buttonSortClick", 7);
+    /** sort label content (ascending) (optional) */
+    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;
+  }
+  emitButtonSortClick() {
+    if (!this.isselected) {
+      this.isselected = true;
+    }
+    else {
+      this.sortasc = !this.sortasc;
+    }
+    this.buttonSortClick.emit({
+      buttonid: this.buttonid,
+      sortAsc: this.sortasc,
+    });
+  }
+  componentDidLoad() {
+    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {
+      this.allowTooltip = true;
+    }
+  }
+  setButtonTitle() {
+    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : "";
+  }
+  elementHasEllipsis() {
+    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
+  }
+  render() {
+    return (h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, h("label", null, h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { class: "counter" }, this.counter && ` (${this.counter})`), h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { name: "caret-up-down", width: 16, height: 16 }))));
+  }
+};
 ZButtonSort.style = stylesCss;
 
 export { ZButtonSort as z_button_sort };

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

@@ -1,39 +1,39 @@
 import { r as registerInstance, h, g as getElement } from './index-a2ca4b97.js';
-import { b as ButtonType, B as ButtonVariant, d as ControlSize } from './index-03c01696.js';
+import { b as ButtonType, B as ButtonVariant, d as ControlSize } from './index-e36ec4a4.js';
 
 const stylesCss = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
 
-const ZButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** defines a string value that labels an interactive element, used for accessibility. */
-    this.ariaLabel = "";
-    /** HTML button disabled attribute. */
-    this.disabled = false;
-    /** HTML button type attribute. */
-    this.type = ButtonType.BUTTON;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
-    this.variant = ButtonVariant.PRIMARY;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = ControlSize.BIG;
-  }
-  getAttributes() {
-    return {
-      id: this.htmlid,
-      class: {
-        "z-button--container": true,
-        "z-button--has-text": !!this.hostElement.textContent.trim(),
-      },
-    };
-  }
-  render() {
-    if (this.href) {
-      return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, href: this.href, target: this.target }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
-    }
-    return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, disabled: this.disabled }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
-  }
-  get hostElement() { return getElement(this); }
-};
+const ZButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** defines a string value that labels an interactive element, used for accessibility. */
+    this.ariaLabel = "";
+    /** HTML button disabled attribute. */
+    this.disabled = false;
+    /** HTML button type attribute. */
+    this.type = ButtonType.BUTTON;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
+    this.variant = ButtonVariant.PRIMARY;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = ControlSize.BIG;
+  }
+  getAttributes() {
+    return {
+      id: this.htmlid,
+      class: {
+        "z-button--container": true,
+        "z-button--has-text": !!this.hostElement.textContent.trim(),
+      },
+    };
+  }
+  render() {
+    if (this.href) {
+      return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, href: this.href, target: this.target }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
+    }
+    return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, disabled: this.disabled }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
+  }
+  get hostElement() { return getElement(this); }
+};
 ZButton.style = stylesCss;
 
 export { ZButton as z_button };

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

@@ -1,62 +1,62 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { C as CardVariant } from './index-03c01696.js';
+import { C as CardVariant } from './index-e36ec4a4.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;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=\"text\"]),::slotted([slot=\"actions\"]){margin:0}::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;font-weight:var(--font-sb);-webkit-line-clamp:2}::slotted([slot=\"text\"]){-webkit-line-clamp:3}.actions{display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 1.5)}:host([clickable]){cursor:pointer}:host([clickable]:focus:focus-visible){outline:none}:host(:not([variant])[clickable]:focus:focus-visible){padding:calc(var(--space-unit) * 0.5);box-shadow:var(--shadow-focus-primary)}: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([showshadow])>.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:calc(var(--space-unit) * 2) var(--space-unit)}: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([showshadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][showshadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][showshadow]:focus:focus-visible){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][showshadow]: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 ZCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cardClicked = createEvent(this, "cardClicked", 7);
-    /** Enable click interactions on the card. Default: false */
-    this.clickable = false;
-    /** Enable shadow. Default: false. */
-    this.showshadow = false;
-  }
-  onClick(ev) {
-    // Do nothing for clicks on actions.
-    if (ev.target.getAttribute("slot") === "action") {
-      return;
-    }
-    if (!this.clickable) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      return;
-    }
-    this.cardClicked.emit();
-  }
-  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());
-    }
-    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); }
-};
+const ZCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cardClicked = createEvent(this, "cardClicked", 7);
+    /** Enable click interactions on the card. Default: false */
+    this.clickable = false;
+    /** Enable shadow. Default: false. */
+    this.showshadow = false;
+  }
+  onClick(ev) {
+    // Do nothing for clicks on actions.
+    if (ev.target.getAttribute("slot") === "action") {
+      return;
+    }
+    if (!this.clickable) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return;
+    }
+    this.cardClicked.emit();
+  }
+  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());
+    }
+    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); }
+};
 ZCard.style = stylesCss;
 
 export { ZCard as z_card };

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

@@ -1,142 +1,142 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { R as CarouselArrowsPosition, U as CarouselProgressMode, c as ButtonSize, B as ButtonVariant } from './index-03c01696.js';
+import { R as CarouselArrowsPosition, U as CarouselProgressMode, c as ButtonSize, B as ButtonVariant } from './index-e36ec4a4.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 ZCarousel = class {
-  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();
-    }
-  }
-  /**
-   * 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;
-    }
-    const scroller = this.itemsContainer;
-    if (!scroller) {
-      return;
-    }
-    scroller.scrollBy({
-      left: -scroller.clientWidth / 2,
-      behavior: "smooth",
-    });
-  }
-  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",
-    });
-  }
-  /**
-   * 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;
-  }
-  /**
-   * 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;
-    }
-    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;
-    }
-    this.items = Array.from(this.itemsContainer.querySelectorAll("li"));
-    if (this.single) {
-      this.setIntersectionObserver();
-    }
-    this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
-    this.checkNavigationValidity();
-  }
-  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" }, 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: ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), 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 }, 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: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext }))))));
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "current": ["onIndexChange"],
-    "single": ["onSingleModeChange"]
-  }; }
-};
+const ZCarousel = class {
+  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();
+    }
+  }
+  /**
+   * 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;
+    }
+    const scroller = this.itemsContainer;
+    if (!scroller) {
+      return;
+    }
+    scroller.scrollBy({
+      left: -scroller.clientWidth / 2,
+      behavior: "smooth",
+    });
+  }
+  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",
+    });
+  }
+  /**
+   * 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;
+  }
+  /**
+   * 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;
+    }
+    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;
+    }
+    this.items = Array.from(this.itemsContainer.querySelectorAll("li"));
+    if (this.single) {
+      this.setIntersectionObserver();
+    }
+    this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+    this.checkNavigationValidity();
+  }
+  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" }, 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: ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), 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 }, 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: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext }))))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "current": ["onIndexChange"],
+    "single": ["onSingleModeChange"]
+  }; }
+};
 ZCarousel.style = stylesCss;
 
 export { ZCarousel as z_carousel };