@zanichelli/albe-web-components 14.6.1 → 15.0.0-rc2

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

@@ -1,2 +0,0 @@
-import{r as registerInstance,h,a as Host}from"./index-ab5f1eaa.js";import{u as ZAriaAlertMode}from"./index-2255c6c8.js";var ZAriaAlert=function(){function a(a){registerInstance(this,a);this.mode=ZAriaAlertMode.POLITE}a.prototype.render=function(){return h(Host,{key:"3dc09efdfb273cbb3700c75f6e83112d6d158fb0","aria-live":this.mode,"aria-atomic":"true","aria-relevant":"additions"},h("slot",{key:"109c1e5fa0fa0bd7fa990c7fdb23c0f65dd6811e"}))};return a}();export{ZAriaAlert as z_aria_alert};
-//# sourceMappingURL=z-aria-alert.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["ZAriaAlert","ZAriaAlertMode","POLITE","prototype","render","h","Host","key","this","mode"],"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"],"mappings":"4HAOaA,WAAU,W,iDAGEC,eAAeC,M,CAEtCF,EAAAG,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,uDACQC,KAAKC,KAAI,cACR,OAAM,gBACJ,aAEdJ,EAAA,QAAAE,IAAA,6C,WAZe,U","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as registerInstance,h,a as Host}from"./index-ab5f1eaa.js";import{A as AvatarSize}from"./index-2255c6c8.js";var stylesCss=":host{display:-ms-inline-flexbox;display:inline-flex;overflow:hidden;-ms-flex-align:center;align-items:center;-ms-flex-pack: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{-o-object-fit:cover;object-fit:cover}";var ZAvatarStyle0=stylesCss;var ZAvatar=function(){function t(t){registerInstance(this,t);var a,e;this.size=AvatarSize.MEDIUM;this.text=undefined;this.textColor="color-white";this.backgroundColor="gray700";this.image=undefined;if(((a=this.text)===null||a===void 0?void 0:a.length)===0&&((e=this.image)===null||e===void 0?void 0:e.length)===0){console.warn("z-avatar must contain at least one prop between text and image")}}t.prototype.getTextSize=function(){if(this.size===AvatarSize.SMALL){return"5"}else if(this.size===AvatarSize.MEDIUM){return"4"}else if(this.size===AvatarSize.LARGE){return"2"}};t.prototype.render=function(){var t;var a=this;return h(Host,{key:"63564a1499f36b406dcece1fd47bb0aa8e06ed6d",class:(t={},t[this.size]=true,t["body-".concat(this.getTextSize(),"-sb")]=true,t),style:{color:"var(--".concat(this.textColor,")"),backgroundColor:"var(--".concat(this.backgroundColor,")")}},this.text&&!this.image&&h("span",{key:"9813952059608df9a5cdf74db7038aec2751dfa8"},this.text.substring(0,2)),this.image&&h("img",{key:"d918f83b5212cb7618e30a0dc040f0c312341386",src:this.image,onError:function(){return a.image=""}}))};return t}();ZAvatar.style=ZAvatarStyle0;export{ZAvatar as z_avatar};
-//# sourceMappingURL=z-avatar.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZAvatarStyle0","ZAvatar","hostRef","AvatarSize","MEDIUM","_a","this","text","length","_b","image","console","warn","prototype","getTextSize","size","SMALL","LARGE","render","_this","h","Host","key","class","_c","concat","style","color","textColor","backgroundColor","substring","src","onError"],"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"],"mappings":"oHAAA,IAAMA,UAAY,4mBAClB,IAAAC,cAAeD,U,ICOFE,QAAO,WAqBlB,SAAAA,EAAAC,G,2CAlBoBC,WAAWC,O,mCAQV,c,qBAIM,U,qBAOzB,KAAIC,EAAAC,KAAKC,QAAI,MAAAF,SAAA,SAAAA,EAAEG,UAAW,KAAKC,EAAAH,KAAKI,SAAK,MAAAD,SAAA,SAAAA,EAAED,UAAW,EAAG,CACvDG,QAAQC,KAAK,iE,EAITX,EAAAY,UAAAC,YAAA,WACN,GAAIR,KAAKS,OAASZ,WAAWa,MAAO,CAClC,MAAO,G,MACF,GAAIV,KAAKS,OAASZ,WAAWC,OAAQ,CAC1C,MAAO,G,MACF,GAAIE,KAAKS,OAASZ,WAAWc,MAAO,CACzC,MAAO,G,GAIXhB,EAAAY,UAAAK,OAAA,W,MAAA,IAAAC,EAAAb,KACE,OACEc,EAACC,KAAI,CAAAC,IAAA,2CACHC,OAAKC,EAAA,GAAGA,EAAClB,KAAKS,MAAO,KAAMS,EAAC,QAAAC,OAAQnB,KAAKQ,cAAa,QAAQ,KAAIU,GAClEE,MAAO,CACLC,MAAO,SAAAF,OAASnB,KAAKsB,UAAS,KAC9BC,gBAAiB,SAAAJ,OAASnB,KAAKuB,gBAAe,OAG/CvB,KAAKC,OAASD,KAAKI,OAASU,EAAA,QAAAE,IAAA,4CAAOhB,KAAKC,KAAKuB,UAAU,EAAG,IAC1DxB,KAAKI,OACJU,EAAA,OAAAE,IAAA,2CACES,IAAKzB,KAAKI,MACVsB,QAAS,kBAAOb,EAAKT,MAAQ,EAApB,I,WAlDD,G","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-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";var stylesCss=':host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);--z-book-card-compact-width:262px;--z-book-card-compact-height:568px}:host>article{display:block;width:100%;max-width:360px;-webkit-box-sizing:border-box;box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article div.cover{position:relative}:host>article div.cover div.img-wrapper{display:-ms-flexbox;display:flex;overflow:hidden;border:var(--border-size-small) solid var(--color-surface03);line-height:0}:host>article div.cover div.img-wrapper img{width:auto;max-width:100%;height:auto;max-height:100%;-ms-flex-item-align:end;align-self:flex-end}:host>article div.cover .ribbon{position:absolute;z-index:10;top:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * -2);display:-ms-flexbox;display:flex;max-width:100%;height:calc(var(--space-unit) * 4);-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--color-text-inverse);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host>article div.cover .ribbon.interactive:hover{cursor:pointer}:host>article div.cover .ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.cover .ribbon::before{position:absolute;bottom:-12px;left:-2px;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:16px solid transparent;content:""}:host>article div.cover .ribbon z-icon{margin-right:var(--space-unit)}:host>article div.content{margin:var(--space-unit) 0;border-radius:var(--border-radius)}:host>article .title{display:-ms-flexbox;display:flex;height:100%;-ms-flex-item-align:center;align-self:center;color:var(--color-default-text);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host>article .title *{all:unset}:host>article div.subtitle{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host>article div.authors{color:var(--color-default-text);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host>article div.isbn{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.isbn>.code{font-weight:var(--font-sb)}:host>article div.tags{display:-ms-flexbox;display:flex;overflow:hidden;max-height:32px;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host>article ::slotted([slot="tags"]){margin-bottom:var(--space-unit)}:host>article ::slotted([slot="header-cta"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-primary01-icon)}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:top;align-items:top;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover div.img-wrapper{border-radius:var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded button.show-resources{--z-icon-height:16px;--z-icon-width:16px;all:unset;display:-ms-flexbox;display:flex;width:100%;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--space-unit) * 1) 0;color:var(--color-link-primary);cursor:pointer;fill:var(--color-link-primary);font-size:var(--font-size-2);font-weight:var(--font-sb);gap:var(--space-unit)}:host>article.expanded button.show-resources:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host>article.search{width:262px;height:616px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2)}:host>article.search div.header{display:-ms-flexbox;display:flex;height:24px;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover div.img-wrapper{height:314px;border-radius:var(--border-radius)}:host>article.search .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset;font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>article.compact{width:var(--z-book-card-compact-width);height:var(--z-book-card-compact-height)}:host>article.compact.borderless{border:none}:host>article.compact div.cover div.img-wrapper{width:100%;height:calc(var(--z-book-card-compact-width) * 1.36);-webkit-box-sizing:border-box;box-sizing:border-box;border:none;background:var(--color-white);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2)}:host>article.compact div.wrapper{display:-ms-flexbox;display:flex;height:100%;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start}:host>article.compact div.content{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;padding:calc(var(--space-unit) * 2);padding-top:var(--space-unit);margin:0}:host>article.compact div.action-container{padding:calc(var(--space-unit) * 2);padding-top:0;margin-top:auto}:host>article.compact.borderless div.cover div.img-wrapper{width:var(--z-book-card-compact-width)}:host>article.compact.borderless div.content{padding:0;padding-top:var(--space-unit)}:host>article.compact.borderless div.action-container{padding:0;padding-bottom:calc(var(--space-unit) * 2)}:host>article.compact .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset}:host>article.compact .title,:host>article.compact .subtitle,:host>article.compact .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}@media (min-width: 768px){:host>article{width:100%;max-width:initial}:host>article .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0;border:0}:host>article.expanded div.wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start}:host>article.expanded div.cover div.img-wrapper{width:262px;height:356px;border:0;border:var(--border-size-medium) solid var(--color-surface03);border-right:none;background:var(--color-surface01);border-radius:var(--border-radius) 0 0 var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:auto;border-radius:0}:host>article.expanded div.content{display:-ms-flexbox;display:flex;overflow:hidden;width:100%;height:356px;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;border:var(--border-size-medium) solid var(--color-surface03);border-left:none;margin:0;background:var(--color-surface01);border-radius:0 var(--border-radius) var(--border-radius) 0}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host>article{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:initial}}@media (min-width: 1366px){:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}';var ZBookCardStyle0=stylesCss;var ZBookCard=function(){function t(t){registerInstance(this,t);this.ribbonClick=createEvent(this,"ribbonClick",7);this.variant=undefined;this.cover=undefined;this.operaTitle=undefined;this.volumeTitle=undefined;this.authors=undefined;this.isbn=undefined;this.isbnLabel="";this.ribbon=undefined;this.ribbonIcon=undefined;this.ribbonInteractive=undefined;this.borderless=undefined;this.fallbackCover=undefined;this.operaTitleTag=undefined;this.isMobile=false;this.hasResources=false;this.showResources=false}t.prototype.emitRibbonClick=function(){this.ribbonClick.emit()};t.prototype.componentWillLoad=function(){var t=this;this.id="id-".concat(randomId());var i=window.matchMedia("(max-width: ".concat(mobileBreakpoint,"px)"));this.isMobile=i.matches;i.onchange=function(i){return t.isMobile=i.matches}};t.prototype.componentDidLoad=function(){this.handleResources()};t.prototype.handleResources=function(){var t;if(this.variant!==BookCardVariant.EXPANDED||!this.isMobile){return}this.hasResources=((t=this.hostElement.querySelectorAll("[slot=resources]"))===null||t===void 0?void 0:t.length)>0};t.prototype.toggleResources=function(){this.showResources=!this.showResources};t.prototype.renderCard=function(){switch(this.variant){case BookCardVariant.EXPANDED:return this.isMobile?this.renderMobileExpandedCard():this.renderExpandedCard();case BookCardVariant.COMPACT:return this.renderCompactCard();case BookCardVariant.SEARCH:return this.renderSearchCard()}};t.prototype.renderExpandedCard=function(){return h("div",{class:"wrapper"},this.renderCover(),h("div",{class:"content"},h("div",{class:"top"},h("div",{class:"info"},h("div",{class:"left"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),h("div",{class:"right"},this.renderHeaderCtaSlot())),this.renderTagsSlot()),h("div",{class:"bottom"},this.renderResourcesSlot())))};t.prototype.renderMobileExpandedCard=function(){return h("div",{class:"wrapper"},h("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),h("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn()),this.hasResources&&h("div",{class:{footer:true,open:this.showResources,close:!this.showResources}},!this.showResources&&this.renderShowResources(),this.renderResourcesSlot(),this.showResources&&this.renderShowResources()))};t.prototype.renderSearchCard=function(){return h("div",{class:"wrapper-container"},h("div",{class:"wrapper"},h("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),h("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn())),this.renderFooterCtaSlot())};t.prototype.renderCompactCard=function(){return h("div",{class:"wrapper"},this.renderCover(),h("div",{class:"content"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),this.renderFooterCtaSlot())};t.prototype.renderCover=function(){var t=this;return h("div",{class:"cover"},this.ribbon&&this.variant!==BookCardVariant.COMPACT&&this.renderRibbon(),h("div",{class:"img-wrapper"},h("img",{src:this.cover,onError:function(){if(t.fallbackCover){t.cover=t.fallbackCover}},"aria-hidden":"true"})))};t.prototype.renderRibbon=function(){var t=this;var i=[this.ribbonIcon&&h("z-icon",{name:this.ribbonIcon,width:16,height:16,fill:"color-inverse-icon"}),h("span",null,this.ribbon)];return this.ribbonInteractive?h("button",{class:"ribbon interactive",onClick:function(){return t.emitRibbonClick()}},i):h("div",{class:"ribbon"},i)};t.prototype.renderOperaTitle=function(){var t=this.operaTitleTag?"<".concat(this.operaTitleTag,">").concat(this.operaTitle,"</").concat(this.operaTitleTag,">"):this.operaTitle;return h("div",{class:"title",innerHTML:t})};t.prototype.renderVolumeTitle=function(){return this.volumeTitle?h("div",{class:"subtitle"},this.volumeTitle):null};t.prototype.renderAuthors=function(){return this.authors?h("div",{class:"authors","aria-description":"Autori"},this.authors):null};t.prototype.renderIsbn=function(){return this.isbn?h("div",{class:"isbn"},h("span",{class:"code","aria-description":"ISBN ".concat(this.isbnLabel)},this.isbn),this.isbnLabel?h("span",{class:"label"}," ",this.isbnLabel):null):null};t.prototype.renderShowResources=function(){var t=this;return h("button",{class:"show-resources","aria-label":"Risorse del libro ".concat(this.operaTitle),"aria-expanded":this.showResources.toString(),"aria-controls":"resources-".concat(this.id),onClick:function(){return t.toggleResources()}},this.showResources?"Chiudi":"Vedi tutto",h("z-icon",{name:this.showResources?"chevron-up":"chevron-down"}))};t.prototype.renderTagsSlot=function(){return h("div",{class:"tags"},h("slot",{name:"tags"}))};t.prototype.renderHeaderCtaSlot=function(){return h("slot",{name:"header-cta"})};t.prototype.renderResourcesSlot=function(){var t=this;return h("div",{id:"resources-".concat(this.id),class:"resources"},h("slot",{name:"resources",onSlotchange:function(){return t.handleResources()}}))};t.prototype.renderFooterCtaSlot=function(){return h("div",{class:"action-container"},h("slot",{name:"footer-cta"}))};t.prototype.render=function(){var t;return h("article",{key:"93b847b7f5067c69880ea8ba283a207c8b691a2a",class:(t={},t[this.variant]=true,t.borderless=!!this.borderless,t)},this.renderCard())};Object.defineProperty(t.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();ZBookCard.style=ZBookCardStyle0;export{ZBookCard as z_book_card};
-//# sourceMappingURL=z-book-card.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZBookCardStyle0","ZBookCard","prototype","emitRibbonClick","this","ribbonClick","emit","componentWillLoad","_this","id","concat","randomId","mobileMediaQuery","window","matchMedia","mobileBreakpoint","isMobile","matches","onchange","mql","componentDidLoad","handleResources","variant","BookCardVariant","EXPANDED","hasResources","_a","hostElement","querySelectorAll","length","toggleResources","showResources","renderCard","renderMobileExpandedCard","renderExpandedCard","COMPACT","renderCompactCard","SEARCH","renderSearchCard","h","class","renderCover","renderAuthors","renderOperaTitle","renderVolumeTitle","renderIsbn","renderHeaderCtaSlot","renderTagsSlot","renderResourcesSlot","footer","open","close","renderShowResources","renderFooterCtaSlot","ribbon","renderRibbon","src","cover","onError","fallbackCover","content","ribbonIcon","name","width","height","fill","ribbonInteractive","onClick","title","operaTitleTag","operaTitle","innerHTML","volumeTitle","authors","isbn","isbnLabel","toString","onSlotchange","render","key","_b","borderless"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-var __spreadArray=this&&this.__spreadArray||function(e,i,t){if(t||arguments.length===2)for(var r=0,n=i.length,a;r<n;r++){if(a||!(r in i)){if(!a)a=Array.prototype.slice.call(i,0,r);a[r]=i[r]}}return e.concat(a||Array.prototype.slice.call(i))};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";var stylesCss=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{-webkit-box-sizing:border-box;box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ol{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0;margin:0;-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit);list-style:none}li{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-link-primary);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-link-primary)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--space-unit);-moz-column-gap:var(--space-unit);column-gap:var(--space-unit)}}";var ZBreadcrumbStyle0=stylesCss;var ZBreadcrumb=function(){function e(e){registerInstance(this,e);this.clickOnNode=createEvent(this,"clickOnNode",7);this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null;this.pathStyle=BreadcrumbPathStyle.UNDERLINED;this.homepageVariant=BreadcrumbHomepageVariant.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.viewPortWidth=undefined;this.hasOverflow=false;this.popoverEllipsisOpen=false}e.prototype.handleResize=function(){this.viewPortWidth=getDevice();if(this.viewPortWidth!==Device.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}};e.prototype.handlePropChange=function(){this.initializeBreadcrumb()};e.prototype.handleResizeUp=function(e,i){if(e===Device.MOBILE||i===Device.MOBILE&&e===Device.TABLET||i===Device.MOBILE&&e===Device.DESKTOP||i===Device.MOBILE&&e===Device.DESKTOP_WIDE||i===Device.TABLET&&e===Device.DESKTOP||i===Device.TABLET&&e===Device.DESKTOP_WIDE||i===Device.DESKTOP&&e===Device.DESKTOP_WIDE){this.initializeBreadcrumb()}};e.prototype.componentWillLoad=function(){this.viewPortWidth=getDevice();this.initializeBreadcrumb()};e.prototype.componentWillRender=function(){if(this.viewPortWidth!==Device.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}};e.prototype.componentDidRender=function(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==Device.MOBILE&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}};e.prototype.initializeBreadcrumb=function(){if(this.viewPortWidth===Device.MOBILE){this.pathsList=this.getPathsItemsList().filter((function(e){return!!e.path}))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=__spreadArray([],this.pathsList,true);this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}};e.prototype.checkEllipsisOrOverflowMenu=function(){var e,i;for(var t=0;t<this.pathsList.length;t++){if(this.pathsList[t].text.length<=this.truncateChar){continue}if(this.truncatePosition>0){(e=this.collapsedElements).push.apply(e,this.pathListCopy.splice(0,this.truncatePosition));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}else if(this.truncatePosition===0){(i=this.collapsedElements).push.apply(i,this.pathListCopy.splice(0,this.truncatePosition+1));this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}if(t!==this.pathsList.length-1){var r=this.truncateWithEllipsis(this.pathsList[t].text,this.truncateChar);this.currentEllipsisText=this.pathsList[t].text;this.pathsList[t].text=r;this.pathsList[t].hasTooltip=true;this.truncatePosition=t;return}}};e.prototype.truncateWithEllipsis=function(e,i){if(e.length<=i){return e}return e.substring(0,i-1)+"&mldr;"};e.prototype.getPathsItemsList=function(){return Array.from(this.hostElement.children).map((function(e){return{text:e.textContent,path:e.href,hasTooltip:false}}))};e.prototype.renderHomepageNode=function(){var e=this;return h("li",null,h("a",{class:{"homepage-text":this.homepageVariant===BreadcrumbHomepageVariant.TEXT},href:this.homepageNode.path,onClick:function(i){return e.handlePreventFollowUrl(i,e.homepageNode)},innerHTML:this.homepageVariant===BreadcrumbHomepageVariant.ICON?'<z-icon name="home" />':this.homepageNode.text||"Home"}),this.pathsList.length>0&&h("z-icon",{class:"separator",name:"chevron-right"}))};e.prototype.togglePopover=function(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}};e.prototype.handlePreventFollowUrl=function(e,i){if(this.preventFollowUrl){e.preventDefault();this.clickOnNode.emit(i.path)}};e.prototype.handleOverflowMenuAccessibility=function(e){var i=this.anchorElements.length;if(e.key===KeyboardCode.TAB){e.preventDefault();return}e.stopPropagation();var t=[KeyboardCode.ARROW_DOWN,KeyboardCode.ARROW_UP];if(t.includes(e.key)){e.preventDefault();if(e.key===KeyboardCode.ARROW_DOWN){this.currentIndex=i===this.currentIndex+1?0:this.currentIndex+1}if(e.key===KeyboardCode.ARROW_UP){this.currentIndex=this.currentIndex<=0?i-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(e.key===KeyboardCode.ESC){this.triggerButton.focus()}};e.prototype.renderOverflowMenu=function(){var e=this;return h("li",null,h("z-popover",{class:"hidden-paths-popover",ref:function(i){return e.collapsedElementsRef=i},bindTo:this.triggerButton,position:PopoverPosition.BOTTOM_RIGHT,closable:true,showArrow:true},h("div",{class:"popover-content"},h("z-list",null,h("z-list-group",{size:ListSize.SMALL},this.collapsedElements.map((function(i,t,r){return h("div",null,h("z-list-element",{clickable:true},h("a",{class:"text-ellipsis",href:i.path,onClick:function(t){return e.handlePreventFollowUrl(t,i)},onKeyDown:function(i){return e.handleOverflowMenuAccessibility(i)},innerHTML:i.text})),t<r.length-1&&h("z-divider",{color:"color-surface03"}))})))))),h("button",{class:"dots",ref:function(i){return e.triggerButton=i},"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:function(){e.togglePopover()},onKeyDown:function(i){handleKeyboardSubmit(i,e.togglePopover.bind(e));setTimeout((function(){e.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&h("z-icon",{class:"separator",name:"chevron-right"}))};e.prototype.renderMobileItems=function(){var e=this;var i=this.pathsList[this.pathsList.length-1];if(!i){return}return h("li",null,h("a",{"aria-current":i.path?undefined:"page",href:i.path,onClick:function(t){return e.handlePreventFollowUrl(t,i)}},h("z-icon",{name:"chevron-left"}),h("span",{class:{"missing-path":!i.path,"text-ellipsis":true}},i.text)))};e.prototype.renderItems=function(){var e=this;var i;return __spreadArray([this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu()],this.pathsList.map((function(t,r){return h("li",null,t.hasTooltip&&h("z-popover",{class:"full-path-tooltip",bindTo:i,open:e.popoverEllipsisOpen,position:PopoverPosition.BOTTOM_RIGHT,closable:false,showArrow:true},h("span",{class:"tooltip-content"},e.currentEllipsisText)),h("a",{class:{"missing-path":!t.path},ref:function(e){return i=e},"aria-current":t.path?undefined:"page",href:t.path,onClick:function(i){return e.handlePreventFollowUrl(i,t)},onMouseOver:function(){if(t.hasTooltip){e.popoverEllipsisOpen=true}},onMouseLeave:function(){if(t.hasTooltip){e.popoverEllipsisOpen=false}},innerHTML:t.text}),r!==e.pathsList.length-1&&h("z-icon",{class:"separator",name:"chevron-right"}))})),true)};e.prototype.render=function(){var e=this;return h(Host,{key:"bba9d5bf2b1316c4e29eebcc00cb23c3e6635a36",style:{"--line-clamp-popover":"".concat(this.overflowMenuItemRows)}},h("nav",{key:"4d916bcbb730f4e3cd0d051b630336db7222aa30",ref:function(i){return e.wrapElement=i},"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===BreadcrumbPathStyle.SEMIBOLD,underlined:this.pathStyle===BreadcrumbPathStyle.UNDERLINED}},h("ol",{key:"654d8e9cad8417a155f1bc349b7b16687c8db96e"},this.viewPortWidth===Device.MOBILE?this.renderMobileItems():this.renderItems())))};Object.defineProperty(e.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{maxNodesToShow:["handlePropChange"],viewPortWidth:["handleResizeUp"]}},enumerable:false,configurable:true});return e}();ZBreadcrumb.style=ZBreadcrumbStyle0;export{ZBreadcrumb as z_breadcrumb};
-//# sourceMappingURL=z-breadcrumb.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZBreadcrumbStyle0","ZBreadcrumb","this","collapsedElements","currentIndex","truncatePosition","BreadcrumbPathStyle","UNDERLINED","BreadcrumbHomepageVariant","ICON","prototype","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","hasOverflow","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","pathsList","getPathsItemsList","filter","item","path","homepageNode","shift","pathListCopy","__spreadArray","length","maxNodesToShow","splice","i","text","truncateChar","_a","push","apply","_b","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","maxLength","substring","children","map","textContent","href","renderHomepageNode","_this","h","class","homepageVariant","TEXT","onClick","e","handlePreventFollowUrl","innerHTML","name","togglePopover","open","preventFollowUrl","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","renderOverflowMenu","ref","val","bindTo","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","renderMobileItems","secondToLastPath","undefined","renderItems","trigger","popoverEllipsisOpen","onMouseOver","onMouseLeave","render","Host","style","concat","overflowMenuItemRows","semibold","pathStyle","SEMIBOLD","underlined"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as registerInstance,c as createEvent,h}from"./index-ab5f1eaa.js";import{t as tabletBreakpoint}from"./breakpoints-680e0e56.js";var stylesCss="button{display:-ms-flexbox;display:flex;max-width:100%;height:36px;-ms-flex-align:center;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);-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);-webkit-box-shadow:var(--shadow-2);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}}";var ZButtonSortStyle0=stylesCss;var ZButtonSort=function(){function r(r){registerInstance(this,r);this.buttonSortClick=createEvent(this,"buttonSortClick",7);this.buttonid=undefined;this.label=undefined;this.desclabel=undefined;this.counter=undefined;this.sortlabelasc="A-Z";this.sortlabeldesc="Z-A";this.isselected=false;this.sortasc=true;this.allowTooltip=false}r.prototype.emitButtonSortClick=function(){if(!this.isselected){this.isselected=true}else{this.sortasc=!this.sortasc}this.buttonSortClick.emit({buttonid:this.buttonid,sortAsc:this.sortasc})};r.prototype.componentDidLoad=function(){if(this.elementHasEllipsis()&&window.innerWidth>tabletBreakpoint){this.allowTooltip=true}};r.prototype.setButtonTitle=function(){return this.allowTooltip?"".concat(this.sortasc?this.label:this.desclabel):""};r.prototype.elementHasEllipsis=function(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth};r.prototype.render=function(){var r=this;return h("button",{key:"ec1021febf46cd3a012af1142e74157e16e6b363",title:this.setButtonTitle(),id:this.buttonid,class:{selected:this.isselected},onClick:function(){return r.emitButtonSortClick()}},h("span",{key:"84013f6114589408dc62323285a1441c94fc9ddf",ref:function(t){return r.ellipsis=t},class:"ellipsis"},!this.sortasc&&this.desclabel?this.desclabel:this.label),h("span",{key:"bc938175d5453e7c59f577b92452d63658417e0a",class:"counter"},this.counter&&" (".concat(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}))};return r}();ZButtonSort.style=ZButtonSortStyle0;export{ZButtonSort as z_button_sort};
-//# sourceMappingURL=z-button-sort.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZButtonSortStyle0","ZButtonSort","prototype","emitButtonSortClick","this","isselected","sortasc","buttonSortClick","emit","buttonid","sortAsc","componentDidLoad","elementHasEllipsis","window","innerWidth","tabletBreakpoint","allowTooltip","setButtonTitle","concat","label","desclabel","ellipsis","offsetWidth","scrollWidth","render","_this","h","key","title","id","class","selected","onClick","ref","el","counter","sortlabelasc","sortlabeldesc","name","width","height"],"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"],"mappings":"uIAAA,IAAMA,UAAY,6hDAClB,IAAAC,kBAAeD,U,ICMFE,YAAW,W,iNAmBE,M,mBAIC,M,gBAIF,M,aAIH,K,kBAGL,K,CAQPA,EAAAC,UAAAC,oBAAA,WACN,IAAKC,KAAKC,WAAY,CACpBD,KAAKC,WAAa,I,KACb,CACLD,KAAKE,SAAWF,KAAKE,O,CAEvBF,KAAKG,gBAAgBC,KAAK,CACxBC,SAAUL,KAAKK,SACfC,QAASN,KAAKE,S,EAIlBL,EAAAC,UAAAS,iBAAA,WACE,GAAIP,KAAKQ,sBAAwBC,OAAOC,WAAaC,iBAAkB,CACrEX,KAAKY,aAAe,I,GAIhBf,EAAAC,UAAAe,eAAA,WACN,OAAOb,KAAKY,aAAe,GAAAE,OAAGd,KAAKE,QAAUF,KAAKe,MAAQf,KAAKgB,WAAc,E,EAGvEnB,EAAAC,UAAAU,mBAAA,WACN,OAAOR,KAAKiB,SAASC,YAAclB,KAAKiB,SAASE,W,EAGnDtB,EAAAC,UAAAsB,OAAA,eAAAC,EAAArB,KACE,OACEsB,EAAA,UAAAC,IAAA,2CACEC,MAAOxB,KAAKa,iBACZY,GAAIzB,KAAKK,SACTqB,MAAO,CAACC,SAAU3B,KAAKC,YACvB2B,QAAS,WAAM,OAAAP,EAAKtB,qBAAL,GAEfuB,EAAA,QAAAC,IAAA,2CACEM,IAAK,SAACC,GAAE,OAAMT,EAAKJ,SAAWa,CAAtB,EACRJ,MAAM,aAEJ1B,KAAKE,SAAWF,KAAKgB,UAAYhB,KAAKgB,UAAYhB,KAAKe,OAE3DO,EAAA,QAAAC,IAAA,2CAAMG,MAAM,WAAW1B,KAAK+B,SAAW,KAAAjB,OAAKd,KAAK+B,QAAO,MACxDT,EAAA,QAAAC,IAAA,2CAAMG,MAAM,QAAQ1B,KAAKE,QAAUF,KAAKgC,aAAehC,KAAKiC,eAC5DX,EAAA,UAAAC,IAAA,2CACEW,KAAK,gBACLC,MAAO,GACPC,OAAQ,K,WAvFM,G","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as registerInstance,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{C as CardVariant}from"./index-2255c6c8.js";var 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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){-webkit-box-sizing:border-box;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%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;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{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){-webkit-box-shadow:none !important;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){-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){-webkit-box-shadow:var(--shadow-4);box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){-webkit-box-shadow:none;box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;-ms-flex-pack:end;justify-content:flex-end;padding:var(--space-unit);background-image:-webkit-gradient(linear, left bottom, left top, from(rgb(0 0 0 / 100%)), to(rgb(0 0 0 / 0%)));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)}';var ZCardStyle0=stylesCss;var ZCard=function(){function t(t){registerInstance(this,t);this.variant=undefined;this.coverIcon=undefined;this.showShadow=false;this.clickable=false;this.hasCoverImage=undefined}t.prototype.componentWillLoad=function(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null};t.prototype.renderColorCoverCard=function(){return[h("div",{class:"cover-container"},h("div",{class:"color-cover"},h("div",{class:"cover-content"},h("slot",{name:"metadata"}),h("slot",{name:"title"})))),h("div",{class:"content"},h("slot",{name:"text"}),h("div",{class:"actions"},h("slot",{name:"action"})))]};t.prototype.renderContentDiv=function(){return h("div",{class:"content"},h("slot",{name:"metadata"}),h("slot",{name:"title"}),h("slot",{name:"text"}),h("div",{class:"actions"},h("slot",{name:"action"})))};t.prototype.render=function(){if(this.variant===CardVariant.TEXT){return h(Host,null,this.renderContentDiv())}if(this.variant===CardVariant.OVERLAY||this.hasCoverImage){return h(Host,null,h("div",{class:"cover-container"},this.hasCoverImage&&[h("slot",{name:"cover"}),this.variant!==CardVariant.OVERLAY&&this.coverIcon&&h("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&h("div",{class:"color-cover"})),this.renderContentDiv())}return h(Host,null,this.renderColorCoverCard())};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();ZCard.style=ZCardStyle0;export{ZCard as z_card};
-//# sourceMappingURL=z-card.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZCardStyle0","ZCard","prototype","componentWillLoad","this","hasCoverImage","host","querySelector","renderColorCoverCard","h","class","name","renderContentDiv","render","variant","CardVariant","TEXT","Host","OVERLAY","coverIcon"],"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"],"mappings":"qIAAA,IAAMA,UAAY,k+IAClB,IAAAC,YAAeD,U,ICsBFE,MAAK,W,uGAeH,M,eAID,M,6BAOZA,EAAAC,UAAAC,kBAAA,WACEC,KAAKC,cAAgBD,KAAKE,KAAKC,cAAc,oBAAsB,I,EAO7DN,EAAAC,UAAAM,qBAAA,WACN,MAAO,CACLC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,eACTD,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,aAIjBF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,a,EASXV,EAAAC,UAAAU,iBAAA,WACN,OACEH,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,Y,EAMnBV,EAAAC,UAAAW,OAAA,WACE,GAAIT,KAAKU,UAAYC,YAAYC,KAAM,CACrC,OAAOP,EAACQ,KAAI,KAAEb,KAAKQ,mB,CAGrB,GAAIR,KAAKU,UAAYC,YAAYG,SAAWd,KAAKC,cAAe,CAC9D,OACEI,EAACQ,KAAI,KACHR,EAAA,OAAKC,MAAM,mBACRN,KAAKC,eAAiB,CACrBI,EAAA,QAAME,KAAK,UACXP,KAAKU,UAAYC,YAAYG,SAAWd,KAAKe,WAAaV,EAAA,UAAQE,KAAMP,KAAKe,cAE7Ef,KAAKC,eAAiBI,EAAA,OAAKC,MAAM,iBAEpCN,KAAKQ,mB,CAKZ,OAAOH,EAACQ,KAAI,KAAEb,KAAKI,uB,kIAzFL,G","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-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";var stylesCss=':host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0;}:host([single]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host([single]) .z-carousel-container{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%}.z-carousel-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.z-carousel-title{margin-bottom:calc(var(--space-unit) * 2)}.z-carousel-wrapper{position:relative}.z-carousel-items-container{display:-ms-flexbox;display:flex;max-width:100%;-ms-flex-direction:row;flex-direction:row;margin:0;-webkit-box-shadow:var(--z-carousel-items-shadow, none);box-shadow:var(--z-carousel-items-shadow, none);-webkit-column-gap:var(--z-carousel-gutter);-moz-column-gap:var(--z-carousel-gutter);column-gap:var(--z-carousel-gutter);list-style:none;-ms-overflow-style:none;overflow-x:scroll;-webkit-padding-start:0;padding-inline-start:0;scroll-behavior:smooth;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;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%;-webkit-transform:translateY(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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:calc(var(--space-unit) * 3);-moz-column-gap:calc(var(--space-unit) * 3);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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.z-carousel-footer .dots-progress{-webkit-column-gap:calc(var(--space-unit) * 3);-moz-column-gap:calc(var(--space-unit) * 3);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:-ms-flexbox;display:flex;width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);-ms-flex-align:center;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{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-carousel-footer .dots-progress button:not(.current){cursor:pointer}.z-carousel-footer .numbers-progress{-webkit-column-gap:calc(var(--space-unit) / 2);-moz-column-gap:calc(var(--space-unit) / 2);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:-ms-flexbox;display:flex}}';var ZCarouselStyle0=stylesCss;var ZCarousel=function(){function t(t){registerInstance(this,t);this.indexChange=createEvent(this,"indexChange",7);this.scrollingTo=null;this.isLoading=undefined;this.label=undefined;this.single=false;this.arrowsPosition=undefined;this.progressMode=undefined;this.fixedArrows=true;this.ghostLoadingHeight=100;this.infinite=false;this.current=0;this.items=undefined;this.highlightedIndicator=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}t.prototype.onIndexChange=function(){this.indexChange.emit({currentItem:this.current})};t.prototype.onSingleModeChange=function(){if(this.single&&!this.intersectionObserver){this.setIntersectionObserver()}};t.prototype.onInfiniteModeChange=function(){this.checkNavigationValidity()};t.prototype.setIntersectionObserver=function(){var t=this;this.intersectionObserver=new IntersectionObserver((function(s){var e=s.find((function(t){var s=t.isIntersecting;return s}));if(!e){return}var i=t.items.findIndex((function(t){return t===e.target}));t.highlightedIndicator=i;if(t.scrollingTo!==null&&i!==t.scrollingTo){return}t.scrollingTo=null;t.current=i}),{root:this.itemsContainer,threshold:.5});this.items.forEach((function(s){return t.intersectionObserver.observe(s)}))};t.prototype.onSlotChange=function(){this.items=Array.from(this.host.children);this.checkNavigationValidity();this.setIntersectionObserver();this.goTo(this.current)};t.prototype.onPrev=function(){if(this.single){this.goTo(this.infinite&&this.current-1<0?this.items.length-1:Math.max(0,this.current-1));return}this.itemsContainer.scrollBy({left:this.infinite&&this.itemsContainer.scrollLeft==0?this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth:-this.itemsContainer.clientWidth/2,behavior:"smooth"})};t.prototype.onNext=function(){if(this.single){var t=this.infinite&&this.current+1>this.items.length-1?0:Math.min(this.current+1,this.items.length-1);return this.goTo(t)}this.itemsContainer.scrollBy({left:this.infinite&&this.itemsContainer.scrollLeft==this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth?-this.itemsContainer.scrollWidth:this.itemsContainer.clientWidth/2,behavior:"smooth"})};t.prototype.checkNavigationValidity=function(){if(this.single){this.canNavigatePrev=this.current>0;this.canNavigateNext=this.current<this.items.length-1;return}this.canNavigatePrev=this.itemsContainer.scrollLeft>0;this.canNavigateNext=this.itemsContainer.scrollLeft<this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth};t.prototype.canShowFooter=function(){if(!this.canNavigatePrev&&!this.canNavigateNext){return false}return this.arrowsPosition===CarouselArrowsPosition.BOTTOM||this.progressMode===CarouselProgressMode.DOTS||this.progressMode===CarouselProgressMode.NUMBERS};t.prototype.goTo=function(t){if(this.current===t){return}this.scrollingTo=t;var s=this.items.slice(0,t).reduce((function(t,s){return t+=s.clientWidth}),0);this.itemsContainer.scroll({left:s,behavior:"smooth"})};Object.defineProperty(t.prototype,"canNavigate",{get:function(){return this.canNavigatePrev||this.canNavigateNext},enumerable:false,configurable:true});t.prototype.setupItems=function(){this.items=Array.from(this.host.children);this.items.forEach((function(t){t.setAttribute("role","group");t.setAttribute("aria-roledescription","slide")}))};t.prototype.componentDidLoad=function(){var t;(t=this.itemsContainer)===null||t===void 0?void 0:t.addEventListener("scroll",this.checkNavigationValidity.bind(this),{passive:true});this.resizeObserver=new ResizeObserver(this.checkNavigationValidity.bind(this));this.resizeObserver.observe(this.itemsContainer);this.setupItems();if(this.single){this.setIntersectionObserver()}this.checkNavigationValidity()};t.prototype.disconnectedCallback=function(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()};t.prototype.render=function(){var t=this;if(this.isLoading){return h("div",{class:"z-carousel-container"},this.label&&h("div",{class:"heading-3-sb z-carousel-title"},this.label),h("div",{style:{height:"".concat(this.ghostLoadingHeight,"px")}},h("z-ghost-loading",null)))}return h(Host,null,h("div",{class:"z-carousel-container",role:"group","aria-roledescription":"carousel","aria-label":this.label||"Carousel"},this.label&&h("div",{class:"z-carousel-title heading-3-sb"},this.label),h("div",{class:"z-carousel-wrapper"},h("z-button",{class:"z-carousel-navigation-arrow",variant:ButtonVariant.SECONDARY,"data-direction":"prev",icon:"arrow-left",onClick:this.onPrev.bind(this),disabled:!this.infinite&&!this.canNavigatePrev,hidden:this.arrowsPosition!==CarouselArrowsPosition.OVER||!this.canNavigate,ariaLabel:this.single?"Mostra l'elemento precedente":"Mostra gli elementi precedenti"}),h("ul",{class:"z-carousel-items-container","aria-atomic":"false","aria-live":"polite",ref:function(s){return t.itemsContainer=s}},h("slot",{onSlotchange:this.onSlotChange.bind(this)})),h("z-button",{class:"z-carousel-navigation-arrow",variant:ButtonVariant.SECONDARY,"data-direction":"next",icon:"arrow-right",onClick:this.onNext.bind(this),disabled:!this.infinite&&!this.canNavigateNext,hidden:this.arrowsPosition!==CarouselArrowsPosition.OVER||!this.canNavigate,ariaLabel:this.single?"Mostra l'elemento successivo":"Mostra gli elementi successivi"}))),this.canShowFooter()&&h("div",{class:"z-carousel-footer"},this.arrowsPosition===CarouselArrowsPosition.BOTTOM&&h("z-button",{class:"z-carousel-navigation-arrow",variant:ButtonVariant.TERTIARY,icon:"arrow-left",onClick:this.onPrev.bind(this),disabled:!this.infinite&&!this.canNavigatePrev,ariaLabel:this.single?"Mostra l'elemento precedente":"Mostra gli elementi precedenti"}),this.progressMode===CarouselProgressMode.DOTS&&this.single&&this.items&&h("div",{class:"dots-progress"},this.items.map((function(s,e){return h("button",{type:"button",class:{current:t.highlightedIndicator===e},"aria-label":t.highlightedIndicator===e?"Elemento corrente":"Spostati all'elemento ".concat(e+1),onClick:function(){return t.goTo(e)}})}))),this.progressMode===CarouselProgressMode.NUMBERS&&this.single&&this.items&&h("div",{class:"numbers-progress interactive-1"},h("span",{class:"current"},this.current+1),h("span",null,"di"),h("span",null,this.items.length)),this.arrowsPosition===CarouselArrowsPosition.BOTTOM&&h("z-button",{class:"z-carousel-navigation-arrow",variant:ButtonVariant.TERTIARY,icon:"arrow-right",onClick:this.onNext.bind(this),disabled:!this.infinite&&!this.canNavigateNext,ariaLabel:this.single?"Mostra l'elemento successivo":"Mostra gli elementi successivi"})))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{current:["onIndexChange"],single:["onSingleModeChange"],infinite:["onInfiniteModeChange"]}},enumerable:false,configurable:true});return t}();ZCarousel.style=ZCarouselStyle0;export{ZCarousel as z_carousel};
-//# sourceMappingURL=z-carousel.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZCarouselStyle0","ZCarousel","this","scrollingTo","prototype","onIndexChange","indexChange","emit","currentItem","current","onSingleModeChange","single","intersectionObserver","setIntersectionObserver","onInfiniteModeChange","checkNavigationValidity","_this","IntersectionObserver","entries","entry","find","_b","isIntersecting","entryIndex","items","findIndex","item","target","highlightedIndicator","root","itemsContainer","threshold","forEach","element","observe","onSlotChange","Array","from","host","children","goTo","onPrev","infinite","length","Math","max","scrollBy","left","scrollLeft","scrollWidth","clientWidth","behavior","onNext","next","min","canNavigatePrev","canNavigateNext","canShowFooter","arrowsPosition","CarouselArrowsPosition","BOTTOM","progressMode","CarouselProgressMode","DOTS","NUMBERS","index","slice","reduce","acc","scroll","Object","defineProperty","setupItems","setAttribute","componentDidLoad","_a","addEventListener","bind","passive","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","render","isLoading","h","class","label","style","height","concat","ghostLoadingHeight","Host","role","variant","ButtonVariant","SECONDARY","icon","onClick","disabled","hidden","OVER","canNavigate","ariaLabel","ref","el","onSlotchange","TERTIARY","map","_","type"],"sources":["src/components/z-carousel/styles.css?tag=z-carousel&encapsulation=shadow","src/components/z-carousel/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-carousel-gutter: 0;\n  --z-carousel-items-shadow: ;\n}\n\n:host([single]) {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n:host([single]) .z-carousel-container {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.z-carousel-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.z-carousel-title {\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-wrapper {\n  position: relative;\n}\n\n.z-carousel-items-container {\n  display: flex;\n  max-width: 100%;\n  flex-direction: row;\n  margin: 0;\n  box-shadow: var(--z-carousel-items-shadow, none);\n  column-gap: var(--z-carousel-gutter);\n  list-style: none;\n  -ms-overflow-style: none; /* IE and Edge */\n  overflow-x: scroll;\n  padding-inline-start: 0;\n  scroll-behavior: smooth;\n  scroll-snap-type: x mandatory;\n\n  /* Hide scrollbar for IE, Edge and Firefox */\n  scrollbar-width: none; /* Firefox */\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.z-carousel-items-container::-webkit-scrollbar {\n  display: none;\n}\n\n.z-carousel-items-container ::slotted(*) {\n  scroll-snap-align: center;\n}\n\n.z-carousel-navigation-arrow[hidden] {\n  display: none;\n}\n\n.z-carousel-navigation-arrow[data-direction] {\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  transform: translateY(50%);\n}\n\n.z-carousel-navigation-arrow[data-direction=\"next\"] {\n  right: 0;\n}\n\n:host(:not([fixed-arrows])) .z-carousel-wrapper .z-carousel-navigation-arrow {\n  display: none;\n}\n\n.z-carousel-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  column-gap: calc(var(--space-unit) * 3);\n}\n\n:host([arrows-position=\"bottom\"]) .z-carousel-footer {\n  margin-top: calc(var(--space-unit) * 0.75);\n}\n\n.z-carousel-footer .numbers-progress,\n.z-carousel-footer .dots-progress {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.z-carousel-footer .dots-progress {\n  column-gap: calc(var(--space-unit) * 3);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .dots-progress {\n  margin-top: calc(var(--space-unit) * 2);\n}\n\n.z-carousel-footer .dots-progress button {\n  display: flex;\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n  align-items: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface03);\n  border-radius: calc(var(--space-unit) * 3);\n}\n\n.z-carousel-footer .dots-progress button.current {\n  background-color: var(--color-primary01);\n}\n\n.z-carousel-footer .dots-progress button:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-carousel-footer .dots-progress button:not(.current) {\n  cursor: pointer;\n}\n\n.z-carousel-footer .numbers-progress {\n  column-gap: calc(var(--space-unit) / 2);\n}\n\n:host(:not([arrows-position=\"bottom\"])) .z-carousel-footer .numbers-progress {\n  margin-top: var(--space-unit);\n}\n\n.z-carousel-footer .numbers-progress .current {\n  font-weight: var(--font-sb);\n}\n\n@media (min-width: 768px) {\n  :host(:not([fixed-arrows])) .z-carousel-wrapper:hover .z-carousel-navigation-arrow:not([hidden]) {\n    display: flex;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, CarouselArrowsPosition, CarouselProgressMode} from \"../../beans\";\n\n/**\n * ZCarousel component.\n * @cssprop --z-carousel-gutter - The gutter between items.\n * @cssprop --z-carousel-items-shadow - The shadow around the items.\n * @slot - Carousel items. Use `<li>` elements inside this slot.\n */\n@Component({\n  tag: \"z-carousel\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCarousel {\n  @Element() host: HTMLZCarouselElement;\n\n  /** The z-carousel is on loading state */\n  @Prop()\n  isLoading: boolean;\n\n  /** The z-carousel title */\n  @Prop()\n  label?: string;\n\n  /** Shows only one content at a time */\n  @Prop({reflect: true})\n  single = false;\n\n  /** Arrow buttons position */\n  @Prop({reflect: true})\n  arrowsPosition?: CarouselArrowsPosition;\n\n  /** Progress indicator type. Only available for `single` mode */\n  @Prop()\n  progressMode?: CarouselProgressMode;\n\n  /**\n   * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\n   * If set to `false`, the arrows will not be visible on mobile.\n   * Only meaningful with `arrowsPosition` set to `OVER`.\n   */\n  @Prop({reflect: true})\n  fixedArrows = true;\n\n  /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */\n  @Prop()\n  ghostLoadingHeight = 100;\n\n  /** When enabled, navigating next the last item will go back to the first item and vice versa. */\n  @Prop()\n  infinite = false;\n\n  /** Current item index for single mode. */\n  @State()\n  current = 0;\n\n  /** Items on the slider. */\n  @State()\n  items: HTMLLIElement[];\n\n  /** Index of the indicator to highlight. */\n  @State()\n  highlightedIndicator: number;\n\n  @State()\n  canNavigatePrev: boolean;\n\n  @State()\n  canNavigateNext: boolean;\n\n  /** Reference for the items container element. */\n  protected itemsContainer: HTMLUListElement;\n\n  /** Observer that handles current index change when scrolling on single mode. */\n  private intersectionObserver: IntersectionObserver;\n\n  /** Observer to check if navigation can still be enabled/showed when the size of the items' container changes */\n  private resizeObserver: ResizeObserver;\n\n  /** Flag indicating the items container is about to scroll programmatically towards the stored index. */\n  private scrollingTo: number = null;\n\n  /** Emitted on index change and only in `single` mode. */\n  @Event()\n  indexChange: EventEmitter<{currentItem: number}>;\n\n  @Watch(\"current\")\n  onIndexChange(): void {\n    this.indexChange.emit({currentItem: this.current});\n  }\n\n  @Watch(\"single\")\n  onSingleModeChange(): void {\n    if (this.single && !this.intersectionObserver) {\n      this.setIntersectionObserver();\n    }\n  }\n\n  @Watch(\"infinite\")\n  onInfiniteModeChange(): void {\n    this.checkNavigationValidity();\n  }\n\n  /**\n   * Set an intersection observer to:\n   * - highlight the indicator of the intersecting item during scroll\n   * - set the current item to the last intersecting item\n   */\n  private setIntersectionObserver(): void {\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        const entry = entries.find(({isIntersecting}) => isIntersecting);\n        if (!entry) {\n          return;\n        }\n\n        const entryIndex = this.items.findIndex((item) => item === entry.target);\n        this.highlightedIndicator = entryIndex;\n\n        /* skip setting the current item if intersection has been triggered by a programmatic scroll\n        (@see `goTo` function) and the final index has not been reached */\n        if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {\n          return;\n        }\n\n        this.scrollingTo = null;\n        this.current = entryIndex;\n      },\n      {\n        root: this.itemsContainer,\n        threshold: 0.5,\n      }\n    );\n\n    this.items.forEach((element) => this.intersectionObserver.observe(element));\n  }\n\n  /** Update items' list and check conditions to allow navigation */\n  private onSlotChange(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.checkNavigationValidity();\n    this.setIntersectionObserver();\n    this.goTo(this.current);\n  }\n\n  private onPrev(): void {\n    if (this.single) {\n      this.goTo(this.infinite && this.current - 1 < 0 ? this.items.length - 1 : Math.max(0, this.current - 1));\n\n      return;\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite && this.itemsContainer.scrollLeft == 0\n          ? this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          : -this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  private onNext(): void {\n    if (this.single) {\n      const next =\n        this.infinite && this.current + 1 > this.items.length - 1\n          ? 0\n          : Math.min(this.current + 1, this.items.length - 1);\n\n      return this.goTo(next);\n    }\n\n    this.itemsContainer.scrollBy({\n      left:\n        this.infinite &&\n        this.itemsContainer.scrollLeft == this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth\n          ? -this.itemsContainer.scrollWidth\n          : this.itemsContainer.clientWidth / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if navigation buttons can be enabled and set the related local states.\n   */\n  private checkNavigationValidity(): void {\n    if (this.single) {\n      this.canNavigatePrev = this.current > 0;\n      this.canNavigateNext = this.current < this.items.length - 1;\n\n      return;\n    }\n\n    this.canNavigatePrev = this.itemsContainer.scrollLeft > 0;\n    this.canNavigateNext =\n      this.itemsContainer.scrollLeft < this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth;\n  }\n\n  /**\n   * Check if footer has to be rendered.\n   */\n  private canShowFooter(): boolean {\n    if (!this.canNavigatePrev && !this.canNavigateNext) {\n      return false;\n    }\n\n    return (\n      this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||\n      this.progressMode === CarouselProgressMode.DOTS ||\n      this.progressMode === CarouselProgressMode.NUMBERS\n    );\n  }\n\n  /**\n   * Set current item to passed index.\n   * @param index Index to set\n   */\n  private goTo(index: number): void {\n    if (this.current === index) {\n      return;\n    }\n\n    this.scrollingTo = index;\n    const left = this.items.slice(0, index).reduce((acc, item) => (acc += item.clientWidth), 0);\n    // the scroll will trigger the IntersectionObserver and set the current item\n    this.itemsContainer.scroll({\n      left,\n      behavior: \"smooth\",\n    });\n  }\n\n  /** Check if navigation of at least one direction is enabled */\n  private get canNavigate(): boolean {\n    return this.canNavigatePrev || this.canNavigateNext;\n  }\n\n  private setupItems(): void {\n    this.items = Array.from(this.host.children) as HTMLLIElement[];\n    this.items.forEach((item) => {\n      item.setAttribute(\"role\", \"group\");\n      item.setAttribute(\"aria-roledescription\", \"slide\");\n    });\n  }\n\n  componentDidLoad(): void {\n    this.itemsContainer?.addEventListener(\"scroll\", this.checkNavigationValidity.bind(this), {passive: true});\n    this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));\n    this.resizeObserver.observe(this.itemsContainer);\n    this.setupItems();\n    if (this.single) {\n      this.setIntersectionObserver();\n    }\n    this.checkNavigationValidity();\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLDivElement | HTMLZCarouselElement {\n    if (this.isLoading) {\n      return (\n        <div class=\"z-carousel-container\">\n          {this.label && <div class=\"heading-3-sb z-carousel-title\">{this.label}</div>}\n          <div style={{height: `${this.ghostLoadingHeight}px`}}>\n            <z-ghost-loading></z-ghost-loading>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <div\n          class=\"z-carousel-container\"\n          role=\"group\"\n          aria-roledescription=\"carousel\"\n          aria-label={this.label || \"Carousel\"}\n        >\n          {this.label && <div class=\"z-carousel-title heading-3-sb\">{this.label}</div>}\n          <div class=\"z-carousel-wrapper\">\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"prev\"\n              icon=\"arrow-left\"\n              onClick={this.onPrev.bind(this)}\n              disabled={!this.infinite && !this.canNavigatePrev}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n            />\n            <ul\n              class=\"z-carousel-items-container\"\n              aria-atomic=\"false\"\n              aria-live=\"polite\"\n              ref={(el) => (this.itemsContainer = el)}\n            >\n              <slot onSlotchange={this.onSlotChange.bind(this)} />\n            </ul>\n            <z-button\n              class=\"z-carousel-navigation-arrow\"\n              variant={ButtonVariant.SECONDARY}\n              data-direction=\"next\"\n              icon=\"arrow-right\"\n              onClick={this.onNext.bind(this)}\n              disabled={!this.infinite && !this.canNavigateNext}\n              hidden={this.arrowsPosition !== CarouselArrowsPosition.OVER || !this.canNavigate}\n              ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n            />\n          </div>\n        </div>\n\n        {this.canShowFooter() && (\n          <div class=\"z-carousel-footer\">\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-left\"\n                onClick={this.onPrev.bind(this)}\n                disabled={!this.infinite && !this.canNavigatePrev}\n                ariaLabel={this.single ? \"Mostra l'elemento precedente\" : \"Mostra gli elementi precedenti\"}\n              />\n            )}\n            {this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (\n              <div class=\"dots-progress\">\n                {this.items.map((_, index) => (\n                  <button\n                    type=\"button\"\n                    class={{current: this.highlightedIndicator === index}}\n                    aria-label={\n                      this.highlightedIndicator === index ? \"Elemento corrente\" : `Spostati all'elemento ${index + 1}`\n                    }\n                    onClick={() => this.goTo(index)}\n                  />\n                ))}\n              </div>\n            )}\n            {this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (\n              <div class=\"numbers-progress interactive-1\">\n                <span class=\"current\">{this.current + 1}</span>\n                <span>di</span>\n                <span>{this.items.length}</span>\n              </div>\n            )}\n            {this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (\n              <z-button\n                class=\"z-carousel-navigation-arrow\"\n                variant={ButtonVariant.TERTIARY}\n                icon=\"arrow-right\"\n                onClick={this.onNext.bind(this)}\n                disabled={!this.infinite && !this.canNavigateNext}\n                ariaLabel={this.single ? \"Mostra l'elemento successivo\" : \"Mostra gli elementi successivi\"}\n              />\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-ab5f1eaa.js";import{x as ZChipType}from"./index-2255c6c8.js";var stylesCss=".sc-z-chip-h>.z-chip-container.sc-z-chip{display:-ms-inline-flexbox;display:inline-flex;min-height:28px;-ms-flex-align:center;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-text);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]):hover>z-icon.sc-z-chip:first-child{fill:var(--color-default-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";var ZChipStyle0=stylesCss;var ZChip=function(){function i(i){registerInstance(this,i);this.interactiveIconClick=createEvent(this,"interactiveIconClick",7);this.icon=undefined;this.type=ZChipType.DEFAULT;this.interactiveIcon=undefined;this.disabled=false;this.ariaLabel=""}i.prototype.render=function(){var i;var c=this;return h("div",{key:"97f98567047b81864de0326e6ec89153d83cc1c1",class:(i={"z-chip-container":true,"z-chip-interactive":!!this.interactiveIcon},i[this.type]=true,i),"aria-disabled":this.disabled},this.icon&&h("z-icon",{key:"45a3661a2cbda05351c56bbc9fd697fad9bc96ea",name:this.icon}),h("slot",{key:"9d81610f7d11777a0ab71772f35e610796d65e98"}),this.interactiveIcon&&h("button",{key:"53c13cdad61a96cb139c32923c469e9e1237bc15",type:"button",onClick:function(){return c.interactiveIconClick.emit()},"aria-label":this.ariaLabel,disabled:this.disabled},h("z-icon",{key:"0baf684cbd662f7b3cedbd2a7468215f896472c6",class:"interactive-icon",name:this.interactiveIcon})))};Object.defineProperty(i.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return i}();ZChip.style=ZChipStyle0;export{ZChip as z_chip};
-//# sourceMappingURL=z-chip.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZChipStyle0","ZChip","ZChipType","DEFAULT","prototype","render","_this","this","h","key","class","_a","interactiveIcon","type","disabled","icon","name","onClick","interactiveIconClick","emit","ariaLabel"],"sources":["src/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/z-chip/index.tsx"],"sourcesContent":[":host > .z-chip-container {\n  display: inline-flex;\n  min-height: 28px;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--gray400);\n  background-color: var(--color-surface01);\n  border-radius: 14px;\n  color: var(--color-default-text);\n  fill: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  line-height: 28px;\n}\n\n:host > .z-chip-interactive {\n  font-weight: var(--font-sb);\n}\n\n:host > .z-chip-container > button {\n  padding: 0;\n  border: none;\n  margin-left: var(--space-unit);\n  background-color: transparent;\n  cursor: pointer;\n}\n\n:host > .z-chip-container > z-icon:first-child {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n:host > .z-chip-container:not([aria-disabled]):hover > z-icon:first-child {\n  fill: var(--color-default-icon);\n}\n\n:host > .z-chip-container .interactive-icon {\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] z-icon {\n  color: var(--color-disabled03);\n  cursor: auto;\n  fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n  border: var(--border-size-small) solid var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n  border-radius: 100%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > button:not([disabled]):active:hover .interactive-icon {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n  --z-icon-width: 22px;\n  --z-icon-height: 22px;\n}\n\n/* :host type */\n:host > .z-chip-container.default {\n  min-height: 44px;\n  border-radius: 22px;\n  line-height: 44px;\n}\n\n:host > .z-chip-container.medium {\n  min-height: 40px;\n  border-radius: 22px;\n  line-height: 40px;\n}\n\n:host > .z-chip-container.small {\n  min-height: 36px;\n  border-radius: 22px;\n  line-height: 36px;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .z-chip-container {\n    font-size: 12px;\n  }\n\n  /* :host type */\n  :host > .z-chip-container.default {\n    min-height: 32px;\n    border-radius: 16px;\n    line-height: 32px;\n  }\n\n  :host > .z-chip-container.medium {\n    min-height: 28px;\n    border-radius: 16px;\n    line-height: 28px;\n  }\n\n  :host > .z-chip-container.small {\n    min-height: 24px;\n    border-radius: 16px;\n    line-height: 24px;\n  }\n\n  :host > .z-chip-container > z-icon,\n  :host > .z-chip-container .interactive-icon {\n    --z-icon-width: 14px;\n    --z-icon-height: 14px;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType} from \"../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** z-chip aria-label string */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n        }}\n        aria-disabled={this.disabled}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.ariaLabel}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"0IAAA,IAAMA,UAAY,8wFAClB,IAAAC,YAAeD,U,ICQFE,MAAK,W,0IASGC,UAAUC,Q,6CAQR,M,eAIT,E,CAMZF,EAAAG,UAAAC,OAAA,W,MAAA,IAAAC,EAAAC,KACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,OAAKC,EAAA,CACH,mBAAoB,KACpB,uBAAwBJ,KAAKK,iBAC7BD,EAACJ,KAAKM,MAAO,K,GACd,gBACcN,KAAKO,UAEnBP,KAAKQ,MAAQP,EAAA,UAAAC,IAAA,2CAAQO,KAAMT,KAAKQ,OACjCP,EAAA,QAAAC,IAAA,6CACCF,KAAKK,iBACJJ,EAAA,UAAAC,IAAA,2CACEI,KAAK,SACLI,QAAS,WAAM,OAAAX,EAAKY,qBAAqBC,MAA1B,EAAgC,aACnCZ,KAAKa,UACjBN,SAAUP,KAAKO,UAEfN,EAAA,UAAAC,IAAA,2CACEC,MAAM,mBACNM,KAAMT,KAAKK,mB,gIAhDP,G","ignoreList":[]}

package/dist/esm-es5/z-combobox.entry.js

@@ -1,2 +0,0 @@
-import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-ab5f1eaa.js";import{I as InputType,e as ControlSize,i as ListSize,g as KeyboardCode,l as ListDividerType}from"./index-2255c6c8.js";import{r as randomId,a as handleKeyboardSubmit}from"./utils-7983d02c.js";import"./breakpoints-680e0e56.js";var stylesCss=':host{display:block;font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:-ms-flexbox;display:flex;min-height:42px;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{-webkit-box-shadow:none;box-shadow:none}:host>div>div.header:focus:focus-visible{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-default-text)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-default-icon);-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all 200ms linear;transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-default-icon);-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:all 200ms linear;transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:auto;margin-top:0;-webkit-box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%);box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div>div.search>div{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host>div.open>div.open-combo-data>div>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}';var ZComboboxStyle0=stylesCss;var ZCombobox=function(){function i(i){registerInstance(this,i);this.comboboxChange=createEvent(this,"comboboxChange",7);this.itemsList=[];this.inputType=InputType.TEXT;this.inputid="combo-".concat(randomId());this.items=undefined;this.label=undefined;this.disabled=false;this.hassearch=false;this.searchlabel=undefined;this.searchplaceholder=undefined;this.searchtitle=undefined;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.closesearchtext="Chiudi";this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.hasgroupitems=undefined;this.size=ControlSize.BIG;this.searchValue=undefined;this.selectedCounter=undefined;this.renderItemsList=[];this.focusedItemId=undefined;this.checkboxes=[];this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}i.prototype.watchItems=function(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((function(i){return i.checked})).length;this.updateRenderItemsList()};i.prototype.watchSearchValue=function(){this.filterItems(this.searchValue)};i.prototype.watchCheckboxes=function(){this.checkboxes.forEach((function(i,t){return i.setAttribute("tabindex",t===0?"0":"-1")}))};i.prototype.emitComboboxChange=function(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})};i.prototype.componentWillLoad=function(){this.watchItems()};i.prototype.componentWillRender=function(){this.selectedCounter=this.itemsList.filter((function(i){return i.checked})).length};i.prototype.componentDidRender=function(){var i=this.getAllCheckboxes();if(JSON.stringify(i)!==JSON.stringify(this.checkboxes)){this.checkboxes=i}};i.prototype.getItemId=function(i){return"combo-checkbox-".concat(this.inputid,"-").concat(i.id)};i.prototype.getCheckboxClass=function(){return"combo-item-checkbox-input-".concat(this.inputid)};i.prototype.getAllCheckboxes=function(){return Array.from(this.element.shadowRoot.querySelectorAll(".".concat(this.getCheckboxClass()," input:not([disabled])")))};i.prototype.getControlToListSize=function(){switch(this.size){case ControlSize.X_SMALL:return ListSize.SMALL;case ControlSize.SMALL:return ListSize.MEDIUM;default:return ListSize.LARGE}};i.prototype.handleSelectArrowsNavigation=function(i,t){if(![KeyboardCode.ARROW_DOWN,KeyboardCode.ARROW_UP].includes(i.key)||!this.isopen){return}i.preventDefault();i.stopPropagation();var e=this.element.shadowRoot.querySelector("#".concat(t));if(!e){return}var o=this.checkboxes;if(!o.length){return}var r=o.indexOf(e);var n=0;var s=o.length-1;var a=null;if(i.key===KeyboardCode.ARROW_DOWN){a=r===s?o[n]:o[r+1]}else if(i.key===KeyboardCode.ARROW_UP){a=r===n?o[s]:o[r-1]}this.focusComboboxItem(a)};i.prototype.handleHeaderKeyboardEvent=function(i){if(i.key===KeyboardCode.SPACE){i.preventDefault()}if(i.key===KeyboardCode.ARROW_DOWN&&!this.isopen||i.key===KeyboardCode.ARROW_UP&&this.isopen){this.toggleComboBox()}};i.prototype.handleCheckboxFocus=function(i){this.focusedItemId=i};i.prototype.focusComboboxItem=function(i){this.checkboxes.forEach((function(i){i.setAttribute("tabindex","-1")}));i.setAttribute("tabindex","0");i.focus()};i.prototype.updateRenderItemsList=function(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}};i.prototype.resetRenderItemsList=function(){var i=[];this.itemsList.forEach((function(t){i.push(Object.assign({},t))}));this.renderItemsList=i};i.prototype.filterItems=function(i){if(!i){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((function(t){var e=t.name.toUpperCase().indexOf(i.toUpperCase());var o=e+i.length;var r=t.name.substring(0,e)+"<strong>"+t.name.substring(e,o)+"</strong>"+t.name.substring(o,t.name.length);t.name=r;return e>=0}))};i.prototype.checkAll=function(i){if(i===void 0){i=true}this.itemsList=this.itemsList.map((function(t){return Object.assign(Object.assign({},t),{checked:i})}));this.resetRenderItemsList();this.emitComboboxChange()};i.prototype.closeFilterItems=function(){this.searchValue="";this.resetRenderItemsList()};i.prototype.toggleComboBox=function(){this.isopen=!this.isopen};i.prototype.getComboboxA11yAttributes=function(){return{role:"combobox","aria-label":this.label,"aria-expanded":this.isopen?"true":"false","aria-activedescendant":this.isopen?this.focusedItemId:"","aria-controls":"".concat(this.inputid,"_list")}};i.prototype.renderHeader=function(){var i=this;return h("div",{class:"header",onClick:function(){return i.toggleComboBox()},onKeyDown:function(t){i.handleHeaderKeyboardEvent(t)},onKeyUp:function(t){return handleKeyboardSubmit(t,i.toggleComboBox)},role:"button",tabindex:0,"aria-expanded":this.isopen?"true":"false"},h("p",{class:"body-3"},this.label,h("span",null,this.selectedCounter>0&&" (".concat(this.selectedCounter,")"))),h("z-icon",{name:"caret-down",class:this.size}))};i.prototype.renderContent=function(){if(!this.isopen){return}return h("div",{class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),!this.hassearch?h("span",Object.assign({},this.getComboboxA11yAttributes())):null,h("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":true,id:"".concat(this.inputid,"_list"),"aria-owns":"".concat(this.checkboxes.map((function(i){return i.id})).join(" "))},this.hascheckall&&this.renderCheckAll(),this.renderItems()))};i.prototype.renderItems=function(){return h("div",{class:this.searchValue&&"search"},this.renderList(this.renderItemsList),this.searchValue&&this.renderCloseButton())};i.prototype.renderItem=function(i,t,e){var o=this;return h("z-list-element",{id:i.id,htmlTabindex:null,dividerType:t!==e-1?ListDividerType.ELEMENT:ListDividerType.NONE,size:this.getControlToListSize()},h("z-input",{type:InputType.CHECKBOX,checked:i.checked,htmlid:this.getItemId(i),label:i.name,class:this.getCheckboxClass(),disabled:!i.checked&&this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems,size:this.size===ControlSize.X_SMALL?ControlSize.SMALL:this.size,role:"option","aria-selected":i.checked?"true":"false",onKeyDown:function(t){return o.handleSelectArrowsNavigation(t,o.getItemId(i))},onInputCheck:function(t){o.itemsList=o.itemsList.map((function(e){if(i.id===e.id){e.checked=t.detail.checked}return e}));o.updateRenderItemsList();o.emitComboboxChange()},onInputFocus:function(i){return o.handleCheckboxFocus(i.detail.id)}}))};i.prototype.renderList=function(i){var t=this;if(!i){return}if(!i.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(i)}return h("ul",{role:"none"},i.map((function(e,o){return t.renderItem(e,o,i.length)})))};i.prototype.renderGroups=function(i){var t=this;var e=i.reduce((function(e,o,r){var n;var s=o.category;var a=t.renderItem(o,r,i.length);e[s]=(n=e[s])!==null&&n!==void 0?n:[];e[s].push(a);return e}),{});var o=Object.entries(e).map((function(i){var t=i[0],e=i[1];return h("z-list-group",{"divider-type":ListDividerType.ELEMENT},h("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},t),e.map((function(i){return i})))}));return h("ul",{role:"none"},o)};i.prototype.renderNoSearchResults=function(){return h("ul",{role:"none"},h("z-myz-list-item",{id:"no-results",text:this.noresultslabel,listitemid:"no-results",icon:"multiply-circle",class:this.size}))};i.prototype.renderCloseButton=function(){var i=this;return h("div",null,h("a",{onClick:function(){return i.closeFilterItems()},onKeyUp:function(t){return handleKeyboardSubmit(t,i.closeFilterItems)},role:"button",tabindex:0},this.closesearchtext))};i.prototype.renderSearchInput=function(){var i=this;return h("z-input",Object.assign({htmlid:"".concat(this.inputid,"_search"),label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"aria-autocomplete":"list"},this.getComboboxA11yAttributes(),{onKeyUp:function(t){if(t.key===KeyboardCode.ESC){i.closeFilterItems()}},onInputChange:function(t){i.searchValue=t.detail.value}}))};i.prototype.renderCheckAll=function(){var i=this;if(this.searchValue){return}var t="combo-checkbox-".concat(this.inputid,"-check-all");var e=this.selectedCounter===this.itemsList.length;return h("div",{class:"check-all-wrapper"},h("z-input",{type:InputType.CHECKBOX,checked:e,htmlid:t,class:this.getCheckboxClass(),label:e?this.uncheckalltext:this.checkalltext,disabled:this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length,size:this.size===ControlSize.X_SMALL?ControlSize.SMALL:this.size,role:"option","aria-selected":e?"true":"false",onKeyDown:function(e){return i.handleSelectArrowsNavigation(e,t)},onInputCheck:function(t){return i.checkAll(t.detail.checked)},onInputFocus:function(t){return i.handleCheckboxFocus(t.detail.id)}}))};i.prototype.render=function(){return h("div",{key:"118ffd4229b6b7f060d9b28ace7d5a59796620b9","data-action":"combo-".concat(this.inputid),class:{open:this.isopen,fixed:this.isfixed,disabled:this.disabled},id:this.inputid},this.renderHeader(),!this.disabled&&this.renderContent())};Object.defineProperty(i.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{items:["watchItems"],searchValue:["watchSearchValue"],checkboxes:["watchCheckboxes"]}},enumerable:false,configurable:true});return i}();ZCombobox.style=ZComboboxStyle0;export{ZCombobox as z_combobox};
-//# sourceMappingURL=z-combobox.entry.js.map

package/dist/esm-es5/z-combobox.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZComboboxStyle0","ZCombobox","hostRef","this","itemsList","inputType","InputType","TEXT","concat","randomId","ControlSize","BIG","toggleComboBox","bind","closeFilterItems","prototype","watchItems","items","JSON","parse","selectedCounter","filter","item","checked","length","updateRenderItemsList","watchSearchValue","filterItems","searchValue","watchCheckboxes","checkboxes","forEach","index","setAttribute","emitComboboxChange","comboboxChange","emit","id","inputid","componentWillLoad","componentWillRender","componentDidRender","getAllCheckboxes","stringify","getItemId","getCheckboxClass","Array","from","element","shadowRoot","querySelectorAll","getControlToListSize","size","X_SMALL","ListSize","SMALL","MEDIUM","LARGE","handleSelectArrowsNavigation","e","currId","KeyboardCode","ARROW_DOWN","ARROW_UP","includes","key","isopen","preventDefault","stopPropagation","currElem","querySelector","currElemIndex","indexOf","firstElemIndex","lastElemIndex","nextElem","focusComboboxItem","handleHeaderKeyboardEvent","ev","SPACE","handleCheckboxFocus","focusedItemId","elem","focus","resetRenderItemsList","renderItemsList","push","Object","assign","value","start","name","toUpperCase","end","newName","substring","checkAll","map","getComboboxA11yAttributes","role","label","renderHeader","_this","h","class","onClick","onKeyDown","onKeyUp","handleKeyboardSubmit","tabindex","renderContent","hassearch","renderSearchInput","join","hascheckall","renderCheckAll","renderItems","renderList","renderCloseButton","renderItem","htmlTabindex","dividerType","ListDividerType","ELEMENT","NONE","type","CHECKBOX","htmlid","disabled","maxcheckableitems","onInputCheck","i","detail","onInputFocus","renderNoSearchResults","hasgroupitems","renderGroups","newData","reduce","group","category","zListItem","_a","listGroups","entries","_b","slot","text","noresultslabel","listitemid","icon","closesearchtext","searchlabel","placeholder","searchplaceholder","htmltitle","searchtitle","message","ESC","onInputChange","checkAllId","allChecked","uncheckalltext","checkalltext","render","open","fixed","isfixed"],"sources":["src/components/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/z-combobox/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n  position: relative;\n}\n\n:host > div > .header {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  min-height: 42px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--color-surface04);\n  margin: 0;\n  background-color: var(--color-input-field01);\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n  min-height: 34px;\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n  min-height: 30px;\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header p.body-3 {\n  padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n:host > div > .header:hover {\n  outline: var(--border-size-medium) solid var(--color-surface04);\n  outline-offset: -2px;\n}\n\n:host > div.open > div.header:focus:focus-visible {\n  box-shadow: none;\n}\n\n:host > div > div.header:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > div > .header > p.body-3 {\n  padding: var(--space-unit) 0;\n  margin: 0;\n  color: var(--color-default-text);\n}\n\n:host > div > .header > p.body-3 > span {\n  font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n  fill: var(--color-default-icon);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n  border: var(--border-size-small) solid var(--color-primary01);\n  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n  pointer-events: none;\n}\n\n:host > div.disabled .header {\n  border-color: var(--color-disabled01);\n  fill: var(--color-disabled01);\n}\n\n:host > div.disabled .header > p.body-3 {\n  color: var(--color-disabled03);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n  fill: var(--color-disabled01);\n}\n\n:host > div.open > .header > z-icon {\n  fill: var(--color-default-icon);\n  transform: rotate(180deg);\n  transition: all 200ms linear;\n}\n\n:host > div.open > div.open-combo-data {\n  position: relative;\n  z-index: 12;\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n  border: var(--border-size-small) solid var(--gray200);\n  border-top: 0;\n  background-color: var(--color-input-field01);\n  border-radius: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div {\n  overflow: auto;\n  max-height: 235px;\n  padding: 0;\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > z-input {\n  width: 100%;\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n  max-height: 235px;\n  padding: 0 3px; /* needed for checkbox focus shadow */\n  margin: 0;\n}\n\n::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n}\n\n:host > div.open > z-input {\n  position: relative;\n  z-index: 1;\n  width: 238px;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n  overflow: hidden;\n  max-height: auto;\n  margin-top: 0;\n  box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n  overflow: auto;\n  max-height: 180px;\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div {\n  display: flex;\n  justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a {\n  display: inline-block;\n  height: 44px;\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  line-height: 44px;\n  text-align: center;\n  text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n  border-bottom: var(--border-size-small) solid var(--gray800);\n  margin-bottom: var(--space-unit);\n  text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n  padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ComboItem, ControlSize, InputType, KeyboardCode, ListDividerType, ListSize} from \"../../beans\";\nimport {ZMyzListItem} from \"../../snowflakes/myz/list/z-myz-list-item\";\nimport {handleKeyboardSubmit, randomId} from \"../../utils/utils\";\nimport {ZInput} from \"../z-input\";\n\n@Component({\n  tag: \"z-combobox\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCombobox {\n  @Element() element: HTMLZComboboxElement;\n\n  /** input unique id */\n  @Prop()\n  inputid = `combo-${randomId()}`;\n\n  /** list items array */\n  @Prop()\n  items: ComboItem[] | string;\n\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** the combobox is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** show search input flag (optional) */\n  @Prop()\n  hassearch?: boolean = false;\n\n  /** search input label text (optional) */\n  @Prop()\n  searchlabel?: string;\n\n  /** search input placeholder text (optional) */\n  @Prop()\n  searchplaceholder?: string;\n\n  /** search input title text (optional) */\n  @Prop()\n  searchtitle?: string;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** toggle combo list opening flag */\n  @Prop({mutable: true})\n  isopen = false;\n\n  /** fixed style flag */\n  @Prop()\n  isfixed = false;\n\n  /** close combobox list text */\n  @Prop()\n  closesearchtext?: string = \"Chiudi\";\n\n  /** show \"check all\" checkbox (optional) */\n  @Prop()\n  hascheckall?: boolean = false;\n\n  /** check all label (optional) */\n  @Prop()\n  checkalltext?: string = \"Seleziona tutti\";\n\n  /** uncheck all label (optional) */\n  @Prop()\n  uncheckalltext?: string = \"Deseleziona tutti\";\n\n  /** max number of checkable items (0 = unlimited) */\n  @Prop()\n  maxcheckableitems = 0;\n\n  /** group items by category */\n  @Prop()\n  hasgroupitems?: boolean;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  searchValue: string;\n\n  @State()\n  selectedCounter: number;\n\n  @State()\n  renderItemsList: ComboItem[] = []; // used for render only\n\n  @State()\n  focusedItemId: string;\n\n  @State()\n  checkboxes: HTMLInputElement[] = [];\n\n  private itemsList: ComboItem[] = [];\n\n  private inputType: InputType = InputType.TEXT;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n    this.updateRenderItemsList();\n  }\n\n  @Watch(\"searchValue\")\n  watchSearchValue(): void {\n    this.filterItems(this.searchValue);\n  }\n\n  @Watch(\"checkboxes\")\n  watchCheckboxes(): void {\n    this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n  }\n\n  /** Emitted when value is checked/unchecked. Returns id, items. */\n  @Event()\n  comboboxChange: EventEmitter;\n\n  private emitComboboxChange(): void {\n    this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n  }\n\n  constructor() {\n    this.toggleComboBox = this.toggleComboBox.bind(this);\n    this.closeFilterItems = this.closeFilterItems.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n  }\n\n  componentDidRender(): void {\n    const checkboxes = this.getAllCheckboxes();\n    if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n      this.checkboxes = checkboxes;\n    }\n  }\n\n  private getItemId(item: ComboItem): string {\n    return `combo-checkbox-${this.inputid}-${item.id}`;\n  }\n\n  private getCheckboxClass(): string {\n    return `combo-item-checkbox-input-${this.inputid}`;\n  }\n\n  private getAllCheckboxes(): HTMLInputElement[] {\n    return Array.from(\n      this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n    ) as HTMLInputElement[];\n  }\n\n  private getControlToListSize(): ListSize {\n    switch (this.size) {\n      case ControlSize.X_SMALL:\n        return ListSize.SMALL;\n      case ControlSize.SMALL:\n        return ListSize.MEDIUM;\n      default:\n        return ListSize.LARGE;\n    }\n  }\n\n  private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) || !this.isopen) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n    if (!currElem) {\n      return;\n    }\n\n    const checkboxes = this.checkboxes;\n    if (!checkboxes.length) {\n      return;\n    }\n\n    const currElemIndex = checkboxes.indexOf(currElem);\n    const firstElemIndex = 0;\n    const lastElemIndex = checkboxes.length - 1;\n\n    let nextElem = null;\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n    } else if (e.key === KeyboardCode.ARROW_UP) {\n      nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n    }\n\n    this.focusComboboxItem(nextElem);\n  }\n\n  private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n    }\n    if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n      this.toggleComboBox();\n    }\n  }\n\n  private handleCheckboxFocus(id: string): void {\n    this.focusedItemId = id;\n  }\n\n  private focusComboboxItem(elem): void {\n    this.checkboxes.forEach(function (item) {\n      item.setAttribute(\"tabindex\", \"-1\");\n    });\n\n    elem.setAttribute(\"tabindex\", \"0\");\n    elem.focus();\n  }\n\n  private updateRenderItemsList(): void {\n    if (this.searchValue) {\n      this.filterItems(this.searchValue);\n    } else {\n      this.resetRenderItemsList();\n    }\n  }\n\n  private resetRenderItemsList(): void {\n    const renderItemsList = [];\n    this.itemsList.forEach((item: ComboItem) => {\n      renderItemsList.push({...item});\n    });\n    this.renderItemsList = renderItemsList;\n  }\n\n  private filterItems(value: string): void {\n    if (!value) {\n      return this.closeFilterItems();\n    }\n\n    this.resetRenderItemsList();\n    this.renderItemsList = this.renderItemsList.filter((item) => {\n      const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n      const end = start + value.length;\n      const newName =\n        item.name.substring(0, start) +\n        \"<strong>\" +\n        item.name.substring(start, end) +\n        \"</strong>\" +\n        item.name.substring(end, item.name.length);\n\n      item.name = newName;\n\n      return start >= 0;\n    });\n  }\n\n  private checkAll(checked = true): void {\n    this.itemsList = this.itemsList.map((item: ComboItem) => ({\n      ...item,\n      checked: checked,\n    }));\n    this.resetRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  private closeFilterItems(): void {\n    this.searchValue = \"\";\n    this.resetRenderItemsList();\n  }\n\n  private toggleComboBox(): void {\n    this.isopen = !this.isopen;\n  }\n\n  private getComboboxA11yAttributes(): Record<string, unknown> {\n    return {\n      \"role\": \"combobox\",\n      \"aria-label\": this.label,\n      \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n      \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n      \"aria-controls\": `${this.inputid}_list`,\n    };\n  }\n\n  private renderHeader(): HTMLDivElement {\n    return (\n      <div\n        class=\"header\"\n        onClick={() => this.toggleComboBox()}\n        onKeyDown={(ev: KeyboardEvent) => {\n          this.handleHeaderKeyboardEvent(ev);\n        }}\n        onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n        role=\"button\"\n        tabindex={0}\n        aria-expanded={this.isopen ? \"true\" : \"false\"}\n      >\n        <p class=\"body-3\">\n          {this.label}\n          <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n        </p>\n        <z-icon\n          name=\"caret-down\"\n          class={this.size}\n        />\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <div class=\"open-combo-data\">\n        {this.hassearch && this.renderSearchInput()}\n        {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n        <div\n          role=\"listbox\"\n          aria-label={this.label}\n          aria-multiselectable={true}\n          id={`${this.inputid}_list`}\n          aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n        >\n          {this.hascheckall && this.renderCheckAll()}\n          {this.renderItems()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderItems(): HTMLDivElement {\n    return (\n      <div class={this.searchValue && \"search\"}>\n        {this.renderList(this.renderItemsList)}\n        {this.searchValue && this.renderCloseButton()}\n      </div>\n    );\n  }\n\n  private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n    return (\n      <z-list-element\n        id={item.id}\n        htmlTabindex={null}\n        dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n        size={this.getControlToListSize()}\n      >\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={item.checked}\n          htmlid={this.getItemId(item)}\n          label={item.name}\n          class={this.getCheckboxClass()}\n          disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n          role=\"option\"\n          aria-selected={item.checked ? \"true\" : \"false\"}\n          onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n          onInputCheck={(e: CustomEvent) => {\n            this.itemsList = this.itemsList.map((i: ComboItem) => {\n              if (item.id === i.id) {\n                i.checked = e.detail.checked;\n              }\n\n              return i;\n            });\n            this.updateRenderItemsList();\n            this.emitComboboxChange();\n          }}\n          onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n        />\n      </z-list-element>\n    );\n  }\n\n  private renderList(items: ComboItem[]): HTMLUListElement {\n    if (!items) {\n      return;\n    }\n    if (!items.length && this.searchValue) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasgroupitems) {\n      return this.renderGroups(items);\n    }\n\n    return (\n      <ul role=\"none\">\n        {items.map((item, i) => {\n          return this.renderItem(item, i, items.length);\n        })}\n      </ul>\n    );\n  }\n\n  private renderGroups(items: ComboItem[]): HTMLUListElement {\n    const newData = items.reduce((group, item, index) => {\n      const {category} = item;\n      const zListItem = this.renderItem(item, index, items.length);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n\n    return <ul role=\"none\">{listGroups}</ul>;\n  }\n\n  private renderNoSearchResults(): HTMLUListElement {\n    return (\n      <ul role=\"none\">\n        <z-myz-list-item\n          id=\"no-results\"\n          text={this.noresultslabel}\n          listitemid=\"no-results\"\n          icon=\"multiply-circle\"\n          class={this.size}\n        />\n      </ul>\n    );\n  }\n\n  private renderCloseButton(): HTMLDivElement {\n    return (\n      <div>\n        <a\n          onClick={() => this.closeFilterItems()}\n          onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n          role=\"button\"\n          tabindex={0}\n        >\n          {this.closesearchtext}\n        </a>\n      </div>\n    );\n  }\n\n  private renderSearchInput(): ZInput {\n    return (\n      <z-input\n        htmlid={`${this.inputid}_search`}\n        label={this.searchlabel}\n        placeholder={this.searchplaceholder}\n        htmltitle={this.searchtitle}\n        type={this.inputType}\n        value={this.searchValue}\n        message={false}\n        size={this.size}\n        aria-autocomplete=\"list\"\n        {...this.getComboboxA11yAttributes()}\n        onKeyUp={(e: KeyboardEvent) => {\n          if (e.key === KeyboardCode.ESC) {\n            this.closeFilterItems();\n          }\n        }}\n        onInputChange={(e: CustomEvent) => {\n          this.searchValue = e.detail.value;\n        }}\n      />\n    );\n  }\n\n  private renderCheckAll(): HTMLDivElement {\n    if (this.searchValue) {\n      return;\n    }\n\n    const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n    const allChecked = this.selectedCounter === this.itemsList.length;\n\n    return (\n      <div class=\"check-all-wrapper\">\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={allChecked}\n          htmlid={checkAllId}\n          class={this.getCheckboxClass()}\n          label={allChecked ? this.uncheckalltext : this.checkalltext}\n          disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n          role=\"option\"\n          aria-selected={allChecked ? \"true\" : \"false\"}\n          onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n          onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n          onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n        />\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        data-action={`combo-${this.inputid}`}\n        class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n        id={this.inputid}\n      >\n        {this.renderHeader()}\n        {!this.disabled && this.renderContent()}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm-es5/z-cover-hero.entry.js

@@ -1,2 +0,0 @@
-import{r as registerInstance,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{M as CoverHeroVariant,Q as CoverHeroContentPosition}from"./index-2255c6c8.js";var stylesCss=':host{--cover-hero-overlay:linear-gradient(270deg, #0000 0%, #000000e6 100%);--cover-hero-text-color:var(--color-text-inverse);display:block;overflow:hidden}:host,*{-webkit-box-sizing:border-box;box-sizing:border-box}:host .main-container{position:relative;width:100%;-ms-flex-align:baseline;align-items:baseline}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .main-container .cover-container{position:relative;width:100%;padding-top:calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));background-color:var(--gray600)}::slotted([slot="cover"]){position:absolute;display:block;width:100%;height:100%;inset:0;-o-object-fit:cover;object-fit:cover;-o-object-position:top center;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container{height:100%}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .cover-container{position:absolute;z-index:-1;height:100%;padding:0}:host([variant="overlay"]) .main-container .cover-container::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:""}:host([variant="overlay"]:is([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .content-container{position:absolute;inset:0}:host([variant="overlay"]) .main-container .content-container{height:100%;padding:var(--grid-margin)}:host([variant="stacked"]){--cover-hero-text-color:var(--color-default-text)}:host([variant="stacked"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}';var ZCoverHeroStyle0=stylesCss;var ZCoverHero=function(){function e(e){registerInstance(this,e);this.variant=CoverHeroVariant.OVERLAY;this.contentPosition=CoverHeroContentPosition.TOP;this.preserveAspectRatio=true}e.prototype.onImgLoad=function(e){var t=e.target;if(t instanceof Image&&t.closest("[slot=cover]")){var o=t.naturalWidth/t.naturalHeight;this.host.style.setProperty("--image-aspect-ratio",o.toString())}};e.prototype.renderContent=function(){return h("div",{class:"content-container"},h("slot",{name:"content"}))};e.prototype.render=function(){return h(Host,{key:"782c8ef237b2744069752392ab29176ae65bf798"},this.variant===CoverHeroVariant.STACKED&&this.contentPosition===CoverHeroContentPosition.TOP&&this.renderContent(),h("div",{key:"97f1b49350218a75b19946a46190c63c15f70058",class:"main-container"},h("div",{key:"2dc3210d8807b998ad1823bb2776d59a762f15dd",class:"cover-container"},h("slot",{key:"2ab5b85aa02c25ee81ecafb3db91e0e57df549b3",name:"cover"})),h("slot",{key:"a77f81fef651d1aae577079c4918cb26fb9af328",name:"info-reveal"}),this.variant===CoverHeroVariant.OVERLAY&&this.renderContent()),this.variant===CoverHeroVariant.STACKED&&this.contentPosition===CoverHeroContentPosition.BOTTOM&&this.renderContent())};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();ZCoverHero.style=ZCoverHeroStyle0;export{ZCoverHero as z_cover_hero};
-//# sourceMappingURL=z-cover-hero.entry.js.map