@zanichelli/albe-web-components 17.0.5-RC2 → 17.0.5

package/dist/web-components-library/p-5f04d9eb.entry.js

@@ -0,0 +1,2 @@
+import{r,c as t,h as o}from"./p-75c4a726.js";import{B as i}from"./p-5145a606.js";const a="button{display:flex;max-width:100%;height:36px;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{border-color:var(--color-primary01);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button.selected{border-color:var(--color-active-primary);background-color:var(--color-active-primary);color:var(--color-text-inverse);fill:var(--color-text-inverse)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}";const s=a;const e=class{constructor(o){r(this,o);this.buttonSortClick=t(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}emitButtonSortClick(){if(!this.isselected){this.isselected=true}else{this.sortasc=!this.sortasc}this.buttonSortClick.emit({buttonid:this.buttonid,sortAsc:this.sortasc})}componentDidLoad(){if(this.elementHasEllipsis()&&window.innerWidth>i.TABLET){this.allowTooltip=true}}setButtonTitle(){return this.allowTooltip?`${this.sortasc?this.label:this.desclabel}`:""}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return o("button",{key:"6f2fdeea8f8d8c233d6b06ce6a77a550ca003c43",title:this.setButtonTitle(),id:this.buttonid,class:{selected:this.isselected},onClick:()=>this.emitButtonSortClick()},o("span",{key:"2b73a9480490742c954d9f9319a035092e857313",ref:r=>this.ellipsis=r,class:"ellipsis"},!this.sortasc&&this.desclabel?this.desclabel:this.label),o("span",{key:"ffabdef711dfc8489d816c34fd7c52254ac8c89f",class:"counter"},this.counter&&` (${this.counter})`),o("span",{key:"7086a8caa5146d54b93affa0d901dbb60248d64b",class:"sort"},this.sortasc?this.sortlabelasc:this.sortlabeldesc),o("z-icon",{key:"17d0cce1ca76cc916bf8ff2af67570b755d5a12d",name:"caret-up-down",width:16,height:16}))}};e.style=s;export{e as z_button_sort};
+//# sourceMappingURL=p-5f04d9eb.entry.js.map

package/dist/web-components-library/p-5f04d9eb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZButtonSortStyle0","ZButtonSort","emitButtonSortClick","this","isselected","sortasc","buttonSortClick","emit","buttonid","sortAsc","componentDidLoad","elementHasEllipsis","window","innerWidth","Breakpoints","TABLET","allowTooltip","setButtonTitle","label","desclabel","ellipsis","offsetWidth","scrollWidth","render","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 {Breakpoints} 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 > Breakpoints.TABLET) {\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":"iFAAA,MAAMA,EAAY,i6CAClB,MAAAC,EAAeD,E,MCMFE,EAAW,M,yLAmBE,M,mBAIC,M,gBAIF,M,aAIH,K,kBAGL,K,CAQP,mBAAAC,GACN,IAAKC,KAAKC,WAAY,CACpBD,KAAKC,WAAa,I,KACb,CACLD,KAAKE,SAAWF,KAAKE,O,CAEvBF,KAAKG,gBAAgBC,KAAK,CACxBC,SAAUL,KAAKK,SACfC,QAASN,KAAKE,S,CAIlB,gBAAAK,GACE,GAAIP,KAAKQ,sBAAwBC,OAAOC,WAAaC,EAAYC,OAAQ,CACvEZ,KAAKa,aAAe,I,EAIhB,cAAAC,GACN,OAAOd,KAAKa,aAAe,GAAGb,KAAKE,QAAUF,KAAKe,MAAQf,KAAKgB,YAAc,E,CAGvE,kBAAAR,GACN,OAAOR,KAAKiB,SAASC,YAAclB,KAAKiB,SAASE,W,CAGnD,MAAAC,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,MAAOvB,KAAKc,iBACZU,GAAIxB,KAAKK,SACToB,MAAO,CAACC,SAAU1B,KAAKC,YACvB0B,QAAS,IAAM3B,KAAKD,uBAEpBsB,EAAA,QAAAC,IAAA,2CACEM,IAAMC,GAAQ7B,KAAKiB,SAAWY,EAC9BJ,MAAM,aAEJzB,KAAKE,SAAWF,KAAKgB,UAAYhB,KAAKgB,UAAYhB,KAAKe,OAE3DM,EAAA,QAAAC,IAAA,2CAAMG,MAAM,WAAWzB,KAAK8B,SAAW,KAAK9B,KAAK8B,YACjDT,EAAA,QAAAC,IAAA,2CAAMG,MAAM,QAAQzB,KAAKE,QAAUF,KAAK+B,aAAe/B,KAAKgC,eAC5DX,EAAA,UAAAC,IAAA,2CACEW,KAAK,gBACLC,MAAO,GACPC,OAAQ,K","ignoreList":[]}

package/dist/web-components-library/p-6e1ba2f0.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_thead}from"./p-4c462e7f.js";import"./p-75c4a726.js";
+//# sourceMappingURL=p-6e1ba2f0.entry.js.map

package/dist/web-components-library/p-7095262b.entry.js

@@ -0,0 +1,2 @@
+import{r,c as o,h as i}from"./p-75c4a726.js";const t="button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);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;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";const a=t;const e=class{constructor(i){r(this,i);this.toggleClick=o(this,"toggleClick",7);this.label=undefined;this.isdisabled=false;this.avoidclick=undefined;this.opened=false;this.ariaLabel=""}emitToggleClick(){if(this.isdisabled){return}this.opened=!this.opened;this.toggleClick.emit(this.opened)}render(){return i("button",{key:"6df0aee8dfd4785cd9787b2940c12cc3d680ef0c",tabindex:this.avoidclick?"-1":"0",class:{isopen:this.opened,"avoid-clicks":this.avoidclick},disabled:this.isdisabled,"aria-expanded":this.opened?"true":"false","aria-label":this.ariaLabel,onClick:()=>this.emitToggleClick()},i("z-icon",{key:"ab52cd6023b492b5bba8086fd189112e5329c3ad",name:this.opened?"chevron-down":"chevron-up",width:16,height:16}),this.label)}};e.style=a;export{e as z_toggle_button};
+//# sourceMappingURL=p-7095262b.entry.js.map

package/dist/web-components-library/p-7095262b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZToggleButtonStyle0","ZToggleButton","emitToggleClick","this","isdisabled","opened","toggleClick","emit","render","h","key","tabindex","avoidclick","class","isopen","disabled","ariaLabel","onClick","name","width","height","label"],"sources":["src/components/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/z-toggle-button/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  height: 36px;\n  align-items: center;\n  padding-right: calc(var(--space-unit) * 2);\n  padding-left: 0;\n  border: var(--border-size-medium) solid;\n  border-color: transparent;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);\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  text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\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:disabled {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n\nz-icon {\n  display: inline-block;\n  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\nbutton.isopen {\n  top: -20px;\n}\n\nbutton.avoid-clicks {\n  pointer-events: none;\n}\n","import {Component, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAY,6iCAClB,MAAAC,EAAeD,E,MCMFE,EAAa,M,uGAOD,M,sCAQJ,M,eAIP,E,CAMJ,eAAAC,GACN,GAAIC,KAAKC,WAAY,CACnB,M,CAGFD,KAAKE,QAAUF,KAAKE,OACpBF,KAAKG,YAAYC,KAAKJ,KAAKE,O,CAG7B,MAAAG,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,SAAUR,KAAKS,WAAa,KAAO,IACnCC,MAAO,CACLC,OAAUX,KAAKE,OACf,eAAgBF,KAAKS,YAEvBG,SAAUZ,KAAKC,WAAU,gBACVD,KAAKE,OAAS,OAAS,QAAO,aACjCF,KAAKa,UACjBC,QAAS,IAAMd,KAAKD,mBAEpBO,EAAA,UAAAC,IAAA,2CACEQ,KAAMf,KAAKE,OAAS,eAAiB,aACrCc,MAAO,GACPC,OAAQ,KAETjB,KAAKkB,M","ignoreList":[]}

package/dist/web-components-library/p-72dae90b.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,a as i,g as o}from"./p-75c4a726.js";import{x as s,D as r}from"./p-b34993de.js";const a=':host{--z-section-title--divider-color:var(--red500);display:flex;width:fit-content;flex-direction:column;align-items:flex-start;font-family:var(--font-family-sans)}:host,:host ::slotted(*){box-sizing:border-box}::slotted(*){margin:0}::slotted([slot="secondary-title"]){padding-bottom:calc(var(--space-unit) / 2);border-bottom:var(--border-size-large) solid var(--z-section-title--divider-color);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5rem;text-transform:uppercase}::slotted([slot="primary-title"]){font-size:var(--font-size-6);font-weight:var(--font-sb);line-height:2rem}:host([uppercase]:not([uppercase="false"])) ::slotted([slot="primary-title"]){text-transform:uppercase}@media (min-width: 1152px){::slotted([slot="primary-title"]){font-size:var(--font-size-7);line-height:2.25rem}}';const l=a;const n=class{constructor(e){t(this,e);this.dividerPosition=s.BEFORE;this.uppercase=true}componentWillRender(){this.hasSecondaryTitle=!!this.host.querySelector("[slot=secondary-title]")}render(){return e(i,{key:"cc1204e8c23b71671a14fbaedd761f748f277cfa"},e("slot",{key:"8272a7661bda0190963225a5ffaa192e22601363",name:"secondary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===s.BEFORE&&e("z-divider",{key:"7eae53ac6122253f61d985c79549ff65b85e10ff",size:r.LARGE,color:"z-section-title--divider-color"}),e("slot",{key:"9b86031ca0776ac5faae2393e62ad8104d5e804e",name:"primary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===s.AFTER&&e("z-divider",{key:"6d3de14737fc2187f8a32d5e27aeae12ab9e83c5",size:r.LARGE,color:"z-section-title--divider-color"}))}get host(){return o(this)}};n.style=l;export{n as z_section_title};
+//# sourceMappingURL=p-72dae90b.entry.js.map

package/dist/web-components-library/p-72dae90b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZSectionTitleStyle0","ZSectionTitle","ZSectionTitleDividerPosition","BEFORE","componentWillRender","this","hasSecondaryTitle","host","querySelector","render","h","Host","key","name","dividerPosition","size","DividerSize","LARGE","color","AFTER"],"sources":["src/components/z-section-title/styles.css?tag=z-section-title&encapsulation=shadow","src/components/z-section-title/index.tsx"],"sourcesContent":[":host {\n  --z-section-title--divider-color: var(--red500);\n\n  display: flex;\n  width: fit-content;\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n::slotted(*) {\n  margin: 0;\n}\n\n::slotted([slot=\"secondary-title\"]) {\n  padding-bottom: calc(var(--space-unit) / 2);\n  border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5rem;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"primary-title\"]) {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-sb);\n  line-height: 2rem;\n}\n\n:host([uppercase]:not([uppercase=\"false\"])) ::slotted([slot=\"primary-title\"]) {\n  text-transform: uppercase;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  ::slotted([slot=\"primary-title\"]) {\n    font-size: var(--font-size-7);\n    line-height: 2.25rem;\n  }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,ozBAClB,MAAAC,EAAeD,E,MCgBFE,EAAa,M,8CAMwBC,EAA6BC,O,eAMjE,I,CAMZ,mBAAAC,GACEC,KAAKC,oBAAsBD,KAAKE,KAAKC,cAAc,yB,CAGrD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,qBACTR,KAAKC,mBAAqBD,KAAKS,kBAAoBZ,EAA6BC,QAChFO,EAAA,aAAAE,IAAA,2CACEG,KAAMC,EAAYC,MAClBC,MAAM,mCAGVR,EAAA,QAAAE,IAAA,2CAAMC,KAAK,mBACTR,KAAKC,mBAAqBD,KAAKS,kBAAoBZ,EAA6BiB,OAChFT,EAAA,aAAAE,IAAA,2CACEG,KAAMC,EAAYC,MAClBC,MAAM,mC","ignoreList":[]}

package/dist/web-components-library/p-73d686e0.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as o,h as r}from"./p-75c4a726.js";import{e as i,$ as t}from"./p-b34993de.js";const e=':host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface03);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant="background"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant="background"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size="x-small"]) summary{--summary-height:var(--summary-x-small-height)}:host([size="small"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size="x-small"],[size="small"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant="background"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant="background"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:""}:host([highlight][variant="background"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant="background"]:not([open])) summary::before,:host([highlight][variant="background"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size="x-small"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size="x-small"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size="x-small"],[size="small"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size="x-small"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant="background"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2)}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}z-accordion+z-accordion{border-top:none}z-accordion[variant="background"]+z-accordion[variant="background"]{border-radius:0}z-accordion[variant="background"]:first-of-type:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant="background"]+z-accordion[variant="background"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant="background"]+z-accordion[variant="background"]::part(summary){border-radius:0}z-accordion[variant="background"]+z-accordion[variant="background"]:last-of-type:not([open])::part(summary){border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}';const s=e;const c=class{constructor(r){a(this,r);this.toggled=o(this,"toggled",7);this.label=undefined;this.icon=undefined;this.size=i.BIG;this.isDisabled=false;this.open=false;this.highlight=false;this.variant=t.DEFAULT;this.shadow=true}onDisabledChange(){if(this.isDisabled){this.open=false}}onDetailsToggle(){if(this.isDisabled){this.open=false;this.detailsElm.open=false;return}this.open=this.detailsElm.open;this.toggled.emit(this.open)}render(){return r("details",{key:"91b7f482ab659db2ce2c194d6c0e000a474b8fbc",ref:a=>this.detailsElm=a,onToggle:this.onDetailsToggle.bind(this),open:this.open},r("summary",{key:"dec93f741b0bf720f2e3ca27d80721924f7e96c0",tabIndex:this.isDisabled?-1:null,part:"summary"},this.icon&&r("z-icon",{key:"8943eca3e953b29025e17c15b9092538d2246442",class:"z-accordion-label-icon",name:this.icon}),r("span",{key:"2e6ba1c7a24fc12e07b159004f09d43e8f7938ae",class:"z-accordion-label"},this.label),r("span",{key:"165e5f2d9ca85454017ca9a93e672c9a31aa0951",class:"z-accordion-tags"},r("slot",{key:"5793cda10680845f990c279e8f4987b93a5d3b95",name:"tag"})),r("z-icon",{key:"e2fd79cf10045f11006eb6a5a996dba0b85fdc08",class:"z-accordion-chevron",name:this.open?"chevron-up":"chevron-down"})),!this.isDisabled&&r("div",{key:"98aff9373f60e83162ac5e13c92041c97f24803a",class:"z-accordion-content",part:"content"},r("slot",{key:"d663ae67768932cbdfce8b3e01d6d9ad5f37c41d"})))}static get watchers(){return{isDisabled:["onDisabledChange"]}}};c.style=s;export{c as z_accordion};
+//# sourceMappingURL=p-73d686e0.entry.js.map

package/dist/web-components-library/p-73d686e0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZAccordionStyle0","ZAccordion","ControlSize","BIG","AccordionVariant","DEFAULT","onDisabledChange","this","isDisabled","open","onDetailsToggle","detailsElm","toggled","emit","render","h","key","ref","elm","onToggle","bind","tabIndex","part","icon","class","name","label"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host *,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host {\n  --z-accordion-highlight-color: transparent;\n  --z-accordion-bg: var(--color-surface01);\n  --z-accordion-label-color: var(--color-default-text);\n  --z-accordion-disabled-label-color: var(--color-text03);\n  --z-accordion-content-bg: var(--color-surface01);\n  --z-accordion-content-fg: var(--color-default-text);\n  --z-accordion-hover-color: var(--color-surface03);\n  --z-accordion-left-padding: calc(var(--space-unit) * 2);\n  --z-accordion-right-padding: var(--space-unit);\n  --z-accordion-label-font-weight: var(--font-sb);\n\n  display: block;\n  border-top: var(--border-size-small) solid var(--color-surface03);\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\ndetails {\n  background-color: transparent;\n}\n\nsummary {\n  --summary-x-small-height: 32px;\n  --summary-small-height: 36px;\n  --summary-big-height: 44px;\n  --summary-height: var(--summary-big-height);\n  --summary-y-padding: var(--space-unit);\n\n  position: relative;\n  display: flex;\n  min-height: var(--summary-height);\n  align-items: center;\n  padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);\n  background-color: var(--z-accordion-bg);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  list-style: none;\n}\n\n/* remove marker on safari */\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n:host([size=\"x-small\"]) summary {\n  --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n  --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n  --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n  padding-right: calc(var(--space-unit) * 2);\n\n  /* border-radius of the accordion - width of the accordion's border */\n  border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n  cursor: default;\n}\n\nsummary:focus:focus-visible {\n  background-color: var(--z-accordion-hover-color);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: var(--space-unit);\n  height: 100%;\n  content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n  fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n  fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n  color: var(--z-accordion-label-color);\n  font-size: var(--font-size-3); /* for \"small\" and \"big\" sizes */\n  font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n  display: flex;\n  align-items: center;\n  column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n  margin-left: auto;\n}\n\n.z-accordion-content {\n  position: relative;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);\n  background-color: var(--z-accordion-content-bg);\n  color: var(--z-accordion-content-fg);\n  font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes */\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n  padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n  font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n  padding-right: calc(var(--space-unit) * 2);\n}\n\n:host([is-disabled]) .z-accordion-label {\n  color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n  --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n  --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n  summary:focus:focus-visible {\n    /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */\n    position: relative;\n    z-index: 1;\n  }\n\n  :host(:not([is-disabled])) summary:hover {\n    background-color: var(--z-accordion-hover-color);\n  }\n\n  :host(:not([is-disabled])) summary:hover .z-accordion-label {\n    text-decoration: underline;\n  }\n}\n\n/* force \"big\" variant on touch devices */\n@media (hover: none) {\n  :host([size]) summary {\n    --summary-height: var(--summary-big-height);\n    --summary-y-padding: var(--space-unit);\n  }\n\n  :host([size]) .z-accordion-label {\n    font-size: var(--font-size-3);\n  }\n\n  :host([size]) .z-accordion-content {\n    font-size: var(--font-size-2);\n  }\n\n  :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n    --z-icon-width: 18px;\n    --z-icon-height: 18px;\n  }\n}\n\n/* Style for sibling accordions in a stack context */\n\nz-accordion + z-accordion {\n  border-top: none;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"] {\n  border-radius: 0;\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type {\n  border-bottom-left-radius: var(--border-radius);\n  border-bottom-right-radius: var(--border-radius);\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]::part(summary) {\n  border-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary) {\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n","import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion {\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          <span class=\"z-accordion-tags\">\n            <slot name=\"tag\" />\n          </span>\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,y3LAClB,MAAAC,EAAeD,E,MCuBFE,EAAU,M,6GAiBdC,EAAYC,I,gBAMN,M,UAMN,M,eAMK,M,aAMgBC,EAAiBC,Q,YAMpC,I,CASC,gBAAAC,GACR,GAAIC,KAAKC,WAAY,CACnBD,KAAKE,KAAO,K,EAWR,eAAAC,GACN,GAAIH,KAAKC,WAAY,CACnBD,KAAKE,KAAO,MACZF,KAAKI,WAAWF,KAAO,MAEvB,M,CAGFF,KAAKE,KAAOF,KAAKI,WAAWF,KAC5BF,KAAKK,QAAQC,KAAKN,KAAKE,K,CAGzB,MAAAK,GACE,OACEC,EAAA,WAAAC,IAAA,2CACEC,IAAMC,GAA6BX,KAAKI,WAAaO,EACrDC,SAAUZ,KAAKG,gBAAgBU,KAAKb,MACpCE,KAAMF,KAAKE,MAEXM,EAAA,WAAAC,IAAA,2CACEK,SAAUd,KAAKC,YAAc,EAAI,KACjCc,KAAK,WAEJf,KAAKgB,MACJR,EAAA,UAAAC,IAAA,2CACEQ,MAAM,yBACNC,KAAMlB,KAAKgB,OAGfR,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,qBAAqBjB,KAAKmB,OACtCX,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,oBACVT,EAAA,QAAAC,IAAA,2CAAMS,KAAK,SAEbV,EAAA,UAAAC,IAAA,2CACEQ,MAAM,sBACNC,KAAMlB,KAAKE,KAAO,aAAe,mBAGnCF,KAAKC,YACLO,EAAA,OAAAC,IAAA,2CACEQ,MAAM,sBACNF,KAAK,WAELP,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/web-components-library/p-75808b47.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as e,h as s,a as t,g as a}from"./p-75c4a726.js";import{v as l}from"./p-b34993de.js";const o='.sc-z-file-upload-h{display:flex;flex-direction:column;align-items:flex-start;color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-upload-h .modal-wrapper.sc-z-file-upload{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}.sc-z-file-upload-h .modal-wrapper.sc-z-file-upload>.files-wrapper.sc-z-file-upload{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}.sc-z-file-upload-h .text-container.sc-z-file-upload{display:flex;flex-direction:column;margin:auto;text-align:center}.sc-z-file-upload-h .text-container.sc-z-file-upload .upload-link.sc-z-file-upload{color:var(--color-text-link-blue);cursor:pointer;text-decoration:underline}.sc-z-file-upload-h .text-container.sc-z-file-upload .upload-link.sc-z-file-upload:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none !important}.sc-z-file-upload-h .text-container.sc-z-file-upload .upload-link-text.sc-z-file-upload{margin-bottom:var(--space-unit)}.sc-z-file-upload-h input[type="file"].sc-z-file-upload{display:none}.sc-z-file-upload-h #title.sc-z-file-upload+#description.sc-z-file-upload{margin-top:var(--space-unit)}.sc-z-file-upload-h>*.sc-z-file-upload+z-button.sc-z-file-upload,.sc-z-file-upload-h>.files-container.sc-z-file-upload+*.sc-z-file-upload,.sc-z-file-upload-h>.files-container.sc-z-file-upload:not(:first-child){margin-top:calc(var(--space-unit) * 3)}.sc-z-file-upload-h>.files-container.hidden.sc-z-file-upload{display:none}.sc-z-file-upload-h>.files-container.sc-z-file-upload>.uploaded-files-label.sc-z-file-upload{margin-bottom:calc(var(--space-unit) * 2)}.sc-z-file-upload-h>.files-container.sc-z-file-upload>.files-wrapper.sc-z-file-upload{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}@media (min-width: 768px){.sc-z-file-upload-h>.container.sc-z-file-upload>z-button.sc-z-file-upload{align-self:flex-start}.sc-z-file-upload-h .modal-wrapper.sc-z-file-upload{padding:calc(var(--space-unit) * 3)}}@media (min-width: 1152px){.sc-z-file-upload-h .modal-wrapper.sc-z-file-upload{padding:calc(var(--space-unit) * 4)}}';const n=o;const r=class{constructor(s){i(this,s);this.fileInput=e(this,"fileInput",7);this.fileError=e(this,"fileError",7);this.type=l.DEFAULT;this.buttonVariant=undefined;this.acceptedFormat=undefined;this.fileMaxSize=undefined;this.mainTitle=undefined;this.description=undefined;this.uploadBtnLabel="allega";this.dragAndDropLabel="Rilascia i file in questa area per allegarli.";this.allowedFilesMessage=undefined;this.uploadClickableMessage="Carica";this.uploadMessage="o trascina dal tuo computer";this.errorModalTitle="Errore di caricamento";this.errorModalMessage=undefined;this.uploadedFilesLabel="File appena caricati";this.hasFileSection=true;this.inputName="z-file-upload";this.showErrors=true;this._type=this.type;this.files=[];this.invalidFiles=new Map}onFileRemoved(i){this.removeFile(i.detail)}fileDroppedListener(i){this.input.files=i.detail;this.checkFilesValidity(this.input.files)}async getFiles(){return this.files}async removeFile(i){const e=this.files;const s=e.findIndex((e=>e.name===i));if(s>=0){e.splice(s,1);this.files=[...e]}}checkFilesValidity(i){if(!i.length){return}Array.from(i).forEach((i=>{const e=i.size/1024/1024;const s=this.acceptedFormat.split(",").some((e=>i.name.toLowerCase().endsWith(e.trim())));const t=e<=this.fileMaxSize;if(t&&s&&!this.files.find((e=>e.name===i.name))){this.files=[...this.files,i];this.fileInput.emit(i);this.input.value="";return}const a=`Il file ${i.name} supera il limite di ${this.fileMaxSize}MB`;const l=`Il file ${i.name} ha un formato non supportato`;const o=[!t&&{cause:"size",message:a},!s&&{cause:"format",message:l}].filter(Boolean);this.invalidFiles.set(i.name,o);this.invalidFiles=new Map(this.invalidFiles);this.fileError.emit({file:i.name,errors:o})}))}resetErrors(){this.invalidFiles=new Map}onFilesChange(i){this.checkFilesValidity(i.target.files)}componentWillLoad(){const i=window.matchMedia("(max-width: 1151px)");this._type=i.matches?l.DEFAULT:this.type;i.addEventListener("change",(i=>{this._type=i.matches?l.DEFAULT:this.type}))}componentDidUpdate(){if(!this.showErrors||!this.invalidFiles.size){return}this.errorModal.open()}renderDescription(i){if(!this.description){return}return s("span",{id:"description",class:i},this.description)}renderAllowedFilesMessage(){let i="";let e="";if(this.acceptedFormat){const e=this.acceptedFormat.split(", ").map((i=>i.substring(1).toUpperCase())).join(", ");i=` nei formati ${e}`}if(this.fileMaxSize){e=` per un massimo di ${this.fileMaxSize}MB di peso`}const t=i||e?`Puoi allegare file${i}${e}.`:undefined;if(!this.allowedFilesMessage&&!t){return}return s("span",{class:"allowed-files-message body-3"},this.allowedFilesMessage||t)}renderFileSection(){if(!this.hasFileSection){return}return s("section",{class:{"files-container":true,hidden:!this.files.length}},s("div",{class:"uploaded-files-label heading-3-sb"},this.uploadedFilesLabel),s("div",{class:"files-wrapper"},s("slot",{name:"files"})))}renderInput(){return s("input",{type:"file",name:this.inputName,multiple:true,onChange:i=>this.onFilesChange(i),accept:this.acceptedFormat,ref:i=>this.input=i})}renderUploadButton(){return[s("z-button",{onClick:()=>this.input.click(),onKeyPress:i=>{if(i.code=="Space"||i.code=="Enter"){i.preventDefault();this.input.click()}},id:"fileSelect",variant:this.buttonVariant,icon:"upload"},this.uploadBtnLabel),this.renderInput()]}renderUploadLink(){return[this.renderInput(),s("span",{class:"body-1 upload-link-text"},s("span",{tabIndex:0,class:"body-1-sb upload-link",onClick:()=>this.input.click(),onKeyPress:i=>{if(i.code=="Space"||i.code=="Enter"){i.preventDefault();this.input.click()}}},this.uploadClickableMessage)," ",this.uploadMessage)]}renderDefaultMode(){return[this.renderDescription("body-3-sb"),this.renderAllowedFilesMessage(),this.renderFileSection(),this.renderUploadButton()]}renderDragDropMode(){return[this.renderFileSection(),s("z-dragdrop-area",{"drag-and-drop-label":this.dragAndDropLabel},s("div",{class:"text-container"},this.renderDescription("body-1"),this.renderUploadLink(),this.renderAllowedFilesMessage()))]}renderFileErrors(){return Array.from(this.invalidFiles).map((([i,e])=>{const t=`Il file ${i}`;return s("span",{class:"error-message"},"Il file ",s("span",{class:"body-3-sb"},i),e.map((({message:i})=>i.replace(t,""))).join(" e "),".")}))}render(){return s(t,{key:"ea57cc0462e4358d04bfc8f5709b61be50947e7a"},this.mainTitle&&s("div",{key:"59e23f66172333b963922832782a8ac89611acb9",id:"title",class:"heading-3-sb"},this.mainTitle),this._type==l.DEFAULT?this.renderDefaultMode():this.renderDragDropMode(),!!this.invalidFiles.size&&this.showErrors&&s("z-modal",{key:"64cb55a1c0fb491a9dd5b414a309b284e4f2d24e",modalid:`file-upload-${this.type}-error-modal`,ref:i=>this.errorModal=i,modaltitle:this.errorModalTitle,onModalClose:()=>this.resetErrors(),onModalBackgroundClick:()=>this.resetErrors()},s("div",{key:"255cf2140f1ca881f90df6952965abc8f364f4d0",slot:"modalContent"},s("div",{key:"03638b6b970c72c73ac7014f0c7848a032029963",class:"modal-wrapper body-3"},this.errorModalMessage?this.errorModalMessage:this.renderFileErrors()))))}get host(){return a(this)}};r.style=n;export{r as z_file_upload};
+//# sourceMappingURL=p-75808b47.entry.js.map

package/dist/web-components-library/p-75808b47.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZFileUploadStyle0","ZFileUpload","ZFileUploadType","DEFAULT","this","type","Map","onFileRemoved","e","removeFile","detail","fileDroppedListener","input","files","checkFilesValidity","getFiles","fileName","index","findIndex","file","name","splice","length","Array","from","forEach","fileSize","size","fileFormatOk","acceptedFormat","split","some","ext","toLowerCase","endsWith","trim","fileSizeOk","fileMaxSize","find","f","fileInput","emit","value","sizeError","formatError","errors","cause","message","filter","Boolean","invalidFiles","set","fileError","resetErrors","onFilesChange","target","componentWillLoad","mql","window","matchMedia","_type","matches","addEventListener","componentDidUpdate","showErrors","errorModal","open","renderDescription","cssClass","description","h","id","class","renderAllowedFilesMessage","fileFormatString","fileWeightString","fileFormat","map","string","substring","toUpperCase","join","defaultMessage","undefined","allowedFilesMessage","renderFileSection","hasFileSection","hidden","uploadedFilesLabel","renderInput","inputName","multiple","onChange","accept","ref","val","renderUploadButton","onClick","click","onKeyPress","code","preventDefault","variant","buttonVariant","icon","uploadBtnLabel","renderUploadLink","tabIndex","uploadClickableMessage","uploadMessage","renderDefaultMode","renderDragDropMode","dragAndDropLabel","renderFileErrors","prefix","replace","render","Host","key","mainTitle","modalid","modaltitle","errorModalTitle","onModalClose","onModalBackgroundClick","slot","errorModalMessage"],"sources":["src/components/file-upload/z-file-upload/styles.css?tag=z-file-upload&encapsulation=scoped","src/components/file-upload/z-file-upload/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host .modal-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2);\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n:host .modal-wrapper > .files-wrapper {\n  display: flex;\n  flex-direction: column;\n  margin: calc(var(--space-unit) * 4);\n  gap: var(--space-unit);\n}\n\n:host .text-container {\n  display: flex;\n  flex-direction: column;\n  margin: auto;\n  text-align: center;\n}\n\n:host .text-container .upload-link {\n  color: var(--color-text-link-blue);\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:host .text-container .upload-link:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host .text-container .upload-link-text {\n  margin-bottom: var(--space-unit);\n}\n\n:host input[type=\"file\"] {\n  display: none;\n}\n\n:host #title + #description {\n  margin-top: var(--space-unit);\n}\n\n:host > * + z-button,\n:host > .files-container + *,\n:host > .files-container:not(:first-child) {\n  margin-top: calc(var(--space-unit) * 3);\n}\n\n:host > .files-container.hidden {\n  display: none;\n}\n\n:host > .files-container > .uploaded-files-label {\n  margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > .files-container > .files-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: calc(var(--space-unit) * 2);\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host > .container > z-button {\n    align-self: flex-start;\n  }\n\n  :host .modal-wrapper {\n    padding: calc(var(--space-unit) * 3);\n  }\n}\n\n@media (min-width: 1152px) {\n  :host .modal-wrapper {\n    padding: calc(var(--space-unit) * 4);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h} from \"@stencil/core\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\n\nexport type ZFileUploadError = {cause: \"format\" | \"size\"; message: string};\n\n@Component({\n  tag: \"z-file-upload\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZFileUpload {\n  /** Prop indicating the file upload type - can be default or dragdrop */\n  @Prop({reflect: true})\n  type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n  /** Prop indicating the button variant*/\n  @Prop()\n  buttonVariant?: ButtonVariant;\n\n  /** Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" */\n  @Prop()\n  acceptedFormat?: string;\n\n  /** Max file dimension in Megabyte */\n  @Prop()\n  fileMaxSize?: number;\n\n  /** Title */\n  @Prop()\n  mainTitle?: string;\n\n  /** Description */\n  @Prop()\n  description?: string;\n\n  /** upoload button label */\n  @Prop()\n  uploadBtnLabel?: string = \"allega\";\n\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n  /** allowed file message */\n  @Prop()\n  allowedFilesMessage?: string;\n\n  /** upload clickable message */\n  @Prop()\n  uploadClickableMessage?: string = \"Carica\";\n\n  /** upload message */\n  @Prop()\n  uploadMessage?: string = \"o trascina dal tuo computer\";\n\n  /** error modal title */\n  @Prop()\n  errorModalTitle?: string = \"Errore di caricamento\";\n\n  /** error modal message */\n  @Prop()\n  errorModalMessage?: string;\n\n  /** loaded files label */\n  @Prop()\n  uploadedFilesLabel?: string = \"File appena caricati\";\n\n  /** uploaded files history rendering */\n  @Prop()\n  hasFileSection?: boolean = true;\n\n  /** Value to set on the file input's `name` attribute (for use with forms) */\n  @Prop()\n  inputName? = \"z-file-upload\";\n\n  /**\n   * Whether to show errors in the internal modal or leave the handling to the app.\n   * Errors will still be emitted.\n   */\n  @Prop()\n  showErrors = true;\n\n  /** Internal store of the component type. It will change when viewport goes from desktop to tablet/mobile and vice versa */\n  @State()\n  private _type: ZFileUploadType = this.type;\n\n  /** Files added by the user */\n  @State()\n  files: File[] = [];\n\n  /** Map of files whose upload caused an error and the relative errors, with the cause and a message */\n  @State()\n  invalidFiles: Map<string, ZFileUploadError[]> = new Map<string, ZFileUploadError[]>();\n\n  /** Emitted when user select one or more files */\n  @Event()\n  fileInput: EventEmitter<File>;\n\n  /**\n   * Emits an array of error messages related to one or more files not allowed.\n   * Emitted when some file is dropped or selected.\n   */\n  @Event()\n  fileError: EventEmitter<{file: string; errors: ZFileUploadError[]}>;\n\n  @Element() host: HTMLZFileUploadElement;\n\n  private input: HTMLInputElement;\n\n  private errorModal: HTMLZModalElement;\n\n  /** Listen `removeFile` event sent from z-file component */\n  @Listen(\"removeFile\")\n  onFileRemoved(e: CustomEvent): void {\n    this.removeFile(e.detail);\n  }\n\n  /** Listen fileDropped event sent from z-dragdrop-area component */\n  @Listen(\"fileDropped\")\n  fileDroppedListener(e: CustomEvent): void {\n    this.input.files = e.detail;\n    this.checkFilesValidity(this.input.files);\n  }\n\n  /** Get the list of uploaded files */\n  @Method()\n  async getFiles(): Promise<File[]> {\n    return this.files;\n  }\n\n  /** Remove a previously uploaded file */\n  @Method()\n  async removeFile(fileName: string): Promise<void> {\n    const files = this.files;\n    const index = files.findIndex((file) => file.name === fileName);\n    if (index >= 0) {\n      files.splice(index, 1);\n      this.files = [...files];\n    }\n  }\n\n  private checkFilesValidity(files: FileList): Map<string, string[]> {\n    if (!files.length) {\n      return;\n    }\n\n    Array.from(files).forEach((file: File) => {\n      const fileSize = file.size / 1024 / 1024;\n      const fileFormatOk = this.acceptedFormat\n        .split(\",\")\n        .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n      const fileSizeOk = fileSize <= this.fileMaxSize;\n      if (fileSizeOk && fileFormatOk && !this.files.find((f) => f.name === file.name)) {\n        this.files = [...this.files, file];\n        this.fileInput.emit(file);\n        this.input.value = \"\";\n\n        return;\n      }\n\n      const sizeError = `Il file ${file.name} supera il limite di ${this.fileMaxSize}MB`;\n      const formatError = `Il file ${file.name} ha un formato non supportato`;\n      const errors = [\n        !fileSizeOk && {cause: \"size\" as const, message: sizeError},\n        !fileFormatOk && {cause: \"format\" as const, message: formatError},\n      ].filter(Boolean);\n      this.invalidFiles.set(file.name, errors);\n      this.invalidFiles = new Map(this.invalidFiles); // trigger state update\n      this.fileError.emit({file: file.name, errors});\n    });\n  }\n\n  private resetErrors(): void {\n    this.invalidFiles = new Map<string, ZFileUploadError[]>();\n  }\n\n  private onFilesChange(e: Event): void {\n    this.checkFilesValidity((e.target as HTMLInputElement).files);\n  }\n\n  componentWillLoad(): void {\n    // force default type on mobile and tablet viewport\n    const mql = window.matchMedia(\"(max-width: 1151px)\");\n    this._type = mql.matches ? ZFileUploadType.DEFAULT : this.type;\n    mql.addEventListener(\"change\", (e) => {\n      this._type = e.matches ? ZFileUploadType.DEFAULT : this.type;\n    });\n  }\n\n  componentDidUpdate(): void {\n    if (!this.showErrors || !this.invalidFiles.size) {\n      return;\n    }\n\n    this.errorModal.open();\n  }\n\n  private renderDescription(cssClass): HTMLElement | undefined {\n    if (!this.description) {\n      return;\n    }\n\n    return (\n      <span\n        id=\"description\"\n        class={cssClass}\n      >\n        {this.description}\n      </span>\n    );\n  }\n\n  private renderAllowedFilesMessage(): HTMLElement {\n    let fileFormatString = \"\";\n    let fileWeightString = \"\";\n\n    if (this.acceptedFormat) {\n      const fileFormat = this.acceptedFormat\n        .split(\", \")\n        .map((string) => string.substring(1).toUpperCase())\n        .join(\", \");\n      fileFormatString = ` nei formati ${fileFormat}`;\n    }\n\n    if (this.fileMaxSize) {\n      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n    }\n\n    const defaultMessage =\n      fileFormatString || fileWeightString ? `Puoi allegare file${fileFormatString}${fileWeightString}.` : undefined;\n\n    if (!this.allowedFilesMessage && !defaultMessage) {\n      return;\n    }\n\n    return <span class=\"allowed-files-message body-3\">{this.allowedFilesMessage || defaultMessage}</span>;\n  }\n\n  private renderFileSection(): HTMLElement {\n    if (!this.hasFileSection) {\n      return;\n    }\n\n    return (\n      <section class={{\"files-container\": true, \"hidden\": !this.files.length}}>\n        <div class=\"uploaded-files-label heading-3-sb\">{this.uploadedFilesLabel}</div>\n        <div class=\"files-wrapper\">\n          <slot name=\"files\" />\n        </div>\n      </section>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        type=\"file\"\n        name={this.inputName}\n        multiple\n        onChange={(e) => this.onFilesChange(e)}\n        accept={this.acceptedFormat}\n        ref={(val) => (this.input = val)}\n      />\n    );\n  }\n\n  private renderUploadButton(): unknown[] {\n    return [\n      <z-button\n        onClick={() => this.input.click()}\n        onKeyPress={(e) => {\n          if (e.code == \"Space\" || e.code == \"Enter\") {\n            e.preventDefault();\n            this.input.click();\n          }\n        }}\n        id=\"fileSelect\"\n        variant={this.buttonVariant}\n        icon=\"upload\"\n      >\n        {this.uploadBtnLabel}\n      </z-button>,\n      this.renderInput(),\n    ];\n  }\n\n  private renderUploadLink(): unknown[] {\n    return [\n      this.renderInput(),\n      <span class=\"body-1 upload-link-text\">\n        <span\n          tabIndex={0}\n          class=\"body-1-sb upload-link\"\n          onClick={() => this.input.click()}\n          onKeyPress={(e) => {\n            if (e.code == \"Space\" || e.code == \"Enter\") {\n              e.preventDefault();\n              this.input.click();\n            }\n          }}\n        >\n          {this.uploadClickableMessage}\n        </span>{\" \"}\n        {this.uploadMessage}\n      </span>,\n    ];\n  }\n\n  private renderDefaultMode(): unknown[] {\n    return [\n      this.renderDescription(\"body-3-sb\"),\n      this.renderAllowedFilesMessage(),\n      this.renderFileSection(),\n      this.renderUploadButton(),\n    ];\n  }\n\n  private renderDragDropMode(): unknown[] {\n    return [\n      this.renderFileSection(),\n      <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n        <div class=\"text-container\">\n          {this.renderDescription(\"body-1\")}\n          {this.renderUploadLink()}\n          {this.renderAllowedFilesMessage()}\n        </div>\n      </z-dragdrop-area>,\n    ];\n  }\n\n  private renderFileErrors(): HTMLElement[] {\n    return Array.from(this.invalidFiles).map(([fileName, errors]) => {\n      const prefix = `Il file ${fileName}`;\n\n      return (\n        <span class=\"error-message\">\n          Il file <span class=\"body-3-sb\">{fileName}</span>\n          {errors.map(({message}) => message.replace(prefix, \"\")).join(\" e \")}.\n        </span>\n      );\n    });\n  }\n\n  render(): HTMLZFileUploadElement {\n    return (\n      <Host>\n        {this.mainTitle && (\n          <div\n            id=\"title\"\n            class=\"heading-3-sb\"\n          >\n            {this.mainTitle}\n          </div>\n        )}\n        {this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n        {!!this.invalidFiles.size && this.showErrors && (\n          <z-modal\n            modalid={`file-upload-${this.type}-error-modal`}\n            ref={(val) => (this.errorModal = val)}\n            modaltitle={this.errorModalTitle}\n            onModalClose={() => this.resetErrors()}\n            onModalBackgroundClick={() => this.resetErrors()}\n          >\n            <div slot=\"modalContent\">\n              <div class=\"modal-wrapper body-3\">\n                {this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()}\n              </div>\n            </div>\n          </z-modal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/web-components-library/p-758333dc.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as r}from"./p-75c4a726.js";import{Y as a}from"./p-b34993de.js";import{B as o}from"./p-5145a606.js";import{r as s}from"./p-e691c0b8.js";const n=':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;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: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%;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:flex;max-width:100%;height:calc(var(--space-unit) * 4);box-sizing:border-box;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;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.interactive:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}: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:flex;height:100%;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:flex;overflow:hidden;max-height:32px;flex-flow:row wrap;align-content:stretch;align-items:stretch;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 ::slotted([slot="header-cta"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:top;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:flex;width:100%;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 1) 0;color:var(--color-text-link-blue);cursor:pointer;fill:var(--color-text-link-blue);font-size:var(--font-size-2);font-weight:var(--font-sb);gap:var(--space-unit)}:host>article.expanded button.show-resources:focus{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:flex;height:100%;flex-direction:column;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:flex;height:24px;flex-flow:row nowrap;align-content:stretch;align-items:center;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;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);box-sizing:border-box;border:none;background:var(--color-white);border-radius:var(--border-radius) var(--border-radius) 0 0;box-shadow:var(--shadow-2)}:host>article.compact div.wrapper{display:flex;height:100%;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.compact div.content{display:flex;box-sizing:border-box;flex-flow:column nowrap;align-content:stretch;align-items:stretch;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;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;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:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;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:flex;overflow:hidden;width:100%;height:356px;flex-flow:column nowrap;align-content:stretch;align-items:stretch;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:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;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:fit-content;max-width:initial}}@media (min-width: 1366px){:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}';const d=n;const c=class{constructor(i){t(this,i);this.ribbonClick=e(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}emitRibbonClick(){this.ribbonClick.emit()}componentWillLoad(){this.id=`id-${s()}`;const t=window.matchMedia(`(max-width: ${o.MOBILE}px)`);this.isMobile=t.matches;t.onchange=t=>this.isMobile=t.matches}componentDidLoad(){this.handleResources()}handleResources(){var t;if(this.variant!==a.EXPANDED||!this.isMobile){return}this.hasResources=((t=this.hostElement.querySelectorAll("[slot=resources]"))===null||t===void 0?void 0:t.length)>0}toggleResources(){this.showResources=!this.showResources}renderCard(){switch(this.variant){case a.EXPANDED:return this.isMobile?this.renderMobileExpandedCard():this.renderExpandedCard();case a.COMPACT:return this.renderCompactCard();case a.SEARCH:return this.renderSearchCard()}}renderExpandedCard(){return i("div",{class:"wrapper"},this.renderCover(),i("div",{class:"content"},i("div",{class:"top"},i("div",{class:"info"},i("div",{class:"left"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),i("div",{class:"right"},this.renderHeaderCtaSlot())),this.renderTagsSlot()),i("div",{class:"bottom"},this.renderResourcesSlot())))}renderMobileExpandedCard(){return i("div",{class:"wrapper"},i("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),i("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn()),this.hasResources&&i("div",{class:{footer:true,open:this.showResources,close:!this.showResources}},!this.showResources&&this.renderShowResources(),this.renderResourcesSlot(),this.showResources&&this.renderShowResources()))}renderSearchCard(){return i("div",{class:"wrapper-container"},i("div",{class:"wrapper"},i("div",{class:"header"},this.renderOperaTitle(),this.renderHeaderCtaSlot()),this.renderCover(),i("div",{class:"content"},this.renderTagsSlot(),this.renderAuthors(),this.renderVolumeTitle(),this.renderIsbn())),this.renderFooterCtaSlot())}renderCompactCard(){return i("div",{class:"wrapper"},this.renderCover(),i("div",{class:"content"},this.renderAuthors(),this.renderOperaTitle(),this.renderVolumeTitle(),this.renderIsbn()),this.renderFooterCtaSlot())}renderCover(){return i("div",{class:"cover"},this.ribbon&&this.variant!==a.COMPACT&&this.renderRibbon(),i("div",{class:"img-wrapper"},i("img",{src:this.cover,onError:()=>{if(this.fallbackCover){this.cover=this.fallbackCover}},"aria-hidden":"true"})))}renderRibbon(){const t=[this.ribbonIcon&&i("z-icon",{name:this.ribbonIcon,width:16,height:16,fill:"color-inverse-icon"}),i("span",null,this.ribbon)];return this.ribbonInteractive?i("button",{class:"ribbon interactive",onClick:()=>this.emitRibbonClick()},t):i("div",{class:"ribbon"},t)}renderOperaTitle(){const t=this.operaTitleTag?`<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`:this.operaTitle;return i("div",{class:"title",innerHTML:t})}renderVolumeTitle(){return this.volumeTitle?i("div",{class:"subtitle"},this.volumeTitle):null}renderAuthors(){return this.authors?i("div",{class:"authors","aria-description":"Autori"},this.authors):null}renderIsbn(){return this.isbn?i("div",{class:"isbn"},i("span",{class:"code","aria-description":`ISBN ${this.isbnLabel}`},this.isbn),this.isbnLabel?i("span",{class:"label"}," ",this.isbnLabel):null):null}renderShowResources(){return i("button",{class:"show-resources","aria-label":`Risorse del libro ${this.operaTitle}`,"aria-expanded":this.showResources.toString(),"aria-controls":`resources-${this.id}`,onClick:()=>this.toggleResources()},this.showResources?"Chiudi":"Vedi tutto",i("z-icon",{name:this.showResources?"chevron-up":"chevron-down"}))}renderTagsSlot(){return i("div",{class:"tags"},i("slot",{name:"tags"}))}renderHeaderCtaSlot(){return i("slot",{name:"header-cta"})}renderResourcesSlot(){return i("div",{id:`resources-${this.id}`,class:"resources"},i("slot",{name:"resources",onSlotchange:()=>this.handleResources()}))}renderFooterCtaSlot(){return i("div",{class:"action-container"},i("slot",{name:"footer-cta"}))}render(){return i("article",{key:"a2248d9206aec07d317dddb8cb8d6061eccc7a53",class:{[this.variant]:true,borderless:!!this.borderless}},this.renderCard())}get hostElement(){return r(this)}};c.style=d;export{c as z_book_card_deprecated};
+//# sourceMappingURL=p-758333dc.entry.js.map

package/dist/web-components-library/p-758333dc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZBookCardDeprecatedStyle0","ZBookCardDeprecated","emitRibbonClick","this","ribbonClick","emit","componentWillLoad","id","randomId","mobileMediaQuery","window","matchMedia","Breakpoints","MOBILE","isMobile","matches","onchange","mql","componentDidLoad","handleResources","variant","BookCardDeprecatedVariant","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","borderless"],"sources":["src/components/deprecated/z-book-card-deprecated/styles.css?tag=z-book-card-deprecated&encapsulation=shadow","src/components/deprecated/z-book-card-deprecated/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.interactive:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\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:host > article ::slotted([slot=\"header-cta\"]:focus) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\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-text-link-blue);\n  cursor: pointer;\n  fill: var(--color-text-link-blue);\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 {BookCardDeprecatedVariant} from \"../../../beans\";\nimport {Breakpoints} 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-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBookCardDeprecated {\n  @Element() hostElement: HTMLZBookCardDeprecatedElement;\n\n  /**\n   * Card variant: expanded, compact, search\n   */\n  @Prop()\n  variant: BookCardDeprecatedVariant;\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: ${Breakpoints.MOBILE}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 !== BookCardDeprecatedVariant.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 BookCardDeprecatedVariant.EXPANDED:\n        return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n      case BookCardDeprecatedVariant.COMPACT:\n        return this.renderCompactCard();\n      case BookCardDeprecatedVariant.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 !== BookCardDeprecatedVariant.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(): HTMLZBookCardDeprecatedElement {\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/web-components-library/p-7af33b00.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as e}from"./p-75c4a726.js";import{P as n}from"./p-b34993de.js";import{d as s}from"./p-e691c0b8.js";import"./p-5145a606.js";const o=':host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-self:end;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;align-self:stretch}:host>div>div.content-wrapper>section{box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:"";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-primary01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}';const r=o;const l=class{emitFlipCard(i=false){this.flipCard.emit(i)}constructor(e){i(this,e);this.flipCard=t(this,"flipCard",7);this.data=undefined;this.htmltabindex=0;this.hiddenContent=false;this.tooltip=false;this.emitFlipCard=this.emitFlipCard.bind(this)}componentWillLoad(){this.setStringOrArray()}componentWillUpdate(){this.setStringOrArray()}componentDidRender(){this.handleContentHeight()}handleContentHeight(){if(!this.contentWrapper&&!this.infoWrapper){this.hiddenContent=false;return}if(this.contentWrapper.scrollHeight>this.contentWrapper.offsetHeight||this.infoWrapper.scrollHeight>this.infoWrapper.offsetHeight){const i=this.contentWrapper.offsetHeight-this.onlineLicenseWrapper.offsetHeight-this.offlineLicenseWrapper.offsetHeight;this.infoWrapper.style.height=`${i}px`;this.hiddenContent=true;return}this.hiddenContent=false}setStringOrArray(){if(typeof this.data==="string"){this.cardData=JSON.parse(this.data)}else{this.cardData=this.data}}renderCloseIcon(){return e("z-icon",{name:"multiply-circled-filled",height:18,width:18,onClick:()=>this.emitFlipCard(false),tabindex:this.htmltabindex,onKeyUp:i=>{s(i,this.emitFlipCard,false)}})}renderGeneralSection(){var i,t;const n=(i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.title;const s=(t=this===null||this===void 0?void 0:this.cardData)===null||t===void 0?void 0:t.description;return e("section",{class:`info-wrapper ${this.hiddenContent?"hidden":""}`,onClick:()=>{if(this.hiddenContent){this.tooltip=!this.tooltip}},ref:i=>this.infoWrapper=i},this.renderAuthor(),this.renderYear(),n,e("br",null),s)}renderAuthor(){var i;const t=(i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.author;if(!t){return null}return e("span",null,"Autore: ",e("b",null,t),e("br",null))}renderYear(){var i;const t=(i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.year;if(!t){return null}return e("span",null,"Anno: ",e("b",null,t),e("br",null))}renderTooltip(){if(!this.tooltip){return}if(!this.cardData){return}const{title:i,year:t,author:s,description:o}=this.cardData;return e("z-popover",{position:n.RIGHT,onClick:()=>this.tooltip=false},`${i} ${t} ${s} ${o}`)}setExpirationLicenseMessage(i){if(i==="online"&&this.cardData.onlineLicense.expired||i==="offline"&&this.cardData.offlineLicense.expired){return e("span",{class:"expired"},"SCADUTA")}if(i==="online"&&this.cardData.onlineLicense.expiring||i==="offline"&&this.cardData.offlineLicense.expiring){return e("span",{class:"expiring"},"IN SCADENZA")}}renderOnlineLicenseSection(){var i;if(!((i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.onlineLicense)){return}return e("section",{ref:i=>this.onlineLicenseWrapper=i},e("span",{class:"license-heading"},e("span",null,"Licenza online"),this.setExpirationLicenseMessage("online")),"Scadenza il ",e("b",null,this.cardData.onlineLicense.expiration),e("br",null))}renderOfflineLicenseSection(){var i;if(!((i=this===null||this===void 0?void 0:this.cardData)===null||i===void 0?void 0:i.offlineLicense)){return}return e("section",{ref:i=>this.offlineLicenseWrapper=i},e("span",{class:"license-heading"},e("span",null,"Licenza offline"),this.setExpirationLicenseMessage("offline")),"Scadenza il ",e("b",null,this.cardData.offlineLicense.expiration),e("br",null),"Installazioni disponibili: ",e("b",null,this.cardData.offlineLicense.installations))}render(){return e("div",{key:"0f8111d48191f306b232f8b9e167aeffced4674b"},this.renderCloseIcon(),e("div",{key:"57b77f2f3ad645cebb44d6a247d93c1e82b8f281",class:"content-wrapper",ref:i=>this.contentWrapper=i},this.renderGeneralSection(),this.renderTooltip(),this.renderOnlineLicenseSection(),this.renderOfflineLicenseSection()),e("div",{key:"226bd8e804cecfee34ff748a5d1936e68f6b2307",class:"cta-wrapper"},e("slot",{key:"2fc25a5fd61a0a04a44ceabb3372265424708f5f"})))}};l.style=r;export{l as z_myz_card_info};
+//# sourceMappingURL=p-7af33b00.entry.js.map

package/dist/web-components-library/p-7af33b00.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzCardInfoStyle0","ZMyzCardInfo","emitFlipCard","showBack","this","flipCard","emit","constructor","hostRef","bind","componentWillLoad","setStringOrArray","componentWillUpdate","componentDidRender","handleContentHeight","contentWrapper","infoWrapper","hiddenContent","scrollHeight","offsetHeight","height","onlineLicenseWrapper","offlineLicenseWrapper","style","data","cardData","JSON","parse","renderCloseIcon","h","name","width","onClick","tabindex","htmltabindex","onKeyUp","e","handleKeyboardSubmit","renderGeneralSection","title","_a","description","_b","class","tooltip","ref","el","renderAuthor","renderYear","author","year","renderTooltip","position","PopoverPosition","RIGHT","setExpirationLicenseMessage","type","onlineLicense","expired","offlineLicense","expiring","renderOnlineLicenseSection","expiration","renderOfflineLicenseSection","installations","render","key"],"sources":["src/snowflakes/myz/card/z-myz-card-info/styles.css?tag=z-myz-card-info&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-info/index.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  position: relative;\n  display: grid;\n  width: calc(100% + calc(var(--space-unit) * 2));\n  height: 402px;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);\n  border: var(--border-size-small) solid var(--color-primary01);\n  margin-left: calc(-1 * var(--space-unit));\n  background: var(--color-surface01);\n  border-radius: 0;\n  box-shadow: 0 2px 4px 0 rgb(66 69 72 / 35%);\n}\n\n:host > div > z-icon {\n  position: absolute;\n  top: var(--space-unit);\n  right: var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n}\n\n:host > div > div.cta-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-self: end;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper {\n  position: relative;\n  overflow: hidden;\n  align-self: stretch;\n}\n\n:host > div > div.content-wrapper > section {\n  box-sizing: border-box;\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface04);\n  color: var(--color-surface05);\n  font-size: 14px;\n  line-height: 20px;\n}\n\n:host > div > div.content-wrapper > section:last-child {\n  border-bottom: none;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n:host > div > div.content-wrapper > section.info-wrapper.hidden::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);\n  content: \"\";\n  pointer-events: none;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expired {\n  color: var(--color-primary01);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expiring {\n  color: var(--color-warning01);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > z-popover {\n  position: absolute;\n  top: 0;\n  left: calc(var(--space-unit) * 4);\n}\n","import {Component, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {DictionaryData, PopoverPosition} from \"../../../../beans\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/**\n * @slot  - content\n */\n@Component({\n  tag: \"z-myz-card-info\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardInfo {\n  /** dictionary info */\n  @Prop()\n  data: string | DictionaryData;\n\n  /** tabindex link attribute (optional) */\n  @Prop()\n  htmltabindex?: number = 0;\n\n  @State()\n  hiddenContent = false;\n\n  @State()\n  tooltip = false;\n\n  private cardData: DictionaryData;\n\n  private contentWrapper: HTMLElement;\n\n  private infoWrapper: HTMLElement;\n\n  private onlineLicenseWrapper: HTMLElement;\n\n  private offlineLicenseWrapper: HTMLElement;\n\n  /** flip card to front */\n  @Event()\n  flipCard: EventEmitter;\n\n  private emitFlipCard(showBack = false): void {\n    this.flipCard.emit(showBack);\n  }\n\n  constructor() {\n    this.emitFlipCard = this.emitFlipCard.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setStringOrArray();\n  }\n\n  componentWillUpdate(): void {\n    this.setStringOrArray();\n  }\n\n  componentDidRender(): void {\n    this.handleContentHeight();\n  }\n\n  private handleContentHeight(): void {\n    if (!this.contentWrapper && !this.infoWrapper) {\n      this.hiddenContent = false;\n\n      return;\n    }\n\n    if (\n      this.contentWrapper.scrollHeight > this.contentWrapper.offsetHeight ||\n      this.infoWrapper.scrollHeight > this.infoWrapper.offsetHeight\n    ) {\n      const height =\n        this.contentWrapper.offsetHeight -\n        this.onlineLicenseWrapper.offsetHeight -\n        this.offlineLicenseWrapper.offsetHeight;\n      this.infoWrapper.style.height = `${height}px`;\n      this.hiddenContent = true;\n\n      return;\n    }\n\n    this.hiddenContent = false;\n  }\n\n  private setStringOrArray(): void {\n    if (typeof this.data === \"string\") {\n      this.cardData = JSON.parse(this.data);\n    } else {\n      this.cardData = this.data;\n    }\n  }\n\n  private renderCloseIcon(): HTMLZIconElement {\n    return (\n      <z-icon\n        name=\"multiply-circled-filled\"\n        height={18}\n        width={18}\n        onClick={() => this.emitFlipCard(false)}\n        tabindex={this.htmltabindex}\n        onKeyUp={(e: KeyboardEvent) => {\n          handleKeyboardSubmit(e, this.emitFlipCard, false);\n        }}\n      />\n    );\n  }\n\n  private renderGeneralSection(): HTMLElement {\n    const title = this?.cardData?.title;\n    const description = this?.cardData?.description;\n\n    return (\n      <section\n        class={`info-wrapper ${this.hiddenContent ? \"hidden\" : \"\"}`}\n        onClick={() => {\n          if (this.hiddenContent) {\n            this.tooltip = !this.tooltip;\n          }\n        }}\n        ref={(el) => (this.infoWrapper = el)}\n      >\n        {this.renderAuthor()}\n        {this.renderYear()}\n        {title}\n        <br />\n        {description}\n      </section>\n    );\n  }\n\n  private renderAuthor(): HTMLSpanElement {\n    const author = this?.cardData?.author;\n    if (!author) {\n      return null;\n    }\n\n    return (\n      <span>\n        Autore: <b>{author}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderYear(): HTMLSpanElement {\n    const year = this?.cardData?.year;\n    if (!year) {\n      return null;\n    }\n\n    return (\n      <span>\n        Anno: <b>{year}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderTooltip(): HTMLZPopoverElement {\n    if (!this.tooltip) {\n      return;\n    }\n\n    if (!this.cardData) {\n      return;\n    }\n    const {title, year, author, description} = this.cardData;\n\n    return (\n      <z-popover\n        position={PopoverPosition.RIGHT}\n        onClick={() => (this.tooltip = false)}\n      >\n        {`${title} ${year} ${author} ${description}`}\n      </z-popover>\n    );\n  }\n\n  private setExpirationLicenseMessage(type: string): HTMLSpanElement {\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expired) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expired)\n    ) {\n      return <span class=\"expired\">SCADUTA</span>;\n    }\n\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expiring) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expiring)\n    ) {\n      return <span class=\"expiring\">IN SCADENZA</span>;\n    }\n  }\n\n  private renderOnlineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.onlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.onlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza online</span>\n          {this.setExpirationLicenseMessage(\"online\")}\n        </span>\n        Scadenza il <b>{this.cardData.onlineLicense.expiration}</b>\n        <br />\n      </section>\n    );\n  }\n\n  private renderOfflineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.offlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.offlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza offline</span>\n          {this.setExpirationLicenseMessage(\"offline\")}\n        </span>\n        Scadenza il <b>{this.cardData.offlineLicense.expiration}</b>\n        <br />\n        Installazioni disponibili: <b>{this.cardData.offlineLicense.installations}</b>\n      </section>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        {this.renderCloseIcon()}\n        <div\n          class=\"content-wrapper\"\n          ref={(el) => (this.contentWrapper = el)}\n        >\n          {this.renderGeneralSection()}\n          {this.renderTooltip()}\n          {this.renderOnlineLicenseSection()}\n          {this.renderOfflineLicenseSection()}\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/web-components-library/p-7f370d17.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,a as s,g as o}from"./p-75c4a726.js";import{U as n,V as r,p as a,g as l,P as h,i as c}from"./p-b34993de.js";import{g as p,d}from"./p-e691c0b8.js";import"./p-5145a606.js";const u=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;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{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-text-link-blue);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-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);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-background);--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:flex;align-items:center;column-gap:var(--space-unit)}}";const f=u;const m=class{constructor(e){t(this,e);this.clickOnNode=i(this,"clickOnNode",7);this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null;this.pathStyle=n.UNDERLINED;this.homepageVariant=r.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.viewPortWidth=undefined;this.hasOverflow=false;this.popoverEllipsisOpen=false}handleResize(){this.viewPortWidth=p();if(this.viewPortWidth!==a.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(t,i){if(t===a.MOBILE||i===a.MOBILE&&t===a.TABLET||i===a.MOBILE&&t===a.DESKTOP||i===a.MOBILE&&t===a.DESKTOP_WIDE||i===a.TABLET&&t===a.DESKTOP||i===a.TABLET&&t===a.DESKTOP_WIDE||i===a.DESKTOP&&t===a.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=p();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==a.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==a.MOBILE&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}initializeBreadcrumb(){if(this.viewPortWidth===a.MOBILE){this.pathsList=this.getPathsItemsList().filter((t=>!!t.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){for(let t=0;t<this.pathsList.length;t++){if(this.pathsList[t].text.length<=this.truncateChar){continue}if(this.truncatePosition>0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}else if(this.truncatePosition===0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition+1));this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}if(t!==this.pathsList.length-1){const i=this.truncateWithEllipsis(this.pathsList[t].text,this.truncateChar);this.currentEllipsisText=this.pathsList[t].text;this.pathsList[t].text=i;this.pathsList[t].hasTooltip=true;this.truncatePosition=t;return}}}truncateWithEllipsis(t,i){if(t.length<=i){return t}return t.substring(0,i-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((t=>({text:t.textContent,path:t.href,hasTooltip:false})))}renderHomepageNode(){return e("li",null,e("a",{class:{"homepage-text":this.homepageVariant===r.TEXT},href:this.homepageNode.path,onClick:t=>this.handlePreventFollowUrl(t,this.homepageNode),innerHTML:this.homepageVariant===r.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(t,i){if(this.preventFollowUrl){t.preventDefault();this.clickOnNode.emit(i.path)}}handleOverflowMenuAccessibility(t){const i=this.anchorElements.length;if(t.key===l.TAB){t.preventDefault();return}t.stopPropagation();const e=[l.ARROW_DOWN,l.ARROW_UP];if(e.includes(t.key)){t.preventDefault();if(t.key===l.ARROW_DOWN){this.currentIndex=i===this.currentIndex+1?0:this.currentIndex+1}if(t.key===l.ARROW_UP){this.currentIndex=this.currentIndex<=0?i-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(t.key===l.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return e("li",null,e("z-popover",{class:"hidden-paths-popover",ref:t=>this.collapsedElementsRef=t,bindTo:this.triggerButton,position:h.BOTTOM_RIGHT,closable:true,showArrow:true},e("div",{class:"popover-content"},e("z-list",null,e("z-list-group",{size:c.SMALL},this.collapsedElements.map(((t,i,s)=>e("div",null,e("z-list-element",{clickable:true},e("a",{class:"text-ellipsis",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onKeyDown:t=>this.handleOverflowMenuAccessibility(t),innerHTML:t.text})),i<s.length-1&&e("z-divider",{color:"color-surface03"})))))))),e("button",{class:"dots",ref:t=>this.triggerButton=t,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:t=>{d(t,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right"}))}renderMobileItems(){const t=this.pathsList[this.pathsList.length-1];if(!t){return}return e("li",null,e("a",{"aria-current":t.path?undefined:"page",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t)},e("z-icon",{name:"chevron-left"}),e("span",{class:{"missing-path":!t.path,"text-ellipsis":true}},t.text)))}renderItems(){let t;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((i,s)=>e("li",null,i.hasTooltip&&e("z-popover",{class:"full-path-tooltip",bindTo:t,open:this.popoverEllipsisOpen,position:h.BOTTOM_RIGHT,closable:false,showArrow:true},e("span",{class:"tooltip-content"},this.currentEllipsisText)),e("a",{class:{"missing-path":!i.path},ref:i=>t=i,"aria-current":i.path?undefined:"page",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i),onMouseOver:()=>{if(i.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(i.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:i.text}),s!==this.pathsList.length-1&&e("z-icon",{class:"separator",name:"chevron-right"}))))]}render(){return e(s,{key:"3d0996a611fe483de9a015c3ac5b25b06d5e302c",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},e("nav",{key:"8c45a561fcdebb6c7685010dc7105b6c756025e1",ref:t=>this.wrapElement=t,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===n.SEMIBOLD,underlined:this.pathStyle===n.UNDERLINED}},e("ol",{key:"5cbdbcb8a14a471ae6dbad1d5d7eeb4ca3c8482b"},this.viewPortWidth===a.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return o(this)}static get watchers(){return{maxNodesToShow:["handlePropChange"],viewPortWidth:["handleResizeUp"]}}};m.style=f;export{m as z_breadcrumb};
+//# sourceMappingURL=p-7f370d17.entry.js.map

package/dist/web-components-library/p-7f370d17.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZBreadcrumbStyle0","ZBreadcrumb","this","collapsedElements","currentIndex","truncatePosition","BreadcrumbPathStyle","UNDERLINED","BreadcrumbHomepageVariant","ICON","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","length","maxNodesToShow","splice","i","text","truncateChar","push","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","maxLength","substring","children","map","textContent","href","renderHomepageNode","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","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-text-link-blue);\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-text-link-blue);\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-text-link-blue);\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-background);\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/web-components-library/p-9187ce36.entry.js

@@ -0,0 +1,2 @@
+import{r,h as a}from"./p-75c4a726.js";const o="button{display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);align-items:center;justify-content:center;padding:0;border:none;border-left:var(--border-size-medium) solid var(--color-surface03);margin:0;background:none;border-radius:0 var(--border-radius) 0 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);outline:none}button:active,button:focus{color:var(--blue700);fill:var(--blue700)}button>span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;border-radius:var(--border-radius)}button:hover>span{background:var(--color-primary03)}button:focus>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-focus-primary)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}";const e=o;const t=class{constructor(a){r(this,a);this.icon=undefined;this.isdisabled=false;this.ariaLabel=""}render(){return a("button",{key:"976b2aee8131d78cb106eded23053f49f1feae3a",disabled:this.isdisabled,"aria-label":this.ariaLabel},a("span",{key:"ee919ad9fb6abc7a15fff984a5f46395354ed2b2"},a("z-icon",{key:"d0ff29cd1398bbfb0b0e68652c0b30b764f91398",name:this.icon,width:16,height:16})))}};t.style=e;export{t as z_myz_card_icon};
+//# sourceMappingURL=p-9187ce36.entry.js.map

package/dist/web-components-library/p-9187ce36.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzCardIconStyle0","ZMyzCardIcon","render","h","key","disabled","this","isdisabled","ariaLabel","name","icon","width","height"],"sources":["src/snowflakes/myz/card/z-myz-card-icon/styles.css?tag=z-myz-card-icon&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-icon/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  width: 42px;\n  width: calc(var(--space-unit) * 6);\n  height: calc(var(--space-unit) * 5);\n  height: calc(var(--space-unit) * 6);\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-left: var(--border-size-medium) solid var(--color-surface03);\n  margin: 0;\n  background: none;\n  border-radius: 0 var(--border-radius) 0 0;\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  outline: none;\n}\n\nbutton:active,\nbutton:focus {\n  color: var(--blue700);\n  fill: var(--blue700);\n}\n\nbutton > span {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: var(--border-radius);\n}\n\nbutton:hover > span {\n  background: var(--color-primary03);\n}\n\nbutton:focus > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2);\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n}\n\nbutton:disabled > span {\n  background: none;\n  box-shadow: var(--shadow-0);\n  pointer-events: none;\n}\n\nbutton:disabled > span > z-icon {\n  fill: var(--color-surface03);\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-myz-card-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardIcon {\n  /** icon name */\n  @Prop()\n  icon: string;\n\n  /** disabled status flag */\n  @Prop()\n  isdisabled = false;\n\n  /** description of the icon*/\n  @Prop()\n  ariaLabel = \"\";\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        disabled={this.isdisabled}\n        aria-label={this.ariaLabel}\n      >\n        <span>\n          <z-icon\n            name={this.icon}\n            width={16}\n            height={16}\n          />\n        </span>\n      </button>\n    );\n  }\n}\n"],"mappings":"sCAAA,MAAMA,EAAY,omCAClB,MAAAC,EAAeD,E,MCMFE,EAAY,M,6DAOV,M,eAID,E,CAEZ,MAAAC,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,SAAUC,KAAKC,WAAU,aACbD,KAAKE,WAEjBL,EAAA,QAAAC,IAAA,4CACED,EAAA,UAAAC,IAAA,2CACEK,KAAMH,KAAKI,KACXC,MAAO,GACPC,OAAQ,M","ignoreList":[]}

package/dist/web-components-library/p-9c4b7a51.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,g as i}from"./p-75c4a726.js";import{p as r}from"./p-b34993de.js";import{i as s,g as o,d as n}from"./p-e691c0b8.js";import"./p-5145a606.js";const a=':host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-size-medium) solid var(--color-background);grid-template:2 / 2;grid-template-areas:"center center" "left right"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}main z-icon:focus,footer .bullet-container .bullet:focus{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-background);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:"left center right"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}';const l=a;function d(t){return Array.isArray(t)&&t.every((t=>typeof t==="string"))}const h=class{constructor(e){t(this,e);this.slideshowid=undefined;this.data=undefined;this.device=undefined;this.currentSlide=0}watchData(){this.parseLinks()}componentWillLoad(){this.parseLinks();this.setDevice();window.addEventListener("resize",this.handleResize.bind(this))}componentDidRender(){this.setStyle()}handleResize(){this.setDevice();this.setStyle()}parseLinks(){var t;switch(typeof this.data){case"string":{const e=(t=s(this.data))!==null&&t!==void 0?t:[];if(!d(e)){throw new Error("Passed data is invalid")}this.links=e;break}default:this.links=this.data;break}}setStyle(){const t=this.el.shadowRoot.querySelector("#slides");if(!t){return}const e=this.el.shadowRoot.querySelectorAll(".slide");const i=this.el.offsetWidth;const r=i*this.links.length;t.style.width=`${r}px`;t.style.transform=`translate(-${i*this.currentSlide}px)`;e.forEach((t=>{const e=t.querySelector("img");e.style.width=`${i}px`}))}setDevice(){this.device=o()}setCurrentSlide(t){this.currentSlide=t}getBulletDimension(){switch(this.device){case r.MOBILE:return 24;case r.TABLET:return 32;default:return 40}}renderSlides(t){return e("div",{id:"slides"},t.map(((t,i)=>e("div",{id:"slide"+i,class:`slide ${this.currentSlide!==i&&"hide"}`},e("img",{src:t})))))}renderScroll(t){let i=false,r=this.currentSlide;if(t==="left"){i=this.currentSlide===0;r--}else if(t==="right"){i=this.currentSlide===this.links.length-1;r++}return e("z-icon",{class:`scroll ${t} ${i&&"disabled"}`,width:this.getBulletDimension(),height:this.getBulletDimension(),name:`chevron-${t}-circle`,onClick:()=>{!i&&this.setCurrentSlide(r)},onKeyUp:t=>!i&&n(t,(()=>{this.setCurrentSlide(r)})),tabindex:0,role:"button"})}renderSlideshowMain(){return e("main",null,this.renderScroll("left"),this.renderSlides(this.links),this.renderScroll("right"))}renderBullet(t){return e("a",{class:`bullet ${this.currentSlide===t&&"selected"}`,onClick:()=>this.setCurrentSlide(t),onKeyUp:e=>n(e,(()=>this.setCurrentSlide(t))),tabindex:0,role:"button"})}renderSlideshowFooter(){return e("footer",null,e("div",{class:"footer-left"},e("slot",{name:"footer-left"})),e("div",{class:"footer-center"},e("div",{class:"bullet-container"},Object.keys(this.links).map((t=>this.renderBullet(parseInt(t)))))),e("div",{class:"footer-right"},e("slot",{name:"footer-right"})))}render(){if(!this.links||!this.links.length){return e("div",null)}return e("div",{id:this.slideshowid},this.renderSlideshowMain(),this.renderSlideshowFooter())}get el(){return i(this)}static get watchers(){return{data:["watchData"]}}};h.style=l;export{h as z_slideshow};
+//# sourceMappingURL=p-9c4b7a51.entry.js.map

package/dist/web-components-library/p-9c4b7a51.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZSlideshowStyle0","isStringArray","data","Array","isArray","every","datum","ZSlideshow","watchData","this","parseLinks","componentWillLoad","setDevice","window","addEventListener","handleResize","bind","componentDidRender","setStyle","parsed","_a","convertJson","Error","links","refSlides","el","shadowRoot","querySelector","allImages","querySelectorAll","width","offsetWidth","fullwidth","length","style","transform","currentSlide","forEach","item","img","device","getDevice","setCurrentSlide","index","getBulletDimension","Device","MOBILE","TABLET","renderSlides","items","h","id","map","i","class","src","renderScroll","direction","disabled","nextSlide","height","name","onClick","onKeyUp","e","handleKeyboardSubmit","tabindex","role","renderSlideshowMain","renderBullet","renderSlideshowFooter","Object","keys","parseInt","render","slideshowid"],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: inherit;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: flex;\n  width: inherit;\n  flex-direction: column;\n}\n\nmain {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n}\n\nmain z-icon.scroll {\n  position: absolute;\n  z-index: 10;\n  top: 50%;\n  width: auto;\n  margin: 0 var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\nmain .scroll.right {\n  right: 0;\n}\n\n#slides {\n  display: flex;\n  flex-wrap: wrap;\n  line-height: 0px;\n  overflow-y: hidden;\n  transition: all 300ms;\n}\n\nfooter {\n  display: grid;\n  width: 100%;\n  height: 56px;\n  align-items: center;\n  border-top: var(--border-size-medium) solid var(--color-background);\n  grid-template: 2 / 2;\n  grid-template-areas: \"center center\" \"left right\";\n}\n\nfooter > div {\n  width: 100%;\n  align-items: center;\n}\n\nfooter .footer-center {\n  grid-area: center;\n}\n\nfooter .footer-left {\n  grid-area: left;\n}\n\nfooter .footer-right {\n  grid-area: right;\n}\n\nfooter .bullet-container {\n  display: flex;\n  min-height: 60px;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto;\n}\n\nfooter .bullet-container .bullet {\n  width: 8px;\n  height: 8px;\n  margin: var(--space-unit) 2px;\n  background-color: var(--gray200);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\nfooter .bullet-container .bullet.selected {\n  background-color: var(--gray400);\n}\n\nmain z-icon:focus,\nfooter .bullet-container .bullet:focus {\n  border-radius: 50%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n/* Tablet breakpoint */\n\n@media only screen and (min-width: 768px) {\n  footer {\n    height: 76px;\n    border-top: var(--border-size-medium) solid var(--color-background);\n    grid-template: 1 / 1fr 2fr 1fr;\n    grid-template-areas: \"left center right\";\n  }\n\n  footer .bullet-container .bullet {\n    width: 10px;\n    height: 10px;\n    margin: var(--space-unit) 3px;\n  }\n}\n\n/* Desktop breakpoint */\n\n@media only screen and (min-width: 1025px) {\n  main z-icon.scroll {\n    margin: 0 10px;\n  }\n\n  footer .bullet-container .bullet {\n    width: 16px;\n    height: 16px;\n    margin: var(--space-unit) calc(var(--space-unit) * 0.5);\n    cursor: pointer;\n    pointer-events: auto;\n  }\n}\n","import {Component, Element, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {convertJson, getDevice, handleKeyboardSubmit} from \"../../../utils/utils\";\n\n/**\n * Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n */\nfunction isStringArray(data: unknown): data is string[] {\n  return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/**\n * @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n */\n@Component({\n  tag: \"z-slideshow\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSlideshow {\n  @Element() el: HTMLZSlideshowElement;\n\n  /** slideshow id */\n  @Prop()\n  slideshowid: string;\n\n  /** array or JSON stringified images urls */\n  @Prop()\n  data: string[] | string;\n\n  @State()\n  device: Device;\n\n  @State()\n  currentSlide = 0;\n\n  private links: string[];\n\n  @Watch(\"data\")\n  watchData(): void {\n    this.parseLinks();\n  }\n\n  componentWillLoad(): void {\n    this.parseLinks();\n\n    this.setDevice();\n    window.addEventListener(\"resize\", this.handleResize.bind(this));\n  }\n\n  componentDidRender(): void {\n    this.setStyle();\n  }\n\n  private handleResize(): void {\n    this.setDevice();\n    this.setStyle();\n  }\n\n  private parseLinks(): void {\n    switch (typeof this.data) {\n      case \"string\": {\n        const parsed = convertJson(this.data) ?? [];\n        if (!isStringArray(parsed)) {\n          throw new Error(\"Passed data is invalid\");\n        }\n\n        this.links = parsed;\n        break;\n      }\n      default:\n        this.links = this.data;\n        break;\n    }\n  }\n\n  private setStyle(): void {\n    const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n    if (!refSlides) {\n      return;\n    }\n\n    const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n    const width = this.el.offsetWidth;\n    const fullwidth = width * this.links.length;\n\n    refSlides.style.width = `${fullwidth}px`;\n    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n    allImages.forEach((item: HTMLElement) => {\n      const img = item.querySelector(\"img\");\n      img.style.width = `${width}px`;\n    });\n  }\n\n  private setDevice(): void {\n    this.device = getDevice();\n  }\n\n  private setCurrentSlide(index: number): void {\n    this.currentSlide = index;\n  }\n\n  private getBulletDimension(): number {\n    switch (this.device) {\n      case Device.MOBILE:\n        return 24;\n      case Device.TABLET:\n        return 32;\n      default:\n        return 40;\n    }\n  }\n\n  private renderSlides(items: string[]): HTMLElement {\n    return (\n      <div id=\"slides\">\n        {items.map((item: string, i: number) => (\n          <div\n            id={\"slide\" + i}\n            class={`slide ${this.currentSlide !== i && \"hide\"}`}\n          >\n            <img src={item} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  private renderScroll(direction: \"left\" | \"right\"): HTMLZIconElement {\n    let disabled = false,\n      nextSlide = this.currentSlide;\n\n    if (direction === \"left\") {\n      disabled = this.currentSlide === 0;\n      nextSlide--;\n    } else if (direction === \"right\") {\n      disabled = this.currentSlide === this.links.length - 1;\n      nextSlide++;\n    }\n\n    return (\n      <z-icon\n        class={`scroll ${direction} ${disabled && \"disabled\"}`}\n        width={this.getBulletDimension()}\n        height={this.getBulletDimension()}\n        name={`chevron-${direction}-circle`}\n        onClick={() => {\n          !disabled && this.setCurrentSlide(nextSlide);\n        }}\n        onKeyUp={(e: KeyboardEvent) =>\n          !disabled &&\n          handleKeyboardSubmit(e, () => {\n            this.setCurrentSlide(nextSlide);\n          })\n        }\n        tabindex={0}\n        role=\"button\"\n      />\n    );\n  }\n\n  private renderSlideshowMain(): HTMLElement {\n    return (\n      <main>\n        {this.renderScroll(\"left\")}\n        {this.renderSlides(this.links)}\n        {this.renderScroll(\"right\")}\n      </main>\n    );\n  }\n\n  private renderBullet(i: number): HTMLElement {\n    return (\n      <a\n        class={`bullet ${this.currentSlide === i && \"selected\"}`}\n        onClick={() => this.setCurrentSlide(i)}\n        onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n        tabindex={0}\n        role=\"button\"\n      ></a>\n    );\n  }\n\n  private renderSlideshowFooter(): HTMLElement {\n    return (\n      <footer>\n        <div class=\"footer-left\">\n          <slot name=\"footer-left\" />\n        </div>\n        <div class=\"footer-center\">\n          <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n        </div>\n        <div class=\"footer-right\">\n          <slot name=\"footer-right\" />\n        </div>\n      </footer>\n    );\n  }\n\n  render(): HTMLElement {\n    if (!this.links || !this.links.length) {\n      return <div />;\n    }\n\n    return (\n      <div id={this.slideshowid}>\n        {this.renderSlideshowMain()}\n        {this.renderSlideshowFooter()}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/web-components-library/p-aa0b3e7a.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as a,a as n,g as e}from"./p-75c4a726.js";import{N as o,a as s,b as r}from"./p-b34993de.js";const l='z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--blue800)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-primary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}';const h=l;const c=class{constructor(a){t(this,a);this.selected=i(this,"selected",7);this.focusedTab=undefined;this.ariaLabel="";this.orientation=o.HORIZONTAL;this.size=s.BIG;this.selectedTab=undefined;this.canNavigate=undefined;this.canNavigatePrev=undefined;this.canNavigateNext=undefined}get direction(){return this.orientation==o.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==o.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.nav.children)}scrollToTab(t){const i=this.orientation===o.HORIZONTAL?{block:"nearest",inline:"center"}:{block:"center",inline:"nearest"};t.scrollIntoView(Object.assign({behavior:"smooth"},i))}navigateBackwards(){this.nav.scrollBy({[this.direction.toLowerCase()]:0-this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateForward(){this.nav.scrollBy({[this.direction.toLowerCase()]:this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}isArrowNavigation(t){return Object.values(r).includes(t.key)}checkScrollVisible(){if(!this.nav){return}this.canNavigate=this.nav[`scroll${this.dimension}`]>this.nav[`client${this.dimension}`]}checkScrollEnabled(){if(!this.nav){return}this.canNavigateNext=this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]<this.nav[`scroll${this.dimension}`];this.canNavigatePrev=this.nav[`scroll${this.direction}`]>0}onTabSelected(){this.tabs.forEach(((t,i)=>{const a=t.querySelector("z-icon");const n=a===null||a===void 0?void 0:a.name.replace("-filled","");if(i!==this.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;if(a){a.name=n}return}if(a){a.name=`${n}-filled`}t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}}handleTabClick(t){const i=t.target.closest("[role='tab']");if(!this.tabs.some((t=>t.contains(i)))){return}this.selectedTab=this.tabs.indexOf(i)}onTabFocusIn(t){const i=this.tabs.findIndex((i=>i.contains(t.target)));if(i===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=i;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])}navigateThroughTabs(t){if(!this.tabs.some((i=>i.contains(t.target)))||!this.isArrowNavigation(t)){return true}t.preventDefault();if(t.key===r.RIGHT&&this.orientation==o.HORIZONTAL||t.key===r.DOWN&&this.orientation==o.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(t.key===r.LEFT&&this.orientation==o.HORIZONTAL||t.key===r.UP&&this.orientation==o.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(t)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])}onTabFocusOut(t){var i;if(!this.tabs.some((i=>i.contains(t.relatedTarget)))){this.tabs[(i=this.selectedTab)!==null&&i!==void 0?i:0].tabIndex=0;this.focusedTab=undefined}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.checkScrollVisible()))}componentDidLoad(){var t;this.tabs.forEach((t=>{t.setAttribute("role","tab");t.tabIndex=-1}));const i=(t=this.selectedTab)!==null&&t!==void 0?t:this.tabs.findIndex((t=>t.ariaSelected==="true"));if(i!==-1){this.selectedTab=i;this.tabs[i].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){return a(n,{key:"8f134ce69da30cd0a053700a95c39a4ec9d588ed",class:{"interactive-2":this.size===s.SMALL,"interactive-1":this.size!==s.SMALL},scrollable:this.canNavigate},a("button",{key:"231f97991908054d424dbcc83fd7e65e6651e767",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},a("z-icon",{key:"145b4e6220e14acfbe6c13d1da095128096064c1",name:this.orientation===o.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),a("nav",{key:"111d66f763a80c52fdd21a906028cb7aa4817ee7",role:"tablist","aria-label":this.ariaLabel,ref:t=>this.nav=t!==null&&t!==void 0?t:this.nav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},a("slot",{key:"ea3edcae8daaa4b5ad1124957d47d05f899f3bc2"})),a("button",{key:"b5329374d042f246c785b868a87bcf5a39d2c712",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},a("z-icon",{key:"373978c44182a33ca9d844eb3fa6c6991511d63f",name:this.orientation===o.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return e(this)}static get watchers(){return{canNavigate:["checkScrollEnabled"],selectedTab:["onTabSelected"]}}};c.style=h;export{c as z_navigation_tabs};
+//# sourceMappingURL=p-aa0b3e7a.entry.js.map