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

package/www/build/p-4dd8d4e8.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,a as c}from"./p-10bb4f4b.js";import{r as i}from"./p-955da62e.js";import{k as a}from"./p-025f494e.js";import"./p-2c886e8b.js";const l='.sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type="checkbox"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}';const o=l;const r=class{constructor(s){e(this,s);this.toggleClick=t(this,"toggleClick",7);this.disabled=false;this.labelPosition=a.LEFT;this.checked=false;this.htmlid=`toggle-switch-id-${i()}`}emitToggleClick(){this.toggleClick.emit({id:this.htmlid,checked:this.checked})}handleClick(e){if(this.disabled){return}this.checked=e.target.checked;this.emitToggleClick()}render(){return s(c,{key:"1fcac74eda8db17b3d535d2138ee9637ef7779b5"},s("input",{key:"90d27860c20def96928eb87c9df301d9df1226c0",id:this.htmlid,type:"checkbox",checked:this.checked,disabled:this.disabled,onChange:this.handleClick.bind(this)}),s("label",{key:"be5a0eec29f493ac91c2fafbba54afcfa8f50f50",htmlFor:this.htmlid,class:{[this.labelPosition]:true,disabled:this.disabled}},s("span",{key:"b336633b42383d0aef29ec775e3b18aca42bf096"},s("slot",{key:"9f8d563f0bae08144106f32c1018cbd40b6b5bc6"})),s("span",{key:"176481146a6df0f575fc364fabd2dc2ea1b00b54",class:{container:true,disabled:this.disabled,checked:this.checked}},s("span",{key:"8a1227658fb1fdc68523a3947c7b8f55b63baa89",class:"circle"},this.checked&&s("z-icon",{width:12,height:12,name:"checkmark"})))))}};r.style=o;export{r as z_toggle_switch};
-//# sourceMappingURL=p-4dd8d4e8.entry.js.map

package/www/build/p-4dd8d4e8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZToggleSwitchStyle0","ZToggleSwitch","LabelPosition","LEFT","randomId","emitToggleClick","this","toggleClick","emit","id","htmlid","checked","handleClick","ev","disabled","target","render","h","Host","key","type","onChange","bind","htmlFor","class","labelPosition","container","width","height","name"],"sources":["src/components/buttons/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/buttons/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n}\n\nlabel.disabled {\n  cursor: default;\n}\n\nlabel.right {\n  flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n  color: var(--color-default-text);\n  letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n  margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n  margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n  position: relative;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 4);\n  height: 18px;\n  align-items: center;\n  background-color: var(--gray500);\n  border-radius: var(--space-unit);\n  color: var(--gray500);\n  cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n  background-color: var(--color-disabled01);\n  cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n  fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n  background-color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n  outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n  background-color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  background-color: var(--color-white);\n  border-radius: 7px;\n  box-shadow: var(--shadow-1);\n  transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n  transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport {LabelPosition} from \"../../../beans\";\n\n@Component({\n  tag: \"z-toggle-switch\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZToggleSwitch {\n  /** Disabled flag */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** Label position */\n  @Prop({reflect: true})\n  labelPosition? = LabelPosition.LEFT;\n\n  /** Checked state */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** HTML id attribute to set to the internal checkbox */\n  @Prop()\n  htmlid = `toggle-switch-id-${randomId()}`;\n\n  /** Toggle click event */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    this.toggleClick.emit({\n      id: this.htmlid,\n      checked: this.checked,\n    });\n  }\n\n  private handleClick(ev): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = ev.target.checked;\n    this.emitToggleClick();\n  }\n\n  render(): HTMLZToggleSwitchElement {\n    return (\n      <Host>\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.handleClick.bind(this)}\n        />\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            [this.labelPosition]: true,\n            disabled: this.disabled,\n          }}\n        >\n          <span>\n            <slot />\n          </span>\n          <span\n            class={{\n              container: true,\n              disabled: this.disabled,\n              checked: this.checked,\n            }}\n          >\n            <span class=\"circle\">\n              {this.checked && (\n                <z-icon\n                  width={12}\n                  height={12}\n                  name=\"checkmark\"\n                ></z-icon>\n              )}\n            </span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yJAAA,MAAMA,EAAY,05EAClB,MAAAC,EAAeD,E,MCSFE,EAAa,M,gFAGH,M,mBAIJC,EAAcC,K,aAIX,M,YAIX,oBAAoBC,K,CAMrB,eAAAC,GACNC,KAAKC,YAAYC,KAAK,CACpBC,GAAIH,KAAKI,OACTC,QAASL,KAAKK,S,CAIV,WAAAC,CAAYC,GAClB,GAAIP,KAAKQ,SAAU,CACjB,M,CAGFR,KAAKK,QAAUE,EAAGE,OAAOJ,QACzBL,KAAKD,iB,CAGP,MAAAW,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CACEV,GAAIH,KAAKI,OACTU,KAAK,WACLT,QAASL,KAAKK,QACdG,SAAUR,KAAKQ,SACfO,SAAUf,KAAKM,YAAYU,KAAKhB,QAElCW,EAAA,SAAAE,IAAA,2CACEI,QAASjB,KAAKI,OACdc,MAAO,CACL,CAAClB,KAAKmB,eAAgB,KACtBX,SAAUR,KAAKQ,WAGjBG,EAAA,QAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CACEK,MAAO,CACLE,UAAW,KACXZ,SAAUR,KAAKQ,SACfH,QAASL,KAAKK,UAGhBM,EAAA,QAAAE,IAAA,2CAAMK,MAAM,UACTlB,KAAKK,SACJM,EAAA,UACEU,MAAO,GACPC,OAAQ,GACRC,KAAK,iB"}

package/www/build/p-5441ba83.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as e}from"./p-10bb4f4b.js";import{q as r}from"./p-025f494e.js";const t=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{color:var(--color-primary01);fill:var(--color-primary01);font-size:12px;font-weight:var(--font-sb)}:host>z-pocket>z-pocket-header span.badge{display:inline-block;padding:0 calc(var(--space-unit) * 0.5);margin-left:var(--space-unit);background:var(--color-secondary02);border-radius:50%;color:var(--color-surface01)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;padding:var(--space-unit);margin:0 var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgb(255 0 0 / 0%), white)}:host>z-pocket.open>z-pocket-body>div.body{overflow:auto;max-height:calc(100vh - 166px);scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-color:var(--color-primary01) var(--color-surface03);scrollbar-width:thin}:host ::-webkit-scrollbar{width:10px;background:linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );border-radius:var(--border-radius)}:host ::-webkit-scrollbar-thumb{width:var(--space-unit);background-color:var(--color-primary01);border-radius:var(--border-radius)}}";const a=t;const i=class{constructor(e){o(this,e);this.pocketid=undefined;this.messages=undefined;this.status=r.PREVIEW}handlePocketToggle(o){if(o.detail.id===this.pocketid){this.status=o.detail.status}}renderHeader(){let o;let t;switch(this.status){case r.PREVIEW:case r.CLOSED:o=e("span",null,"Messaggi ",e("span",{class:"badge"},this.messages));t="chevron-up";break;case r.OPEN:o=e("span",null,"Riduci");t="chevron-down";break}return e("z-pocket-header",{pocketid:this.pocketid},o,e("z-icon",{name:t,width:14,height:14}))}renderBody(){return e("z-pocket-body",{pocketid:this.pocketid},e("div",{class:"body"},e("slot",null)),e("div",{class:"gradient"}))}render(){return e("z-pocket",{key:"2f8a4cab129678f4a14c8fe5605c20098d29427a",pocketid:this.pocketid,status:this.status,class:this.status},this.renderHeader(),this.renderBody())}};i.style=a;export{i as z_messages_pocket};
-//# sourceMappingURL=p-5441ba83.entry.js.map

package/www/build/p-5441ba83.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMessagesPocketStyle0","ZMessagesPocket","PocketStatus","PREVIEW","handlePocketToggle","e","detail","id","this","pocketid","status","renderHeader","message","icon","CLOSED","h","class","messages","OPEN","name","width","height","renderBody","render","key"],"sources":["src/snowflakes/myz/pocket/z-messages-pocket/styles.css?tag=z-messages-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-messages-pocket/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-pocket {\n  width: 100%;\n}\n\n:host > z-pocket.closed {\n  width: 158px;\n}\n\n:host > z-pocket > z-pocket-header {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n}\n\n:host > z-pocket > z-pocket-header span.badge {\n  display: inline-block;\n  padding: 0 calc(var(--space-unit) * 0.5);\n  margin-left: var(--space-unit);\n  background: var(--color-secondary02);\n  border-radius: 50%;\n  color: var(--color-surface01);\n}\n\n:host > z-pocket > z-pocket-header > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > z-pocket > z-pocket-body > div.body {\n  overflow: hidden;\n  padding: var(--space-unit);\n  margin: 0 var(--space-unit);\n}\n\n:host > z-pocket.preview > z-pocket-body {\n  position: relative;\n}\n\n:host > z-pocket.preview > z-pocket-body > div.gradient {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-image: linear-gradient(rgb(255 0 0 / 0%), white);\n}\n\n:host > z-pocket.open > z-pocket-body > div.body {\n  overflow: auto;\n  max-height: calc(100vh - 166px);\n  scrollbar-width: none;\n}\n\n:host ::-webkit-scrollbar {\n  width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > z-pocket {\n    width: 768px;\n    margin: 0 calc((100% - 768px) / 2);\n  }\n\n  :host > z-pocket.closed {\n    margin: 0 calc((100% - 158px) / 2);\n  }\n\n  :host > z-pocket.open > z-pocket-body > div.body {\n    max-height: 326px;\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1152px) {\n  :host > z-pocket.open > z-pocket-body > div.body {\n    scrollbar-color: var(--color-primary01) var(--color-surface03);\n    scrollbar-width: thin;\n  }\n\n  :host ::-webkit-scrollbar {\n    width: 10px;\n    background: linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );\n    border-radius: var(--border-radius);\n  }\n\n  :host ::-webkit-scrollbar-thumb {\n    width: var(--space-unit);\n    background-color: var(--color-primary01);\n    border-radius: var(--border-radius);\n  }\n}\n","import {Component, Prop, h, Listen /* , State */} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot  - pocket body content\n */\n@Component({\n  tag: \"z-messages-pocket\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMessagesPocket {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** number of messages */\n  @Prop()\n  messages: number;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  @Listen(\"pocketToggle\", {target: \"body\"})\n  handlePocketToggle(e: CustomEvent): void {\n    if (e.detail.id === this.pocketid) {\n      this.status = e.detail.status;\n    }\n  }\n\n  private renderHeader(): HTMLZPocketHeaderElement {\n    let message: HTMLElement;\n    let icon: string;\n    switch (this.status) {\n      case PocketStatus.PREVIEW:\n      case PocketStatus.CLOSED:\n        message = (\n          <span>\n            Messaggi <span class=\"badge\">{this.messages}</span>\n          </span>\n        );\n        icon = \"chevron-up\";\n        break;\n      case PocketStatus.OPEN:\n        message = <span>Riduci</span>;\n        icon = \"chevron-down\";\n        break;\n    }\n\n    return (\n      <z-pocket-header pocketid={this.pocketid}>\n        {message}\n        <z-icon\n          name={icon}\n          width={14}\n          height={14}\n        />\n      </z-pocket-header>\n    );\n  }\n\n  private renderBody(): HTMLZPocketBodyElement {\n    return (\n      <z-pocket-body pocketid={this.pocketid}>\n        <div class=\"body\">\n          <slot />\n        </div>\n        <div class=\"gradient\" />\n      </z-pocket-body>\n    );\n  }\n\n  render(): HTMLZPocketElement {\n    return (\n      <z-pocket\n        pocketid={this.pocketid}\n        status={this.status}\n        class={this.status}\n      >\n        {this.renderHeader()}\n        {this.renderBody()}\n      </z-pocket>\n    );\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,0tDAClB,MAAAC,EAAeD,E,MCUFE,EAAe,M,qFAWHC,EAAaC,O,CAGpC,kBAAAC,CAAmBC,GACjB,GAAIA,EAAEC,OAAOC,KAAOC,KAAKC,SAAU,CACjCD,KAAKE,OAASL,EAAEC,OAAOI,M,EAInB,YAAAC,GACN,IAAIC,EACJ,IAAIC,EACJ,OAAQL,KAAKE,QACX,KAAKR,EAAaC,QAClB,KAAKD,EAAaY,OAChBF,EACEG,EAAA,wBACWA,EAAA,QAAMC,MAAM,SAASR,KAAKS,WAGvCJ,EAAO,aACP,MACF,KAAKX,EAAagB,KAChBN,EAAUG,EAAA,sBACVF,EAAO,eACP,MAGJ,OACEE,EAAA,mBAAiBN,SAAUD,KAAKC,UAC7BG,EACDG,EAAA,UACEI,KAAMN,EACNO,MAAO,GACPC,OAAQ,K,CAMR,UAAAC,GACN,OACEP,EAAA,iBAAeN,SAAUD,KAAKC,UAC5BM,EAAA,OAAKC,MAAM,QACTD,EAAA,cAEFA,EAAA,OAAKC,MAAM,a,CAKjB,MAAAO,GACE,OACER,EAAA,YAAAS,IAAA,2CACEf,SAAUD,KAAKC,SACfC,OAAQF,KAAKE,OACbM,MAAOR,KAAKE,QAEXF,KAAKG,eACLH,KAAKc,a"}

package/www/build/p-54681ece.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as s,a as t,g as o}from"./p-10bb4f4b.js";import{x as n,P as a}from"./p-025f494e.js";import{t as c}from"./p-2c886e8b.js";const l=".sc-z-file-h{position:relative;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-h>z-popover.sc-z-file{z-index:10}.sc-z-file-h>z-popover.sc-z-file>.tooltip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{display:block;overflow:hidden;max-width:250px;letter-spacing:0.32px;line-height:1.33;text-overflow:ellipsis;white-space:nowrap}";const r=l;const h=class{constructor(s){e(this,s);this.removeFile=i(this,"removeFile",7);this.fileNumber=undefined;this.fileName=undefined;this.allowPopover=false;this.popoverVisible=false}removeFileHandler(){this.removeFile.emit({fileName:this.fileName});this.el.remove()}onMouseOver(){this.popoverVisible=true}onMouseLeave(){this.popoverVisible=false}onInteractiveIconClick(){this.removeFileHandler()}componentDidLoad(){var e,i;if(this.elementHasEllipsis()&&window.innerWidth>c){this.allowPopover=true}(i=(e=this.icon)===null||e===void 0?void 0:e.focus)===null||i===void 0?void 0:i.call(e)}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return s(t,{key:"fc115e09bac93434e5c460602d91d75034156d58"},this.allowPopover&&s("z-popover",{open:this.popoverVisible,position:a.AUTO,bindTo:this.chip},s("span",{class:"body-5 tooltip-content"},this.ellipsis.innerText)),s("z-chip",{key:"e834fa8689c5164cb51de5353a14d21495d5bfe5",ref:e=>this.chip=e,id:`chip-${this.fileNumber}`,interactiveIcon:"multiply-circled",type:n.DEFAULT},s("span",{key:"037442876903b11acfa1f65acb3a65ccde8c2161",ref:e=>this.ellipsis=e,tabIndex:-1},this.fileName)))}get el(){return o(this)}};h.style=r;export{h as z_file};
-//# sourceMappingURL=p-54681ece.entry.js.map

package/www/build/p-54681ece.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZFileStyle0","ZFile","removeFileHandler","this","removeFile","emit","fileName","el","remove","onMouseOver","popoverVisible","onMouseLeave","onInteractiveIconClick","componentDidLoad","elementHasEllipsis","window","innerWidth","tabletBreakpoint","allowPopover","_b","_a","icon","focus","call","ellipsis","offsetWidth","scrollWidth","render","h","Host","key","open","position","PopoverPosition","AUTO","bindTo","chip","class","innerText","ref","id","fileNumber","interactiveIcon","type","ZChipType","DEFAULT","tabIndex"],"sources":["src/components/file-upload/z-file/styles.css?tag=z-file&encapsulation=scoped","src/components/file-upload/z-file/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-popover {\n  z-index: 10;\n}\n\n:host > z-popover > .tooltip-content {\n  white-space: nowrap;\n}\n\n:host > z-chip span {\n  display: block;\n  overflow: hidden;\n  max-width: 250px;\n  letter-spacing: 0.32px;\n  line-height: 1.33;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import {Component, h, EventEmitter, Event, Element, Host, State, Listen, Prop} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {tabletBreakpoint} from \"../../../constants/breakpoints\";\n\n@Component({\n  tag: \"z-file\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZFile {\n  private icon: HTMLElement;\n\n  private ellipsis?: HTMLSpanElement;\n\n  private chip?: HTMLZChipElement;\n\n  /** File chip id */\n  @Prop()\n  fileNumber: number;\n\n  /** File name */\n  @Prop()\n  fileName: string;\n\n  @State()\n  allowPopover = false;\n\n  @State()\n  popoverVisible = false;\n\n  @Element() el: HTMLZFileElement;\n\n  /** Emitted when a z-file component is removed from the DOM */\n  @Event()\n  removeFile: EventEmitter;\n\n  private removeFileHandler(): void {\n    this.removeFile.emit({fileName: this.fileName});\n    this.el.remove();\n  }\n\n  @Listen(\"mouseover\")\n  onMouseOver(): void {\n    this.popoverVisible = true;\n  }\n\n  @Listen(\"mouseleave\")\n  onMouseLeave(): void {\n    this.popoverVisible = false;\n  }\n\n  @Listen(\"interactiveIconClick\")\n  onInteractiveIconClick(): void {\n    this.removeFileHandler();\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {\n      this.allowPopover = true;\n    }\n\n    this.icon?.focus?.();\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLZFileElement {\n    return (\n      <Host>\n        {this.allowPopover && (\n          <z-popover\n            open={this.popoverVisible}\n            position={PopoverPosition.AUTO}\n            bindTo={this.chip}\n          >\n            <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n          </z-popover>\n        )}\n        <z-chip\n          ref={(el) => (this.chip = el as HTMLZChipElement)}\n          id={`chip-${this.fileNumber}`}\n          interactiveIcon=\"multiply-circled\"\n          type={ZChipType.DEFAULT}\n        >\n          <span\n            ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n            tabIndex={-1}\n          >\n            {this.fileName}\n          </span>\n        </z-chip>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+IAAA,MAAMA,EAAY,wYAClB,MAAAC,EAAeD,E,MCSFE,EAAK,M,oIAgBD,M,oBAGE,K,CAQT,iBAAAC,GACNC,KAAKC,WAAWC,KAAK,CAACC,SAAUH,KAAKG,WACrCH,KAAKI,GAAGC,Q,CAIV,WAAAC,GACEN,KAAKO,eAAiB,I,CAIxB,YAAAC,GACER,KAAKO,eAAiB,K,CAIxB,sBAAAE,GACET,KAAKD,mB,CAGP,gBAAAW,G,QACE,GAAIV,KAAKW,sBAAwBC,OAAOC,WAAaC,EAAkB,CACrEd,KAAKe,aAAe,I,EAGtBC,GAAAC,EAAAjB,KAAKkB,QAAI,MAAAD,SAAA,SAAAA,EAAEE,SAAK,MAAAH,SAAA,SAAAA,EAAAI,KAAAH,E,CAGV,kBAAAN,GACN,OAAOX,KAAKqB,SAASC,YAActB,KAAKqB,SAASE,W,CAGnD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACF3B,KAAKe,cACJU,EAAA,aACEG,KAAM5B,KAAKO,eACXsB,SAAUC,EAAgBC,KAC1BC,OAAQhC,KAAKiC,MAEbR,EAAA,QAAMS,MAAM,0BAA0BlC,KAAKqB,SAASc,YAGxDV,EAAA,UAAAE,IAAA,2CACES,IAAMhC,GAAQJ,KAAKiC,KAAO7B,EAC1BiC,GAAI,QAAQrC,KAAKsC,aACjBC,gBAAgB,mBAChBC,KAAMC,EAAUC,SAEhBjB,EAAA,QAAAE,IAAA,2CACES,IAAMhC,GAAQJ,KAAKqB,SAAWjB,EAC9BuC,UAAW,GAEV3C,KAAKG,W"}

package/www/build/p-5c50cc2d.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as i,a as t,g as o}from"./p-10bb4f4b.js";import{J as a,e as r}from"./p-025f494e.js";const n=':host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size="big"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size="small"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size="x-small"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size="small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:18px}:host([size="x-small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:16px}.z-info-reveal-panel{position:absolute;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position="top_left"]) .z-info-reveal-panel,:host([position="top_right"]) .z-info-reveal-panel{top:0}:host([position="bottom_left"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{bottom:0}:host([position="top_right"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{right:0}:host([position="top_left"]) .z-info-reveal-panel,:host([position="bottom_left"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{position:fixed;top:auto !important;bottom:auto !important;left:var(--grid-margin) !important;width:calc(100% - (var(--grid-margin) * 2)) !important;max-width:none !important;margin-top:calc(var(--trigger-size) * -1)}}';const s=n;const l=class{constructor(i){e(this,i);this.icon="informationsource";this.position=a.BOTTOM_RIGHT;this.label=undefined;this.ariaLabel="Apri pannello informazioni";this.size=r.BIG;this.open=false}adjustPanelPosition(){if(!this.open||!this.panel){return}const e=this.host.getBoundingClientRect();const i=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--grid-margin"),10);const t=document.documentElement.offsetWidth;const o=Math.round((this.position.includes("left")?t-e.left:e.right)-i);this.panel.style.maxWidth=`${o}px`}togglePanel(){this.open=!this.open}closePanel(){this.open=false}handleEscapeKey(e){if(e.key==="Escape"&&this.open){this.closePanel()}}render(){return i(t,{key:"9760fea9358ffa3422f6dad090a03c30cd8b51f2",open:this.open},i("button",{key:"52c39a04ac63089ecb493927b49dea106a94ee93",class:"z-info-reveal-trigger",type:"button",onClick:this.togglePanel.bind(this),"aria-label":!this.label?this.ariaLabel:undefined,"aria-expanded":this.open?"true":"false","aria-controls":"z-info-reveal-panel"},this.icon&&i("z-icon",{name:this.icon}),this.label&&i("span",{class:"z-info-reveal-label"},this.label)),i("div",{key:"839afc7d65706951dcf0b5a56aaa69c6c56cc720",class:"z-info-reveal-panel",id:"z-info-reveal-panel",ref:e=>this.panel=e,hidden:!this.open},i("slot",{key:"598c69722edab2f836962b3807e50a4a8a296aee"}),i("button",{key:"53c5f103f7bcca4bf1d6ccb8d4454459b1a82afd",class:"z-info-reveal-close",type:"button",onClick:this.closePanel.bind(this),"aria-label":"Chiudi pannello informazioni"},i("z-icon",{key:"506717510c3ab82f30efbfe70753af7bc277a29f",name:"multiply"}))))}get host(){return o(this)}static get watchers(){return{position:["adjustPanelPosition"],open:["adjustPanelPosition"]}}};l.style=s;export{l as z_info_reveal};
-//# sourceMappingURL=p-5c50cc2d.entry.js.map

package/www/build/p-5c50cc2d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZInfoRevealStyle0","ZInfoReveal","InfoRevealPosition","BOTTOM_RIGHT","ControlSize","BIG","adjustPanelPosition","this","open","panel","rect","host","getBoundingClientRect","gridMargin","parseInt","getComputedStyle","document","documentElement","getPropertyValue","pageWidth","offsetWidth","availableSpace","Math","round","position","includes","left","right","style","maxWidth","togglePanel","closePanel","handleEscapeKey","event","key","render","h","Host","class","type","onClick","bind","label","ariaLabel","undefined","icon","name","id","ref","el","hidden"],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n  --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint */\n  --trigger-size: 44px;\n\n  position: relative;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\nbutton {\n  --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-info-reveal-trigger {\n  min-width: var(--trigger-size);\n  height: var(--trigger-size);\n  padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n  font-weight: var(--font-sb);\n  line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n  --trigger-size: 36px;\n\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n  --trigger-size: 32px;\n\n  padding: var(--space-unit);\n  font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n  --z-icon-width: var(--trigger-icon-size);\n  --z-icon-height: var(--trigger-icon-size);\n\n  display: flex;\n  fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: 18px;\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: 16px;\n}\n\n.z-info-reveal-panel {\n  position: absolute;\n  display: flex;\n  width: var(--z-info-reveal-panel-width);\n  height: fit-content;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 1.5);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n  display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n  top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n  left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n  margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n  fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n  .z-info-reveal-panel {\n    position: fixed;\n    top: auto !important;\n    bottom: auto !important;\n    left: var(--grid-margin) !important;\n    width: calc(100% - (var(--grid-margin) * 2)) !important;\n    max-width: none !important;\n    margin-top: calc(var(--trigger-size) * -1);\n  }\n}\n","import {Component, h, Prop, State, Host, Listen, Watch, Element} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n * @cssprop --z-info-reveal-panel-width - Width of the info panel.\n */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** Aria label of the trigger button. It will be only used when `label` prop is empty. */\n  @Prop()\n  ariaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\n\n    const rect = this.host.getBoundingClientRect();\n    const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n    const pageWidth = document.documentElement.offsetWidth;\n    // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n    const availableSpace = Math.round(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.ariaLabel : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,m/EAClB,MAAAC,EAAeD,E,MCaFE,EAAW,M,mCAGd,oB,cAQwBC,EAAmBC,a,oCAQvC,6B,UAISC,EAAYC,I,UAI1B,K,CAYP,mBAAAC,GACE,IAAKC,KAAKC,OAASD,KAAKE,MAAO,CAC7B,M,CAGF,MAAMC,EAAOH,KAAKI,KAAKC,wBACvB,MAAMC,EAAaC,SAASC,iBAAiBC,SAASC,iBAAiBC,iBAAiB,iBAAkB,IAC1G,MAAMC,EAAYH,SAASC,gBAAgBG,YAE3C,MAAMC,EAAiBC,KAAKC,OACzBhB,KAAKiB,SAASC,SAAS,QAAUN,EAAYT,EAAKgB,KAAOhB,EAAKiB,OAASd,GAE1EN,KAAKE,MAAMmB,MAAMC,SAAW,GAAGR,K,CAMzB,WAAAS,GACNvB,KAAKC,MAAQD,KAAKC,I,CAMZ,UAAAuB,GACNxB,KAAKC,KAAO,K,CAId,eAAAwB,CAAgBC,GACd,GAAIA,EAAMC,MAAQ,UAAY3B,KAAKC,KAAM,CACvCD,KAAKwB,Y,EAIT,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAH,IAAA,2CAAC1B,KAAMD,KAAKC,MACf4B,EAAA,UAAAF,IAAA,2CACEI,MAAM,wBACNC,KAAK,SACLC,QAASjC,KAAKuB,YAAYW,KAAKlC,MAAK,cACvBA,KAAKmC,MAAQnC,KAAKoC,UAAYC,UAAS,gBACrCrC,KAAKC,KAAO,OAAS,QAAO,gBAC7B,uBAEbD,KAAKsC,MAAQT,EAAA,UAAQU,KAAMvC,KAAKsC,OAChCtC,KAAKmC,OAASN,EAAA,QAAME,MAAM,uBAAuB/B,KAAKmC,QAEzDN,EAAA,OAAAF,IAAA,2CACEI,MAAM,sBACNS,GAAG,sBACHC,IAAMC,GAAQ1C,KAAKE,MAAQwC,EAC3BC,QAAS3C,KAAKC,MAEd4B,EAAA,QAAAF,IAAA,6CACAE,EAAA,UAAAF,IAAA,2CACEI,MAAM,sBACNC,KAAK,SACLC,QAASjC,KAAKwB,WAAWU,KAAKlC,MAAK,aACxB,gCAEX6B,EAAA,UAAAF,IAAA,2CAAQY,KAAK,e"}

package/www/build/p-6398da61.js

@@ -1,2 +0,0 @@
-import{r as o,h as r,a as s}from"./p-10bb4f4b.js";const e=":host{display:block;box-sizing:border-box}";const b=e;const c=class{constructor(r){o(this,r)}render(){return r(s,{key:"5053f27544fc018342c190f6365808a7dd5680bd",role:"rowgroup"},r("slot",{key:"14a7c9dfd3e65dbb6fe1c36012de193e9b734a68"}))}};c.style=b;export{c as Z};
-//# sourceMappingURL=p-6398da61.js.map

package/www/build/p-6398da61.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZTbodyStyle0","ZTbody","render","h","Host","key","role"],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,6CAClB,MAAAC,EAAeD,E,MCUFE,EAAM,M,yBACjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C"}

package/www/build/p-64683cca.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as r}from"./p-10bb4f4b.js";import{L as a}from"./p-025f494e.js";const i=":host{--card-overflow:hidden}div{display:flex;overflow:var(--card-overflow);width:auto;width:256px;height:522px;box-sizing:border-box;flex-direction:column;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}div.real,div.trial,div.temp{border-color:var(--blue100)}div.faded{border:var(--border-size-medium) solid var(--color-surface02)}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:var(--shadow-focus-primary);outline:none}";const t=i;const o=class{constructor(r){e(this,r);this.faded=undefined;this.cardtype=undefined;this.ispressed=false;this.ishighlighted=false}retrieveClass(){let e="";if(this.cardtype===a.REAL){e+="real"}else if(this.cardtype===a.TRIAL){e+="trial"}else if(this.cardtype===a.TEMP){e+="temp"}if(this.faded){e+=" faded"}else if(this.ispressed){e+=" pressed"}else if(this.ishighlighted){e+=" highlighted"}return e}render(){return r("div",{key:"566806a9792c54f2853f4e02e22a4494a69e906c",class:this.retrieveClass(),tabindex:"0"},r("slot",{key:"bc8776f2ea59e0a421b7559bb6d5c9e2923f0276"}))}};o.style=t;const s=":host{width:auto;height:340px}:host>div{position:relative;display:flex;width:auto;height:340px;align-items:center;justify-content:center}";const d=s;const c=class{constructor(r){e(this,r)}render(){return r("div",{key:"cf1d5f3496d5d26fc8af29aaadb102fb6d05fc01"},r("slot",{key:"c0e3125ceecc33606e9644c514643de2ff59be1b",name:"alert"}),r("slot",{key:"fbac52128264cd4a5637a7acbe3f57670efb5d50",name:"cover"}))}};c.style=d;const n="img{display:block;max-width:100%;height:340px;margin:auto;object-fit:cover}img.faded{opacity:0.3}";const l=n;const h=class{constructor(r){e(this,r);this.img=undefined;this.titolo=undefined;this.faded=undefined;this.defaultimg=undefined}hadleOnImageError(){this.img=this.defaultimg}render(){return r("img",{key:"ed7d7aad0833e7ead92536e260de19da601a605f",class:this.faded&&"faded",onError:this.hadleOnImageError.bind(this),alt:this.titolo,src:this.img})}};h.style=l;const f='header{position:relative;display:flex;width:auto;height:calc(var(--space-unit) * 6);flex-direction:row;align-items:flex-start;justify-content:space-between;border-bottom:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius)}slot[name="aria-heading"]::slotted(*){position:absolute;overflow:hidden !important;width:1px !important;height:1px !important;padding:0 !important;border:0 none !important;margin:-1px !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important}header.real,header.trial,header.temp{border-bottom:var(--border-size-medium) solid var(--blue100);background-color:var(--color-primary03)}.card-title{overflow:hidden;height:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);margin:0;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.22px;line-height:calc(var(--space-unit) * 2);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.faded{border-bottom:var(--border-size-medium) solid var(--color-surface02)}.faded.real,.faded.trial,.faded.temp{border-top:var(--border-size-medium) solid var(--blue100);border-right:var(--border-size-medium) solid var(--blue100);border-left:var(--border-size-medium) solid var(--blue100)}';const u=f;const b=class{constructor(r){e(this,r);this.titolo=undefined;this.faded=undefined;this.cardtype=undefined;this.allowTooltip=false}getTitle(){return this.allowTooltip?this.titolo:""}componentDidLoad(){if(this.elementHasEllipsis()){this.allowTooltip=true}}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}retrieveClass(){return{real:this.cardtype===a.REAL,trial:this.cardtype===a.TRIAL,temp:this.cardtype===a.TEMP,faded:this.faded}}render(){return r("header",{key:"2899cd14120a644cd410c8e3ecbf5dc8057741aa",class:this.retrieveClass()},r("slot",{key:"9fc6922f5caae746f28dd045662791755a12e531",name:"aria-heading"}),r("span",{key:"c9e10b400ec78bbecb3c2f4620e3a4934dfed3f4",class:"card-title",ref:e=>this.ellipsis=e,title:this.getTitle()},this.titolo),r("slot",{key:"71828a2ea10c63e807951f1a5e71725a8779cd9e",name:"icon"}))}};b.style=u;export{o as z_myz_card,c as z_myz_card_body,h as z_myz_card_cover,b as z_myz_card_header};
-//# sourceMappingURL=p-64683cca.entry.js.map

package/www/build/p-64683cca.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMyzCardStyle0","ZMyzCardComponent","retrieveClass","elemClasses","this","cardtype","LicenseType","REAL","TRIAL","TEMP","faded","ispressed","ishighlighted","render","h","key","class","tabindex","ZMyzCardBodyStyle0","ZMyzCardBody","name","ZMyzCardCoverStyle0","ZMyzCardCover","hadleOnImageError","img","defaultimg","onError","bind","alt","titolo","src","ZMyzCardHeaderStyle0","ZMyzCardHeader","getTitle","allowTooltip","componentDidLoad","elementHasEllipsis","ellipsis","offsetWidth","scrollWidth","real","trial","temp","ref","el","title"],"sources":["src/snowflakes/myz/card/z-myz-card/styles.css?tag=z-myz-card&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card/index.tsx","src/snowflakes/myz/card/z-myz-card-body/styles.css?tag=z-myz-card-body&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-body/index.tsx","src/snowflakes/myz/card/z-myz-card-cover/styles.css?tag=z-myz-card-cover&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-cover/index.tsx","src/snowflakes/myz/card/z-myz-card-header/styles.css?tag=z-myz-card-header&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-header/index.tsx"],"sourcesContent":[":host {\n  --card-overflow: hidden;\n}\n\ndiv {\n  display: flex;\n  overflow: var(--card-overflow);\n  width: auto;\n  width: 256px; /* TODO: width must be 100% - must be handled in dashboard */\n  height: 522px;\n  box-sizing: border-box;\n  flex-direction: column;\n  border: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n}\n\ndiv.real,\ndiv.trial,\ndiv.temp {\n  border-color: var(--blue100);\n}\n\n/* HIDDEN status */\ndiv.faded {\n  border: var(--border-size-medium) solid var(--color-surface02);\n}\n\n/* HIGHLIGHTED status */\ndiv.highlighted {\n  box-shadow: var(--shadow-4);\n  outline: none;\n}\n\n/* PRESSED status */\ndiv.pressed {\n  box-shadow: var(--shadow-8);\n  outline: none;\n}\n\ndiv:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot  - generic card slot\n */\n@Component({\n  tag: \"z-myz-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardComponent {\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  /** pressed status */\n  @Prop()\n  ispressed = false;\n\n  /** highlighted status */\n  @Prop()\n  ishighlighted = false;\n\n  private retrieveClass(): string {\n    let elemClasses = \"\";\n\n    if (this.cardtype === LicenseType.REAL) {\n      elemClasses += \"real\";\n    } else if (this.cardtype === LicenseType.TRIAL) {\n      elemClasses += \"trial\";\n    } else if (this.cardtype === LicenseType.TEMP) {\n      elemClasses += \"temp\";\n    }\n\n    if (this.faded) {\n      elemClasses += \" faded\";\n    } else if (this.ispressed) {\n      elemClasses += \" pressed\";\n    } else if (this.ishighlighted) {\n      elemClasses += \" highlighted\";\n    }\n\n    return elemClasses;\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={this.retrieveClass()}\n        tabindex=\"0\"\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n",":host {\n  width: auto;\n  height: 340px;\n}\n\n:host > div {\n  position: relative;\n  display: flex;\n  width: auto;\n  height: 340px;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot alert - card alert slot\n * @slot cover - book cover slot\n */\n@Component({\n  tag: \"z-myz-card-body\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardBody {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <slot name=\"alert\"></slot>\n        <slot name=\"cover\" />\n      </div>\n    );\n  }\n}\n","img {\n  display: block;\n  max-width: 100%;\n  height: 340px;\n  margin: auto;\n  object-fit: cover;\n}\n\nimg.faded {\n  opacity: 0.3;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-myz-card-cover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardCover {\n  /** image source */\n  @Prop()\n  img: string;\n\n  /** cover alt title */\n  @Prop()\n  titolo: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** default error image source */\n  @Prop()\n  defaultimg: string;\n\n  private hadleOnImageError(): void {\n    this.img = this.defaultimg;\n  }\n\n  render(): HTMLImageElement {\n    return (\n      <img\n        class={this.faded && \"faded\"}\n        onError={this.hadleOnImageError.bind(this)}\n        alt={this.titolo}\n        src={this.img}\n      />\n    );\n  }\n}\n","header {\n  position: relative;\n  display: flex;\n  width: auto;\n  height: calc(var(--space-unit) * 6);\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius);\n}\n\nslot[name=\"aria-heading\"]::slotted(*) {\n  position: absolute;\n  overflow: hidden !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  border: 0 none !important;\n  margin: -1px !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n}\n\nheader.real,\nheader.trial,\nheader.temp {\n  border-bottom: var(--border-size-medium) solid var(--blue100);\n  background-color: var(--color-primary03);\n}\n\n.card-title {\n  overflow: hidden;\n  height: calc(var(--space-unit) * 2);\n  padding: calc(var(--space-unit) * 2);\n  margin: 0;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.22px;\n  line-height: calc(var(--space-unit) * 2);\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.faded {\n  border-bottom: var(--border-size-medium) solid var(--color-surface02);\n}\n\n.faded.real,\n.faded.trial,\n.faded.temp {\n  border-top: var(--border-size-medium) solid var(--blue100);\n  border-right: var(--border-size-medium) solid var(--blue100);\n  border-left: var(--border-size-medium) solid var(--blue100);\n}\n","import {Component, Prop, State, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot icon - card header icon slot\n */\n@Component({\n  tag: \"z-myz-card-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardHeader {\n  /** volume title */\n  @Prop()\n  titolo: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** card graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLElement;\n\n  private getTitle(): string {\n    return this.allowTooltip ? this.titolo : \"\";\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis()) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n    return {\n      real: this.cardtype === LicenseType.REAL,\n      trial: this.cardtype === LicenseType.TRIAL,\n      temp: this.cardtype === LicenseType.TEMP,\n      faded: this.faded,\n    };\n  }\n\n  render(): HTMLElement {\n    return (\n      <header class={this.retrieveClass()}>\n        <slot name=\"aria-heading\" />\n        <span\n          class=\"card-title\"\n          ref={(el) => (this.ellipsis = el as HTMLElement)}\n          title={this.getTitle()}\n        >\n          {this.titolo}\n        </span>\n        <slot name=\"icon\" />\n      </header>\n    );\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,klBAClB,MAAAC,EAAeD,E,MCUFE,EAAiB,M,qFAWhB,M,mBAII,K,CAER,aAAAC,GACN,IAAIC,EAAc,GAElB,GAAIC,KAAKC,WAAaC,EAAYC,KAAM,CACtCJ,GAAe,M,MACV,GAAIC,KAAKC,WAAaC,EAAYE,MAAO,CAC9CL,GAAe,O,MACV,GAAIC,KAAKC,WAAaC,EAAYG,KAAM,CAC7CN,GAAe,M,CAGjB,GAAIC,KAAKM,MAAO,CACdP,GAAe,Q,MACV,GAAIC,KAAKO,UAAW,CACzBR,GAAe,U,MACV,GAAIC,KAAKQ,cAAe,CAC7BT,GAAe,c,CAGjB,OAAOA,C,CAGT,MAAAU,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAOZ,KAAKF,gBACZe,SAAS,KAETH,EAAA,QAAAC,IAAA,6C,aCxDR,MAAMhB,EAAY,4IAClB,MAAAmB,EAAenB,E,MCUFoB,EAAY,M,yBACvB,MAAAN,GACE,OACEC,EAAA,OAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,2CAAMK,KAAK,UACXN,EAAA,QAAAC,IAAA,2CAAMK,KAAK,U,aChBnB,MAAMrB,EAAY,oGAClB,MAAAsB,EAAetB,E,MCMFuB,EAAa,M,iHAiBhB,iBAAAC,GACNnB,KAAKoB,IAAMpB,KAAKqB,U,CAGlB,MAAAZ,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAOZ,KAAKM,OAAS,QACrBgB,QAAStB,KAAKmB,kBAAkBI,KAAKvB,MACrCwB,IAAKxB,KAAKyB,OACVC,IAAK1B,KAAKoB,K,aClClB,MAAMzB,EAAY,03CAClB,MAAAgC,EAAehC,E,MCWFiC,EAAc,M,8GAcV,K,CAIP,QAAAC,GACN,OAAO7B,KAAK8B,aAAe9B,KAAKyB,OAAS,E,CAG3C,gBAAAM,GACE,GAAI/B,KAAKgC,qBAAsB,CAC7BhC,KAAK8B,aAAe,I,EAIhB,kBAAAE,GACN,OAAOhC,KAAKiC,SAASC,YAAclC,KAAKiC,SAASE,W,CAG3C,aAAArC,GACN,MAAO,CACLsC,KAAMpC,KAAKC,WAAaC,EAAYC,KACpCkC,MAAOrC,KAAKC,WAAaC,EAAYE,MACrCkC,KAAMtC,KAAKC,WAAaC,EAAYG,KACpCC,MAAON,KAAKM,M,CAIhB,MAAAG,GACE,OACEC,EAAA,UAAAC,IAAA,2CAAQC,MAAOZ,KAAKF,iBAClBY,EAAA,QAAAC,IAAA,2CAAMK,KAAK,iBACXN,EAAA,QAAAC,IAAA,2CACEC,MAAM,aACN2B,IAAMC,GAAQxC,KAAKiC,SAAWO,EAC9BC,MAAOzC,KAAK6B,YAEX7B,KAAKyB,QAERf,EAAA,QAAAC,IAAA,2CAAMK,KAAK,S"}

package/www/build/p-6e8b7c93.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o}from"./p-10bb4f4b.js";const s=":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";const r=s;const e=class{constructor(o){t(this,o)}render(){return o("slot",{key:"3d88b0bfa19b14d1891a6693c557485767035f50"})}};e.style=r;export{e as z_visually_hidden};
-//# sourceMappingURL=p-6e8b7c93.entry.js.map

package/www/build/p-6e8b7c93.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZVisuallyHiddenStyle0","ZVisuallyHidden","render","h","key"],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  margin: 0 -1px -1px 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,mKAClB,MAAAC,EAAeD,E,MCMFE,EAAe,M,yBAC1B,MAAAC,GACE,OAAOC,EAAA,QAAAC,IAAA,4C"}

package/www/build/p-6f023899.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,a as o,g as r}from"./p-10bb4f4b.js";import{M as a,Q as i}from"./p-025f494e.js";const n=':host{--cover-hero-overlay:linear-gradient(270deg, #0000 0%, #000000e6 100%);--cover-hero-text-color:var(--color-text-inverse);display:block;overflow:hidden}:host,*{box-sizing:border-box}:host .main-container{position:relative;width:100%;align-items:baseline}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .main-container .cover-container{position:relative;width:100%;padding-top:calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));background-color:var(--gray600)}::slotted([slot="cover"]){position:absolute;display:block;width:100%;height:100%;inset:0;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container{height:100%}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .cover-container{position:absolute;z-index:-1;height:100%;padding:0}:host([variant="overlay"]) .main-container .cover-container::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:""}:host([variant="overlay"]:is([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .content-container{position:absolute;inset:0}:host([variant="overlay"]) .main-container .content-container{height:100%;padding:var(--grid-margin)}:host([variant="stacked"]){--cover-hero-text-color:var(--color-default-text)}:host([variant="stacked"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}';const s=n;const c=class{constructor(t){e(this,t);this.variant=a.OVERLAY;this.contentPosition=i.TOP;this.preserveAspectRatio=true}onImgLoad({target:e}){if(e instanceof Image&&e.closest("[slot=cover]")){const t=e.naturalWidth/e.naturalHeight;this.host.style.setProperty("--image-aspect-ratio",t.toString())}}renderContent(){return t("div",{class:"content-container"},t("slot",{name:"content"}))}render(){return t(o,{key:"5e168fcc860cb006f3512b6097a51e3888678ae7"},this.variant===a.STACKED&&this.contentPosition===i.TOP&&this.renderContent(),t("div",{key:"bb67889d35a522ce0e284781a6038c6d87c7ecf3",class:"main-container"},t("div",{key:"a849722c3fab8946e03f869609fb4fb694a407fd",class:"cover-container"},t("slot",{key:"72943b0eed0785b90925661579a4bb288ac765c5",name:"cover"})),t("slot",{key:"65997d8731e9ad963e64dcb3cd5bd5c4922aa49c",name:"info-reveal"}),this.variant===a.OVERLAY&&this.renderContent()),this.variant===a.STACKED&&this.contentPosition===i.BOTTOM&&this.renderContent())}get host(){return r(this)}};c.style=s;export{c as z_cover_hero};
-//# sourceMappingURL=p-6f023899.entry.js.map

package/www/build/p-6f023899.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZCoverHeroStyle0","ZCoverHero","CoverHeroVariant","OVERLAY","CoverHeroContentPosition","TOP","onImgLoad","target","Image","closest","ratio","naturalWidth","naturalHeight","this","host","style","setProperty","toString","renderContent","h","class","name","render","Host","key","variant","STACKED","contentPosition","BOTTOM"],"sources":["src/components/z-cover-hero/styles.css?tag=z-cover-hero&encapsulation=shadow","src/components/z-cover-hero/index.tsx"],"sourcesContent":[":host {\n  --cover-hero-overlay: linear-gradient(270deg, #0000 0%, #000000e6 100%);\n  --cover-hero-text-color: var(--color-text-inverse);\n  --cover-hero-aspect-ratio: ;\n\n  display: block;\n  overflow: hidden;\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host .main-container {\n  position: relative;\n  width: 100%;\n  align-items: baseline;\n}\n\n:host .content-container {\n  color: var(--cover-hero-text-color);\n  fill: var(--cover-hero-text-color);\n}\n\n:host .main-container .cover-container {\n  position: relative;\n  width: 100%;\n  padding-top: calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));\n  background-color: var(--gray600);\n}\n\n::slotted([slot=\"cover\"]) {\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  inset: 0;\n  object-fit: cover;\n  object-position: top center;\n}\n\n::slotted(z-info-reveal) {\n  position: absolute;\n  z-index: 1;\n  right: var(--grid-margin);\n  bottom: var(--grid-margin);\n}\n\n/* Variant overlay */\n:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"])) .main-container {\n  height: 100%;\n}\n\n:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"]))\n  .main-container\n  .cover-container {\n  position: absolute;\n  z-index: -1;\n  height: 100%;\n  padding: 0;\n}\n\n:host([variant=\"overlay\"]) .main-container .cover-container::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--cover-hero-overlay);\n  content: \"\";\n}\n\n:host([variant=\"overlay\"]:is([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"]))\n  .main-container\n  .content-container {\n  position: absolute;\n  inset: 0;\n}\n\n:host([variant=\"overlay\"]) .main-container .content-container {\n  height: 100%;\n  padding: var(--grid-margin);\n}\n\n/* Variant stacked */\n:host([variant=\"stacked\"]) {\n  --cover-hero-text-color: var(--color-default-text);\n}\n\n:host([variant=\"stacked\"]) .content-container ::slotted(*) {\n  padding: var(--grid-margin) 0;\n}\n","import {Component, Prop, h, Host, Listen, Element} from \"@stencil/core\";\nimport {CoverHeroVariant, CoverHeroContentPosition} from \"../../beans\";\n\n/**\n * Cover hero component.\n * Component to display a hero image with content.\n *\n * @slot cover - slot for the cover image.\n * @slot content - slot for the content.\n * @slot info-reveal - slot for the info reveal.\n * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.\n * @cssprop --cover-hero-text-color - color of the text.\n * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.\n */\n@Component({\n  tag: \"z-cover-hero\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCoverHero {\n  @Element() host: HTMLZCoverHeroElement;\n\n  /**\n   * Cover hero variant. Can be `OVERLAY` or `STACKED`.\n   */\n  @Prop({reflect: true})\n  variant: CoverHeroVariant = CoverHeroVariant.OVERLAY;\n\n  /**\n   * Vertical content position (for `STACKED` variant).\n   */\n  @Prop({reflect: true})\n  contentPosition: CoverHeroContentPosition = CoverHeroContentPosition.TOP;\n\n  /**\n   * Whether to keep the image aspect ratio.\n   * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\n   * instead, the height of the component follows the content's one.\n   * Note: it may be necessary to set a min and/or max height to the component.\n   */\n  @Prop({reflect: true})\n  preserveAspectRatio = true;\n\n  /**\n   * Store the intrinsic aspect ratio of the slotted image when loaded,\n   * to have a default when `--cover-hero-aspect-ratio` is not set.\n   * @param target The event target\n   */\n  @Listen(\"load\", {capture: true})\n  protected onImgLoad({target}: Event): void {\n    if (target instanceof Image && target.closest(\"[slot=cover]\")) {\n      const ratio = target.naturalWidth / target.naturalHeight;\n      this.host.style.setProperty(\"--image-aspect-ratio\", ratio.toString());\n    }\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content-container\">\n        <slot name=\"content\"></slot>\n      </div>\n    );\n  }\n\n  render(): HTMLZCoverHeroElement {\n    return (\n      <Host>\n        {this.variant === CoverHeroVariant.STACKED &&\n          this.contentPosition === CoverHeroContentPosition.TOP &&\n          this.renderContent()}\n        <div class=\"main-container\">\n          <div class=\"cover-container\">\n            <slot name=\"cover\"></slot>\n          </div>\n          <slot name=\"info-reveal\"></slot>\n          {this.variant === CoverHeroVariant.OVERLAY && this.renderContent()}\n        </div>\n        {this.variant === CoverHeroVariant.STACKED &&\n          this.contentPosition === CoverHeroContentPosition.BOTTOM &&\n          this.renderContent()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,6nDAClB,MAAAC,EAAeD,E,MCkBFE,EAAU,M,sCAOOC,EAAiBC,Q,qBAMDC,EAAyBC,I,yBAS/C,I,CAQZ,SAAAC,EAAUC,OAACA,IACnB,GAAIA,aAAkBC,OAASD,EAAOE,QAAQ,gBAAiB,CAC7D,MAAMC,EAAQH,EAAOI,aAAeJ,EAAOK,cAC3CC,KAAKC,KAAKC,MAAMC,YAAY,uBAAwBN,EAAMO,W,EAOtD,aAAAC,GACN,OACEC,EAAA,OAAKC,MAAM,qBACTD,EAAA,QAAME,KAAK,Y,CAKjB,MAAAC,GACE,OACEH,EAACI,EAAI,CAAAC,IAAA,4CACFX,KAAKY,UAAYvB,EAAiBwB,SACjCb,KAAKc,kBAAoBvB,EAAyBC,KAClDQ,KAAKK,gBACPC,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,kBACTD,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,mBACTD,EAAA,QAAAK,IAAA,2CAAMH,KAAK,WAEbF,EAAA,QAAAK,IAAA,2CAAMH,KAAK,gBACVR,KAAKY,UAAYvB,EAAiBC,SAAWU,KAAKK,iBAEpDL,KAAKY,UAAYvB,EAAiBwB,SACjCb,KAAKc,kBAAoBvB,EAAyBwB,QAClDf,KAAKK,gB"}

package/www/build/p-7441b8f8.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,a as n,g as o}from"./p-10bb4f4b.js";import{d as s,a as e}from"./p-955da62e.js";import{T as c}from"./p-025f494e.js";import"./p-2c886e8b.js";const r=".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg);text-align:center}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{display:inline-flex;height:100%;align-items:center}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--color-surface05);color:var(--color-surface01)}.light.sc-z-skip-to-content-h{border:var(--border-size-medium) solid var(--color-surface05);background-color:var(--color-surface01);color:var(--color-default-text)}@media (min-width: 768px){.sc-z-skip-to-content-h{text-align:start}}@media (min-width: 1152px){.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{padding:0 calc(var(--space-unit) * 3);border-right:var(--border-size-small) solid var(--color-surface05)}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{border-right:var(--border-size-small) solid var(--color-surface01)}}";const l=r;const a=class{constructor(i){t(this,i);this.variant=undefined;this.links=[];this.visible=false;this.visibleLink=""}handleFocusOutSkipToContent(t){if(this.isInSkipToContent(t.target)){this.visible=false}}handleFocusSkipToContent(t){if(this.isInSkipToContent(t.target)){this.visible=true}}componentDidLoad(){this.showFirstChild()}componentWillRender(){if(this.links){this.links=typeof this.links==="string"?JSON.parse(this.links):this.links}}isInSkipToContent(t){const i=s(t);const n=i.find((t=>t.nodeName.toLowerCase()==="z-skip-to-content"));return!!n}showFirstChild(){var t;const i=(t=this.hostElement.children)===null||t===void 0?void 0:t[0];if(i){this.visibleLink=i.id}}handleLinkClick(){this.visible=false}render(){return i(n,{key:"4c268f1358c2b8d099b43c8ca3800d460ddb3127",class:{[this.variant]:true,"skip-to-content-visible":this.visible}},this.links.map(((t,n)=>{const o=`skip-to-content-${n}`;return i("div",{class:"link-container"},i("a",{id:o,class:{"body-1-sb":true,"z-link":true,"z-link-underline":true,"z-link-white":this.variant===c.DARK,"z-link-black":this.variant!==c.DARK,"link-visible":o==this.visibleLink,"link-invisible":o!=this.visibleLink},"aria-label":t.ariaLabel||t.label,href:t.href,onFocus:()=>this.visibleLink=o,onClick:()=>this.handleLinkClick(),onKeyUp:t=>e(t,this.handleLinkClick.bind(this))},t.label))})))}get hostElement(){return o(this)}};a.style=l;export{a as z_skip_to_content};
-//# sourceMappingURL=p-7441b8f8.entry.js.map

package/www/build/p-7441b8f8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZSkipToContentStyle0","ZSkipToContent","handleFocusOutSkipToContent","e","this","isInSkipToContent","target","visible","handleFocusSkipToContent","componentDidLoad","showFirstChild","componentWillRender","links","JSON","parse","elem","tree","getElementTree","menuParent","find","nodeName","toLowerCase","firstChild","_a","hostElement","children","visibleLink","id","handleLinkClick","render","h","Host","key","class","variant","map","link","i","ThemeVariant","DARK","ariaLabel","label","href","onFocus","onClick","onKeyUp","handleKeyboardSubmit","bind"],"sources":["src/components/z-skip-to-content/styles.css?tag=z-skip-to-content&encapsulation=scoped","src/components/z-skip-to-content/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  left: -100%;\n  height: 60px;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);\n  background-color: #24f4ff;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  text-align: center;\n}\n\n:host > .link-container {\n  display: inline-flex;\n  height: 100%;\n  align-items: center;\n}\n\n:host.skip-to-content-visible,\n:host:focus {\n  position: static;\n  display: block;\n}\n\n:host > .link-container > a.z-link.link-invisible {\n  overflow: hidden;\n  width: 0;\n  height: 0;\n}\n\n:host > .link-container > a.z-link.link-visible {\n  width: initial;\n  height: initial;\n}\n\n:host.dark {\n  background-color: var(--color-surface05);\n  color: var(--color-surface01);\n}\n\n:host.light {\n  border: var(--border-size-medium) solid var(--color-surface05);\n  background-color: var(--color-surface01);\n  color: var(--color-default-text);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host {\n    text-align: start;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .link-container {\n    padding: 0 calc(var(--space-unit) * 3);\n    border-right: var(--border-size-small) solid var(--color-surface05);\n  }\n\n  :host > .link-container > a.z-link.link-invisible {\n    overflow: initial;\n    width: initial;\n    height: initial;\n  }\n\n  :host > .link-container:first-child {\n    padding-left: 0;\n  }\n\n  :host > .link-container:last-child,\n  :host.dark > .link-container:last-child,\n  :host.light > .link-container:last-child {\n    padding-right: 0;\n    border-right: none;\n  }\n\n  :host.dark > .link-container {\n    border-right: var(--border-size-small) solid var(--color-surface01);\n  }\n}\n","import {Component, h, Host, Element, Listen, Prop, State} from \"@stencil/core\";\nimport {getElementTree, handleKeyboardSubmit} from \"../../utils/utils\";\nimport {ThemeVariant, SkipToContentLink} from \"../../beans\";\n\n/**\n * Component short description.\n */\n@Component({\n  tag: \"z-skip-to-content\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZSkipToContent {\n  /** Graphical variant: `dark`, `light`. */\n  @Prop({reflect: true})\n  variant?: ThemeVariant;\n\n  /** Array to fill link into skip-content */\n  @Prop({mutable: true})\n  links: string | SkipToContentLink[] = [];\n\n  @State()\n  visible = false;\n\n  @State()\n  visibleLink = \"\";\n\n  @Element() hostElement: HTMLZSkipToContentElement;\n\n  @Listen(\"focusout\", {target: \"document\"})\n  handleFocusOutSkipToContent(e: FocusEvent): void {\n    if (this.isInSkipToContent(e.target)) {\n      this.visible = false;\n    }\n  }\n\n  @Listen(\"focusin\", {target: \"document\"})\n  handleFocusSkipToContent(e: FocusEvent): void {\n    if (this.isInSkipToContent(e.target)) {\n      this.visible = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.showFirstChild();\n  }\n\n  componentWillRender(): void {\n    if (this.links) {\n      this.links = typeof this.links === \"string\" ? JSON.parse(this.links) : this.links;\n    }\n  }\n\n  private isInSkipToContent(elem): boolean {\n    const tree = getElementTree(elem);\n    const menuParent = tree.find((elem: Element) => elem.nodeName.toLowerCase() === \"z-skip-to-content\");\n\n    return !!menuParent;\n  }\n\n  private showFirstChild(): void {\n    const firstChild = this.hostElement.children?.[0];\n    if (firstChild) {\n      this.visibleLink = firstChild.id;\n    }\n  }\n\n  private handleLinkClick(): void {\n    this.visible = false;\n  }\n\n  render(): HTMLZSkipToContentElement {\n    return (\n      <Host\n        class={{\n          [this.variant]: true,\n          \"skip-to-content-visible\": this.visible,\n        }}\n      >\n        {(this.links as SkipToContentLink[]).map((link, i) => {\n          const id = `skip-to-content-${i}`;\n\n          return (\n            <div class=\"link-container\">\n              <a\n                id={id}\n                class={{\n                  \"body-1-sb\": true,\n                  \"z-link\": true,\n                  \"z-link-underline\": true,\n                  \"z-link-white\": this.variant === ThemeVariant.DARK,\n                  \"z-link-black\": this.variant !== ThemeVariant.DARK,\n                  \"link-visible\": id == this.visibleLink,\n                  \"link-invisible\": id != this.visibleLink,\n                }}\n                aria-label={link.ariaLabel || link.label}\n                href={link.href}\n                onFocus={() => (this.visibleLink = id)}\n                onClick={() => this.handleLinkClick()}\n                onKeyUp={(e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this))}\n              >\n                {link.label}\n              </a>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gKAAA,MAAMA,EAAY,y3DAClB,MAAAC,EAAeD,E,MCYFE,EAAc,M,2DAOa,G,aAG5B,M,iBAGI,E,CAKd,2BAAAC,CAA4BC,GAC1B,GAAIC,KAAKC,kBAAkBF,EAAEG,QAAS,CACpCF,KAAKG,QAAU,K,EAKnB,wBAAAC,CAAyBL,GACvB,GAAIC,KAAKC,kBAAkBF,EAAEG,QAAS,CACpCF,KAAKG,QAAU,I,EAInB,gBAAAE,GACEL,KAAKM,gB,CAGP,mBAAAC,GACE,GAAIP,KAAKQ,MAAO,CACdR,KAAKQ,aAAeR,KAAKQ,QAAU,SAAWC,KAAKC,MAAMV,KAAKQ,OAASR,KAAKQ,K,EAIxE,iBAAAP,CAAkBU,GACxB,MAAMC,EAAOC,EAAeF,GAC5B,MAAMG,EAAaF,EAAKG,MAAMJ,GAAkBA,EAAKK,SAASC,gBAAkB,sBAEhF,QAASH,C,CAGH,cAAAR,G,MACN,MAAMY,GAAaC,EAAAnB,KAAKoB,YAAYC,YAAQ,MAAAF,SAAA,SAAAA,EAAG,GAC/C,GAAID,EAAY,CACdlB,KAAKsB,YAAcJ,EAAWK,E,EAI1B,eAAAC,GACNxB,KAAKG,QAAU,K,CAGjB,MAAAsB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC7B,KAAK8B,SAAU,KAChB,0BAA2B9B,KAAKG,UAGhCH,KAAKQ,MAA8BuB,KAAI,CAACC,EAAMC,KAC9C,MAAMV,EAAK,mBAAmBU,IAE9B,OACEP,EAAA,OAAKG,MAAM,kBACTH,EAAA,KACEH,GAAIA,EACJM,MAAO,CACL,YAAa,KACb,SAAU,KACV,mBAAoB,KACpB,eAAgB7B,KAAK8B,UAAYI,EAAaC,KAC9C,eAAgBnC,KAAK8B,UAAYI,EAAaC,KAC9C,eAAgBZ,GAAMvB,KAAKsB,YAC3B,iBAAkBC,GAAMvB,KAAKsB,aAC9B,aACWU,EAAKI,WAAaJ,EAAKK,MACnCC,KAAMN,EAAKM,KACXC,QAAS,IAAOvC,KAAKsB,YAAcC,EACnCiB,QAAS,IAAMxC,KAAKwB,kBACpBiB,QAAU1C,GAAM2C,EAAqB3C,EAAGC,KAAKwB,gBAAgBmB,KAAK3C,QAEjEgC,EAAKK,OAEJ,I"}

package/www/build/p-74b2b9a0.entry.js

@@ -1,2 +0,0 @@
-import{r,h as a}from"./p-10bb4f4b.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:"ad617a342a7d7ae30067dc750b17453d66db9ffa",disabled:this.isdisabled,"aria-label":this.ariaLabel},a("span",{key:"67079cabf8a0b3213ca75a04e7570d984fe9286f"},a("z-icon",{key:"1e0a2ebcac6652f6c720da6c74a2d8f718ec825f",name:this.icon,width:16,height:16})))}};t.style=e;export{t as z_myz_card_icon};
-//# sourceMappingURL=p-74b2b9a0.entry.js.map

package/www/build/p-74b2b9a0.entry.js.map

@@ -1 +0,0 @@
-{"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"}

package/www/build/p-771a4c2f.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as n}from"./p-10bb4f4b.js";const a='ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:"•"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}';const e=a;const i=class{constructor(n){t(this,n);this.listdata=undefined;this.renderList=this.renderList.bind(this)}handleSpaceKeyPress(t,n){if(t.keyCode==32||t.keyCode==13){t.preventDefault();window.open(n,"_blank")}}formatListContent(t){const{value:a,isLink:e,url:i}=t;if(!e){return n("span",null,a)}return n("a",{role:"button",onKeyPress:t=>this.handleSpaceKeyPress(t,i),href:i,target:"_blank"},a)}renderList(t){return t.map((t=>n("li",null,this.formatListContent(t))))}render(){return n("ul",{key:"8fa3ddd1500ab0fa34402944d13c147aa6467a3b"},this.renderList(JSON.parse(this.listdata)))}};i.style=e;export{i as z_myz_card_list};
-//# sourceMappingURL=p-771a4c2f.entry.js.map

package/www/build/p-771a4c2f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMyzCardListStyle0","ZMyzCardList","constructor","hostRef","this","renderList","bind","handleSpaceKeyPress","e","url","keyCode","preventDefault","window","open","formatListContent","data","value","isLink","h","role","onKeyPress","href","target","dataArray","map","render","key","JSON","parse","listdata"],"sources":["src/snowflakes/myz/card/z-myz-card-list/styles.css?tag=z-myz-card-list&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-list/index.tsx"],"sourcesContent":["ul {\n  overflow: hidden;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  list-style: none;\n}\n\nul > li {\n  padding-left: 10px;\n  text-indent: -10px;\n}\n\nul > li > a {\n  display: block;\n  padding-top: calc(var(--space-unit) * 0.5);\n  color: var(--color-primary01);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n\nul > li > a::before {\n  padding-right: 5px;\n  content: \"•\";\n}\n\nul > li > span {\n  padding: 0 calc(var(--space-unit) * 2);\n  color: var(--color-surface04);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {Action} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardList {\n  /** list data stringified array */\n  @Prop()\n  listdata: string;\n\n  constructor() {\n    this.renderList = this.renderList.bind(this);\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent, url: string): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      window.open(url, \"_blank\");\n    }\n  }\n\n  private formatListContent(data: Action): HTMLAnchorElement {\n    const {value, isLink, url} = data;\n    if (!isLink) {\n      return <span>{value}</span>;\n    }\n\n    return (\n      <a\n        role=\"button\"\n        onKeyPress={(e: KeyboardEvent) => this.handleSpaceKeyPress(e, url)}\n        href={url}\n        target=\"_blank\"\n      >\n        {value}\n      </a>\n    );\n  }\n\n  private renderList(dataArray: Action[]): HTMLLIElement[] {\n    return dataArray.map((data: Action) => {\n      return <li>{this.formatListContent(data)}</li>;\n    });\n  }\n\n  render(): HTMLUListElement {\n    return <ul>{this.renderList(JSON.parse(this.listdata))}</ul>;\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,8qBAClB,MAAAC,EAAeD,E,MCOFE,EAAY,MAKvB,WAAAC,CAAAC,G,kCACEC,KAAKC,WAAaD,KAAKC,WAAWC,KAAKF,K,CAGjC,mBAAAG,CAAoBC,EAAkBC,GAC5C,GAAID,EAAEE,SAAW,IAAMF,EAAEE,SAAW,GAAI,CACtCF,EAAEG,iBACFC,OAAOC,KAAKJ,EAAK,S,EAIb,iBAAAK,CAAkBC,GACxB,MAAMC,MAACA,EAAKC,OAAEA,EAAMR,IAAEA,GAAOM,EAC7B,IAAKE,EAAQ,CACX,OAAOC,EAAA,YAAOF,E,CAGhB,OACEE,EAAA,KACEC,KAAK,SACLC,WAAaZ,GAAqBJ,KAAKG,oBAAoBC,EAAGC,GAC9DY,KAAMZ,EACNa,OAAO,UAENN,E,CAKC,UAAAX,CAAWkB,GACjB,OAAOA,EAAUC,KAAKT,GACbG,EAAA,UAAKd,KAAKU,kBAAkBC,K,CAIvC,MAAAU,GACE,OAAOP,EAAA,MAAAQ,IAAA,4CAAKtB,KAAKC,WAAWsB,KAAKC,MAAMxB,KAAKyB,W"}

package/www/build/p-7e442c5f.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,a as s,g as a}from"./p-10bb4f4b.js";import{s as n}from"./p-025f494e.js";import{m as r}from"./p-2c886e8b.js";import{H as o}from"./p-54b0b04e.js";const l=":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(-100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(100%)}}@keyframes slideoutup{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(-100%)}}@keyframes slideoutdown{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(100%)}}:host>#external-container{display:flex;min-height:52px;box-sizing:border-box;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-radius:4px;box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container.mobile-wrapped>#icon{align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between}:host>#external-container #text{margin-right:calc(var(--space-unit) * 2);color:var(--color-white);letter-spacing:0.16px;line-height:20px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-white)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-primary01-icon)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--gray800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";const h=l;const c=class{constructor(i){t(this,i);this.toastClose=e(this,"toastClose",7);this.isCloseEventCalled=false;this.heading=undefined;this.message=undefined;this.closebutton=undefined;this.autoclose=undefined;this.pauseonfocusloss=true;this.type=undefined;this.isdraggable=true;this.draggablepercentage=80;this.transition=undefined;this.percentage=undefined}watchPropIsdraggable(t){if(t){this.sliderManager.get("pan").set({enable:true})}else{this.sliderManager.get("pan").set({enable:false})}}watchPropAutoclose(t){clearTimeout(this.timeoutHandle);this.startClosingTimeout(t)}watchPropPauseonfocusloss(t){if(this.autoclose){if(t){document.addEventListener("visibilitychange",this.visibilityChangeEventHandler)}else{document.removeEventListener("visibilitychange",this.visibilityChangeEventHandler)}}}emitToastClose(t){this.timeoutHandle=null;this.elapsedTime=null;this.hostElement.classList.add(t);this.toastClose.emit()}componentWillLoad(){this.isMobile=window.innerWidth<=r;this.validateAutoclose();this.percentage=0}componentDidLoad(){this.isTextLong=this.detectWrap()||this.toastText.offsetHeight>20;this.startTime=Date.now();if(this.autoclose&&this.pauseonfocusloss){document.addEventListener("visibilitychange",this.visibilityChangeEventHandler)}this.isdraggable&&this.handleSlideOutDragAnimation()}visibilityChangeEventHandler(){if(document.visibilityState==="hidden"){this.timeoutHandle&&this.onBlur()}else{this.elapsedTime&&this.onFocus()}}validateAutoclose(){if(!this.autoclose&&!this.closebutton){console.error("At least one between autoclose and closebutton must be present")}}mapSlideOutClass(){switch(this.transition){case n.SLIDE_IN_DOWN:return n.SLIDE_OUT_UP;case n.SLIDE_IN_UP:return n.SLIDE_OUT_DOWN;case n.SLIDE_IN_LEFT:return n.SLIDE_OUT_RIGHT;case n.SLIDE_IN_RIGHT:return n.SLIDE_OUT_LEFT}}calculateDraggedPercentage(t){const e=this.hostElement.getBoundingClientRect();return Math.round(100*t.deltaX/e.width)}handleSlideOutDragAnimation(){this.sliderManager=new o(this.hostElement);this.sliderManager.get("pan").set({direction:o.DIRECTION_HORIZONTAL});this.sliderManager.on("pan",(t=>{this.percentage=this.calculateDraggedPercentage(t);this.hostElement.style.transition="none";this.hostElement.classList.remove(this.transition);const e={translate:`translateX(${this.percentage}%)`,translateBack:"translateX(0)"};this.hostElement.style.opacity=`${100-Math.abs(this.percentage)}%`;if(t.eventType===o.DIRECTION_LEFT||t.eventType===o.DIRECTION_RIGHT){this.hostElement.style.transform=e.translate;if(Math.abs(this.percentage)>this.draggablepercentage&&!this.isCloseEventCalled){this.isCloseEventCalled=true;this.emitToastClose(t.direction===o.DIRECTION_LEFT?"slide-out-left":"slide-out-right")}}if(t.isFinal&&Math.abs(this.percentage)<this.draggablepercentage){this.hostElement.style.transform=e.translateBack;this.hostElement.style.transition="all 1s";this.hostElement.style.opacity="100%";this.percentage=0}}))}onFocus(){let t=this.autoclose;if(this.elapsedTime){t=this.autoclose-this.elapsedTime}if(t>0){this.startClosingTimeout(t)}}onBlur(){this.elapsedTime=Date.now()-this.startTime;clearTimeout(this.timeoutHandle)}startClosingTimeout(t){this.timeoutHandle=window.setTimeout((()=>this.emitToastClose(this.mapSlideOutClass())),t)}detectWrap(){const t=this.container.offsetWidth;const e=this.container.children;let i=0;for(let t=0;t<e.length;t++){i+=e[t].offsetWidth}return i>t}renderText(){return i("div",{id:"text",ref:t=>this.toastText=t},i("span",{class:"title"},this.heading),i("span",{class:"message"},this.message))}renderButton(){return i("div",{id:"button"},i("slot",{name:"button"}))}renderCloseIcon(){if(!this.closebutton){return}return i("div",{id:"icon"},i("z-icon",{tabIndex:0,name:"multiply-circled",width:15,height:15,onClick:()=>this.emitToastClose(this.mapSlideOutClass()),onKeyPress:t=>{if(t.keyCode==32||t.keyCode==13){t.preventDefault();this.emitToastClose(this.mapSlideOutClass())}}}))}renderContainer(){return i("div",{tabIndex:0,id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong},ref:t=>this.container=t},this.renderText(),this.renderButton(),this.renderCloseIcon())}renderMobileContainer(){return i("div",{id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong,"mobile-wrapped":this.isTextLong}},i("div",{id:"flex-container",ref:t=>this.container=t},this.renderText(),this.renderButton()),this.renderCloseIcon())}render(){return i(s,{key:"aeaadb9a5b9ee6e77cfd1e991eec225364456e9e",style:{"--percentuale":`${this.percentage}%`},class:this.transition?this.transition:n.SLIDE_IN_DOWN,onAnimationEnd:t=>{if(this.autoclose&&t.animationName.includes("slidein")){this.startClosingTimeout(this.autoclose)}if(t.animationName.includes("slideout")){this.hostElement.parentNode.removeChild(this.hostElement)}}},this.isMobile?this.renderMobileContainer():this.renderContainer())}get hostElement(){return a(this)}static get watchers(){return{isdraggable:["watchPropIsdraggable"],autoclose:["watchPropAutoclose"],pauseonfocusloss:["watchPropPauseonfocusloss"]}}};c.style=h;export{c as z_toast_notification};
-//# sourceMappingURL=p-7e442c5f.entry.js.map

package/www/build/p-7e442c5f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZToastNotificationStyle0","ZToastNotification","this","isCloseEventCalled","watchPropIsdraggable","newValue","sliderManager","get","set","enable","watchPropAutoclose","clearTimeout","timeoutHandle","startClosingTimeout","watchPropPauseonfocusloss","autoclose","document","addEventListener","visibilityChangeEventHandler","removeEventListener","emitToastClose","cssClass","elapsedTime","hostElement","classList","add","toastClose","emit","componentWillLoad","isMobile","window","innerWidth","mobileBreakpoint","validateAutoclose","percentage","componentDidLoad","isTextLong","detectWrap","toastText","offsetHeight","startTime","Date","now","pauseonfocusloss","isdraggable","handleSlideOutDragAnimation","visibilityState","onBlur","onFocus","closebutton","console","error","mapSlideOutClass","transition","ToastNotificationTransition","SLIDE_IN_DOWN","SLIDE_OUT_UP","SLIDE_IN_UP","SLIDE_OUT_DOWN","SLIDE_IN_LEFT","SLIDE_OUT_RIGHT","SLIDE_IN_RIGHT","SLIDE_OUT_LEFT","calculateDraggedPercentage","e","bounding","getBoundingClientRect","Math","round","deltaX","width","Hammer","direction","DIRECTION_HORIZONTAL","on","style","remove","translateObj","translate","translateBack","opacity","abs","eventType","DIRECTION_LEFT","DIRECTION_RIGHT","transform","draggablepercentage","isFinal","time","setTimeout","parentWidth","container","offsetWidth","children","totalWidth","i","length","renderText","h","id","ref","el","class","heading","message","renderButton","name","renderCloseIcon","tabIndex","height","onClick","onKeyPress","keyCode","preventDefault","renderContainer","type","renderMobileContainer","render","Host","key","onAnimationEnd","animationName","includes","parentNode","removeChild"],"sources":["src/components/notification/z-toast-notification/styles.css?tag=z-toast-notification&encapsulation=shadow","src/components/notification/z-toast-notification/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100vw;\n  min-width: 200px;\n\n  --percentuale: 0;\n}\n\n:host(.slide-in-left) {\n  animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-right) {\n  animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-down) {\n  animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-up) {\n  animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-left) {\n  animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-right) {\n  animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-down) {\n  animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-up) {\n  animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n@keyframes slideinleft {\n  0% {\n    transform: translateX(100%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideinright {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideinup {\n  0% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideindown {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideoutleft {\n  0% {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - var(--percentuale));\n    transform: translateX(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes slideoutright {\n  0% {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - var(--percentuale));\n    transform: translateX(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n}\n\n@keyframes slideoutup {\n  0% {\n    opacity: 1;\n    transform: translateY(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes slideoutdown {\n  0% {\n    opacity: 1;\n    transform: translateY(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n}\n\n:host > #external-container {\n  display: flex;\n  min-height: 52px;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);\n  border-radius: 4px;\n  box-shadow: var(--shadow-3);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n}\n\n:host > #external-container.mobile-wrapped > #icon {\n  align-self: flex-start;\n}\n\n:host > #external-container.several-lines-padding {\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container > #flex-container {\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n}\n\n:host > #external-container #text {\n  margin-right: calc(var(--space-unit) * 2);\n  color: var(--color-white);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n  text-align: left;\n}\n\n:host > #external-container #text > .title {\n  margin-right: 4px;\n  font-weight: 600;\n}\n\n:host > #external-container.mobile-wrapped #button ::slotted(z-button) {\n  margin-top: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container #icon {\n  margin-left: calc(var(--space-unit) * 2);\n  cursor: pointer;\n  fill: var(--color-white);\n}\n\n:host > #external-container.dark {\n  background: var(--gray800);\n}\n\n:host > #external-container.light {\n  background: var(--color-background);\n}\n\n:host > #external-container.light #icon,\n:host > #external-container.warning #text,\n:host > #external-container.warning #icon {\n  fill: var(--color-primary01-icon);\n}\n\n:host > #external-container.light #text,\n:host > #external-container.warning #text {\n  color: var(--gray800);\n}\n\n:host > #external-container.accent {\n  background: var(--color-primary01);\n}\n\n:host > #external-container.error {\n  background: var(--color-error-default);\n}\n\n:host > #external-container.success {\n  background: var(--color-success-default);\n}\n\n:host > #external-container.warning {\n  background: var(--color-warning-default);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    width: unset;\n    max-width: 50vw;\n  }\n\n  :host > #external-container > #flex-container {\n    flex-wrap: nowrap;\n  }\n\n  :host > #external-container #text {\n    width: 100%;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    width: unset;\n    max-width: 33vw;\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Element, Host, State, Watch} from \"@stencil/core\";\nimport {ToastNotificationTransition, ToastNotification} from \"../../../beans\";\nimport {mobileBreakpoint} from \"../../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n  tag: \"z-toast-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotification {\n  @Element() hostElement: HTMLZToastNotificationElement;\n\n  /** toast notification's title */\n  @Prop()\n  heading?: string;\n\n  /** toast notification's message */\n  @Prop()\n  message: string;\n\n  /** toggles closing button rendering */\n  @Prop()\n  closebutton: boolean;\n\n  /** toast notification closing timeout (ms) */\n  @Prop()\n  autoclose?: number;\n\n  /** toast notification autoclose can be paused */\n  @Prop()\n  pauseonfocusloss?: boolean = true;\n\n  /** toast notification type: dark, light, accent, error, success, warning */\n  @Prop()\n  type?: ToastNotification;\n\n  /** toast notification can be draggable*/\n  @Prop()\n  isdraggable?: boolean = true;\n\n  /** toast notification draggable percentage*/\n  @Prop()\n  draggablepercentage?: number = 80;\n\n  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/\n  @Prop()\n  transition?: ToastNotificationTransition;\n\n  @State()\n  percentage: number;\n\n  private isTextLong: boolean;\n\n  private container!: HTMLElement;\n\n  private toastText!: HTMLElement;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\n\n  private isMobile: boolean;\n\n  private isCloseEventCalled = false;\n\n  @Watch(\"isdraggable\")\n  watchPropIsdraggable(newValue: boolean): void {\n    if (newValue) {\n      this.sliderManager.get(\"pan\").set({enable: true});\n    } else {\n      this.sliderManager.get(\"pan\").set({enable: false});\n    }\n  }\n\n  @Watch(\"autoclose\")\n  watchPropAutoclose(newValue: number): void {\n    clearTimeout(this.timeoutHandle);\n    this.startClosingTimeout(newValue);\n  }\n\n  @Watch(\"pauseonfocusloss\")\n  watchPropPauseonfocusloss(newValue: boolean): void {\n    if (this.autoclose) {\n      if (newValue) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      } else {\n        document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n    }\n  }\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private emitToastClose(cssClass: string): void {\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.hostElement.classList.add(cssClass);\n    this.toastClose.emit();\n  }\n\n  componentWillLoad(): void {\n    this.isMobile = window.innerWidth <= mobileBreakpoint;\n    this.validateAutoclose();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;\n    this.startTime = Date.now();\n    if (this.autoclose && this.pauseonfocusloss) {\n      document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  private visibilityChangeEventHandler(): void {\n    if (document.visibilityState === \"hidden\") {\n      this.timeoutHandle && this.onBlur();\n    } else {\n      this.elapsedTime && this.onFocus();\n    }\n  }\n\n  private validateAutoclose(): void {\n    if (!this.autoclose && !this.closebutton) {\n      console.error(\"At least one between autoclose and closebutton must be present\");\n    }\n  }\n\n  private mapSlideOutClass(): ToastNotificationTransition {\n    switch (this.transition) {\n      case ToastNotificationTransition.SLIDE_IN_DOWN:\n        return ToastNotificationTransition.SLIDE_OUT_UP;\n      case ToastNotificationTransition.SLIDE_IN_UP:\n        return ToastNotificationTransition.SLIDE_OUT_DOWN;\n      case ToastNotificationTransition.SLIDE_IN_LEFT:\n        return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n      case ToastNotificationTransition.SLIDE_IN_RIGHT:\n        return ToastNotificationTransition.SLIDE_OUT_LEFT;\n    }\n  }\n\n  private calculateDraggedPercentage(e): number {\n    const bounding = this.hostElement.getBoundingClientRect();\n\n    return Math.round((100 * e.deltaX) / bounding.width);\n  }\n\n  private handleSlideOutDragAnimation(): void {\n    this.sliderManager = new Hammer(this.hostElement);\n    this.sliderManager.get(\"pan\").set({\n      direction: Hammer.DIRECTION_HORIZONTAL,\n    });\n\n    this.sliderManager.on(\"pan\", (e) => {\n      this.percentage = this.calculateDraggedPercentage(e);\n      this.hostElement.style.transition = \"none\";\n      this.hostElement.classList.remove(this.transition);\n      const translateObj = {\n        translate: `translateX(${this.percentage}%)`,\n        translateBack: \"translateX(0)\",\n      };\n\n      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n      if (e.eventType === Hammer.DIRECTION_LEFT || e.eventType === Hammer.DIRECTION_RIGHT) {\n        this.hostElement.style.transform = translateObj.translate;\n        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n          this.isCloseEventCalled = true;\n          this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n        }\n      }\n\n      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n        this.hostElement.style.transform = translateObj.translateBack;\n        this.hostElement.style.transition = \"all 1s\";\n        this.hostElement.style.opacity = \"100%\";\n        this.percentage = 0;\n      }\n    });\n  }\n\n  private onFocus(): void {\n    let time = this.autoclose;\n    if (this.elapsedTime) {\n      time = this.autoclose - this.elapsedTime;\n    }\n    if (time > 0) {\n      this.startClosingTimeout(time);\n    }\n  }\n\n  private onBlur(): void {\n    this.elapsedTime = Date.now() - this.startTime;\n    clearTimeout(this.timeoutHandle);\n  }\n\n  private startClosingTimeout(time: number): void {\n    this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n  }\n\n  private detectWrap(): boolean {\n    const parentWidth = this.container.offsetWidth;\n    const children = this.container.children;\n    let totalWidth = 0;\n\n    for (let i = 0; i < children.length; i++) {\n      totalWidth += (children[i] as HTMLElement).offsetWidth;\n    }\n\n    return totalWidth > parentWidth;\n  }\n\n  private renderText(): HTMLDivElement {\n    return (\n      <div\n        id=\"text\"\n        ref={(el) => (this.toastText = el as HTMLElement)}\n      >\n        <span class=\"title\">{this.heading}</span>\n        <span class=\"message\">{this.message}</span>\n      </div>\n    );\n  }\n\n  private renderButton(): HTMLDivElement {\n    return (\n      <div id=\"button\">\n        <slot name=\"button\" />\n      </div>\n    );\n  }\n\n  private renderCloseIcon(): HTMLDivElement {\n    if (!this.closebutton) {\n      return;\n    }\n\n    return (\n      <div id=\"icon\">\n        <z-icon\n          tabIndex={0}\n          name=\"multiply-circled\"\n          width={15}\n          height={15}\n          onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n          onKeyPress={(e) => {\n            if (e.keyCode == 32 || e.keyCode == 13) {\n              e.preventDefault();\n              this.emitToastClose(this.mapSlideOutClass());\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  private renderContainer(): HTMLDivElement {\n    return (\n      <div\n        tabIndex={0}\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n        }}\n        ref={(el) => (this.container = el as HTMLElement)}\n      >\n        {this.renderText()}\n        {this.renderButton()}\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  private renderMobileContainer(): HTMLDivElement {\n    return (\n      <div\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n          \"mobile-wrapped\": this.isTextLong,\n        }}\n      >\n        <div\n          id=\"flex-container\"\n          ref={(el) => (this.container = el as HTMLElement)}\n        >\n          {this.renderText()}\n          {this.renderButton()}\n        </div>\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\n          \"--percentuale\": `${this.percentage}%`,\n        }}\n        class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n        onAnimationEnd={(e: AnimationEvent) => {\n          if (this.autoclose && e.animationName.includes(\"slidein\")) {\n            this.startClosingTimeout(this.autoclose);\n          }\n          if (e.animationName.includes(\"slideout\")) {\n            this.hostElement.parentNode.removeChild(this.hostElement);\n          }\n        }}\n      >\n        {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/www/build/p-7ef963d4.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as o,a as n,g as a}from"./p-10bb4f4b.js";import{r}from"./p-955da62e.js";import"./p-2ebf9e17.js";import"./p-b0ef19c7.js";const s=":host{--columns:1;display:grid;min-width:max-content;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";const i=s;const d=class{constructor(o){t(this,o);this.expand=e(this,"expand",7);this.expandable=false;this.expanded=false;this.expandableContentId=undefined}updateColumns(){const t=Array.from(this.host.querySelectorAll("z-td, z-th"));if(this.expandable){t.pop()}const e=t.map((t=>t.colspan||1)).reduce(((t,e)=>t+e),0);this.host.style.setProperty("--columns",`${e}`);if(this.expandable){const e=t.pop();e.id=e.id||`z-tr-expandable-content-${r()}`;this.expandableContentId=e.id}}onRowClick(t){const e=t.target.closest(".prevent-expand");if(!this.expandable||e){return}this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}componentWillLoad(){this.updateColumns()}render(){return o(n,{key:"23e6468561e474d51304677536e0d731fa09cfbf",role:"row",onClick:this.onRowClick.bind(this),expanded:this.expanded},o("div",{key:"e716dd6247818a285aacd88109964cf7b063b317",class:"z-tr--expand-button-container"},this.expandable&&o("button",{"aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},o("z-icon",{name:this.expanded?"minus-circled":"plus-circled"}))),o("slot",{key:"0de8d962ba7e9c72aa614c76052bab607b83a04e",onSlotchange:this.updateColumns.bind(this)}))}get host(){return a(this)}static get watchers(){return{expandable:["updateColumns"]}}};d.style=i;export{d as Z};
-//# sourceMappingURL=p-7ef963d4.js.map

package/www/build/p-7ef963d4.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZTrStyle0","ZTr","updateColumns","cells","Array","from","this","host","querySelectorAll","expandable","pop","columns","map","cell","colspan","reduce","a","b","style","setProperty","expandableContent","id","randomId","expandableContentId","onRowClick","event","preventExpand","target","closest","expanded","expand","emit","componentWillLoad","render","h","Host","key","role","onClick","bind","class","type","name","onSlotchange"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n  /* number of columns of the row. will be set in component's ts code */\n  --columns: 1;\n\n  display: grid;\n  min-width: max-content;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n  border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n  --show-expandable-button: visible;\n\n  cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n  grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n  border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n  border-left: 0;\n  grid-column: 1 / span calc(var(--columns) + 1);\n  grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n  display: none;\n}\n\n:host([expanded]) {\n  margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n  box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n  background-color: var(--color-surface02);\n}\n\n.z-tr--expand-button-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: auto;\n  appearance: none;\n  background: transparent;\n  cursor: pointer;\n  visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        onClick={this.onRowClick.bind(this)}\n        expanded={this.expanded}\n      >\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+IAAA,MAAMA,EAAY,0kDAClB,MAAAC,EAAeD,E,MCeFE,EAAG,M,wEAaD,M,cAMF,M,mCAeD,aAAAC,GACR,MAAMC,EAAQC,MAAMC,KAAKC,KAAKC,KAAKC,iBAAkD,eACrF,GAAIF,KAAKG,WAAY,CACnBN,EAAMO,K,CAGR,MAAMC,EAAUR,EAAMS,KAAKC,GAASA,EAAKC,SAAW,IAAGC,QAAO,CAACC,EAAGC,IAAMD,EAAIC,GAAG,GAC/EX,KAAKC,KAAKW,MAAMC,YAAY,YAAa,GAAGR,KAE5C,GAAIL,KAAKG,WAAY,CACnB,MAAMW,EAAoBjB,EAAMO,MAChCU,EAAkBC,GAAKD,EAAkBC,IAAM,2BAA2BC,MAC1EhB,KAAKiB,oBAAsBH,EAAkBC,E,EAQzC,UAAAG,CAAWC,GACjB,MAAMC,EAAiBD,EAAME,OAAuBC,QAAQ,mBAC5D,IAAKtB,KAAKG,YAAciB,EAAe,CACrC,M,CAGFpB,KAAKuB,UAAYvB,KAAKuB,SACtBvB,KAAKwB,OAAOC,KAAK,CAACF,SAAUvB,KAAKuB,U,CAGnC,iBAAAG,GACE1B,KAAKJ,e,CAGP,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,MACLC,QAAShC,KAAKkB,WAAWe,KAAKjC,MAC9BuB,SAAUvB,KAAKuB,UAEfK,EAAA,OAAAE,IAAA,2CAAKI,MAAM,iCACRlC,KAAKG,YACJyB,EAAA,0BACiB5B,KAAKuB,SAAW,OAAS,QAAO,aACnCvB,KAAKuB,SAAW,gBAAkB,eAAc,gBAC7CvB,KAAKiB,oBACpBkB,KAAK,UAELP,EAAA,UAAQQ,KAAMpC,KAAKuB,SAAW,gBAAkB,mBAItDK,EAAA,QAAAE,IAAA,2CAAMO,aAAcrC,KAAKJ,cAAcqC,KAAKjC,Q"}

package/www/build/p-a2b43ed1.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,a as i,g as o}from"./p-10bb4f4b.js";import{y as s,D as r}from"./p-025f494e.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:"98a5c82a7087e6a67f0d76f91f87274b9fb4dcaa"},e("slot",{key:"c24aeee90fdcf9e7a68c6cbaff2d1a490b252c46",name:"secondary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===s.BEFORE&&e("z-divider",{size:r.LARGE,color:"z-section-title--divider-color"}),e("slot",{key:"c7f5595456cc7601afb0fccb20b948802c58ad41",name:"primary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===s.AFTER&&e("z-divider",{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-a2b43ed1.entry.js.map

package/www/build/p-a2b43ed1.entry.js.map

@@ -1 +0,0 @@
-{"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,aACEK,KAAMC,EAAYC,MAClBC,MAAM,mCAGVR,EAAA,QAAAE,IAAA,2CAAMC,KAAK,mBACTR,KAAKC,mBAAqBD,KAAKS,kBAAoBZ,EAA6BiB,OAChFT,EAAA,aACEK,KAAMC,EAAYC,MAClBC,MAAM,mC"}

package/www/build/p-a402854c.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c,h,g as r}from"./p-10bb4f4b.js";import{x as e}from"./p-025f494e.js";const s=".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--color-surface01);border-radius:14px;color:var(--color-default-text);fill:var(--color-default-text);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]):hover>z-icon.sc-z-chip:first-child{fill:var(--color-default-icon)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";const a=s;const o=class{constructor(h){i(this,h);this.interactiveIconClick=c(this,"interactiveIconClick",7);this.icon=undefined;this.type=e.DEFAULT;this.interactiveIcon=undefined;this.disabled=false;this.ariaLabel=""}render(){return h("div",{key:"6f854f9af61641c48e7870b320f330e08fa10115",class:{"z-chip-container":true,"z-chip-interactive":!!this.interactiveIcon,[this.type]:true},"aria-disabled":this.disabled},this.icon&&h("z-icon",{name:this.icon}),h("slot",{key:"17dd6eacc4edf0df59bd68f4c453126e954c5e86"}),this.interactiveIcon&&h("button",{type:"button",onClick:()=>this.interactiveIconClick.emit(),"aria-label":this.ariaLabel,disabled:this.disabled},h("z-icon",{class:"interactive-icon",name:this.interactiveIcon})))}get el(){return r(this)}};o.style=a;export{o as z_chip};
-//# sourceMappingURL=p-a402854c.entry.js.map

package/www/build/p-a402854c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZChipStyle0","ZChip","ZChipType","DEFAULT","render","h","key","class","this","interactiveIcon","type","disabled","icon","name","onClick","interactiveIconClick","emit","ariaLabel"],"sources":["src/components/buttons/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/buttons/z-chip/index.tsx"],"sourcesContent":[":host > .z-chip-container {\n  display: inline-flex;\n  min-height: 28px;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--gray400);\n  background-color: var(--color-surface01);\n  border-radius: 14px;\n  color: var(--color-default-text);\n  fill: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  line-height: 28px;\n}\n\n:host > .z-chip-interactive {\n  font-weight: var(--font-sb);\n}\n\n:host > .z-chip-container > button {\n  padding: 0;\n  border: none;\n  margin-left: var(--space-unit);\n  background-color: transparent;\n  cursor: pointer;\n}\n\n:host > .z-chip-container > z-icon:first-child {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n:host > .z-chip-container:not([aria-disabled]):hover > z-icon:first-child {\n  fill: var(--color-default-icon);\n}\n\n:host > .z-chip-container .interactive-icon {\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] z-icon {\n  color: var(--color-disabled03);\n  cursor: auto;\n  fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n  border: var(--border-size-small) solid var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n  border-radius: 100%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > button:not([disabled]):active:hover .interactive-icon {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n  --z-icon-width: 22px;\n  --z-icon-height: 22px;\n}\n\n/* :host type */\n:host > .z-chip-container.default {\n  min-height: 44px;\n  border-radius: 22px;\n  line-height: 44px;\n}\n\n:host > .z-chip-container.medium {\n  min-height: 40px;\n  border-radius: 22px;\n  line-height: 40px;\n}\n\n:host > .z-chip-container.small {\n  min-height: 36px;\n  border-radius: 22px;\n  line-height: 36px;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .z-chip-container {\n    font-size: 12px;\n  }\n\n  /* :host type */\n  :host > .z-chip-container.default {\n    min-height: 32px;\n    border-radius: 16px;\n    line-height: 32px;\n  }\n\n  :host > .z-chip-container.medium {\n    min-height: 28px;\n    border-radius: 16px;\n    line-height: 28px;\n  }\n\n  :host > .z-chip-container.small {\n    min-height: 24px;\n    border-radius: 16px;\n    line-height: 24px;\n  }\n\n  :host > .z-chip-container > z-icon,\n  :host > .z-chip-container .interactive-icon {\n    --z-icon-width: 14px;\n    --z-icon-height: 14px;\n  }\n}\n","import {Component, Prop, h, Element, Event, EventEmitter} from \"@stencil/core\";\nimport {ZChipType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** z-chip aria-label string */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n        }}\n        aria-disabled={this.disabled}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.ariaLabel}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"mFAAA,MAAMA,EAAY,8qFAClB,MAAAC,EAAeD,E,MCQFE,EAAK,M,kHASGC,EAAUC,Q,6CAQR,M,eAIT,E,CAMZ,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,mBAAoB,KACpB,uBAAwBC,KAAKC,gBAC7B,CAACD,KAAKE,MAAO,MACd,gBACcF,KAAKG,UAEnBH,KAAKI,MAAQP,EAAA,UAAQQ,KAAML,KAAKI,OACjCP,EAAA,QAAAC,IAAA,6CACCE,KAAKC,iBACJJ,EAAA,UACEK,KAAK,SACLI,QAAS,IAAMN,KAAKO,qBAAqBC,OAAM,aACnCR,KAAKS,UACjBN,SAAUH,KAAKG,UAEfN,EAAA,UACEE,MAAM,mBACNM,KAAML,KAAKC,mB"}

package/www/build/p-a6fcefe7.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e,a as s,g as o}from"./p-10bb4f4b.js";import{V as r,W as n,p as a,g as l,P as h,i as p}from"./p-025f494e.js";import{g as c,a as d}from"./p-955da62e.js";import"./p-2c886e8b.js";const f=":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-link-primary);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-link-primary)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}";const u=f;const m=class{constructor(e){i(this,e);this.clickOnNode=t(this,"clickOnNode",7);this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null;this.pathStyle=r.UNDERLINED;this.homepageVariant=n.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=c();if(this.viewPortWidth!==a.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(i,t){if(i===a.MOBILE||t===a.MOBILE&&i===a.TABLET||t===a.MOBILE&&i===a.DESKTOP||t===a.MOBILE&&i===a.DESKTOP_WIDE||t===a.TABLET&&i===a.DESKTOP||t===a.TABLET&&i===a.DESKTOP_WIDE||t===a.DESKTOP&&i===a.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=c();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((i=>!!i.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 i=0;i<this.pathsList.length;i++){if(this.pathsList[i].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(i!==this.pathsList.length-1){const t=this.truncateWithEllipsis(this.pathsList[i].text,this.truncateChar);this.currentEllipsisText=this.pathsList[i].text;this.pathsList[i].text=t;this.pathsList[i].hasTooltip=true;this.truncatePosition=i;return}}}truncateWithEllipsis(i,t){if(i.length<=t){return i}return i.substring(0,t-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((i=>({text:i.textContent,path:i.href,hasTooltip:false})))}renderHomepageNode(){return e("li",null,e("a",{class:{"homepage-text":this.homepageVariant===n.TEXT},href:this.homepageNode.path,onClick:i=>this.handlePreventFollowUrl(i,this.homepageNode),innerHTML:this.homepageVariant===n.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(i,t){if(this.preventFollowUrl){i.preventDefault();this.clickOnNode.emit(t.path)}}handleOverflowMenuAccessibility(i){const t=this.anchorElements.length;if(i.key===l.TAB){i.preventDefault();return}i.stopPropagation();const e=[l.ARROW_DOWN,l.ARROW_UP];if(e.includes(i.key)){i.preventDefault();if(i.key===l.ARROW_DOWN){this.currentIndex=t===this.currentIndex+1?0:this.currentIndex+1}if(i.key===l.ARROW_UP){this.currentIndex=this.currentIndex<=0?t-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(i.key===l.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return e("li",null,e("z-popover",{class:"hidden-paths-popover",ref:i=>this.collapsedElementsRef=i,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:p.SMALL},this.collapsedElements.map(((i,t,s)=>e("div",null,e("z-list-element",{clickable:true},e("a",{class:"text-ellipsis",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i),onKeyDown:i=>this.handleOverflowMenuAccessibility(i),innerHTML:i.text})),t<s.length-1&&e("z-divider",{color:"color-surface03"})))))))),e("button",{class:"dots",ref:i=>this.triggerButton=i,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:i=>{d(i,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 i=this.pathsList[this.pathsList.length-1];if(!i){return}return e("li",null,e("a",{"aria-current":i.path?undefined:"page",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i)},e("z-icon",{name:"chevron-left"}),e("span",{class:{"missing-path":!i.path,"text-ellipsis":true}},i.text)))}renderItems(){let i;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((t,s)=>e("li",null,t.hasTooltip&&e("z-popover",{class:"full-path-tooltip",bindTo:i,open:this.popoverEllipsisOpen,position:h.BOTTOM_RIGHT,closable:false,showArrow:true},e("span",{class:"tooltip-content"},this.currentEllipsisText)),e("a",{class:{"missing-path":!t.path},ref:t=>i=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:t.text}),s!==this.pathsList.length-1&&e("z-icon",{class:"separator",name:"chevron-right"}))))]}render(){return e(s,{key:"f733fb3402c54c6d006af3ff72ddcba4a61256d5",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},e("nav",{key:"a75562e28f23a646eccebf5c80ee1f71135a4b58",ref:i=>this.wrapElement=i,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===r.SEMIBOLD,underlined:this.pathStyle===r.UNDERLINED}},e("ol",{key:"2b9f2868480e987d14e8829af4850d028087e722"},this.viewPortWidth===a.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return o(this)}static get watchers(){return{maxNodesToShow:["handlePropChange"],viewPortWidth:["handleResizeUp"]}}};m.style=u;export{m as z_breadcrumb};
-//# sourceMappingURL=p-a6fcefe7.entry.js.map

package/www/build/p-a6fcefe7.entry.js.map

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

package/www/build/p-b0ef19c7.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as n,a as o,g as s}from"./p-10bb4f4b.js";import{P as i,S as a,B as r,e as c}from"./p-025f494e.js";const h=':host{position:relative;display:flex;min-width:128px;box-sizing:border-box;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:"";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}:host{background-color:var(--color-surface02);font-weight:var(--font-sb)}:host([sortable]){cursor:pointer}.z-th--sort-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin-top:auto;background-color:transparent;cursor:pointer}.z-th--sort-button:focus{box-shadow:var(--shadow-focus-primary);outline:none}';const l=h;const u=class{constructor(n){t(this,n);this.sort=e(this,"sort",7);this.colspan=undefined;this.showMenu=null;this.sticky=false;this.sortDirection=undefined;this.popoverPosition=i.AUTO;this.isMenuOpen=false}get ariaSortDirection(){if(!this.sortDirection){return null}return this.sortDirection===a.ASC?"ascending":"descending"}handleSort(){if(!this.sortDirection){return}this.sortDirection=this.sortDirection===a.ASC?a.DESC:a.ASC;this.sort.emit({sortDirection:this.sortDirection})}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}}componentWillLoad(){this.updateColspan()}render(){return n(o,{key:"d164205e39355dbd733b9161a7a27e385c6ad44b",role:"columnheader","menu-open":this.isMenuOpen,"aria-sort":this.ariaSortDirection},n("slot",{key:"ef5d623eaf0ff7aa7a1005d3d35e19fe027d731f"}),this.sortDirection&&n("button",{class:"z-th--sort-button",type:"button",onClick:this.handleSort.bind(this)},n("z-icon",{name:this.sortDirection===a.ASC?"arrow-simple-up":"arrow-simple-down",width:14,height:14})),this.showMenu&&n("div",{class:"cell--menu-container"},n("z-button",{variant:r.TERTIARY,icon:"contextual-menu",size:c.X_SMALL,ref:t=>this.menuTrigger=t,onClick:()=>this.popoverEl.open=!this.popoverEl.open}),n("z-popover",{ref:t=>this.popoverEl=t,bindTo:this.menuTrigger,onOpenChange:t=>this.isMenuOpen=t.detail.open,position:this.popoverPosition},n("slot",{name:"contextual-menu"}))))}get host(){return s(this)}static get watchers(){return{colspan:["updateColspan"]}}};u.style=l;export{u as Z};
-//# sourceMappingURL=p-b0ef19c7.js.map

package/www/build/p-b0ef19c7.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZThStyle0","ZTh","PopoverPosition","AUTO","ariaSortDirection","this","sortDirection","SortDirection","ASC","handleSort","DESC","sort","emit","updateColspan","colspan","host","style","gridColumn","removeProperty","componentWillLoad","render","h","Host","key","role","isMenuOpen","class","type","onClick","bind","name","width","height","showMenu","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","popoverEl","open","bindTo","onOpenChange","event","detail","position","popoverPosition"],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n  background-color: var(--color-surface02);\n  font-weight: var(--font-sb);\n}\n\n/* :host([sticky]) {\n  background-color: var(--color-surface02);\n} */\n\n:host([sortable]) {\n  cursor: pointer;\n}\n\n.z-th--sort-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin-top: auto;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.z-th--sort-button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTh {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   * Set `SortDirection.ASC` or `SortDirection.DESC` to show the sort icon.\n   */\n  @Prop({mutable: true})\n  sortDirection?: SortDirection;\n\n  /**\n   * Set popover position.\n   */\n  @Prop()\n  popoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  /**\n   * Sort event fired when the user clicks on the sort button.\n   * The sorting logic must be implemented by the app.\n   * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n   */\n  @Event()\n  private sort: EventEmitter;\n\n  private menuTrigger: HTMLElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n   */\n  private get ariaSortDirection(): string {\n    if (!this.sortDirection) {\n      return null;\n    }\n\n    return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n  }\n\n  /**\n   * Handle the click on the sort button.\n   * @fires sort\n   */\n  private handleSort(): void {\n    if (!this.sortDirection) {\n      return;\n    }\n\n    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n    this.sort.emit({\n      sortDirection: this.sortDirection,\n    });\n  }\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZThElement {\n    return (\n      <Host\n        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n      >\n        <slot></slot>\n        {this.sortDirection && (\n          <button\n            class=\"z-th--sort-button\"\n            type=\"button\"\n            onClick={this.handleSort.bind(this)}\n          >\n            <z-icon\n              name={this.sortDirection === SortDirection.ASC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n              width={14}\n              height={14}\n            />\n          </button>\n        )}\n        {this.showMenu && (\n          <div class=\"cell--menu-container\">\n            <z-button\n              variant={ButtonVariant.TERTIARY}\n              icon=\"contextual-menu\"\n              size={ControlSize.X_SMALL}\n              ref={(el) => (this.menuTrigger = el as HTMLElement)}\n              onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n            />\n            <z-popover\n              ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n              bindTo={this.menuTrigger}\n              onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n              position={this.popoverPosition}\n            >\n              <slot name=\"contextual-menu\"></slot>\n            </z-popover>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yHAAA,MAAMA,EAAY,81CAClB,MAAAC,EAAeD,E,MCYFE,EAAG,M,yFAekB,K,YAMvB,M,kDAaSC,EAAgBC,K,gBAMrB,K,CAiBb,qBAAYC,GACV,IAAKC,KAAKC,cAAe,CACvB,OAAO,I,CAGT,OAAOD,KAAKC,gBAAkBC,EAAcC,IAAM,YAAc,Y,CAO1D,UAAAC,GACN,IAAKJ,KAAKC,cAAe,CACvB,M,CAGFD,KAAKC,cAAgBD,KAAKC,gBAAkBC,EAAcC,IAAMD,EAAcG,KAAOH,EAAcC,IACnGH,KAAKM,KAAKC,KAAK,CACbN,cAAeD,KAAKC,e,CAKd,aAAAO,GACR,GAAIR,KAAKS,QAAS,CAChBT,KAAKU,KAAKC,MAAMC,WAAa,QAAQZ,KAAKS,S,KACrC,CACLT,KAAKU,KAAKC,MAAME,eAAe,c,EAInC,iBAAAC,GACEd,KAAKQ,e,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,eAAc,YACRnB,KAAKoB,WAAU,YACfpB,KAAKD,mBAEhBiB,EAAA,QAAAE,IAAA,6CACClB,KAAKC,eACJe,EAAA,UACEK,MAAM,oBACNC,KAAK,SACLC,QAASvB,KAAKI,WAAWoB,KAAKxB,OAE9BgB,EAAA,UACES,KAAMzB,KAAKC,gBAAkBC,EAAcC,IAAM,kBAAoB,oBACrEuB,MAAO,GACPC,OAAQ,MAIb3B,KAAK4B,UACJZ,EAAA,OAAKK,MAAM,wBACTL,EAAA,YACEa,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQrC,KAAKsC,YAAcD,EACjCd,QAAS,IAAOvB,KAAKuC,UAAUC,MAAQxC,KAAKuC,UAAUC,OAExDxB,EAAA,aACEoB,IAAMC,GAAQrC,KAAKuC,UAAYF,EAC/BI,OAAQzC,KAAKsC,YACbI,aAAeC,GAAW3C,KAAKoB,WAAauB,EAAMC,OAAOJ,KACzDK,SAAU7C,KAAK8C,iBAEf9B,EAAA,QAAMS,KAAK,sB"}

package/www/build/p-b4ad044a.entry.js

@@ -1,2 +0,0 @@
-export{Z as z_th}from"./p-b0ef19c7.js";import"./p-10bb4f4b.js";import"./p-025f494e.js";
-//# sourceMappingURL=p-b4ad044a.entry.js.map

package/www/build/p-b4ad044a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":[],"mappings":""}