@zanichelli/albe-web-components 19.6.1 → 20.0.0

package/dist/components/z-myz-card-list.js

@@ -1,2 +0,0 @@
-import{proxyCustomElement as t,HTMLElement as e,h as n,transformTag as i}from"@stencil/core/internal/client";const a=()=>`*:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}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 r=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.renderList=this.renderList.bind(this)}handleSpaceKeyPress(t,e){if(t.keyCode==32||t.keyCode==13){t.preventDefault();window.open(e,"_blank")}}formatListContent(t){const{value:e,isLink:i,url:a}=t;if(!i){return n("span",null,e)}return n("a",{role:"button",onKeyPress:t=>this.handleSpaceKeyPress(t,a),href:a,target:"_blank"},e)}renderList(t){return t.map((t=>n("li",null,this.formatListContent(t))))}render(){return n("ul",{key:"a300da3bf2b9c83f59a6464b82fb2448f97555f9"},this.renderList(JSON.parse(this.listdata)))}static get style(){return a()}},[1,"z-myz-card-list",{listdata:[1]}]);function o(){if(typeof customElements==="undefined"){return}const t=["z-myz-card-list"];t.forEach((t=>{switch(t){case"z-myz-card-list":if(!customElements.get(i(t))){customElements.define(i(t),r)}break}}))}const s=r;const l=o;export{s as ZMyzCardList,l as defineCustomElement};
-//# sourceMappingURL=z-myz-card-list.js.map

package/dist/components/z-myz-card-list.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMyzCardList","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","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":["*:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\nul {\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, ComponentInterface, 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 implements ComponentInterface {\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":"6GAAA,MAAMA,EAAY,IAAM,qvB,MCQXC,EAAYC,EAAA,MAAAD,UAAAE,EAKvB,WAAAC,CAAAC,G,kEACEC,KAAKC,WAAaD,KAAKC,WAAWC,KAAKF,KACxC,CAEO,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","ignoreList":[]}

package/dist/components/z-myz-card.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZMyzCard extends Components.ZMyzCard, HTMLElement {}
-export const ZMyzCard: {
-    prototype: ZMyzCard;
-    new (): ZMyzCard;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-myz-card.js

@@ -1,2 +0,0 @@
-import{Z as o,d as s}from"./index23.js";const t=o;const n=s;export{t as ZMyzCard,n as defineCustomElement};
-//# sourceMappingURL=z-myz-card.js.map

package/dist/components/z-myz-card.js.map

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

package/dist/components/z-myz-list-item.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZMyzListItem extends Components.ZMyzListItem, HTMLElement {}
-export const ZMyzListItem: {
-    prototype: ZMyzListItem;
-    new (): ZMyzListItem;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-myz-list-item.js

@@ -1,2 +0,0 @@
-import{Z as o,d as s}from"./index27.js";const t=o;const n=s;export{t as ZMyzListItem,n as defineCustomElement};
-//# sourceMappingURL=z-myz-list-item.js.map

package/dist/components/z-myz-list-item.js.map

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

package/dist/components/z-myz-list.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZMyzList extends Components.ZMyzList, HTMLElement {}
-export const ZMyzList: {
-    prototype: ZMyzList;
-    new (): ZMyzList;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-myz-list.js

@@ -1,2 +0,0 @@
-import{proxyCustomElement as t,HTMLElement as i,h as e,transformTag as s}from"@stencil/core/internal/client";import{d as n}from"./index3.js";import{d as a}from"./index27.js";const r=()=>`ul{padding:0;margin:0}`;const o=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}componentWillLoad(){if(this.inputrawdata){this.parseinputrawdata(this.inputrawdata)}}parseinputrawdata(t){this.list=[...JSON.parse(t)]}oninputrawdataChange(t){this.parseinputrawdata(t)}render(){const t=this.list?this.list.length-1:-1;return e("ul",{key:"68407f9f3732f51af43763651c228bf950aada69"},this.list&&this.list.map(((i,s)=>e("z-myz-list-item",{listitemid:i.listitemid,text:i.text,link:i.link,linktarget:i.linktarget,icon:i.icon,underlined:t!=s}))))}static get watchers(){return{inputrawdata:[{oninputrawdataChange:0}]}}static get style(){return r()}},[1,"z-myz-list",{inputrawdata:[1],list:[1040]},undefined,{inputrawdata:[{oninputrawdataChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const t=["z-myz-list","z-icon","z-myz-list-item"];t.forEach((t=>{switch(t){case"z-myz-list":if(!customElements.get(s(t))){customElements.define(s(t),o)}break;case"z-icon":if(!customElements.get(s(t))){n()}break;case"z-myz-list-item":if(!customElements.get(s(t))){a()}break}}))}const m=o;const l=c;export{m as ZMyzList,l as defineCustomElement};
-//# sourceMappingURL=z-myz-list.js.map

package/dist/components/z-myz-list.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMyzList","__stencil_proxyCustomElement","HTMLElement","componentWillLoad","this","inputrawdata","parseinputrawdata","list","JSON","parse","oninputrawdataChange","newValue","render","lastElem","length","h","key","map","bean","i","listitemid","text","link","linktarget","icon","underlined"],"sources":["src/snowflakes/myz/list/z-myz-list/styles.css?tag=z-myz-list&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list/index.tsx"],"sourcesContent":["ul {\n  padding: 0;\n  margin: 0;\n}\n","import {Component, ComponentInterface, Prop, Watch, h} from \"@stencil/core\";\nimport {ListItem} from \"../../../../beans/index.js\";\n\n@Component({\n  tag: \"z-myz-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzList implements ComponentInterface {\n  /** json stringified list data (mutable, optional) */\n  @Prop()\n  inputrawdata?: string;\n\n  /** list item data (mutable, optional)*/\n  @Prop({mutable: true})\n  list?: ListItem[];\n\n  componentWillLoad(): void {\n    if (this.inputrawdata) {\n      this.parseinputrawdata(this.inputrawdata);\n    }\n  }\n\n  private parseinputrawdata(inputrawdata: string): void {\n    this.list = [...JSON.parse(inputrawdata)];\n  }\n\n  @Watch(\"inputrawdata\")\n  oninputrawdataChange(newValue: string): void {\n    this.parseinputrawdata(newValue);\n  }\n\n  render(): HTMLUListElement {\n    const lastElem = this.list ? this.list.length - 1 : -1;\n\n    return (\n      <ul>\n        {this.list &&\n          this.list.map((bean, i) => (\n            <z-myz-list-item\n              listitemid={bean.listitemid}\n              text={bean.text}\n              link={bean.link}\n              linktarget={bean.linktarget}\n              icon={bean.icon}\n              underlined={lastElem != i}\n            />\n          ))}\n      </ul>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAY,IAAM,yB,MCQXC,EAAQC,EAAA,MAAAD,UAAAE,E,iFASnB,iBAAAC,GACE,GAAIC,KAAKC,aAAc,CACrBD,KAAKE,kBAAkBF,KAAKC,a,EAIxB,iBAAAC,CAAkBD,GACxBD,KAAKG,KAAO,IAAIC,KAAKC,MAAMJ,G,CAI7B,oBAAAK,CAAqBC,GACnBP,KAAKE,kBAAkBK,E,CAGzB,MAAAC,GACE,MAAMC,EAAWT,KAAKG,KAAOH,KAAKG,KAAKO,OAAS,GAAI,EAEpD,OACEC,EAAA,MAAAC,IAAA,4CACGZ,KAAKG,MACJH,KAAKG,KAAKU,KAAI,CAACC,EAAMC,IACnBJ,EAAA,mBACEK,WAAYF,EAAKE,WACjBC,KAAMH,EAAKG,KACXC,KAAMJ,EAAKI,KACXC,WAAYL,EAAKK,WACjBC,KAAMN,EAAKM,KACXC,WAAYZ,GAAYM,M","ignoreList":[]}

package/dist/components/z-otp.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZOtp extends Components.ZOtp, HTMLElement {}
-export const ZOtp: {
-    prototype: ZOtp;
-    new (): ZOtp;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-otp.js

@@ -1,2 +0,0 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,transformTag as n}from"@stencil/core/internal/client";import{f as o}from"./index2.js";import{d as r}from"./index3.js";import{d as a}from"./index8.js";const c=()=>`input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-default-error);background-color:var(--color-inverse-error);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}`;const f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.otpChange=i(this,"otpChange",7);this.inputNum=6}emitInputChange(t){this.otpChange.emit({value:t})}componentWillLoad(){this.otp=[...Array(this.inputNum)];this.otpRef=[...Array(this.inputNum)]}render(){return s("div",{key:"82943f654f3601a203981bc476a5e58378604331",class:"otp-container"},s("div",{key:"0e069bb23f23ff9e97bb094b3ccce57d5adeb1b1",class:"digits-container"},this.otp.map(((t,e)=>s("input",{class:this.status==o.ERROR?"error":null,onKeyDown:t=>{if(t.keyCode>47){this.otpRef[e].value=""}},onKeyUp:t=>{if(t.keyCode>47){if(e<this.inputNum-1){this.otpRef[e+1].focus()}}},onInput:t=>{this.otp[e]=t.target.value;this.emitInputChange(this.otp.join(""))},type:"text",minlength:"1",maxlength:"1",autoComplete:"off",ref:t=>this.otpRef[e]=t})))),s("z-input-message",{key:"752f2b63c997e9b6ff2e239537e15b1a1a2719c7",message:this.message,status:this.status}))}static get style(){return c()}},[1,"z-otp",{inputNum:[2,"input-num"],status:[1],message:[1]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-otp","z-icon","z-input-message"];t.forEach((t=>{switch(t){case"z-otp":if(!customElements.get(n(t))){customElements.define(n(t),f)}break;case"z-icon":if(!customElements.get(n(t))){r()}break;case"z-input-message":if(!customElements.get(n(t))){a()}break}}))}const p=f;const u=l;export{p as ZOtp,u as defineCustomElement};
-//# sourceMappingURL=z-otp.js.map

package/dist/components/z-otp.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZOtp","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","inputNum","emitInputChange","value","otpChange","emit","componentWillLoad","otp","Array","otpRef","render","h","key","class","map","_val","i","status","InputStatus","ERROR","onKeyDown","e","keyCode","onKeyUp","focus","onInput","target","join","type","minlength","maxlength","autoComplete","ref","el","message"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":["input:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-default-error);\n  background-color: var(--color-inverse-error);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp implements ComponentInterface {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  if (i < this.inputNum - 1) {\n                    this.otpRef[i + 1].focus();\n                  }\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"mappings":"8NAAA,MAAMA,EAAY,IAAM,uyB,MCQXC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,uGAQEC,KAAAC,SAAoB,CAiErB,CA/CS,eAAAC,CAAgBC,GACtBH,KAAKI,UAAUC,KAAK,CAACF,S,CAGvB,iBAAAG,GACEN,KAAKO,IAAM,IAAIC,MAAMR,KAAKC,WAC1BD,KAAKS,OAAS,IAAID,MAAMR,KAAKC,U,CAG/B,MAAAS,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACRb,KAAKO,IAAIO,KAAI,CAACC,EAAMC,IACnBL,EAAA,SACEE,MAAOb,KAAKiB,QAAUC,EAAYC,MAAQ,QAAU,KACpDC,UAAYC,IACV,GAAIA,EAAEC,QAAU,GAAI,CAClBtB,KAAKS,OAAOO,GAAGb,MAAQ,E,GAG3BoB,QAAUF,IACR,GAAIA,EAAEC,QAAU,GAAI,CAClB,GAAIN,EAAIhB,KAAKC,SAAW,EAAG,CACzBD,KAAKS,OAAOO,EAAI,GAAGQ,O,IAIzBC,QAAUJ,IACRrB,KAAKO,IAAIS,GAAMK,EAAEK,OAA4BvB,MAC7CH,KAAKE,gBAAgBF,KAAKO,IAAIoB,KAAK,IAAI,EAEzCC,KAAK,OACLC,UAAU,IACVC,UAAU,IACVC,aAAa,MACbC,IAAMC,GAAQjC,KAAKS,OAAOO,GAAKiB,OAIrCtB,EAAA,mBAAAC,IAAA,2CACEsB,QAASlC,KAAKkC,QACdjB,OAAQjB,KAAKiB,S","ignoreList":[]}

package/dist/components/z-panel-elem.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZPanelElem extends Components.ZPanelElem, HTMLElement {}
-export const ZPanelElem: {
-    prototype: ZPanelElem;
-    new (): ZPanelElem;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-panel-elem.js

@@ -1,2 +0,0 @@
-import{proxyCustomElement as e,HTMLElement as a,h as n,transformTag as i}from"@stencil/core/internal/client";import{d as t}from"./index3.js";const l=()=>`.sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}`;const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.target="_blank";this.isdisabled=false}render(){const e=this.elemid?this.elemid:"";return n("div",{key:"3d07681afc0fea36faebcb7feb5a8130db27672e",class:"panel-elem-container"},(this.imgurl||this.imgalt)&&n("div",{key:"0ceb3c7b1a4a0b201dee2ae89ac094e4adfdff52","aria-hidden":"true",class:"panel-elem-icon"},n("img",{key:"5fbfffb0c4ab329e207ec4c9eccc87fa7ec85b4a",src:this.imgurl,alt:this.imgalt})),n("div",{key:"fc374daf3f398ce285209f2c4a11ecd78e2e1af6",class:"panel-elem-link"},n("a",{key:"1aabbd26a88c3d6b9ae9da80330f882a1bedadf2",class:{"z-link":true,"z-link-disabled":this.isdisabled,"z-link-icon":true,"z-link-blue":true},id:e+"link_id",href:this.url,target:this.target},n("z-icon",{key:"2adfbfee7ceeb9f9ca87f5c3684424142dea1752",height:14,width:14,name:this.linkicon}),this.linklabel)),this.descrSlotName&&n("div",{key:"0dffd18adfba92a541a00e80857b7eef8219f8bf",class:"panel-elem-desc"},n("slot",{key:"d135bf6110db25151199d167c659e5bcab7acecd",name:this.descrSlotName})))}static get style(){return l()}},[262,"z-panel-elem",{elemid:[1],imgurl:[1],imgalt:[1],linkicon:[1],linklabel:[1],url:[1],target:[1],isdisabled:[4],descrSlotName:[1,"descr-slot-name"]}]);function s(){if(typeof customElements==="undefined"){return}const e=["z-panel-elem","z-icon"];e.forEach((e=>{switch(e){case"z-panel-elem":if(!customElements.get(i(e))){customElements.define(i(e),c)}break;case"z-icon":if(!customElements.get(i(e))){t()}break}}))}const r=c;const d=s;export{r as ZPanelElem,d as defineCustomElement};
-//# sourceMappingURL=z-panel-elem.js.map

package/dist/components/z-panel-elem.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZPanelElem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","target","isdisabled","render","elemId","elemid","h","key","class","imgurl","imgalt","src","alt","id","href","url","height","width","name","linkicon","linklabel","descrSlotName"],"sources":["src/components/z-panel-elem/styles.css?tag=z-panel-elem&encapsulation=scoped","src/components/z-panel-elem/index.tsx"],"sourcesContent":[":host {\n  width: inherit;\n  font-family: var(--font-family sans);\n  font-weight: var(--font-rg);\n}\n\n.panel-elem-container {\n  width: 100%;\n}\n\n.panel-elem-icon {\n  margin: auto calc(var(--space-unit) * 3);\n}\n\n.panel-elem-icon img {\n  display: block;\n  max-width: 96px;\n  height: 32px;\n  margin: auto;\n  object-fit: contain;\n}\n\n.panel-elem-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--space-unit) auto 0;\n  border-radius: var(--border-no-radius);\n  font-size: 12px;\n}\n\n.panel-elem-link > a.z-link {\n  padding: calc(var(--space-unit) * 0.5) 0;\n  font-weight: var(--font-sb);\n}\n\n.panel-elem-desc {\n  padding-top: var(--space-unit);\n  margin: 0;\n  letter-spacing: 0.16px;\n  text-align: center;\n}\n\na > z-icon {\n  margin-right: var(--space-unit);\n}\n","import {Component, ComponentInterface, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot `descrSlotName` - description content\n */\n@Component({\n  tag: \"z-panel-elem\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZPanelElem implements ComponentInterface {\n  /** html element id (optional) */\n  @Prop()\n  elemid?: string;\n\n  /** image url source (optional) */\n  @Prop()\n  imgurl?: string;\n\n  /** alternative image text (optional) */\n  @Prop()\n  imgalt?: string;\n\n  /** icon link name (optional) */\n  @Prop()\n  linkicon?: string;\n\n  /** link label text*/\n  @Prop()\n  linklabel: string;\n\n  /** link url */\n  @Prop()\n  url: string;\n\n  /** link target (optional) */\n  @Prop()\n  target?: string = \"_blank\";\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** name of slot container (optional) */\n  @Prop()\n  descrSlotName?: string;\n\n  render(): HTMLDivElement {\n    const elemId = this.elemid ? this.elemid : \"\";\n\n    return (\n      <div class=\"panel-elem-container\">\n        {(this.imgurl || this.imgalt) && (\n          <div\n            aria-hidden=\"true\"\n            class=\"panel-elem-icon\"\n          >\n            <img\n              src={this.imgurl}\n              alt={this.imgalt}\n            />\n          </div>\n        )}\n        <div class=\"panel-elem-link\">\n          <a\n            class={{\n              \"z-link\": true,\n              \"z-link-disabled\": this.isdisabled,\n              \"z-link-icon\": true,\n              \"z-link-blue\": true,\n            }}\n            id={elemId + \"link_id\"}\n            href={this.url}\n            target={this.target}\n          >\n            <z-icon\n              height={14}\n              width={14}\n              name={this.linkicon}\n            ></z-icon>\n            {this.linklabel}\n          </a>\n        </div>\n        {this.descrSlotName && (\n          <div class=\"panel-elem-desc\">\n            <slot name={this.descrSlotName} />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"6IAAA,MAAMA,EAAY,IAAM,4zB,MCWXC,EAAUC,EAAA,MAAAD,UAAAE,EANvB,WAAAC,CAAAC,G,4CAiCEC,KAAAC,OAAkB,SAIlBD,KAAAE,WAAuB,KAkDxB,CA5CC,MAAAC,GACE,MAAMC,EAASJ,KAAKK,OAASL,KAAKK,OAAS,GAE3C,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yBACPR,KAAKS,QAAUT,KAAKU,SACpBJ,EAAA,OAAAC,IAAA,yDACc,OACZC,MAAM,mBAENF,EAAA,OAAAC,IAAA,2CACEI,IAAKX,KAAKS,OACVG,IAAKZ,KAAKU,UAIhBJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,KAAAC,IAAA,2CACEC,MAAO,CACL,SAAU,KACV,kBAAmBR,KAAKE,WACxB,cAAe,KACf,cAAe,MAEjBW,GAAIT,EAAS,UACbU,KAAMd,KAAKe,IACXd,OAAQD,KAAKC,QAEbK,EAAA,UAAAC,IAAA,2CACES,OAAQ,GACRC,MAAO,GACPC,KAAMlB,KAAKmB,WAEZnB,KAAKoB,YAGTpB,KAAKqB,eACJf,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,QAAAC,IAAA,2CAAMW,KAAMlB,KAAKqB,iB","ignoreList":[]}

package/dist/components/z-section-title.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZSectionTitle extends Components.ZSectionTitle, HTMLElement {}
-export const ZSectionTitle: {
-    prototype: ZSectionTitle;
-    new (): ZSectionTitle;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-section-title.js

@@ -1,2 +0,0 @@
-import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as o}from"@stencil/core/internal/client";import{z as r,D as n}from"./index2.js";import{d as a}from"./index6.js";const d=()=>`: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=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dividerPosition=r.BEFORE;this.uppercase=true}componentWillRender(){this.hasSecondaryTitle=!!this.host.querySelector("[slot=secondary-title]")}render(){return i(s,{key:"020c1a41ff7fa0881464463322b54754e7664957"},i("slot",{key:"c6d7baf944465d1092749cf288636fcd502e659c",name:"secondary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===r.BEFORE&&i("z-divider",{key:"ea70a8579ed61ba8b1d6488566473b90c47540d1",size:n.LARGE,color:"z-section-title--divider-color"}),i("slot",{key:"4cf602491394aaf97cead51bbc7f9b2da299bef3",name:"primary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===r.AFTER&&i("z-divider",{key:"47275d6411b00769db2e244bad13032d43cc9144",size:n.LARGE,color:"z-section-title--divider-color"}))}get host(){return this}static get style(){return d()}},[257,"z-section-title",{dividerPosition:[1,"divider-position"],uppercase:[516]}]);function c(){if(typeof customElements==="undefined"){return}const t=["z-section-title","z-divider"];t.forEach((t=>{switch(t){case"z-section-title":if(!customElements.get(o(t))){customElements.define(o(t),l)}break;case"z-divider":if(!customElements.get(o(t))){a()}break}}))}const f=l;const m=c;export{f as ZSectionTitle,m as defineCustomElement};
-//# sourceMappingURL=z-section-title.js.map

package/dist/components/z-section-title.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZSectionTitle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","dividerPosition","ZSectionTitleDividerPosition","BEFORE","uppercase","componentWillRender","hasSecondaryTitle","host","querySelector","render","h","Host","key","name","size","DividerSize","LARGE","color","AFTER"],"sources":["src/components/deprecated/z-section-title/styles.css?tag=z-section-title&encapsulation=shadow","src/components/deprecated/z-section-title/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-section-title--divider-color: Color of the divider. Use a CSS prop string like `\"--red500\"`. Default is `\"--red500\"`.\n   */\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, ComponentInterface, 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 */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle implements ComponentInterface {\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":"8LAAA,MAAMA,EAAY,IAAM,ozB,MCgBXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,kEAWEC,KAAAC,gBAAgDC,EAA6BC,OAM7EH,KAAAI,UAAY,IA8Bb,CAxBC,mBAAAC,GACEL,KAAKM,oBAAsBN,KAAKO,KAAKC,cAAc,yB,CAGrD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,qBACTb,KAAKM,mBAAqBN,KAAKC,kBAAoBC,EAA6BC,QAChFO,EAAA,aAAAE,IAAA,2CACEE,KAAMC,EAAYC,MAClBC,MAAM,mCAGVP,EAAA,QAAAE,IAAA,2CAAMC,KAAK,mBACTb,KAAKM,mBAAqBN,KAAKC,kBAAoBC,EAA6BgB,OAChFR,EAAA,aAAAE,IAAA,2CACEE,KAAMC,EAAYC,MAClBC,MAAM,mC","ignoreList":[]}

package/dist/components/z-slideshow.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZSlideshow extends Components.ZSlideshow, HTMLElement {}
-export const ZSlideshow: {
-    prototype: ZSlideshow;
-    new (): ZSlideshow;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-slideshow.js

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

package/dist/components/z-slideshow.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","isStringArray","data","Array","isArray","every","datum","ZSlideshow","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","currentSlide","watchData","parseLinks","componentWillLoad","setDevice","window","addEventListener","handleResize","bind","componentDidRender","setStyle","parsed","_a","convertJson","Error","links","refSlides","el","shadowRoot","querySelector","allImages","querySelectorAll","width","offsetWidth","fullwidth","length","style","transform","forEach","item","img","device","getDevice","setCurrentSlide","index","getBulletDimension","Device","MOBILE","TABLET","renderSlides","items","h","id","map","i","class","src","renderScroll","direction","disabled","nextSlide","height","name","onClick","onKeyUp","e","handleKeyboardSubmit","tabindex","role","renderSlideshowMain","renderBullet","renderSlideshowFooter","Object","keys","parseInt","render","slideshowid"],"sources":["src/snowflakes/myz/z-slideshow/styles.css?tag=z-slideshow&encapsulation=shadow","src/snowflakes/myz/z-slideshow/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: inherit;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: flex;\n  width: inherit;\n  flex-direction: column;\n}\n\nmain {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n}\n\nmain z-icon.scroll {\n  position: absolute;\n  z-index: 10;\n  top: 50%;\n  width: auto;\n  margin: 0 var(--space-unit);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  transition: 0.6s ease;\n}\n\nmain .scroll.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\nmain .scroll.right {\n  right: 0;\n}\n\n#slides {\n  display: flex;\n  flex-wrap: wrap;\n  line-height: 0px;\n  overflow-y: hidden;\n  transition: all 300ms;\n}\n\nfooter {\n  display: grid;\n  width: 100%;\n  height: 56px;\n  align-items: center;\n  border-top: var(--border-size-medium) solid var(--color-background);\n  grid-template: 2 / 2;\n  grid-template-areas: \"center center\" \"left right\";\n}\n\nfooter > div {\n  width: 100%;\n  align-items: center;\n}\n\nfooter .footer-center {\n  grid-area: center;\n}\n\nfooter .footer-left {\n  grid-area: left;\n}\n\nfooter .footer-right {\n  grid-area: right;\n}\n\nfooter .bullet-container {\n  display: flex;\n  min-height: 60px;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto;\n}\n\nfooter .bullet-container .bullet {\n  width: 8px;\n  height: 8px;\n  margin: var(--space-unit) 2px;\n  background-color: var(--gray200);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\nfooter .bullet-container .bullet.selected {\n  background-color: var(--gray400);\n}\n\nmain z-icon:focus,\nfooter .bullet-container .bullet:focus {\n  border-radius: 50%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n/* Tablet breakpoint */\n\n@media only screen and (min-width: 768px) {\n  footer {\n    height: 76px;\n    border-top: var(--border-size-medium) solid var(--color-background);\n    grid-template: 1 / 1fr 2fr 1fr;\n    grid-template-areas: \"left center right\";\n  }\n\n  footer .bullet-container .bullet {\n    width: 10px;\n    height: 10px;\n    margin: var(--space-unit) 3px;\n  }\n}\n\n/* Desktop breakpoint */\n\n@media only screen and (min-width: 1025px) {\n  main z-icon.scroll {\n    margin: 0 10px;\n  }\n\n  footer .bullet-container .bullet {\n    width: 16px;\n    height: 16px;\n    margin: var(--space-unit) calc(var(--space-unit) * 0.5);\n    cursor: pointer;\n    pointer-events: auto;\n  }\n}\n","import {Component, ComponentInterface, Element, Prop, State, Watch, h} from \"@stencil/core\";\nimport {Device} from \"../../../beans\";\nimport {convertJson, getDevice, handleKeyboardSubmit} from \"../../../utils/utils\";\n\n/**\n * Check if data is an array of strings.\n * @param {unknown} data Data to check\n * @returns {boolean}\n */\nfunction isStringArray(data: unknown): data is string[] {\n  return Array.isArray(data) && data.every((datum: unknown): datum is string => typeof datum === \"string\");\n}\n\n/**\n * @slot footer-right - right content slot in footer\n * @slot footer-left - left content slot in footer\n */\n@Component({\n  tag: \"z-slideshow\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSlideshow implements ComponentInterface {\n  @Element() el: HTMLZSlideshowElement;\n\n  /** slideshow id */\n  @Prop()\n  slideshowid: string;\n\n  /** array or JSON stringified images urls */\n  @Prop()\n  data: string[] | string;\n\n  @State()\n  device: Device;\n\n  @State()\n  currentSlide = 0;\n\n  private links: string[];\n\n  @Watch(\"data\")\n  watchData(): void {\n    this.parseLinks();\n  }\n\n  componentWillLoad(): void {\n    this.parseLinks();\n\n    this.setDevice();\n    window.addEventListener(\"resize\", this.handleResize.bind(this));\n  }\n\n  componentDidRender(): void {\n    this.setStyle();\n  }\n\n  private handleResize(): void {\n    this.setDevice();\n    this.setStyle();\n  }\n\n  private parseLinks(): void {\n    switch (typeof this.data) {\n      case \"string\": {\n        const parsed = convertJson(this.data) ?? [];\n        if (!isStringArray(parsed)) {\n          throw new Error(\"Passed data is invalid\");\n        }\n\n        this.links = parsed;\n        break;\n      }\n      default:\n        this.links = this.data;\n        break;\n    }\n  }\n\n  private setStyle(): void {\n    const refSlides = this.el.shadowRoot.querySelector(\"#slides\") as HTMLElement;\n    if (!refSlides) {\n      return;\n    }\n\n    const allImages = this.el.shadowRoot.querySelectorAll(\".slide\");\n    const width = this.el.offsetWidth;\n    const fullwidth = width * this.links.length;\n\n    refSlides.style.width = `${fullwidth}px`;\n    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;\n    allImages.forEach((item: HTMLElement) => {\n      const img = item.querySelector(\"img\");\n      img.style.width = `${width}px`;\n    });\n  }\n\n  private setDevice(): void {\n    this.device = getDevice();\n  }\n\n  private setCurrentSlide(index: number): void {\n    this.currentSlide = index;\n  }\n\n  private getBulletDimension(): number {\n    switch (this.device) {\n      case Device.MOBILE:\n        return 24;\n      case Device.TABLET:\n        return 32;\n      default:\n        return 40;\n    }\n  }\n\n  private renderSlides(items: string[]): HTMLElement {\n    return (\n      <div id=\"slides\">\n        {items.map((item: string, i: number) => (\n          <div\n            id={\"slide\" + i}\n            class={`slide ${this.currentSlide !== i && \"hide\"}`}\n          >\n            <img src={item} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  private renderScroll(direction: \"left\" | \"right\"): HTMLZIconElement {\n    let disabled = false,\n      nextSlide = this.currentSlide;\n\n    if (direction === \"left\") {\n      disabled = this.currentSlide === 0;\n      nextSlide--;\n    } else if (direction === \"right\") {\n      disabled = this.currentSlide === this.links.length - 1;\n      nextSlide++;\n    }\n\n    return (\n      <z-icon\n        class={`scroll ${direction} ${disabled && \"disabled\"}`}\n        width={this.getBulletDimension()}\n        height={this.getBulletDimension()}\n        name={`chevron-${direction}-circle`}\n        onClick={() => {\n          if (!disabled) {\n            this.setCurrentSlide(nextSlide);\n          }\n        }}\n        onKeyUp={(e: KeyboardEvent) =>\n          !disabled &&\n          handleKeyboardSubmit(e, () => {\n            this.setCurrentSlide(nextSlide);\n          })\n        }\n        tabindex={0}\n        role=\"button\"\n      />\n    );\n  }\n\n  private renderSlideshowMain(): HTMLElement {\n    return (\n      <main>\n        {this.renderScroll(\"left\")}\n        {this.renderSlides(this.links)}\n        {this.renderScroll(\"right\")}\n      </main>\n    );\n  }\n\n  private renderBullet(i: number): HTMLElement {\n    return (\n      <a\n        class={`bullet ${this.currentSlide === i && \"selected\"}`}\n        onClick={() => this.setCurrentSlide(i)}\n        onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i))}\n        tabindex={0}\n        role=\"button\"\n      ></a>\n    );\n  }\n\n  private renderSlideshowFooter(): HTMLElement {\n    return (\n      <footer>\n        <div class=\"footer-left\">\n          <slot name=\"footer-left\" />\n        </div>\n        <div class=\"footer-center\">\n          <div class=\"bullet-container\">{Object.keys(this.links).map((i) => this.renderBullet(parseInt(i)))}</div>\n        </div>\n        <div class=\"footer-right\">\n          <slot name=\"footer-right\" />\n        </div>\n      </footer>\n    );\n  }\n\n  render(): HTMLElement {\n    if (!this.links || !this.links.length) {\n      return <div />;\n    }\n\n    return (\n      <div id={this.slideshowid}>\n        {this.renderSlideshowMain()}\n        {this.renderSlideshowFooter()}\n      </div>\n    );\n  }\n}\n"],"mappings":"0NAAA,MAAMA,EAAY,IAAM,+0DCSxB,SAASC,EAAcC,GACrB,OAAOC,MAAMC,QAAQF,IAASA,EAAKG,OAAOC,UAA2CA,IAAU,UACjG,C,MAWaC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,kEAoBEC,KAAAC,aAAe,CAmLhB,CA9KC,SAAAC,GACEF,KAAKG,Y,CAGP,iBAAAC,GACEJ,KAAKG,aAELH,KAAKK,YACLC,OAAOC,iBAAiB,SAAUP,KAAKQ,aAAaC,KAAKT,M,CAG3D,kBAAAU,GACEV,KAAKW,U,CAGC,YAAAH,GACNR,KAAKK,YACLL,KAAKW,U,CAGC,UAAAR,G,MACN,cAAeH,KAAKV,MAClB,IAAK,SAAU,CACb,MAAMsB,GAASC,EAAAC,EAAYd,KAAKV,SAAK,MAAAuB,SAAA,EAAAA,EAAI,GACzC,IAAKxB,EAAcuB,GAAS,CAC1B,MAAM,IAAIG,MAAM,yB,CAGlBf,KAAKgB,MAAQJ,EACb,K,CAEF,QACEZ,KAAKgB,MAAQhB,KAAKV,KAClB,M,CAIE,QAAAqB,GACN,MAAMM,EAAYjB,KAAKkB,GAAGC,WAAWC,cAAc,WACnD,IAAKH,EAAW,CACd,M,CAGF,MAAMI,EAAYrB,KAAKkB,GAAGC,WAAWG,iBAAiB,UACtD,MAAMC,EAAQvB,KAAKkB,GAAGM,YACtB,MAAMC,EAAYF,EAAQvB,KAAKgB,MAAMU,OAErCT,EAAUU,MAAMJ,MAAQ,GAAGE,MAC3BR,EAAUU,MAAMC,UAAY,cAAcL,EAAQvB,KAAKC,kBACvDoB,EAAUQ,SAASC,IACjB,MAAMC,EAAMD,EAAKV,cAAc,OAC/BW,EAAIJ,MAAMJ,MAAQ,GAAGA,KAAS,G,CAI1B,SAAAlB,GACNL,KAAKgC,OAASC,G,CAGR,eAAAC,CAAgBC,GACtBnC,KAAKC,aAAekC,C,CAGd,kBAAAC,GACN,OAAQpC,KAAKgC,QACX,KAAKK,EAAOC,OACV,OAAO,GACT,KAAKD,EAAOE,OACV,OAAO,GACT,QACE,OAAO,G,CAIL,YAAAC,CAAaC,GACnB,OACEC,EAAA,OAAKC,GAAG,UACLF,EAAMG,KAAI,CAACd,EAAce,IACxBH,EAAA,OACEC,GAAI,QAAUE,EACdC,MAAO,SAAS9C,KAAKC,eAAiB4C,GAAK,UAE3CH,EAAA,OAAKK,IAAKjB,O,CAOZ,YAAAkB,CAAaC,GACnB,IAAIC,EAAW,MACbC,EAAYnD,KAAKC,aAEnB,GAAIgD,IAAc,OAAQ,CACxBC,EAAWlD,KAAKC,eAAiB,EACjCkD,G,MACK,GAAIF,IAAc,QAAS,CAChCC,EAAWlD,KAAKC,eAAiBD,KAAKgB,MAAMU,OAAS,EACrDyB,G,CAGF,OACET,EAAA,UACEI,MAAO,UAAUG,KAAaC,GAAY,aAC1C3B,MAAOvB,KAAKoC,qBACZgB,OAAQpD,KAAKoC,qBACbiB,KAAM,WAAWJ,WACjBK,QAAS,KACP,IAAKJ,EAAU,CACblD,KAAKkC,gBAAgBiB,E,GAGzBI,QAAUC,IACPN,GACDO,EAAqBD,GAAG,KACtBxD,KAAKkC,gBAAgBiB,EAAU,IAGnCO,SAAU,EACVC,KAAK,U,CAKH,mBAAAC,GACN,OACElB,EAAA,YACG1C,KAAKgD,aAAa,QAClBhD,KAAKwC,aAAaxC,KAAKgB,OACvBhB,KAAKgD,aAAa,S,CAKjB,YAAAa,CAAahB,GACnB,OACEH,EAAA,KACEI,MAAO,UAAU9C,KAAKC,eAAiB4C,GAAK,aAC5CS,QAAS,IAAMtD,KAAKkC,gBAAgBW,GACpCU,QAAUC,GAAqBC,EAAqBD,GAAG,IAAMxD,KAAKkC,gBAAgBW,KAClFa,SAAU,EACVC,KAAK,U,CAKH,qBAAAG,GACN,OACEpB,EAAA,cACEA,EAAA,OAAKI,MAAM,eACTJ,EAAA,QAAMW,KAAK,iBAEbX,EAAA,OAAKI,MAAM,iBACTJ,EAAA,OAAKI,MAAM,oBAAoBiB,OAAOC,KAAKhE,KAAKgB,OAAO4B,KAAKC,GAAM7C,KAAK6D,aAAaI,SAASpB,QAE/FH,EAAA,OAAKI,MAAM,gBACTJ,EAAA,QAAMW,KAAK,kB,CAMnB,MAAAa,GACE,IAAKlE,KAAKgB,QAAUhB,KAAKgB,MAAMU,OAAQ,CACrC,OAAOgB,EAAA,W,CAGT,OACEA,EAAA,OAAKC,GAAI3C,KAAKmE,aACXnE,KAAK4D,sBACL5D,KAAK8D,wB","ignoreList":[]}

package/dist/components/z-toggle-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZToggleButton extends Components.ZToggleButton, HTMLElement {}
-export const ZToggleButton: {
-    prototype: ZToggleButton;
-    new (): ZToggleButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-toggle-button.js

@@ -1,2 +0,0 @@
-import{proxyCustomElement as o,HTMLElement as r,createEvent as t,h as e,transformTag as i}from"@stencil/core/internal/client";import{d as a}from"./index3.js";const s=()=>`button{display:flex;height:36px;align-items:center;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase}button::-moz-focus-inner{border:0}button:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{box-shadow:var(--shadow-focus-primary)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button:disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}`;const n=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.__attachShadow();this.toggleClick=t(this,"toggleClick",7);this.isdisabled=false;this.opened=false;this.ariaLabel=""}emitToggleClick(){if(this.isdisabled){return}this.opened=!this.opened;this.toggleClick.emit(this.opened)}render(){return e("button",{key:"3882d62d3d17b5eba2cafdc83096f5185a61a985",tabindex:this.avoidclick?"-1":"0",class:{isopen:this.opened,"avoid-clicks":this.avoidclick},disabled:this.isdisabled,"aria-expanded":this.opened?"true":"false","aria-label":this.ariaLabel,onClick:()=>this.emitToggleClick()},e("z-icon",{key:"820fc24fd3394845e52156525b0881d2aa4c2c62",name:this.opened?"chevron-down":"chevron-up",width:16,height:16}),this.label)}static get style(){return s()}},[1,"z-toggle-button",{label:[1],isdisabled:[4],avoidclick:[4],opened:[1028],ariaLabel:[1,"aria-label"]}]);function l(){if(typeof customElements==="undefined"){return}const o=["z-toggle-button","z-icon"];o.forEach((o=>{switch(o){case"z-toggle-button":if(!customElements.get(i(o))){customElements.define(i(o),n)}break;case"z-icon":if(!customElements.get(i(o))){a()}break}}))}const c=n;const d=l;export{c as ZToggleButton,d as defineCustomElement};
-//# sourceMappingURL=z-toggle-button.js.map

package/dist/components/z-toggle-button.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZToggleButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","isdisabled","opened","ariaLabel","emitToggleClick","toggleClick","emit","render","h","key","tabindex","avoidclick","class","isopen","disabled","onClick","name","width","height","label"],"sources":["src/components/deprecated/z-toggle-button/styles.css?tag=z-toggle-button&encapsulation=shadow","src/components/deprecated/z-toggle-button/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  height: 36px;\n  align-items: center;\n  padding-right: calc(var(--space-unit) * 2);\n  padding-left: 0;\n  border: var(--border-size-medium) solid;\n  border-color: transparent;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n  text-transform: uppercase;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton:disabled {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n\nz-icon {\n  display: inline-block;\n  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);\n  transform: rotate(360deg);\n  transition: all 200ms linear;\n}\n\nbutton.isopen {\n  top: -20px;\n}\n\nbutton.avoid-clicks {\n  pointer-events: none;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton implements ComponentInterface {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"],"mappings":"8JAAA,MAAMA,EAAY,IAAM,kiC,MCOXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,2GAYEC,KAAAC,WAAuB,MAQvBD,KAAAE,OAAmB,MAInBF,KAAAG,UAAY,EAqCb,CA/BS,eAAAC,GACN,GAAIJ,KAAKC,WAAY,CACnB,M,CAGFD,KAAKE,QAAUF,KAAKE,OACpBF,KAAKK,YAAYC,KAAKN,KAAKE,O,CAG7B,MAAAK,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,SAAUV,KAAKW,WAAa,KAAO,IACnCC,MAAO,CACLC,OAAUb,KAAKE,OACf,eAAgBF,KAAKW,YAEvBG,SAAUd,KAAKC,WAAU,gBACVD,KAAKE,OAAS,OAAS,QAAO,aACjCF,KAAKG,UACjBY,QAAS,IAAMf,KAAKI,mBAEpBI,EAAA,UAAAC,IAAA,2CACEO,KAAMhB,KAAKE,OAAS,eAAiB,aACrCe,MAAO,GACPC,OAAQ,KAETlB,KAAKmB,M","ignoreList":[]}

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

@@ -1,18 +0,0 @@
-import { r as registerInstance, h } from './index-BcDWN4F1.js';
-
-const stylesCss = () => `:host{display:block;box-sizing:border-box;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);line-height:calc(var(--space-unit) * 2)}:host>div{padding:calc(var(--space-unit) * 2)}:host>.success{background:var(--color-inverse-success);fill:var(--color-default-success)}:host>.warning{background:var(--color-inverse-warning);fill:var(--color-default-warning)}:host>.error{background:var(--color-inverse-error);fill:var(--color-default-error)}`;
-
-const ZAlert = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h("div", { key: '9c6f254da9597c0142815fa229e084ad2e1faf5f', class: this.type }, h("slot", { key: '80b6c9d8d20fa9a6ed7fca52d724871803cdf47a' })));
-    }
-};
-ZAlert.style = stylesCss();
-
-export { ZAlert as z_alert };
-//# sourceMappingURL=z-alert.entry.js.map
-
-//# sourceMappingURL=z-alert.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"z-alert.entry.js","sources":["src/snowflakes/myz/z-alert/styles.css?tag=z-alert&encapsulation=shadow","src/snowflakes/myz/z-alert/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  line-height: calc(var(--space-unit) * 2);\n}\n\n:host > div {\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host > .success {\n  background: var(--color-inverse-success);\n  fill: var(--color-default-success);\n}\n\n:host > .warning {\n  background: var(--color-inverse-warning);\n  fill: var(--color-default-warning);\n}\n\n:host > .error {\n  background: var(--color-inverse-error);\n  fill: var(--color-default-error);\n}\n","import {Component, ComponentInterface, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../beans/index\";\n\n/**\n * @slot - alert content\n */\n\n@Component({\n  tag: \"z-alert\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAlert implements ComponentInterface {\n  /** alert variant type */\n  @Prop()\n  type: AlertType;\n\n  render(): HTMLDivElement {\n    return (\n      <div class={this.type}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,gfAAgf,CAAC;;MCY7f,MAAM,GAAA,MAAA;;;;IAKjB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,IAAI,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ;;;;;;;"}

package/dist/esm/z-app-header-deprecated.entry.js

@@ -1,190 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-BcDWN4F1.js';
-import { e as ControlSize, B as ButtonVariant, u as TransitionDirection, v as OffCanvasVariant } from './index-DdetsoIY.js';
-
-const stylesCss = () => `:host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-default-text);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-default-text);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:flex-start;column-gap:calc(var(--space-unit) * 2)}::slotted([slot="title"]),.heading-stuck .heading-title>*,::slotted([slot="stucked-title"]){margin:0;font-family:"IBM Plex Serif", serif;font-weight:var(--font-bd)}::slotted([slot="title"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot="stucked-title"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length="0"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot="top-subtitle"]),::slotted([slot="subtitle"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;line-height:26px}::slotted([slot="subtitle"]){font-weight:500}::slotted([slot="top-subtitle"]){font-weight:400}.menu-container{display:flex;width:100%;flex:1 auto;flex-flow:row wrap}:host([menu-length="0"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);flex:1 auto;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title{overflow:hidden}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot="stucked-title"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:none}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:"";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{flex-flow:row wrap;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow="offcanvas"],[menu-length="0"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow="offcanvas"])) .heading-subtitle{padding-left:0}.menu-container{flex:initial;align-items:center}:host([menu-length="0"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow="offcanvas"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow="offcanvas"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow="stack"]) .heading-panel{flex-flow:column;align-items:flex-start}:host([flow="stack"]) .menu-container{width:100%}:host(:not([flow="offcanvas"],[menu-length="0"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;
-
-const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
-const ZAppHeaderDeprecated = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sticking = createEvent(this, "sticking", 7);
-        /**
-         * Stuck mode for the header.
-         * You can programmatically set it using an IntersectionObserver.
-         */
-        this.stuck = false;
-        /**
-         * Should place an overlay over the hero image.
-         * Useful for legibility purpose.
-         */
-        this.overlay = false;
-        /**
-         * Control menu bar position in the header.
-         * - auto: the menu bar is positioned near the title
-         * - stack: the menu bar is positioned below the title
-         * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
-         */
-        this.flow = "auto";
-        /**
-         * The opening state of the drawer.
-         */
-        this.drawerOpen = false;
-        /**
-         * Enable the search bar.
-         */
-        this.enableSearch = false;
-        /**
-         * Placeholder text for the search bar.
-         */
-        this.searchPlaceholder = "Cerca";
-        /**
-         * Search string for the search bar.
-         */
-        this.searchString = "";
-        /**
-         * The stuck state of the bar.
-         */
-        this._stuck = false;
-        /**
-         * Current viewport.
-         * Used to change the aspect of the search button (icon only) on mobile and tablet.
-         */
-        this.currentViewport = "mobile";
-        this.observer = SUPPORT_INTERSECTION_OBSERVER &&
-            new IntersectionObserver(([entry]) => {
-                this._stuck = !entry.isIntersecting;
-            }, {
-                threshold: 0.5,
-            });
-        this.openDrawer = this.openDrawer.bind(this);
-        this.closeDrawer = this.closeDrawer.bind(this);
-        this.collectMenuElements = this.collectMenuElements.bind(this);
-    }
-    evaluateViewport() {
-        if (window.innerWidth < 768) {
-            this.currentViewport = "mobile";
-        }
-        else if (window.innerWidth >= 768 && window.innerWidth < 1152) {
-            this.currentViewport = "tablet";
-        }
-        else {
-            this.currentViewport = "desktop";
-        }
-    }
-    onStuck() {
-        const scrollParent = this.scrollParent;
-        if (!scrollParent) {
-            return;
-        }
-        this.sticking.emit(this._stuck);
-    }
-    setMenuFloatingMode() {
-        if (this.menuElements.length === 0) {
-            return;
-        }
-        const elements = this.menuElements;
-        elements.forEach((element) => {
-            element.open = false;
-            element.floating = !this.drawerOpen;
-            element.verticalContext = this.drawerOpen;
-        });
-    }
-    get title() {
-        const titleElement = this.hostElement.querySelector('[slot="title"]');
-        if (titleElement === null) {
-            return "";
-        }
-        return titleElement.textContent.trim();
-    }
-    get scrollParent() {
-        const parent = this.hostElement.offsetParent;
-        if (parent === document.body || parent === document.documentElement) {
-            return window;
-        }
-        return parent;
-    }
-    get canShowMenu() {
-        return this.flow !== "offcanvas" && this.currentViewport !== "mobile" && !this.drawerOpen;
-    }
-    get canShowSearchbar() {
-        if (!this.enableSearch) {
-            return false;
-        }
-        // Always show the searchbar on desktop, even if a searchPageUrl is set
-        if (this.searchPageUrl) {
-            return this.currentViewport === "desktop";
-        }
-        return true;
-    }
-    /**
-     * Whether the header has a hero image, either as a prop or as a slot.
-     */
-    get hasHero() {
-        return !!this.hero || this.hostElement.querySelector("[slot=hero]") !== null;
-    }
-    openDrawer() {
-        this.drawerOpen = true;
-    }
-    closeDrawer() {
-        this.drawerOpen = false;
-    }
-    collectMenuElements() {
-        const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
-        this.menuLength = menuElements.length;
-        this.setMenuFloatingMode();
-    }
-    enableStuckObserver() {
-        if (this.observer) {
-            this.observer.observe(this.container);
-        }
-    }
-    disableStuckMode() {
-        this._stuck = false;
-        if (this.observer) {
-            this.observer.unobserve(this.container);
-        }
-    }
-    onStuckMode() {
-        if (this.stuck) {
-            this.enableStuckObserver();
-        }
-        else {
-            this.disableStuckMode();
-        }
-    }
-    renderSearchLinkButton() {
-        if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === "desktop") {
-            return null;
-        }
-        return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
-    }
-    renderSeachbar(searchButtonIconOnly) {
-        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: searchButtonIconOnly, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
-    }
-    componentDidLoad() {
-        this.collectMenuElements();
-        this.onStuckMode();
-        this.evaluateViewport();
-    }
-    render() {
-        return (h(Host, { key: 'aded309a3cb1033c51f95d94de1cd796f643fea0', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: '78458badadf63a3366eaba9481ed709f7cb455c5', class: "hero-container" }, h("slot", { key: '1296c2091f4dd8b2f5215f07ea096772fc700abb', name: "hero" }, this.hero && (h("img", { key: 'ed06c899fb3e2b7316161555b307033a6821f64a', alt: "", src: this.hero }))))), h("div", { key: 'd8e275bde97fe5d694a50c33b5b32db7aee7699e', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: 'ce6fe29fd508558b3d75dba200006dfa31ba5ad9', class: "heading-container" }, h("div", { key: '5464ae272a15fcd6a975b62f5d2d6206d6f3f060', class: "heading-subtitle" }, h("slot", { key: '53c143c49c40cd3cef1475af920122ca5abd5329', name: "top-subtitle" })), h("div", { key: '0c4c147537d3ece12fd35e4a5ca553aeff2a8f1c', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: '68e24b4435b6ee099f288cb4cb28794834ab1f72', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '220a3096e3275ec8e6bee6b715926f891ed09045', name: "burger-menu" }))), h("slot", { key: '52e89fe9902914e6daafe61f47de9ea4f02bf93e', name: "title" }), this.renderSearchLinkButton()), h("div", { key: 'c1f90edc6ecb0063d53f3ed68ee718fc86397751', class: "heading-subtitle" }, h("slot", { key: '84398e5cd8bf522e13b9f29118ba20d46510fbb1', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: 'e6d6d1fa5040a7c6d54869fac4c92a19407145fb', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '3c442f00807b6a4ff33349709a24b6096bce3b3c', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: '268fa9a09f449e5e277ed56134cd1a5be9e9713e', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: 'be0350100f473da07ac89c22b950c0ff5f2dc14a', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: 'ebe1a2dd92cb3d010741e8745c5359a852e46253', name: "close" })), h("div", { key: 'cb6b380cfddc334c84fae9a045d4b886ff8d3f26', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: 'e120aa846065db5a7c0d9827e7b74a98f7b41f25', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: '7d0460155469d822b7f608804dc1465f08e28b02', class: "heading-stuck" }, h("div", { key: 'b570cf1d407aad9a9c2a10af56835f3a3d5f1379', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: '06929d598cab5b080e0f3b23606ca6e4ee50a113', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '807ee08ed6a4db7ca124114007e1a2d52dca75e0', name: "burger-menu" }))), h("div", { key: 'dfbb47685f209528aa6a70f29b5cb5ca83a4a2e6', class: "heading-title" }, h("slot", { key: 'aff80bd515be456bc15b5fa91dbc85ce33fe6562', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
-    }
-    get hostElement() { return getElement(this); }
-    static get watchers() { return {
-        "_stuck": [{
-                "onStuck": 0
-            }],
-        "drawerOpen": [{
-                "setMenuFloatingMode": 0
-            }],
-        "stuck": [{
-                "onStuckMode": 0
-            }]
-    }; }
-};
-ZAppHeaderDeprecated.style = stylesCss();
-
-export { ZAppHeaderDeprecated as z_app_header_deprecated };
-//# sourceMappingURL=z-app-header-deprecated.entry.js.map
-
-//# sourceMappingURL=z-app-header-deprecated.entry.js.map