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

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

@@ -1,49 +1,53 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-4968ce56.js';
-import { C as CardVariant } from './index-47f23745.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-f16bc2ca.js';
+import { C as CardVariant } from './index-2255c6c8.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 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:-webkit-inline-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);
-    /** 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());
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = undefined;
+        this.coverIcon = undefined;
+        this.showShadow = false;
+        this.clickable = false;
+        this.hasCoverImage = undefined;
     }
-    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()));
+    componentWillLoad() {
+        this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
     }
-    return h(Host, null, this.renderColorCoverCard());
-  }
-  get host() { return getElement(this); }
+    /**
+     * 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;
+ZCard.style = ZCardStyle0;
 
 export { ZCard as z_card };
+
+//# sourceMappingURL=z-card.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-card.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,q2HAAq2H,CAAC;AACx3H,oBAAe,SAAS;;MCsBX,KAAK;;;;;0BAeH,KAAK;yBAIN,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KACzE;;;;;IAMO,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;KACH;;;;IAKO,gBAAgB;QACtB,QACE,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,EACN;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE;YACrC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,gBAAgB,EAAE,CAAQ,CAAC;SAC/C;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,aAAa,IAAI;gBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD,EACL,IAAI,CAAC,gBAAgB,EAAE,CACnB,EACP;SACH;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;KACnD;;;;;;;","names":[],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":["/* The width of the card must be set by its container,\nrespecting the grid indications of the design. */\n\n:host {\n  /* Override this var to change the cover's aspect ratio */\n  --aspect-ratio: 1.62;\n  --z-card--border-color: var(--gray200);\n  --z-card--color-cover-background: var(--color-surface01);\n  --z-card--text-background: var(--color-surface01);\n  --z-card--text-border-radius: none;\n  --z-card--text-border: none;\n  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n  position: relative;\n  width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n  padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.cover-container > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 11);\n  --z-icon-height: var(--z-icon-width);\n\n  position: absolute;\n  top: calc(50% - calc(var(--z-icon-height) / 2));\n  left: calc(50% - calc(var(--z-icon-width) / 2));\n  fill: var(--color-primary01);\n}\n\n.color-cover {\n  background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n  display: -webkit-inline-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n  margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: \"\";\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n  margin: 0 0 calc(var(--space-unit) * 0.25);\n  -webkit-line-clamp: 1;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"title\"]) {\n  margin: 0;\n  color: inherit;\n  font-size: inherit;\n  font-weight: var(--font-sb);\n  -webkit-line-clamp: 2;\n  text-decoration: none;\n}\n\n::slotted([slot=\"text\"]) {\n  margin: 0;\n  -webkit-line-clamp: 3;\n}\n\n.actions {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n:host([variant=\"text\"]) {\n  border: var(--z-card--text-border);\n  background-color: var(--z-card--text-background);\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n  height: 100%;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n  padding: var(--z-card--text-padding);\n}\n\n:host([variant=\"border\"]) .actions,\n:host([variant=\"shadow\"]) .actions {\n  margin-top: auto;\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n  border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n  background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n  border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n  box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n  box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n","import {Component, Prop, h, Element, State, Host} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /** Enable 'clickable' style like hover and focus style. */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content div.\n   */\n  private renderContentDiv(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContentDiv()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContentDiv()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"],"version":3}

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

@@ -1,146 +1,154 @@
-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';
+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';
 
 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);
-    /** 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(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;
     }
-  }
-  /**
-   * 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" }))))));
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "current": ["onIndexChange"],
-    "single": ["onSingleModeChange"]
-  }; }
+    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"]
+    }; }
 };
-ZCarousel.style = stylesCss;
+ZCarousel.style = ZCarouselStyle0;
 
 export { ZCarousel as z_carousel };
+
+//# sourceMappingURL=z-carousel.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-carousel.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,4tEAA4tE,CAAC;AAC/uE,wBAAe,SAAS;;MCYX,SAAS;;;;;QAoDZ,gBAAW,GAAW,IAAI,CAAC;;;sBAvC1B,KAAK;;;kCAYO,GAAG;uBAId,CAAC;;;;;;IA8BX,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAC;KACpD;IAGD,kBAAkB;QAChB,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC7C,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;KACF;;;;;;IAOO,uBAAuB;QAC7B,IAAI,CAAC,oBAAoB,GAAG,IAAI,MAAM,CAAC,oBAAoB,CACzD,CAAC,OAAO;YACN,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,CAAC,CAAC;YAC5D,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO;aACR;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC;YACzE,IAAI,CAAC,oBAAoB,GAAG,UAAU,CAAC;;;YAIvC,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI,CAAC,WAAW,EAAE;gBAChE,OAAO;aACR;YAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;SAC3B,EACD;YACE,IAAI,EAAE,IAAI,CAAC,cAAc;YACzB,SAAS,EAAE,GAAG;SACf,CACF,CAAC;QAEF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;KAC7E;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC;YAEzC,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC;QACrC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QAED,QAAQ,CAAC,QAAQ,CAAC;YAChB,IAAI,EAAE,CAAC,QAAQ,CAAC,WAAW,GAAG,CAAC;YAC/B,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;YAE7D,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC;QACrC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QAED,QAAQ,CAAC,QAAQ,CAAC;YAChB,IAAI,EAAE,QAAQ,CAAC,WAAW,GAAG,CAAC;YAC9B,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;;;;IAKO,uBAAuB;QAC7B,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;SAC7D;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,GAAG,CAAC,CAAC;QAC1D,IAAI,CAAC,eAAe;YAClB,IAAI,CAAC,cAAc,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;KACtG;;;;IAKO,aAAa;QACnB,QACE,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,MAAM;YACrD,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,IAAI;YAC/C,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,OAAO,EAClD;KACH;;;;;IAMO,IAAI,CAAC,KAAK;QAChB,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;;QAEzB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;YACzB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,UAAU;YAClC,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;QACpF,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,OAAO;SACR;QAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;QAE7E,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;QAED,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QACzG,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;YACtB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;SACpD,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,QACE,EAAC,IAAI,QACF,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK,CAAO,EACzE,WAAK,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,IAAI,CAAC,kBAAkB,IAAI,EAAC,IAClD,0BAAmC,EACnC,WAAK,KAAK,EAAC,yBAAyB,IAClC,eAAQ,CACJ,CACF,CACD,EACP;SACH;QAED,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,OAAO,0BACS,UAAU,gBACnB,IAAI,CAAC,KAAK,IAAI,UAAU,IAEnC,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK,CAAO,EACzE,WAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,IAAI,KAClD,gBACE,IAAI,EAAE,WAAW,CAAC,KAAK,oBACR,MAAM,EACrB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAC/B,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,gCAAgC,GAC1F,CACH,EACD,UACE,KAAK,EAAC,4BAA4B,iBACtB,OAAO,eACT,QAAQ,IAElB,eAAQ,CACL,EACJ,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,IAAI,KAClD,gBACE,IAAI,EAAE,WAAW,CAAC,KAAK,oBACR,MAAM,EACrB,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAC/B,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,gCAAgC,GAC1F,CACH,CACG,CACF,EAEL,IAAI,CAAC,aAAa,EAAE,KACnB,WAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,MAAM,KACpD,gBACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,0BAA0B,EAC/B,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAC/B,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,gCAAgC,GAC1F,CACH,EACA,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAC3E,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,MACzB,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,KAAK,GAAG,EAAC,gBAEjD,IAAI,CAAC,oBAAoB,KAAK,GAAG,GAAG,mBAAmB,GAAG,yBAAyB,GAAG,GAAG,CAAC,EAAE,EAE9F,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAE7B,cAAQ,IAAI,EAAE,IAAI,CAAC,oBAAoB,KAAK,GAAG,GAAG,qBAAqB,GAAG,qBAAqB,GAAI,CAC5F,CACV,CAAC,CACE,CACP,EACA,IAAI,CAAC,YAAY,KAAK,oBAAoB,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAC9E,WAAK,KAAK,EAAC,gCAAgC,IACzC,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAQ,EAC/C,qBAAe,EACf,gBAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,CAC5B,CACP,EACA,IAAI,CAAC,cAAc,KAAK,sBAAsB,CAAC,MAAM,KACpD,gBACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,2BAA2B,EAChC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAC/B,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,gCAAgC,GAC1F,CACH,CACG,CACP,CACI,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/z-carousel/styles.css?tag=z-carousel","src/components/z-carousel/index.tsx"],"sourcesContent":["z-carousel {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-carousel-gutter: 0;\n}\n\nz-carousel[single],\nz-carousel[single=\"true\"] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\nz-carousel[single=\"true\"] .z-carousel-container,\nz-carousel[single] .z-carousel-container {\n  width: fit-content;\n  max-width: 100%;\n}\n\nz-carousel .loading-items-container {\n  display: none;\n}\n\nz-carousel .z-carousel-container {\n  display: flex;\n  flex-direction: column;\n}\n\nz-carousel .z-carousel-wrapper {\n  position: relative;\n}\n\nz-carousel .z-carousel-title {\n  margin-bottom: var(--space-unit);\n  color: var(--gray800);\n}\n\nz-carousel .z-carousel-items-container {\n  display: flex;\n  max-width: 100%;\n  flex-direction: row;\n  margin: 0;\n  list-style: none;\n  -ms-overflow-style: none; /* IE and Edge */\n  overflow-x: scroll;\n  padding-inline-start: 0;\n  scroll-snap-type: x mandatory;\n\n  /* Hide scrollbar for IE, Edge and Firefox */\n  scrollbar-width: none; /* Firefox */\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\nz-carousel .z-carousel-items-container::-webkit-scrollbar {\n  display: none;\n}\n\nz-carousel .z-carousel-items-container > *:not(:last-child) {\n  margin-right: var(--z-carousel-gutter);\n}\n\nz-carousel[single=\"true\"] .z-carousel-items-container > *:not(:last-child),\nz-carousel[single] .z-carousel-items-container > *:not(:last-child) {\n  margin-right: 0;\n}\n\nz-carousel .z-carousel-items-container > li {\n  scroll-snap-align: center;\n}\n\nz-button[data-direction] {\n  --z-icon-width: 32px;\n  --z-icon-height: 32px;\n\n  position: absolute;\n  bottom: 50%;\n  transform: translateY(50%);\n}\n\nz-button[data-direction=\"next\"] {\n  right: 0;\n}\n\nz-carousel .z-carousel-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  margin-top: var(--space-unit);\n}\n\nz-carousel .z-carousel-footer .numbers-progress,\nz-carousel .z-carousel-footer .dots-progress {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\nz-carousel .z-carousel-footer .dots-progress button {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nz-carousel .z-carousel-footer .dots-progress button:not(.current) {\n  cursor: pointer;\n}\n\nz-carousel .z-carousel-footer .numbers-progress {\n  margin: 0 calc(var(--space-unit) / 2);\n  column-gap: calc(var(--space-unit) / 2);\n}\n\nz-carousel .z-carousel-footer .numbers-progress .current {\n  font-weight: var(--font-sb);\n}\n\nz-carousel .z-carousel-footer .dots-progress button.current z-icon {\n  fill: var(--gray800);\n}\n\nz-carousel .z-carousel-footer .dots-progress button:not(.current) z-icon {\n  fill: var(--gray200);\n}\n","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"],"version":3}

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

@@ -1,28 +1,30 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-4968ce56.js';
-import { x as ZChipType } from './index-47f23745.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f16bc2ca.js';
+import { x as ZChipType } from './index-2255c6c8.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);
-    /** 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(), "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);
+        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(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { class: "interactive-icon", name: this.interactiveIcon })))));
+    }
+    get el() { return getElement(this); }
 };
-ZChip.style = stylesCss;
+ZChip.style = ZChipStyle0;
 
 export { ZChip as z_chip };
+
+//# sourceMappingURL=z-chip.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-chip.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2pFAA2pF,CAAC;AAC9qF,oBAAe,SAAS;;MCQX,KAAK;;;;;oBASG,SAAS,CAAC,OAAO;;wBAQf,KAAK;yBAId,EAAE;;IAMd,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;aAClB,mBACc,IAAI,CAAC,QAAQ,IAE3B,IAAI,CAAC,IAAI,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DAAQ,EACP,IAAI,CAAC,eAAe,KACnB,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,cACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,EACN;KACH;;;;;;;","names":[],"sources":["src/components/buttons/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/buttons/z-chip/index.tsx"],"sourcesContent":[":host > .z-chip-container {\n  display: inline-flex;\n  min-height: 28px;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--gray400);\n  background-color: var(--color-surface01);\n  border-radius: 14px;\n  color: var(--color-text01);\n  fill: var(--color-text01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  line-height: 28px;\n}\n\n:host > .z-chip-interactive {\n  font-weight: var(--font-sb);\n}\n\n:host > .z-chip-container > button {\n  padding: 0;\n  border: none;\n  margin-left: var(--space-unit);\n  background-color: transparent;\n  cursor: pointer;\n}\n\n:host > .z-chip-container > z-icon:first-child {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n:host > .z-chip-container:not([aria-disabled]):hover > z-icon:first-child {\n  fill: var(--color-icon02);\n}\n\n:host > .z-chip-container .interactive-icon {\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] z-icon {\n  color: var(--color-disabled03);\n  cursor: auto;\n  fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n  border: var(--border-size-small) solid var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n  border-radius: 100%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > button:not([disabled]):active:hover .interactive-icon {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n  --z-icon-width: 22px;\n  --z-icon-height: 22px;\n}\n\n/* :host type */\n:host > .z-chip-container.default {\n  min-height: 44px;\n  border-radius: 22px;\n  line-height: 44px;\n}\n\n:host > .z-chip-container.medium {\n  min-height: 40px;\n  border-radius: 22px;\n  line-height: 40px;\n}\n\n:host > .z-chip-container.small {\n  min-height: 36px;\n  border-radius: 22px;\n  line-height: 36px;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .z-chip-container {\n    font-size: 12px;\n  }\n\n  /* :host type */\n  :host > .z-chip-container.default {\n    min-height: 32px;\n    border-radius: 16px;\n    line-height: 32px;\n  }\n\n  :host > .z-chip-container.medium {\n    min-height: 28px;\n    border-radius: 16px;\n    line-height: 28px;\n  }\n\n  :host > .z-chip-container.small {\n    min-height: 24px;\n    border-radius: 16px;\n    line-height: 24px;\n  }\n\n  :host > .z-chip-container > z-icon,\n  :host > .z-chip-container .interactive-icon {\n    --z-icon-width: 14px;\n    --z-icon-height: 14px;\n  }\n}\n","import {Component, Prop, h, Element, Event, EventEmitter} from \"@stencil/core\";\nimport {ZChipType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** z-chip aria-label string */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n        }}\n        aria-disabled={this.disabled}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.ariaLabel}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}