@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

package/dist/esm/z-aria-alert.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host } from './index-f16bc2ca.js';
+import { r as registerInstance, h, a as Host } from './index-ab5f1eaa.js';
 import { u as ZAriaAlertMode } from './index-2255c6c8.js';
 
 const ZAriaAlert = class {
@@ -7,7 +7,7 @@ const ZAriaAlert = class {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '88e0d50e7f29c2e80aaa047a32902bc6347ad8d9', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'c76710250968f02393f69652d148ddf22eb1839e' })));
+        return (h(Host, { key: '3dc09efdfb273cbb3700c75f6e83112d6d158fb0', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '109c1e5fa0fa0bd7fa990c7fdb23c0f65dd6811e' })));
     }
 };
 

package/dist/esm/z-aria-alert.entry.js.map

@@ -1 +1 @@
-{"file":"z-aria-alert.entry.js","mappings":";;;MAOa,UAAU;;;oBAGE,cAAc,CAAC,MAAM;;IAE5C,MAAM;QACJ,QACE,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,iBACR,MAAM,mBACJ,WAAW,IAEzB,8DAAa,CACR,EACP;KACH;;;;;","names":[],"sources":["src/components/z-aria-alert/index.tsx"],"sourcesContent":["import {Component, Prop, h, Host} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n  tag: \"z-aria-alert\",\n  shadow: false,\n})\nexport class ZAriaAlert {\n  /** Aria live mode */\n  @Prop()\n  mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n  render(): HTMLZAriaAlertElement {\n    return (\n      <Host\n        aria-live={this.mode}\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-aria-alert.entry.js","mappings":";;;MAOa,UAAU;;;oBAGE,cAAc,CAAC,MAAM;;IAE5C,MAAM;QACJ,QACE,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,iBACR,MAAM,mBACJ,WAAW,IAEzB,8DAAa,CACR,EACP;KACH;;;;;","names":[],"sources":["src/components/z-aria-alert/index.tsx"],"sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n  tag: \"z-aria-alert\",\n  shadow: false,\n})\nexport class ZAriaAlert {\n  /** Aria live mode */\n  @Prop()\n  mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n  render(): HTMLZAriaAlertElement {\n    return (\n      <Host\n        aria-live={this.mode}\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host } from './index-f16bc2ca.js';
+import { r as registerInstance, h, a as Host } from './index-ab5f1eaa.js';
 import { A as AvatarSize } from './index-2255c6c8.js';
 
 const stylesCss = ":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--gray700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";
@@ -29,10 +29,10 @@ const ZAvatar = class {
         }
     }
     render() {
-        return (h(Host, { key: '17a097738ce186c791794f5f8192cd46845df2a6', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '63564a1499f36b406dcece1fd47bb0aa8e06ed6d', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", null, this.text.substring(0, 2)), this.image && (h("img", { src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: '9813952059608df9a5cdf74db7038aec2751dfa8' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'd918f83b5212cb7618e30a0dc040f0c312341386', src: this.image, onError: () => (this.image = "") }))));
     }
 };
 ZAvatar.style = ZAvatarStyle0;

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

@@ -1 +1 @@
-{"file":"z-avatar.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ihBAAihB,CAAC;AACpiB,sBAAe,SAAS;;MCOX,OAAO;IAqBlB;;;oBAlBoB,UAAU,CAAC,MAAM;;yBAQhB,aAAa;+BAIP,SAAS;;QAOlC,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,MAAK,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,MAAK,CAAC,EAAE;YACvD,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;SAChF;KACF;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE;YAClC,OAAO,GAAG,CAAC;SACZ;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE;YAC1C,OAAO,GAAG,CAAC;SACZ;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE;YACzC,OAAO,GAAG,CAAC;SACZ;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,IAAI,EAAC,EACnE,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;gBACjC,eAAe,EAAE,SAAS,IAAI,CAAC,eAAe,GAAG;aAClD,IAEA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,gBAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ,EACpE,IAAI,CAAC,KAAK,KACT,WACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAChC,CACH,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/z-avatar/styles.css?tag=z-avatar&encapsulation=shadow","src/components/z-avatar/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--gray700);\n  border-radius: 50%;\n  font-family: var(--font-family-sans);\n  text-transform: uppercase;\n}\n\n:host(.small),\n:host(.small) > img {\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n}\n\n:host(.medium),\n:host(.medium) > img {\n  width: calc(var(--space-unit) * 4);\n  height: calc(var(--space-unit) * 4);\n}\n\n:host(.large),\n:host(.large) > img {\n  width: calc(var(--space-unit) * 5);\n  height: calc(var(--space-unit) * 5);\n}\n\n:host > img {\n  object-fit: cover;\n}\n","import {Component, Prop, h, Host} from \"@stencil/core\";\nimport {AvatarSize} from \"../../beans\";\n\n@Component({\n  tag: \"z-avatar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAvatar {\n  /** [optional] Avatar size */\n  @Prop()\n  size?: AvatarSize = AvatarSize.MEDIUM;\n\n  /** [optional] Avatar text */\n  @Prop()\n  text?: string;\n\n  /** [optional] Avatar text color */\n  @Prop()\n  textColor?: string = \"color-white\";\n\n  /** [optional] Avatar background color */\n  @Prop()\n  backgroundColor?: string = \"gray700\";\n\n  /** [optional] Avatar image */\n  @Prop({mutable: true})\n  image?: string;\n\n  constructor() {\n    if (this.text?.length === 0 && this.image?.length === 0) {\n      console.warn(\"z-avatar must contain at least one prop between text and image\");\n    }\n  }\n\n  private getTextSize(): string {\n    if (this.size === AvatarSize.SMALL) {\n      return \"5\";\n    } else if (this.size === AvatarSize.MEDIUM) {\n      return \"4\";\n    } else if (this.size === AvatarSize.LARGE) {\n      return \"2\";\n    }\n  }\n\n  render(): HTMLZAvatarElement {\n    return (\n      <Host\n        class={{[this.size]: true, [`body-${this.getTextSize()}-sb`]: true}}\n        style={{\n          color: `var(--${this.textColor})`,\n          backgroundColor: `var(--${this.backgroundColor})`,\n        }}\n      >\n        {this.text && !this.image && <span>{this.text.substring(0, 2)}</span>}\n        {this.image && (\n          <img\n            src={this.image}\n            onError={() => (this.image = \"\")}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-avatar.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ihBAAihB,CAAC;AACpiB,sBAAe,SAAS;;MCOX,OAAO;IAqBlB;;;oBAlBoB,UAAU,CAAC,MAAM;;yBAQhB,aAAa;+BAIP,SAAS;;QAOlC,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,MAAK,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,MAAK,CAAC,EAAE;YACvD,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;SAChF;KACF;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE;YAClC,OAAO,GAAG,CAAC;SACZ;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE;YAC1C,OAAO,GAAG,CAAC;SACZ;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE;YACzC,OAAO,GAAG,CAAC;SACZ;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,IAAI,EAAC,EACnE,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;gBACjC,eAAe,EAAE,SAAS,IAAI,CAAC,eAAe,GAAG;aAClD,IAEA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,+DAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ,EACpE,IAAI,CAAC,KAAK,KACT,4DACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAChC,CACH,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/z-avatar/styles.css?tag=z-avatar&encapsulation=shadow","src/components/z-avatar/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--gray700);\n  border-radius: 50%;\n  font-family: var(--font-family-sans);\n  text-transform: uppercase;\n}\n\n:host(.small),\n:host(.small) > img {\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n}\n\n:host(.medium),\n:host(.medium) > img {\n  width: calc(var(--space-unit) * 4);\n  height: calc(var(--space-unit) * 4);\n}\n\n:host(.large),\n:host(.large) > img {\n  width: calc(var(--space-unit) * 5);\n  height: calc(var(--space-unit) * 5);\n}\n\n:host > img {\n  object-fit: cover;\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {AvatarSize} from \"../../beans\";\n\n@Component({\n  tag: \"z-avatar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAvatar {\n  /** [optional] Avatar size */\n  @Prop()\n  size?: AvatarSize = AvatarSize.MEDIUM;\n\n  /** [optional] Avatar text */\n  @Prop()\n  text?: string;\n\n  /** [optional] Avatar text color */\n  @Prop()\n  textColor?: string = \"color-white\";\n\n  /** [optional] Avatar background color */\n  @Prop()\n  backgroundColor?: string = \"gray700\";\n\n  /** [optional] Avatar image */\n  @Prop({mutable: true})\n  image?: string;\n\n  constructor() {\n    if (this.text?.length === 0 && this.image?.length === 0) {\n      console.warn(\"z-avatar must contain at least one prop between text and image\");\n    }\n  }\n\n  private getTextSize(): string {\n    if (this.size === AvatarSize.SMALL) {\n      return \"5\";\n    } else if (this.size === AvatarSize.MEDIUM) {\n      return \"4\";\n    } else if (this.size === AvatarSize.LARGE) {\n      return \"2\";\n    }\n  }\n\n  render(): HTMLZAvatarElement {\n    return (\n      <Host\n        class={{[this.size]: true, [`body-${this.getTextSize()}-sb`]: true}}\n        style={{\n          color: `var(--${this.textColor})`,\n          backgroundColor: `var(--${this.backgroundColor})`,\n        }}\n      >\n        {this.text && !this.image && <span>{this.text.substring(0, 2)}</span>}\n        {this.image && (\n          <img\n            src={this.image}\n            onError={() => (this.image = \"\")}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f16bc2ca.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ab5f1eaa.js';
 import { Y as BookCardVariant } from './index-2255c6c8.js';
 import { m as mobileBreakpoint } from './breakpoints-680e0e56.js';
 import { r as randomId } from './utils-7983d02c.js';
@@ -120,7 +120,7 @@ const ZBookCard = class {
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '5bdf53790a65a448b54994ac6d88bb333f23db33', class: {
+        return (h("article", { key: '93b847b7f5067c69880ea8ba283a207c8b691a2a', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));

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

@@ -1 +1 @@
-{"file":"z-book-card.entry.js","mappings":"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","names":[],"sources":["src/components/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/components/z-book-card/index.tsx"],"sourcesContent":["/* COMMON STYLES */\n\n:host {\n  --z-book-card-ribbon-background-color: var(--avatar-C08);\n  --z-book-card-ribbon-shadow-color: var(--green950);\n  --z-book-card-compact-width: 262px;\n  --z-book-card-compact-height: 568px;\n}\n\n:host > article {\n  display: block;\n  width: 100%;\n  max-width: 360px;\n  box-sizing: border-box;\n  border: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > article div.cover {\n  position: relative;\n}\n\n:host > article div.cover div.img-wrapper {\n  display: flex;\n  overflow: hidden;\n  border: var(--border-size-small) solid var(--color-surface03);\n  line-height: 0;\n}\n\n:host > article div.cover div.img-wrapper img {\n  width: auto;\n  max-width: 100%;\n  height: auto;\n  max-height: 100%;\n  align-self: flex-end;\n}\n\n:host > article div.cover .ribbon {\n  position: absolute;\n  z-index: 10;\n  top: calc(var(--space-unit) * 2);\n  left: calc(var(--space-unit) * -2);\n  display: flex;\n  max-width: 100%;\n  height: calc(var(--space-unit) * 4);\n  box-sizing: border-box;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 2);\n  border: var(--border-size-medium) solid var(--color-surface01);\n  background: var(--z-book-card-ribbon-background-color);\n  border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  box-shadow: var(--shadow-2);\n  color: var(--color-text-inverse);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n  line-height: initial;\n}\n\n:host > article div.cover .ribbon.interactive:hover {\n  cursor: pointer;\n}\n\n:host > article div.cover .ribbon span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: nowrap;\n}\n\n:host > article div.cover .ribbon::before {\n  position: absolute;\n  bottom: -12px;\n  left: -2px;\n  width: 0;\n  height: 0;\n  border-top: 10px solid var(--z-book-card-ribbon-shadow-color);\n  border-left: 16px solid transparent;\n  content: \"\";\n}\n\n:host > article div.cover .ribbon z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host > article div.content {\n  margin: var(--space-unit) 0;\n  border-radius: var(--border-radius);\n}\n\n:host > article .title {\n  display: flex;\n  height: 100%;\n  align-self: center;\n  color: var(--color-default-text);\n  font-size: var(--font-size-4);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n:host > article .title * {\n  all: unset;\n}\n\n:host > article div.subtitle {\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n:host > article div.authors {\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  line-height: 1.33;\n}\n\n:host > article div.isbn {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  line-height: 1.33;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: nowrap;\n}\n\n:host > article div.isbn > .code {\n  font-weight: var(--font-sb);\n}\n\n:host > article div.tags {\n  display: flex;\n  overflow: hidden;\n  max-height: 32px;\n  flex-flow: row wrap;\n  align-content: stretch;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host > article ::slotted([slot=\"tags\"]) {\n  margin-bottom: var(--space-unit);\n}\n\n:host > article ::slotted([slot=\"header-cta\"]) {\n  --z-icon-width: 20px;\n  --z-icon-height: 20px;\n\n  padding: var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01-icon);\n}\n\n/* EXPANDED STYLES */\n\n:host > article.expanded {\n  width: 100%;\n  min-width: 328px;\n  padding: calc(var(--space-unit) * 2);\n  padding-bottom: 0;\n}\n\n:host > article.expanded div.header {\n  display: flex;\n  flex-flow: row nowrap;\n  align-content: stretch;\n  align-items: top;\n  justify-content: space-between;\n  margin-bottom: var(--space-unit);\n  white-space: nowrap;\n}\n\n:host > article.expanded div.cover div.img-wrapper {\n  border-radius: var(--border-radius);\n}\n\n:host > article.expanded div.cover div.img-wrapper img {\n  width: 100%;\n}\n\n:host > article.expanded .title,\n:host > article.expanded .subtitle,\n:host > article.expanded .authors {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  white-space: initial;\n}\n\n:host > article.expanded div.footer {\n  border-top: var(--border-size-small) solid var(--color-surface03);\n  margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open {\n  padding-top: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open div.resources {\n  display: initial;\n}\n\n:host > article.expanded div.footer.close div.resources {\n  display: none;\n}\n\n:host > article.expanded button.show-resources {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n\n  all: unset;\n  display: flex;\n  width: 100%;\n  flex-flow: row nowrap;\n  align-content: center;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 1) 0;\n  color: var(--color-link-primary);\n  cursor: pointer;\n  fill: var(--color-link-primary);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n  gap: var(--space-unit);\n}\n\n:host > article.expanded button.show-resources:focus {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* SEARCH STYLES */\n\n:host > article.search {\n  width: 262px;\n  height: 616px;\n  padding: calc(var(--space-unit) * 2);\n  padding-bottom: 0;\n}\n\n:host > article.search .wrapper-container {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n:host > article.search .wrapper-container .wrapper {\n  height: 451px;\n}\n\n:host > article.search .wrapper-container .action-container {\n  padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.search div.header {\n  display: flex;\n  height: 24px;\n  flex-flow: row nowrap;\n  align-content: stretch;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: calc(var(--space-unit) * 1.5);\n  white-space: nowrap;\n}\n\n:host > article.search div.cover div.img-wrapper {\n  height: 314px;\n  border-radius: var(--border-radius);\n}\n\n:host > article.search .title {\n  display: block;\n  height: initial;\n  align-self: unset;\n  font-size: var(--font-size-3);\n}\n\n:host > article.search .title,\n:host > article.search .subtitle,\n:host > article.search .authors {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* COMPACT STYLES */\n\n:host > article.compact {\n  width: var(--z-book-card-compact-width);\n  height: var(--z-book-card-compact-height);\n}\n\n:host > article.compact.borderless {\n  border: none;\n}\n\n:host > article.compact div.cover div.img-wrapper {\n  width: 100%;\n  height: calc(var(--z-book-card-compact-width) * 1.36);\n  box-sizing: border-box;\n  border: none;\n  background: var(--color-white);\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  box-shadow: var(--shadow-2);\n}\n\n:host > article.compact div.wrapper {\n  display: flex;\n  height: 100%;\n  flex-flow: column nowrap;\n  align-content: stretch;\n  align-items: stretch;\n  justify-content: flex-start;\n}\n\n:host > article.compact div.content {\n  display: flex;\n  box-sizing: border-box;\n  flex-flow: column nowrap;\n  align-content: stretch;\n  align-items: stretch;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 2);\n  padding-top: var(--space-unit);\n  margin: 0;\n}\n\n:host > article.compact div.action-container {\n  padding: calc(var(--space-unit) * 2);\n  padding-top: 0;\n  margin-top: auto;\n}\n\n:host > article.compact.borderless div.cover div.img-wrapper {\n  width: var(--z-book-card-compact-width);\n}\n\n:host > article.compact.borderless div.content {\n  padding: 0;\n  padding-top: var(--space-unit);\n}\n\n:host > article.compact.borderless div.action-container {\n  padding: 0;\n  padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.compact .title {\n  display: block;\n  height: initial;\n  align-self: unset;\n}\n\n:host > article.compact .title,\n:host > article.compact .subtitle,\n:host > article.compact .authors {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  white-space: initial;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host > article {\n    width: 100%;\n    max-width: initial;\n  }\n\n  :host > article .title {\n    display: block;\n    height: initial;\n    align-self: unset;\n  }\n\n  /* EXPANDED STYLES */\n\n  :host > article.expanded {\n    width: 100%;\n    min-width: initial;\n    max-width: initial;\n    height: 360px;\n    padding: 0;\n    border: 0;\n  }\n\n  :host > article.expanded div.wrapper {\n    display: flex;\n    flex-flow: row nowrap;\n    align-content: stretch;\n    align-items: stretch;\n    justify-content: flex-start;\n  }\n\n  :host > article.expanded div.cover div.img-wrapper {\n    width: 262px;\n    height: 356px;\n    border: 0;\n    border: var(--border-size-medium) solid var(--color-surface03);\n    border-right: none;\n    background: var(--color-surface01);\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n\n  :host > article.expanded div.cover div.img-wrapper img {\n    width: auto;\n    border-radius: 0;\n  }\n\n  :host > article.expanded div.content {\n    display: flex;\n    overflow: hidden;\n    width: 100%;\n    height: 356px;\n    flex-flow: column nowrap;\n    align-content: stretch;\n    align-items: stretch;\n    justify-content: space-between;\n    border: var(--border-size-medium) solid var(--color-surface03);\n    border-left: none;\n    margin: 0;\n    background: var(--color-surface01);\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  }\n\n  :host > article.expanded div.content div.top {\n    padding: calc(var(--space-unit) * 2);\n    padding-bottom: 0;\n  }\n\n  :host > article.expanded div.content div.top div.info {\n    display: flex;\n    flex-flow: row nowrap;\n    align-content: stretch;\n    align-items: stretch;\n    justify-content: space-between;\n    margin-bottom: calc(var(--space-unit) / 2);\n  }\n\n  :host > article.expanded div.content div.top div.info > div.left {\n    width: 100%;\n  }\n\n  :host > article.expanded div.content div.bottom {\n    padding: calc(var(--space-unit) * 2);\n    padding-bottom: 0;\n  }\n}\n\n/* Desktop breakpoint */\n\n@media (min-width: 1152px) {\n  :host > article {\n    width: fit-content;\n    max-width: initial;\n  }\n}\n\n/* Wide breakpoint */\n@media (min-width: 1366px) {\n  :host > article.expanded {\n    width: 635px;\n  }\n\n  :host > article.expanded div.content {\n    width: 369px;\n  }\n}\n","import {Component, Element, Prop, State, h, Event, EventEmitter} from \"@stencil/core\";\nimport {BookCardVariant} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * @slot resources - books resources (extended variant only)\n * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)\n * @slot tags - card tags (extended and search variant only)\n * @slot footer-cta - footer cta button (search and compact variant only)\n * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color\n * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color\n * @cssprop --z-book-card-compact-width - compact card custom width\n * @cssprop --z-book-card-compact-height - compact card custom height\n */\n@Component({\n  tag: \"z-book-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBookCard {\n  @Element() hostElement: HTMLZBookCardElement;\n\n  /**\n   * Card variant: expanded, compact, search\n   */\n  @Prop()\n  variant: BookCardVariant;\n\n  /**\n   * Cover URL\n   */\n  @Prop()\n  cover: string;\n\n  /**\n   * Card main title\n   */\n  @Prop()\n  operaTitle: string;\n\n  /**\n   * [optional] Card subtitle\n   */\n  @Prop()\n  volumeTitle?: string;\n\n  /**\n   * [optional] Authors\n   */\n  @Prop()\n  authors?: string;\n\n  /**\n   * [optional] Main ISBN\n   */\n  @Prop()\n  isbn?: string;\n\n  /**\n   * [optional] ISBN label\n   */\n  @Prop()\n  isbnLabel = \"\";\n\n  /**\n   * [optional] Ribbon label - expanded and search variant only\n   */\n  @Prop()\n  ribbon?: string;\n\n  /**\n   * [optional] Ribbon icon - expanded and search variant only\n   */\n  @Prop()\n  ribbonIcon?: string;\n\n  /**\n   * [optional] Ribbon interactive - expanded and search variant only\n   */\n  @Prop()\n  ribbonInteractive?: boolean;\n\n  /**\n   * [optional] Borderless card - compact variant only\n   */\n  @Prop()\n  borderless?: boolean;\n\n  /**\n   * [optional] Fallback cover URL\n   */\n  @Prop()\n  fallbackCover?: string;\n\n  /**\n   * [optional] [accessibility] Card title HTML tag\n   */\n  @Prop()\n  operaTitleTag?: string;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  hasResources = false;\n\n  @State()\n  showResources = false;\n\n  /** click on interactive ribbon */\n  @Event()\n  ribbonClick: EventEmitter;\n\n  private emitRibbonClick(): void {\n    this.ribbonClick.emit();\n  }\n\n  private id: string;\n\n  componentWillLoad(): void {\n    this.id = `id-${randomId()}`;\n\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);\n  }\n\n  componentDidLoad(): void {\n    this.handleResources();\n  }\n\n  private handleResources(): void {\n    if (this.variant !== BookCardVariant.EXPANDED || !this.isMobile) {\n      return;\n    }\n    this.hasResources = this.hostElement.querySelectorAll(\"[slot=resources]\")?.length > 0;\n  }\n\n  private toggleResources(): void {\n    this.showResources = !this.showResources;\n  }\n\n  private renderCard(): HTMLDivElement {\n    switch (this.variant) {\n      case BookCardVariant.EXPANDED:\n        return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n      case BookCardVariant.COMPACT:\n        return this.renderCompactCard();\n      case BookCardVariant.SEARCH:\n        return this.renderSearchCard();\n    }\n  }\n\n  private renderExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          <div class=\"top\">\n            <div class=\"info\">\n              <div class=\"left\">\n                {this.renderAuthors()}\n                {this.renderOperaTitle()}\n                {this.renderVolumeTitle()}\n                {this.renderIsbn()}\n              </div>\n              <div class=\"right\">{this.renderHeaderCtaSlot()}</div>\n            </div>\n            {this.renderTagsSlot()}\n          </div>\n          <div class=\"bottom\">{this.renderResourcesSlot()}</div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMobileExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        <div class=\"header\">\n          {this.renderOperaTitle()}\n          {this.renderHeaderCtaSlot()}\n        </div>\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderTagsSlot()}\n          {this.renderAuthors()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.hasResources && (\n          <div\n            class={{\n              footer: true,\n              open: this.showResources,\n              close: !this.showResources,\n            }}\n          >\n            {!this.showResources && this.renderShowResources()}\n            {this.renderResourcesSlot()}\n            {this.showResources && this.renderShowResources()}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private renderSearchCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper-container\">\n        <div class=\"wrapper\">\n          <div class=\"header\">\n            {this.renderOperaTitle()}\n            {this.renderHeaderCtaSlot()}\n          </div>\n          {this.renderCover()}\n          <div class=\"content\">\n            {this.renderTagsSlot()}\n            {this.renderAuthors()}\n            {this.renderVolumeTitle()}\n            {this.renderIsbn()}\n          </div>\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCompactCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderAuthors()}\n          {this.renderOperaTitle()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCover(): HTMLDivElement {\n    return (\n      <div class=\"cover\">\n        {this.ribbon && this.variant !== BookCardVariant.COMPACT && this.renderRibbon()}\n        <div class=\"img-wrapper\">\n          <img\n            src={this.cover}\n            onError={() => {\n              if (this.fallbackCover) {\n                this.cover = this.fallbackCover;\n              }\n            }}\n            aria-hidden=\"true\"\n          />\n        </div>\n      </div>\n    );\n  }\n\n  private renderRibbon(): HTMLElement {\n    const content = [\n      this.ribbonIcon && (\n        <z-icon\n          name={this.ribbonIcon}\n          width={16}\n          height={16}\n          fill={\"color-inverse-icon\"}\n        />\n      ),\n      <span>{this.ribbon}</span>,\n    ];\n\n    return this.ribbonInteractive ? (\n      <button\n        class=\"ribbon interactive\"\n        onClick={() => this.emitRibbonClick()}\n      >\n        {content}\n      </button>\n    ) : (\n      <div class=\"ribbon\">{content}</div>\n    );\n  }\n\n  private renderOperaTitle(): HTMLDivElement {\n    const title = this.operaTitleTag\n      ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`\n      : this.operaTitle;\n\n    return (\n      <div\n        class=\"title\"\n        innerHTML={title}\n      />\n    );\n  }\n\n  private renderVolumeTitle(): null | HTMLDivElement {\n    return this.volumeTitle ? <div class=\"subtitle\">{this.volumeTitle}</div> : null;\n  }\n\n  private renderAuthors(): null | HTMLDivElement {\n    return this.authors ? (\n      <div\n        class=\"authors\"\n        aria-description=\"Autori\"\n      >\n        {this.authors}\n      </div>\n    ) : null;\n  }\n\n  private renderIsbn(): null | HTMLDivElement {\n    return this.isbn ? (\n      <div class=\"isbn\">\n        <span\n          class=\"code\"\n          aria-description={`ISBN ${this.isbnLabel}`}\n        >\n          {this.isbn}\n        </span>\n        {this.isbnLabel ? <span class=\"label\"> {this.isbnLabel}</span> : null}\n      </div>\n    ) : null;\n  }\n\n  private renderShowResources(): HTMLButtonElement {\n    return (\n      <button\n        class=\"show-resources\"\n        aria-label={`Risorse del libro ${this.operaTitle}`}\n        aria-expanded={this.showResources.toString()}\n        aria-controls={`resources-${this.id}`}\n        onClick={() => this.toggleResources()}\n      >\n        {this.showResources ? \"Chiudi\" : \"Vedi tutto\"}\n        <z-icon name={this.showResources ? \"chevron-up\" : \"chevron-down\"} />\n      </button>\n    );\n  }\n\n  private renderTagsSlot(): HTMLDivElement {\n    return (\n      <div class=\"tags\">\n        <slot name=\"tags\" />\n      </div>\n    );\n  }\n\n  private renderHeaderCtaSlot(): HTMLSlotElement {\n    return <slot name=\"header-cta\" />;\n  }\n\n  private renderResourcesSlot(): HTMLDivElement {\n    return (\n      <div\n        id={`resources-${this.id}`}\n        class=\"resources\"\n      >\n        <slot\n          name=\"resources\"\n          onSlotchange={() => this.handleResources()}\n        />\n      </div>\n    );\n  }\n\n  private renderFooterCtaSlot(): HTMLDivElement {\n    return (\n      <div class=\"action-container\">\n        <slot name=\"footer-cta\" />\n      </div>\n    );\n  }\n\n  render(): HTMLZBookCardElement {\n    return (\n      <article\n        class={{\n          [this.variant]: true,\n          borderless: !!this.borderless,\n        }}\n      >\n        {this.renderCard()}\n      </article>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-book-card.entry.js","mappings":"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","names":[],"sources":["src/components/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/components/z-book-card/index.tsx"],"sourcesContent":["/* COMMON STYLES */\n\n:host {\n  --z-book-card-ribbon-background-color: var(--avatar-C08);\n  --z-book-card-ribbon-shadow-color: var(--green950);\n  --z-book-card-compact-width: 262px;\n  --z-book-card-compact-height: 568px;\n}\n\n:host > article {\n  display: block;\n  width: 100%;\n  max-width: 360px;\n  box-sizing: border-box;\n  border: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > article div.cover {\n  position: relative;\n}\n\n:host > article div.cover div.img-wrapper {\n  display: flex;\n  overflow: hidden;\n  border: var(--border-size-small) solid var(--color-surface03);\n  line-height: 0;\n}\n\n:host > article div.cover div.img-wrapper img {\n  width: auto;\n  max-width: 100%;\n  height: auto;\n  max-height: 100%;\n  align-self: flex-end;\n}\n\n:host > article div.cover .ribbon {\n  position: absolute;\n  z-index: 10;\n  top: calc(var(--space-unit) * 2);\n  left: calc(var(--space-unit) * -2);\n  display: flex;\n  max-width: 100%;\n  height: calc(var(--space-unit) * 4);\n  box-sizing: border-box;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 2);\n  border: var(--border-size-medium) solid var(--color-surface01);\n  background: var(--z-book-card-ribbon-background-color);\n  border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  box-shadow: var(--shadow-2);\n  color: var(--color-text-inverse);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n  line-height: initial;\n}\n\n:host > article div.cover .ribbon.interactive:hover {\n  cursor: pointer;\n}\n\n:host > article div.cover .ribbon span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: nowrap;\n}\n\n:host > article div.cover .ribbon::before {\n  position: absolute;\n  bottom: -12px;\n  left: -2px;\n  width: 0;\n  height: 0;\n  border-top: 10px solid var(--z-book-card-ribbon-shadow-color);\n  border-left: 16px solid transparent;\n  content: \"\";\n}\n\n:host > article div.cover .ribbon z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host > article div.content {\n  margin: var(--space-unit) 0;\n  border-radius: var(--border-radius);\n}\n\n:host > article .title {\n  display: flex;\n  height: 100%;\n  align-self: center;\n  color: var(--color-default-text);\n  font-size: var(--font-size-4);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n:host > article .title * {\n  all: unset;\n}\n\n:host > article div.subtitle {\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n:host > article div.authors {\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  line-height: 1.33;\n}\n\n:host > article div.isbn {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  line-height: 1.33;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: nowrap;\n}\n\n:host > article div.isbn > .code {\n  font-weight: var(--font-sb);\n}\n\n:host > article div.tags {\n  display: flex;\n  overflow: hidden;\n  max-height: 32px;\n  flex-flow: row wrap;\n  align-content: stretch;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host > article ::slotted([slot=\"tags\"]) {\n  margin-bottom: var(--space-unit);\n}\n\n:host > article ::slotted([slot=\"header-cta\"]) {\n  --z-icon-width: 20px;\n  --z-icon-height: 20px;\n\n  padding: var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01-icon);\n}\n\n/* EXPANDED STYLES */\n\n:host > article.expanded {\n  width: 100%;\n  min-width: 328px;\n  padding: calc(var(--space-unit) * 2);\n  padding-bottom: 0;\n}\n\n:host > article.expanded div.header {\n  display: flex;\n  flex-flow: row nowrap;\n  align-content: stretch;\n  align-items: top;\n  justify-content: space-between;\n  margin-bottom: var(--space-unit);\n  white-space: nowrap;\n}\n\n:host > article.expanded div.cover div.img-wrapper {\n  border-radius: var(--border-radius);\n}\n\n:host > article.expanded div.cover div.img-wrapper img {\n  width: 100%;\n}\n\n:host > article.expanded .title,\n:host > article.expanded .subtitle,\n:host > article.expanded .authors {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  white-space: initial;\n}\n\n:host > article.expanded div.footer {\n  border-top: var(--border-size-small) solid var(--color-surface03);\n  margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open {\n  padding-top: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open div.resources {\n  display: initial;\n}\n\n:host > article.expanded div.footer.close div.resources {\n  display: none;\n}\n\n:host > article.expanded button.show-resources {\n  --z-icon-height: 16px;\n  --z-icon-width: 16px;\n\n  all: unset;\n  display: flex;\n  width: 100%;\n  flex-flow: row nowrap;\n  align-content: center;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 1) 0;\n  color: var(--color-link-primary);\n  cursor: pointer;\n  fill: var(--color-link-primary);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n  gap: var(--space-unit);\n}\n\n:host > article.expanded button.show-resources:focus {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* SEARCH STYLES */\n\n:host > article.search {\n  width: 262px;\n  height: 616px;\n  padding: calc(var(--space-unit) * 2);\n  padding-bottom: 0;\n}\n\n:host > article.search .wrapper-container {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n:host > article.search .wrapper-container .wrapper {\n  height: 451px;\n}\n\n:host > article.search .wrapper-container .action-container {\n  padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.search div.header {\n  display: flex;\n  height: 24px;\n  flex-flow: row nowrap;\n  align-content: stretch;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: calc(var(--space-unit) * 1.5);\n  white-space: nowrap;\n}\n\n:host > article.search div.cover div.img-wrapper {\n  height: 314px;\n  border-radius: var(--border-radius);\n}\n\n:host > article.search .title {\n  display: block;\n  height: initial;\n  align-self: unset;\n  font-size: var(--font-size-3);\n}\n\n:host > article.search .title,\n:host > article.search .subtitle,\n:host > article.search .authors {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* COMPACT STYLES */\n\n:host > article.compact {\n  width: var(--z-book-card-compact-width);\n  height: var(--z-book-card-compact-height);\n}\n\n:host > article.compact.borderless {\n  border: none;\n}\n\n:host > article.compact div.cover div.img-wrapper {\n  width: 100%;\n  height: calc(var(--z-book-card-compact-width) * 1.36);\n  box-sizing: border-box;\n  border: none;\n  background: var(--color-white);\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  box-shadow: var(--shadow-2);\n}\n\n:host > article.compact div.wrapper {\n  display: flex;\n  height: 100%;\n  flex-flow: column nowrap;\n  align-content: stretch;\n  align-items: stretch;\n  justify-content: flex-start;\n}\n\n:host > article.compact div.content {\n  display: flex;\n  box-sizing: border-box;\n  flex-flow: column nowrap;\n  align-content: stretch;\n  align-items: stretch;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 2);\n  padding-top: var(--space-unit);\n  margin: 0;\n}\n\n:host > article.compact div.action-container {\n  padding: calc(var(--space-unit) * 2);\n  padding-top: 0;\n  margin-top: auto;\n}\n\n:host > article.compact.borderless div.cover div.img-wrapper {\n  width: var(--z-book-card-compact-width);\n}\n\n:host > article.compact.borderless div.content {\n  padding: 0;\n  padding-top: var(--space-unit);\n}\n\n:host > article.compact.borderless div.action-container {\n  padding: 0;\n  padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.compact .title {\n  display: block;\n  height: initial;\n  align-self: unset;\n}\n\n:host > article.compact .title,\n:host > article.compact .subtitle,\n:host > article.compact .authors {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  white-space: initial;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host > article {\n    width: 100%;\n    max-width: initial;\n  }\n\n  :host > article .title {\n    display: block;\n    height: initial;\n    align-self: unset;\n  }\n\n  /* EXPANDED STYLES */\n\n  :host > article.expanded {\n    width: 100%;\n    min-width: initial;\n    max-width: initial;\n    height: 360px;\n    padding: 0;\n    border: 0;\n  }\n\n  :host > article.expanded div.wrapper {\n    display: flex;\n    flex-flow: row nowrap;\n    align-content: stretch;\n    align-items: stretch;\n    justify-content: flex-start;\n  }\n\n  :host > article.expanded div.cover div.img-wrapper {\n    width: 262px;\n    height: 356px;\n    border: 0;\n    border: var(--border-size-medium) solid var(--color-surface03);\n    border-right: none;\n    background: var(--color-surface01);\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n\n  :host > article.expanded div.cover div.img-wrapper img {\n    width: auto;\n    border-radius: 0;\n  }\n\n  :host > article.expanded div.content {\n    display: flex;\n    overflow: hidden;\n    width: 100%;\n    height: 356px;\n    flex-flow: column nowrap;\n    align-content: stretch;\n    align-items: stretch;\n    justify-content: space-between;\n    border: var(--border-size-medium) solid var(--color-surface03);\n    border-left: none;\n    margin: 0;\n    background: var(--color-surface01);\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  }\n\n  :host > article.expanded div.content div.top {\n    padding: calc(var(--space-unit) * 2);\n    padding-bottom: 0;\n  }\n\n  :host > article.expanded div.content div.top div.info {\n    display: flex;\n    flex-flow: row nowrap;\n    align-content: stretch;\n    align-items: stretch;\n    justify-content: space-between;\n    margin-bottom: calc(var(--space-unit) / 2);\n  }\n\n  :host > article.expanded div.content div.top div.info > div.left {\n    width: 100%;\n  }\n\n  :host > article.expanded div.content div.bottom {\n    padding: calc(var(--space-unit) * 2);\n    padding-bottom: 0;\n  }\n}\n\n/* Desktop breakpoint */\n\n@media (min-width: 1152px) {\n  :host > article {\n    width: fit-content;\n    max-width: initial;\n  }\n}\n\n/* Wide breakpoint */\n@media (min-width: 1366px) {\n  :host > article.expanded {\n    width: 635px;\n  }\n\n  :host > article.expanded div.content {\n    width: 369px;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {BookCardVariant} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * @slot resources - books resources (extended variant only)\n * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)\n * @slot tags - card tags (extended and search variant only)\n * @slot footer-cta - footer cta button (search and compact variant only)\n * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color\n * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color\n * @cssprop --z-book-card-compact-width - compact card custom width\n * @cssprop --z-book-card-compact-height - compact card custom height\n */\n@Component({\n  tag: \"z-book-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBookCard {\n  @Element() hostElement: HTMLZBookCardElement;\n\n  /**\n   * Card variant: expanded, compact, search\n   */\n  @Prop()\n  variant: BookCardVariant;\n\n  /**\n   * Cover URL\n   */\n  @Prop()\n  cover: string;\n\n  /**\n   * Card main title\n   */\n  @Prop()\n  operaTitle: string;\n\n  /**\n   * [optional] Card subtitle\n   */\n  @Prop()\n  volumeTitle?: string;\n\n  /**\n   * [optional] Authors\n   */\n  @Prop()\n  authors?: string;\n\n  /**\n   * [optional] Main ISBN\n   */\n  @Prop()\n  isbn?: string;\n\n  /**\n   * [optional] ISBN label\n   */\n  @Prop()\n  isbnLabel = \"\";\n\n  /**\n   * [optional] Ribbon label - expanded and search variant only\n   */\n  @Prop()\n  ribbon?: string;\n\n  /**\n   * [optional] Ribbon icon - expanded and search variant only\n   */\n  @Prop()\n  ribbonIcon?: string;\n\n  /**\n   * [optional] Ribbon interactive - expanded and search variant only\n   */\n  @Prop()\n  ribbonInteractive?: boolean;\n\n  /**\n   * [optional] Borderless card - compact variant only\n   */\n  @Prop()\n  borderless?: boolean;\n\n  /**\n   * [optional] Fallback cover URL\n   */\n  @Prop()\n  fallbackCover?: string;\n\n  /**\n   * [optional] [accessibility] Card title HTML tag\n   */\n  @Prop()\n  operaTitleTag?: string;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  hasResources = false;\n\n  @State()\n  showResources = false;\n\n  /** click on interactive ribbon */\n  @Event()\n  ribbonClick: EventEmitter;\n\n  private emitRibbonClick(): void {\n    this.ribbonClick.emit();\n  }\n\n  private id: string;\n\n  componentWillLoad(): void {\n    this.id = `id-${randomId()}`;\n\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);\n  }\n\n  componentDidLoad(): void {\n    this.handleResources();\n  }\n\n  private handleResources(): void {\n    if (this.variant !== BookCardVariant.EXPANDED || !this.isMobile) {\n      return;\n    }\n    this.hasResources = this.hostElement.querySelectorAll(\"[slot=resources]\")?.length > 0;\n  }\n\n  private toggleResources(): void {\n    this.showResources = !this.showResources;\n  }\n\n  private renderCard(): HTMLDivElement {\n    switch (this.variant) {\n      case BookCardVariant.EXPANDED:\n        return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n      case BookCardVariant.COMPACT:\n        return this.renderCompactCard();\n      case BookCardVariant.SEARCH:\n        return this.renderSearchCard();\n    }\n  }\n\n  private renderExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          <div class=\"top\">\n            <div class=\"info\">\n              <div class=\"left\">\n                {this.renderAuthors()}\n                {this.renderOperaTitle()}\n                {this.renderVolumeTitle()}\n                {this.renderIsbn()}\n              </div>\n              <div class=\"right\">{this.renderHeaderCtaSlot()}</div>\n            </div>\n            {this.renderTagsSlot()}\n          </div>\n          <div class=\"bottom\">{this.renderResourcesSlot()}</div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMobileExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        <div class=\"header\">\n          {this.renderOperaTitle()}\n          {this.renderHeaderCtaSlot()}\n        </div>\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderTagsSlot()}\n          {this.renderAuthors()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.hasResources && (\n          <div\n            class={{\n              footer: true,\n              open: this.showResources,\n              close: !this.showResources,\n            }}\n          >\n            {!this.showResources && this.renderShowResources()}\n            {this.renderResourcesSlot()}\n            {this.showResources && this.renderShowResources()}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private renderSearchCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper-container\">\n        <div class=\"wrapper\">\n          <div class=\"header\">\n            {this.renderOperaTitle()}\n            {this.renderHeaderCtaSlot()}\n          </div>\n          {this.renderCover()}\n          <div class=\"content\">\n            {this.renderTagsSlot()}\n            {this.renderAuthors()}\n            {this.renderVolumeTitle()}\n            {this.renderIsbn()}\n          </div>\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCompactCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderAuthors()}\n          {this.renderOperaTitle()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCover(): HTMLDivElement {\n    return (\n      <div class=\"cover\">\n        {this.ribbon && this.variant !== BookCardVariant.COMPACT && this.renderRibbon()}\n        <div class=\"img-wrapper\">\n          <img\n            src={this.cover}\n            onError={() => {\n              if (this.fallbackCover) {\n                this.cover = this.fallbackCover;\n              }\n            }}\n            aria-hidden=\"true\"\n          />\n        </div>\n      </div>\n    );\n  }\n\n  private renderRibbon(): HTMLElement {\n    const content = [\n      this.ribbonIcon && (\n        <z-icon\n          name={this.ribbonIcon}\n          width={16}\n          height={16}\n          fill={\"color-inverse-icon\"}\n        />\n      ),\n      <span>{this.ribbon}</span>,\n    ];\n\n    return this.ribbonInteractive ? (\n      <button\n        class=\"ribbon interactive\"\n        onClick={() => this.emitRibbonClick()}\n      >\n        {content}\n      </button>\n    ) : (\n      <div class=\"ribbon\">{content}</div>\n    );\n  }\n\n  private renderOperaTitle(): HTMLDivElement {\n    const title = this.operaTitleTag\n      ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`\n      : this.operaTitle;\n\n    return (\n      <div\n        class=\"title\"\n        innerHTML={title}\n      />\n    );\n  }\n\n  private renderVolumeTitle(): null | HTMLDivElement {\n    return this.volumeTitle ? <div class=\"subtitle\">{this.volumeTitle}</div> : null;\n  }\n\n  private renderAuthors(): null | HTMLDivElement {\n    return this.authors ? (\n      <div\n        class=\"authors\"\n        aria-description=\"Autori\"\n      >\n        {this.authors}\n      </div>\n    ) : null;\n  }\n\n  private renderIsbn(): null | HTMLDivElement {\n    return this.isbn ? (\n      <div class=\"isbn\">\n        <span\n          class=\"code\"\n          aria-description={`ISBN ${this.isbnLabel}`}\n        >\n          {this.isbn}\n        </span>\n        {this.isbnLabel ? <span class=\"label\"> {this.isbnLabel}</span> : null}\n      </div>\n    ) : null;\n  }\n\n  private renderShowResources(): HTMLButtonElement {\n    return (\n      <button\n        class=\"show-resources\"\n        aria-label={`Risorse del libro ${this.operaTitle}`}\n        aria-expanded={this.showResources.toString()}\n        aria-controls={`resources-${this.id}`}\n        onClick={() => this.toggleResources()}\n      >\n        {this.showResources ? \"Chiudi\" : \"Vedi tutto\"}\n        <z-icon name={this.showResources ? \"chevron-up\" : \"chevron-down\"} />\n      </button>\n    );\n  }\n\n  private renderTagsSlot(): HTMLDivElement {\n    return (\n      <div class=\"tags\">\n        <slot name=\"tags\" />\n      </div>\n    );\n  }\n\n  private renderHeaderCtaSlot(): HTMLSlotElement {\n    return <slot name=\"header-cta\" />;\n  }\n\n  private renderResourcesSlot(): HTMLDivElement {\n    return (\n      <div\n        id={`resources-${this.id}`}\n        class=\"resources\"\n      >\n        <slot\n          name=\"resources\"\n          onSlotchange={() => this.handleResources()}\n        />\n      </div>\n    );\n  }\n\n  private renderFooterCtaSlot(): HTMLDivElement {\n    return (\n      <div class=\"action-container\">\n        <slot name=\"footer-cta\" />\n      </div>\n    );\n  }\n\n  render(): HTMLZBookCardElement {\n    return (\n      <article\n        class={{\n          [this.variant]: true,\n          borderless: !!this.borderless,\n        }}\n      >\n        {this.renderCard()}\n      </article>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-f16bc2ca.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-ab5f1eaa.js';
 import { V as BreadcrumbPathStyle, W as BreadcrumbHomepageVariant, p as Device, g as KeyboardCode, P as PopoverPosition, i as ListSize } from './index-2255c6c8.js';
 import { g as getDevice, a as handleKeyboardSubmit } from './utils-7983d02c.js';
 import './breakpoints-680e0e56.js';
@@ -200,10 +200,10 @@ const ZBreadcrumb = class {
         ];
     }
     render() {
-        return (h(Host, { key: 'f733fb3402c54c6d006af3ff72ddcba4a61256d5', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'a75562e28f23a646eccebf5c80ee1f71135a4b58', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: 'bba9d5bf2b1316c4e29eebcc00cb23c3e6635a36', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '4d916bcbb730f4e3cd0d051b630336db7222aa30', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: '2b9f2868480e987d14e8829af4850d028087e722' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '654d8e9cad8417a155f1bc349b7b16687c8db96e' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"z-breadcrumb.entry.js","mappings":"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","names":[],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --line-clamp-popover: 0;\n  --line-clamp-mobile: 1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nnav {\n  display: flex;\n  align-items: center;\n}\n\nol {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  column-gap: var(--space-unit);\n  list-style: none;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  column-gap: var(--space-unit);\n}\n\nol li > a,\nol li > button {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\na:focus,\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na {\n  color: var(--color-link-primary);\n  white-space: nowrap;\n}\n\na.missing-path {\n  color: var(--color-default-text);\n}\n\n.text-ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--line-clamp-mobile);\n  text-overflow: ellipsis;\n  white-space: initial;\n}\n\nnav.semibold > ol > li > a:not(.missing-path),\nnav.semibold > ol > li > button {\n  font-weight: var(--font-sb);\n  text-decoration: none;\n}\n\nnav.underlined a,\nnav.underlined button {\n  text-decoration: underline;\n}\n\nz-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  display: block;\n  fill: var(--color-link-primary);\n}\n\nz-icon.separator {\n  --z-icon-width: 10px;\n  --z-icon-height: 10px;\n\n  fill: var(--gray500);\n}\n\nbutton.dots {\n  display: inline-block;\n  color: var(--color-link-primary);\n  cursor: pointer;\n}\n\n.hidden-paths-popover .popover-content {\n  max-width: 302px;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  text-align: left;\n}\n\n.hidden-paths-popover .popover-content a {\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\n.hidden-paths-popover {\n  --z-popover-theme--surface: var(--color-surface02);\n  --z-popover-padding: 0;\n}\n\n.hidden-paths-popover::before,\n.full-path-tooltip::before {\n  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n.full-path-tooltip {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-padding: 0;\n}\n\n.tooltip-content {\n  padding: 0 var(--space-unit);\n  font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n  .text-ellipsis {\n    -webkit-line-clamp: var(--line-clamp-popover);\n  }\n}\n\n@media (max-width: 767px) {\n  li a {\n    display: flex;\n    align-items: center;\n    column-gap: var(--space-unit);\n  }\n}\n","import {Component, Prop, h, State, Host, Listen, Element, Event, Watch, EventEmitter} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb();\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb();\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n      this.hasOverflow = true;\n    }\n  }\n\n  private initializeBreadcrumb(): void {\n    if (this.viewPortWidth === Device.MOBILE) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = [...this.pathsList];\n    this.collapsedElements = [];\n    if (this.pathsList.length > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    for (let i = 0; i < this.pathsList.length; i++) {\n      if (this.pathsList[i].text.length <= this.truncateChar) {\n        continue;\n      }\n\n      if (this.truncatePosition > 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n        this.pathsList.splice(0, this.truncatePosition);\n        this.truncatePosition = 0;\n\n        return;\n      } else if (this.truncatePosition === 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n        this.pathsList.splice(0, this.truncatePosition + 1);\n        this.truncatePosition = null;\n\n        return;\n      }\n\n      if (i !== this.pathsList.length - 1) {\n        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n        this.currentEllipsisText = this.pathsList[i].text;\n        this.pathsList[i].text = truncatedString;\n        this.pathsList[i].hasTooltip = true;\n        this.truncatePosition = i;\n\n        return;\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, maxLength: number): string {\n    if (str.length <= maxLength) {\n      return str;\n    }\n\n    return str.substring(0, maxLength - 1) + \"&mldr;\";\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderHomepageNode(): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={this.homepageNode.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n          innerHTML={\n            this.homepageVariant === BreadcrumbHomepageVariant.ICON\n              ? `<z-icon name=\"home\" />`\n              : this.homepageNode.text || \"Home\"\n          }\n        />\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    return (\n      <li>\n        <z-popover\n          class=\"hidden-paths-popover\"\n          ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n          bindTo={this.triggerButton}\n          position={PopoverPosition.BOTTOM_RIGHT}\n          closable\n          showArrow\n        >\n          <div class=\"popover-content\">\n            <z-list>\n              <z-list-group size={ListSize.SMALL}>\n                {this.collapsedElements.map((item, index, array) => {\n                  return (\n                    <div>\n                      <z-list-element clickable>\n                        <a\n                          class=\"text-ellipsis\"\n                          href={item.path}\n                          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                          onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          innerHTML={item.text}\n                        />\n                      </z-list-element>\n                      {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                    </div>\n                  );\n                })}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n        <button\n          class=\"dots\"\n          ref={(el) => (this.triggerButton = el)}\n          aria-label=\"Mostra più breadcrumb\"\n          aria-haspopup=\"true\"\n          onClick={() => {\n            this.togglePopover();\n          }}\n          onKeyDown={(e) => {\n            handleKeyboardSubmit(e, this.togglePopover.bind(this));\n            setTimeout(() => {\n              this.anchorElements[0].focus();\n            }, 100);\n          }}\n          innerHTML=\"&mldr;\"\n        ></button>\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private renderMobileItems(): HTMLLIElement {\n    // show only the second to last element\n    const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n    if (!secondToLastPath) {\n      return;\n    }\n\n    return (\n      <li>\n        <a\n          aria-current={secondToLastPath.path ? undefined : \"page\"}\n          href={secondToLastPath.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n        >\n          <z-icon name=\"chevron-left\" />\n          <span\n            class={{\n              \"missing-path\": !secondToLastPath.path,\n              \"text-ellipsis\": true,\n            }}\n          >\n            {secondToLastPath.text}\n          </span>\n        </a>\n      </li>\n    );\n  }\n\n  private renderItems(): HTMLElement[] {\n    let trigger;\n\n    return [\n      this.renderHomepageNode(),\n      this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n      ...this.pathsList.map((item, index) => (\n        <li>\n          {item.hasTooltip && (\n            <z-popover\n              class=\"full-path-tooltip\"\n              bindTo={trigger}\n              open={this.popoverEllipsisOpen}\n              position={PopoverPosition.BOTTOM_RIGHT}\n              closable={false}\n              showArrow\n            >\n              <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n            </z-popover>\n          )}\n          <a\n            class={{\"missing-path\": !item.path}}\n            ref={(val) => (trigger = val)}\n            aria-current={item.path ? undefined : \"page\"}\n            href={item.path}\n            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n            onMouseOver={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = true;\n              }\n            }}\n            onMouseLeave={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = false;\n              }\n            }}\n            innerHTML={item.text}\n          />\n          {index !== this.pathsList.length - 1 && (\n            <z-icon\n              class=\"separator\"\n              name=\"chevron-right\"\n            />\n          )}\n        </li>\n      )),\n    ];\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        <nav\n          ref={(val) => (this.wrapElement = val)}\n          aria-label=\"Breadcrumb\"\n          class={{\n            semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n            underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          }}\n        >\n          <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-breadcrumb.entry.js","mappings":"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","names":[],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --line-clamp-popover: 0;\n  --line-clamp-mobile: 1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nnav {\n  display: flex;\n  align-items: center;\n}\n\nol {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  column-gap: var(--space-unit);\n  list-style: none;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  column-gap: var(--space-unit);\n}\n\nol li > a,\nol li > button {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\na:focus,\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na {\n  color: var(--color-link-primary);\n  white-space: nowrap;\n}\n\na.missing-path {\n  color: var(--color-default-text);\n}\n\n.text-ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--line-clamp-mobile);\n  text-overflow: ellipsis;\n  white-space: initial;\n}\n\nnav.semibold > ol > li > a:not(.missing-path),\nnav.semibold > ol > li > button {\n  font-weight: var(--font-sb);\n  text-decoration: none;\n}\n\nnav.underlined a,\nnav.underlined button {\n  text-decoration: underline;\n}\n\nz-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  display: block;\n  fill: var(--color-link-primary);\n}\n\nz-icon.separator {\n  --z-icon-width: 10px;\n  --z-icon-height: 10px;\n\n  fill: var(--gray500);\n}\n\nbutton.dots {\n  display: inline-block;\n  color: var(--color-link-primary);\n  cursor: pointer;\n}\n\n.hidden-paths-popover .popover-content {\n  max-width: 302px;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  text-align: left;\n}\n\n.hidden-paths-popover .popover-content a {\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\n.hidden-paths-popover {\n  --z-popover-theme--surface: var(--color-surface02);\n  --z-popover-padding: 0;\n}\n\n.hidden-paths-popover::before,\n.full-path-tooltip::before {\n  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n.full-path-tooltip {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-padding: 0;\n}\n\n.tooltip-content {\n  padding: 0 var(--space-unit);\n  font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n  .text-ellipsis {\n    -webkit-line-clamp: var(--line-clamp-popover);\n  }\n}\n\n@media (max-width: 767px) {\n  li a {\n    display: flex;\n    align-items: center;\n    column-gap: var(--space-unit);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb();\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb();\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n      this.hasOverflow = true;\n    }\n  }\n\n  private initializeBreadcrumb(): void {\n    if (this.viewPortWidth === Device.MOBILE) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = [...this.pathsList];\n    this.collapsedElements = [];\n    if (this.pathsList.length > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    for (let i = 0; i < this.pathsList.length; i++) {\n      if (this.pathsList[i].text.length <= this.truncateChar) {\n        continue;\n      }\n\n      if (this.truncatePosition > 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n        this.pathsList.splice(0, this.truncatePosition);\n        this.truncatePosition = 0;\n\n        return;\n      } else if (this.truncatePosition === 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n        this.pathsList.splice(0, this.truncatePosition + 1);\n        this.truncatePosition = null;\n\n        return;\n      }\n\n      if (i !== this.pathsList.length - 1) {\n        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n        this.currentEllipsisText = this.pathsList[i].text;\n        this.pathsList[i].text = truncatedString;\n        this.pathsList[i].hasTooltip = true;\n        this.truncatePosition = i;\n\n        return;\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, maxLength: number): string {\n    if (str.length <= maxLength) {\n      return str;\n    }\n\n    return str.substring(0, maxLength - 1) + \"&mldr;\";\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderHomepageNode(): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={this.homepageNode.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n          innerHTML={\n            this.homepageVariant === BreadcrumbHomepageVariant.ICON\n              ? `<z-icon name=\"home\" />`\n              : this.homepageNode.text || \"Home\"\n          }\n        />\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    return (\n      <li>\n        <z-popover\n          class=\"hidden-paths-popover\"\n          ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n          bindTo={this.triggerButton}\n          position={PopoverPosition.BOTTOM_RIGHT}\n          closable\n          showArrow\n        >\n          <div class=\"popover-content\">\n            <z-list>\n              <z-list-group size={ListSize.SMALL}>\n                {this.collapsedElements.map((item, index, array) => {\n                  return (\n                    <div>\n                      <z-list-element clickable>\n                        <a\n                          class=\"text-ellipsis\"\n                          href={item.path}\n                          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                          onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          innerHTML={item.text}\n                        />\n                      </z-list-element>\n                      {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                    </div>\n                  );\n                })}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n        <button\n          class=\"dots\"\n          ref={(el) => (this.triggerButton = el)}\n          aria-label=\"Mostra più breadcrumb\"\n          aria-haspopup=\"true\"\n          onClick={() => {\n            this.togglePopover();\n          }}\n          onKeyDown={(e) => {\n            handleKeyboardSubmit(e, this.togglePopover.bind(this));\n            setTimeout(() => {\n              this.anchorElements[0].focus();\n            }, 100);\n          }}\n          innerHTML=\"&mldr;\"\n        ></button>\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private renderMobileItems(): HTMLLIElement {\n    // show only the second to last element\n    const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n    if (!secondToLastPath) {\n      return;\n    }\n\n    return (\n      <li>\n        <a\n          aria-current={secondToLastPath.path ? undefined : \"page\"}\n          href={secondToLastPath.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n        >\n          <z-icon name=\"chevron-left\" />\n          <span\n            class={{\n              \"missing-path\": !secondToLastPath.path,\n              \"text-ellipsis\": true,\n            }}\n          >\n            {secondToLastPath.text}\n          </span>\n        </a>\n      </li>\n    );\n  }\n\n  private renderItems(): HTMLElement[] {\n    let trigger;\n\n    return [\n      this.renderHomepageNode(),\n      this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n      ...this.pathsList.map((item, index) => (\n        <li>\n          {item.hasTooltip && (\n            <z-popover\n              class=\"full-path-tooltip\"\n              bindTo={trigger}\n              open={this.popoverEllipsisOpen}\n              position={PopoverPosition.BOTTOM_RIGHT}\n              closable={false}\n              showArrow\n            >\n              <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n            </z-popover>\n          )}\n          <a\n            class={{\"missing-path\": !item.path}}\n            ref={(val) => (trigger = val)}\n            aria-current={item.path ? undefined : \"page\"}\n            href={item.path}\n            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n            onMouseOver={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = true;\n              }\n            }}\n            onMouseLeave={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = false;\n              }\n            }}\n            innerHTML={item.text}\n          />\n          {index !== this.pathsList.length - 1 && (\n            <z-icon\n              class=\"separator\"\n              name=\"chevron-right\"\n            />\n          )}\n        </li>\n      )),\n    ];\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        <nav\n          ref={(val) => (this.wrapElement = val)}\n          aria-label=\"Breadcrumb\"\n          class={{\n            semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n            underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          }}\n        >\n          <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-f16bc2ca.js';
+import { r as registerInstance, c as createEvent, h } from './index-ab5f1eaa.js';
 import { t as tabletBreakpoint } from './breakpoints-680e0e56.js';
 
 const stylesCss = "button{display:flex;max-width:100%;height:36px;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{border-color:var(--color-primary01);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button.selected{border-color:var(--color-active-primary);background-color:var(--color-active-primary);color:var(--color-text-inverse);fill:var(--color-text-inverse)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}";
@@ -42,7 +42,7 @@ const ZButtonSort = class {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '444ce93c134cb613b64f1ebd82f8744b7dcd38f2', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '586d7950170a1d79bf495b00f405fdfcd8f43a0d', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'eada0327e1a5117958be3147dc1c134338759d92', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '03bf71c7f7670ba162ca24c2d455d7454677793c', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'd2ec9963ebe5b404a78af6fe3f0d228583dce23b', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: 'ec1021febf46cd3a012af1142e74157e16e6b363', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '84013f6114589408dc62323285a1441c94fc9ddf', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'bc938175d5453e7c59f577b92452d63658417e0a', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '10fba0801dcbc47569e79c81179d7a485dc3582e', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '51035628c557620d4681db63a6a1b6080b57275a', name: "caret-up-down", width: 16, height: 16 })));
     }
 };
 ZButtonSort.style = ZButtonSortStyle0;

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

@@ -1 +1 @@
-{"file":"z-button-sort.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,g6CAAg6C,CAAC;AACn7C,0BAAe,SAAS;;MCMX,WAAW;;;;;;;;4BAmBE,KAAK;6BAIJ,KAAK;0BAIP,KAAK;uBAIR,IAAI;4BAGT,KAAK;;IAQZ,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,gBAAgB,EAAE;YACrE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;KACF;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;KACjF;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,+DACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAC,EAClC,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,IAEzC,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,KAAK,EAAC,UAAU,IAEf,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CACzD,EACP,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,OAAO,GAAG,CAAQ,EACnE,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAQ,EACjF,+DACE,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,EACT;KACH;;;;;;","names":[],"sources":["src/components/buttons/z-button-sort/styles.css?tag=z-button-sort&encapsulation=shadow","src/components/buttons/z-button-sort/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  max-width: 100%;\n  height: 36px;\n  align-items: center;\n  padding: 0 var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-primary01);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  border-color: var(--color-primary01);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton.selected {\n  border-color: var(--color-active-primary);\n  background-color: var(--color-active-primary);\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n\nbutton > span.ellipsis {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nbutton > span.counter {\n  margin-right: calc(var(--space-unit) * 2);\n  margin-left: calc(var(--space-unit) / 2);\n}\n\nbutton > span.sort {\n  margin-right: calc(var(--space-unit) / 2);\n  white-space: nowrap;\n}\n\nbutton > span {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  button {\n    max-width: 325px;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  button {\n    max-width: 490px;\n  }\n}\n","import {Component, Prop, State, h, Event, EventEmitter} from \"@stencil/core\";\nimport {tabletBreakpoint} from \"../../../constants/breakpoints\";\n@Component({\n  tag: \"z-button-sort\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZButtonSort {\n  /** id, should be unique */\n  @Prop()\n  buttonid: string;\n\n  /** label content (ascending) */\n  @Prop()\n  label: string;\n\n  /** label content (descending) */\n  @Prop()\n  desclabel?: string;\n\n  /** occurrences counter (optional) */\n  @Prop()\n  counter?: number;\n\n  /** sort label content (ascending) (optional) */\n  @Prop()\n  sortlabelasc?: string = \"A-Z\";\n\n  /** sort label content (descending) (optional) */\n  @Prop()\n  sortlabeldesc?: string = \"Z-A\";\n\n  /** selected flag (optional) */\n  @Prop({mutable: true})\n  isselected?: boolean = false;\n\n  /** sortable flag (optional) */\n  @Prop({mutable: true})\n  sortasc?: boolean = true;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLSpanElement;\n\n  /** sorting direction click event, returns `buttonid` and `sortAsc` */\n  @Event()\n  buttonSortClick: EventEmitter;\n\n  private emitButtonSortClick(): void {\n    if (!this.isselected) {\n      this.isselected = true;\n    } else {\n      this.sortasc = !this.sortasc;\n    }\n    this.buttonSortClick.emit({\n      buttonid: this.buttonid,\n      sortAsc: this.sortasc,\n    });\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private setButtonTitle(): string {\n    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : \"\";\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        title={this.setButtonTitle()}\n        id={this.buttonid}\n        class={{selected: this.isselected}}\n        onClick={() => this.emitButtonSortClick()}\n      >\n        <span\n          ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n          class=\"ellipsis\"\n        >\n          {!this.sortasc && this.desclabel ? this.desclabel : this.label}\n        </span>\n        <span class=\"counter\">{this.counter && ` (${this.counter})`}</span>\n        <span class=\"sort\">{this.sortasc ? this.sortlabelasc : this.sortlabeldesc}</span>\n        <z-icon\n          name=\"caret-up-down\"\n          width={16}\n          height={16}\n        />\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-button-sort.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,g6CAAg6C,CAAC;AACn7C,0BAAe,SAAS;;MCMX,WAAW;;;;;;;;4BAmBE,KAAK;6BAIJ,KAAK;0BAIP,KAAK;uBAIR,IAAI;4BAGT,KAAK;;IAQZ,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,gBAAgB,EAAE;YACrE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;KACF;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;KACjF;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,+DACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAC,EAClC,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,IAEzC,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,KAAK,EAAC,UAAU,IAEf,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CACzD,EACP,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,OAAO,GAAG,CAAQ,EACnE,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAQ,EACjF,+DACE,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,EACT;KACH;;;;;;","names":[],"sources":["src/components/z-button-sort/styles.css?tag=z-button-sort&encapsulation=shadow","src/components/z-button-sort/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  max-width: 100%;\n  height: 36px;\n  align-items: center;\n  padding: 0 var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-primary01);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  border-color: var(--color-primary01);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton.selected {\n  border-color: var(--color-active-primary);\n  background-color: var(--color-active-primary);\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n\nbutton > span.ellipsis {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nbutton > span.counter {\n  margin-right: calc(var(--space-unit) * 2);\n  margin-left: calc(var(--space-unit) / 2);\n}\n\nbutton > span.sort {\n  margin-right: calc(var(--space-unit) / 2);\n  white-space: nowrap;\n}\n\nbutton > span {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  button {\n    max-width: 325px;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  button {\n    max-width: 490px;\n  }\n}\n","import {Component, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {tabletBreakpoint} from \"../../constants/breakpoints\";\n@Component({\n  tag: \"z-button-sort\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZButtonSort {\n  /** id, should be unique */\n  @Prop()\n  buttonid: string;\n\n  /** label content (ascending) */\n  @Prop()\n  label: string;\n\n  /** label content (descending) */\n  @Prop()\n  desclabel?: string;\n\n  /** occurrences counter (optional) */\n  @Prop()\n  counter?: number;\n\n  /** sort label content (ascending) (optional) */\n  @Prop()\n  sortlabelasc?: string = \"A-Z\";\n\n  /** sort label content (descending) (optional) */\n  @Prop()\n  sortlabeldesc?: string = \"Z-A\";\n\n  /** selected flag (optional) */\n  @Prop({mutable: true})\n  isselected?: boolean = false;\n\n  /** sortable flag (optional) */\n  @Prop({mutable: true})\n  sortasc?: boolean = true;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLSpanElement;\n\n  /** sorting direction click event, returns `buttonid` and `sortAsc` */\n  @Event()\n  buttonSortClick: EventEmitter;\n\n  private emitButtonSortClick(): void {\n    if (!this.isselected) {\n      this.isselected = true;\n    } else {\n      this.sortasc = !this.sortasc;\n    }\n    this.buttonSortClick.emit({\n      buttonid: this.buttonid,\n      sortAsc: this.sortasc,\n    });\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private setButtonTitle(): string {\n    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : \"\";\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        title={this.setButtonTitle()}\n        id={this.buttonid}\n        class={{selected: this.isselected}}\n        onClick={() => this.emitButtonSortClick()}\n      >\n        <span\n          ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n          class=\"ellipsis\"\n        >\n          {!this.sortasc && this.desclabel ? this.desclabel : this.label}\n        </span>\n        <span class=\"counter\">{this.counter && ` (${this.counter})`}</span>\n        <span class=\"sort\">{this.sortasc ? this.sortlabelasc : this.sortlabeldesc}</span>\n        <z-icon\n          name=\"caret-up-down\"\n          width={16}\n          height={16}\n        />\n      </button>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-f16bc2ca.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-ab5f1eaa.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:-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)}";

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

@@ -1 +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}
+{"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, Element, Host, Prop, State, h} 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,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-f16bc2ca.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-ab5f1eaa.js';
 import { R as CarouselArrowsPosition, U as CarouselProgressMode, B as ButtonVariant } from './index-2255c6c8.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:flex;flex-direction:column;align-items:center;justify-content:center}:host([single]) .z-carousel-container{width:fit-content;max-width:100%}.z-carousel-container{display:flex;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;box-shadow:var(--z-carousel-items-shadow, none);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container ::slotted(*){scroll-snap-align:center}.z-carousel-navigation-arrow[hidden]{display:none}.z-carousel-navigation-arrow[data-direction]{position:absolute;z-index:1;bottom:50%;transform:translateY(50%)}.z-carousel-navigation-arrow[data-direction=\"next\"]{right:0}:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow{display:none}.z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:calc(var(--space-unit) * 3)}:host([arrows-position=\"bottom\"]) .z-carousel-footer{margin-top:calc(var(--space-unit) * 0.75)}.z-carousel-footer .numbers-progress,.z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}.z-carousel-footer .dots-progress{column-gap:calc(var(--space-unit) * 3)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress{margin-top:calc(var(--space-unit) * 2)}.z-carousel-footer .dots-progress button{display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);align-items:center;padding:0;border:none;margin:0;background-color:var(--color-surface03);border-radius:calc(var(--space-unit) * 3)}.z-carousel-footer .dots-progress button.current{background-color:var(--color-primary01)}.z-carousel-footer .dots-progress button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{column-gap:calc(var(--space-unit) / 2)}:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress{margin-top:var(--space-unit)}.z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}@media (min-width: 768px){:host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]){display:flex}}";