@zanichelli/albe-web-components 12.1.3-rc.0 → 12.1.3

package/dist/cjs/z-link.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-link.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,07EAA07E,CAAC;AAC78E,oBAAe,SAAS;;MCWX,KAAK;IA0DhB;;;;;sBA/CkB,OAAO;4BAID,CAAC;0BAIF,KAAK;wBAIP,KAAK;uBAIN,KAAK;yBAI+B,SAAS;;mBAQjD,KAAK;4BAIa,MAAM;yBAIlB,KAAK;wBAShB,EAAE;QAGX,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,CAAC,IAAI,CACV,4GAA4G,CAC7G,CAAC;SACH;QACD,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,OAAO,CAAC,IAAI,CACV,gJAAgJ,CACjJ,CAAC;SACH;KACF;IAEO,cAAc,CAAC,CAAa,EAAE,MAAM;QAC1C,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;KACtC;IAEO,oBAAoB,CAAC,CAAQ,EAAE,MAAc;QACnD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,CAAC,EAAE,MAAM,EAAC,CAAC,CAAC;KACnC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,MAAM,GAAW,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;YAC3G,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;gBAC/D,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;aAC7B;SACF;KACF;IAED,MAAM;QACJ,QACEA,gEACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EAClC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,UAAU;gBACzB,MAAM,EAAE,IAAI,CAAC,QAAQ;gBACrB,KAAK,EAAE,IAAI,CAAC,OAAO;gBACnB,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,GAAG,IAAI;gBAC5B,SAAS,EAAE,IAAI,CAAC,SAAS;aAC1B,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,EACnC,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,EAClD,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,IAE9D,IAAI,CAAC,YAAY,KAAK,OAAO,IAAIA,qBAAQ,EACzC,IAAI,CAAC,IAAI,KACRA,oBACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI;gBACtC,iBAAiB,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI;aACxC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH,EACA,IAAI,CAAC,YAAY,KAAK,MAAM,IAAIA,qBAAQ,CACvC,EACJ;KACH;;;;;;;","names":["h"],"sources":["src/deprecated/z-link/styles.css?tag=z-link&encapsulation=shadow","src/deprecated/z-link/index.tsx"],"sourcesContent":[":host {\n  --font-size-link: inherit;\n  --font-weight-link: inherit;\n\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-link);\n  font-weight: var(--font-weight-link);\n  line-height: inherit;\n  outline: none;\n}\n\n:host([big]) {\n  --font-size-link: 16px;\n  --font-weight-link: var(--font-sb);\n}\n\na {\n  display: inline-flex;\n  align-items: center;\n  padding: calc(var(--space-unit) / 2) 0;\n  border-top: var(--border-size-medium) solid transparent;\n  border-bottom: var(--border-size-medium) solid transparent;\n  color: var(--color-link-primary);\n  cursor: pointer;\n  fill: var(--color-link-primary);\n  text-decoration: none;\n}\n\na:hover,\na:focus,\na:active {\n  text-decoration: underline;\n}\n\na.active {\n  color: var(--color-active-link);\n  fill: var(--color-active-link);\n}\n\na:hover,\na:focus {\n  color: var(--color-hover-link);\n  fill: var(--color-hover-link);\n}\n\na:active {\n  color: var(--color-pressed-link);\n  fill: var(--color-pressed-link);\n}\n\na:visited {\n  color: var(--color-visited-link);\n  fill: var(--color-visited-link);\n}\n\na.disabled,\na.inverse.disabled {\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  pointer-events: none;\n}\n\na.underline,\na.underline:active,\na.underline:hover,\na.underline:visited,\na.underline.disabled,\na.underline.black,\na.underline.white {\n  text-decoration: underline;\n}\n\na.disabled,\na.disabled:active,\na.disabled:visited,\na.disabled:hover {\n  text-decoration: none;\n}\n\na.inverse {\n  color: var(--color-inverse-link);\n  fill: var(--color-inverse-link);\n}\n\na.inverse.active {\n  color: var(--color-inverse-active-link);\n  fill: var(--color-inverse-active-link);\n}\n\na.inverse:hover,\na.inverse:focus {\n  color: var(--color-inverse-hover-link);\n  fill: var(--color-inverse-hover-link);\n}\n\na.inverse:active {\n  color: var(--color-inverse-pressed-link);\n  fill: var(--color-inverse-pressed-link);\n}\n\na.inverse:visited {\n  color: var(--color-inverse-visited-link);\n  fill: var(--color-inverse-visited-link);\n}\n\na.black {\n  color: var(--gray800);\n  fill: var(--gray800);\n  text-decoration: none;\n}\n\na.black:hover,\na.black.active {\n  color: var(--color-black);\n  fill: var(--color-black);\n}\n\na.black:visited {\n  color: var(--gray800);\n  fill: var(--gray800);\n}\n\na.black:hover,\na.black:focus,\na.black:active {\n  text-decoration: underline;\n}\n\na.black:active {\n  color: var(--gray700);\n  fill: var(--gray700);\n}\n\na.white,\na.white:active,\na.white:hover,\na.white.active {\n  color: var(--color-white);\n  fill: var(--color-white);\n  text-decoration: none;\n}\n\na.white:visited {\n  color: var(--color-white);\n  fill: var(--color-white);\n}\n\na.white:hover,\na.white:focus,\na.white:active {\n  text-decoration: underline;\n}\n\na.white.disabled,\na.black.disabled {\n  color: var(--gray500);\n  fill: var(--gray500);\n}\n\na > z-icon:first-child {\n  margin-right: var(--space-unit);\n}\n\na > z-icon:last-child {\n  margin-left: var(--space-unit);\n}\n","import {Component, Prop, h, Event, EventEmitter, Element} from \"@stencil/core\";\nimport {State} from \"@stencil/core/internal\";\n\n/**\n * @deprecated - use a native `<a>` with the `z-link` CSS class instead\n * @slot - link content\n */\n@Component({\n  tag: \"z-link\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZLink {\n  /** link id (optional) */\n  @Prop()\n  htmlid?: string;\n\n  /** link url (optional) */\n  @Prop()\n  href?: string;\n\n  /** link target (optional) */\n  @Prop()\n  target?: string = \"_self\";\n\n  /** tabindex link attribute (optional) */\n  @Prop()\n  htmltabindex?: number = 0;\n\n  /** disable link flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** active link flag (optional) */\n  @Prop()\n  isactive?: boolean = false;\n\n  /** white variant flag (optional) */\n  @Prop()\n  iswhite?: boolean = false;\n\n  /** link text variant (optional) */\n  @Prop()\n  textcolor?: \"primary\" | \"inverse\" | \"white\" | \"black\" = \"primary\";\n\n  /** link icon name (optional) */\n  @Prop()\n  icon?: string;\n\n  /** big link version */\n  @Prop({reflect: true})\n  big?: boolean = false;\n\n  /** link icon position (optional) */\n  @Prop()\n  iconposition?: \"left\" | \"right\" = \"left\";\n\n  /** draw underline on text (optional) */\n  @Prop()\n  underline?: boolean = false;\n\n  /** emitted on link click, returns linkId */\n  @Event()\n  zLinkClick: EventEmitter;\n\n  @Element() hostElement: HTMLZLinkElement;\n\n  @State()\n  iconSize = 18;\n\n  constructor() {\n    this.emitZLinkClick = this.emitZLinkClick.bind(this);\n    this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);\n  }\n\n  componentWillLoad(): void {\n    if (this.iswhite) {\n      console.warn(\n        \"z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead\"\n      );\n    }\n    if (this.big) {\n      console.warn(\n        \"z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead\"\n      );\n    }\n  }\n\n  private emitZLinkClick(e: MouseEvent, linkId): void {\n    this.emitZLinkInteraction(e, linkId);\n  }\n\n  private emitZLinkInteraction(e: Event, linkId: string): void {\n    this.zLinkClick.emit({e, linkId});\n  }\n\n  componentDidLoad(): void {\n    if (this.icon) {\n      const height: number = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue(\"font-size\"));\n      const currentSize = this.big ? 18 : Math.round(height * 1.125);\n      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {\n        this.iconSize = currentSize;\n      }\n    }\n  }\n\n  render(): HTMLAnchorElement {\n    return (\n      <a\n        id={this.htmlid}\n        href={this.href ? this.href : null}\n        class={{\n          disabled: this.isdisabled,\n          active: this.isactive,\n          white: this.iswhite,\n          [this.textcolor || \"\"]: true,\n          underline: this.underline,\n        }}\n        target={this.target}\n        role={this.href ? \"link\" : \"button\"}\n        tabindex={this.isdisabled ? -1 : this.htmltabindex}\n        onClick={(e: MouseEvent) => this.emitZLinkClick(e, this.htmlid)}\n      >\n        {this.iconposition === \"right\" && <slot />}\n        {this.icon && (\n          <z-icon\n            style={{\n              \"--z-icon-width\": `${this.iconSize}px`,\n              \"--z-icon-height\": `${this.iconSize}px`,\n            }}\n            name={this.icon}\n          />\n        )}\n        {this.iconposition === \"left\" && <slot />}\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-logo.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-logo.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,k1IAAk1I,CAAC;AACr2I,oBAAe,SAAS;;MCMX,KAAK;;;;;;;;;;IAyBhB,MAAM;QACJ,MAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;SACzD;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;SAC5D;QAED,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAC,IAEjC,IAAI,CAAC,IAAI,IACRD,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,OAAO,IAE7CA,iBAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACzB,KAEJA,iBAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5B,CACI,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/logo/z-logo/styles.css?tag=z-logo&encapsulation=shadow","src/components/logo/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\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, Prop, Host, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-logo\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZLogo {\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"],"version":3}

package/dist/cjs/z-menu-section.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-menu-section.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,k8DAAk8D,CAAC;AACr9D,2BAAe,SAAS;;MCWX,YAAY;;;;;;;;;IAqBf,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACrD;;IAID,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE;YAC9D,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;;;;IAKO,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACjF;;;;;IAMO,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;KAC7D;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,IAEfD,qEACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/BA,mEAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,EAC7D,IAAI,CAAC,UAAU,IAAIA,oBAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,GAAI,CACxE,EACR,IAAI,CAAC,IAAI,KACRA,iBAAK,KAAK,EAAC,OAAO,IAChBA,kBACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/navigation/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/navigation/z-menu-section/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-text01);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-secondary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-icon02);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-secondary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, h, Prop, State, Event, EventEmitter, Element, Listen, Host} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() hostElement: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-menu.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-menu.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/navigation/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/navigation/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n\n  --z-menu-label-color: var(--color-text01);\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-text01);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  outline: none;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-within {\n  z-index: 1;\n  padding-right: calc(var(--space-unit) * 0.5);\n  padding-left: calc(var(--space-unit) * 0.5);\n  margin-right: calc(var(--space-unit) * -0.5);\n  margin-left: calc(var(--space-unit) * -0.5);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n  font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(*),\n.menu-label:focus-within .menu-label-content ::slotted(*) {\n  letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible) {\n  box-shadow: none !important;\n}\n\n/* border */\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  content: \"\";\n  pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n  height: var(--border-size-small);\n  background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  height: var(--border-size-large);\n  background-color: var(--color-secondary01);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-5);\n  font-weight: inherit;\n  letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */\n  line-height: 1.2;\n  outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(*),\n.menu-label .menu-label-content z-icon {\n  padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: currentcolor;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n  border-color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch, Host} from \"@stencil/core\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu {\n  @Element() hostElement: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = false;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  private content: HTMLElement;\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the floating list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.floating || !this.open || this.hostElement.contains(ev.target as Element)) {\n      return;\n    }\n\n    this.reflow();\n    this.open = false;\n    this.closed.emit();\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (this.open) {\n      this.reflow(true);\n    } else {\n      cancelAnimationFrame(this.raf);\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (this.content) {\n      const {style} = this.content;\n      const {left} = this.hostElement.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  /**\n   * Set `menuitem` role to all menu items.\n   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n   */\n  private onItemsChange(): void {\n    this.checkContent();\n    const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n    items.forEach((item) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.dataset.text = item.textContent;\n    });\n  }\n\n  private renderMenuLabel(): HTMLButtonElement | HTMLDivElement {\n    if (this.hasContent) {\n      return (\n        <button\n          class=\"menu-label\"\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          onClick={this.toggle}\n        >\n          <div class=\"menu-label-content\">\n            <slot onSlotchange={this.onLabelSlotChange}></slot>\n            <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n          </div>\n        </button>\n      );\n    }\n\n    return (\n      <div class=\"menu-label\">\n        <div class=\"menu-label-content\">\n          <slot onSlotchange={this.onLabelSlotChange}></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZMenuElement {\n    return (\n      <Host>\n        {this.renderMenuLabel()}\n\n        {this.hasContent && (\n          <div\n            class=\"content\"\n            ref={(el) => (this.content = el)}\n          >\n            {this.hasHeader && (\n              <header class=\"header\">\n                <slot\n                  name=\"header\"\n                  onSlotchange={this.checkContent}\n                ></slot>\n              </header>\n            )}\n\n            <div\n              class=\"items\"\n              role=\"menu\"\n            >\n              <slot\n                name=\"item\"\n                onSlotchange={this.onItemsChange}\n              ></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-messages-pocket.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-messages-pocket.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ytDAAytD,CAAC;AAC5uD,8BAAe,SAAS;;MCUX,eAAe;;;;;sBAWHA,oBAAY,CAAC,OAAO;;IAG3C,kBAAkB,CAAC,CAAc;QAC/B,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,EAAE;YACjC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;SAC/B;KACF;IAEO,YAAY;QAClB,IAAI,OAAoB,CAAC;QACzB,IAAI,IAAY,CAAC;QACjB,QAAQ,IAAI,CAAC,MAAM;YACjB,KAAKA,oBAAY,CAAC,OAAO,CAAC;YAC1B,KAAKA,oBAAY,CAAC,MAAM;gBACtB,OAAO,IACLC,mCACWA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAC9C,CACR,CAAC;gBACF,IAAI,GAAG,YAAY,CAAC;gBACpB,MAAM;YACR,KAAKD,oBAAY,CAAC,IAAI;gBACpB,OAAO,GAAGC,+BAAmB,CAAC;gBAC9B,IAAI,GAAG,cAAc,CAAC;gBACtB,MAAM;SACT;QAED,QACEA,6BAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACrC,OAAO,EACRA,oBACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACc,EAClB;KACH;IAEO,UAAU;QAChB,QACEA,2BAAe,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACpCA,iBAAK,KAAK,EAAC,MAAM,IACfA,qBAAQ,CACJ,EACNA,iBAAK,KAAK,EAAC,UAAU,GAAG,CACV,EAChB;KACH;IAED,MAAM;QACJ,QACEA,uEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,MAAM,IAEjB,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,UAAU,EAAE,CACT,EACX;KACH;;;;;;","names":["PocketStatus","h"],"sources":["src/snowflakes/myz/pocket/z-messages-pocket/styles.css?tag=z-messages-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-messages-pocket/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-pocket {\n  width: 100%;\n}\n\n:host > z-pocket.closed {\n  width: 158px;\n}\n\n:host > z-pocket > z-pocket-header {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n}\n\n:host > z-pocket > z-pocket-header span.badge {\n  display: inline-block;\n  padding: 0 calc(var(--space-unit) * 0.5);\n  margin-left: var(--space-unit);\n  background: var(--color-secondary02);\n  border-radius: 50%;\n  color: var(--color-surface01);\n}\n\n:host > z-pocket > z-pocket-header > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > z-pocket > z-pocket-body > div.body {\n  overflow: hidden;\n  padding: var(--space-unit);\n  margin: 0 var(--space-unit);\n}\n\n:host > z-pocket.preview > z-pocket-body {\n  position: relative;\n}\n\n:host > z-pocket.preview > z-pocket-body > div.gradient {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-image: linear-gradient(rgb(255 0 0 / 0%), white);\n}\n\n:host > z-pocket.open > z-pocket-body > div.body {\n  overflow: auto;\n  max-height: calc(100vh - 166px);\n  scrollbar-width: none;\n}\n\n:host ::-webkit-scrollbar {\n  width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > z-pocket {\n    width: 768px;\n    margin: 0 calc((100% - 768px) / 2);\n  }\n\n  :host > z-pocket.closed {\n    margin: 0 calc((100% - 158px) / 2);\n  }\n\n  :host > z-pocket.open > z-pocket-body > div.body {\n    max-height: 326px;\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1152px) {\n  :host > z-pocket.open > z-pocket-body > div.body {\n    scrollbar-color: var(--color-primary01) var(--color-surface03);\n    scrollbar-width: thin;\n  }\n\n  :host ::-webkit-scrollbar {\n    width: 10px;\n    background: linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );\n    border-radius: var(--border-radius);\n  }\n\n  :host ::-webkit-scrollbar-thumb {\n    width: var(--space-unit);\n    background-color: var(--color-primary01);\n    border-radius: var(--border-radius);\n  }\n}\n","import {Component, Prop, h, Listen /* , State */} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot  - pocket body content\n */\n@Component({\n  tag: \"z-messages-pocket\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMessagesPocket {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** number of messages */\n  @Prop()\n  messages: number;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  @Listen(\"pocketToggle\", {target: \"body\"})\n  handlePocketToggle(e: CustomEvent): void {\n    if (e.detail.id === this.pocketid) {\n      this.status = e.detail.status;\n    }\n  }\n\n  private renderHeader(): HTMLZPocketHeaderElement {\n    let message: HTMLElement;\n    let icon: string;\n    switch (this.status) {\n      case PocketStatus.PREVIEW:\n      case PocketStatus.CLOSED:\n        message = (\n          <span>\n            Messaggi <span class=\"badge\">{this.messages}</span>\n          </span>\n        );\n        icon = \"chevron-up\";\n        break;\n      case PocketStatus.OPEN:\n        message = <span>Riduci</span>;\n        icon = \"chevron-down\";\n        break;\n    }\n\n    return (\n      <z-pocket-header pocketid={this.pocketid}>\n        {message}\n        <z-icon\n          name={icon}\n          width={14}\n          height={14}\n        />\n      </z-pocket-header>\n    );\n  }\n\n  private renderBody(): HTMLZPocketBodyElement {\n    return (\n      <z-pocket-body pocketid={this.pocketid}>\n        <div class=\"body\">\n          <slot />\n        </div>\n        <div class=\"gradient\" />\n      </z-pocket-body>\n    );\n  }\n\n  render(): HTMLZPocketElement {\n    return (\n      <z-pocket\n        pocketid={this.pocketid}\n        status={this.status}\n        class={this.status}\n      >\n        {this.renderHeader()}\n        {this.renderBody()}\n      </z-pocket>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-myz-card-alert.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card-alert.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,u7BAAu7B,CAAC;AAC18B,4BAAe,SAAS;;MCOX,aAAa;;;;;;;;;IAqBhB,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;KAC/C;IAEO,mBAAmB,CAAC,CAAgB;QAC1C,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,SAAS,GAAG,WAAW,CAAC;gBACxB,MAAM;YACR,KAAK,QAAQ;gBACX,SAAS,GAAG,cAAc,CAAC;gBAC3B,MAAM;YACR;gBACE,SAAS,GAAG,EAAE,CAAC;gBACf,MAAM;SACT;QAED,OAAO,SAAS,CAAC;KAClB;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAOA,iBAAS,CAAC,OAAO,CAAC;YAC3B,KAAK,QAAQ;gBACX,OAAOA,iBAAS,CAAC,OAAO,CAAC;YAC3B;gBACE,OAAO,IAAI,CAAC;SACf;KACF;IAED,MAAM;QACJ,QACEC,kEAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,IAC1DA,sEAAS,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAChCA,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,qEACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,GACnB,EACVA,mEAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACnD,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KACjDA,kBACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;aACjC,EACD,UAAU,EAAE,CAAC,CAAgB;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;aAC7B,IAEA,IAAI,CAAC,UAAU,CACX,CACR,CACG,CACE,CACN,EACN;KACH;;;;;;","names":["AlertType","h"],"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-surface02);\n  border-top: none;\n}\n\n:host div.add-alert {\n  background: var(--color-success-inverse);\n}\n\n:host div.remove-alert {\n  background: var(--color-warning-inverse);\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, Prop, h, Event, EventEmitter} 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 {\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"],"version":3}

package/dist/cjs/z-myz-card-dictionary.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card-dictionary.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,8lCAA8lC,CAAC;AACjnC,iCAAe,SAAS;;MCWX,kBAAkB;;;;;;wBAWlB,KAAK;uBAIN,KAAK;+BAIG,MAAM;2BAIV,KAAK;;IAGnB,cAAc,CAAC,CAAc;QAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KACzB;IAMO,QAAQ,CAAC,QAAQ,GAAG,IAAI;QAC9B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAED,MAAM;QACJ,QACEA,oEACEA,2EACEA,gFAAmB,MAAM,EAAE,IAAI,CAAC,IAAI,GAAsB,EAC1DA,kEAAK,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,IACpDA,kEAAK,KAAK,EAAC,OAAO,IAChBA,gFACEA,+EACE,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,GACpB,CACc,EAClBA,uEACE,KAAK,EAAE,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,EAAC,EACtC,OAAO,EAAEC,qBAAa,CAAC,SAAS,EAChC,IAAI,EAAC,mBAAmB,EACxB,IAAI,EAAEC,kBAAU,CAAC,OAAO,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,IAErB,IAAI,CAAC,eAAe,CACZ,CACP,EACNF,kEAAK,KAAK,EAAC,MAAM,IACfA,mEAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACNA,oEAAQ,CACG,CACT,EACN;KACH;;;;;;","names":["h","ButtonVariant","ButtonSize"],"sources":["src/snowflakes/myz/card/z-myz-card-dictionary/styles.css?tag=z-myz-card-dictionary&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-dictionary/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host z-myz-card {\n  --card-overflow: visible;\n}\n\n:host > div {\n  position: relative;\n  width: 100%;\n  height: 522px;\n  transition: -webkit-transform 0.5s ease-out;\n  transition: transform 0.5s ease-out;\n  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content {\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 522px;\n  transform-style: preserve-3d;\n  transition: -webkit-transform 0.5s ease-out;\n  transition: transform 0.5s ease-out;\n  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content.flipped {\n  margin-top: -2px;\n  transform: rotateY(180deg);\n}\n\n:host > div .front,\n:host > div .back {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n}\n\n:host > div .front {\n  z-index: 2;\n  top: 0;\n  left: 0;\n  transform: rotateY(0deg);\n}\n\n:host > div .front z-button {\n  position: absolute;\n  z-index: 3;\n  top: calc(var(--space-unit) * 0.5);\n  left: calc(-1 * var(--space-unit));\n}\n\n:host > div .back {\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  padding: 0 var(--space-unit);\n  margin-left: calc(-1 * var(--space-unit));\n  transform: rotateY(180deg);\n}\n\n.hide-info {\n  display: none;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter} from \"@stencil/core\";\nimport {ButtonSize, ButtonVariant} from \"../../../../beans\";\n\n/**\n * @slot  - generic card slot\n * @slot info - flipped card info\n */\n@Component({\n  tag: \"z-myz-card-dictionary\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardDictionary {\n  /** card title */\n  @Prop()\n  name: string;\n\n  /** card cover */\n  @Prop()\n  cover: string;\n\n  /** card is disabled */\n  @Prop()\n  disabled = false;\n\n  /** card is flipped */\n  @Prop({mutable: true})\n  flipped = false;\n\n  /** flip button label */\n  @Prop()\n  flipbuttonlabel = \"INFO\";\n\n  /** hide info button */\n  @Prop()\n  hideinfobtn = false;\n\n  @Listen(\"flipCard\")\n  handleFlipCard(e: CustomEvent): void {\n    this.flipCard(e.detail);\n  }\n\n  /** when card is flipped */\n  @Event()\n  cardFlipped: EventEmitter;\n\n  private flipCard(showBack = true): void {\n    this.flipped = showBack;\n    this.cardFlipped.emit(showBack);\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <z-myz-card>\n          <z-myz-card-header titolo={this.name}></z-myz-card-header>\n          <div class={`content ${this.flipped ? \"flipped\" : \"\"}`}>\n            <div class=\"front\">\n              <z-myz-card-body>\n                <z-myz-card-cover\n                  slot=\"cover\"\n                  titolo={this.name}\n                  img={this.cover}\n                  faded={this.disabled}\n                />\n              </z-myz-card-body>\n              <z-button\n                class={{\"hide-info\": this.hideinfobtn}}\n                variant={ButtonVariant.SECONDARY}\n                icon=\"informationsource\"\n                size={ButtonSize.X_SMALL}\n                onClick={() => this.flipCard(true)}\n                disabled={this.flipped}\n              >\n                {this.flipbuttonlabel}\n              </z-button>\n            </div>\n            <div class=\"back\">\n              <slot name=\"info\" />\n            </div>\n          </div>\n          <slot />\n        </z-myz-card>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-myz-card-footer-sections.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card-footer-sections.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,+aAA+a,CAAC;AAClc,qCAAe,SAAS;;MCUX,sBAAsB;;;;IACjC,MAAM;QACJ,QACEA,oEACEA,uEACEA,kEAAK,KAAK,EAAC,KAAK,IACdA,mEAAM,IAAI,EAAC,KAAK,GAAG,CACf,EACNA,kEAAK,KAAK,EAAC,QAAQ,IACjBA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACC,CACL,EACN;KACH;;;;;;","names":["h"],"sources":["src/snowflakes/myz/card/z-myz-card-footer-sections/styles.css?tag=z-myz-card-footer-sections&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-footer-sections/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div > footer {\n  height: 128px;\n  box-sizing: border-box;\n  padding: var(--space-unit) calc(var(--space-unit) * 2) 0;\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n  color: var(--color-surface05);\n  font-size: 16px;\n  line-height: 24px;\n}\n\n:host > div > footer > div.top,\n:host > div > footer > div.bottom {\n  height: 60px;\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot top - footer top content\n * @slot bottom - footer bottom content\n */\n@Component({\n  tag: \"z-myz-card-footer-sections\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardFooterSections {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <footer>\n          <div class=\"top\">\n            <slot name=\"top\" />\n          </div>\n          <div class=\"bottom\">\n            <slot name=\"bottom\" />\n          </div>\n        </footer>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-myz-card-footer.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card-footer.entry.cjs.js","mappings":"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","names":["LicenseType","h"],"sources":["src/snowflakes/myz/card/z-myz-card-footer/styles.css?tag=z-myz-card-footer&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-footer/index.tsx"],"sourcesContent":["footer {\n  position: relative;\n  z-index: 5;\n  top: 0;\n  width: auto;\n  height: calc(var(--space-unit) * 6);\n  padding: 0;\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  margin: 0;\n  background-color: var(--color-surface01);\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  transition: height 500ms ease-in-out, top 500ms ease-in-out;\n}\n\nfooter.real,\nfooter.trial,\nfooter.temp {\n  border-top: var(--border-size-medium) solid var(--blue100);\n}\n\nfooter .bold {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-sb);\n}\n\nfooter > p {\n  overflow: hidden;\n  height: 40px;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);\n  margin: 0;\n  background-color: var(--color-surface01);\n  font-family: var(--font-family-sans);\n  font-size: 16px;\n  font-weight: var(--font-rg);\n  line-height: 22px;\n  transition: all 200ms linear;\n}\n\nfooter.isopen > p {\n  background-color: var(--gray200);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  transition: all 200ms linear;\n}\n\nfooter.isopen.real > p,\nfooter.isopen.trial > p,\nfooter.isopen.temp > p {\n  background-color: var(--blue100);\n}\n\nfooter .visible {\n  display: block;\n}\n\nfooter .hidden {\n  display: none;\n}\n\nfooter > div.content {\n  overflow: hidden;\n  height: 60px;\n}\n\nfooter > div.content > div:not(.slot-handler) {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nfooter > div.content > div > p {\n  overflow: hidden;\n  height: 20px;\n  padding: 0;\n  margin: 0;\n  font-size: 14px;\n  line-height: 20px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nfooter > div.content > div > p.year-isbn {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: var(--space-unit);\n}\n\nfooter > div.content > div > p.year-isbn > span.isbn {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nfooter.isopen > div.content > div:not(.slot-handler) {\n  height: 68px;\n}\n\nfooter.isopen > div.content > div > p.authors {\n  height: 40px;\n  text-overflow: initial;\n  white-space: initial;\n}\n\nfooter.isopen > div.content > div > p.year-isbn {\n  height: 50px;\n  flex-direction: column;\n  padding-left: 0;\n}\n\nfooter.isopen > div.content > div > p.year-isbn > span.isbn {\n  display: inline-grid;\n  padding-left: 0;\n}\n\nfooter.isopen {\n  top: -212px;\n  height: 295px;\n  transition: height 500ms ease-in-out, top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content {\n  top: -292px;\n}\n\nfooter.isopen > div.content {\n  height: 280px;\n  transition: height 500ms ease-in-out, top 500ms ease-in-out;\n}\n\nfooter.isopen.custom-content > div.content {\n  height: 230px;\n}\n\n.toggle {\n  position: absolute;\n  z-index: 10;\n  top: -24px;\n  left: 16px;\n}\n\n.faded {\n  opacity: 0.3;\n  pointer-events: none;\n}\n\nfooter > p.custom-content,\nfooter .content.custom-content {\n  display: none;\n}\n\nfooter.isopen > p.custom-content,\nfooter.isopen .content.custom-content {\n  display: block;\n}\n\ndiv.wrapper {\n  position: relative;\n  height: 100%;\n}\n\ndiv.wrapper ::slotted([slot=\"content\"]) {\n  position: absolute;\n  z-index: 10;\n  top: calc(var(--space-unit) * 2);\n  display: block;\n  width: 100%;\n  height: 112px;\n  box-sizing: border-box;\n  padding: 0 calc(var(--space-unit) * 2);\n  border-top: var(--border-size-medium) solid transparent;\n  background: var(--color-white);\n}\n\ndiv.wrapper.isopen ::slotted([slot=\"content\"]) {\n  top: 0;\n  bottom: 0;\n  height: 128px;\n  padding: calc(var(--space-unit) * 2);\n  border-color: var(--blue100);\n}\n","import {Element, Component, Prop, h, State, Listen} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot toggle - toggle button slot\n * @slot list - card resources list slot\n */\n@Component({\n  tag: \"z-myz-card-footer\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardFooter {\n  @Element() host: HTMLZMyzCardFooterElement;\n\n  /** volume title */\n  @Prop()\n  titolo: string;\n\n  /** authors name text */\n  @Prop()\n  autori: string;\n\n  /** volume isbn */\n  @Prop()\n  isbn: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** card graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  /** footer opened by default (optional) */\n  @Prop()\n  opened?: boolean = false;\n\n  /** display footer custom slotted content */\n  @Prop()\n  customContent = false;\n\n  @State()\n  isOpen = false;\n\n  @State()\n  allowTooltipAuthors = false;\n\n  private ellipsisAuthors?: HTMLElement;\n\n  @Listen(\"toggleClick\")\n  handleToggle(): void {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      const firstElem = this.getFirstListItem();\n      if (firstElem) {\n        requestAnimationFrame(() => {\n          firstElem.focus();\n        });\n      }\n    }\n  }\n\n  private getTitleAuthors(): string {\n    return this.allowTooltipAuthors ? this.autori : \"\";\n  }\n\n  componentWillLoad(): void {\n    if (this.opened) {\n      this.isOpen = true;\n    }\n  }\n\n  private elementsEllipsis(): void {\n    this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;\n  }\n\n  private elementAuthorsHasEllipsis(): boolean {\n    return this.ellipsisAuthors.offsetWidth < this.ellipsisAuthors.scrollWidth;\n  }\n\n  private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n    return {\n      \"isopen\": this.isOpen,\n      \"real\": this.cardtype === LicenseType.REAL,\n      \"trial\": this.cardtype === LicenseType.TRIAL,\n      \"temp\": this.cardtype === LicenseType.TEMP,\n      \"custom-content\": this.customContent,\n    };\n  }\n\n  private footerTransitionHandler(e: TransitionEvent): void {\n    if ([\"visibility\", \"height\"].includes(e.propertyName)) {\n      this.elementsEllipsis();\n    }\n  }\n\n  private getFirstListItem(): HTMLElement {\n    return this.host.querySelector(\"[slot=list] > li a\");\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class={{...(this.retrieveClass() as Record<string, boolean>), wrapper: true}}>\n        <footer\n          class={this.retrieveClass()}\n          onTransitionEnd={(e: TransitionEvent) => this.footerTransitionHandler(e)}\n        >\n          <span class=\"toggle\">\n            <slot name=\"toggle\" />\n          </span>\n          {this.titolo && <p class={{\"custom-content\": this.customContent}}>{this.titolo}</p>}\n          <div class={{\"content\": true, \"custom-content\": this.customContent}}>\n            <div>\n              <p\n                class=\"authors\"\n                ref={(el) => (this.ellipsisAuthors = el as HTMLElement)}\n              >\n                <span title={this.getTitleAuthors()}>\n                  <span\n                    aria-description=\"Autori\"\n                    class=\"bold\"\n                  >\n                    {this.autori}\n                  </span>\n                </span>\n              </p>\n              <p class=\"year-isbn\">\n                <span class=\"isbn\">\n                  <span>\n                    <span\n                      aria-description=\"ISBN edizione cartacea\"\n                      class=\"bold\"\n                    >\n                      {this.isbn}\n                    </span>{\" \"}\n                    (ed. cartacea)\n                  </span>\n                </span>\n              </p>\n            </div>\n            <div class={`slot-handler ${this.isOpen ? \"visible\" : \"hidden\"}`}>\n              <slot name=\"list\" />\n            </div>\n          </div>\n        </footer>\n        {this.customContent && <slot name=\"content\" />}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-myz-card-icon.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card-icon.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,mmCAAmmC,CAAC;AACtnC,2BAAe,SAAS;;MCMX,YAAY;;;;0BAOV,KAAK;yBAIN,EAAE;;IAEd,MAAM;QACJ,QACEA,qEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,gBACb,IAAI,CAAC,SAAS,IAE1BA,qEACEA,qEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACG,CACA,EACT;KACH;;;;;;","names":["h"],"sources":["src/snowflakes/myz/card/z-myz-card-icon/styles.css?tag=z-myz-card-icon&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-icon/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  width: 42px;\n  width: calc(var(--space-unit) * 6);\n  height: calc(var(--space-unit) * 5);\n  height: calc(var(--space-unit) * 6);\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-left: var(--border-size-medium) solid var(--color-surface03);\n  margin: 0;\n  background: none;\n  border-radius: 0 var(--border-radius) 0 0;\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  outline: none;\n}\n\nbutton:active,\nbutton:focus {\n  color: var(--blue700);\n  fill: var(--blue700);\n}\n\nbutton > span {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: var(--border-radius);\n}\n\nbutton:hover > span {\n  background: var(--color-primary03);\n}\n\nbutton:focus > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton:active > span {\n  background: var(--color-surface01);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2);\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n}\n\nbutton:disabled > span {\n  background: none;\n  box-shadow: var(--shadow-0);\n  pointer-events: none;\n}\n\nbutton:disabled > span > z-icon {\n  fill: var(--color-surface03);\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-myz-card-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardIcon {\n  /** icon name */\n  @Prop()\n  icon: string;\n\n  /** disabled status flag */\n  @Prop()\n  isdisabled = false;\n\n  /** description of the icon*/\n  @Prop()\n  ariaLabel = \"\";\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        disabled={this.isdisabled}\n        aria-label={this.ariaLabel}\n      >\n        <span>\n          <z-icon\n            name={this.icon}\n            width={16}\n            height={16}\n          />\n        </span>\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-myz-card-info.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card-info.entry.cjs.js","mappings":"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","names":["h","handleKeyboardSubmit","PopoverPosition"],"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-secondary02);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > section > span.license-heading > span.expiring {\n  color: var(--color-warning01);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n:host > div > div.content-wrapper > z-popover {\n  position: absolute;\n  top: 0;\n  left: calc(var(--space-unit) * 4);\n}\n","import {Component, Prop, h, Event, EventEmitter, State} from \"@stencil/core\";\nimport {DictionaryData, PopoverPosition} from \"../../../../beans\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n/**\n * @slot  - content\n */\n@Component({\n  tag: \"z-myz-card-info\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardInfo {\n  /** dictionary info */\n  @Prop()\n  data: string | DictionaryData;\n\n  /** tabindex link attribute (optional) */\n  @Prop()\n  htmltabindex?: number = 0;\n\n  @State()\n  hiddenContent = false;\n\n  @State()\n  tooltip = false;\n\n  private cardData: DictionaryData;\n\n  private contentWrapper: HTMLElement;\n\n  private infoWrapper: HTMLElement;\n\n  private onlineLicenseWrapper: HTMLElement;\n\n  private offlineLicenseWrapper: HTMLElement;\n\n  /** flip card to front */\n  @Event()\n  flipCard: EventEmitter;\n\n  private emitFlipCard(showBack = false): void {\n    this.flipCard.emit(showBack);\n  }\n\n  constructor() {\n    this.emitFlipCard = this.emitFlipCard.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setStringOrArray();\n  }\n\n  componentWillUpdate(): void {\n    this.setStringOrArray();\n  }\n\n  componentDidRender(): void {\n    this.handleContentHeight();\n  }\n\n  private handleContentHeight(): void {\n    if (!this.contentWrapper && !this.infoWrapper) {\n      this.hiddenContent = false;\n\n      return;\n    }\n\n    if (\n      this.contentWrapper.scrollHeight > this.contentWrapper.offsetHeight ||\n      this.infoWrapper.scrollHeight > this.infoWrapper.offsetHeight\n    ) {\n      const height =\n        this.contentWrapper.offsetHeight -\n        this.onlineLicenseWrapper.offsetHeight -\n        this.offlineLicenseWrapper.offsetHeight;\n      this.infoWrapper.style.height = `${height}px`;\n      this.hiddenContent = true;\n\n      return;\n    }\n\n    this.hiddenContent = false;\n  }\n\n  private setStringOrArray(): void {\n    if (typeof this.data === \"string\") {\n      this.cardData = JSON.parse(this.data);\n    } else {\n      this.cardData = this.data;\n    }\n  }\n\n  private renderCloseIcon(): HTMLZIconElement {\n    return (\n      <z-icon\n        name=\"multiply-circled-filled\"\n        height={18}\n        width={18}\n        onClick={() => this.emitFlipCard(false)}\n        tabindex={this.htmltabindex}\n        onKeyUp={(e: KeyboardEvent) => {\n          handleKeyboardSubmit(e, this.emitFlipCard, false);\n        }}\n      />\n    );\n  }\n\n  private renderGeneralSection(): HTMLElement {\n    const title = this?.cardData?.title;\n    const description = this?.cardData?.description;\n\n    return (\n      <section\n        class={`info-wrapper ${this.hiddenContent ? \"hidden\" : \"\"}`}\n        onClick={() => {\n          if (this.hiddenContent) {\n            this.tooltip = !this.tooltip;\n          }\n        }}\n        ref={(el) => (this.infoWrapper = el)}\n      >\n        {this.renderAuthor()}\n        {this.renderYear()}\n        {title}\n        <br />\n        {description}\n      </section>\n    );\n  }\n\n  private renderAuthor(): HTMLSpanElement {\n    const author = this?.cardData?.author;\n    if (!author) {\n      return null;\n    }\n\n    return (\n      <span>\n        Autore: <b>{author}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderYear(): HTMLSpanElement {\n    const year = this?.cardData?.year;\n    if (!year) {\n      return null;\n    }\n\n    return (\n      <span>\n        Anno: <b>{year}</b>\n        <br />\n      </span>\n    );\n  }\n\n  private renderTooltip(): HTMLZPopoverElement {\n    if (!this.tooltip) {\n      return;\n    }\n\n    if (!this.cardData) {\n      return;\n    }\n    const {title, year, author, description} = this.cardData;\n\n    return (\n      <z-popover\n        position={PopoverPosition.RIGHT}\n        onClick={() => (this.tooltip = false)}\n      >\n        {`${title} ${year} ${author} ${description}`}\n      </z-popover>\n    );\n  }\n\n  private setExpirationLicenseMessage(type: string): HTMLSpanElement {\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expired) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expired)\n    ) {\n      return <span class=\"expired\">SCADUTA</span>;\n    }\n\n    if (\n      (type === \"online\" && this.cardData.onlineLicense.expiring) ||\n      (type === \"offline\" && this.cardData.offlineLicense.expiring)\n    ) {\n      return <span class=\"expiring\">IN SCADENZA</span>;\n    }\n  }\n\n  private renderOnlineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.onlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.onlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza online</span>\n          {this.setExpirationLicenseMessage(\"online\")}\n        </span>\n        Scadenza il <b>{this.cardData.onlineLicense.expiration}</b>\n        <br />\n      </section>\n    );\n  }\n\n  private renderOfflineLicenseSection(): HTMLElement {\n    if (!this?.cardData?.offlineLicense) {\n      return;\n    }\n\n    return (\n      <section ref={(el) => (this.offlineLicenseWrapper = el)}>\n        <span class=\"license-heading\">\n          <span>Licenza offline</span>\n          {this.setExpirationLicenseMessage(\"offline\")}\n        </span>\n        Scadenza il <b>{this.cardData.offlineLicense.expiration}</b>\n        <br />\n        Installazioni disponibili: <b>{this.cardData.offlineLicense.installations}</b>\n      </section>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        {this.renderCloseIcon()}\n        <div\n          class=\"content-wrapper\"\n          ref={(el) => (this.contentWrapper = el)}\n        >\n          {this.renderGeneralSection()}\n          {this.renderTooltip()}\n          {this.renderOnlineLicenseSection()}\n          {this.renderOfflineLicenseSection()}\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-myz-card-list.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card-list.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,+qBAA+qB,CAAC;AAClsB,2BAAe,SAAS;;MCOX,YAAY;IAKvB;;;QACE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9C;IAEO,mBAAmB,CAAC,CAAgB,EAAE,GAAW;QACvD,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;SAC5B;KACF;IAEO,iBAAiB,CAAC,IAAY;QACpC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC;QAClC,IAAI,CAAC,MAAM,EAAE;YACX,OAAOA,sBAAO,KAAK,CAAQ,CAAC;SAC7B;QAED,QACEA,eACE,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,CAAC,CAAgB,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,GAAG,CAAC,EAClE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,IAEd,KAAK,CACJ,EACJ;KACH;IAEO,UAAU,CAAC,SAAmB;QACpC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,IAAY;YAChC,OAAOA,oBAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAM,CAAC;SAChD,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,OAAOA,mEAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAM,CAAC;KAC9D;;;;;;","names":["h"],"sources":["src/snowflakes/myz/card/z-myz-card-list/styles.css?tag=z-myz-card-list&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-list/index.tsx"],"sourcesContent":["ul {\n  overflow: hidden;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  list-style: none;\n}\n\nul > li {\n  padding-left: 10px;\n  text-indent: -10px;\n}\n\nul > li > a {\n  display: block;\n  padding-top: calc(var(--space-unit) * 0.5);\n  color: var(--color-primary01);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n\nul > li > a::before {\n  padding-right: 5px;\n  content: \"•\";\n}\n\nul > li > span {\n  padding: 0 calc(var(--space-unit) * 2);\n  color: var(--color-surface04);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {Action} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardList {\n  /** list data stringified array */\n  @Prop()\n  listdata: string;\n\n  constructor() {\n    this.renderList = this.renderList.bind(this);\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent, url: string): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      window.open(url, \"_blank\");\n    }\n  }\n\n  private formatListContent(data: Action): HTMLAnchorElement {\n    const {value, isLink, url} = data;\n    if (!isLink) {\n      return <span>{value}</span>;\n    }\n\n    return (\n      <a\n        role=\"button\"\n        onKeyPress={(e: KeyboardEvent) => this.handleSpaceKeyPress(e, url)}\n        href={url}\n        target=\"_blank\"\n      >\n        {value}\n      </a>\n    );\n  }\n\n  private renderList(dataArray: Action[]): HTMLLIElement[] {\n    return dataArray.map((data: Action) => {\n      return <li>{this.formatListContent(data)}</li>;\n    });\n  }\n\n  render(): HTMLUListElement {\n    return <ul>{this.renderList(JSON.parse(this.listdata))}</ul>;\n  }\n}\n"],"version":3}

package/dist/cjs/z-myz-card_4.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card.z-myz-card-body.z-myz-card-cover.z-myz-card-header.entry.cjs.js","mappings":"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","names":["stylesCss","LicenseType","h"],"sources":["src/snowflakes/myz/card/z-myz-card/styles.css?tag=z-myz-card&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card/index.tsx","src/snowflakes/myz/card/z-myz-card-body/styles.css?tag=z-myz-card-body&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-body/index.tsx","src/snowflakes/myz/card/z-myz-card-cover/styles.css?tag=z-myz-card-cover&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-cover/index.tsx","src/snowflakes/myz/card/z-myz-card-header/styles.css?tag=z-myz-card-header&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-header/index.tsx"],"sourcesContent":[":host {\n  --card-overflow: hidden;\n}\n\ndiv {\n  display: flex;\n  overflow: var(--card-overflow);\n  width: auto;\n  width: 256px; /* TODO: width must be 100% - must be handled in dashboard */\n  height: 522px;\n  box-sizing: border-box;\n  flex-direction: column;\n  border: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n}\n\ndiv.real,\ndiv.trial,\ndiv.temp {\n  border-color: var(--blue100);\n}\n\n/* HIDDEN status */\ndiv.faded {\n  border: var(--border-size-medium) solid var(--color-surface02);\n}\n\n/* HIGHLIGHTED status */\ndiv.highlighted {\n  box-shadow: var(--shadow-4);\n  outline: none;\n}\n\n/* PRESSED status */\ndiv.pressed {\n  box-shadow: var(--shadow-8);\n  outline: none;\n}\n\ndiv:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot  - generic card slot\n */\n@Component({\n  tag: \"z-myz-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardComponent {\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  /** pressed status */\n  @Prop()\n  ispressed = false;\n\n  /** highlighted status */\n  @Prop()\n  ishighlighted = false;\n\n  private retrieveClass(): string {\n    let elemClasses = \"\";\n\n    if (this.cardtype === LicenseType.REAL) {\n      elemClasses += \"real\";\n    } else if (this.cardtype === LicenseType.TRIAL) {\n      elemClasses += \"trial\";\n    } else if (this.cardtype === LicenseType.TEMP) {\n      elemClasses += \"temp\";\n    }\n\n    if (this.faded) {\n      elemClasses += \" faded\";\n    } else if (this.ispressed) {\n      elemClasses += \" pressed\";\n    } else if (this.ishighlighted) {\n      elemClasses += \" highlighted\";\n    }\n\n    return elemClasses;\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={this.retrieveClass()}\n        tabindex=\"0\"\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n",":host {\n  width: auto;\n  height: 340px;\n}\n\n:host > div {\n  position: relative;\n  display: flex;\n  width: auto;\n  height: 340px;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot alert - card alert slot\n * @slot cover - book cover slot\n */\n@Component({\n  tag: \"z-myz-card-body\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardBody {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <slot name=\"alert\"></slot>\n        <slot name=\"cover\" />\n      </div>\n    );\n  }\n}\n","img {\n  display: block;\n  max-width: 100%;\n  height: 340px;\n  margin: auto;\n  object-fit: cover;\n}\n\nimg.faded {\n  opacity: 0.3;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-myz-card-cover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardCover {\n  /** image source */\n  @Prop()\n  img: string;\n\n  /** cover alt title */\n  @Prop()\n  titolo: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** default error image source */\n  @Prop()\n  defaultimg: string;\n\n  private hadleOnImageError(): void {\n    this.img = this.defaultimg;\n  }\n\n  render(): HTMLImageElement {\n    return (\n      <img\n        class={this.faded && \"faded\"}\n        onError={this.hadleOnImageError.bind(this)}\n        alt={this.titolo}\n        src={this.img}\n      />\n    );\n  }\n}\n","header {\n  position: relative;\n  display: flex;\n  width: auto;\n  height: calc(var(--space-unit) * 6);\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius);\n}\n\nslot[name=\"aria-heading\"]::slotted(*) {\n  position: absolute;\n  overflow: hidden !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  border: 0 none !important;\n  margin: -1px !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n}\n\nheader.real,\nheader.trial,\nheader.temp {\n  border-bottom: var(--border-size-medium) solid var(--blue100);\n  background-color: var(--color-primary03);\n}\n\n.card-title {\n  overflow: hidden;\n  height: calc(var(--space-unit) * 2);\n  padding: calc(var(--space-unit) * 2);\n  margin: 0;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.22px;\n  line-height: calc(var(--space-unit) * 2);\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.faded {\n  border-bottom: var(--border-size-medium) solid var(--color-surface02);\n}\n\n.faded.real,\n.faded.trial,\n.faded.temp {\n  border-top: var(--border-size-medium) solid var(--blue100);\n  border-right: var(--border-size-medium) solid var(--blue100);\n  border-left: var(--border-size-medium) solid var(--blue100);\n}\n","import {Component, Prop, State, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {LicenseType} from \"../../../../beans/index\";\n\n/**\n * @slot icon - card header icon slot\n */\n@Component({\n  tag: \"z-myz-card-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardHeader {\n  /** volume title */\n  @Prop()\n  titolo: string;\n\n  /** faded status */\n  @Prop()\n  faded: boolean;\n\n  /** card graphic variant (optional) */\n  @Prop()\n  cardtype?: LicenseType;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLElement;\n\n  private getTitle(): string {\n    return this.allowTooltip ? this.titolo : \"\";\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis()) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  private retrieveClass(): JSXBase.HTMLAttributes[\"class\"] {\n    return {\n      real: this.cardtype === LicenseType.REAL,\n      trial: this.cardtype === LicenseType.TRIAL,\n      temp: this.cardtype === LicenseType.TEMP,\n      faded: this.faded,\n    };\n  }\n\n  render(): HTMLElement {\n    return (\n      <header class={this.retrieveClass()}>\n        <slot name=\"aria-heading\" />\n        <span\n          class=\"card-title\"\n          ref={(el) => (this.ellipsis = el as HTMLElement)}\n          title={this.getTitle()}\n        >\n          {this.titolo}\n        </span>\n        <slot name=\"icon\" />\n      </header>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-myz-list-item.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-list-item.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,ylCAAylC,CAAC;AAC5mC,2BAAe,SAAS;;MCOX,YAAY;IAiCf,sBAAsB,CAAC,CAAa,EAAE,MAAM;QAClD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAC,CAAC,EAAE,MAAM,EAAC,CAAC,CAAC;KAC3C;IAMO,kBAAkB,CAAC,CAAa,EAAE,UAAU;QAClD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,CAAC,EAAE,UAAU,EAAC,CAAC,CAAC;KAC3C;IAED;;;;;;0BAlCsB,OAAO;;;;0BAgBhB,IAAI;QAmBf,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC;QAEhE,QACEA,iEACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,IAAI,CAAC,UAAU,iBACN,IAAI,CAAC,MAAM,EACxB,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,EACvE,UAAU,EAAE,CAAC,EAAiB,KAAKC,0BAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC,IAErGD,mEAAM,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,QAAQ,IACrC,IAAI,CAAC,IAAI,IAAIA,oBAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACxC,IAAI,CAAC,IAAI,IACRA,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EAClC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,MAAM,CAAC,EAClE,UAAU,EAAE,CAAC,EAAiB,KAAKC,0BAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,EAChG,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,EACnC,QAAQ,EAAC,GAAG,IAEX,IAAI,CAAC,IAAI,CACR,KAEJD,kBAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACpC,EACDA,oEAAQ,CACH,CACJ,EACL;KACH;;;;;;","names":["h","handleKeyboardSubmit"],"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-text01);\n  fill: var(--color-icon02);\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, Prop, h, Event, EventEmitter} 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 {\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"],"version":3}

package/dist/cjs/z-myz-list.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-list.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,wBAAwB,CAAC;AAC3C,uBAAe,SAAS;;MCOX,QAAQ;;;;;;IASnB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC3C;KACF;IAEO,iBAAiB,CAAC,YAAoB;QAC5C,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;KAC3C;IAGD,oBAAoB,CAAC,QAAgB;QACnC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;KAClC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAEvD,QACEA,mEACG,IAAI,CAAC,IAAI;YACR,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpBA,6BACE,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,QAAQ,IAAI,CAAC,GACzB,CACH,CAAC,CACD,EACL;KACH;;;;;;;;;","names":["h"],"sources":["src/snowflakes/myz/list/z-myz-list/styles.css?tag=z-myz-list&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list/index.tsx"],"sourcesContent":["ul {\n  padding: 0;\n  margin: 0;\n}\n","import {Component, Prop, h, Watch} from \"@stencil/core\";\nimport {ListItem} from \"../../../../beans/index.js\";\n\n@Component({\n  tag: \"z-myz-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzList {\n  /** json stringified list data (mutable, optional) */\n  @Prop()\n  inputrawdata?: string;\n\n  /** list item data (mutable, optional)*/\n  @Prop({mutable: true})\n  list?: ListItem[];\n\n  componentWillLoad(): void {\n    if (this.inputrawdata) {\n      this.parseinputrawdata(this.inputrawdata);\n    }\n  }\n\n  private parseinputrawdata(inputrawdata: string): void {\n    this.list = [...JSON.parse(inputrawdata)];\n  }\n\n  @Watch(\"inputrawdata\")\n  oninputrawdataChange(newValue: string): void {\n    this.parseinputrawdata(newValue);\n  }\n\n  render(): HTMLUListElement {\n    const lastElem = this.list ? this.list.length - 1 : -1;\n\n    return (\n      <ul>\n        {this.list &&\n          this.list.map((bean, i) => (\n            <z-myz-list-item\n              listitemid={bean.listitemid}\n              text={bean.text}\n              link={bean.link}\n              linktarget={bean.linktarget}\n              icon={bean.icon}\n              underlined={lastElem != i}\n            />\n          ))}\n      </ul>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-navigation-tab-link.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-navigation-tab-link.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,0hHAA0hH,CAAC;AACpjH,iCAAe,gBAAgB;;MCalB,kBAAkB;;;;;;wBAuBR,KAAK;wBAML,KAAK;2BAMZA,iCAAyB,CAAC,UAAU;oBAM3CC,0BAAkB,CAAC,GAAG;;;;;;;;;;IA0CrB,WAAW,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC;QAClC,MAAM,aAAa,IACjB,IAAI,CAAC,WAAW,KAAKD,iCAAyB,CAAC,UAAU;cACrD,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;cACpC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,CAChB,CAAC;QAE3B,MAAM,CAAC,cAAc,iBACnB,QAAQ,EAAE,QAAQ,IACf,aAAa,EAChB,CAAC;KACJ;IAGD,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;IAGD,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B;KACF;;;;;;IAOO,UAAU;QAChB,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,MAAM,UAAU,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC;QAE5D,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAACE,WAAK,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YAC5D,IAAI,GAAG,UAAU,CAAC;SACnB;QAED,OAAOC,oBAAQ,IAAI,EAAE,IAAI,GAAW,CAAC;KACtC;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,KAAK,mBACC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,YAAY,IAEhCD,gEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC9B,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,CAC9C,CACC,EACP;KACH;;;;;;;;;","names":["NavigationTabsOrientation","NavigationTabsSize","ICONS","h","Host"],"sources":["src/deprecated/navigation-tab.css?tag=z-navigation-tab-link","src/deprecated/z-navigation-tab-link/index.tsx"],"sourcesContent":["z-navigation-tab > button,\nz-navigation-tab-link > a {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tab-link > a {\n  text-decoration: none;\n}\n\nz-navigation-tab *,\nz-navigation-tab-link *,\nz-navigation-tab *::before,\nz-navigation-tab *::after,\nz-navigation-tab-link *::before,\nz-navigation-tab-link *::after {\n  box-sizing: border-box;\n}\n\nz-navigation-tab > *:focus:focus-visible,\nz-navigation-tab-link > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tab:not([disabled]):hover > *,\nz-navigation-tab[selected] > *,\nz-navigation-tab-link:not([disabled]):hover > *,\nz-navigation-tab-link[selected] > * {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tab:not([disabled]):hover > *::after,\nz-navigation-tab[selected] > *::after,\nz-navigation-tab-link:not([disabled]):hover > *::after,\nz-navigation-tab-link[selected] > *::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"][selected] > *::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tab z-icon,\nz-navigation-tab-link z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\nz-navigation-tab[orientation=\"horizontal\"] z-icon,\nz-navigation-tab-link[orientation=\"horizontal\"] z-icon {\n  margin-right: var(--space-unit);\n}\n\nz-navigation-tab:not([disabled]):hover > * {\n  background-color: var(--color-background);\n}\n\nz-navigation-tab[disabled] > *,\nz-navigation-tab-link[disabled] > * {\n  color: var(--gray500);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\n/* Size small (only available for horizontal) */\nz-navigation-tab[size=\"small\"] > *,\nz-navigation-tab-link[size=\"small\"] > * {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"] > *,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"] > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected] > *::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,\nz-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\nz-navigation-tab[orientation=\"vertical\"] > *,\nz-navigation-tab-link[orientation=\"vertical\"] > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"vertical\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"vertical\"][selected] > *::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter, Watch, Host} from \"@stencil/core\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\nimport {ICONS} from \"../../components/icons/icons\";\n\n/**\n * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.\n * This component uses the `tab` role:\n * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n * @deprecated Use a native `<a>` instead.\n */\n@Component({\n  tag: \"z-navigation-tab-link\",\n  styleUrl: \"../navigation-tab.css\",\n})\nexport class ZNavigationTabLink {\n  /**\n   * `aria-controls` attribute of the tab.\n   * Identifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\n   * The value must be the `id` of the element it controls.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n   */\n  @Prop()\n  ariaControls?: string;\n\n  /**\n   * `id` attribute of the tab.\n   * Set this id to the `aria-labelledby` attribute of the controlled `tabpanel` element.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\n   * @deprecated Use native `id` attribute instead\n   */\n  @Prop()\n  tabId?: string;\n\n  /**\n   * Whether the tab is selected.\n   */\n  @Prop({mutable: true, reflect: true})\n  selected?: boolean = false;\n\n  /**\n   * Whether the tab is disabled.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  orientation = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  size = NavigationTabsSize.BIG;\n\n  /**\n   * Html title attribute for the anchor element.\n   */\n  @Prop()\n  htmlTitle: string;\n\n  /**\n   * Html `target` attribute for the anchor element.\n   */\n  @Prop()\n  target: string;\n\n  /**\n   * Url to set to the anchor element.\n   */\n  @Prop()\n  href: string;\n\n  /**\n   * Name of the icon to use.\n   * The `filled` version will be automatically used (if found) when the tab is `selected`.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Label to show in the tab.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The tab has been selected.\n   */\n  @Event({eventName: \"selected\"})\n  private selectedEvent: EventEmitter;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab({target: button}): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    button.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = true;\n  }\n\n  @Watch(\"selected\")\n  onSelected(): void {\n    if (this.selected) {\n      this.selectedEvent.emit();\n    }\n  }\n\n  /**\n   * Render the icon component using the icon's name passed from prop.\n   * Use the `filled` version when the tab is `selected`.\n   * @returns {HTMLElement}\n   */\n  private renderIcon(): HTMLZIconElement {\n    let icon = this.icon;\n    const iconFilled = `${icon.replace(/-filled$/, \"\")}-filled`;\n\n    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {\n      icon = iconFilled;\n    }\n\n    return <z-icon name={icon}></z-icon>;\n  }\n\n  render(): HTMLZNavigationTabLinkElement {\n    return (\n      <Host\n        role=\"tab\"\n        id={this.tabId}\n        aria-selected={this.selected ? \"true\" : \"false\"}\n        aria-controls={this.ariaControls}\n      >\n        <a\n          tabIndex={this.selected ? 0 : -1}\n          onFocus={this.scrollToTab.bind(this)}\n          href={this.disabled ? null : this.href}\n          title={this.htmlTitle}\n          target={this.target}\n        >\n          {this.icon && this.renderIcon()}\n          {this.orientation === \"horizontal\" && this.label}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-navigation-tab.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-navigation-tab.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,0hHAA0hH,CAAC;AACpjH,6BAAe,gBAAgB;;MCYlB,cAAc;;;;;;wBAuBJ,KAAK;wBAML,KAAK;2BAMeA,iCAAyB,CAAC,UAAU;oBAMlDC,0BAAkB,CAAC,GAAG;;;;;;;;IA+BzC,WAAW,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC;QAClC,MAAM,aAAa,IACjB,IAAI,CAAC,WAAW,KAAKD,iCAAyB,CAAC,UAAU;cACrD,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;cACpC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,CAChB,CAAC;QAE3B,MAAM,CAAC,cAAc,iBACnB,QAAQ,EAAE,QAAQ,IACf,aAAa,EAChB,CAAC;KACJ;IAGD,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;IAGD,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B;KACF;;;;;;IAOO,UAAU;QAChB,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,MAAM,UAAU,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC;QAE5D,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAACE,WAAK,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YAC5D,IAAI,GAAG,UAAU,CAAC;SACnB;QAED,OAAOC,oBAAQ,IAAI,EAAE,IAAI,GAAW,CAAC;KACtC;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,KAAK,mBACC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,YAAY,IAEhCD,qEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,SAAS,IAEpB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC9B,IAAI,CAAC,WAAW,KAAKH,iCAAyB,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CACjE,CACJ,EACP;KACH;;;;;;;;;","names":["NavigationTabsOrientation","NavigationTabsSize","ICONS","h","Host"],"sources":["src/deprecated/navigation-tab.css?tag=z-navigation-tab","src/deprecated/z-navigation-tab/index.tsx"],"sourcesContent":["z-navigation-tab > button,\nz-navigation-tab-link > a {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tab-link > a {\n  text-decoration: none;\n}\n\nz-navigation-tab *,\nz-navigation-tab-link *,\nz-navigation-tab *::before,\nz-navigation-tab *::after,\nz-navigation-tab-link *::before,\nz-navigation-tab-link *::after {\n  box-sizing: border-box;\n}\n\nz-navigation-tab > *:focus:focus-visible,\nz-navigation-tab-link > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tab:not([disabled]):hover > *,\nz-navigation-tab[selected] > *,\nz-navigation-tab-link:not([disabled]):hover > *,\nz-navigation-tab-link[selected] > * {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tab:not([disabled]):hover > *::after,\nz-navigation-tab[selected] > *::after,\nz-navigation-tab-link:not([disabled]):hover > *::after,\nz-navigation-tab-link[selected] > *::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"][selected] > *::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tab z-icon,\nz-navigation-tab-link z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\nz-navigation-tab[orientation=\"horizontal\"] z-icon,\nz-navigation-tab-link[orientation=\"horizontal\"] z-icon {\n  margin-right: var(--space-unit);\n}\n\nz-navigation-tab:not([disabled]):hover > * {\n  background-color: var(--color-background);\n}\n\nz-navigation-tab[disabled] > *,\nz-navigation-tab-link[disabled] > * {\n  color: var(--gray500);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\n/* Size small (only available for horizontal) */\nz-navigation-tab[size=\"small\"] > *,\nz-navigation-tab-link[size=\"small\"] > * {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"] > *,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"] > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected] > *::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,\nz-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\nz-navigation-tab[orientation=\"vertical\"] > *,\nz-navigation-tab-link[orientation=\"vertical\"] > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"vertical\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"vertical\"][selected] > *::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter, Watch, Host} from \"@stencil/core\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\nimport {ICONS} from \"../../components/icons/icons\";\n\n/**\n * Single tab component to use inside `z-navigation-tabs`. It renders a button.\n * This component uses the `tab` role:\n * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n */\n@Component({\n  tag: \"z-navigation-tab\",\n  styleUrl: \"../navigation-tab.css\",\n})\nexport class ZNavigationTab {\n  /**\n   * `aria-controls` attribute of the tab.\n   * Identifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\n   * The value must be the `id` of the element it controls.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n   */\n  @Prop()\n  ariaControls?: string;\n\n  /**\n   * `id` attribute of the tab.\n   * Set this id to the `aria-labelledby` attribute of the controlled `tabpanel` element.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\n   * @deprecated Use native `id` attribute instead\n   */\n  @Prop()\n  tabId?: string;\n\n  /**\n   * Whether the tab is selected.\n   */\n  @Prop({mutable: true, reflect: true})\n  selected?: boolean = false;\n\n  /**\n   * Whether the tab is disabled.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  orientation: NavigationTabsOrientation = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  size: NavigationTabsSize = NavigationTabsSize.BIG;\n\n  /**\n   * Name of the icon to use.\n   * The `filled` version will be automatically used (if found) when the tab is `selected`.\n   * @deprecated Use a native `<button>` instead.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Label to show in the tab.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Html `title` attribute for the button.\n   */\n  @Prop()\n  htmlTitle: string;\n\n  /**\n   * The tab has been selected.\n   */\n  @Event({eventName: \"selected\"})\n  private selectedEvent: EventEmitter;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab({target: button}): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    button.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    if (!this.disabled) {\n      this.selected = true;\n    }\n  }\n\n  @Watch(\"selected\")\n  onSelected(): void {\n    if (this.selected) {\n      this.selectedEvent.emit();\n    }\n  }\n\n  /**\n   * Render the icon component using the icon's name passed from prop.\n   * Use the `filled` version when the tab is `selected`.\n   * @returns {HTMLElement}\n   */\n  private renderIcon(): HTMLZIconElement {\n    let icon = this.icon;\n    const iconFilled = `${icon.replace(/-filled$/, \"\")}-filled`;\n\n    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {\n      icon = iconFilled;\n    }\n\n    return <z-icon name={icon}></z-icon>;\n  }\n\n  render(): HTMLZNavigationTabElement {\n    return (\n      <Host\n        role=\"tab\"\n        id={this.tabId}\n        aria-selected={this.selected ? \"true\" : \"false\"}\n        aria-controls={this.ariaControls}\n      >\n        <button\n          tabIndex={this.selected ? 0 : -1}\n          onFocus={this.scrollToTab.bind(this)}\n          disabled={this.disabled}\n          title={this.htmlTitle}\n        >\n          {this.icon && this.renderIcon()}\n          {this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-navigation-tabs.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-navigation-tabs.entry.cjs.js","mappings":"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","names":["NavigationTabsOrientation","NavigationTabsSize","NavigationTabsKeyboardEvents","h","Host"],"sources":["src/components/navigation/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/navigation/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n  --z-navigation-tabs-nav-buttons-bg: ;\n  --z-navigation-tabs-nav-buttons-fg: ;\n\n  position: relative;\n  z-index: 0;\n  display: flex;\n  overflow: hidden;\n  flex-direction: row;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n  box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n  display: none;\n}\n\nz-navigation-tabs .navigation-button {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n  border-radius: var(--border-no-radius);\n  box-shadow: 0 0 4px 1px var(--shadow-color-base);\n  cursor: pointer;\n  fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n  outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n  display: none;\n}\n\nz-navigation-tabs > nav {\n  z-index: 0;\n  display: flex;\n  overflow: auto;\n  align-items: center;\n  justify-content: flex-start;\n  scroll-behavior: smooth;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n  width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n  top: 0;\n  width: calc(var(--space-unit) * 4);\n  height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n  left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n  right: 0;\n}\n\n/* Orientation vertical */\nz-navigation-tabs[orientation=\"vertical\"] {\n  width: fit-content;\n  flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n  left: 0;\n  width: 100%;\n  height: calc(var(--space-unit) * 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n  top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n  bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n  height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs */\n\nz-navigation-tabs > nav > * {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  gap: var(--space-unit);\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n  text-decoration: none;\n}\n\nz-navigation-tabs > nav > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n  background-color: var(--color-surface02);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n  color: var(--color-disabled03);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > * z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) */\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n  display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Prop, h, Listen, Element, State, Watch, Host, Event, EventEmitter} from \"@stencil/core\";\nimport {NavigationTabsSize, NavigationTabsOrientation, NavigationTabsKeyboardEvents} from \"../../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  ariaLabel?: string;\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    tabElement.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.getAttribute(\"name\").replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        zicon?.setAttribute(\"name\", strokeIcon);\n\n        return;\n      }\n\n      zicon?.setAttribute(\"name\", `${strokeIcon}-filled`);\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.ariaLabel}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-notification.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-notification.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,ysDAAysD,CAAC;AAC5tD,4BAAe,SAAS;;MCYX,aAAa;IAgChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAED;;;;;;;yBA/BsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;QAqBtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,eAAe,KACnBD,oBACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH,EACDA,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,kEAAK,KAAK,EAAC,cAAc,IACvBA,oEAAa,CACT,EACL,CAAC,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,KACxBA,oBACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG,EACL,IAAI,CAAC,SAAS,KACbA,oBACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpCA,oBACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACI,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/notification/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/notification/z-notification/index.tsx"],"sourcesContent":[":host {\n  --z-notification--top-offset: 0;\n\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  outline: none;\n}\n\n:host[sticky] {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host[sticky],\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-success-inverse);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-warning-inverse);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-error-inverse);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-success01);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-warning02);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-error01);\n}\n\n:host > button,\n.content-container > button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  max-width: 800px;\n  color: var(--color-text01);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 16px;\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media and (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from \"@stencil/core\";\nimport {NotificationType} from \"../../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        {this.contenticonname && (\n          <z-icon\n            class=\"status-icon\"\n            name={this.contenticonname}\n            width={16}\n            height={16}\n          />\n        )}\n        <div class=\"content-container\">\n          <div class=\"content-text\">\n            <slot></slot>\n          </div>\n          {!!this.actiontext?.trim() && (\n            <button\n              class=\"action-button\"\n              type=\"button\"\n              onClick={this.handleActionButtonClick}\n            >\n              {this.actiontext}\n            </button>\n          )}\n        </div>\n        {this.showclose && (\n          <button\n            class=\"close-button\"\n            type=\"button\"\n            onClick={this.handleCloseButtonClick}\n          >\n            <z-icon\n              name=\"multiply-circle\"\n              width={16}\n              height={16}\n            />\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-otp.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-otp.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,qtBAAqtB,CAAC;AACxuB,mBAAe,SAAS;;MCOX,IAAI;;;;wBAGK,CAAC;;;;IAkBb,eAAe,CAAC,KAAa;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;KACzC;IAED,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAC,eAAe,IACxBA,kEAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpBA,mBACE,KAAK,EAAE,IAAI,CAAC,MAAM,IAAIC,mBAAW,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EACxD,SAAS,EAAE,CAAC,CAAgB;gBAC1B,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;iBAC3B;aACF,EACD,OAAO,EAAE,CAAC,CAAgB;gBACxB,IAAI,CAAC,CAAC,OAAO,GAAG,EAAE,EAAE;oBAClB,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;iBACrD;aACF,EACD,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;aACzC,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,GAAG,EACb,SAAS,EAAC,GAAG,EACb,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAClC,CACH,CAAC,CACE,EACND,8EACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACF,CACf,EACN;KACH;;;;;;","names":["h","InputStatus"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.digits-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\ninput {\n  width: calc(var(--space-unit) * 5);\n  height: 72px;\n  box-sizing: border-box;\n  padding: 0;\n  caret-color: transparent;\n  color: var(--color-surface05);\n  font-family: var(--font-family-sans);\n  font-size: 32px;\n  font-weight: 300;\n  text-align: center;\n}\n\ninput.error {\n  border: 1px solid;\n  border-color: var(--color-error01);\n  background-color: var(--color-error-inverse);\n  border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n  margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  input:not(:last-of-type) {\n    margin-right: calc(var(--space-unit) * 2);\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n  input {\n    width: calc(var(--space-unit) * 6);\n  }\n}\n","import {Component, h, Event, EventEmitter, Prop} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n  tag: \"z-otp\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZOtp {\n  /** Input number */\n  @Prop()\n  inputNum?: number = 6;\n\n  /** Input status */\n  @Prop()\n  status?: InputStatus;\n\n  /** Input message */\n  @Prop()\n  message?: string;\n\n  private otp: string[];\n\n  private otpRef: HTMLInputElement[];\n\n  /** Otp change event */\n  @Event()\n  otpChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    this.otpChange.emit({value});\n  }\n\n  componentWillLoad(): void {\n    this.otp = [...Array(this.inputNum)];\n    this.otpRef = [...Array(this.inputNum)];\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"otp-container\">\n        <div class=\"digits-container\">\n          {this.otp.map((_val, i) => (\n            <input\n              class={this.status == InputStatus.ERROR ? \"error\" : null}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  this.otpRef[i].value = \"\";\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent) => {\n                if (e.keyCode > 47) {\n                  i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n                }\n              }}\n              onInput={(e: InputEvent) => {\n                this.otp[i] = (e.target as HTMLInputElement).value;\n                this.emitInputChange(this.otp.join(\"\"));\n              }}\n              type=\"text\"\n              minlength=\"1\"\n              maxlength=\"1\"\n              autoComplete=\"off\"\n              ref={(el) => (this.otpRef[i] = el)}\n            />\n          ))}\n        </div>\n        <z-input-message\n          message={this.message}\n          status={this.status}\n        ></z-input-message>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-pagination.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-pagination.entry.cjs.js","mappings":"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","names":["h","InputType","Host"],"sources":["src/components/z-pagination/styles.css?tag=z-pagination","src/components/z-pagination/index.tsx"],"sourcesContent":["z-pagination {\n  --z-pagination--page-button-width: 64px;\n  --z-pagination--pages-container-max-width: 100%;\n\n  display: flex;\n  max-width: 100%;\n  flex-flow: column wrap;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);\n}\n\nz-pagination,\nz-pagination * {\n  box-sizing: border-box;\n}\n\nz-pagination button {\n  height: 100%;\n}\n\nz-pagination z-icon {\n  fill: var(--color-icon01);\n}\n\nz-pagination *:disabled z-icon {\n  fill: var(--color-disabled02);\n}\n\nz-pagination .page-label {\n  margin-right: calc(var(--space-unit) * 3);\n  color: var(--color-text02);\n}\n\nz-pagination .pagination-bar {\n  display: flex;\n  max-width: 100%;\n  height: 48px;\n  align-items: center;\n}\n\nz-pagination .pagination-bar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface03);\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-family: inherit;\n  font-weight: inherit;\n  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out, font-weight 0.15s ease-in-out;\n}\n\nz-pagination .pagination-bar button:focus-visible {\n  background-color: var(--color-hover-surface);\n  box-shadow: inset var(--shadow-focus-primary);\n  outline: none;\n}\n\nz-pagination .pagination-bar .pagination-button {\n  padding: calc(var(--space-unit) * 2);\n  font-weight: var(--font-sb);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\nz-pagination .pagination-bar .navigation-button {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);\n}\n\nz-pagination .pagination-bar .pagination-button:disabled,\nz-pagination .pagination-bar .navigation-button:disabled {\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled02);\n  cursor: default;\n  pointer-events: none;\n}\n\nz-pagination .pagination-bar .page-button,\nz-pagination .pagination-bar .ellipsis-button {\n  width: var(--z-pagination--page-button-width);\n}\n\nz-pagination .pages-container {\n  position: relative;\n  display: inline-flex;\n  max-width: 100%;\n  height: 100%;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  scroll-snap-align: center;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-pagination .pages-container::-webkit-scrollbar {\n  display: none;\n}\n\nz-pagination .pages-chunk {\n  display: flex;\n  scroll-snap-align: center;\n}\n\nz-pagination .pagination-bar .page-button {\n  padding-top: var(--border-size-large) solid transparent;\n  border-bottom: var(--border-size-large) solid transparent;\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n}\n\nz-pagination .pagination-bar .page-button:focus-visible {\n  border-bottom-color: var(--color-hover-light);\n}\n\nz-pagination .pagination-bar .page-button[data-current] {\n  border-bottom-color: var(--color-primary01);\n  font-size: var(--font-size-7);\n}\n\nz-pagination .go-to-page {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .label {\n  color: var(--color-text02);\n  text-transform: uppercase;\n}\n\nz-pagination .go-to-page .inputs {\n  display: flex;\n  column-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .inputs z-input {\n  width: calc(var(--space-unit) * 11);\n}\n\nz-pagination .go-to-page .inputs z-input input,\nz-pagination .mobile-go-to-page z-input input {\n  padding: 0 calc(var(--space-unit) * 1.5) !important;\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page {\n  display: flex;\n  height: 100%;\n  flex: 1 auto;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--color-surface03);\n}\n\nz-pagination .mobile-go-to-page z-input {\n  width: var(--z-pagination--page-button-width);\n  margin-right: var(--space-unit);\n}\n\nz-pagination .mobile-go-to-page z-input input {\n  text-align: center;\n}\n\nz-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,\nz-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button {\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page > span {\n  font-size: var(--font-size-2);\n}\n\n@media (hover: hover) {\n  z-pagination .pagination-bar button:hover {\n    background-color: var(--color-hover-surface);\n  }\n\n  z-pagination .pagination-bar .page-button:hover {\n    border-bottom-color: var(--color-hover-light);\n  }\n}\n\n@media (min-width: 768px) {\n  z-pagination {\n    --z-pagination--page-button-width: 88px;\n\n    flex-direction: row;\n    align-items: flex-end;\n  }\n\n  z-pagination .pages-container {\n    max-width: var(--z-pagination--pages-container-max-width);\n  }\n}\n","import {Component, Prop, h, Element, Event, EventEmitter, Watch, State, Listen, Host} from \"@stencil/core\";\nimport {InputType} from \"../../beans\";\n\n/**\n * Pagination bar component.\n */\n@Component({\n  tag: \"z-pagination\",\n  styleUrl: \"styles.css\",\n})\nexport class ZPagination {\n  @Element() host: HTMLZPaginationElement;\n\n  /** Pagination label placed before the bar. */\n  @Prop()\n  label?: string;\n\n  /** Enable navigation arrows. */\n  @Prop()\n  navArrows = true;\n\n  /** Total number of pages. Required. */\n  @Prop()\n  totalPages!: number;\n\n  /** Number of pages to skip. */\n  @Prop()\n  skip = 0;\n\n  /** Enable buttons to go to the first and last pages. */\n  @Prop()\n  edges = false;\n\n  /** Number of pages to show left/right of the current, before showing \"load more\" symbol (…). */\n  @Prop()\n  split?: number;\n\n  /** Number of pages to show at a time. If not set, all pages will be shown. */\n  @Prop()\n  visiblePages?: number;\n\n  /** Current page. */\n  @Prop({mutable: true})\n  currentPage = 1;\n\n  /** Whether to show \"go to page\" feature. */\n  @Prop()\n  goToPage: boolean;\n\n  /**\n   * Internal visible pages variable.\n   * Needed to better handle conflicting props like `visiblePages` and `split`.\n   * This state will change based on props values and validation,\n   * keeping original `visiblePages` value intact.\n   */\n  @State()\n  private _visiblePages = this.visiblePages;\n\n  /** Used to hides/change some functionalities on smaller screen sizes */\n  @State()\n  isMobile = false;\n\n  /** Value of the go to page input */\n  @State()\n  goToPageValue = null;\n\n  /** Event emitted when the current page has changed. */\n  @Event()\n  pageChanged: EventEmitter;\n\n  /**\n   * Set the max width of the pages container.\n   */\n  @Watch(\"_visiblePages\")\n  setPagesContainerWidth(): void {\n    if (!this._visiblePages || this.split) {\n      this.host.style.setProperty(\"--z-pagination--pages-container-max-width\", \"100%\");\n\n      return;\n    }\n\n    const pagesContainerStyle = window.getComputedStyle(this.host);\n    const pageButtonWidth = pagesContainerStyle.getPropertyValue(\"--z-pagination--page-button-width\");\n    this.host.style.setProperty(\n      \"--z-pagination--pages-container-max-width\",\n      `calc(${pageButtonWidth} * ${this._visiblePages})`\n    );\n  }\n\n  /**\n   * Set visible pages.\n   * Ensure that the visible pages are always <= the total pages.\n   * If `visiblePages` isn't set, fallback to the total pages.\n   */\n  @Watch(\"visiblePages\")\n  setVisiblePages(): void {\n    this._visiblePages = Math.min(this.visiblePages || this.totalPages, this.totalPages);\n  }\n\n  /**\n   * On page changed.\n   * @emits pageChanged\n   */\n  @Watch(\"currentPage\")\n  onPageChanged(): void {\n    this.pageChanged.emit(this.currentPage);\n    this.scrollToPage();\n  }\n\n  /**\n   * On split changed.\n   * Empty `edges` value. The split feature wins over the pages chunks and edges.\n   */\n  @Watch(\"split\")\n  onSplitChanged(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n  }\n\n  /**\n   * Hide stuff on mobile.\n   */\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  onResize(): void {\n    this.setMobile();\n  }\n\n  /**\n   * Set functionalities according to screen size.\n   */\n  private setMobile(): void {\n    const mobileMediaQuery = \"screen and (max-width: 767px)\";\n    this.isMobile = window.matchMedia(mobileMediaQuery).matches;\n  }\n\n  /**\n   * Get a list of pages chunks, each of `visiblePages` length.\n   * @returns {number[][]}\n   */\n  private getPagesChunks(): number[][] {\n    // array of numbers from 1 to `totalPages`\n    const pages = Array.from({length: this.totalPages}, (_, i) => i + 1);\n\n    const chunks = [];\n    const chunksCount = Math.ceil(pages.length / this._visiblePages);\n    for (let index = 0; index < chunksCount; index++) {\n      chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));\n    }\n\n    return chunks;\n  }\n\n  /**\n   * Scroll to the left the chunk of pages containing the current page.\n   */\n  private scrollToPage(): void {\n    const pageBtn = this.host.querySelector(`[data-page=\"${this.currentPage}\"]`) as HTMLElement;\n\n    if (!pageBtn) {\n      return;\n    }\n\n    pageBtn.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"nearest\",\n      inline: \"center\",\n    });\n  }\n\n  /**\n   * Select a page.\n   * Do validations on the passed value before assigning it to `currentPage`.\n   * @param {number} page Page number to set\n   */\n  private selectPage(page): void {\n    this.currentPage = Math.min(Math.max(page, 1), this.totalPages);\n  }\n\n  /**\n   * Render page number button.\n   * @param {number} page Page number to render\n   * @returns {HTMLButtonElement}\n   */\n  private renderPage(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"page-button\"\n        type=\"button\"\n        aria-current={this.currentPage === page ? \"page\" : \"false\"}\n        title={`Vai alla pagina ${page}`}\n        data-page={page}\n        data-current={this.currentPage === page}\n        onClick={() => this.selectPage(page)}\n      >\n        {page}\n      </button>\n    );\n  }\n\n  /**\n   * Render split button.\n   * @param {number} page Page to select on click.\n   * @returns {HTMLButtonElement}\n   */\n  private renderEllipsisButton(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"ellipsis-button\"\n        type=\"button\"\n        title={`Vai alla pagina ${page}`}\n        onClick={() => this.selectPage(page)}\n      >\n        …\n      </button>\n    );\n  }\n\n  /**\n   * Render chunked page buttons.\n   * @returns {HTMLDivElement[]}\n   */\n  private renderPages(): HTMLDivElement[] {\n    const pagesChunks = this.getPagesChunks();\n    if (pagesChunks.length <= 0) {\n      return;\n    }\n\n    return pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>);\n  }\n\n  /**\n   * Render page buttons when split feature is enabled.\n   * @returns {HTMLButtonElement[]}\n   */\n  private renderSplitPages(): HTMLButtonElement[] {\n    // left and right split pages, current page, first and last page, left and right ellipsis button\n    if (this.totalPages <= this.split * 2 + 5) {\n      // Too few pages: ellipsis will never be rendered, so let's just render all pages and that's it.\n      return Array.from({length: this.totalPages}, (_, i) => this.renderPage(i + 1));\n    }\n\n    if (this.currentPage <= this.split * 2 + 2) {\n      // Render first (2 * split + 3) pages, ellipsis, then last page.\n      return [\n        ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(i + 1)),\n        this.renderEllipsisButton(this.split * 2 + 4),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {\n      // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.\n      return [\n        this.renderPage(1),\n        this.renderEllipsisButton(this.currentPage - this.split - 1),\n        ...Array.from({length: this.split * 2 + 1}, (_, i) => this.renderPage(this.currentPage - this.split + i)),\n        this.renderEllipsisButton(this.currentPage + this.split + 1),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    // Render first page, ellipsis, then last (2 * split + 3) pages.\n    return [\n      this.renderPage(1),\n      this.renderEllipsisButton(this.totalPages - this.split * 2 - 3),\n      ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(this.totalPages - this.split * 2 - 2 + i)),\n    ];\n  }\n\n  private renderBackButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla pagina precedente\"\n        disabled={this.currentPage === 1}\n        onClick={() => this.selectPage(this.currentPage - 1)}\n      >\n        <z-icon name=\"chevron-left\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderForwardButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla prossima pagina\"\n        disabled={this.currentPage === this.totalPages}\n        onClick={() => this.selectPage(this.currentPage + 1)}\n      >\n        <z-icon name=\"chevron-right\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderMobile(): HTMLElement[] {\n    const pagesChunks = this.getPagesChunks();\n\n    return [\n      this.label && <span class=\"page-label body-1-sb\">{this.label}</span>,\n\n      <div class=\"pagination-bar\">\n        {this.renderBackButton()}\n\n        {!this.goToPage && (\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {pagesChunks.length > 0 &&\n              pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>)}\n          </div>\n        )}\n\n        {this.goToPage && (\n          <form\n            class=\"mobile-go-to-page\"\n            onSubmit={(ev) => {\n              ev.preventDefault();\n              this.selectPage(this.goToPageValue);\n            }}\n          >\n            <z-input\n              class=\"go-to-page-input\"\n              type={InputType.NUMBER}\n              min={1}\n              max={this.totalPages}\n              message={false}\n              onInput={(ev: InputEvent) => {\n                this.goToPageValue = (ev.target as HTMLZInputElement).value;\n              }}\n              placeholder={this.currentPage.toString()}\n              hasclearicon={false}\n            ></z-input>\n            <span>{`/${this.totalPages}`}</span>\n          </form>\n        )}\n\n        {this.renderForwardButton()}\n      </div>,\n    ];\n  }\n\n  componentDidLoad(): void {\n    this.setVisiblePages();\n  }\n\n  componentDidRender(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n\n    this.setPagesContainerWidth();\n    this.setMobile();\n  }\n\n  render(): HTMLZPaginationElement {\n    if (this.isMobile) {\n      return <Host>{this.renderMobile()}</Host>;\n    }\n\n    return (\n      <Host>\n        <div class=\"pagination-bar\">\n          {this.label && <span class=\"page-label body-1-sb\">{this.label}</span>}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title=\"Vai alla pagina 1\"\n              disabled={this.currentPage === 1}\n              onClick={() => this.selectPage(1)}\n            >\n              Pagina 1\n            </button>\n          )}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage - this.skip}`}\n              disabled={this.currentPage <= this.skip}\n              onClick={() => this.selectPage(this.currentPage - this.skip)}\n            >\n              -{this.skip}\n            </button>\n          )}\n\n          {this.navArrows && this.renderBackButton()}\n\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {this.split ? this.renderSplitPages() : this.renderPages()}\n          </div>\n\n          {this.navArrows && this.renderForwardButton()}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage + this.skip}`}\n              disabled={this.currentPage > this.totalPages - this.skip}\n              onClick={() => this.selectPage(this.currentPage + this.skip)}\n            >\n              +{this.skip}\n            </button>\n          )}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.totalPages}`}\n              disabled={this.currentPage === this.totalPages}\n              onClick={() => this.selectPage(this.totalPages)}\n            >\n              Pagina {this.totalPages}\n            </button>\n          )}\n        </div>\n        {this.goToPage && (\n          <div class=\"go-to-page\">\n            <span class=\"label body-5-sb\">Vai a pagina:</span>\n            <div class=\"inputs\">\n              <z-input\n                class=\"go-to-page-input\"\n                type={InputType.NUMBER}\n                min={1}\n                max={this.totalPages}\n                message={false}\n                placeholder=\"2\"\n                hasclearicon={false}\n                onInput={(ev: InputEvent) => {\n                  this.goToPageValue = (ev.target as HTMLZInputElement).value;\n                }}\n                onKeyDown={(ev) => ev.key === \"Enter\" && this.selectPage(this.goToPageValue)}\n              ></z-input>\n              <z-button\n                disabled={!this.goToPageValue}\n                title=\"Vai alla pagina inserita\"\n                onClick={() => this.selectPage(this.goToPageValue)}\n              >\n                vai\n              </z-button>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-panel-elem.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-panel-elem.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,2zBAA2zB,CAAC;AAC90B,yBAAe,SAAS;;MCUX,UAAU;;;;;;;;;sBA2BH,QAAQ;0BAIH,KAAK;;;IAMpB,UAAU;QAChB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,QACEA,iBACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,GAChB,EACF;SACH;QAED,QACEA,eACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,iBACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,GAChB,CACA,EACJ;KACH;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QAE9C,QACEA,kEAAK,KAAK,EAAC,sBAAsB,IAC9B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,MAC1BA,gCACc,MAAM,EAClB,KAAK,EAAC,iBAAiB,IAEtB,IAAI,CAAC,UAAU,EAAE,CACd,CACP,EACDA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,gEACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,iBAAiB,EAAE,IAAI,CAAC,UAAU;gBAClC,aAAa,EAAE,IAAI;aACpB,EACD,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,qEACE,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,IAAI,EAAE,IAAI,CAAC,QAAQ,GACX,EACT,IAAI,CAAC,SAAS,CACb,CACA,EACL,IAAI,CAAC,aAAa,KACjBA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,kBAAM,IAAI,EAAE,IAAI,CAAC,aAAa,GAAI,CAC9B,CACP,CACG,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/panel/z-panel-elem/styles.css?tag=z-panel-elem&encapsulation=scoped","src/components/panel/z-panel-elem/index.tsx"],"sourcesContent":[":host {\n  width: inherit;\n  font-family: var(--font-family sans);\n  font-weight: var(--font-rg);\n}\n\n.panel-elem-container {\n  width: 100%;\n}\n\n.panel-elem-icon {\n  margin: auto calc(var(--space-unit) * 3);\n}\n\n.panel-elem-icon img {\n  display: block;\n  max-width: 96px;\n  height: 32px;\n  margin: auto;\n  object-fit: contain;\n}\n\n.panel-elem-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--space-unit) auto 0;\n  border-radius: var(--border-no-radius);\n  font-size: 12px;\n}\n\n.panel-elem-link > a.z-link {\n  padding: calc(var(--space-unit) * 0.5) 0;\n  font-weight: var(--font-sb);\n}\n\n.panel-elem-desc {\n  padding-top: var(--space-unit);\n  margin: 0;\n  letter-spacing: 0.16px;\n  text-align: center;\n}\n\na > z-icon {\n  margin-right: var(--space-unit);\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot `descrSlotName` - description content\n */\n@Component({\n  tag: \"z-panel-elem\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZPanelElem {\n  /** html element id (optional) */\n  @Prop()\n  elemid?: string;\n\n  /** image url source (optional) */\n  @Prop()\n  imgurl?: string;\n\n  /** alternative image text (optional) */\n  @Prop()\n  imgalt?: string;\n\n  /** icon link name (optional) */\n  @Prop()\n  linkicon?: string;\n\n  /** link label text*/\n  @Prop()\n  linklabel: string;\n\n  /** link url */\n  @Prop()\n  url: string;\n\n  /** link target (optional) */\n  @Prop()\n  target?: string = \"_blank\";\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** name of slot container (optional) */\n  @Prop()\n  descrSlotName?: string;\n\n  private renderIcon(): HTMLZIconElement {\n    if (this.isdisabled) {\n      return (\n        <img\n          src={this.imgurl}\n          alt={this.imgalt}\n        />\n      );\n    }\n\n    return (\n      <a\n        class=\"elem-icon\"\n        href={this.url}\n        target={this.target}\n      >\n        <img\n          src={this.imgurl}\n          alt={this.imgalt}\n        />\n      </a>\n    );\n  }\n\n  render(): HTMLDivElement {\n    const elemId = this.elemid ? this.elemid : \"\";\n\n    return (\n      <div class=\"panel-elem-container\">\n        {(this.imgurl || this.imgalt) && (\n          <div\n            aria-hidden=\"true\"\n            class=\"panel-elem-icon\"\n          >\n            {this.renderIcon()}\n          </div>\n        )}\n        <div class=\"panel-elem-link\">\n          <a\n            class={{\n              \"z-link\": true,\n              \"z-link-disabled\": this.isdisabled,\n              \"z-link-icon\": true,\n            }}\n            id={elemId + \"link_id\"}\n            href={this.url}\n            target={this.target}\n          >\n            <z-icon\n              height={14}\n              width={14}\n              name={this.linkicon}\n            ></z-icon>\n            {this.linklabel}\n          </a>\n        </div>\n        {this.descrSlotName && (\n          <div class=\"panel-elem-desc\">\n            <slot name={this.descrSlotName} />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-pocket-message.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-pocket-message.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,kvBAAkvB,CAAC;AACrwB,6BAAe,SAAS;;MCUX,cAAc;;;;IACzB,MAAM;QACJ,QACEA,oEACEA,qEAAQ,IAAI,EAAC,oBAAoB,GAAG,EACpCA,kEAAK,KAAK,EAAC,SAAS,IAClBA,oEAAQ,CACJ,EACNA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACF,EACN;KACH;;;;;;","names":["h"],"sources":["src/snowflakes/myz/pocket/z-pocket-message/styles.css?tag=z-pocket-message&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-message/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  display: grid;\n  padding-top: calc(var(--space-unit) * 1.5);\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  color: var(--color-surface05);\n  fill: var(--color-surface05);\n  font-size: 14px;\n  grid-template-columns: 36px auto;\n  grid-template-rows: auto auto;\n}\n\n:host > div > z-icon {\n  grid-column: 1 / 2;\n  grid-row: 1 / 2;\n}\n\n:host > div > div.content {\n  margin-bottom: var(--space-unit);\n  grid-column: 2 / 3;\n  grid-row: 1 / 2;\n}\n\n:host > div > div.cta-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  margin-bottom: var(--space-unit);\n  grid-column: 1 / 3;\n  grid-row: 2 / 3;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > div > div.cta-wrapper {\n    flex-direction: row;\n    grid-column: 2 / 3;\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot  - message body\n * @slot cta - message CTAs\n */\n@Component({\n  tag: \"z-pocket-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketMessage {\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <z-icon name=\"exclamation-circle\" />\n        <div class=\"content\">\n          <slot />\n        </div>\n        <div class=\"cta-wrapper\">\n          <slot name=\"cta\" />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-pocket_3.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"z-pocket.z-pocket-body.z-pocket-header.entry.cjs.js","mappings":"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","names":["stylesCss","PocketStatus","h","Hammer","handleKeyboardSubmit"],"sources":["src/snowflakes/myz/pocket/z-pocket/styles.css?tag=z-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket/index.tsx","src/snowflakes/myz/pocket/z-pocket-body/styles.css?tag=z-pocket-body&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-body/index.tsx","src/snowflakes/myz/pocket/z-pocket-header/styles.css?tag=z-pocket-header&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-header/index.tsx"],"sourcesContent":[":host {\n  width: inherit;\n  height: 100%;\n  margin: inherit;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > div {\n  width: inherit;\n  height: 100%;\n  margin: inherit;\n}\n\n:host > div > div.background {\n  position: fixed;\n  z-index: 998;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n}\n\n:host > div > div.background.open {\n  width: 100%;\n  height: 100%;\n}\n\n:host > div > div.content-wrapper {\n  position: fixed;\n  z-index: 999;\n  bottom: 0;\n  left: 0;\n  width: inherit;\n  margin: inherit;\n}\n\n:host > div > div.content-wrapper > div {\n  margin: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);\n  border-radius: var(--space-unit) var(--space-unit) 0 0;\n  box-shadow: 0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%);\n}\n","import {Component, Prop, h, Method, Event, EventEmitter, Listen, Element, Watch} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot - pocket content\n */\n@Component({\n  tag: \"z-pocket\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocket {\n  @Element() hostElement: HTMLZPocketElement;\n\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  /** open z-pocket */\n  @Method()\n  async open(): Promise<void> {\n    this.status = PocketStatus.OPEN;\n  }\n\n  /** close z-pocket */\n  @Method()\n  async close(): Promise<void> {\n    this.status = PocketStatus.CLOSED;\n  }\n\n  /** Emitted on pocket toggle, returns pocket id and status */\n  @Event()\n  pocketToggle: EventEmitter;\n\n  private emitPocketToggle(id: string, status: PocketStatus): void {\n    this.pocketToggle.emit({id, status});\n  }\n\n  @Listen(\"pocketHeaderClick\")\n  handlePocketHeaderClick(e: CustomEvent): void {\n    if (e.detail.id && e.detail.id === this.pocketid) {\n      switch (this.status) {\n        case PocketStatus.PREVIEW:\n        case PocketStatus.CLOSED:\n          this.status = PocketStatus.OPEN;\n          break;\n        case PocketStatus.OPEN:\n          this.status = PocketStatus.CLOSED;\n          break;\n      }\n    }\n  }\n\n  @Listen(\"pocketHeaderPan\")\n  handlePocketHeaderPan(e: CustomEvent): void {\n    if (e.detail.id && e.detail.id === this.pocketid) {\n      if (e.detail.direction === \"up\") {\n        this.status = PocketStatus.OPEN;\n      } else if (e.detail.direction === \"down\") {\n        this.status = PocketStatus.CLOSED;\n      }\n    }\n  }\n\n  @Watch(\"status\")\n  watchStatusHandler(newVal: PocketStatus): void {\n    this.emitPocketToggle(this.pocketid, newVal);\n  }\n\n  componentWillLoad(): void {\n    this.emitPocketToggle(this.pocketid, this.status);\n  }\n\n  private handleBackgroundClick(e: MouseEvent): void {\n    if ((e.target as HTMLElement).dataset.action == \"pocketBackground\") {\n      this.close();\n    }\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div>\n        <div\n          data-action=\"pocketBackground\"\n          data-pocket={this.pocketid}\n          class={`background ${this.status}`}\n          onClick={(e: MouseEvent) => this.handleBackgroundClick(e)}\n        />\n        <div\n          id={this.pocketid}\n          class=\"content-wrapper\"\n        >\n          <div>\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > main {\n  overflow: auto;\n  border-right: var(--border-size-small) solid var(--color-surface03);\n  border-left: var(--border-size-small) solid var(--color-surface03);\n  background: var(--color-surface01);\n  scrollbar-width: none;\n}\n\n:host > main.preview {\n  max-height: 225px;\n  transition: all 200ms ease-in-out, top 200ms ease-in-out;\n}\n\n:host > main.open {\n  max-height: calc(100vh - 48px);\n  transition: all 200ms ease-in-out, top 200ms ease-in-out;\n}\n\n:host > main.closed {\n  height: 0;\n  transition: all 200ms ease-in-out, top 200ms ease-in-out;\n}\n\n:host ::-webkit-scrollbar {\n  width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > main.preview {\n    max-height: 157px;\n  }\n}\n","import {Component, h, Prop, Listen} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot  - pocket body content\n */\n@Component({\n  tag: \"z-pocket-body\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketBody {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  @Listen(\"pocketToggle\", {target: \"body\"})\n  handlePocketToggle(e: CustomEvent): void {\n    if (e.detail.id && e.detail.id === this.pocketid) {\n      this.status = e.detail.status;\n    }\n  }\n\n  render(): HTMLElement {\n    return (\n      <main class={this.status}>\n        <slot />\n      </main>\n    );\n  }\n}\n",":host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > header {\n  display: flex;\n  height: 36px;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  border: var(--border-size-small) solid var(--color-surface03);\n  background: var(--color-surface01);\n  border-radius: var(--space-unit) var(--space-unit) 0 0;\n  cursor: pointer;\n}\n\n:host > header:focus {\n  outline: none;\n}\n\n:host > header::-moz-focus-inner {\n  border: 0;\n}\n","import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\nimport Hammer from \"hammerjs\";\n\n/**\n * @slot  - pocket header content\n */\n@Component({\n  tag: \"z-pocket-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPocketHeader {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  private swipeWrap: HTMLElement;\n\n  /** Emitted on pocket header click */\n  @Event()\n  pocketHeaderClick: EventEmitter;\n\n  private emitPocketHeaderClick(): void {\n    this.pocketHeaderClick.emit({id: this.pocketid});\n  }\n\n  /** Emitted on pocket header pan */\n  @Event()\n  pocketHeaderPan: EventEmitter;\n\n  private emitPocketHeaderPan(direction: string): void {\n    this.pocketHeaderPan.emit({id: this.pocketid, direction});\n  }\n\n  constructor() {\n    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);\n  }\n\n  componentDidLoad(): void {\n    // INFO: swipe handling\n    const mc = new Hammer(this.swipeWrap);\n    mc.get(\"pan\").set({direction: Hammer.DIRECTION_VERTICAL});\n    mc.on(\"panup\", () => this.emitPocketHeaderPan(\"up\"));\n    mc.on(\"pandown\", () => this.emitPocketHeaderPan(\"down\"));\n  }\n\n  render(): HTMLElement {\n    return (\n      <header\n        role=\"button\"\n        tabindex={0}\n        onClick={() => this.emitPocketHeaderClick()}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick)}\n        ref={(el) => (this.swipeWrap = el as HTMLElement)}\n      >\n        <slot />\n      </header>\n    );\n  }\n}\n"],"version":3}