@zanichelli/albe-web-components 19.3.0-RC6 → 19.3.0

package/www/build/p-0eb833b6.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as o,d as r}from"./p-BEHxru6n.js";import{M as a,Q as i}from"./p-B3nR3-Jw.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=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:"bb147f3b614268218fba165360012031572ec76b"},this.variant===a.STACKED&&this.contentPosition===i.TOP&&this.renderContent(),t("div",{key:"94c697c41b4d98ea9f5be00634a3de1fd214ea72",class:"main-container"},t("div",{key:"e1a181735381dbc2472085c7e1d7082e1564185a",class:"cover-container"},t("slot",{key:"1692cfa7f6a9ee926a262e04e8912a72f5a95cca",name:"cover"})),t("slot",{key:"c13a059c162d85e46d3f116a8b1fd9e3a6e363f7",name:"info-reveal"}),this.variant===a.OVERLAY&&this.renderContent()),this.variant===a.STACKED&&this.contentPosition===i.BOTTOM&&this.renderContent())}get host(){return r(this)}};s.style=n();export{s as z_cover_hero};
+//# sourceMappingURL=p-0eb833b6.entry.js.map

package/www/build/p-0eb833b6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZCoverHero","constructor","hostRef","this","variant","CoverHeroVariant","OVERLAY","contentPosition","CoverHeroContentPosition","TOP","preserveAspectRatio","onImgLoad","target","Image","closest","ratio","naturalWidth","naturalHeight","host","style","setProperty","toString","renderContent","h","class","name","render","Host","key","STACKED","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  /**\n   * @prop --cover-hero-overlay: overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.\n   * @prop --cover-hero-text-color: color of the text.\n   * @prop --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  --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, ComponentInterface, Element, Host, Listen, Prop, h} from \"@stencil/core\";\nimport {CoverHeroContentPosition, CoverHeroVariant} 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 */\n@Component({\n  tag: \"z-cover-hero\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCoverHero implements ComponentInterface {\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,IAAM,6nD,MCgBXC,EAAU,MALvB,WAAAC,CAAAC,G,UAYEC,KAAAC,QAA4BC,EAAiBC,QAM7CH,KAAAI,gBAA4CC,EAAyBC,IASrEN,KAAAO,oBAAsB,IA6CvB,CArCW,SAAAC,EAAUC,OAACA,IACnB,GAAIA,aAAkBC,OAASD,EAAOE,QAAQ,gBAAiB,CAC7D,MAAMC,EAAQH,EAAOI,aAAeJ,EAAOK,cAC3Cd,KAAKe,KAAKC,MAAMC,YAAY,uBAAwBL,EAAMM,W,EAOtD,aAAAC,GACN,OACEC,EAAA,OAAKC,MAAM,qBACTD,EAAA,QAAME,KAAK,Y,CAKjB,MAAAC,GACE,OACEH,EAACI,EAAI,CAAAC,IAAA,4CACFzB,KAAKC,UAAYC,EAAiBwB,SACjC1B,KAAKI,kBAAoBC,EAAyBC,KAClDN,KAAKmB,gBACPC,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,kBACTD,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,mBACTD,EAAA,QAAAK,IAAA,2CAAMH,KAAK,WAEbF,EAAA,QAAAK,IAAA,2CAAMH,KAAK,gBACVtB,KAAKC,UAAYC,EAAiBC,SAAWH,KAAKmB,iBAEpDnB,KAAKC,UAAYC,EAAiBwB,SACjC1B,KAAKI,kBAAoBC,EAAyBsB,QAClD3B,KAAKmB,gB","ignoreList":[]}

package/www/build/p-17a9c2b3.entry.js

@@ -0,0 +1,2 @@
+import{r as L,h as i,H as o}from"./p-BEHxru6n.js";const t=()=>`:host{display:inline-block;width:255px;height:64px;vertical-align:top}img{display:block;width:100%;height:100%;margin:auto;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}a{display:block;width:100%;height:100%}a:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(.mobile){width:31px;height:40px}:host(.mobile) img{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}`;const l=class{constructor(i){L(this,i)}render(){const L={};if(this.width){L["width"]=L["max-width"]=`${this.width}px`}if(this.height){L["height"]=L["max-height"]=`${this.height}px`}return i(o,{key:"35e05af6b6f866d00ee18e9f88c56665a70ffaf1",style:L,class:{mobile:!!this.mobileLogo}},this.link?i("a",{href:this.link,target:this.targetBlank?"_blank":"_self"},i("img",{alt:this.imageAlt})):i("img",{alt:this.imageAlt}))}};l.style=t();export{l as z_logo};
+//# sourceMappingURL=p-17a9c2b3.entry.js.map

package/www/build/p-17a9c2b3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZLogo","render","style","this","width","height","h","Host","key","class","mobile","mobileLogo","link","href","target","targetBlank","alt","imageAlt"],"sources":["src/components/z-logo/styles.css?tag=z-logo&encapsulation=shadow","src/components/z-logo/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 255px;\n  height: 64px;\n  vertical-align: top;\n}\n\nimg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  margin: auto;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n\na {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\na:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(.mobile) {\n  width: 31px;\n  height: 40px;\n}\n\n:host(.mobile) img {\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-logo\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZLogo implements ComponentInterface {\n  /** image width */\n  @Prop()\n  width?: number;\n\n  /** image height */\n  @Prop()\n  height?: number;\n\n  /** alternative image text */\n  @Prop()\n  imageAlt?: string;\n\n  /** link url (optional) */\n  @Prop()\n  link?: string;\n\n  /** link target: true means _blank, false means _self */\n  @Prop()\n  targetBlank?: boolean;\n\n  /** if true, the mobile logo is displayed, otherwise the desktop one */\n  @Prop()\n  mobileLogo?: boolean;\n\n  render(): HTMLZLogoElement {\n    const style = {};\n\n    if (this.width) {\n      style[\"width\"] = style[\"max-width\"] = `${this.width}px`;\n    }\n\n    if (this.height) {\n      style[\"height\"] = style[\"max-height\"] = `${this.height}px`;\n    }\n\n    return (\n      <Host\n        style={style}\n        class={{mobile: !!this.mobileLogo}}\n      >\n        {this.link ? (\n          <a\n            href={this.link}\n            target={this.targetBlank ? \"_blank\" : \"_self\"}\n          >\n            <img alt={this.imageAlt} />\n          </a>\n        ) : (\n          <img alt={this.imageAlt} />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,IAAM,m5I,MCOXC,EAAK,M,yBAyBhB,MAAAC,GACE,MAAMC,EAAQ,GAEd,GAAIC,KAAKC,MAAO,CACdF,EAAM,SAAWA,EAAM,aAAe,GAAGC,KAAKC,S,CAGhD,GAAID,KAAKE,OAAQ,CACfH,EAAM,UAAYA,EAAM,cAAgB,GAAGC,KAAKE,U,CAGlD,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHN,MAAOA,EACPO,MAAO,CAACC,SAAUP,KAAKQ,aAEtBR,KAAKS,KACJN,EAAA,KACEO,KAAMV,KAAKS,KACXE,OAAQX,KAAKY,YAAc,SAAW,SAEtCT,EAAA,OAAKU,IAAKb,KAAKc,YAGjBX,EAAA,OAAKU,IAAKb,KAAKc,W","ignoreList":[]}

package/www/build/p-235a1c1d.entry.js

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

package/www/build/p-235a1c1d.entry.js.map

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

package/www/build/p-286690fd.entry.js

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

package/www/build/p-286690fd.entry.js.map

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

package/www/build/p-288c1f55.entry.js

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

package/www/build/p-288c1f55.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZButtonSort","constructor","hostRef","this","sortlabelasc","sortlabeldesc","isselected","sortasc","allowTooltip","emitButtonSortClick","buttonSortClick","emit","buttonid","sortAsc","componentDidLoad","elementHasEllipsis","window","innerWidth","Breakpoints","TABLET","setButtonTitle","label","desclabel","ellipsis","offsetWidth","scrollWidth","render","h","key","title","id","class","selected","onClick","ref","el","counter","name","width","height"],"sources":["src/components/z-button-sort/styles.css?tag=z-button-sort&encapsulation=shadow","src/components/z-button-sort/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  max-width: 100%;\n  height: 36px;\n  align-items: center;\n  padding: 0 var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-primary01);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary-icon);\n}\n\nbutton:focus {\n  border-color: var(--color-primary01);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-active-primary-icon);\n}\n\nbutton.selected {\n  border-color: var(--color-hover-primary);\n  background-color: var(--color-hover-primary);\n  color: var(--color-text-inverse);\n  fill: var(--color-inverse-icon);\n}\n\nbutton > span.ellipsis {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nbutton > span.counter {\n  margin-right: calc(var(--space-unit) * 2);\n  margin-left: calc(var(--space-unit) / 2);\n}\n\nbutton > span.sort {\n  margin-right: calc(var(--space-unit) / 2);\n  white-space: nowrap;\n}\n\nbutton > span {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  button {\n    max-width: 325px;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  button {\n    max-width: 490px;\n  }\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\n\n@Component({\n  tag: \"z-button-sort\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZButtonSort implements ComponentInterface {\n  /** id, should be unique */\n  @Prop()\n  buttonid: string;\n\n  /** label content (ascending) */\n  @Prop()\n  label: string;\n\n  /** label content (descending) */\n  @Prop()\n  desclabel?: string;\n\n  /** occurrences counter (optional) */\n  @Prop()\n  counter?: number;\n\n  /** sort label content (ascending) (optional) */\n  @Prop()\n  sortlabelasc?: string = \"A-Z\";\n\n  /** sort label content (descending) (optional) */\n  @Prop()\n  sortlabeldesc?: string = \"Z-A\";\n\n  /** selected flag (optional) */\n  @Prop({mutable: true})\n  isselected?: boolean = false;\n\n  /** sortable flag (optional) */\n  @Prop({mutable: true})\n  sortasc?: boolean = true;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLSpanElement;\n\n  /** sorting direction click event, returns `buttonid` and `sortAsc` */\n  @Event()\n  buttonSortClick: EventEmitter;\n\n  private emitButtonSortClick(): void {\n    if (!this.isselected) {\n      this.isselected = true;\n    } else {\n      this.sortasc = !this.sortasc;\n    }\n    this.buttonSortClick.emit({\n      buttonid: this.buttonid,\n      sortAsc: this.sortasc,\n    });\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private setButtonTitle(): string {\n    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : \"\";\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        title={this.setButtonTitle()}\n        id={this.buttonid}\n        class={{selected: this.isselected}}\n        onClick={() => this.emitButtonSortClick()}\n      >\n        <span\n          ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n          class=\"ellipsis\"\n        >\n          {!this.sortasc && this.desclabel ? this.desclabel : this.label}\n        </span>\n        <span class=\"counter\">{this.counter && ` (${this.counter})`}</span>\n        <span class=\"sort\">{this.sortasc ? this.sortlabelasc : this.sortlabeldesc}</span>\n        <z-icon\n          name=\"caret-up-down\"\n          width={16}\n          height={16}\n        />\n      </button>\n    );\n  }\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,IAAM,w6C,MCQXC,EAAW,MALxB,WAAAC,CAAAC,G,2DAwBEC,KAAAC,aAAwB,MAIxBD,KAAAE,cAAyB,MAIzBF,KAAAG,WAAuB,MAIvBH,KAAAI,QAAoB,KAGpBJ,KAAAK,aAAe,KA0DhB,CAlDS,mBAAAC,GACN,IAAKN,KAAKG,WAAY,CACpBH,KAAKG,WAAa,I,KACb,CACLH,KAAKI,SAAWJ,KAAKI,O,CAEvBJ,KAAKO,gBAAgBC,KAAK,CACxBC,SAAUT,KAAKS,SACfC,QAASV,KAAKI,S,CAIlB,gBAAAO,GACE,GAAIX,KAAKY,sBAAwBC,OAAOC,WAAaC,EAAYC,OAAQ,CACvEhB,KAAKK,aAAe,I,EAIhB,cAAAY,GACN,OAAOjB,KAAKK,aAAe,GAAGL,KAAKI,QAAUJ,KAAKkB,MAAQlB,KAAKmB,YAAc,E,CAGvE,kBAAAP,GACN,OAAOZ,KAAKoB,SAASC,YAAcrB,KAAKoB,SAASE,W,CAGnD,MAAAC,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,MAAO1B,KAAKiB,iBACZU,GAAI3B,KAAKS,SACTmB,MAAO,CAACC,SAAU7B,KAAKG,YACvB2B,QAAS,IAAM9B,KAAKM,uBAEpBkB,EAAA,QAAAC,IAAA,2CACEM,IAAMC,GAAQhC,KAAKoB,SAAWY,EAC9BJ,MAAM,aAEJ5B,KAAKI,SAAWJ,KAAKmB,UAAYnB,KAAKmB,UAAYnB,KAAKkB,OAE3DM,EAAA,QAAAC,IAAA,2CAAMG,MAAM,WAAW5B,KAAKiC,SAAW,KAAKjC,KAAKiC,YACjDT,EAAA,QAAAC,IAAA,2CAAMG,MAAM,QAAQ5B,KAAKI,QAAUJ,KAAKC,aAAeD,KAAKE,eAC5DsB,EAAA,UAAAC,IAAA,2CACES,KAAK,gBACLC,MAAO,GACPC,OAAQ,K","ignoreList":[]}

package/www/build/p-2b05eaef.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e}from"./p-BEHxru6n.js";const r=()=>`: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 o=class{constructor(e){t(this,e)}render(){return e("slot",{key:"c0d4c33ff0e304a0e2c6b1f708fb48aaa3f45fc5"})}};o.style=r();export{o as z_visually_hidden};
+//# sourceMappingURL=p-2b05eaef.entry.js.map

package/www/build/p-2b05eaef.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","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, ComponentInterface, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden implements ComponentInterface {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,IAAM,mK,MCOXC,EAAe,M,yBAC1B,MAAAC,GACE,OAAOC,EAAA,QAAAC,IAAA,4C","ignoreList":[]}

package/www/build/p-2c63a798.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as n,d as o}from"./p-BEHxru6n.js";import{O as a,P as r}from"./p-B3nR3-Jw.js";import{r as s}from"./p-C8pbzcmM.js";import"./p-Q-tWjk7P.js";const h=()=>`:host,*{box-sizing:border-box}:host{--progress:0%;--progress-ratio:0;--z-input-range-thumb-size:calc(var(--space-unit) * 3);display:flex;width:fit-content;height:fit-content;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([size="small"]){--z-input-range-thumb-size:calc(var(--space-unit) * 2)}:host([size="x-small"]){--z-input-range-thumb-size:calc(var(--space-unit) * 1.5)}:host([orientation="vertical"]){height:100%;flex-direction:row}.input-container{--z-input-range-track-size:calc(var(--z-input-range-thumb-size) / 3);position:relative;display:flex;width:100%;height:100%}label.z-label{padding:0;margin-bottom:calc(var(--space-unit) * 1.5)}:host([orientation="vertical"]) label.z-label{display:none}input[type="range"]{--main-color:var(--color-primary01);width:100%;height:var(--z-input-range-thumb-size);padding:0;margin:0;appearance:none;background:transparent;writing-mode:horizontal-tb}input[type="range"]:hover,input[type="range"]:hover~z-tooltip{--main-color:var(--color-hover-primary)}input[type="range"]:focus:focus-visible{outline:none}input[type="range"]:disabled,input[type="range"]:disabled~z-tooltip{--main-color:var(--color-form-disabled03);cursor:default}input[type="range"]::-webkit-slider-runnable-track{width:100%;height:var(--z-input-range-track-size);border:none;appearance:none;background:linear-gradient(var(--main-color), var(--main-color)) 0 / var(--progress) 100% no-repeat,     var(--color-surface03);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]{width:var(--z-input-range-thumb-size);height:100%;direction:rtl;writing-mode:vertical-lr}:host([orientation="vertical"]) input[type="range"]::-webkit-slider-runnable-track{width:var(--z-input-range-track-size);height:100%;background:linear-gradient(var(--main-color), var(--main-color)) 0 100% / 100% var(--progress) no-repeat,     var(--color-surface03)}input[type="range"]::-webkit-slider-thumb{width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);box-sizing:border-box;border:calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);margin-top:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);appearance:none;background-color:var(--color-surface01);border-radius:50%}:host([orientation="vertical"]) input[type="range"]::-webkit-slider-thumb{margin-top:0;margin-left:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2)}input[type="range"]:not(:disabled)::-webkit-slider-runnable-track{cursor:pointer}input[type="range"]:not(:disabled)::-webkit-slider-thumb{cursor:grab}input[type="range"]:focus:not(:active)::-webkit-slider-thumb{box-shadow:var(--shadow-focus-primary)}input[type="range"]:active:not(:disabled)::-webkit-slider-thumb{cursor:grabbing}input[type="range"]::-moz-range-track{width:100%;height:var(--z-input-range-track-size);border:none;appearance:none;background:var(--color-surface03);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]::-moz-range-track{width:var(--z-input-range-track-size);height:100%}input[type="range"]::-moz-range-progress{height:var(--z-input-range-track-size);border:none;background:var(--main-color);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]::-moz-range-progress{width:var(--z-input-range-track-size);height:auto}input[type="range"]::-moz-range-thumb{width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);box-sizing:border-box;border:calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);margin-top:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);appearance:none;background-color:var(--color-surface01);border-radius:50%}:host([orientation="vertical"]) input[type="range"]::-moz-range-thumb{margin-top:0;margin-left:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2)}input[type="range"]:not(:disabled)::-moz-range-track,input[type="range"]:not(:disabled)::-moz-range-progress{cursor:pointer}input[type="range"]:not(:disabled)::-moz-range-thumb{cursor:grab}input[type="range"]:active:not(:disabled)::-moz-range-thumb{cursor:grabbing}input[type="range"]:focus:not(:active)::-moz-range-thumb{box-shadow:var(--shadow-focus-primary)}.tooltip-guide{--progress-position:calc(     (var(--progress-ratio) * (100% - var(--z-input-range-thumb-size))) + (var(--z-input-range-thumb-size) / 2)   );position:absolute;z-index:-1;top:0;left:var(--progress-position);width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);background:transparent;pointer-events:none;transform:translateX(-50%)}:host([orientation="vertical"]) .tooltip-guide{top:auto;bottom:var(--progress-position);left:0;transform:translateY(50%)}z-tooltip{--main-color:var(--color-primary01);--z-tooltip-theme--surface:var(--main-color);--z-tooltip-theme--text:var(--color-text-inverse);--z-tooltip-padding:calc(var(--space-unit) / 2)}z-tooltip .current-value{min-width:calc(var(--space-unit) * 3.5)}.edges{display:flex;justify-content:space-between}.edges :is(.min,.max){min-width:var(--z-input-range-thumb-size);text-align:center}:host([orientation="vertical"]) .edges{display:none}`;const g=()=>`:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;const l=class{constructor(i){t(this,i);this.rangeInput=e(this,"rangeInput",7);this.rangeChange=e(this,"rangeChange",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.disabled=false;this.htmlId=`z-input-range-${s()}`;this.max=100;this.min=0;this.showEdges=false;this.step=1;this.value=0;this.currentValue=this.value;this.showValueTooltip=false;this.needsNativeValueSync=false}get ariaLabel(){var t;return(t=this.htmlAriaLabel)!==null&&t!==void 0?t:this.orientation===a.VERTICAL?this.label:undefined}get tooltipPosition(){var t;return(t=this.valuePosition)!==null&&t!==void 0?t:this.orientation===a.VERTICAL?r.LEFT:r.TOP}updateCurrentValue(t){if(Number.isNaN(t)||t===this.currentValue){return}this.currentValue=t;this.internals.setFormValue(this.currentValue.toString())}getCurrentRatio(){const t=this.max-this.min;if(t<=0){return 0}const e=(this.currentValue-this.min)/t;return Math.min(1,Math.max(0,e))}updateProgress(){var t,e;const i=this.getCurrentRatio();const n=i*100;(t=this.host)===null||t===void 0?void 0:t.style.setProperty("--progress-ratio",`${i}`);(e=this.host)===null||e===void 0?void 0:e.style.setProperty("--progress",`${n}%`)}syncCurrentValueFromNativeInput(){if(!this.inputRef){return}this.updateCurrentValue(this.inputRef.valueAsNumber);this.updateProgress()}onInput(t){t.stopPropagation();this.syncCurrentValueFromNativeInput();this.rangeInput.emit(this.currentValue)}onChange(t){t.stopPropagation();this.syncCurrentValueFromNativeInput();this.rangeChange.emit(this.currentValue)}onConstraintsChange(){this.needsNativeValueSync=true}componentDidLoad(){this.needsNativeValueSync=true;this.syncCurrentValueFromNativeInput()}componentDidRender(){if(!this.needsNativeValueSync){return}this.syncCurrentValueFromNativeInput();this.needsNativeValueSync=false}render(){return i(n,{key:"4297a1ce9ebf313882a70733661321a2f5bde38d"},this.label&&i("label",{key:"933af2d529a852f226e0fe9eb18109fc5b7feccd",class:"z-label",htmlFor:this.htmlId},this.label),i("div",{key:"5a6a44ec7bc2fe7a292474027c1f39fc6d7cb9aa",class:"input-container body-3"},i("input",{key:"2759d81abdf6106cd29a261081b2d60495d2fe8d",ref:t=>this.inputRef=t,type:"range","aria-label":this.ariaLabel,id:this.htmlId,disabled:this.disabled,min:this.min,max:this.max,step:this.step,value:this.currentValue,onInput:t=>this.onInput(t),onChange:t=>this.onChange(t),onFocus:()=>this.showValueTooltip=true,onBlur:()=>this.showValueTooltip=false}),i("div",{key:"252ee3a382b279cf6bb397d066300dd97cca2537",class:"tooltip-guide",ref:t=>this.tooltipGuideRef=t}),i("z-tooltip",{key:"e8795cd4df104297809f79f13fdf5317cbb20ec1",position:this.tooltipPosition,bindTo:this.tooltipGuideRef,open:this.showValueTooltip,closable:false},i("div",{key:"92186a95ac641beaff9afdd95537f85161ab7186",class:"current-value"},this.currentValue))),this.showEdges&&i("div",{key:"d09e29dc8bef5b376a5d04d138f70c5c43f8bebe",class:"edges body-3"},i("span",{key:"fea33d9d289b5f31da1b0c756b347fa25892940f",class:"min"},this.min),i("span",{key:"602ac1fc4957b2262bb2bb2c802898c6296e31f6",class:"max"},this.max)))}static get formAssociated(){return true}get host(){return o(this)}static get watchers(){return{min:[{onConstraintsChange:0}],max:[{onConstraintsChange:0}],step:[{onConstraintsChange:0}],value:[{onConstraintsChange:0}]}}};l.style=h()+g();export{l as z_input_range};
+//# sourceMappingURL=p-2c63a798.entry.js.map

package/www/build/p-2c63a798.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","typographyCss","ZInputRange","constructor","hostRef","this","disabled","htmlId","randomId","max","min","showEdges","step","value","currentValue","showValueTooltip","needsNativeValueSync","ariaLabel","_a","htmlAriaLabel","orientation","Orientation","VERTICAL","label","undefined","tooltipPosition","valuePosition","PopoverPosition","LEFT","TOP","updateCurrentValue","nextValue","Number","isNaN","internals","setFormValue","toString","getCurrentRatio","range","ratio","Math","updateProgress","progress","host","style","setProperty","_b","syncCurrentValueFromNativeInput","inputRef","valueAsNumber","onInput","event","stopPropagation","rangeInput","emit","onChange","rangeChange","onConstraintsChange","componentDidLoad","componentDidRender","render","h","Host","key","class","htmlFor","ref","el","type","id","onFocus","onBlur","tooltipGuideRef","position","bindTo","open","closable"],"sources":["src/components/z-input-range/styles.css?tag=z-input-range&encapsulation=shadow","src/tokens/typography.css?tag=z-input-range&encapsulation=shadow","src/components/z-input-range/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  /* Internal CSS variable used to store the progress of the input range as a percentage.\n  Needed to color the progress in the runnable track of the input (only Firefox natively provides a pseudo-element to do that: `::-moz-range-progress`).\n  The value is updated by the component. */\n  --progress: 0%;\n\n  /* Internal CSS variable used to store the ratio of the current value to the total range, used for positioning the tooltip guide.\n  The value is updated by the component. */\n  --progress-ratio: 0;\n  --z-input-range-thumb-size: calc(var(--space-unit) * 3);\n\n  display: flex;\n  width: fit-content;\n  height: fit-content;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]) {\n  --z-input-range-thumb-size: calc(var(--space-unit) * 2);\n}\n\n:host([size=\"x-small\"]) {\n  --z-input-range-thumb-size: calc(var(--space-unit) * 1.5);\n}\n\n:host([orientation=\"vertical\"]) {\n  height: 100%;\n  flex-direction: row;\n}\n\n.input-container {\n  /* Thickness of the track. It is calculated as one-third of the thumb size. */\n  --z-input-range-track-size: calc(var(--z-input-range-thumb-size) / 3);\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\nlabel.z-label {\n  padding: 0;\n  margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host([orientation=\"vertical\"]) label.z-label {\n  display: none;\n}\n\ninput[type=\"range\"] {\n  --main-color: var(--color-primary01);\n\n  width: 100%;\n  height: var(--z-input-range-thumb-size);\n  padding: 0;\n  margin: 0;\n  appearance: none;\n  background: transparent;\n  writing-mode: horizontal-tb;\n}\n\ninput[type=\"range\"]:hover,\ninput[type=\"range\"]:hover ~ z-tooltip {\n  --main-color: var(--color-hover-primary);\n}\n\ninput[type=\"range\"]:focus:focus-visible {\n  outline: none;\n}\n\ninput[type=\"range\"]:disabled,\ninput[type=\"range\"]:disabled ~ z-tooltip {\n  --main-color: var(--color-form-disabled03);\n\n  cursor: default;\n}\n\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  width: 100%;\n  height: var(--z-input-range-track-size);\n  border: none;\n  appearance: none;\n  background:\n    linear-gradient(var(--main-color), var(--main-color)) 0 / var(--progress) 100% no-repeat,\n    var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"] {\n  width: var(--z-input-range-thumb-size);\n  height: 100%;\n  direction: rtl;\n  writing-mode: vertical-lr;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-webkit-slider-runnable-track {\n  width: var(--z-input-range-track-size);\n  height: 100%;\n  background:\n    linear-gradient(var(--main-color), var(--main-color)) 0 100% / 100% var(--progress) no-repeat,\n    var(--color-surface03);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n  width: var(--z-input-range-thumb-size);\n  height: var(--z-input-range-thumb-size);\n  box-sizing: border-box;\n  border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);\n  margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n  appearance: none;\n  background-color: var(--color-surface01);\n  border-radius: 50%;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-webkit-slider-thumb {\n  margin-top: 0;\n  margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"]:not(:disabled)::-webkit-slider-runnable-track {\n  cursor: pointer;\n}\n\ninput[type=\"range\"]:not(:disabled)::-webkit-slider-thumb {\n  cursor: grab;\n}\n\ninput[type=\"range\"]:focus:not(:active)::-webkit-slider-thumb {\n  box-shadow: var(--shadow-focus-primary);\n}\n\ninput[type=\"range\"]:active:not(:disabled)::-webkit-slider-thumb {\n  cursor: grabbing;\n}\n\n/* --- Firefox styles --- */\n\n/* All styles must be duplicated, because using comma-separated selectors\n(like `input[type=\"range\"]::-webkit-slider-thumb, input[type=\"range\"]::-moz-range-thumb`) would break webkit styles...\n*/\ninput[type=\"range\"]::-moz-range-track {\n  width: 100%;\n  height: var(--z-input-range-track-size);\n  border: none;\n  appearance: none;\n  background: var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-track {\n  width: var(--z-input-range-track-size);\n  height: 100%;\n}\n\ninput[type=\"range\"]::-moz-range-progress {\n  height: var(--z-input-range-track-size);\n  border: none;\n  background: var(--main-color);\n  border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-progress {\n  width: var(--z-input-range-track-size);\n  height: auto;\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n  width: var(--z-input-range-thumb-size);\n  height: var(--z-input-range-thumb-size);\n  box-sizing: border-box;\n  border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);\n  margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n  appearance: none;\n  background-color: var(--color-surface01);\n  border-radius: 50%;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-thumb {\n  margin-top: 0;\n  margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"]:not(:disabled)::-moz-range-track,\ninput[type=\"range\"]:not(:disabled)::-moz-range-progress {\n  cursor: pointer;\n}\n\ninput[type=\"range\"]:not(:disabled)::-moz-range-thumb {\n  cursor: grab;\n}\n\ninput[type=\"range\"]:active:not(:disabled)::-moz-range-thumb {\n  cursor: grabbing;\n}\n\ninput[type=\"range\"]:focus:not(:active)::-moz-range-thumb {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* --- End of Firefox styles --- */\n\n.tooltip-guide {\n  --progress-position: calc(\n    (var(--progress-ratio) * (100% - var(--z-input-range-thumb-size))) + (var(--z-input-range-thumb-size) / 2)\n  );\n\n  position: absolute;\n  z-index: -1;\n  top: 0;\n\n  /* `--progress` is good for painting the filled track, but not enough for representing the thumb center.\n   * The thumb center cannot go from 0 to 100%:\n   * at min it sits at thumbSize/2, and at max it sits at width - thumbSize/2.\n   * So we map a normalized ratio (0..1) over the usable travel distance\n   * (width - thumbSize), then add thumbSize/2 to get the correct center coordinate.\n   */\n  left: var(--progress-position);\n  width: var(--z-input-range-thumb-size);\n  height: var(--z-input-range-thumb-size);\n  background: transparent;\n  pointer-events: none;\n  transform: translateX(-50%);\n}\n\n:host([orientation=\"vertical\"]) .tooltip-guide {\n  top: auto;\n  bottom: var(--progress-position);\n  left: 0;\n  transform: translateY(50%);\n}\n\nz-tooltip {\n  --main-color: var(--color-primary01);\n  --z-tooltip-theme--surface: var(--main-color);\n  --z-tooltip-theme--text: var(--color-text-inverse);\n  --z-tooltip-padding: calc(var(--space-unit) / 2);\n}\n\nz-tooltip .current-value {\n  min-width: calc(var(--space-unit) * 3.5);\n}\n\n.edges {\n  display: flex;\n  justify-content: space-between;\n}\n\n.edges :is(.min, .max) {\n  min-width: var(--z-input-range-thumb-size); /* visually align single digit values to the center of the thumb */\n  text-align: center;\n}\n\n:host([orientation=\"vertical\"]) .edges {\n  display: none;\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","import {\n  AttachInternals,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ControlSize, Orientation, PopoverPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * Input range component.\n */\n@Component({\n  tag: \"z-input-range\",\n  styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n  shadow: true,\n  formAssociated: true,\n})\nexport class ZInputRange implements ComponentInterface {\n  @Element() host: HTMLZInputRangeElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Whether the input range is disabled. */\n  @Prop()\n  disabled = false;\n\n  /**\n   * The aria label of the input range. for accessibility.\n   * Not necessary if the `label` prop is set.\n   */\n  @Prop()\n  htmlAriaLabel: string;\n\n  /** ID of the input range. */\n  @Prop()\n  htmlId = `z-input-range-${randomId()}`;\n\n  /**\n   * The label of the input range.\n   * When `orientation` is set to `vertical`, the label is not visible but used as `aria-label`, unless `htmlAriaLabel` is provided.\n   */\n  @Prop()\n  label: string;\n\n  /** The greatest value in the range of permitted values. */\n  @Prop()\n  max = 100;\n\n  /** The lowest value in the range of permitted values. */\n  @Prop()\n  min = 0;\n\n  /** The orientation of the input range. */\n  @Prop({reflect: true})\n  orientation: Orientation;\n\n  /** Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation. */\n  @Prop()\n  showEdges = false;\n\n  /** The size of the input range. Default: `ControlSize.BIG` */\n  @Prop({reflect: true})\n  size: ControlSize.BIG;\n\n  /** The step value for the input range. */\n  @Prop()\n  step = 1;\n\n  /** The value of the input range. */\n  @Prop()\n  value = 0;\n\n  /**\n   * The position of the tooltip displaying the current value.\n   * Defaults to `top` for horizontal orientation and `left` for vertical orientation.\n   * May be necessary to adjust this prop when the input range is close to the edges of the screen,\n   * to prevent the tooltip from showing out of the screen or in an unintended position due to auto adjustment.\n   * For example, for a horizontal input range close to the top of the screen, you may want to set this prop to `bottom`.\n   */\n  @Prop()\n  valuePosition: PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT;\n\n  /** Emitted when the value of the input range is being changed (`input` native event). */\n  @Event()\n  rangeInput: EventEmitter<number>;\n\n  /** Emitted when the value of the input range has changed (`change` native event). */\n  @Event()\n  rangeChange: EventEmitter<number>;\n\n  /** The current value of the input range synchronized with the native input element. */\n  @State()\n  currentValue = this.value;\n\n  /**\n   * Whether to show the tooltip displaying the current value.\n   * The tooltip is shown only when the input range is focused or while the user is changing the value.\n   */\n  @State()\n  showValueTooltip = false;\n\n  /**\n   * Whether the native input value needs to be synced with the component state.\n   * This is necessary when the `step` prop changes, as the browser may round the value,\n   * so we need to update the component state accordingly.\n   */\n  private needsNativeValueSync = false;\n\n  private inputRef: HTMLInputElement;\n\n  private tooltipGuideRef: HTMLSpanElement;\n\n  private get ariaLabel(): string | undefined {\n    return this.htmlAriaLabel ?? (this.orientation === Orientation.VERTICAL ? this.label : undefined);\n  }\n\n  private get tooltipPosition(): typeof this.valuePosition {\n    return (\n      this.valuePosition ?? (this.orientation === Orientation.VERTICAL ? PopoverPosition.LEFT : PopoverPosition.TOP)\n    );\n  }\n\n  private updateCurrentValue(nextValue: number): void {\n    if (Number.isNaN(nextValue) || nextValue === this.currentValue) {\n      return;\n    }\n\n    this.currentValue = nextValue;\n    this.internals.setFormValue(this.currentValue.toString());\n  }\n\n  /** Calculates the current ratio of the input range value. */\n  private getCurrentRatio(): number {\n    const range = this.max - this.min;\n    if (range <= 0) {\n      return 0;\n    }\n\n    const ratio = (this.currentValue - this.min) / range;\n\n    return Math.min(1, Math.max(0, ratio));\n  }\n\n  /** Updates the CSS variables used to color the track progress and tooltip guide position. */\n  private updateProgress(): void {\n    const ratio = this.getCurrentRatio();\n    const progress = ratio * 100;\n\n    this.host?.style.setProperty(\"--progress-ratio\", `${ratio}`);\n    this.host?.style.setProperty(\"--progress\", `${progress}%`);\n  }\n\n  /**\n   * Syncs current value from native input after render-time browser coercions:\n   * when `step` changes, the browser may round the value, so we need to update the component state accordingly.\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step\n   */\n  private syncCurrentValueFromNativeInput(): void {\n    if (!this.inputRef) {\n      return;\n    }\n\n    this.updateCurrentValue(this.inputRef.valueAsNumber);\n    this.updateProgress();\n  }\n\n  private onInput(event: InputEvent): void {\n    event.stopPropagation();\n    this.syncCurrentValueFromNativeInput();\n    this.rangeInput.emit(this.currentValue);\n  }\n\n  private onChange(event: Event): void {\n    event.stopPropagation();\n    this.syncCurrentValueFromNativeInput();\n    this.rangeChange.emit(this.currentValue);\n  }\n\n  @Watch(\"min\")\n  @Watch(\"max\")\n  @Watch(\"step\")\n  @Watch(\"value\")\n  onConstraintsChange(): void {\n    this.needsNativeValueSync = true;\n  }\n\n  componentDidLoad() {\n    this.needsNativeValueSync = true;\n    this.syncCurrentValueFromNativeInput();\n  }\n\n  componentDidRender() {\n    if (!this.needsNativeValueSync) {\n      return;\n    }\n\n    this.syncCurrentValueFromNativeInput();\n    this.needsNativeValueSync = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.label && (\n          <label\n            class=\"z-label\"\n            htmlFor={this.htmlId}\n          >\n            {this.label}\n          </label>\n        )}\n        <div class=\"input-container body-3\">\n          <input\n            ref={(el) => (this.inputRef = el)}\n            type=\"range\"\n            aria-label={this.ariaLabel}\n            id={this.htmlId}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.currentValue}\n            onInput={(event) => this.onInput(event)}\n            onChange={(event) => this.onChange(event)}\n            onFocus={() => (this.showValueTooltip = true)}\n            onBlur={() => (this.showValueTooltip = false)}\n          />\n          <div\n            class=\"tooltip-guide\"\n            ref={(el) => (this.tooltipGuideRef = el)}\n          ></div>\n          <z-tooltip\n            position={this.tooltipPosition}\n            bindTo={this.tooltipGuideRef}\n            open={this.showValueTooltip}\n            closable={false}\n          >\n            <div class=\"current-value\">{this.currentValue}</div>\n          </z-tooltip>\n        </div>\n        {this.showEdges && (\n          <div class=\"edges body-3\">\n            <span class=\"min\">{this.min}</span>\n            <span class=\"max\">{this.max}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-315ac39c.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as s}from"./p-BEHxru6n.js";import{h as a}from"./p-C8pbzcmM.js";import"./p-B3nR3-Jw.js";import"./p-Q-tWjk7P.js";const e=()=>`:host li{all:unset;all:reset;width:100%;line-height:14px;list-style-type:none}:host li>span{display:flex;padding:calc(var(--space-unit) * 2) 0;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);letter-spacing:0.23px;line-height:14px}:host(.small) li>span{padding:calc(var(--space-unit) * 1.5) 0;font-size:var(--font-size-2)}:host(.x-small) li>span{padding:var(--space-unit) 0;font-size:var(--font-size-2)}:host(.small) li>span>z-icon,:host(.x-small) li>span>z-icon{--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:calc(var(--space-unit) * 0.5);padding:0}:host li>span.border{border-bottom:2px solid var(--color-surface03)}:host li span:hover,a:hover{color:var(--color-primary01);fill:var(--color-primary01)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-repeat:no-repeat;background-size:contain;color:var(--color-primary01);fill:var(--color-primary01)}`;const o=class{emitZListItemLinkClick(i,t){this.zListItemLinkClick.emit({e:i,linkId:t})}emitZListItemClick(i,t){this.zListItemClick.emit({e:i,listitemid:t})}constructor(s){i(this,s);this.zListItemLinkClick=t(this,"zListItemLinkClick",7);this.zListItemClick=t(this,"zListItemClick",7);this.linktarget="_self";this.underlined=true;this.emitZListItemLinkClick=this.emitZListItemLinkClick.bind(this);this.emitZListItemClick=this.emitZListItemClick.bind(this)}render(){const i=this.listitemid?`link_${this.listitemid}`:"";return s("li",{key:"5364c5d28f9c27c67edb4e0bdcb1149f82ced9b6",role:"button",id:this.listitemid,"data-action":this.action,onClick:i=>this.emitZListItemClick(i,this.listitemid),onKeyPress:i=>a(i,this.emitZListItemClick,this.listitemid)},s("span",{key:"beb568968c53a442f27900b428f0fe5d0ac2703d",class:this.underlined&&"border"},this.icon&&s("z-icon",{key:"60bb559247dc40d349b83469baf081dcd1a23fae",name:this.icon}),this.link?s("a",{href:this.link?this.link:null,target:this.linktarget,id:i,onClick:t=>this.emitZListItemLinkClick(t,i),onKeyPress:t=>a(t,this.emitZListItemLinkClick,i),role:this.link?"link":"button",tabindex:"0"},this.text):s("span",{innerHTML:this.text}),s("slot",{key:"2c8731d7877f7675d388f8be3eb833a8fcc75bd0"})))}};o.style=e();export{o as z_myz_list_item};
+//# sourceMappingURL=p-315ac39c.entry.js.map

package/www/build/p-315ac39c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzListItem","emitZListItemLinkClick","e","linkId","this","zListItemLinkClick","emit","emitZListItemClick","listitemid","zListItemClick","constructor","hostRef","linktarget","underlined","bind","render","h","key","role","id","action","onClick","onKeyPress","ev","handleKeyboardSubmit","class","icon","name","link","href","target","tabindex","text","innerHTML"],"sources":["src/snowflakes/myz/list/z-myz-list-item/styles.css?tag=z-myz-list-item&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list-item/index.tsx"],"sourcesContent":[":host li {\n  all: unset;\n  all: reset;\n  width: 100%;\n  line-height: 14px;\n  list-style-type: none;\n}\n\n:host li > span {\n  display: flex;\n  padding: calc(var(--space-unit) * 2) 0;\n  color: var(--color-default-text);\n  fill: var(--color-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: 16px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.23px;\n  line-height: 14px;\n}\n\n:host(.small) li > span {\n  padding: calc(var(--space-unit) * 1.5) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.x-small) li > span {\n  padding: var(--space-unit) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.small) li > span > z-icon,\n:host(.x-small) li > span > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n\n  padding: 0;\n}\n\n:host li > span.border {\n  border-bottom: 2px solid var(--color-surface03);\n}\n\n:host li span:hover,\na:hover {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\na,\na:visited,\na:active {\n  color: inherit;\n  fill: inherit;\n  text-decoration: none;\n}\n\n:host li span z-icon {\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  padding: 0 calc(var(--space-unit) * 1.5) 0 0;\n  background-repeat: no-repeat;\n  background-size: contain;\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n@Component({\n  tag: \"z-myz-list-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzListItem implements ComponentInterface {\n  /** content text */\n  @Prop()\n  text: string;\n\n  /** link url (optional) */\n  @Prop()\n  link?: string;\n\n  /** link target (optional) */\n  @Prop()\n  linktarget?: string = \"_self\";\n\n  /** icon name (optional) */\n  @Prop()\n  icon?: string;\n\n  /** id (optional) */\n  @Prop()\n  listitemid?: string;\n\n  /** data-action attribute (optional) */\n  @Prop()\n  action?: string;\n\n  /** underlined style flag */\n  @Prop()\n  underlined = true;\n\n  /** emitted on list item link click, returns linkId */\n  @Event()\n  zListItemLinkClick: EventEmitter;\n\n  private emitZListItemLinkClick(e: MouseEvent, linkId): void {\n    this.zListItemLinkClick.emit({e, linkId});\n  }\n\n  /** emitted on list item click, returns listitemid */\n  @Event()\n  zListItemClick: EventEmitter;\n\n  private emitZListItemClick(e: MouseEvent, listitemid): void {\n    this.zListItemClick.emit({e, listitemid});\n  }\n\n  constructor() {\n    this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);\n    this.emitZListItemClick = this.emitZListItemClick.bind(this);\n  }\n\n  render(): HTMLLIElement {\n    const linkId = this.listitemid ? `link_${this.listitemid}` : \"\";\n\n    return (\n      <li\n        role=\"button\"\n        id={this.listitemid}\n        data-action={this.action}\n        onClick={(e: MouseEvent) => this.emitZListItemClick(e, this.listitemid)}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid)}\n      >\n        <span class={this.underlined && \"border\"}>\n          {this.icon && <z-icon name={this.icon} />}\n          {this.link ? (\n            <a\n              href={this.link ? this.link : null}\n              target={this.linktarget}\n              id={linkId}\n              onClick={(e: MouseEvent) => this.emitZListItemLinkClick(e, linkId)}\n              onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId)}\n              role={this.link ? \"link\" : \"button\"}\n              tabindex=\"0\"\n            >\n              {this.text}\n            </a>\n          ) : (\n            <span innerHTML={this.text}></span>\n          )}\n          <slot />\n        </span>\n      </li>\n    );\n  }\n}\n"],"mappings":"sIAAA,MAAMA,EAAY,IAAM,smC,MCQXC,EAAY,MAiCf,sBAAAC,CAAuBC,EAAeC,GAC5CC,KAAKC,mBAAmBC,KAAK,CAACJ,IAAGC,U,CAO3B,kBAAAI,CAAmBL,EAAeM,GACxCJ,KAAKK,eAAeH,KAAK,CAACJ,IAAGM,c,CAG/B,WAAAE,CAAAC,G,gHAlCAP,KAAAQ,WAAsB,QAgBtBR,KAAAS,WAAa,KAmBXT,KAAKH,uBAAyBG,KAAKH,uBAAuBa,KAAKV,MAC/DA,KAAKG,mBAAqBH,KAAKG,mBAAmBO,KAAKV,KACxD,CAED,MAAAW,GACE,MAAMZ,EAASC,KAAKI,WAAa,QAAQJ,KAAKI,aAAe,GAE7D,OACEQ,EAAA,MAAAC,IAAA,2CACEC,KAAK,SACLC,GAAIf,KAAKI,WAAU,cACNJ,KAAKgB,OAClBC,QAAUnB,GAAkBE,KAAKG,mBAAmBL,EAAGE,KAAKI,YAC5Dc,WAAaC,GAAsBC,EAAqBD,EAAInB,KAAKG,mBAAoBH,KAAKI,aAE1FQ,EAAA,QAAAC,IAAA,2CAAMQ,MAAOrB,KAAKS,YAAc,UAC7BT,KAAKsB,MAAQV,EAAA,UAAAC,IAAA,2CAAQU,KAAMvB,KAAKsB,OAChCtB,KAAKwB,KACJZ,EAAA,KACEa,KAAMzB,KAAKwB,KAAOxB,KAAKwB,KAAO,KAC9BE,OAAQ1B,KAAKQ,WACbO,GAAIhB,EACJkB,QAAUnB,GAAkBE,KAAKH,uBAAuBC,EAAGC,GAC3DmB,WAAaC,GAAsBC,EAAqBD,EAAInB,KAAKH,uBAAwBE,GACzFe,KAAMd,KAAKwB,KAAO,OAAS,SAC3BG,SAAS,KAER3B,KAAK4B,MAGRhB,EAAA,QAAMiB,UAAW7B,KAAK4B,OAExBhB,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/www/build/p-35653b5e.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r}from"./p-BEHxru6n.js";import{o as a}from"./p-B3nR3-Jw.js";const i=()=>`:host{position:absolute;z-index:2;top:0;left:0;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-alert{height:calc(var(--space-unit) * 6)}.relative-container{position:relative;display:grid;align-items:center;padding:0;grid-column-gap:var(--space-unit);grid-template-columns:18px auto 46px;grid-template-rows:1fr;outline:none}.relative-container::-moz-focus-inner{border:0}.alert-external-wrapper.remove-alert{border:var(--border-size-medium) solid var(--color-background);border-top:none}:host div.add-alert{background:var(--color-inverse-success)}:host div.remove-alert{background:var(--color-inverse-warning)}:host div>.content-text{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.content-action{height:20px;color:var(--color-primary01);cursor:pointer;font-size:12px;font-weight:var(--font-sb);letter-spacing:0.32px;line-height:20px}:host div>z-icon{justify-self:center}`;const o=class{constructor(r){e(this,r);this.undoAction=t(this,"undoAction",7)}emitUndoAction(){this.undoAction.emit({actionType:this.type})}handleSpaceKeyPress(e){if(e.keyCode==32||e.keyCode==13){e.preventDefault();this.emitUndoAction()}}handleActionButtonClick(e){e.preventDefault();this.emitUndoAction()}retrieveClass(){let e="";switch(this.type){case"add":e="add-alert";break;case"remove":e="remove-alert";break;default:e="";break}return e}getAlertType(){switch(this.type){case"add":return a.SUCCESS;case"remove":return a.WARNING;default:return null}}render(){return r("div",{key:"201658341ee794792a8b91f6666144ac3163eec1",class:"alert-external-wrapper "+this.retrieveClass()},r("z-alert",{key:"8ac5d12c70817efc8ce85cd298737f7fdcb78acc",type:this.getAlertType()},r("div",{key:"9db78e7bb91568660a416638e5fb12271421d076",class:"relative-container"},r("z-icon",{key:"990bf9d3c3f17b232a9d5b113f48682581c29c44",name:this.iconname,width:18,height:18,class:this.retrieveClass()}),r("span",{key:"33184bd74331a45dcef59b8703b1e679e153c51b",class:"content-text"},this.contenttext),this.actiontext&&!!this.actiontext.trim().length&&r("span",{key:"e906ff2a3220d4d9f6a4534a31c94afa244786ff",role:"button",tabindex:"0",class:"content-action",onClick:e=>{this.handleActionButtonClick(e)},onKeyPress:e=>{this.handleSpaceKeyPress(e)}},this.actiontext))))}};o.style=i();export{o as z_myz_card_alert};
+//# sourceMappingURL=p-35653b5e.entry.js.map

package/www/build/p-35653b5e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzCardAlert","emitUndoAction","this","undoAction","emit","actionType","type","handleSpaceKeyPress","e","keyCode","preventDefault","handleActionButtonClick","retrieveClass","className","getAlertType","AlertType","SUCCESS","WARNING","render","h","key","class","name","iconname","width","height","contenttext","actiontext","trim","length","role","tabindex","onClick","onKeyPress"],"sources":["src/snowflakes/myz/card/z-myz-card-alert/styles.css?tag=z-myz-card-alert&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-alert/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  width: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-alert {\n  height: calc(var(--space-unit) * 6);\n}\n\n.relative-container {\n  position: relative;\n  display: grid;\n  align-items: center;\n  padding: 0;\n  grid-column-gap: var(--space-unit);\n  grid-template-columns: 18px auto 46px;\n  grid-template-rows: 1fr;\n  outline: none;\n}\n\n.relative-container::-moz-focus-inner {\n  border: 0;\n}\n\n.alert-external-wrapper.remove-alert {\n  border: var(--border-size-medium) solid var(--color-background);\n  border-top: none;\n}\n\n:host div.add-alert {\n  background: var(--color-inverse-success);\n}\n\n:host div.remove-alert {\n  background: var(--color-inverse-warning);\n}\n\n:host div > .content-text {\n  color: var(--color-surface05);\n  font-size: 14px;\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n:host div > .content-action {\n  height: 20px;\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 20px;\n}\n\n:host div > z-icon {\n  justify-self: center;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {AlertType} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-alert\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardAlert implements ComponentInterface {\n  /** icon name */\n  @Prop()\n  iconname: string;\n\n  /** content text */\n  @Prop()\n  contenttext: string;\n\n  /** action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** alert variant type */\n  @Prop()\n  type: string;\n\n  /** undo action click/keyboard event, returns actionType */\n  @Event()\n  undoAction: EventEmitter;\n\n  private emitUndoAction(): void {\n    this.undoAction.emit({actionType: this.type});\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      this.emitUndoAction();\n    }\n  }\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.emitUndoAction();\n  }\n\n  private retrieveClass(): string {\n    let className = \"\";\n    switch (this.type) {\n      case \"add\":\n        className = \"add-alert\";\n        break;\n      case \"remove\":\n        className = \"remove-alert\";\n        break;\n      default:\n        className = \"\";\n        break;\n    }\n\n    return className;\n  }\n\n  private getAlertType(): AlertType {\n    switch (this.type) {\n      case \"add\":\n        return AlertType.SUCCESS;\n      case \"remove\":\n        return AlertType.WARNING;\n      default:\n        return null;\n    }\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class={\"alert-external-wrapper \" + this.retrieveClass()}>\n        <z-alert type={this.getAlertType()}>\n          <div class=\"relative-container\">\n            <z-icon\n              name={this.iconname}\n              width={18}\n              height={18}\n              class={this.retrieveClass()}\n            ></z-icon>\n            <span class=\"content-text\">{this.contenttext}</span>\n            {this.actiontext && !!this.actiontext.trim().length && (\n              <span\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"content-action\"\n                onClick={(e: MouseEvent) => {\n                  this.handleActionButtonClick(e);\n                }}\n                onKeyPress={(e: KeyboardEvent) => {\n                  this.handleSpaceKeyPress(e);\n                }}\n              >\n                {this.actiontext}\n              </span>\n            )}\n          </div>\n        </z-alert>\n      </div>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,IAAM,y7B,MCQXC,EAAa,M,gEAqBhB,cAAAC,GACNC,KAAKC,WAAWC,KAAK,CAACC,WAAYH,KAAKI,M,CAGjC,mBAAAC,CAAoBC,GAC1B,GAAIA,EAAEC,SAAW,IAAMD,EAAEC,SAAW,GAAI,CACtCD,EAAEE,iBACFR,KAAKD,gB,EAID,uBAAAU,CAAwBH,GAC9BA,EAAEE,iBACFR,KAAKD,gB,CAGC,aAAAW,GACN,IAAIC,EAAY,GAChB,OAAQX,KAAKI,MACX,IAAK,MACHO,EAAY,YACZ,MACF,IAAK,SACHA,EAAY,eACZ,MACF,QACEA,EAAY,GACZ,MAGJ,OAAOA,C,CAGD,YAAAC,GACN,OAAQZ,KAAKI,MACX,IAAK,MACH,OAAOS,EAAUC,QACnB,IAAK,SACH,OAAOD,EAAUE,QACnB,QACE,OAAO,K,CAIb,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA4BnB,KAAKU,iBAC3CO,EAAA,WAAAC,IAAA,2CAASd,KAAMJ,KAAKY,gBAClBK,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACTF,EAAA,UAAAC,IAAA,2CACEE,KAAMpB,KAAKqB,SACXC,MAAO,GACPC,OAAQ,GACRJ,MAAOnB,KAAKU,kBAEdO,EAAA,QAAAC,IAAA,2CAAMC,MAAM,gBAAgBnB,KAAKwB,aAChCxB,KAAKyB,cAAgBzB,KAAKyB,WAAWC,OAAOC,QAC3CV,EAAA,QAAAC,IAAA,2CACEU,KAAK,SACLC,SAAS,IACTV,MAAM,iBACNW,QAAUxB,IACRN,KAAKS,wBAAwBH,EAAE,EAEjCyB,WAAazB,IACXN,KAAKK,oBAAoBC,EAAE,GAG5BN,KAAKyB,c","ignoreList":[]}

package/www/build/p-38e4e01f.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as o,d as n}from"./p-BEHxru6n.js";import{P as s,g as a}from"./p-B3nR3-Jw.js";import{a as r}from"./p-C8pbzcmM.js";import"./p-Q-tWjk7P.js";const h=()=>`:host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);position:relative;display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host(:is([active],[open])) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{background:var(--color-primary03)}@media (hover: hover){:host(:hover),:host(.z-tool-tooltip-open){z-index:1}:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}.z-tool:focus:focus-visible{background-color:var(--color-primary03);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-tooltip-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-tooltip-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));position:relative;z-index:2;font-family:var(--font-family-sans);white-space:nowrap}.z-tool-submenu{z-index:3;border-radius:calc(var(--border-radius) + var(--border-size-small))}.z-tool-submenu ::slotted(z-color-picker){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}@media (max-width: 767px) and (hover: none){.z-tool-tooltip{display:none !important}}`;const l=()=>`:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;const f=class{constructor(i){t(this,i);this.toggleSubmenu=e(this,"toggleSubmenu",7);this.toggleTooltip=e(this,"toggleTooltip",7);this.tooltipPosition=s.TOP;this.active=false;this.disabled=false;this.open=false;this.tooltipOpen=false;this.hasSlottedContent=false;this.isMobile=false;this.hasNestedOpenTools=false;this.isNested=false;this.handleTooltipOpen=t=>{if(!this.tooltip||this.open||!this.buttonRef.contains(t.target)){return}clearTimeout(this.hoverDelay);this.hoverDelay=setTimeout((()=>{this.tooltipOpen=true}),1e3)};this.handleTooltipClose=t=>{var e;if(!this.tooltip||((e=t.relatedTarget)===null||e===void 0?void 0:e.closest("z-tooltip"))===this.tooltipRef){return}clearTimeout(this.hoverDelay);this.tooltipOpen=false};this.handleClick=()=>{if(this.disabled||!this.hasSlottedContent){return}this.open=!this.open;if(this.open){const t=this.hostElement.querySelector(":scope > z-color-picker");if(t){t.setFocus();return}const e=this.hostElement.querySelector(":scope > z-toolbar z-tool[active]:not(:disabled)")||this.hostElement.querySelector(":scope > z-toolbar z-tool:not(:disabled)");e===null||e===void 0?void 0:e.setFocus()}};this.onTooltipOpenChange=t=>{if(t.target===this.tooltipRef){return}this.tooltipOpen=t.detail.open}}handleOpenChange(){this.toggleSubmenu.emit(this.open)}handleTooltipOpenChange(){this.toggleTooltip.emit(this.tooltipOpen)}handleKeyDown(t){if(!this.open||this.hasNestedOpenTools){return}switch(t.key){case a.ESC:t.stopPropagation();this.open=false;this.setFocus();break;case a.TAB:if(t.shiftKey&&t.target.closest("z-tool:not(:scope)")===this.hostElement){this.open=false}break}}onOutsideClick(t){const e=t.composedPath()[0];if(!this.open||r(this.hostElement,e)||this.hasNestedOpenTools){return}this.open=false}onNestedToolToggle(t){if(t.target===this.hostElement){return}if(t.detail===true){this.hasNestedOpenTools=true;return}this.hasNestedOpenTools=Array.from(this.hostElement.querySelectorAll("z-tool")).some((t=>t.open))}handleColorSelected(t){if(!Array.from(this.hostElement.children).includes(t.target)){return}this.indicatorColor=t.detail;this.open=false;this.setFocus()}handleExternalFocusin(t){const e=t.target;if(!r(this.hostElement,e)){this.open=false}}async setFocus(){if(this.disabled){return}setTimeout((()=>{var t;(t=this.buttonRef)===null||t===void 0?void 0:t.focus()}),50)}async setTabIndex(t){if(!this.buttonRef){return}this.buttonRef.tabIndex=this.disabled?-1:t}async closeTooltip(){clearTimeout(this.hoverDelay);this.tooltipOpen=false}componentWillLoad(){this.hasSlottedContent=this.hostElement.children.length>0;this.isNested=!!this.hostElement.closest("z-tool:not(:scope)");this.mainToolbar=this.hostElement.closest("z-toolbar:not(z-toolbar z-toolbar)");this.hasNestedOpenTools=!!this.hostElement.querySelector("z-tool[open]");this.mql=matchMedia("(max-width: 767px)");this.onMobileViewChange=t=>this.isMobile=t.matches;this.mql.addEventListener("change",this.onMobileViewChange);this.isMobile=this.mql.matches}disconnectedCallback(){var t;clearTimeout(this.hoverDelay);(t=this.mql)===null||t===void 0?void 0:t.removeEventListener("change",this.onMobileViewChange)}render(){return i(o,{key:"877a963cd0017bb4ee4ceee41269a7221c9b5657",class:{"z-tool-tooltip-open":this.tooltipOpen}},i("button",{key:"277956460cb28d4fa82751858e6ec223c60c3742",class:"z-tool",type:"button",ref:t=>this.buttonRef=t,"aria-pressed":this.hasSlottedContent?undefined:this.active?"true":"false","aria-expanded":this.hasSlottedContent?this.open?"true":"false":undefined,"aria-haspopup":this.hasSlottedContent?"true":undefined,"aria-label":this.htmlAriaLabel||this.tooltip||undefined,disabled:this.disabled,onClick:this.handleClick,onMouseEnter:this.handleTooltipOpen,onMouseLeave:this.handleTooltipClose,onFocus:this.handleTooltipOpen,onBlur:this.handleTooltipClose},i("z-icon",{key:"7adc9e77129028185370b067f087190c30ce65b1",ref:t=>this.iconRef=t,name:this.icon,indicatorColor:this.indicatorColor})),this.tooltip&&i("z-tooltip",{key:"1ad7d42bea522fe09f192f6a5437a56aa1c0dfce",class:"z-tool-tooltip",ref:t=>this.tooltipRef=t,bindTo:this.iconRef,open:this.tooltipOpen&&!this.open,position:this.isNested?s.BOTTOM:this.tooltipPosition,dark:true,onMouseLeave:this.handleTooltipClose,onBlur:this.handleTooltipClose,onOpenChange:this.onTooltipOpenChange},i("span",{key:"aa411388fce8b01983fed63a1c27505a53604a8c",class:"body-4"},this.tooltip)),this.hasSlottedContent&&i("z-popover",{key:"018b555d82f0fe05cf1029eabaf645f14f793079",class:"z-tool-submenu",open:this.open,bindTo:this.isMobile&&this.mainToolbar?this.mainToolbar:this.hostElement,center:true,closable:false,position:this.isMobile?s.TOP:s.BOTTOM},i("slot",{key:"cc57b7897e2341151ffa771a0c1d7ed22052faf7"})))}get hostElement(){return n(this)}static get watchers(){return{open:[{handleOpenChange:0}],tooltipOpen:[{handleTooltipOpenChange:0}]}}};f.style=h()+l();export{f as z_tool};
+//# sourceMappingURL=p-38e4e01f.entry.js.map

package/www/build/p-38e4e01f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","typographyCss","ZTool","constructor","hostRef","this","tooltipPosition","PopoverPosition","TOP","active","disabled","open","tooltipOpen","hasSlottedContent","isMobile","hasNestedOpenTools","isNested","handleTooltipOpen","ev","tooltip","buttonRef","contains","target","clearTimeout","hoverDelay","setTimeout","handleTooltipClose","_a","relatedTarget","closest","tooltipRef","handleClick","colorPicker","hostElement","querySelector","setFocus","firstActiveOrEnabledNestedTool","onTooltipOpenChange","event","detail","handleOpenChange","toggleSubmenu","emit","handleTooltipOpenChange","toggleTooltip","handleKeyDown","key","KeyboardCode","ESC","stopPropagation","TAB","shiftKey","onOutsideClick","composedPath","containsElement","onNestedToolToggle","Array","from","querySelectorAll","some","tool","handleColorSelected","children","includes","indicatorColor","handleExternalFocusin","focus","setTabIndex","value","tabIndex","closeTooltip","componentWillLoad","length","mainToolbar","mql","matchMedia","onMobileViewChange","e","matches","addEventListener","disconnectedCallback","removeEventListener","render","h","Host","class","type","ref","el","undefined","htmlAriaLabel","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","iconRef","name","icon","bindTo","position","BOTTOM","dark","onOpenChange","center","closable"],"sources":["src/components/z-tool/styles.css?tag=z-tool&encapsulation=shadow","src/tokens/typography.css?tag=z-tool&encapsulation=shadow","src/components/z-tool/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n.z-tool {\n  --z-tool-size: calc(var(--space-unit) * 5.5);\n  --z-tool-icon-size: calc(var(--space-unit) * 2.5);\n\n  position: relative;\n  display: inline-flex;\n  width: var(--z-tool-size);\n  height: var(--z-tool-size);\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\n:host(:is([active], [open])) .z-tool {\n  box-shadow: inset 0 0 0 2px var(--color-primary01);\n}\n\n:host([open]) .z-tool {\n  background: var(--color-primary03);\n}\n\n@media (hover: hover) {\n  :host(:hover),\n  :host(.z-tool-tooltip-open) {\n    /* ensure any open tooltip is shown over sibling elements */\n    z-index: 1;\n  }\n\n  :host(:not([disabled])) .z-tool:hover {\n    background-color: var(--color-primary03);\n  }\n}\n\n.z-tool:focus:focus-visible {\n  background-color: var(--color-primary03);\n  outline: none;\n}\n\nz-icon {\n  --z-icon-width: var(--z-tool-icon-size);\n  --z-icon-height: var(--z-tool-icon-size);\n\n  display: block;\n  fill: var(--color-default-icon);\n}\n\n:host([disabled]) .z-tool {\n  color: var(--color-disabled01-icon);\n  cursor: not-allowed;\n}\n\n:host([disabled]) z-icon {\n  fill: var(--color-disabled01-icon);\n}\n\n.z-tool-tooltip {\n  --z-tooltip-padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  --z-tooltip-shadow-filter: drop-shadow(0 4px 8px var(--shadow-color-base));\n\n  position: relative;\n  z-index: 2;\n  font-family: var(--font-family-sans);\n  white-space: nowrap;\n}\n\n.z-tool-submenu {\n  z-index: 3;\n  border-radius: calc(var(--border-radius) + var(--border-size-small));\n}\n\n.z-tool-submenu ::slotted(z-color-picker) {\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n@media (max-width: 767px) and (hover: none) {\n  .z-tool-tooltip {\n    display: none !important;\n  }\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ColorPickerPalette, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {ZColorPickerCustomEvent, ZToolCustomEvent, ZTooltipCustomEvent} from \"../../components\";\nimport {IconName} from \"../../constants/iconset\";\nimport {containsElement} from \"../../utils/utils\";\n\n/**\n * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.\n * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.\n */\n@Component({\n  tag: \"z-tool\",\n  styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n  shadow: true,\n})\nexport class ZTool implements ComponentInterface {\n  @Element() hostElement: HTMLZToolElement;\n\n  /** Tool icon */\n  @Prop()\n  icon: IconName;\n\n  /** Text displayed inside the tooltip. */\n  @Prop()\n  tooltip?: string;\n\n  /** Preferred tooltip position. Defaults to true. */\n  @Prop()\n  tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n  /** Accessible label for the tool trigger. Falls back to tooltip content. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Visual active state. */\n  @Prop({reflect: true})\n  active = false;\n\n  /** Disabled state. */\n  @Prop({reflect: true})\n  disabled = false;\n\n  /** Open state. */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * The value of this prop is passed down to the `z-icon` component inside the tool.\n   *\n   * If `z-color-picker` component is used inside the tool's slot, its `colorSelected` event is listened\n   * to automatically update `indicatorColor` and change the color of the icon indicator accordingly.\n   */\n  @Prop({mutable: true})\n  indicatorColor?: string;\n\n  @State()\n  tooltipOpen = false;\n\n  @State()\n  hasSlottedContent = false;\n\n  @State()\n  isMobile = false;\n\n  /** Indicates if the tool has nested open tools. Used to decide whether to auto-close the submenu. */\n  @State()\n  hasNestedOpenTools = false;\n\n  /** Emitted when the open state changes. */\n  @Event()\n  toggleSubmenu: EventEmitter;\n\n  /** Emitted when the tooltip open state changes. */\n  @Event()\n  toggleTooltip: EventEmitter;\n\n  private buttonRef?: HTMLButtonElement;\n\n  private iconRef?: HTMLElement;\n\n  private tooltipRef?: HTMLZTooltipElement;\n\n  private hoverDelay?: ReturnType<typeof setTimeout>;\n\n  /** Indicates if the tool is nested inside another tool. */\n  private isNested = false;\n\n  /** Main `z-toolbar` ancestor element, meant to be the top-level toolbar not nested inside another tool. */\n  private mainToolbar?: HTMLZToolbarElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /**\n   * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.\n   */\n  private handleTooltipOpen = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target as Node)) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.hoverDelay = setTimeout(() => {\n      this.tooltipOpen = true;\n    }, 1000);\n  };\n\n  /**\n   * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.\n   */\n  private handleTooltipClose = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || (ev.relatedTarget as HTMLElement)?.closest(\"z-tooltip\") === this.tooltipRef) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  };\n\n  /**\n   * Handles click events on the tool's button element.\n   * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,\n   * or the first item if no active/selected item is found.\n   */\n  private handleClick = (): void => {\n    if (this.disabled || !this.hasSlottedContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      const colorPicker = this.hostElement.querySelector(\":scope > z-color-picker\") as HTMLZColorPickerElement | null;\n      if (colorPicker) {\n        colorPicker.setFocus();\n\n        return;\n      }\n\n      // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.\n      const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(\n        \":scope > z-toolbar z-tool[active]:not(:disabled)\"\n      ) || this.hostElement.querySelector(\":scope > z-toolbar z-tool:not(:disabled)\")) as HTMLZToolElement | null;\n\n      firstActiveOrEnabledNestedTool?.setFocus();\n    }\n  };\n\n  /**\n   * Handles `openChange` events from the tooltip popover to keep the `tooltipOpen` state in sync, but only if the event is coming from this tool's tooltip (and not from nested tools' tooltips).\n   */\n  private onTooltipOpenChange = (event: ZTooltipCustomEvent<{open: boolean}>): void => {\n    if ((event.target as HTMLElement) === this.tooltipRef) {\n      return;\n    }\n\n    this.tooltipOpen = event.detail.open;\n  };\n\n  @Watch(\"open\")\n  handleOpenChange(): void {\n    this.toggleSubmenu.emit(this.open);\n  }\n\n  @Watch(\"tooltipOpen\")\n  handleTooltipOpenChange(): void {\n    this.toggleTooltip.emit(this.tooltipOpen);\n  }\n\n  /**\n   * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    if (!this.open || this.hasNestedOpenTools) {\n      return;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ESC:\n        event.stopPropagation();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.TAB:\n        if (event.shiftKey && (event.target as Element).closest(\"z-tool:not(:scope)\") === this.hostElement) {\n          this.open = false;\n        }\n        break;\n    }\n  }\n\n  /**\n   * Close the popover on clicks outside the component, only if there are no nested open tools.\n   * In that case any outside click should close the nested submenu(s) first.\n   */\n  @Listen(\"click\", {target: \"body\"})\n  onOutsideClick(event: MouseEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  @Listen(\"toggleSubmenu\")\n  onNestedToolToggle(ev: ZToolCustomEvent<boolean>): void {\n    if (ev.target === this.hostElement) {\n      return;\n    }\n\n    if (ev.detail === true) {\n      this.hasNestedOpenTools = true;\n\n      return;\n    }\n\n    this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll(\"z-tool\")).some((tool) => tool.open);\n  }\n\n  /**\n   * Handles the `colorSelected` event from a nested `z-color-picker` component.\n   * Updates the `indicatorColor` and closes the tool's popover.\n   */\n  @Listen(\"colorSelected\")\n  handleColorSelected(event: ZColorPickerCustomEvent<ColorPickerPalette>): void {\n    if (!Array.from(this.hostElement.children).includes(event.target as Element)) {\n      return;\n    }\n\n    this.indicatorColor = event.detail;\n    this.open = false;\n    this.setFocus();\n  }\n\n  /**\n   * Close the submenu when focus moves outside the tool.\n   */\n  @Listen(\"focusin\", {target: \"body\", passive: true})\n  handleExternalFocusin(ev: FocusEvent): void {\n    const target = ev.target as Node;\n    if (!containsElement(this.hostElement, target)) {\n      this.open = false;\n    }\n  }\n\n  /** Focuses the tool's button element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.disabled) {\n      return;\n    }\n\n    setTimeout(() => {\n      this.buttonRef?.focus();\n    }, 50);\n  }\n\n  /** Sets the tab index of the tool's internal button element. */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    if (!this.buttonRef) {\n      return;\n    }\n\n    this.buttonRef.tabIndex = this.disabled ? -1 : value;\n  }\n\n  /** Closes the tooltip. */\n  @Method()\n  async closeTooltip(): Promise<void> {\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  }\n\n  componentWillLoad(): void {\n    this.hasSlottedContent = this.hostElement.children.length > 0;\n    this.isNested = !!this.hostElement.closest(\"z-tool:not(:scope)\");\n    this.mainToolbar = this.hostElement.closest(\"z-toolbar:not(z-toolbar z-toolbar)\");\n    this.hasNestedOpenTools = !!this.hostElement.querySelector(\"z-tool[open]\");\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    clearTimeout(this.hoverDelay);\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  render(): HTMLZToolElement {\n    return (\n      <Host class={{\"z-tool-tooltip-open\": this.tooltipOpen}}>\n        <button\n          class=\"z-tool\"\n          type=\"button\"\n          ref={(el) => (this.buttonRef = el)}\n          aria-pressed={this.hasSlottedContent ? undefined : this.active ? \"true\" : \"false\"}\n          aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n          aria-haspopup={this.hasSlottedContent ? \"true\" : undefined}\n          aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          onMouseEnter={this.handleTooltipOpen}\n          onMouseLeave={this.handleTooltipClose}\n          onFocus={this.handleTooltipOpen}\n          onBlur={this.handleTooltipClose}\n        >\n          <z-icon\n            ref={(el) => (this.iconRef = el)}\n            name={this.icon}\n            indicatorColor={this.indicatorColor}\n          ></z-icon>\n        </button>\n        {this.tooltip && (\n          <z-tooltip\n            class=\"z-tool-tooltip\"\n            ref={(el) => (this.tooltipRef = el)}\n            bindTo={this.iconRef}\n            open={this.tooltipOpen && !this.open}\n            position={this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition}\n            dark\n            onMouseLeave={this.handleTooltipClose}\n            onBlur={this.handleTooltipClose}\n            onOpenChange={this.onTooltipOpenChange}\n          >\n            <span class=\"body-4\">{this.tooltip}</span>\n          </z-tooltip>\n        )}\n        {this.hasSlottedContent && (\n          <z-popover\n            class=\"z-tool-submenu\"\n            open={this.open}\n            bindTo={this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement}\n            center\n            /* disable auto-close to prevent unwanted close behaviors on mobile,\n            when the bound element is the main toolbar */\n            closable={false}\n            position={this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM}\n          >\n            <slot></slot>\n          </z-popover>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}