@zanichelli/albe-web-components 19.4.0 → 19.6.0

package/dist/components/index5.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","ariaLabel","undefined","role","disabled","type","ButtonType","BUTTON","variant","ButtonVariant","PRIMARY","iconPosition","IconPosition","LEFT","size","ControlSize","BIG","hasText","componentWillLoad","_a","hostElement","textContent","trim","attributes","id","htmlid","class","renderIcon","icon","h","name","render","normalizedAriaLabel","normalizedRole","htmlrole","_b","href","Object","assign","target"],"sources":["src/components/z-button/styles.css?tag=z-button&encapsulation=scoped","src/components/z-button/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: 0;\n  --z-icon-left-margin: 0;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  pointer-events: none;\n}\n\n:host .z-button--container {\n  display: inline-flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border-width: var(--border-size-medium);\n  border-style: solid;\n  border-radius: var(--border-radius);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.3px;\n  line-height: 1;\n  outline: none;\n  text-decoration: none;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n:host .z-button--container:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host .z-button--container.z-button--has-text {\n  min-width: calc(var(--space-unit) * 8);\n  padding: 0 calc(var(--space-unit) * 2);\n}\n\n:host([icon-position=\"right\"]) .z-button--container.z-button--has-text {\n  flex-direction: row-reverse;\n}\n\n:host([size=\"big\"]) .z-button--container {\n  min-width: 44px;\n  height: 44px;\n}\n\n:host([size=\"small\"]) .z-button--container {\n  min-width: 36px;\n  height: 36px;\n}\n\n:host([size=\"x-small\"]) .z-button--container {\n  min-width: 32px;\n  height: 32px;\n}\n\n:host([variant=\"primary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-primary01);\n  color: var(--color-text-inverse);\n}\n\n@media (hover: hover) {\n  :host([variant=\"primary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-hover-primary);\n    color: var(--color-text-inverse);\n  }\n}\n\n:host([variant=\"primary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-text-inverse);\n}\n\n:host([variant=\"primary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"secondary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"secondary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-button-secondary);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"secondary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-button-secondary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n}\n\n:host([variant=\"secondary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"tertiary\"]) .z-button--container:hover {\n    border-color: var(--color-primary03);\n    background-color: var(--color-primary03);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:focus:focus-visible {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:active {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  box-shadow: var(--shadow-2);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition} from \"../../beans\";\n\n/**\n * @slot - button label\n */\n@Component({\n  tag: \"z-button\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZButton implements ComponentInterface {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** defines a string value that labels the internal interactive element. Used for accessibility. */\n  @Prop()\n  ariaLabel: string | undefined = undefined;\n\n  /**\n   * Use `htmlrole` instead.\n   * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.\n   */\n  @Prop()\n  role = \"\";\n\n  /** defines role attribute, used for accessibility. */\n  @Prop()\n  htmlrole?: string;\n\n  /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */\n  @Prop()\n  href?: string;\n\n  /** HTML a target attribute. */\n  @Prop()\n  target?: string;\n\n  /** Identifier, should be unique. */\n  @Prop()\n  htmlid?: string;\n\n  /** HTML button name attribute. */\n  @Prop()\n  name?: string;\n\n  /** HTML button disabled attribute. */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** HTML button type attribute. */\n  @Prop()\n  type?: ButtonType = ButtonType.BUTTON;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop({reflect: true})\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  /** `z-icon` name to use (optional). */\n  @Prop()\n  icon?: string;\n\n  /** the button icon position. Defaults to `left` */\n  @Prop({reflect: true})\n  iconPosition?: IconPosition = IconPosition.LEFT;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ButtonSize | ControlSize = ControlSize.BIG;\n\n  private hasText = false;\n\n  componentWillLoad(): void {\n    this.hasText = !!this.hostElement.textContent?.trim();\n  }\n\n  private get attributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      id: this.htmlid,\n      class: {\n        \"z-button--container\": true,\n        \"z-button--has-text\": this.hasText,\n      },\n    };\n  }\n\n  private renderIcon(): HTMLZIconElement | undefined {\n    return this.icon && <z-icon name={this.icon} />;\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    const normalizedAriaLabel = this.ariaLabel?.trim() || undefined;\n    const normalizedRole = this.htmlrole || this.role?.trim() || undefined;\n\n    if (this.href) {\n      return (\n        <a\n          {...this.attributes}\n          aria-label={normalizedAriaLabel}\n          href={this.href}\n          target={this.target}\n        >\n          {this.renderIcon()}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.attributes}\n        aria-label={normalizedAriaLabel}\n        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={normalizedRole}\n      >\n        {this.renderIcon()}\n        <slot />\n      </button>\n    );\n  }\n}\n"],"mappings":"mMAAA,MAAMA,EAAY,IAAM,04H,MCaXC,EAAOC,EAAA,MAAAD,UAAAE,EANpB,WAAAC,CAAAC,G,4CAWEC,KAAAC,UAAgCC,UAOhCF,KAAAG,KAAO,GAwBPH,KAAAI,SAAqB,MAIrBJ,KAAAK,KAAoBC,EAAWC,OAI/BP,KAAAQ,QAA0BC,EAAcC,QAQxCV,KAAAW,aAA8BC,EAAaC,KAI3Cb,KAAAc,KAAkCC,EAAYC,IAEtChB,KAAAiB,QAAU,KAoDnB,CAlDC,iBAAAC,G,MACElB,KAAKiB,YAAYE,EAAAnB,KAAKoB,YAAYC,eAAW,MAAAF,SAAA,SAAAA,EAAEG,O,CAGjD,cAAYC,GACV,MAAO,CACLC,GAAIxB,KAAKyB,OACTC,MAAO,CACL,sBAAuB,KACvB,qBAAsB1B,KAAKiB,S,CAKzB,UAAAU,GACN,OAAO3B,KAAK4B,MAAQC,EAAA,UAAQC,KAAM9B,KAAK4B,M,CAGzC,MAAAG,G,QACE,MAAMC,IAAsBb,EAAAnB,KAAKC,aAAS,MAAAkB,SAAA,SAAAA,EAAEG,SAAUpB,UACtD,MAAM+B,EAAiBjC,KAAKkC,YAAYC,EAAAnC,KAAKG,QAAI,MAAAgC,SAAA,SAAAA,EAAEb,SAAUpB,UAE7D,GAAIF,KAAKoC,KAAM,CACb,OACEP,EAAA,IAAAQ,OAAAC,OAAA,GACMtC,KAAKuB,WAAU,cACPS,EACZI,KAAMpC,KAAKoC,KACXG,OAAQvC,KAAKuC,SAEZvC,KAAK2B,aACNE,EAAA,a,CAKN,OACEA,EAAA,SAAAQ,OAAAC,OAAA,GACMtC,KAAKuB,WAAU,cACPS,EACZF,KAAM9B,KAAK8B,KACXzB,KAAML,KAAKK,KACXD,SAAUJ,KAAKI,SACfD,KAAM8B,IAELjC,KAAK2B,aACNE,EAAA,a","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","ariaLabel","undefined","role","disabled","type","ButtonType","BUTTON","variant","ButtonVariant","PRIMARY","iconPosition","IconPosition","LEFT","size","ControlSize","BIG","hasText","componentWillLoad","_a","hostElement","textContent","trim","attributes","id","htmlid","class","renderIcon","icon","h","name","render","normalizedAriaLabel","normalizedRole","htmlrole","_b","shouldRenderAsLink","href","Object","assign","target"],"sources":["src/components/z-button/styles.css?tag=z-button&encapsulation=scoped","src/components/z-button/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: 0;\n  --z-icon-left-margin: 0;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  pointer-events: none;\n}\n\n:host .z-button--container {\n  display: inline-flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border-width: var(--border-size-medium);\n  border-style: solid;\n  border-radius: var(--border-radius);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.3px;\n  line-height: 1;\n  outline: none;\n  text-decoration: none;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n:host .z-button--container:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host .z-button--container.z-button--has-text {\n  min-width: calc(var(--space-unit) * 8);\n  padding: 0 calc(var(--space-unit) * 2);\n}\n\n:host([icon-position=\"right\"]) .z-button--container.z-button--has-text {\n  flex-direction: row-reverse;\n}\n\n:host([size=\"big\"]) .z-button--container {\n  min-width: 44px;\n  height: 44px;\n}\n\n:host([size=\"small\"]) .z-button--container {\n  min-width: 36px;\n  height: 36px;\n}\n\n:host([size=\"x-small\"]) .z-button--container {\n  min-width: 32px;\n  height: 32px;\n}\n\n:host([variant=\"primary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-primary01);\n  color: var(--color-text-inverse);\n}\n\n@media (hover: hover) {\n  :host([variant=\"primary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-hover-primary);\n    color: var(--color-text-inverse);\n  }\n}\n\n:host([variant=\"primary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-text-inverse);\n}\n\n:host([variant=\"primary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"secondary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"secondary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-button-secondary);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"secondary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-button-secondary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n}\n\n:host([variant=\"secondary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"tertiary\"]) .z-button--container:hover {\n    border-color: var(--color-primary03);\n    background-color: var(--color-primary03);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:focus:focus-visible {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:active {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  box-shadow: var(--shadow-2);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition} from \"../../beans\";\n\n/**\n * @slot - button label\n */\n@Component({\n  tag: \"z-button\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZButton implements ComponentInterface {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** defines a string value that labels the internal interactive element. Used for accessibility. */\n  @Prop()\n  ariaLabel: string | undefined = undefined;\n\n  /**\n   * Use `htmlrole` instead.\n   * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.\n   */\n  @Prop()\n  role = \"\";\n\n  /** defines role attribute, used for accessibility. */\n  @Prop()\n  htmlrole?: string;\n\n  /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */\n  @Prop()\n  href?: string;\n\n  /** HTML a target attribute. */\n  @Prop()\n  target?: string;\n\n  /** Identifier, should be unique. */\n  @Prop()\n  htmlid?: string;\n\n  /** HTML button name attribute. */\n  @Prop()\n  name?: string;\n\n  /** HTML button disabled attribute. */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** HTML button type attribute. */\n  @Prop()\n  type?: ButtonType = ButtonType.BUTTON;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop({reflect: true})\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  /** `z-icon` name to use (optional). */\n  @Prop()\n  icon?: string;\n\n  /** the button icon position. Defaults to `left` */\n  @Prop({reflect: true})\n  iconPosition?: IconPosition = IconPosition.LEFT;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ButtonSize | ControlSize = ControlSize.BIG;\n\n  private hasText = false;\n\n  componentWillLoad(): void {\n    this.hasText = !!this.hostElement.textContent?.trim();\n  }\n\n  private get attributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      id: this.htmlid,\n      class: {\n        \"z-button--container\": true,\n        \"z-button--has-text\": this.hasText,\n      },\n    };\n  }\n\n  private renderIcon(): HTMLZIconElement | undefined {\n    return this.icon && <z-icon name={this.icon} />;\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    const normalizedAriaLabel = this.ariaLabel?.trim() || undefined;\n    const normalizedRole = this.htmlrole || this.role?.trim() || undefined;\n    const shouldRenderAsLink = normalizedRole === \"link\";\n\n    if (this.href || shouldRenderAsLink) {\n      return (\n        <a\n          {...this.attributes}\n          aria-label={normalizedAriaLabel}\n          href={this.href || \"#\"}\n          target={this.target}\n        >\n          {this.renderIcon()}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.attributes}\n        aria-label={normalizedAriaLabel}\n        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={normalizedRole}\n      >\n        {this.renderIcon()}\n        <slot />\n      </button>\n    );\n  }\n}\n"],"mappings":"mMAAA,MAAMA,EAAY,IAAM,04H,MCaXC,EAAOC,EAAA,MAAAD,UAAAE,EANpB,WAAAC,CAAAC,G,4CAWEC,KAAAC,UAAgCC,UAOhCF,KAAAG,KAAO,GAwBPH,KAAAI,SAAqB,MAIrBJ,KAAAK,KAAoBC,EAAWC,OAI/BP,KAAAQ,QAA0BC,EAAcC,QAQxCV,KAAAW,aAA8BC,EAAaC,KAI3Cb,KAAAc,KAAkCC,EAAYC,IAEtChB,KAAAiB,QAAU,KAqDnB,CAnDC,iBAAAC,G,MACElB,KAAKiB,YAAYE,EAAAnB,KAAKoB,YAAYC,eAAW,MAAAF,SAAA,SAAAA,EAAEG,O,CAGjD,cAAYC,GACV,MAAO,CACLC,GAAIxB,KAAKyB,OACTC,MAAO,CACL,sBAAuB,KACvB,qBAAsB1B,KAAKiB,S,CAKzB,UAAAU,GACN,OAAO3B,KAAK4B,MAAQC,EAAA,UAAQC,KAAM9B,KAAK4B,M,CAGzC,MAAAG,G,QACE,MAAMC,IAAsBb,EAAAnB,KAAKC,aAAS,MAAAkB,SAAA,SAAAA,EAAEG,SAAUpB,UACtD,MAAM+B,EAAiBjC,KAAKkC,YAAYC,EAAAnC,KAAKG,QAAI,MAAAgC,SAAA,SAAAA,EAAEb,SAAUpB,UAC7D,MAAMkC,EAAqBH,IAAmB,OAE9C,GAAIjC,KAAKqC,MAAQD,EAAoB,CACnC,OACEP,EAAA,IAAAS,OAAAC,OAAA,GACMvC,KAAKuB,WAAU,cACPS,EACZK,KAAMrC,KAAKqC,MAAQ,IACnBG,OAAQxC,KAAKwC,SAEZxC,KAAK2B,aACNE,EAAA,a,CAKN,OACEA,EAAA,SAAAS,OAAAC,OAAA,GACMvC,KAAKuB,WAAU,cACPS,EACZF,KAAM9B,KAAK8B,KACXzB,KAAML,KAAKK,KACXD,SAAUJ,KAAKI,SACfD,KAAM8B,IAELjC,KAAK2B,aACNE,EAAA,a","ignoreList":[]}

package/dist/components/index6.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as i,HTMLElement as e,h as r,Host as d,transformTag as s}from"@stencil/core/internal/client";import{D as t,h as a}from"./index2.js";const v=()=>`.sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}`;const o=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.size=t.SMALL;this.color="gray200";this.orientation=a.HORIZONTAL}render(){return r(d,{key:"ad8d9a15195becf87ba4a03e73a279ecee4d4b93",class:`divider-${this.size} divider-${this.orientation}`,style:{backgroundColor:`var(--${this.color})`}})}static get style(){return v()}},[2,"z-divider",{size:[1],color:[1],orientation:[1]}]);function c(){if(typeof customElements==="undefined"){return}const i=["z-divider"];i.forEach((i=>{switch(i){case"z-divider":if(!customElements.get(s(i))){customElements.define(s(i),o)}break}}))}export{o as Z,c as d};
+import{proxyCustomElement as i,HTMLElement as e,h as r,Host as d,transformTag as s}from"@stencil/core/internal/client";import{D as t,h as a}from"./index2.js";const v=()=>`.sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}`;const o=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.size=t.SMALL;this.color="gray200";this.orientation=a.HORIZONTAL}render(){return r(d,{key:"43a290ca09c39c630779133fa5fd9912fca785e0",class:`divider-${this.size} divider-${this.orientation}`,style:{backgroundColor:`var(--${this.color})`}})}static get style(){return v()}},[2,"z-divider",{size:[1],color:[1],orientation:[1]}]);function c(){if(typeof customElements==="undefined"){return}const i=["z-divider"];i.forEach((i=>{switch(i){case"z-divider":if(!customElements.get(s(i))){customElements.define(s(i),o)}break}}))}export{o as Z,c as d};
 //# sourceMappingURL=index6.js.map

package/dist/components/index7.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Fragment as r,Host as n,transformTag as c}from"@stencil/core/internal/client";import{k as a,e as p,I as o,f as u}from"./index2.js";import{r as l,d as h}from"./utils.js";import{d as z}from"./index3.js";import{d}from"./index8.js";const b=()=>`.sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{box-sizing:border-box}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}input[type="search"].sc-z-input::-webkit-search-decoration,input[type="search"].sc-z-input::-webkit-search-cancel-button,input[type="search"].sc-z-input::-webkit-search-results-button,input[type="search"].sc-z-input::-webkit-search-results-decoration{display:none}input.sc-z-input,textarea.sc-z-input{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size="small"].sc-z-input-h input.sc-z-input,[size="small"].sc-z-input-h textarea.sc-z-input,[size="x-small"].sc-z-input-h input.sc-z-input,[size="x-small"].sc-z-input-h textarea.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.sc-z-input-h:not([readonly="true"]) .textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{border-color:var(--color-form-surface03);box-shadow:none}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-form-inverse-warning)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-form-disabled03);box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}[disabled].sc-z-input-h:not([disabled="false"]) label.z-label.sc-z-input{color:var(--color-disabled03)}`;const f=()=>`.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size="small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size="x-small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{display:flex;min-width:24px;min-height:24px;align-items:center;justify-content:center;cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}`;const m=()=>`.textarea-wrapper.sc-z-input{width:100%;height:100%;padding:calc(var(--space-unit) * 1.5)}.textarea-wrapper.sc-z-input:not(.input-error,.input-success.sc-z-input,.input-warning).sc-z-input{background-color:var(--color-form-background)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;color:currentcolor;resize:none}`;const x=()=>`.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-default-text);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;min-height:24px;align-items:center;padding:3px 0;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}`;const w=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.inputChange=e(this,"inputChange",7);this.startTyping=e(this,"startTyping",7);this.stopTyping=e(this,"stopTyping",7);this.inputCheck=e(this,"inputCheck",7);this.inputFocus=e(this,"inputFocus",7);this.inputBlur=e(this,"inputBlur",7);this.htmlid=`id-${l()}`;this.ariaLabel="";this.htmlAriaExpanded="";this.disabled=false;this.readonly=false;this.required=false;this.checked=false;this.message=true;this.labelPosition=a.RIGHT;this.role="";this.hasclearicon=true;this.size=p.BIG;this.isTyping=false;this.passwordHidden=true;this.typingtimeout=300}inputCheckListener(i){const t=i.detail;switch(this.type){case o.RADIO:if(t.type===o.RADIO&&t.name===this.name&&t.id!==this.htmlid){this.checked=false}break}}async isChecked(){switch(this.type){case o.CHECKBOX:case o.RADIO:return this.checked;default:console.warn("`isChecked` method is only available for type `checkbox` and `radio`");return false}}emitInputChange(i){if(!this.isTyping){this.emitStartTyping()}let t;if(this.type===o.TEXTAREA){t=this.getValidity("textarea")}else{t=this.getValidity("input")}this.value=i;this.inputChange.emit({value:i,validity:t});clearTimeout(this.timer);this.timer=setTimeout((()=>{this.emitStopTyping(this.value,t)}),this.typingtimeout)}emitStartTyping(){this.isTyping=true;this.startTyping.emit()}emitStopTyping(i,t){this.isTyping=false;this.stopTyping.emit({value:i,validity:t})}emitInputCheck(i){this.inputCheck.emit({id:this.htmlid,checked:i,type:this.type,name:this.name,value:this.value,validity:this.getValidity("input")})}emitInputFocus(){this.inputFocus.emit({id:this.htmlid})}emitInputBlur(){this.inputBlur.emit({id:this.htmlid})}getValidity(i){const t=this.hostElement.querySelector(i);return t.validity}getTextAttributes(){return{id:this.htmlid,name:this.name,placeholder:this.placeholder,value:this.value,disabled:this.disabled,readonly:this.readonly,required:this.required,title:this.htmltitle,minlength:this.minlength,maxlength:this.maxlength,class:{[`input-${this.status}`]:!!this.status},autocomplete:this.autocomplete,onInput:i=>this.emitInputChange(i.target.value)}}getNumberAttributes(i){if(i!=o.NUMBER){return}return{min:this.min,max:this.max,step:this.step}}getPatternAttribute(i){if(i!=o.PASSWORD&&i!=o.TEXT&&i!=o.TEL&&i!=o.SEARCH&&i!=o.URL&&i!=o.EMAIL){return}return{pattern:this.pattern}}inputHasMessage(){if(h(this.message)===false||h(this.message)===true){return false}return true}getAriaAttributes(){return Object.assign(Object.assign(Object.assign({},this.role?{role:this.role}:{}),this.htmlAriaDescribedBy?{"aria-describedby":this.htmlAriaDescribedBy}:{}),this.htmlAriaLabelledby?{"aria-labelledby":this.htmlAriaLabelledby}:{})}getTextAriaAttributes(){const i=this.htmlAriaExpanded?{"aria-expanded":this.htmlAriaExpanded}:{};const t=this.htmlAriaControls?{"aria-controls":this.htmlAriaControls}:{};const e=this.htmlAriaAutocomplete?{"aria-autocomplete":this.htmlAriaAutocomplete}:{};const s=this.htmlAriaActivedescendant?{"aria-activedescendant":this.htmlAriaActivedescendant}:{};const r=this.htmlAriaDescribedBy||this.inputHasMessage()?{"aria-describedby":this.htmlAriaDescribedBy||`${this.htmlid}-message`}:{};const n=this.status===u.ERROR?{"aria-invalid":"true"}:{};return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},this.getAriaAttributes()),i),t),e),s),r),n)}getFocusBlurAttributes(){return{onFocus:()=>this.emitInputFocus(),onBlur:()=>this.emitInputBlur()}}renderInputText(i=o.TEXT){const t=this.ariaLabel?{"aria-label":this.ariaLabel}:{};const e=Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},this.getTextAttributes()),this.getNumberAttributes(i)),this.getPatternAttribute(i)),t),this.getTextAriaAttributes()),this.getFocusBlurAttributes());if(this.icon||i===o.PASSWORD){Object.assign(e.class,{"has-icon":true})}if(this.hasclearicon&&i!=o.NUMBER){Object.assign(e.class,{"has-clear-icon":true})}return s("div",{class:"text-wrapper"},this.renderLabel(),s("div",null,s("input",Object.assign({type:i===o.PASSWORD&&!this.passwordHidden?o.TEXT:i},e,{ref:i=>this.inputRef=i})),this.renderIcons()),this.renderMessage())}renderLabel(){if(!this.label){return}return s("label",{class:"z-label body-5-sb",id:`${this.htmlid}_label`,htmlFor:this.htmlid},this.label)}renderIcons(){return s("span",{class:"icons-wrapper"},this.renderResetIcon(),this.renderIcon())}renderIcon(){if(this.type===o.PASSWORD){return this.renderShowHidePassword()}if(!this.icon){return}return s("z-icon",{name:this.icon,class:{[this.size]:true,"input-icon":true}})}renderResetIcon(){let i=false;if(!this.hasclearicon||!this.value||this.disabled||this.readonly||this.type==o.NUMBER){i=true}return s("button",{type:"button",class:{"reset-icon":true,"input-icon":true,hidden:i},"aria-label":"cancella il contenuto dell'input",onClick:()=>{this.inputRef.value="";this.emitInputChange("");this.inputRef.focus()}},s("z-icon",{name:"multiply",class:this.size}))}renderShowHidePassword(){return s("button",{type:"button",class:"input-icon toggle-password-icon",disabled:this.disabled,"aria-label":this.passwordHidden?"mostra password":"nascondi password",onClick:()=>this.passwordHidden=!this.passwordHidden},s("z-icon",{name:this.passwordHidden?"view-filled":"view-off-filled",class:this.size}))}renderMessage(){if(h(this.message)===false){return}return s("z-input-message",{"html-id":`${this.htmlid}-message`,message:h(this.message)===true?undefined:this.message,status:this.status,class:this.size,disabled:this.disabled})}renderTextarea(){const i=this.getTextAttributes();const t=this.getTextAriaAttributes();return s(r,null,this.renderLabel(),s("div",{class:Object.assign(Object.assign({},i.class),{"textarea-wrapper":true,readonly:!!i.readonly})},s("textarea",Object.assign({},i,t,{class:Object.assign(Object.assign({},i.class),{"z-scrollbar":true}),"aria-label":this.ariaLabel||undefined}))),this.renderMessage())}handleCheck(i){this.checked=i.target.checked;this.emitInputCheck(this.checked)}renderCheckbox(){return s("div",{class:"checkbox-wrapper"},s("input",Object.assign({id:this.htmlid,type:"checkbox",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value},this.getAriaAttributes(),this.getFocusBlurAttributes())),s("label",{htmlFor:this.htmlid,class:{"checkbox-label":true,after:this.labelPosition===a.RIGHT,before:this.labelPosition===a.LEFT}},s("z-icon",{name:this.checked?"checkbox-checked":"checkbox",class:this.size}),this.label&&s("span",{innerHTML:this.label})))}renderRadio(){return s("div",{class:"radio-wrapper"},s("input",Object.assign({id:this.htmlid,type:"radio",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,onChange:this.handleCheck.bind(this),value:this.value},this.getAriaAttributes(),this.getFocusBlurAttributes())),s("label",{htmlFor:this.htmlid,class:{"radio-label":true,after:this.labelPosition===a.RIGHT,before:this.labelPosition===a.LEFT}},s("z-icon",{name:this.checked?"radio-button-checked":"radio-button",class:this.size}),this.label&&s("span",{innerHTML:this.label})))}render(){let i;switch(this.type){case o.TEXTAREA:i=this.renderTextarea();break;case o.CHECKBOX:i=this.renderCheckbox();break;case o.RADIO:i=this.renderRadio();break;default:i=this.renderInputText(this.type)}return s(n,{key:"2536f6387f2325190522fc8cc4f788147bead800"},i)}get hostElement(){return this}static get style(){return b()+(f()+(m()+x()))}},[2,"z-input",{htmlid:[1],type:[1],name:[1],label:[1],ariaLabel:[1,"aria-label"],htmlAriaExpanded:[1,"html-aria-expanded"],htmlAriaControls:[1,"html-aria-controls"],htmlAriaAutocomplete:[1,"html-aria-autocomplete"],htmlAriaActivedescendant:[1,"html-aria-activedescendant"],htmlAriaDescribedBy:[1,"html-aria-described-by"],htmlAriaLabelledby:[1,"html-aria-labelledby"],value:[1025],disabled:[516],readonly:[4],required:[4],checked:[1028],placeholder:[1],htmltitle:[1],status:[1],message:[8],labelPosition:[1,"label-position"],autocomplete:[1],role:[1],hasclearicon:[4],icon:[1],min:[2],minlength:[2],max:[2],maxlength:[2],step:[2],pattern:[1],size:[513],isTyping:[32],passwordHidden:[32],isChecked:[64]},[[4,"inputCheck","inputCheckListener"]]]);function v(){if(typeof customElements==="undefined"){return}const i=["z-input","z-icon","z-input-message"];i.forEach((i=>{switch(i){case"z-input":if(!customElements.get(c(i))){customElements.define(c(i),w)}break;case"z-icon":if(!customElements.get(c(i))){z()}break;case"z-input-message":if(!customElements.get(c(i))){d()}break}}))}export{w as Z,v as d};
+import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Fragment as r,Host as n,transformTag as c}from"@stencil/core/internal/client";import{k as a,e as p,I as o,f as u}from"./index2.js";import{r as l,d as h}from"./utils.js";import{d as z}from"./index3.js";import{d}from"./index8.js";const b=()=>`.sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{box-sizing:border-box}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}input[type="search"].sc-z-input::-webkit-search-decoration,input[type="search"].sc-z-input::-webkit-search-cancel-button,input[type="search"].sc-z-input::-webkit-search-results-button,input[type="search"].sc-z-input::-webkit-search-results-decoration{display:none}input.sc-z-input,textarea.sc-z-input{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size="small"].sc-z-input-h input.sc-z-input,[size="small"].sc-z-input-h textarea.sc-z-input,[size="x-small"].sc-z-input-h input.sc-z-input,[size="x-small"].sc-z-input-h textarea.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.sc-z-input-h:not([readonly="true"]) .textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{border-color:var(--color-form-surface03);box-shadow:none}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-form-inverse-warning)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-form-disabled03);box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}[disabled].sc-z-input-h:not([disabled="false"]) label.z-label.sc-z-input{color:var(--color-disabled03)}`;const f=()=>`.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size="small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size="x-small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{display:flex;min-width:24px;min-height:24px;align-items:center;justify-content:center;cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}`;const m=()=>`.textarea-wrapper.sc-z-input{width:100%;height:100%;padding:calc(var(--space-unit) * 1.5)}.textarea-wrapper.sc-z-input:not(.input-error,.input-success.sc-z-input,.input-warning).sc-z-input{background-color:var(--color-form-background)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;color:currentcolor;resize:none}`;const x=()=>`.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-default-text);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;min-height:24px;align-items:center;padding:3px 0;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}`;const w=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.inputChange=e(this,"inputChange",7);this.startTyping=e(this,"startTyping",7);this.stopTyping=e(this,"stopTyping",7);this.inputCheck=e(this,"inputCheck",7);this.inputFocus=e(this,"inputFocus",7);this.inputBlur=e(this,"inputBlur",7);this.htmlid=`id-${l()}`;this.ariaLabel="";this.htmlAriaExpanded="";this.disabled=false;this.readonly=false;this.required=false;this.checked=false;this.message=true;this.labelPosition=a.RIGHT;this.role="";this.hasclearicon=true;this.size=p.BIG;this.isTyping=false;this.passwordHidden=true;this.typingtimeout=300}inputCheckListener(i){const t=i.detail;switch(this.type){case o.RADIO:if(t.type===o.RADIO&&t.name===this.name&&t.id!==this.htmlid){this.checked=false}break}}async isChecked(){switch(this.type){case o.CHECKBOX:case o.RADIO:return this.checked;default:console.warn("`isChecked` method is only available for type `checkbox` and `radio`");return false}}emitInputChange(i){if(!this.isTyping){this.emitStartTyping()}let t;if(this.type===o.TEXTAREA){t=this.getValidity("textarea")}else{t=this.getValidity("input")}this.value=i;this.inputChange.emit({value:i,validity:t});clearTimeout(this.timer);this.timer=setTimeout((()=>{this.emitStopTyping(this.value,t)}),this.typingtimeout)}emitStartTyping(){this.isTyping=true;this.startTyping.emit()}emitStopTyping(i,t){this.isTyping=false;this.stopTyping.emit({value:i,validity:t})}emitInputCheck(i){this.inputCheck.emit({id:this.htmlid,checked:i,type:this.type,name:this.name,value:this.value,validity:this.getValidity("input")})}emitInputFocus(){this.inputFocus.emit({id:this.htmlid})}emitInputBlur(){this.inputBlur.emit({id:this.htmlid})}getValidity(i){const t=this.hostElement.querySelector(i);return t.validity}getTextAttributes(){return{id:this.htmlid,name:this.name,placeholder:this.placeholder,value:this.value,disabled:this.disabled,readonly:this.readonly,required:this.required,title:this.htmltitle,minlength:this.minlength,maxlength:this.maxlength,class:{[`input-${this.status}`]:!!this.status},autocomplete:this.autocomplete,onInput:i=>this.emitInputChange(i.target.value)}}getNumberAttributes(i){if(i!=o.NUMBER){return}return{min:this.min,max:this.max,step:this.step}}getPatternAttribute(i){if(i!=o.PASSWORD&&i!=o.TEXT&&i!=o.TEL&&i!=o.SEARCH&&i!=o.URL&&i!=o.EMAIL){return}return{pattern:this.pattern}}inputHasMessage(){if(h(this.message)===false||h(this.message)===true){return false}return true}getAriaAttributes(){return Object.assign(Object.assign(Object.assign({},this.role?{role:this.role}:{}),this.htmlAriaDescribedBy?{"aria-describedby":this.htmlAriaDescribedBy}:{}),this.htmlAriaLabelledby?{"aria-labelledby":this.htmlAriaLabelledby}:{})}getTextAriaAttributes(){const i=this.htmlAriaExpanded?{"aria-expanded":this.htmlAriaExpanded}:{};const t=this.htmlAriaControls?{"aria-controls":this.htmlAriaControls}:{};const e=this.htmlAriaAutocomplete?{"aria-autocomplete":this.htmlAriaAutocomplete}:{};const s=this.htmlAriaActivedescendant?{"aria-activedescendant":this.htmlAriaActivedescendant}:{};const r=this.htmlAriaDescribedBy||this.inputHasMessage()?{"aria-describedby":this.htmlAriaDescribedBy||`${this.htmlid}-message`}:{};const n=this.status===u.ERROR?{"aria-invalid":"true"}:{};const c=this.required?{"aria-required":"true"}:{};return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},this.getAriaAttributes()),i),t),e),s),r),n),c)}getFocusBlurAttributes(){return{onFocus:()=>this.emitInputFocus(),onBlur:()=>this.emitInputBlur()}}renderInputText(i=o.TEXT){const t=this.ariaLabel?{"aria-label":this.ariaLabel}:{};const e=Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},this.getTextAttributes()),this.getNumberAttributes(i)),this.getPatternAttribute(i)),t),this.getTextAriaAttributes()),this.getFocusBlurAttributes());if(this.icon||i===o.PASSWORD){Object.assign(e.class,{"has-icon":true})}if(this.hasclearicon&&i!=o.NUMBER){Object.assign(e.class,{"has-clear-icon":true})}return s("div",{class:"text-wrapper"},this.renderLabel(),s("div",null,s("input",Object.assign({type:i===o.PASSWORD&&!this.passwordHidden?o.TEXT:i},e,{ref:i=>this.inputRef=i})),this.renderIcons()),this.renderMessage())}renderLabel(){if(!this.label){return}return s("label",{class:"z-label body-5-sb",id:`${this.htmlid}_label`,htmlFor:this.htmlid},this.label)}renderIcons(){return s("span",{class:"icons-wrapper"},this.renderResetIcon(),this.renderIcon())}renderIcon(){if(this.type===o.PASSWORD){return this.renderShowHidePassword()}if(!this.icon){return}return s("z-icon",{name:this.icon,class:{[this.size]:true,"input-icon":true}})}renderResetIcon(){let i=false;if(!this.hasclearicon||!this.value||this.disabled||this.readonly||this.type==o.NUMBER){i=true}return s("button",{type:"button",class:{"reset-icon":true,"input-icon":true,hidden:i},"aria-label":"cancella il contenuto dell'input",onClick:()=>{this.inputRef.value="";this.emitInputChange("");this.inputRef.focus()}},s("z-icon",{name:"multiply",class:this.size}))}renderShowHidePassword(){return s("button",{type:"button",class:"input-icon toggle-password-icon",disabled:this.disabled,"aria-label":"mostra password","aria-pressed":!this.passwordHidden?"true":"false",onClick:()=>this.passwordHidden=!this.passwordHidden},s("z-icon",{name:this.passwordHidden?"view-filled":"view-off-filled",class:this.size}))}renderMessage(){if(h(this.message)===false){return}return s("z-input-message",{"html-id":`${this.htmlid}-message`,message:h(this.message)===true?undefined:this.message,status:this.status,class:this.size,disabled:this.disabled})}renderTextarea(){const i=this.getTextAttributes();const t=this.getTextAriaAttributes();return s(r,null,this.renderLabel(),s("div",{class:Object.assign(Object.assign({},i.class),{"textarea-wrapper":true,readonly:!!i.readonly})},s("textarea",Object.assign({},i,t,{class:Object.assign(Object.assign({},i.class),{"z-scrollbar":true}),"aria-label":this.ariaLabel||undefined}))),this.renderMessage())}handleCheck(i){this.checked=i.target.checked;this.emitInputCheck(this.checked)}renderCheckbox(){const i=this.required?{"aria-required":"true"}:{};return s("div",{class:"checkbox-wrapper"},s("input",Object.assign({id:this.htmlid,type:"checkbox",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value},i,this.getAriaAttributes(),this.getFocusBlurAttributes())),s("label",{htmlFor:this.htmlid,class:{"checkbox-label":true,after:this.labelPosition===a.RIGHT,before:this.labelPosition===a.LEFT}},s("z-icon",{name:this.checked?"checkbox-checked":"checkbox",class:this.size}),this.label&&s("span",{innerHTML:this.label})))}renderRadio(){const i=this.required?{"aria-required":"true"}:{};return s("div",{class:"radio-wrapper"},s("input",Object.assign({id:this.htmlid,type:"radio",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value},this.getAriaAttributes(),this.getFocusBlurAttributes(),i)),s("label",{htmlFor:this.htmlid,class:{"radio-label":true,after:this.labelPosition===a.RIGHT,before:this.labelPosition===a.LEFT}},s("z-icon",{name:this.checked?"radio-button-checked":"radio-button",class:this.size}),this.label&&s("span",{innerHTML:this.label})))}render(){let i;switch(this.type){case o.TEXTAREA:i=this.renderTextarea();break;case o.CHECKBOX:i=this.renderCheckbox();break;case o.RADIO:i=this.renderRadio();break;default:i=this.renderInputText(this.type)}return s(n,{key:"7a98a32f222c422a2f253f0cadd78cf27e0c8913"},i)}get hostElement(){return this}static get style(){return b()+(f()+(m()+x()))}},[2,"z-input",{htmlid:[1],type:[1],name:[1],label:[1],ariaLabel:[1,"aria-label"],htmlAriaExpanded:[1,"html-aria-expanded"],htmlAriaControls:[1,"html-aria-controls"],htmlAriaAutocomplete:[1,"html-aria-autocomplete"],htmlAriaActivedescendant:[1,"html-aria-activedescendant"],htmlAriaDescribedBy:[1,"html-aria-described-by"],htmlAriaLabelledby:[1,"html-aria-labelledby"],value:[1025],disabled:[516],readonly:[4],required:[4],checked:[1028],placeholder:[1],htmltitle:[1],status:[1],message:[8],labelPosition:[1,"label-position"],autocomplete:[1],role:[1],hasclearicon:[4],icon:[1],min:[2],minlength:[2],max:[2],maxlength:[2],step:[2],pattern:[1],size:[513],isTyping:[32],passwordHidden:[32],isChecked:[64]},[[4,"inputCheck","inputCheckListener"]]]);function v(){if(typeof customElements==="undefined"){return}const i=["z-input","z-icon","z-input-message"];i.forEach((i=>{switch(i){case"z-input":if(!customElements.get(c(i))){customElements.define(c(i),w)}break;case"z-icon":if(!customElements.get(c(i))){z()}break;case"z-input-message":if(!customElements.get(c(i))){d()}break}}))}export{w as Z,v as d};
 //# sourceMappingURL=index7.js.map

package/dist/components/index7.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesGeneralCss","stylesTextCss","stylesTextareaCss","stylesCheckboxRadioCss","ZInput","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","ariaLabel","htmlAriaExpanded","disabled","readonly","required","checked","message","labelPosition","LabelPosition","RIGHT","role","hasclearicon","size","ControlSize","BIG","isTyping","passwordHidden","typingtimeout","inputCheckListener","e","data","detail","type","InputType","RADIO","name","id","isChecked","CHECKBOX","console","warn","emitInputChange","value","emitStartTyping","validity","TEXTAREA","getValidity","inputChange","emit","clearTimeout","timer","setTimeout","emitStopTyping","startTyping","stopTyping","emitInputCheck","inputCheck","emitInputFocus","inputFocus","emitInputBlur","inputBlur","input","hostElement","querySelector","getTextAttributes","placeholder","title","htmltitle","minlength","maxlength","class","status","autocomplete","onInput","target","getNumberAttributes","NUMBER","min","max","step","getPatternAttribute","PASSWORD","TEXT","TEL","SEARCH","URL","EMAIL","pattern","inputHasMessage","boolean","getAriaAttributes","Object","assign","htmlAriaDescribedBy","htmlAriaLabelledby","getTextAriaAttributes","expanded","controls","htmlAriaControls","htmlAriaAutocomplete","activedescendant","htmlAriaActivedescendant","ariaDescribedby","ariaInvalid","InputStatus","ERROR","getFocusBlurAttributes","onFocus","onBlur","renderInputText","attr","icon","h","renderLabel","ref","el","inputRef","renderIcons","renderMessage","label","htmlFor","renderResetIcon","renderIcon","renderShowHidePassword","hidden","onClick","focus","undefined","renderTextarea","attributes","ariaAttributes","Fragment","handleCheck","ev","renderCheckbox","onChange","bind","after","before","LEFT","innerHTML","renderRadio","render","Host","key"],"sources":["src/components/z-input/styles-general.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-text.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-textarea.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-checkbox-radio.css?tag=z-input&encapsulation=scoped","src/components/z-input/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\n/* GENERAL */\ninput::-ms-clear,\ninput::-ms-reveal {\n  display: none;\n}\n\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n\ninput,\ntextarea {\n  background: var(--color-form-background);\n  fill: var(--color-form-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  outline: none;\n}\n\ninput,\n.textarea-wrapper {\n  border: var(--border-size-small) solid var(--color-form-surface04);\n  border-radius: var(--border-radius-small);\n  color: var(--color-form-default-text);\n}\n\n:host([size=\"small\"]) input,\n:host([size=\"small\"]) textarea,\n:host([size=\"x-small\"]) input,\n:host([size=\"x-small\"]) textarea {\n  font-size: var(--font-size-2);\n}\n\n:host.cursor-select input {\n  cursor: pointer;\n}\n\n/* HOVER */\ninput:not([readonly]):hover,\n.textarea-wrapper:not(.readonly):hover {\n  outline: var(--border-size-medium) solid var(--color-surface04);\n  outline-offset: -2px;\n}\n\n/* FOCUS */\n:host:not(.active-select) input:focus:focus-visible,\n:host:not([readonly=\"true\"]) .textarea-wrapper:focus-within {\n  border-color: var(--color-form-active-primary);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible:hover,\n.textarea-wrapper:not(.readonly):focus-within:hover {\n  outline-color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible + .icons-wrapper {\n  fill: var(--color-form-active-primary);\n}\n\n:host.active-select input {\n  border: var(--border-size-small) solid var(--color-form-active-primary);\n}\n\n:host.cursor-select input:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host input[readonly]:focus:focus-visible {\n  border-color: var(--color-form-surface03);\n  box-shadow: none;\n}\n\n/* STATUSES (success, warning, error) */\n.input-success {\n  border-color: var(--color-form-success01);\n  background: var(--color-form-inverse-success);\n}\n\n.input-success:focus:focus-visible + .icons-wrapper,\n.input-success + .icons-wrapper {\n  fill: var(--color-form-success01);\n}\n\n.input-error {\n  border-color: var(--color-form-hover-error);\n  background: var(--color-form-inverse-error);\n}\n\n.input-error:focus:focus-visible + .icons-wrapper,\n.input-error + .icons-wrapper {\n  fill: var(--color-form-hover-error);\n}\n\n.input-warning {\n  border-color: var(--color-form-hover-warning);\n  background: var(--color-form-inverse-warning);\n}\n\n.input-warning:focus:focus-visible + .icons-wrapper,\n.input-warning + .icons-wrapper {\n  fill: var(--color-form-hover-warning);\n}\n\n:is(.input-success, .input-error, .input-warning):focus:focus-visible {\n  color: var(--color-form-default-text);\n}\n\n/* READONLY */\n:host:not(.active-select) input[readonly],\n.textarea-wrapper.readonly {\n  border-color: var(--color-form-surface03);\n  fill: var(--color-form-disabled01-icon);\n  pointer-events: none;\n}\n\n/* DISABLED */\n:host([disabled]:not([disabled=\"false\"])) input,\n:host([disabled]:not([disabled=\"false\"])) .textarea-wrapper,\n:host([disabled]:not([disabled=\"false\"])) z-icon {\n  border-color: var(--color-form-disabled03);\n  box-shadow: none;\n  color: var(--color-form-disabled-text);\n  fill: var(--color-form-disabled01-icon);\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) input:hover {\n  border-width: var(--border-size-small);\n}\n\n/* PLACEHOLDER */\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n::-webkit-textarea-placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n:-ms-textarea-placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n::placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n:host([disabled]:not([disabled=\"false\"])) label.z-label {\n  color: var(--color-disabled03);\n}\n",".text-wrapper > div {\n  position: relative;\n  z-index: 1;\n  fill: var(--color-form-default-icon);\n}\n\n.text-wrapper > div > input {\n  width: 100%;\n  height: calc(var(--space-unit) * 5.5);\n  box-sizing: border-box;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  margin: 0;\n}\n\n:host([size=\"small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4.5);\n}\n\n:host([size=\"x-small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4);\n}\n\n.text-wrapper > div > input.has-icon,\n.text-wrapper > div > input.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 5.25);\n}\n\n.text-wrapper > div > input.has-icon.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 8);\n}\n\n.text-wrapper .icons-wrapper {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  right: calc(var(--space-unit) * 1.5);\n  display: flex;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.text-wrapper .icons-wrapper > button.input-icon {\n  display: flex;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  pointer-events: initial;\n}\n\n.text-wrapper .icons-wrapper > .input-icon + .input-icon {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n.text-wrapper .icons-wrapper > button.input-icon.hidden {\n  display: none;\n}\n\n.text-wrapper .icons-wrapper > button.reset-icon,\n.text-wrapper .icons-wrapper > button.toggle-password-icon {\n  display: flex;\n  min-width: 24px;\n  min-height: 24px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.text-wrapper .icons-wrapper > .input-icon {\n  --z-icon-width: 18px;\n  --z-icon-height: 18px;\n\n  display: block;\n}\n\n.text-wrapper .icons-wrapper > .input-icon.small,\n.text-wrapper .icons-wrapper > .input-icon.x-small {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.text-wrapper .icons-wrapper > button.input-icon:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n/* stylelint-disable property-no-vendor-prefix */\n.text-wrapper > div > input:-webkit-autofill {\n  -webkit-box-shadow: 0 0 0 1000px #fff inset;\n  -webkit-text-fill-color: currentcolor;\n}\n",".textarea-wrapper {\n  width: 100%;\n  height: 100%;\n  padding: calc(var(--space-unit) * 1.5);\n}\n\n.textarea-wrapper:not(.input-error, .input-success, .input-warning) {\n  background-color: var(--color-form-background);\n}\n\ntextarea {\n  width: 100%;\n  min-height: 132px;\n  padding: 0;\n  border: none;\n  margin: 0;\n  color: currentcolor;\n  resize: none;\n}\n",".radio-wrapper,\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  color: var(--color-default-text);\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n}\n\n.radio-wrapper:hover,\n.checkbox-wrapper:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary-icon);\n}\n\n.radio-wrapper > input,\n.checkbox-wrapper > input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.radio-wrapper .radio-label,\n.checkbox-wrapper .checkbox-label {\n  display: inline-flex;\n  min-height: 24px;\n  align-items: center;\n  padding: 3px 0;\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1;\n  text-transform: inherit;\n}\n\n.radio-wrapper input:not(:disabled) + .radio-label,\n.checkbox-wrapper input:not(:disabled) + .checkbox-label {\n  cursor: pointer;\n}\n\n.radio-wrapper .radio-label z-icon,\n.checkbox-wrapper .checkbox-label z-icon {\n  cursor: pointer;\n  fill: inherit;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-1);\n}\n\n.radio-wrapper .radio-label.after,\n.checkbox-wrapper .checkbox-label.after {\n  flex-direction: row;\n}\n\n.radio-wrapper .radio-label.before,\n.checkbox-wrapper .checkbox-label.before {\n  flex-direction: row-reverse;\n}\n\n.radio-wrapper .radio-label.after > span,\n.checkbox-wrapper .checkbox-label.after > span {\n  margin-left: var(--space-unit);\n}\n\n.radio-wrapper .radio-label.before > span,\n.checkbox-wrapper .checkbox-label.before > span {\n  margin-right: var(--space-unit);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.after > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.after > span {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.before > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.before > span {\n  margin-right: calc(var(--space-unit) * 0.5);\n}\n\n/* focus */\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {\n  border-radius: 50%;\n}\n\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n  border-radius: var(--border-radius-small);\n}\n\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* disabled */\n.radio-wrapper > input:disabled + .radio-label,\n.checkbox-wrapper > input:disabled + .checkbox-label {\n  color: var(--color-disabled03);\n}\n\n.radio-wrapper > input:disabled + .radio-label > z-icon,\n.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {\n  cursor: default;\n  fill: var(--color-disabled01);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  Prop,\n  State,\n  h,\n} from \"@stencil/core\";\nimport {Fragment, Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input\",\n  styleUrls: [\"styles-general.css\", \"styles-text.css\", \"styles-textarea.css\", \"styles-checkbox-radio.css\"],\n  shadow: false,\n  scoped: true,\n})\nexport class ZInput implements ComponentInterface {\n  @Element() hostElement: HTMLZInputElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** input types */\n  @Prop()\n  type: InputType;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input aria-expaded: available for text, password, number, email */\n  @Prop()\n  htmlAriaExpanded = \"\";\n\n  /** the input aria-controls (optional): available for text, password, number, email */\n  @Prop()\n  htmlAriaControls?: string;\n\n  /** the input aria-autocomplete (optional): available for text, password, number, email */\n  @Prop()\n  htmlAriaAutocomplete?: string;\n\n  /** the input aria-activedescendant (optional): available for text, password, number, email */\n  @Prop()\n  htmlAriaActivedescendant?: string;\n\n  /** the input aria-describedby (optional) */\n  @Prop()\n  htmlAriaDescribedBy?: string;\n\n  /** the input aria-labelledby (optional) */\n  @Prop()\n  htmlAriaLabelledby?: string;\n\n  /** the input value */\n  @Prop({mutable: true})\n  value?: string;\n\n  /** the input is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n  @Prop()\n  required?: boolean = false;\n\n  /** checked: available for checkbox, radio */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional): available for text, password, number, email, textarea */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input label position: available for checkbox, radio */\n  @Prop()\n  labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n  /** the input has autocomplete option (optional): available for text, password, number, email */\n  @Prop()\n  autocomplete?: string;\n\n  /** the input role */\n  @Prop()\n  role = \"\";\n\n  /** render clear icon when typing (optional): available for text */\n  @Prop()\n  hasclearicon?: boolean = true;\n\n  /** render icon (optional): available for text */\n  @Prop()\n  icon?: string;\n\n  /** min number value (optional): available for number */\n  @Prop()\n  min?: number;\n\n  /** Min length value (optional): available for text */\n  @Prop()\n  minlength?: number;\n\n  /** max number value (optional): available for number */\n  @Prop()\n  max?: number;\n\n  /** Max length value (optional): available for text */\n  @Prop()\n  maxlength?: number;\n\n  /** step number value (optional): available for number */\n  @Prop()\n  step?: number;\n\n  /** pattern value (optional): available for tel, text, search, url, email, password*/\n  @Prop()\n  pattern?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isTyping = false;\n\n  @State()\n  passwordHidden = true;\n\n  private timer;\n\n  private typingtimeout = 300;\n\n  private inputRef: HTMLInputElement;\n\n  @Listen(\"inputCheck\", {target: \"document\"})\n  inputCheckListener(e: CustomEvent): void {\n    const data = e.detail;\n    switch (this.type) {\n      case InputType.RADIO:\n        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n          this.checked = false;\n        }\n        break;\n    }\n  }\n\n  /** get checked status */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    switch (this.type) {\n      case InputType.CHECKBOX:\n      case InputType.RADIO:\n        return this.checked;\n      default:\n        console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n        return false;\n    }\n  }\n\n  /** Emitted on input value change, returns value, validity */\n  @Event()\n  inputChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    if (!this.isTyping) {\n      this.emitStartTyping();\n    }\n\n    let validity: ValidityState;\n    if (this.type === InputType.TEXTAREA) {\n      validity = this.getValidity(\"textarea\");\n    } else {\n      validity = this.getValidity(\"input\");\n    }\n    this.value = value;\n    this.inputChange.emit({value, validity});\n\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.emitStopTyping(this.value, validity);\n    }, this.typingtimeout);\n  }\n\n  /** Emitted when user starts typing */\n  @Event()\n  startTyping: EventEmitter;\n\n  private emitStartTyping(): void {\n    this.isTyping = true;\n    this.startTyping.emit();\n  }\n\n  /** Emitted when user stops typing, returns value, validity */\n  @Event()\n  stopTyping: EventEmitter;\n\n  private emitStopTyping(value: string, validity: ValidityState): void {\n    this.isTyping = false;\n    this.stopTyping.emit({\n      value: value,\n      validity: validity,\n    });\n  }\n\n  /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n  @Event()\n  inputCheck: EventEmitter;\n\n  private emitInputCheck(checked: boolean): void {\n    this.inputCheck.emit({\n      id: this.htmlid,\n      checked: checked,\n      type: this.type,\n      name: this.name,\n      value: this.value,\n      validity: this.getValidity(\"input\"),\n    });\n  }\n\n  /** Emitted on input focus */\n  @Event()\n  inputFocus: EventEmitter;\n\n  private emitInputFocus(): void {\n    this.inputFocus.emit({id: this.htmlid});\n  }\n\n  /** Emitted on input blur */\n  @Event()\n  inputBlur: EventEmitter;\n\n  private emitInputBlur(): void {\n    this.inputBlur.emit({id: this.htmlid});\n  }\n\n  private getValidity(type: string): ValidityState {\n    const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n    return input.validity;\n  }\n\n  /* START text/password/email/number */\n\n  private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return {\n      id: this.htmlid,\n      name: this.name,\n      placeholder: this.placeholder,\n      value: this.value,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      title: this.htmltitle,\n      minlength: this.minlength,\n      maxlength: this.maxlength,\n      class: {\n        [`input-${this.status}`]: !!this.status,\n      },\n      autocomplete: this.autocomplete,\n      onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n    };\n  }\n\n  private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (type != InputType.NUMBER) {\n      return;\n    }\n\n    return {\n      min: this.min,\n      max: this.max,\n      step: this.step,\n    };\n  }\n\n  private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (\n      type != InputType.PASSWORD &&\n      type != InputType.TEXT &&\n      type != InputType.TEL &&\n      type != InputType.SEARCH &&\n      type != InputType.URL &&\n      type != InputType.EMAIL\n    ) {\n      return;\n    }\n\n    return {\n      pattern: this.pattern,\n    };\n  }\n\n  private inputHasMessage(): boolean {\n    if (boolean(this.message) === false || boolean(this.message) === true) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private getAriaAttributes(): Record<string, unknown> {\n    return {\n      ...(this.role ? {role: this.role} : {}),\n      ...(this.htmlAriaDescribedBy ? {\"aria-describedby\": this.htmlAriaDescribedBy} : {}),\n      ...(this.htmlAriaLabelledby ? {\"aria-labelledby\": this.htmlAriaLabelledby} : {}),\n    };\n  }\n\n  private getTextAriaAttributes(): Record<string, unknown> {\n    const expanded = this.htmlAriaExpanded ? {\"aria-expanded\": this.htmlAriaExpanded} : {};\n    const controls = this.htmlAriaControls ? {\"aria-controls\": this.htmlAriaControls} : {};\n    const autocomplete = this.htmlAriaAutocomplete ? {\"aria-autocomplete\": this.htmlAriaAutocomplete} : {};\n    const activedescendant = this.htmlAriaActivedescendant\n      ? {\"aria-activedescendant\": this.htmlAriaActivedescendant}\n      : {};\n    const ariaDescribedby =\n      this.htmlAriaDescribedBy || this.inputHasMessage()\n        ? {\"aria-describedby\": this.htmlAriaDescribedBy || `${this.htmlid}-message`}\n        : {};\n\n    const ariaInvalid = this.status === InputStatus.ERROR ? {\"aria-invalid\": \"true\"} : {};\n\n    return {\n      ...this.getAriaAttributes(),\n      ...expanded,\n      ...controls,\n      ...autocomplete,\n      ...activedescendant,\n      ...ariaDescribedby,\n      ...ariaInvalid,\n    };\n  }\n\n  private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return {\n      onFocus: () => this.emitInputFocus(),\n      onBlur: () => this.emitInputBlur(),\n    };\n  }\n\n  private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n    const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n    const attr = {\n      ...this.getTextAttributes(),\n      ...this.getNumberAttributes(type),\n      ...this.getPatternAttribute(type),\n      ...ariaLabel,\n      ...this.getTextAriaAttributes(),\n      ...this.getFocusBlurAttributes(),\n    };\n    if (this.icon || type === InputType.PASSWORD) {\n      Object.assign(attr.class, {\"has-icon\": true});\n    }\n    if (this.hasclearicon && type != InputType.NUMBER) {\n      Object.assign(attr.class, {\"has-clear-icon\": true});\n    }\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div>\n          <input\n            type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n            {...attr}\n            ref={(el) => (this.inputRef = el)}\n          />\n          {this.renderIcons()}\n        </div>\n        {this.renderMessage()}\n      </div>\n    );\n  }\n\n  private renderLabel(): HTMLLabelElement {\n    if (!this.label) {\n      return;\n    }\n\n    return (\n      <label\n        class=\"z-label body-5-sb\"\n        id={`${this.htmlid}_label`}\n        htmlFor={this.htmlid}\n      >\n        {this.label}\n      </label>\n    );\n  }\n\n  private renderIcons(): HTMLSpanElement {\n    return (\n      <span class=\"icons-wrapper\">\n        {this.renderResetIcon()}\n        {this.renderIcon()}\n      </span>\n    );\n  }\n\n  private renderIcon(): HTMLButtonElement {\n    if (this.type === InputType.PASSWORD) {\n      return this.renderShowHidePassword();\n    }\n\n    if (!this.icon) {\n      return;\n    }\n\n    return (\n      <z-icon\n        name={this.icon}\n        class={{[this.size]: true, \"input-icon\": true}}\n      />\n    );\n  }\n\n  private renderResetIcon(): HTMLButtonElement {\n    let hidden = false;\n    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n      hidden = true;\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n        aria-label=\"cancella il contenuto dell'input\"\n        onClick={() => {\n          this.inputRef.value = \"\";\n          this.emitInputChange(\"\");\n          this.inputRef.focus();\n        }}\n      >\n        <z-icon\n          name=\"multiply\"\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderShowHidePassword(): HTMLButtonElement {\n    return (\n      <button\n        type=\"button\"\n        class=\"input-icon toggle-password-icon\"\n        disabled={this.disabled}\n        aria-label={this.passwordHidden ? \"mostra password\" : \"nascondi password\"}\n        onClick={() => (this.passwordHidden = !this.passwordHidden)}\n      >\n        <z-icon\n          name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        html-id={`${this.htmlid}-message`}\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n        disabled={this.disabled}\n      />\n    );\n  }\n\n  /* END text/password/email/number */\n\n  /* START textarea */\n\n  private renderTextarea(): HTMLDivElement {\n    const attributes = this.getTextAttributes();\n    const ariaAttributes = this.getTextAriaAttributes();\n\n    return (\n      <Fragment>\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as {[className: string]: boolean}),\n            \"textarea-wrapper\": true,\n            \"readonly\": !!attributes.readonly,\n          }}\n        >\n          <textarea\n            {...attributes}\n            {...ariaAttributes}\n            class={{\n              ...(attributes.class as {[className: string]: boolean}),\n              \"z-scrollbar\": true,\n            }}\n            aria-label={this.ariaLabel || undefined}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </Fragment>\n    );\n  }\n\n  /* END textarea */\n\n  private handleCheck(ev: Event): void {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.emitInputCheck(this.checked);\n  }\n\n  /* START checkbox */\n  private renderCheckbox(): HTMLDivElement {\n    return (\n      <div class=\"checkbox-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          required={this.required}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getAriaAttributes()}\n          {...this.getFocusBlurAttributes()}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"checkbox-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label}></span>}\n        </label>\n      </div>\n    );\n  }\n\n  /* END checkbox */\n\n  /* START radio */\n  private renderRadio(): HTMLDivElement {\n    return (\n      <div class=\"radio-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"radio\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getAriaAttributes()}\n          {...this.getFocusBlurAttributes()}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"radio-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label} />}\n        </label>\n      </div>\n    );\n  }\n  /* END radio */\n\n  render(): HTMLInputElement | HTMLDivElement {\n    let input;\n    switch (this.type) {\n      case InputType.TEXTAREA:\n        input = this.renderTextarea();\n        break;\n      case InputType.CHECKBOX:\n        input = this.renderCheckbox();\n        break;\n      case InputType.RADIO:\n        input = this.renderRadio();\n        break;\n      default:\n        input = this.renderInputText(this.type);\n    }\n\n    return <Host>{input}</Host>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stylesGeneralCss","stylesTextCss","stylesTextareaCss","stylesCheckboxRadioCss","ZInput","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","ariaLabel","htmlAriaExpanded","disabled","readonly","required","checked","message","labelPosition","LabelPosition","RIGHT","role","hasclearicon","size","ControlSize","BIG","isTyping","passwordHidden","typingtimeout","inputCheckListener","e","data","detail","type","InputType","RADIO","name","id","isChecked","CHECKBOX","console","warn","emitInputChange","value","emitStartTyping","validity","TEXTAREA","getValidity","inputChange","emit","clearTimeout","timer","setTimeout","emitStopTyping","startTyping","stopTyping","emitInputCheck","inputCheck","emitInputFocus","inputFocus","emitInputBlur","inputBlur","input","hostElement","querySelector","getTextAttributes","placeholder","title","htmltitle","minlength","maxlength","class","status","autocomplete","onInput","target","getNumberAttributes","NUMBER","min","max","step","getPatternAttribute","PASSWORD","TEXT","TEL","SEARCH","URL","EMAIL","pattern","inputHasMessage","boolean","getAriaAttributes","Object","assign","htmlAriaDescribedBy","htmlAriaLabelledby","getTextAriaAttributes","expanded","controls","htmlAriaControls","htmlAriaAutocomplete","activedescendant","htmlAriaActivedescendant","ariaDescribedby","ariaInvalid","InputStatus","ERROR","getFocusBlurAttributes","onFocus","onBlur","renderInputText","attr","icon","h","renderLabel","ref","el","inputRef","renderIcons","renderMessage","label","htmlFor","renderResetIcon","renderIcon","renderShowHidePassword","hidden","onClick","focus","undefined","renderTextarea","attributes","ariaAttributes","Fragment","handleCheck","ev","renderCheckbox","ariaRequired","onChange","bind","after","before","LEFT","innerHTML","renderRadio","render","Host","key"],"sources":["src/components/z-input/styles-general.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-text.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-textarea.css?tag=z-input&encapsulation=scoped","src/components/z-input/styles-checkbox-radio.css?tag=z-input&encapsulation=scoped","src/components/z-input/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\n/* GENERAL */\ninput::-ms-clear,\ninput::-ms-reveal {\n  display: none;\n}\n\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n\ninput,\ntextarea {\n  background: var(--color-form-background);\n  fill: var(--color-form-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  outline: none;\n}\n\ninput,\n.textarea-wrapper {\n  border: var(--border-size-small) solid var(--color-form-surface04);\n  border-radius: var(--border-radius-small);\n  color: var(--color-form-default-text);\n}\n\n:host([size=\"small\"]) input,\n:host([size=\"small\"]) textarea,\n:host([size=\"x-small\"]) input,\n:host([size=\"x-small\"]) textarea {\n  font-size: var(--font-size-2);\n}\n\n:host.cursor-select input {\n  cursor: pointer;\n}\n\n/* HOVER */\ninput:not([readonly]):hover,\n.textarea-wrapper:not(.readonly):hover {\n  outline: var(--border-size-medium) solid var(--color-surface04);\n  outline-offset: -2px;\n}\n\n/* FOCUS */\n:host:not(.active-select) input:focus:focus-visible,\n:host:not([readonly=\"true\"]) .textarea-wrapper:focus-within {\n  border-color: var(--color-form-active-primary);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible:hover,\n.textarea-wrapper:not(.readonly):focus-within:hover {\n  outline-color: var(--color-form-active-primary);\n}\n\n:host input:focus:focus-visible + .icons-wrapper {\n  fill: var(--color-form-active-primary);\n}\n\n:host.active-select input {\n  border: var(--border-size-small) solid var(--color-form-active-primary);\n}\n\n:host.cursor-select input:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host input[readonly]:focus:focus-visible {\n  border-color: var(--color-form-surface03);\n  box-shadow: none;\n}\n\n/* STATUSES (success, warning, error) */\n.input-success {\n  border-color: var(--color-form-success01);\n  background: var(--color-form-inverse-success);\n}\n\n.input-success:focus:focus-visible + .icons-wrapper,\n.input-success + .icons-wrapper {\n  fill: var(--color-form-success01);\n}\n\n.input-error {\n  border-color: var(--color-form-hover-error);\n  background: var(--color-form-inverse-error);\n}\n\n.input-error:focus:focus-visible + .icons-wrapper,\n.input-error + .icons-wrapper {\n  fill: var(--color-form-hover-error);\n}\n\n.input-warning {\n  border-color: var(--color-form-hover-warning);\n  background: var(--color-form-inverse-warning);\n}\n\n.input-warning:focus:focus-visible + .icons-wrapper,\n.input-warning + .icons-wrapper {\n  fill: var(--color-form-hover-warning);\n}\n\n:is(.input-success, .input-error, .input-warning):focus:focus-visible {\n  color: var(--color-form-default-text);\n}\n\n/* READONLY */\n:host:not(.active-select) input[readonly],\n.textarea-wrapper.readonly {\n  border-color: var(--color-form-surface03);\n  fill: var(--color-form-disabled01-icon);\n  pointer-events: none;\n}\n\n/* DISABLED */\n:host([disabled]:not([disabled=\"false\"])) input,\n:host([disabled]:not([disabled=\"false\"])) .textarea-wrapper,\n:host([disabled]:not([disabled=\"false\"])) z-icon {\n  border-color: var(--color-form-disabled03);\n  box-shadow: none;\n  color: var(--color-form-disabled-text);\n  fill: var(--color-form-disabled01-icon);\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) input:hover {\n  border-width: var(--border-size-small);\n}\n\n/* PLACEHOLDER */\ninput::placeholder,\ntextarea::placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n::-webkit-textarea-placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n:-ms-textarea-placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n::placeholder {\n  color: var(--color-form-placeholder-text);\n}\n\n:host([disabled]:not([disabled=\"false\"])) label.z-label {\n  color: var(--color-disabled03);\n}\n",".text-wrapper > div {\n  position: relative;\n  z-index: 1;\n  fill: var(--color-form-default-icon);\n}\n\n.text-wrapper > div > input {\n  width: 100%;\n  height: calc(var(--space-unit) * 5.5);\n  box-sizing: border-box;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  margin: 0;\n}\n\n:host([size=\"small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4.5);\n}\n\n:host([size=\"x-small\"]) .text-wrapper > div > input {\n  height: calc(var(--space-unit) * 4);\n}\n\n.text-wrapper > div > input.has-icon,\n.text-wrapper > div > input.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 5.25);\n}\n\n.text-wrapper > div > input.has-icon.has-clear-icon {\n  padding-right: calc(var(--space-unit) * 8);\n}\n\n.text-wrapper .icons-wrapper {\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  right: calc(var(--space-unit) * 1.5);\n  display: flex;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.text-wrapper .icons-wrapper > button.input-icon {\n  display: flex;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  pointer-events: initial;\n}\n\n.text-wrapper .icons-wrapper > .input-icon + .input-icon {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n.text-wrapper .icons-wrapper > button.input-icon.hidden {\n  display: none;\n}\n\n.text-wrapper .icons-wrapper > button.reset-icon,\n.text-wrapper .icons-wrapper > button.toggle-password-icon {\n  display: flex;\n  min-width: 24px;\n  min-height: 24px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n.text-wrapper .icons-wrapper > .input-icon {\n  --z-icon-width: 18px;\n  --z-icon-height: 18px;\n\n  display: block;\n}\n\n.text-wrapper .icons-wrapper > .input-icon.small,\n.text-wrapper .icons-wrapper > .input-icon.x-small {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.text-wrapper .icons-wrapper > button.input-icon:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n/* stylelint-disable property-no-vendor-prefix */\n.text-wrapper > div > input:-webkit-autofill {\n  -webkit-box-shadow: 0 0 0 1000px #fff inset;\n  -webkit-text-fill-color: currentcolor;\n}\n",".textarea-wrapper {\n  width: 100%;\n  height: 100%;\n  padding: calc(var(--space-unit) * 1.5);\n}\n\n.textarea-wrapper:not(.input-error, .input-success, .input-warning) {\n  background-color: var(--color-form-background);\n}\n\ntextarea {\n  width: 100%;\n  min-height: 132px;\n  padding: 0;\n  border: none;\n  margin: 0;\n  color: currentcolor;\n  resize: none;\n}\n",".radio-wrapper,\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  color: var(--color-default-text);\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n}\n\n.radio-wrapper:hover,\n.checkbox-wrapper:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary-icon);\n}\n\n.radio-wrapper > input,\n.checkbox-wrapper > input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.radio-wrapper .radio-label,\n.checkbox-wrapper .checkbox-label {\n  display: inline-flex;\n  min-height: 24px;\n  align-items: center;\n  padding: 3px 0;\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1;\n  text-transform: inherit;\n}\n\n.radio-wrapper input:not(:disabled) + .radio-label,\n.checkbox-wrapper input:not(:disabled) + .checkbox-label {\n  cursor: pointer;\n}\n\n.radio-wrapper .radio-label z-icon,\n.checkbox-wrapper .checkbox-label z-icon {\n  cursor: pointer;\n  fill: inherit;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label z-icon,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"]) .radio-wrapper .radio-label,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label {\n  font-size: var(--font-size-1);\n}\n\n.radio-wrapper .radio-label.after,\n.checkbox-wrapper .checkbox-label.after {\n  flex-direction: row;\n}\n\n.radio-wrapper .radio-label.before,\n.checkbox-wrapper .checkbox-label.before {\n  flex-direction: row-reverse;\n}\n\n.radio-wrapper .radio-label.after > span,\n.checkbox-wrapper .checkbox-label.after > span {\n  margin-left: var(--space-unit);\n}\n\n.radio-wrapper .radio-label.before > span,\n.checkbox-wrapper .checkbox-label.before > span {\n  margin-right: var(--space-unit);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.after > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.after > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.after > span {\n  margin-left: calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"small\"]) .checkbox-wrapper .checkbox-label.before > span,\n:host([size=\"x-small\"]) .radio-wrapper .radio-label.before > span,\n:host([size=\"x-small\"]) .checkbox-wrapper .checkbox-label.before > span {\n  margin-right: calc(var(--space-unit) * 0.5);\n}\n\n/* focus */\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {\n  border-radius: 50%;\n}\n\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n  border-radius: var(--border-radius-small);\n}\n\n.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,\n.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n/* disabled */\n.radio-wrapper > input:disabled + .radio-label,\n.checkbox-wrapper > input:disabled + .checkbox-label {\n  color: var(--color-disabled03);\n}\n\n.radio-wrapper > input:disabled + .radio-label > z-icon,\n.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {\n  cursor: default;\n  fill: var(--color-disabled01);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  Prop,\n  State,\n  h,\n} from \"@stencil/core\";\nimport {Fragment, Host, JSXBase} from \"@stencil/core/internal\";\nimport {ControlSize, InputStatus, InputType, LabelPosition} from \"../../beans\";\nimport {boolean, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input\",\n  styleUrls: [\"styles-general.css\", \"styles-text.css\", \"styles-textarea.css\", \"styles-checkbox-radio.css\"],\n  shadow: false,\n  scoped: true,\n})\nexport class ZInput implements ComponentInterface {\n  @Element() hostElement: HTMLZInputElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** input types */\n  @Prop()\n  type: InputType;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input aria-expaded: available for text, password, number, email */\n  @Prop()\n  htmlAriaExpanded = \"\";\n\n  /** the input aria-controls (optional): available for text, password, number, email */\n  @Prop()\n  htmlAriaControls?: string;\n\n  /** the input aria-autocomplete (optional): available for text, password, number, email */\n  @Prop()\n  htmlAriaAutocomplete?: string;\n\n  /** the input aria-activedescendant (optional): available for text, password, number, email */\n  @Prop()\n  htmlAriaActivedescendant?: string;\n\n  /** the input aria-describedby (optional) */\n  @Prop()\n  htmlAriaDescribedBy?: string;\n\n  /** the input aria-labelledby (optional) */\n  @Prop()\n  htmlAriaLabelledby?: string;\n\n  /** the input value */\n  @Prop({mutable: true})\n  value?: string;\n\n  /** the input is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input is required (optional): available for text, password, number, email, textarea, checkbox */\n  @Prop()\n  required?: boolean = false;\n\n  /** checked: available for checkbox, radio */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional): available for text, password, number, email, textarea */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input label position: available for checkbox, radio */\n  @Prop()\n  labelPosition?: LabelPosition = LabelPosition.RIGHT;\n\n  /** the input has autocomplete option (optional): available for text, password, number, email */\n  @Prop()\n  autocomplete?: string;\n\n  /** the input role */\n  @Prop()\n  role = \"\";\n\n  /** render clear icon when typing (optional): available for text */\n  @Prop()\n  hasclearicon?: boolean = true;\n\n  /** render icon (optional): available for text */\n  @Prop()\n  icon?: string;\n\n  /** min number value (optional): available for number */\n  @Prop()\n  min?: number;\n\n  /** Min length value (optional): available for text */\n  @Prop()\n  minlength?: number;\n\n  /** max number value (optional): available for number */\n  @Prop()\n  max?: number;\n\n  /** Max length value (optional): available for text */\n  @Prop()\n  maxlength?: number;\n\n  /** step number value (optional): available for number */\n  @Prop()\n  step?: number;\n\n  /** pattern value (optional): available for tel, text, search, url, email, password*/\n  @Prop()\n  pattern?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isTyping = false;\n\n  @State()\n  passwordHidden = true;\n\n  private timer;\n\n  private typingtimeout = 300;\n\n  private inputRef: HTMLInputElement;\n\n  @Listen(\"inputCheck\", {target: \"document\"})\n  inputCheckListener(e: CustomEvent): void {\n    const data = e.detail;\n    switch (this.type) {\n      case InputType.RADIO:\n        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {\n          this.checked = false;\n        }\n        break;\n    }\n  }\n\n  /** get checked status */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    switch (this.type) {\n      case InputType.CHECKBOX:\n      case InputType.RADIO:\n        return this.checked;\n      default:\n        console.warn(\"`isChecked` method is only available for type `checkbox` and `radio`\");\n\n        return false;\n    }\n  }\n\n  /** Emitted on input value change, returns value, validity */\n  @Event()\n  inputChange: EventEmitter;\n\n  private emitInputChange(value: string): void {\n    if (!this.isTyping) {\n      this.emitStartTyping();\n    }\n\n    let validity: ValidityState;\n    if (this.type === InputType.TEXTAREA) {\n      validity = this.getValidity(\"textarea\");\n    } else {\n      validity = this.getValidity(\"input\");\n    }\n    this.value = value;\n    this.inputChange.emit({value, validity});\n\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.emitStopTyping(this.value, validity);\n    }, this.typingtimeout);\n  }\n\n  /** Emitted when user starts typing */\n  @Event()\n  startTyping: EventEmitter;\n\n  private emitStartTyping(): void {\n    this.isTyping = true;\n    this.startTyping.emit();\n  }\n\n  /** Emitted when user stops typing, returns value, validity */\n  @Event()\n  stopTyping: EventEmitter;\n\n  private emitStopTyping(value: string, validity: ValidityState): void {\n    this.isTyping = false;\n    this.stopTyping.emit({\n      value: value,\n      validity: validity,\n    });\n  }\n\n  /** Emitted on checkbox check/uncheck, returns id, checked, type, name, value, validity */\n  @Event()\n  inputCheck: EventEmitter;\n\n  private emitInputCheck(checked: boolean): void {\n    this.inputCheck.emit({\n      id: this.htmlid,\n      checked: checked,\n      type: this.type,\n      name: this.name,\n      value: this.value,\n      validity: this.getValidity(\"input\"),\n    });\n  }\n\n  /** Emitted on input focus */\n  @Event()\n  inputFocus: EventEmitter;\n\n  private emitInputFocus(): void {\n    this.inputFocus.emit({id: this.htmlid});\n  }\n\n  /** Emitted on input blur */\n  @Event()\n  inputBlur: EventEmitter;\n\n  private emitInputBlur(): void {\n    this.inputBlur.emit({id: this.htmlid});\n  }\n\n  private getValidity(type: string): ValidityState {\n    const input = this.hostElement.querySelector(type) as HTMLInputElement;\n\n    return input.validity;\n  }\n\n  /* START text/password/email/number */\n\n  private getTextAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return {\n      id: this.htmlid,\n      name: this.name,\n      placeholder: this.placeholder,\n      value: this.value,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      title: this.htmltitle,\n      minlength: this.minlength,\n      maxlength: this.maxlength,\n      class: {\n        [`input-${this.status}`]: !!this.status,\n      },\n      autocomplete: this.autocomplete,\n      onInput: (e: InputEvent) => this.emitInputChange((e.target as HTMLInputElement).value),\n    };\n  }\n\n  private getNumberAttributes(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (type != InputType.NUMBER) {\n      return;\n    }\n\n    return {\n      min: this.min,\n      max: this.max,\n      step: this.step,\n    };\n  }\n\n  private getPatternAttribute(type: InputType): JSXBase.InputHTMLAttributes<HTMLInputElement> {\n    if (\n      type != InputType.PASSWORD &&\n      type != InputType.TEXT &&\n      type != InputType.TEL &&\n      type != InputType.SEARCH &&\n      type != InputType.URL &&\n      type != InputType.EMAIL\n    ) {\n      return;\n    }\n\n    return {\n      pattern: this.pattern,\n    };\n  }\n\n  private inputHasMessage(): boolean {\n    if (boolean(this.message) === false || boolean(this.message) === true) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private getAriaAttributes(): Record<string, unknown> {\n    return {\n      ...(this.role ? {role: this.role} : {}),\n      ...(this.htmlAriaDescribedBy ? {\"aria-describedby\": this.htmlAriaDescribedBy} : {}),\n      ...(this.htmlAriaLabelledby ? {\"aria-labelledby\": this.htmlAriaLabelledby} : {}),\n    };\n  }\n\n  private getTextAriaAttributes(): Record<string, unknown> {\n    const expanded = this.htmlAriaExpanded ? {\"aria-expanded\": this.htmlAriaExpanded} : {};\n    const controls = this.htmlAriaControls ? {\"aria-controls\": this.htmlAriaControls} : {};\n    const autocomplete = this.htmlAriaAutocomplete ? {\"aria-autocomplete\": this.htmlAriaAutocomplete} : {};\n    const activedescendant = this.htmlAriaActivedescendant\n      ? {\"aria-activedescendant\": this.htmlAriaActivedescendant}\n      : {};\n    const ariaDescribedby =\n      this.htmlAriaDescribedBy || this.inputHasMessage()\n        ? {\"aria-describedby\": this.htmlAriaDescribedBy || `${this.htmlid}-message`}\n        : {};\n\n    const ariaInvalid = this.status === InputStatus.ERROR ? {\"aria-invalid\": \"true\"} : {};\n    const required = this.required ? {\"aria-required\": \"true\"} : {};\n\n    return {\n      ...this.getAriaAttributes(),\n      ...expanded,\n      ...controls,\n      ...autocomplete,\n      ...activedescendant,\n      ...ariaDescribedby,\n      ...ariaInvalid,\n      ...required,\n    };\n  }\n\n  private getFocusBlurAttributes(): JSXBase.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {\n    return {\n      onFocus: () => this.emitInputFocus(),\n      onBlur: () => this.emitInputBlur(),\n    };\n  }\n\n  private renderInputText(type: InputType = InputType.TEXT): HTMLDivElement {\n    const ariaLabel = this.ariaLabel ? {\"aria-label\": this.ariaLabel} : {};\n    const attr = {\n      ...this.getTextAttributes(),\n      ...this.getNumberAttributes(type),\n      ...this.getPatternAttribute(type),\n      ...ariaLabel,\n      ...this.getTextAriaAttributes(),\n      ...this.getFocusBlurAttributes(),\n    };\n    if (this.icon || type === InputType.PASSWORD) {\n      Object.assign(attr.class, {\"has-icon\": true});\n    }\n    if (this.hasclearicon && type != InputType.NUMBER) {\n      Object.assign(attr.class, {\"has-clear-icon\": true});\n    }\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div>\n          <input\n            type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\n            {...attr}\n            ref={(el) => (this.inputRef = el)}\n          />\n          {this.renderIcons()}\n        </div>\n        {this.renderMessage()}\n      </div>\n    );\n  }\n\n  private renderLabel(): HTMLLabelElement {\n    if (!this.label) {\n      return;\n    }\n\n    return (\n      <label\n        class=\"z-label body-5-sb\"\n        id={`${this.htmlid}_label`}\n        htmlFor={this.htmlid}\n      >\n        {this.label}\n      </label>\n    );\n  }\n\n  private renderIcons(): HTMLSpanElement {\n    return (\n      <span class=\"icons-wrapper\">\n        {this.renderResetIcon()}\n        {this.renderIcon()}\n      </span>\n    );\n  }\n\n  private renderIcon(): HTMLButtonElement {\n    if (this.type === InputType.PASSWORD) {\n      return this.renderShowHidePassword();\n    }\n\n    if (!this.icon) {\n      return;\n    }\n\n    return (\n      <z-icon\n        name={this.icon}\n        class={{[this.size]: true, \"input-icon\": true}}\n      />\n    );\n  }\n\n  private renderResetIcon(): HTMLButtonElement {\n    let hidden = false;\n    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {\n      hidden = true;\n    }\n\n    return (\n      <button\n        type=\"button\"\n        class={{\"reset-icon\": true, \"input-icon\": true, hidden}}\n        aria-label=\"cancella il contenuto dell'input\"\n        onClick={() => {\n          this.inputRef.value = \"\";\n          this.emitInputChange(\"\");\n          this.inputRef.focus();\n        }}\n      >\n        <z-icon\n          name=\"multiply\"\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderShowHidePassword(): HTMLButtonElement {\n    return (\n      <button\n        type=\"button\"\n        class=\"input-icon toggle-password-icon\"\n        disabled={this.disabled}\n        aria-label=\"mostra password\"\n        aria-pressed={!this.passwordHidden ? \"true\" : \"false\"}\n        onClick={() => (this.passwordHidden = !this.passwordHidden)}\n      >\n        <z-icon\n          name={this.passwordHidden ? \"view-filled\" : \"view-off-filled\"}\n          class={this.size}\n        />\n      </button>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        html-id={`${this.htmlid}-message`}\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n        disabled={this.disabled}\n      />\n    );\n  }\n\n  /* END text/password/email/number */\n\n  /* START textarea */\n\n  private renderTextarea(): HTMLDivElement {\n    const attributes = this.getTextAttributes();\n    const ariaAttributes = this.getTextAriaAttributes();\n\n    return (\n      <Fragment>\n        {this.renderLabel()}\n        <div\n          class={{\n            ...(attributes.class as {[className: string]: boolean}),\n            \"textarea-wrapper\": true,\n            \"readonly\": !!attributes.readonly,\n          }}\n        >\n          <textarea\n            {...attributes}\n            {...ariaAttributes}\n            class={{\n              ...(attributes.class as {[className: string]: boolean}),\n              \"z-scrollbar\": true,\n            }}\n            aria-label={this.ariaLabel || undefined}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </Fragment>\n    );\n  }\n\n  /* END textarea */\n\n  private handleCheck(ev: Event): void {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.emitInputCheck(this.checked);\n  }\n\n  /* START checkbox */\n  private renderCheckbox(): HTMLDivElement {\n    const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n    return (\n      <div class=\"checkbox-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          required={this.required}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...ariaRequired}\n          {...this.getAriaAttributes()}\n          {...this.getFocusBlurAttributes()}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"checkbox-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"checkbox-checked\" : \"checkbox\"}\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label}></span>}\n        </label>\n      </div>\n    );\n  }\n\n  /* END checkbox */\n\n  /* START radio */\n  private renderRadio(): HTMLDivElement {\n    const ariaRequired = this.required ? {\"aria-required\": \"true\"} : {};\n\n    return (\n      <div class=\"radio-wrapper\">\n        <input\n          id={this.htmlid}\n          type=\"radio\"\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          required={this.required}\n          onChange={this.handleCheck.bind(this)}\n          value={this.value}\n          {...this.getAriaAttributes()}\n          {...this.getFocusBlurAttributes()}\n          {...ariaRequired}\n        />\n\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            \"radio-label\": true,\n            \"after\": this.labelPosition === LabelPosition.RIGHT,\n            \"before\": this.labelPosition === LabelPosition.LEFT,\n          }}\n        >\n          <z-icon\n            name={this.checked ? \"radio-button-checked\" : \"radio-button\"}\n            class={this.size}\n          />\n          {this.label && <span innerHTML={this.label} />}\n        </label>\n      </div>\n    );\n  }\n  /* END radio */\n\n  render(): HTMLInputElement | HTMLDivElement {\n    let input;\n    switch (this.type) {\n      case InputType.TEXTAREA:\n        input = this.renderTextarea();\n        break;\n      case InputType.CHECKBOX:\n        input = this.renderCheckbox();\n        break;\n      case InputType.RADIO:\n        input = this.renderRadio();\n        break;\n      default:\n        input = this.renderInputText(this.type);\n    }\n\n    return <Host>{input}</Host>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/index8.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as s,HTMLElement as e,h as t,Host as a,transformTag as i}from"@stencil/core/internal/client";import{r as o}from"./utils.js";import{d as n}from"./index3.js";const c=()=>`:host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-default-text);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status="success"]){color:var(--color-hover-success)}:host([status="error"]){color:var(--color-hover-error)}:host([status="warning"]){color:var(--color-hover-warning)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}:host([disabled]){color:var(--color-disabled03);fill:var(--color-disabled03)}`;const r=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.htmlId=`id-${o()}`;this.htmlRole="alert";this.statusIcons={success:"checkmark-circle",error:"multiply-circled",warning:"exclamation-circle"};this.statusRole={}}onMessageChange(){this.statusRole=this.htmlRole&&this.message&&this.status?{role:this.htmlRole}:{}}componentWillLoad(){this.onMessageChange()}render(){return t(a,Object.assign({key:"575ca29cba9f2d617b8b2c65bb054204e7aa411c"},this.statusRole),this.statusIcons[this.status]&&this.message&&t("z-icon",{key:"6b9a19626fac468cdf5773aebd66cba90489eaa3",name:this.statusIcons[this.status]}),t("span",{key:"c951a0146f5fe8def8428aee39ce923b24aa23bb",id:this.htmlId,innerHTML:this.message}))}static get watchers(){return{message:[{onMessageChange:0}],status:[{onMessageChange:0}],htmlRole:[{onMessageChange:0}]}}static get style(){return c()}},[1,"z-input-message",{message:[1],htmlId:[1,"html-id"],htmlRole:[1,"html-role"],status:[513],disabled:[516],statusRole:[32]},undefined,{message:[{onMessageChange:0}],status:[{onMessageChange:0}],htmlRole:[{onMessageChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const s=["z-input-message","z-icon"];s.forEach((s=>{switch(s){case"z-input-message":if(!customElements.get(i(s))){customElements.define(i(s),r)}break;case"z-icon":if(!customElements.get(i(s))){n()}break}}))}export{r as Z,l as d};
+import{proxyCustomElement as s,HTMLElement as e,h as t,Host as a,transformTag as i}from"@stencil/core/internal/client";import{r as o}from"./utils.js";import{d as n}from"./index3.js";const c=()=>`:host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-default-text);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status="success"]){color:var(--color-hover-success)}:host([status="error"]){color:var(--color-hover-error)}:host([status="warning"]){color:var(--color-hover-warning)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}:host([disabled]){color:var(--color-disabled03);fill:var(--color-disabled03)}`;const r=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.htmlId=`id-${o()}`;this.htmlRole="alert";this.statusIcons={success:"checkmark-circle",error:"multiply-circled",warning:"exclamation-circle"};this.statusRole={}}onMessageChange(){this.statusRole=this.htmlRole&&this.message&&this.status?{role:this.htmlRole}:{}}componentWillLoad(){this.onMessageChange()}render(){return t(a,Object.assign({key:"a35cc36ee979d11215b973a0f11e2c8f59105a50"},this.statusRole,{id:this.htmlId}),this.statusIcons[this.status]&&this.message&&t("z-icon",{key:"be5aa19afcdddefe15f252b8ea175b0615a5e983",name:this.statusIcons[this.status]}),t("span",{key:"b1d11a0a9694e604b6aa252c2d8a77143288ad99",innerHTML:this.message}))}static get watchers(){return{message:[{onMessageChange:0}],status:[{onMessageChange:0}],htmlRole:[{onMessageChange:0}]}}static get style(){return c()}},[1,"z-input-message",{message:[1],htmlId:[1,"html-id"],htmlRole:[1,"html-role"],status:[513],disabled:[516],statusRole:[32]},undefined,{message:[{onMessageChange:0}],status:[{onMessageChange:0}],htmlRole:[{onMessageChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const s=["z-input-message","z-icon"];s.forEach((s=>{switch(s){case"z-input-message":if(!customElements.get(i(s))){customElements.define(i(s),r)}break;case"z-icon":if(!customElements.get(i(s))){n()}break}}))}export{r as Z,l as d};
 //# sourceMappingURL=index8.js.map

package/dist/components/index8.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZInputMessage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlId","randomId","htmlRole","statusIcons","success","error","warning","statusRole","onMessageChange","message","status","role","componentWillLoad","render","h","Host","Object","assign","key","name","id","innerHTML"],"sources":["src/components/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/z-input-message/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  min-height: calc(var(--space-unit) * 2.5);\n  align-items: start;\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n}\n\n:host(.small),\n:host(.x-small) {\n  margin-top: calc(var(--space-unit) * 0.5);\n  font-size: var(--font-size-1);\n}\n\n:host([status=\"success\"]) {\n  color: var(--color-hover-success);\n}\n\n:host([status=\"error\"]) {\n  color: var(--color-hover-error);\n}\n\n:host([status=\"warning\"]) {\n  color: var(--color-hover-warning);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n  --z-icon-right-margin: var(--space-unit);\n\n  margin-top: calc(var(--space-unit) * 0.25);\n}\n\n:host(.small) > z-icon,\n:host(.x-small) > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n}\n\n:host([disabled]) {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInputMessage implements ComponentInterface {\n  /** input helper message */\n  @Prop()\n  message: string;\n\n  /** the id of the message element (optional)*/\n  @Prop()\n  htmlId? = `id-${randomId()}`;\n\n  /** the role to set when both the message and the status are populated (optional)*/\n  @Prop()\n  htmlRole: null | string = \"alert\";\n\n  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\n\n  /** input disabled status (optional) */\n  @Prop({reflect: true})\n  disabled?: boolean;\n\n  private statusIcons = {\n    success: \"checkmark-circle\",\n    error: \"multiply-circled\",\n    warning: \"exclamation-circle\",\n  };\n\n  @State()\n  statusRole = {};\n\n  @Watch(\"message\")\n  @Watch(\"status\")\n  @Watch(\"htmlRole\")\n  onMessageChange(): void {\n    this.statusRole = this.htmlRole && this.message && this.status ? {role: this.htmlRole} : {};\n  }\n\n  componentWillLoad(): void {\n    this.onMessageChange();\n  }\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host {...this.statusRole}>\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span\n          id={this.htmlId}\n          innerHTML={this.message}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sLAAA,MAAMA,EAAY,IAAM,+6B,MCSXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,kEAYEC,KAAAC,OAAU,MAAMC,MAIhBF,KAAAG,SAA0B,QAUlBH,KAAAI,YAAc,CACpBC,QAAS,mBACTC,MAAO,mBACPC,QAAS,sBAIXP,KAAAQ,WAAa,EAwBd,CAnBC,eAAAC,GACET,KAAKQ,WAAaR,KAAKG,UAAYH,KAAKU,SAAWV,KAAKW,OAAS,CAACC,KAAMZ,KAAKG,UAAY,E,CAG3F,iBAAAU,GACEb,KAAKS,iB,CAGP,MAAAK,GACE,OACEC,EAACC,EAAIC,OAAAC,OAAA,CAAAC,IAAA,4CAAKnB,KAAKQ,YACZR,KAAKI,YAAYJ,KAAKW,SAAWX,KAAKU,SAAWK,EAAA,UAAAI,IAAA,2CAAQC,KAAMpB,KAAKI,YAAYJ,KAAKW,UACtFI,EAAA,QAAAI,IAAA,2CACEE,GAAIrB,KAAKC,OACTqB,UAAWtB,KAAKU,U","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZInputMessage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlId","randomId","htmlRole","statusIcons","success","error","warning","statusRole","onMessageChange","message","status","role","componentWillLoad","render","h","Host","Object","assign","key","id","name","innerHTML"],"sources":["src/components/z-input-message/styles.css?tag=z-input-message&encapsulation=shadow","src/components/z-input-message/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  min-height: calc(var(--space-unit) * 2.5);\n  align-items: start;\n  margin-top: var(--space-unit);\n  color: var(--color-default-text);\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n}\n\n:host(.small),\n:host(.x-small) {\n  margin-top: calc(var(--space-unit) * 0.5);\n  font-size: var(--font-size-1);\n}\n\n:host([status=\"success\"]) {\n  color: var(--color-hover-success);\n}\n\n:host([status=\"error\"]) {\n  color: var(--color-hover-error);\n}\n\n:host([status=\"warning\"]) {\n  color: var(--color-hover-warning);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n  --z-icon-right-margin: var(--space-unit);\n\n  margin-top: calc(var(--space-unit) * 0.25);\n}\n\n:host(.small) > z-icon,\n:host(.x-small) > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n}\n\n:host([disabled]) {\n  color: var(--color-disabled03);\n  fill: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {InputStatus} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-input-message\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInputMessage implements ComponentInterface {\n  /** input helper message */\n  @Prop()\n  message: string;\n\n  /** the id of the message element (optional)*/\n  @Prop()\n  htmlId? = `id-${randomId()}`;\n\n  /** the role to set when both the message and the status are populated (optional)*/\n  @Prop()\n  htmlRole: null | string = \"alert\";\n\n  /** input status (optional) */\n  @Prop({reflect: true})\n  status?: InputStatus;\n\n  /** input disabled status (optional) */\n  @Prop({reflect: true})\n  disabled?: boolean;\n\n  private statusIcons = {\n    success: \"checkmark-circle\",\n    error: \"multiply-circled\",\n    warning: \"exclamation-circle\",\n  };\n\n  @State()\n  statusRole = {};\n\n  @Watch(\"message\")\n  @Watch(\"status\")\n  @Watch(\"htmlRole\")\n  onMessageChange(): void {\n    this.statusRole = this.htmlRole && this.message && this.status ? {role: this.htmlRole} : {};\n  }\n\n  componentWillLoad(): void {\n    this.onMessageChange();\n  }\n\n  render(): HTMLZInputMessageElement {\n    return (\n      <Host\n        {...this.statusRole}\n        id={this.htmlId}\n      >\n        {this.statusIcons[this.status] && this.message && <z-icon name={this.statusIcons[this.status]}></z-icon>}\n        <span innerHTML={this.message} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sLAAA,MAAMA,EAAY,IAAM,+6B,MCSXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,kEAYEC,KAAAC,OAAU,MAAMC,MAIhBF,KAAAG,SAA0B,QAUlBH,KAAAI,YAAc,CACpBC,QAAS,mBACTC,MAAO,mBACPC,QAAS,sBAIXP,KAAAQ,WAAa,EAwBd,CAnBC,eAAAC,GACET,KAAKQ,WAAaR,KAAKG,UAAYH,KAAKU,SAAWV,KAAKW,OAAS,CAACC,KAAMZ,KAAKG,UAAY,E,CAG3F,iBAAAU,GACEb,KAAKS,iB,CAGP,MAAAK,GACE,OACEC,EAACC,EAAIC,OAAAC,OAAA,CAAAC,IAAA,4CACCnB,KAAKQ,WAAU,CACnBY,GAAIpB,KAAKC,SAERD,KAAKI,YAAYJ,KAAKW,SAAWX,KAAKU,SAAWK,EAAA,UAAAI,IAAA,2CAAQE,KAAMrB,KAAKI,YAAYJ,KAAKW,UACtFI,EAAA,QAAAI,IAAA,2CAAMG,UAAWtB,KAAKU,U","ignoreList":[]}

package/dist/components/index9.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{i as o,m as c}from"./index2.js";const l=()=>`:host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}`;const r=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.size=o.MEDIUM;this.listType=c.NONE;this.role="list"}setChildrenSizeType(){const t=this.host.children;for(let e=0;e<t.length;e++){t[e].setAttribute("size",this.size);t[e].setAttribute("list-type",this.listType);t[e].setAttribute("list-element-position",(e+1).toString())}}componentDidLoad(){this.setChildrenSizeType()}render(){return s(i,{key:"2aac86dccac20cc21ec7c1341a99298f8523af49"},s("slot",{key:"207231c63243efcd61917a9b4aa3394e22379bbd"}))}get host(){return this}static get style(){return l()}},[257,"z-list",{size:[513],listType:[513,"list-type"],role:[513]}]);function a(){if(typeof customElements==="undefined"){return}const t=["z-list"];t.forEach((t=>{switch(t){case"z-list":if(!customElements.get(n(t))){customElements.define(n(t),r)}break}}))}export{r as Z,a as d};
+import{proxyCustomElement as t,HTMLElement as e,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{i as o,m as l}from"./index2.js";const r=()=>`:host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.size=o.MEDIUM;this.listType=l.NONE;this.role="list"}setChildrenSizeType(){const t=this.host.children;for(let e=0;e<t.length;e++){t[e].setAttribute("size",this.size);t[e].setAttribute("list-type",this.listType);t[e].setAttribute("list-element-position",(e+1).toString())}}componentDidLoad(){this.setChildrenSizeType()}render(){return s(i,{key:"f9a6d8006b845e618b0aff2c8b0ed3568c438e4d"},s("slot",{key:"d9b7fd704481fdc6870d8269833ddacb035cb1b4"}))}get host(){return this}static get style(){return r()}},[257,"z-list",{size:[513],listType:[513,"list-type"],role:[513]}]);function f(){if(typeof customElements==="undefined"){return}const t=["z-list"];t.forEach((t=>{switch(t){case"z-list":if(!customElements.get(n(t))){customElements.define(n(t),c)}break}}))}export{c as Z,f as d};
 //# sourceMappingURL=index9.js.map