@zanichelli/albe-web-components 19.5.0 → 19.6.0

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

package/dist/components/z-accordion.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as a,HTMLElement as o,createEvent as r,h as i,transformTag as e}from"@stencil/core/internal/client";import{e as s,a0 as t}from"./index2.js";import{d as c}from"./index3.js";const n=()=>`:host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface02);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant="background"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant="background"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)     var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size="x-small"]) summary{--summary-height:var(--summary-x-small-height)}:host([size="small"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size="x-small"],[size="small"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant="background"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant="background"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:""}:host([highlight][variant="background"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant="background"]:not([open])) summary::before,:host([highlight][variant="background"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size="x-small"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size="x-small"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size="x-small"],[size="small"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size="x-small"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant="background"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2);border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}`;const d=a(class a extends o{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow();this.toggled=r(this,"toggled",7);this.size=s.BIG;this.isDisabled=false;this.open=false;this.highlight=false;this.variant=t.DEFAULT;this.shadow=true;this.hasSlottedTags=false}onDisabledChange(){if(this.isDisabled){this.open=false}}checkSlottedTags(){this.hasSlottedTags=!!this.host.querySelector('[slot="tag"]')}onDetailsToggle(){if(this.isDisabled){this.open=false;this.detailsElm.open=false;return}this.open=this.detailsElm.open;this.toggled.emit(this.open)}componentWillLoad(){this.checkSlottedTags()}render(){return i("details",{key:"677f29eb9a981a8444c6de2966101caa04063bdc",ref:a=>this.detailsElm=a,onToggle:this.onDetailsToggle.bind(this),open:this.open},i("summary",{key:"498a94e2aec123598bcf6b4cd7d755b72726d9e9",tabIndex:this.isDisabled?-1:null,part:"summary"},this.icon&&i("z-icon",{key:"09eec9beaa82d2a2f81de5c0ea2d5ebee856b190",class:"z-accordion-label-icon",name:this.icon}),i("span",{key:"dbf0026bd5a832300e17ec30da2cfaf7946d1c5e",class:"z-accordion-label"},this.label),this.hasSlottedTags&&i("span",{key:"21b3f6c772537d97100d593d5415f7d73bdaeab6",class:"z-accordion-tags"},i("slot",{key:"676b85cf03540aad8a2797073e0376d23816635a",name:"tag",onSlotchange:()=>this.checkSlottedTags()})),i("z-icon",{key:"45341fe9e93b6ceafb938b4345d065d684c40246",class:"z-accordion-chevron",name:this.open?"chevron-up":"chevron-down"})),!this.isDisabled&&i("div",{key:"dea671e91b2ddd6e2666304452cc2b60b7b8fda4",class:"z-accordion-content",part:"content"},i("slot",{key:"382274fc573c359786db1a5cc986b1cc400e2960"})))}get host(){return this}static get watchers(){return{isDisabled:[{onDisabledChange:0}]}}static get style(){return n()}},[257,"z-accordion",{label:[1],icon:[1],size:[513],isDisabled:[516,"is-disabled"],open:[1540],highlight:[516],variant:[513],shadow:[516],hasSlottedTags:[32]},undefined,{isDisabled:[{onDisabledChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const a=["z-accordion","z-icon"];a.forEach((a=>{switch(a){case"z-accordion":if(!customElements.get(e(a))){customElements.define(e(a),d)}break;case"z-icon":if(!customElements.get(e(a))){c()}break}}))}const h=d;const b=l;export{h as ZAccordion,b as defineCustomElement};
+import{proxyCustomElement as a,HTMLElement as o,createEvent as r,h as e,transformTag as i}from"@stencil/core/internal/client";import{e as s,a0 as t}from"./index2.js";import{d as c}from"./index3.js";const n=()=>`:host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface02);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant="background"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant="background"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)     var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size="x-small"]) summary{--summary-height:var(--summary-x-small-height)}:host([size="small"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size="x-small"],[size="small"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant="background"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant="background"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:""}:host([highlight][variant="background"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant="background"]:not([open])) summary::before,:host([highlight][variant="background"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size="x-small"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size="x-small"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size="x-small"],[size="small"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size="x-small"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant="background"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2);border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}`;const l=a(class a extends o{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow();this.toggled=r(this,"toggled",7);this.size=s.BIG;this.isDisabled=false;this.open=false;this.highlight=false;this.variant=t.DEFAULT;this.shadow=true;this.hasSlottedTags=false}onDisabledChange(){if(this.isDisabled){this.open=false}}checkSlottedTags(){this.hasSlottedTags=!!this.host.querySelector('[slot="tag"]')}onDetailsToggle(){if(this.isDisabled){this.open=false;this.detailsElm.open=false;return}this.open=this.detailsElm.open;this.toggled.emit(this.open)}componentWillLoad(){this.checkSlottedTags()}render(){return e("details",{key:"e957004c881c5d6d78ef08e2e0e2e5d6a24c89b7",ref:a=>this.detailsElm=a,onToggle:this.onDetailsToggle.bind(this),open:this.open},e("summary",{key:"2aee81012aa94c58ef08c9a6095523efb00b8c9c",tabIndex:this.isDisabled?-1:null,part:"summary"},this.icon&&e("z-icon",{key:"6a09efbc17df94ff2141ae999904e281ff9d6136",class:"z-accordion-label-icon",name:this.icon}),e("span",{key:"6b925bf04adee74c040cbcf09488a4e58d2b5c02",class:"z-accordion-label"},this.label),this.hasSlottedTags&&e("span",{key:"95a6cd60ebf18ffc2d7a94c9b0204225b932a810",class:"z-accordion-tags"},e("slot",{key:"179c326ffd592f16947999151b08ebc968e46cf5",name:"tag",onSlotchange:()=>this.checkSlottedTags()})),e("z-icon",{key:"88a53ab505c15735e911d27fd89676de76b488cc",class:"z-accordion-chevron",name:this.open?"chevron-up":"chevron-down"})),!this.isDisabled&&e("div",{key:"327a2c6da908bb660b0e2301a1e345ab1eafbe15",class:"z-accordion-content",part:"content"},e("slot",{key:"950f8a2c6c44d1e3e4411a940e4bee191cc6b3a6"})))}get host(){return this}static get watchers(){return{isDisabled:[{onDisabledChange:0}]}}static get style(){return n()}},[257,"z-accordion",{label:[1],icon:[1],size:[513],isDisabled:[516,"is-disabled"],open:[1540],highlight:[516],variant:[513],shadow:[516],hasSlottedTags:[32]},undefined,{isDisabled:[{onDisabledChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const a=["z-accordion","z-icon"];a.forEach((a=>{switch(a){case"z-accordion":if(!customElements.get(i(a))){customElements.define(i(a),l)}break;case"z-icon":if(!customElements.get(i(a))){c()}break}}))}const h=l;const b=d;export{h as ZAccordion,b as defineCustomElement};
 //# sourceMappingURL=z-accordion.js.map

package/dist/components/z-anchor-navigation.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as o,HTMLElement as n,h as a,Host as t,transformTag as e}from"@stencil/core/internal/client";import{B as i,e as r}from"./index2.js";import{d as s}from"./index5.js";import{d as c}from"./index3.js";const l=()=>`html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav>* a{color:inherit}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-default-icon);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,     border-color 0.3s ease-in-out,     color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-primary01);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation:not([is-collapsed]) z-button.toggle{display:none !important}z-anchor-navigation:not([is-collapsed]) nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){fill:var(--color-default-icon);opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-background);color:var(--color-hover-primary)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}`;const h=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.hideUnselected=false;this.autoCurrent=true;this.collapsedLabel="salta a";this.isCollapsed=false;this.collapsed=false}setCurrent(){const o=Array.from(this.nav.querySelectorAll("a")).find((o=>o.href===this.host.ownerDocument.location.href));Array.from(this.nav.children).forEach((n=>{const a=n instanceof HTMLAnchorElement?n:n.querySelector("a");const t=a===o;a.setAttribute("aria-current",t.toString());n.toggleAttribute("data-current",t)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){if(this.autoCurrent){window.addEventListener("hashchange",this.setCurrent.bind(this));this.setCurrent()}}disconnectedCallback(){window.removeEventListener("hashchange",this.setCurrent)}render(){return a(t,{key:"c7b47d775e9e264fa5b7b6f4496fcf1dccd5f28c",collapsed:this.collapsed,class:"z-scrollbar"},a("z-button",{key:"3651fe999b1f8ed710a43e01034e57759001e614",class:"toggle",size:r.SMALL,variant:i.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},this.collapsedLabel),a("nav",{key:"beb6bb3d1f77451e63213dbc638b209ab6d34c17",ref:o=>this.nav=o},a("slot",{key:"1b35a2604b89a924ebb029affec3bb33d8193f81"})))}get host(){return this}static get style(){return l()}},[260,"z-anchor-navigation",{hideUnselected:[516,"hide-unselected"],autoCurrent:[4,"auto-current"],collapsedLabel:[1,"collapsed-label"],isCollapsed:[516,"is-collapsed"],collapsed:[32]}]);function d(){if(typeof customElements==="undefined"){return}const o=["z-anchor-navigation","z-button","z-icon"];o.forEach((o=>{switch(o){case"z-anchor-navigation":if(!customElements.get(e(o))){customElements.define(e(o),h)}break;case"z-button":if(!customElements.get(e(o))){s()}break;case"z-icon":if(!customElements.get(e(o))){c()}break}}))}const v=h;const u=d;export{v as ZAnchorNavigation,u as defineCustomElement};
+import{proxyCustomElement as o,HTMLElement as a,h as n,Host as t,transformTag as i}from"@stencil/core/internal/client";import{B as e,e as r}from"./index2.js";import{d as c}from"./index5.js";import{d as s}from"./index3.js";const l=()=>`html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav>* a{color:inherit}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-default-icon);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,     border-color 0.3s ease-in-out,     color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-primary01);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation:not([is-collapsed]) z-button.toggle{display:none !important}z-anchor-navigation:not([is-collapsed]) nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){fill:var(--color-default-icon);opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-background);color:var(--color-hover-primary)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}`;const d=o(class o extends a{constructor(o){super();if(o!==false){this.__registerHost()}this.hideUnselected=false;this.autoCurrent=true;this.collapsedLabel="salta a";this.isCollapsed=false;this.collapsed=false}setCurrent(){const o=Array.from(this.nav.querySelectorAll("a")).find((o=>o.href===this.host.ownerDocument.location.href));Array.from(this.nav.children).forEach((a=>{const n=a instanceof HTMLAnchorElement?a:a.querySelector("a");const t=n===o;n.setAttribute("aria-current",t.toString());a.toggleAttribute("data-current",t)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){if(this.autoCurrent){window.addEventListener("hashchange",this.setCurrent.bind(this));this.setCurrent()}}disconnectedCallback(){window.removeEventListener("hashchange",this.setCurrent)}render(){return n(t,{key:"b059600c9eaada10a4ed37e0a5c39c2ba373a9f3",collapsed:this.collapsed,class:"z-scrollbar"},n("z-button",{key:"4bcc1d04ad8f6666eba33c20200dd9fdd57e4fd4",class:"toggle",size:r.SMALL,variant:e.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},this.collapsedLabel),n("nav",{key:"eb0da78055d1e8af036032ea6dcc70e7d6f52702",ref:o=>this.nav=o},n("slot",{key:"8d938246f34f89d9aa36196c1be2df7c8ab0b1d2"})))}get host(){return this}static get style(){return l()}},[260,"z-anchor-navigation",{hideUnselected:[516,"hide-unselected"],autoCurrent:[4,"auto-current"],collapsedLabel:[1,"collapsed-label"],isCollapsed:[516,"is-collapsed"],collapsed:[32]}]);function h(){if(typeof customElements==="undefined"){return}const o=["z-anchor-navigation","z-button","z-icon"];o.forEach((o=>{switch(o){case"z-anchor-navigation":if(!customElements.get(i(o))){customElements.define(i(o),d)}break;case"z-button":if(!customElements.get(i(o))){c()}break;case"z-icon":if(!customElements.get(i(o))){s()}break}}))}const v=d;const u=h;export{v as ZAnchorNavigation,u as defineCustomElement};
 //# sourceMappingURL=z-anchor-navigation.js.map

package/dist/components/z-app-header.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as i,Fragment as a,createEvent as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{g as r,e as l,B as h,u as c,v as d}from"./index2.js";import{B as u}from"./breakpoints.js";import{a as f}from"./utils.js";import{d as p}from"./index5.js";import{d as g}from"./index6.js";import{d as m}from"./index3.js";import{d as v}from"./index7.js";import{d as b}from"./index8.js";import{d as w}from"./index9.js";import{d as x}from"./index10.js";import{d as z}from"./index11.js";import{d as k}from"./index12.js";import{d as y}from"./index13.js";import{d as C}from"./index14.js";const M=()=>`:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}z-searchbar.has-label{align-items:flex-end}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;const E=typeof IntersectionObserver!=="undefined";const S=e(class e extends t{onStuck(){const e=this.scrollParent;if(!e){return}this.sticking.emit(this._stuck)}setMenuFloatingMode(){if(this.menuElements.length===0){return}this.menuElements.forEach((e=>{e.open=false;e.verticalContext=this.drawerOpen}))}onStuckChange(){var e,t;if(!this.container){return}if(this.stuck){(e=this.stuckIntersecObserver)===null||e===void 0?void 0:e.observe(this.container)}else{this._stuck=false;(t=this.stuckIntersecObserver)===null||t===void 0?void 0:t.unobserve(this.container)}}get title(){var e;return(e=this.hostElement.querySelector('[slot="title"]'))===null||e===void 0?void 0:e.textContent.trim()}get scrollParent(){const e=this.hostElement.offsetParent;if(e===document.body||e===document.documentElement){return window}return e}get canShowMenu(){return!this.enableOffcanvas&&this.menuElements.length>0&&!this.isMobile&&!this.drawerOpen}get focusableMenu(){return this.menuElements.find((e=>e.htmlTabindex===0))}openDrawer(){this.drawerOpen=true;this.menuElements.forEach(((e,t)=>e.htmlTabindex=t===0?0:-1));setTimeout((()=>this.menuElements[0].setFocus()),400)}closeDrawer(){this.drawerOpen=false;setTimeout((()=>this.burgerButton.focus()),100)}collectMenuElements(){this.menuElements=Array.from(this.hostElement.querySelectorAll('[slot="menu"]'));this.menuElements.forEach(((e,t)=>e.htmlTabindex=t===0?0:-1));this.menuLength=this.menuElements.length;if(!this.enableOffcanvas){this.menuWidth=this.menuElements.reduce(((e,t)=>e+t.getBoundingClientRect().width),0)+(this.menuLength-1)*32}this.setMenuFloatingMode()}setupMenuResizeObserver(){if(this.enableOffcanvas){return}this.menuResizeObserver=new ResizeObserver((e=>{if(this.isMobile){this.enableOffcanvas=true;return}const t=e[0].contentBoxSize[0].inlineSize;if(this.menuWidth===0){return}if(this.menuWidth>t&&!this.enableOffcanvas){this.enableOffcanvas=true}else if(this.menuWidth<=t&&this.enableOffcanvas){this.enableOffcanvas=false}}));this.menuResizeObserver.observe(this.container)}hasSlot(e){return this.hostElement.querySelector(`[slot="${e}"]`)!==null}moveFocus(e,t){e.htmlTabindex=-1;t.setFocus()}onOffcanvasKeydown(e){var t,i;if(e.key!==r.TAB||!this.drawerOpen){return}const a=e.target.closest("z-menu");if(a){e.preventDefault();e.stopPropagation();a.htmlTabindex=0;this.closeDrawerButton.focus()}else if(e.target===this.closeDrawerButton){e.preventDefault();e.stopPropagation();if(e.shiftKey){((t=this.menuElements.filter((e=>e.open)).pop())!==null&&t!==void 0?t:this.menuElements[this.menuLength-1]).setFocus()}else{((i=this.menuElements.find((e=>e.open)))!==null&&i!==void 0?i:this.menuElements[0]).setFocus()}}}manageMenus(e){const t=this.menuElements.find((t=>f(t,e.target)));if(t){this.menuElements.forEach((e=>{if(e===t){return}e.htmlTabindex=-1;if(!this.drawerOpen){e.open=false}}))}else if(!this.drawerOpen){this.menuElements.forEach((e=>{e.open=false}))}}handleKeydown(e){var t,i;if(e.key===r.ESC&&this.drawerOpen){this.closeDrawer();return}if(!this.menuElements.some((t=>t.contains(e.target)))){return}const a=this.focusableMenu;const s=this.menuElements.indexOf(a);let n;if(e.key===r.ARROW_RIGHT&&!a.verticalContext||e.key===r.ARROW_DOWN&&a.verticalContext){n=(t=this.menuElements[s+1])!==null&&t!==void 0?t:this.menuElements[0]}else if(e.key===r.ARROW_LEFT&&!a.verticalContext||e.key===r.ARROW_UP&&a.verticalContext){n=(i=this.menuElements[s-1])!==null&&i!==void 0?i:this.menuElements[this.menuLength-1]}if(!n){return}if(e.key===r.ARROW_UP&&a.verticalContext){if(n.open){a.htmlTabindex=-1;n.focusLastItem();return}}this.moveFocus(a,n)}renderSeachbar(){if(this.isMobile&&!this.searchPageUrl&&this._stuck){return}if(this.searchPageUrl&&(this.isMobile||this.isTablet)){return i("z-button",{class:"search-page-button",variant:h.SECONDARY,href:this.searchPageUrl,icon:"search",size:l.X_SMALL})}return i("z-searchbar",{class:{"has-label":!!this.searchLabel},value:this.searchString,placeholder:this.searchPlaceholder,label:this.searchLabel,showSearchButton:true,searchButtonIconOnly:this.isMobile||this.isTablet,searchButtonLabel:this.isMobile||this.isTablet?undefined:this.searchButtonLabel,size:l.X_SMALL,variant:h.SECONDARY,preventSubmit:this.searchString.length<3,onSearchTyping:e=>this.searchString=e.detail})}renderProductLogos(){return i(a,null,this.enableZLogo&&i("span",{class:"z-logo"},i("img",{alt:"Logo Zanichelli"})),this.hostElement.querySelector("[slot='product-logo']")&&i("span",{class:"product-logo"},i("slot",{name:"product-logo"})))}renderMenuButton(){return this.menuLength>0&&(this.enableOffcanvas||this._stuck||this.isMobile)&&i("button",{ref:e=>this.burgerButton=e,class:"drawer-trigger","aria-label":"Apri menu","aria-haspopup":"menu","aria-expanded":`${this.drawerOpen}`,"aria-controls":"offcanvas-menu",onClick:this.openDrawer},i("z-icon",{name:"burger-menu"}))}renderOffcanvas(){return i("z-offcanvas",{id:"offcanvas-menu",variant:d.OVERLAY,transitiondirection:c.RIGHT,open:this.drawerOpen,onCanvasOpenStatusChanged:e=>this.drawerOpen=e.detail,onKeyDown:this.onOffcanvasKeydown},i("div",{slot:"canvasContent"},i("button",{ref:e=>this.closeDrawerButton=e,class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer,"aria-hidden":`${!this.drawerOpen}`,disabled:!this.drawerOpen},i("z-icon",{name:"close"})),i("div",{class:"drawer-content","aria-hidden":`${!this.drawerOpen}`},i("slot",{name:"menu",onSlotchange:this.collectMenuElements}))))}renderStuck(){return i("div",{class:"heading-stuck"},i("div",{class:"heading-stuck-content"},this.renderMenuButton(),i("div",{class:"heading-title"},this.renderProductLogos(),i("div",{class:"stucked-title"},i("slot",{name:"stucked-title"},this.title))),this.enableSearch&&this.renderSeachbar()))}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.sticking=s(this,"sticking",7);this.stuck=false;this.enableOffcanvas=false;this.enableSearch=false;this.searchPlaceholder="Cerca";this.searchString="";this.enableZLogo=true;this.drawerOpen=false;this._stuck=false;this.isMobile=true;this.isTablet=false;this.menuElements=[];this.stuckIntersecObserver=E?new IntersectionObserver((([e])=>{this._stuck=!e.isIntersecting}),{threshold:.5}):undefined;this.openDrawer=this.openDrawer.bind(this);this.closeDrawer=this.closeDrawer.bind(this);this.collectMenuElements=this.collectMenuElements.bind(this);this.onOffcanvasKeydown=this.onOffcanvasKeydown.bind(this)}componentWillLoad(){this.collectMenuElements();const e=window.matchMedia(`(max-width: ${u.MOBILE}px)`);this.isMobile=e.matches;e.addEventListener("change",(e=>this.isMobile=e.matches));const t=window.matchMedia(`(min-width: ${u.MOBILE+1}px) and (max-width: ${u.TABLET}px)`);this.isTablet=t.matches;t.addEventListener("change",(e=>this.isTablet=e.matches))}componentDidLoad(){this.onStuckChange();this.setupMenuResizeObserver()}disconnectedCallback(){var e;(e=this.menuResizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){const e=this.hasSlot("top-subtitle");return i(n,{key:"a48e907303247432d294871a6810e996cc6f48f4","menu-length":this.menuLength},i("div",{key:"094aee9d0964cdcec17acde3ec7eaa1767b8ae31",class:{"heading-panel":true,"has-menubar":this.menuLength>0&&!this.enableOffcanvas},ref:e=>this.container=e},i("div",{key:"0635f1f529b2f3e25db7bfc55579c3c3bd8995cb",class:{"heading-container":true,"has-top-subtitle":e}},(!this.enableSearch&&this.isMobile||!this.isMobile)&&i("div",{key:"a2104e8dd013fca97b2af2e57e95e108b423ecbd",class:{"top-subtitle":true,"has-product-logo":e&&this.hasSlot("product-logo")}},i("slot",{key:"a6a7899aba37a27e24982567bc1b7242f4b9bf1b",name:"top-subtitle"})),i("div",{key:"e47339a0a8d9aaee0bd87c0cdf1434e553051030",class:"heading-title"},i("slot",{key:"1212a43bb3d52591a53aea6fb587723750204578",name:"menu-button"},this.renderMenuButton()),!this._stuck&&this.renderProductLogos(),i("slot",{key:"9166a624ad670c914d630b3b5bb46877d46883c8",name:"title"}),this.enableSearch&&!this.isMobile&&this.renderSeachbar()),this.enableSearch&&this.isMobile&&this.renderSeachbar()),i("nav",{key:"a39bc8d9020b6243e4b6ce885f0cfc52d8bd8d95",class:"menu-container","aria-label":this.title||undefined},this.canShowMenu&&i("div",{key:"b58bbc10d6385c6b9404a47c512e912c22650d85",role:"menubar","aria-label":this.title||undefined},i("slot",{key:"c50f81c40e06360ca293172752095155f2f574d4",name:"menu",onSlotchange:this.collectMenuElements})))),this.renderOffcanvas(),this._stuck&&this.renderStuck())}get hostElement(){return this}static get watchers(){return{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}}static get style(){return M()}},[257,"z-app-header",{stuck:[516],enableOffcanvas:[1540,"enable-offcanvas"],enableSearch:[516,"enable-search"],searchLabel:[1,"search-label"],searchPlaceholder:[1,"search-placeholder"],searchButtonLabel:[1,"search-button-label"],searchString:[1025,"search-string"],searchPageUrl:[1,"search-page-url"],enableZLogo:[516,"enable-z-logo"],drawerOpen:[1028,"drawer-open"],_stuck:[32],menuLength:[32],isMobile:[32],isTablet:[32]},[[5,"focusin","manageMenus"],[5,"click","manageMenus"],[1,"keydown","handleKeydown"]],{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}]);function j(){if(typeof customElements==="undefined"){return}const e=["z-app-header","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-offcanvas","z-searchbar","z-tag"];e.forEach((e=>{switch(e){case"z-app-header":if(!customElements.get(o(e))){customElements.define(o(e),S)}break;case"z-button":if(!customElements.get(o(e))){p()}break;case"z-divider":if(!customElements.get(o(e))){g()}break;case"z-icon":if(!customElements.get(o(e))){m()}break;case"z-input":if(!customElements.get(o(e))){v()}break;case"z-input-message":if(!customElements.get(o(e))){b()}break;case"z-list":if(!customElements.get(o(e))){w()}break;case"z-list-element":if(!customElements.get(o(e))){x()}break;case"z-list-group":if(!customElements.get(o(e))){z()}break;case"z-offcanvas":if(!customElements.get(o(e))){k()}break;case"z-searchbar":if(!customElements.get(o(e))){y()}break;case"z-tag":if(!customElements.get(o(e))){C()}break}}))}const H=S;const V=j;export{H as ZAppHeader,V as defineCustomElement};
+import{proxyCustomElement as e,HTMLElement as t,h as i,Fragment as a,createEvent as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{g as r,e as l,B as h,u as c,v as d}from"./index2.js";import{B as u}from"./breakpoints.js";import{a as f}from"./utils.js";import{d as p}from"./index5.js";import{d as g}from"./index6.js";import{d as m}from"./index3.js";import{d as b}from"./index7.js";import{d as v}from"./index8.js";import{d as w}from"./index9.js";import{d as x}from"./index10.js";import{d as z}from"./index11.js";import{d as k}from"./index12.js";import{d as y}from"./index13.js";import{d as C}from"./index14.js";const M=()=>`:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}z-searchbar.has-label{align-items:flex-end}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;const E=typeof IntersectionObserver!=="undefined";const S=e(class e extends t{onStuck(){const e=this.scrollParent;if(!e){return}this.sticking.emit(this._stuck)}setMenuFloatingMode(){if(this.menuElements.length===0){return}this.menuElements.forEach((e=>{e.open=false;e.verticalContext=this.drawerOpen}))}onStuckChange(){var e,t;if(!this.container){return}if(this.stuck){(e=this.stuckIntersecObserver)===null||e===void 0?void 0:e.observe(this.container)}else{this._stuck=false;(t=this.stuckIntersecObserver)===null||t===void 0?void 0:t.unobserve(this.container)}}get title(){var e;return(e=this.hostElement.querySelector('[slot="title"]'))===null||e===void 0?void 0:e.textContent.trim()}get scrollParent(){const e=this.hostElement.offsetParent;if(e===document.body||e===document.documentElement){return window}return e}get canShowMenu(){return!this.enableOffcanvas&&this.menuElements.length>0&&!this.isMobile&&!this.drawerOpen}get focusableMenu(){return this.menuElements.find((e=>e.htmlTabindex===0))}openDrawer(){this.drawerOpen=true;this.menuElements.forEach(((e,t)=>e.htmlTabindex=t===0?0:-1));setTimeout((()=>this.menuElements[0].setFocus()),400)}closeDrawer(){this.drawerOpen=false;setTimeout((()=>this.burgerButton.focus()),100)}collectMenuElements(){this.menuElements=Array.from(this.hostElement.querySelectorAll('[slot="menu"]'));this.menuElements.forEach(((e,t)=>e.htmlTabindex=t===0?0:-1));this.menuLength=this.menuElements.length;if(!this.enableOffcanvas){this.menuWidth=this.menuElements.reduce(((e,t)=>e+t.getBoundingClientRect().width),0)+(this.menuLength-1)*32}this.setMenuFloatingMode()}setupMenuResizeObserver(){if(this.enableOffcanvas){return}this.menuResizeObserver=new ResizeObserver((e=>{if(this.isMobile){this.enableOffcanvas=true;return}const t=e[0].contentBoxSize[0].inlineSize;if(this.menuWidth===0){return}if(this.menuWidth>t&&!this.enableOffcanvas){this.enableOffcanvas=true}else if(this.menuWidth<=t&&this.enableOffcanvas){this.enableOffcanvas=false}}));this.menuResizeObserver.observe(this.container)}hasSlot(e){return this.hostElement.querySelector(`[slot="${e}"]`)!==null}moveFocus(e,t){e.htmlTabindex=-1;t.setFocus()}onOffcanvasKeydown(e){var t,i;if(e.key!==r.TAB||!this.drawerOpen){return}const a=e.target.closest("z-menu");if(a){e.preventDefault();e.stopPropagation();a.htmlTabindex=0;this.closeDrawerButton.focus()}else if(e.target===this.closeDrawerButton){e.preventDefault();e.stopPropagation();if(e.shiftKey){((t=this.menuElements.filter((e=>e.open)).pop())!==null&&t!==void 0?t:this.menuElements[this.menuLength-1]).setFocus()}else{((i=this.menuElements.find((e=>e.open)))!==null&&i!==void 0?i:this.menuElements[0]).setFocus()}}}manageMenus(e){const t=this.menuElements.find((t=>f(t,e.target)));if(t){this.menuElements.forEach((e=>{if(e===t){return}e.htmlTabindex=-1;if(!this.drawerOpen){e.open=false}}))}else if(!this.drawerOpen){this.menuElements.forEach((e=>{e.open=false}))}}handleKeydown(e){var t,i;if(e.key===r.ESC&&this.drawerOpen){this.closeDrawer();return}if(!this.menuElements.some((t=>t.contains(e.target)))){return}const a=this.focusableMenu;const s=this.menuElements.indexOf(a);let n;if(e.key===r.ARROW_RIGHT&&!a.verticalContext||e.key===r.ARROW_DOWN&&a.verticalContext){n=(t=this.menuElements[s+1])!==null&&t!==void 0?t:this.menuElements[0]}else if(e.key===r.ARROW_LEFT&&!a.verticalContext||e.key===r.ARROW_UP&&a.verticalContext){n=(i=this.menuElements[s-1])!==null&&i!==void 0?i:this.menuElements[this.menuLength-1]}if(!n){return}if(e.key===r.ARROW_UP&&a.verticalContext){if(n.open){a.htmlTabindex=-1;n.focusLastItem();return}}this.moveFocus(a,n)}renderSeachbar(){if(this.isMobile&&!this.searchPageUrl&&this._stuck){return}if(this.searchPageUrl&&(this.isMobile||this.isTablet)){return i("z-button",{class:"search-page-button",variant:h.SECONDARY,href:this.searchPageUrl,icon:"search",size:l.X_SMALL})}return i("z-searchbar",{class:{"has-label":!!this.searchLabel},value:this.searchString,placeholder:this.searchPlaceholder,label:this.searchLabel,showSearchButton:true,searchButtonIconOnly:this.isMobile||this.isTablet,searchButtonLabel:this.isMobile||this.isTablet?undefined:this.searchButtonLabel,size:l.X_SMALL,variant:h.SECONDARY,preventSubmit:this.searchString.length<3,onSearchTyping:e=>this.searchString=e.detail})}renderProductLogos(){return i(a,null,this.enableZLogo&&i("span",{class:"z-logo"},i("img",{alt:"Logo Zanichelli"})),this.hostElement.querySelector("[slot='product-logo']")&&i("span",{class:"product-logo"},i("slot",{name:"product-logo"})))}renderMenuButton(){return this.menuLength>0&&(this.enableOffcanvas||this._stuck||this.isMobile)&&i("button",{ref:e=>this.burgerButton=e,class:"drawer-trigger","aria-label":"Apri menu","aria-haspopup":"menu","aria-expanded":`${this.drawerOpen}`,"aria-controls":"offcanvas-menu",onClick:this.openDrawer},i("z-icon",{name:"burger-menu"}))}renderOffcanvas(){return i("z-offcanvas",{id:"offcanvas-menu",variant:d.OVERLAY,transitiondirection:c.RIGHT,open:this.drawerOpen,onCanvasOpenStatusChanged:e=>this.drawerOpen=e.detail,onKeyDown:this.onOffcanvasKeydown},i("div",{slot:"canvasContent"},i("button",{ref:e=>this.closeDrawerButton=e,class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer,"aria-hidden":`${!this.drawerOpen}`,disabled:!this.drawerOpen},i("z-icon",{name:"close"})),i("div",{class:"drawer-content","aria-hidden":`${!this.drawerOpen}`},i("slot",{name:"menu",onSlotchange:this.collectMenuElements}))))}renderStuck(){return i("div",{class:"heading-stuck"},i("div",{class:"heading-stuck-content"},this.renderMenuButton(),i("div",{class:"heading-title"},this.renderProductLogos(),i("div",{class:"stucked-title"},i("slot",{name:"stucked-title"},this.title))),this.enableSearch&&this.renderSeachbar()))}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.sticking=s(this,"sticking",7);this.stuck=false;this.enableOffcanvas=false;this.enableSearch=false;this.searchPlaceholder="Cerca";this.searchString="";this.enableZLogo=true;this.drawerOpen=false;this._stuck=false;this.isMobile=true;this.isTablet=false;this.menuElements=[];this.stuckIntersecObserver=E?new IntersectionObserver((([e])=>{this._stuck=!e.isIntersecting}),{threshold:.5}):undefined;this.openDrawer=this.openDrawer.bind(this);this.closeDrawer=this.closeDrawer.bind(this);this.collectMenuElements=this.collectMenuElements.bind(this);this.onOffcanvasKeydown=this.onOffcanvasKeydown.bind(this)}componentWillLoad(){this.collectMenuElements();const e=window.matchMedia(`(max-width: ${u.MOBILE}px)`);this.isMobile=e.matches;e.addEventListener("change",(e=>this.isMobile=e.matches));const t=window.matchMedia(`(min-width: ${u.MOBILE+1}px) and (max-width: ${u.TABLET}px)`);this.isTablet=t.matches;t.addEventListener("change",(e=>this.isTablet=e.matches))}componentDidLoad(){this.onStuckChange();this.setupMenuResizeObserver()}disconnectedCallback(){var e;(e=this.menuResizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){const e=this.hasSlot("top-subtitle");return i(n,{key:"6ea43dd25c57ed4292a243326d7c8af37e88175a","menu-length":this.menuLength},i("div",{key:"2909e033b13f3c3703ba3402dddd58ab93de9d83",class:{"heading-panel":true,"has-menubar":this.menuLength>0&&!this.enableOffcanvas},ref:e=>this.container=e},i("div",{key:"f4db1b9e05adb9ec6abfc5be7d7eb03d23cdadeb",class:{"heading-container":true,"has-top-subtitle":e}},(!this.enableSearch&&this.isMobile||!this.isMobile)&&i("div",{key:"d654db6c1f20676c702ffd55896f74dc83b008ae",class:{"top-subtitle":true,"has-product-logo":e&&this.hasSlot("product-logo")}},i("slot",{key:"9baf1c16220364d06665b2e77f3f40c22abf9312",name:"top-subtitle"})),i("div",{key:"cd2665cc5b5e3528080ae049ff5c1b1b259387f8",class:"heading-title"},i("slot",{key:"b52786726e900d20c4f7251650fe828075e656ca",name:"menu-button"},this.renderMenuButton()),!this._stuck&&this.renderProductLogos(),i("slot",{key:"fbb0a8b9d580ffef099072782f9efded6ae448ba",name:"title"}),this.enableSearch&&!this.isMobile&&this.renderSeachbar()),this.enableSearch&&this.isMobile&&this.renderSeachbar()),i("nav",{key:"e4d4bc464bcb11330a096582abf0ad7b4f95aed0",class:"menu-container","aria-label":this.title||undefined},this.canShowMenu&&i("div",{key:"eb712a6bd2324625dbb4647aa3e91e3c1bf21340",role:"menubar","aria-label":this.title||undefined},i("slot",{key:"90d4f9eb7b361eb8e394a504d3779ea80241bc32",name:"menu",onSlotchange:this.collectMenuElements})))),this.renderOffcanvas(),this._stuck&&this.renderStuck())}get hostElement(){return this}static get watchers(){return{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}}static get style(){return M()}},[257,"z-app-header",{stuck:[516],enableOffcanvas:[1540,"enable-offcanvas"],enableSearch:[516,"enable-search"],searchLabel:[1,"search-label"],searchPlaceholder:[1,"search-placeholder"],searchButtonLabel:[1,"search-button-label"],searchString:[1025,"search-string"],searchPageUrl:[1,"search-page-url"],enableZLogo:[516,"enable-z-logo"],drawerOpen:[1028,"drawer-open"],_stuck:[32],menuLength:[32],isMobile:[32],isTablet:[32]},[[5,"focusin","manageMenus"],[5,"click","manageMenus"],[1,"keydown","handleKeydown"]],{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}]);function j(){if(typeof customElements==="undefined"){return}const e=["z-app-header","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-offcanvas","z-searchbar","z-tag"];e.forEach((e=>{switch(e){case"z-app-header":if(!customElements.get(o(e))){customElements.define(o(e),S)}break;case"z-button":if(!customElements.get(o(e))){p()}break;case"z-divider":if(!customElements.get(o(e))){g()}break;case"z-icon":if(!customElements.get(o(e))){m()}break;case"z-input":if(!customElements.get(o(e))){b()}break;case"z-input-message":if(!customElements.get(o(e))){v()}break;case"z-list":if(!customElements.get(o(e))){w()}break;case"z-list-element":if(!customElements.get(o(e))){x()}break;case"z-list-group":if(!customElements.get(o(e))){z()}break;case"z-offcanvas":if(!customElements.get(o(e))){k()}break;case"z-searchbar":if(!customElements.get(o(e))){y()}break;case"z-tag":if(!customElements.get(o(e))){C()}break}}))}const H=S;const V=j;export{H as ZAppHeader,V as defineCustomElement};
 //# sourceMappingURL=z-app-header.js.map

package/dist/components/z-aria-alert.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as c,Host as r,transformTag as a}from"@stencil/core/internal/client";import{t as s}from"./index2.js";const i=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.mode=s.POLITE}render(){return c(r,{key:"93bfcc69e5d7d76af5deec0c12cee5db73788a5c","aria-live":this.mode,"aria-atomic":"true","aria-relevant":"additions"},c("slot",{key:"7dcfd72ecc06605e78ae738f837cec969997ef7d"}))}},[260,"z-aria-alert",{mode:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["z-aria-alert"];e.forEach((e=>{switch(e){case"z-aria-alert":if(!customElements.get(a(e))){customElements.define(a(e),i)}break}}))}const o=i;const d=n;export{o as ZAriaAlert,d as defineCustomElement};
+import{proxyCustomElement as e,HTMLElement as t,h as a,Host as r,transformTag as s}from"@stencil/core/internal/client";import{t as i}from"./index2.js";const n=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.mode=i.POLITE}render(){return a(r,{key:"14114aba44f89912d75d4dbc41a92e2401528579","aria-live":this.mode,"aria-atomic":"true","aria-relevant":"additions"},a("slot",{key:"1246d14d076ae5642666e7edb8416125bbe97eb4"}))}},[260,"z-aria-alert",{mode:[1]}]);function o(){if(typeof customElements==="undefined"){return}const e=["z-aria-alert"];e.forEach((e=>{switch(e){case"z-aria-alert":if(!customElements.get(s(e))){customElements.define(s(e),n)}break}}))}const c=n;const d=o;export{c as ZAriaAlert,d as defineCustomElement};
 //# sourceMappingURL=z-aria-alert.js.map

package/dist/components/z-avatar.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,h as s,Host as i,transformTag as a}from"@stencil/core/internal/client";import{A as r}from"./index2.js";const o=()=>`:host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--gray700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();var e,s;this.size=r.MEDIUM;this.textColor="color-white";this.backgroundColor="gray700";if(((e=this.text)===null||e===void 0?void 0:e.length)===0&&((s=this.image)===null||s===void 0?void 0:s.length)===0){console.warn("z-avatar must contain at least one prop between text and image")}}getTextSize(){if(this.size===r.SMALL){return"5"}else if(this.size===r.MEDIUM){return"4"}else if(this.size===r.LARGE){return"2"}}render(){return s(i,{key:"3543824c05f276cddcc91263350962015dc2beb8",class:{[this.size]:true,[`body-${this.getTextSize()}-sb`]:true},style:{color:`var(--${this.textColor})`,backgroundColor:`var(--${this.backgroundColor})`}},this.text&&!this.image&&s("span",{key:"4a143ab81b55fae15ab40e3847c6c911c861f13b"},this.text.substring(0,2)),this.image&&s("img",{key:"2e37f8abd25c574371fe1a0f7d08af028fc1b342",src:this.image,onError:()=>this.image=""}))}static get style(){return o()}},[1,"z-avatar",{size:[1],text:[1],textColor:[1,"text-color"],backgroundColor:[1,"background-color"],image:[1025]}]);function n(){if(typeof customElements==="undefined"){return}const t=["z-avatar"];t.forEach((t=>{switch(t){case"z-avatar":if(!customElements.get(a(t))){customElements.define(a(t),c)}break}}))}const l=c;const h=n;export{l as ZAvatar,h as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,h as s,Host as i,transformTag as a}from"@stencil/core/internal/client";import{A as r}from"./index2.js";const o=()=>`:host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--gray700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();var e,s;this.size=r.MEDIUM;this.textColor="color-white";this.backgroundColor="gray700";if(((e=this.text)===null||e===void 0?void 0:e.length)===0&&((s=this.image)===null||s===void 0?void 0:s.length)===0){console.warn("z-avatar must contain at least one prop between text and image")}}getTextSize(){if(this.size===r.SMALL){return"5"}else if(this.size===r.MEDIUM){return"4"}else if(this.size===r.LARGE){return"2"}}render(){return s(i,{key:"4416af5640de2f1c6dbcdf5b5370ef35359ff25c",class:{[this.size]:true,[`body-${this.getTextSize()}-sb`]:true},style:{color:`var(--${this.textColor})`,backgroundColor:`var(--${this.backgroundColor})`}},this.text&&!this.image&&s("span",{key:"ee5a7db56e171e0ba4b9f124d4a3794628b7eff9"},this.text.substring(0,2)),this.image&&s("img",{key:"899ef0de0537c7bd4d68f5656114ba0fd2cf9881",src:this.image,onError:()=>this.image=""}))}static get style(){return o()}},[1,"z-avatar",{size:[1],text:[1],textColor:[1,"text-color"],backgroundColor:[1,"background-color"],image:[1025]}]);function n(){if(typeof customElements==="undefined"){return}const t=["z-avatar"];t.forEach((t=>{switch(t){case"z-avatar":if(!customElements.get(a(t))){customElements.define(a(t),c)}break}}))}const l=c;const h=n;export{l as ZAvatar,h as defineCustomElement};
 //# sourceMappingURL=z-avatar.js.map

package/dist/components/z-breadcrumb.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,Host as o,transformTag as r}from"@stencil/core/internal/client";import{W as n,X as a,p as l,g as h,P as c,i as p}from"./index2.js";import{g as d,h as u}from"./utils.js";import{d as m}from"./index6.js";import{d as f}from"./index3.js";import{d as v}from"./index9.js";import{d as b}from"./index10.js";import{d as g}from"./index11.js";import{d as z}from"./index17.js";const x=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-text-link-blue);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-background);--z-popover-padding:0;--background-color-list-element:var(--color-background)}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover);line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}`;const w=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.clickOnNode=i(this,"clickOnNode",7);this.pathStyle=n.UNDERLINED;this.homepageVariant=a.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.hasOverflow=false;this.popoverEllipsisOpen=false;this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null}handleResize(){this.viewPortWidth=d();if(this.viewPortWidth!==l.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(e,t){if(e===l.MOBILE||t===l.MOBILE&&e===l.TABLET||t===l.MOBILE&&e===l.DESKTOP||t===l.MOBILE&&e===l.DESKTOP_WIDE||t===l.TABLET&&e===l.DESKTOP||t===l.TABLET&&e===l.DESKTOP_WIDE||t===l.DESKTOP&&e===l.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=d();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==l.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==l.MOBILE){requestAnimationFrame((()=>{if(this.wrapElement.scrollWidth>this.wrapElement.clientWidth){if(!this.hasOverflow){this.hasOverflow=true}}}))}}initializeBreadcrumb(){if(this.viewPortWidth===l.MOBILE){this.pathsList=this.getPathsItemsList().filter((e=>!!e.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){for(let e=0;e<this.pathsList.length;e++){if(this.pathsList[e].text.length<=this.truncateChar){continue}if(this.truncatePosition>0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}else if(this.truncatePosition===0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition+1));this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}if(e!==this.pathsList.length-1){const t=this.truncateWithEllipsis(this.pathsList[e].text,this.truncateChar);this.currentEllipsisText=this.pathsList[e].text;this.pathsList[e].text=t;this.pathsList[e].hasTooltip=true;this.truncatePosition=e;return}}}truncateWithEllipsis(e,t){if(e.length<=t){return e}return e.substring(0,t-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((e=>({text:e.textContent,path:e.href,hasTooltip:false})))}renderHomepageNode(){return s("li",null,s("a",{class:{"homepage-text":this.homepageVariant===a.TEXT},href:this.homepageNode.path,onClick:e=>this.handlePreventFollowUrl(e,this.homepageNode),innerHTML:this.homepageVariant===a.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(e,t){if(this.preventFollowUrl){e.preventDefault();this.clickOnNode.emit(t.path)}}handleOverflowMenuAccessibility(e){const t=this.anchorElements.length;if(e.key===h.TAB){e.preventDefault();return}e.stopPropagation();const i=[h.ARROW_DOWN,h.ARROW_UP];if(i.includes(e.key)){e.preventDefault();if(e.key===h.ARROW_DOWN){this.currentIndex=t===this.currentIndex+1?0:this.currentIndex+1}if(e.key===h.ARROW_UP){this.currentIndex=this.currentIndex<=0?t-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(e.key===h.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return s("li",null,s("z-popover",{class:"hidden-paths-popover",ref:e=>this.collapsedElementsRef=e,bindTo:this.triggerButton,position:c.BOTTOM_RIGHT,closable:true,showArrow:true},s("div",{class:"popover-content"},s("z-list",null,s("z-list-group",{size:p.SMALL},this.collapsedElements.map(((e,t,i)=>s("div",null,s("z-list-element",{clickable:true},s("a",{class:"text-ellipsis",href:e.path,onClick:t=>this.handlePreventFollowUrl(t,e),onKeyDown:e=>this.handleOverflowMenuAccessibility(e),innerHTML:e.text})),t<i.length-1&&s("z-divider",{color:"color-surface03"})))))))),s("button",{class:"dots",ref:e=>this.triggerButton=e,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:e=>{u(e,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}renderMobileItems(){const e=this.pathsList[this.pathsList.length-1];if(!e){return}return s("li",null,s("a",{"aria-current":e.path?undefined:"page",href:e.path,onClick:t=>this.handlePreventFollowUrl(t,e)},s("z-icon",{name:"chevron-left"}),s("span",{class:{"missing-path":!e.path,"text-ellipsis":true}},e.text)))}renderItems(){let e;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((t,i)=>s("li",null,t.hasTooltip&&s("z-popover",{class:"full-path-tooltip",bindTo:e,open:this.popoverEllipsisOpen,position:c.BOTTOM_RIGHT,closable:false,showArrow:true},s("span",{class:"tooltip-content"},this.currentEllipsisText)),s("a",{class:{"missing-path":!t.path},ref:t=>e=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:e=>this.handlePreventFollowUrl(e,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:t.text}),i!==this.pathsList.length-1&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))))]}render(){return s(o,{key:"84c8968de32dd42b1c186c3e21ef455ed3419b1b",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},s("nav",{key:"a33b0ec178cf876482c3c598be9b08f3af192e74",ref:e=>this.wrapElement=e,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===n.SEMIBOLD,underlined:this.pathStyle===n.UNDERLINED}},s("ol",{key:"b73a28050ec43c5441b675b497236ae0210b6657"},this.viewPortWidth===l.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return this}static get watchers(){return{maxNodesToShow:[{handlePropChange:0}],viewPortWidth:[{handleResizeUp:0}]}}static get style(){return x()}},[1,"z-breadcrumb",{pathStyle:[513,"path-style"],homepageVariant:[1,"homepage-variant"],maxNodesToShow:[2,"max-nodes-to-show"],preventFollowUrl:[4,"prevent-follow-url"],overflowMenuItemRows:[2,"overflow-menu-item-rows"],truncateChar:[2,"truncate-char"],viewPortWidth:[32],hasOverflow:[32],popoverEllipsisOpen:[32]},[[9,"resize","handleResize"]],{maxNodesToShow:[{handlePropChange:0}],viewPortWidth:[{handleResizeUp:0}]}]);function k(){if(typeof customElements==="undefined"){return}const e=["z-breadcrumb","z-divider","z-icon","z-list","z-list-element","z-list-group","z-popover"];e.forEach((e=>{switch(e){case"z-breadcrumb":if(!customElements.get(r(e))){customElements.define(r(e),w)}break;case"z-divider":if(!customElements.get(r(e))){m()}break;case"z-icon":if(!customElements.get(r(e))){f()}break;case"z-list":if(!customElements.get(r(e))){v()}break;case"z-list-element":if(!customElements.get(r(e))){b()}break;case"z-list-group":if(!customElements.get(r(e))){g()}break;case"z-popover":if(!customElements.get(r(e))){z()}break}}))}const y=w;const E=k;export{y as ZBreadcrumb,E as defineCustomElement};
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as s,Host as o,transformTag as r}from"@stencil/core/internal/client";import{W as n,X as a,p as l,g as h,P as c,i as p}from"./index2.js";import{g as d,h as u}from"./utils.js";import{d as f}from"./index6.js";import{d as m}from"./index3.js";import{d as v}from"./index9.js";import{d as b}from"./index10.js";import{d as g}from"./index11.js";import{d as z}from"./index17.js";const x=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-text-link-blue);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-background);--z-popover-padding:0;--background-color-list-element:var(--color-background)}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover);line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}`;const w=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.clickOnNode=i(this,"clickOnNode",7);this.pathStyle=n.UNDERLINED;this.homepageVariant=a.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.hasOverflow=false;this.popoverEllipsisOpen=false;this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null}handleResize(){this.viewPortWidth=d();if(this.viewPortWidth!==l.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(e,t){if(e===l.MOBILE||t===l.MOBILE&&e===l.TABLET||t===l.MOBILE&&e===l.DESKTOP||t===l.MOBILE&&e===l.DESKTOP_WIDE||t===l.TABLET&&e===l.DESKTOP||t===l.TABLET&&e===l.DESKTOP_WIDE||t===l.DESKTOP&&e===l.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=d();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==l.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==l.MOBILE){requestAnimationFrame((()=>{if(this.wrapElement.scrollWidth>this.wrapElement.clientWidth){if(!this.hasOverflow){this.hasOverflow=true}}}))}}initializeBreadcrumb(){if(this.viewPortWidth===l.MOBILE){this.pathsList=this.getPathsItemsList().filter((e=>!!e.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){for(let e=0;e<this.pathsList.length;e++){if(this.pathsList[e].text.length<=this.truncateChar){continue}if(this.truncatePosition>0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}else if(this.truncatePosition===0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition+1));this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}if(e!==this.pathsList.length-1){const t=this.truncateWithEllipsis(this.pathsList[e].text,this.truncateChar);this.currentEllipsisText=this.pathsList[e].text;this.pathsList[e].text=t;this.pathsList[e].hasTooltip=true;this.truncatePosition=e;return}}}truncateWithEllipsis(e,t){if(e.length<=t){return e}return e.substring(0,t-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((e=>({text:e.textContent,path:e.href,hasTooltip:false})))}renderHomepageNode(){return s("li",null,s("a",{class:{"homepage-text":this.homepageVariant===a.TEXT},href:this.homepageNode.path,onClick:e=>this.handlePreventFollowUrl(e,this.homepageNode),innerHTML:this.homepageVariant===a.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(e,t){if(this.preventFollowUrl){e.preventDefault();this.clickOnNode.emit(t.path)}}handleOverflowMenuAccessibility(e){const t=this.anchorElements.length;if(e.key===h.TAB){e.preventDefault();return}e.stopPropagation();const i=[h.ARROW_DOWN,h.ARROW_UP];if(i.includes(e.key)){e.preventDefault();if(e.key===h.ARROW_DOWN){this.currentIndex=t===this.currentIndex+1?0:this.currentIndex+1}if(e.key===h.ARROW_UP){this.currentIndex=this.currentIndex<=0?t-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(e.key===h.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return s("li",null,s("z-popover",{class:"hidden-paths-popover",ref:e=>this.collapsedElementsRef=e,bindTo:this.triggerButton,position:c.BOTTOM_RIGHT,closable:true,showArrow:true},s("div",{class:"popover-content"},s("z-list",null,s("z-list-group",{size:p.SMALL},this.collapsedElements.map(((e,t,i)=>s("div",null,s("z-list-element",{clickable:true},s("a",{class:"text-ellipsis",href:e.path,onClick:t=>this.handlePreventFollowUrl(t,e),onKeyDown:e=>this.handleOverflowMenuAccessibility(e),innerHTML:e.text})),t<i.length-1&&s("z-divider",{color:"color-surface03"})))))))),s("button",{class:"dots",ref:e=>this.triggerButton=e,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:e=>{u(e,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))}renderMobileItems(){const e=this.pathsList[this.pathsList.length-1];if(!e){return}return s("li",null,s("a",{"aria-current":e.path?undefined:"page",href:e.path,onClick:t=>this.handlePreventFollowUrl(t,e)},s("z-icon",{name:"chevron-left"}),s("span",{class:{"missing-path":!e.path,"text-ellipsis":true}},e.text)))}renderItems(){let e;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((t,i)=>s("li",null,t.hasTooltip&&s("z-popover",{class:"full-path-tooltip",bindTo:e,open:this.popoverEllipsisOpen,position:c.BOTTOM_RIGHT,closable:false,showArrow:true},s("span",{class:"tooltip-content"},this.currentEllipsisText)),s("a",{class:{"missing-path":!t.path},ref:t=>e=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:e=>this.handlePreventFollowUrl(e,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:t.text}),i!==this.pathsList.length-1&&s("z-icon",{class:"separator",name:"chevron-right","aria-hidden":"true"}))))]}render(){return s(o,{key:"ea18e6bec466825e194807d80ecf0c132915b8a4",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},s("nav",{key:"080ce8ea0bc8dd13d94e1ded21878f61a8e1f09e",ref:e=>this.wrapElement=e,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===n.SEMIBOLD,underlined:this.pathStyle===n.UNDERLINED}},s("ol",{key:"ebced04e4063e2db12f1ab2a5fa39fdb447973fa"},this.viewPortWidth===l.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return this}static get watchers(){return{maxNodesToShow:[{handlePropChange:0}],viewPortWidth:[{handleResizeUp:0}]}}static get style(){return x()}},[1,"z-breadcrumb",{pathStyle:[513,"path-style"],homepageVariant:[1,"homepage-variant"],maxNodesToShow:[2,"max-nodes-to-show"],preventFollowUrl:[4,"prevent-follow-url"],overflowMenuItemRows:[2,"overflow-menu-item-rows"],truncateChar:[2,"truncate-char"],viewPortWidth:[32],hasOverflow:[32],popoverEllipsisOpen:[32]},[[9,"resize","handleResize"]],{maxNodesToShow:[{handlePropChange:0}],viewPortWidth:[{handleResizeUp:0}]}]);function k(){if(typeof customElements==="undefined"){return}const e=["z-breadcrumb","z-divider","z-icon","z-list","z-list-element","z-list-group","z-popover"];e.forEach((e=>{switch(e){case"z-breadcrumb":if(!customElements.get(r(e))){customElements.define(r(e),w)}break;case"z-divider":if(!customElements.get(r(e))){f()}break;case"z-icon":if(!customElements.get(r(e))){m()}break;case"z-list":if(!customElements.get(r(e))){v()}break;case"z-list-element":if(!customElements.get(r(e))){b()}break;case"z-list-group":if(!customElements.get(r(e))){g()}break;case"z-popover":if(!customElements.get(r(e))){z()}break}}))}const y=w;const E=k;export{y as ZBreadcrumb,E as defineCustomElement};
 //# sourceMappingURL=z-breadcrumb.js.map

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

@@ -1,2 +1,2 @@
-import{proxyCustomElement as r,HTMLElement as t,createEvent as o,h as i,transformTag as s}from"@stencil/core/internal/client";import{B as e}from"./breakpoints.js";import{d as a}from"./index3.js";const c=()=>`button{display:flex;max-width:100%;height:36px;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}button:focus{border-color:var(--color-primary01);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-active-primary-icon)}button.selected{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse);fill:var(--color-inverse-icon)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}`;const n=r(class r extends t{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.buttonSortClick=o(this,"buttonSortClick",7);this.sortlabelasc="A-Z";this.sortlabeldesc="Z-A";this.isselected=false;this.sortasc=true;this.allowTooltip=false}emitButtonSortClick(){if(!this.isselected){this.isselected=true}else{this.sortasc=!this.sortasc}this.buttonSortClick.emit({buttonid:this.buttonid,sortAsc:this.sortasc})}componentDidLoad(){if(this.elementHasEllipsis()&&window.innerWidth>e.TABLET){this.allowTooltip=true}}setButtonTitle(){return this.allowTooltip?`${this.sortasc?this.label:this.desclabel}`:""}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return i("button",{key:"8bb124d8ffcce4ac1d7c01bc31f9256da769a90b",title:this.setButtonTitle(),id:this.buttonid,class:{selected:this.isselected},onClick:()=>this.emitButtonSortClick()},i("span",{key:"6ab1b449e4d9c539683353cdcf8a4c8b3bdfa578",ref:r=>this.ellipsis=r,class:"ellipsis"},!this.sortasc&&this.desclabel?this.desclabel:this.label),i("span",{key:"d67c255b32c814e0b6afec14c79ba422b8b2a57d",class:"counter"},this.counter&&` (${this.counter})`),i("span",{key:"77ea4b67643b28db4737dc301bc416595581b93f",class:"sort"},this.sortasc?this.sortlabelasc:this.sortlabeldesc),i("z-icon",{key:"098881514d797b081e36f7ad66c9f60ea2423b27",name:"caret-up-down",width:16,height:16}))}static get style(){return c()}},[1,"z-button-sort",{buttonid:[1],label:[1],desclabel:[1],counter:[2],sortlabelasc:[1],sortlabeldesc:[1],isselected:[1028],sortasc:[1028],allowTooltip:[32]}]);function l(){if(typeof customElements==="undefined"){return}const r=["z-button-sort","z-icon"];r.forEach((r=>{switch(r){case"z-button-sort":if(!customElements.get(s(r))){customElements.define(s(r),n)}break;case"z-icon":if(!customElements.get(s(r))){a()}break}}))}const d=n;const h=l;export{d as ZButtonSort,h as defineCustomElement};
+import{proxyCustomElement as r,HTMLElement as t,createEvent as o,h as i,transformTag as e}from"@stencil/core/internal/client";import{B as s}from"./breakpoints.js";import{d as a}from"./index3.js";const c=()=>`button{display:flex;max-width:100%;height:36px;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}button:focus{border-color:var(--color-primary01);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-active-primary-icon)}button.selected{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse);fill:var(--color-inverse-icon)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}`;const n=r(class r extends t{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.buttonSortClick=o(this,"buttonSortClick",7);this.sortlabelasc="A-Z";this.sortlabeldesc="Z-A";this.isselected=false;this.sortasc=true;this.allowTooltip=false}emitButtonSortClick(){if(!this.isselected){this.isselected=true}else{this.sortasc=!this.sortasc}this.buttonSortClick.emit({buttonid:this.buttonid,sortAsc:this.sortasc})}componentDidLoad(){if(this.elementHasEllipsis()&&window.innerWidth>s.TABLET){this.allowTooltip=true}}setButtonTitle(){return this.allowTooltip?`${this.sortasc?this.label:this.desclabel}`:""}elementHasEllipsis(){return this.ellipsis.offsetWidth<this.ellipsis.scrollWidth}render(){return i("button",{key:"269e2d1a959dde597965561177dde2374d92a27b",title:this.setButtonTitle(),id:this.buttonid,class:{selected:this.isselected},onClick:()=>this.emitButtonSortClick()},i("span",{key:"e33cb753f6c120cdd12f5ea4251ca626cfc28711",ref:r=>this.ellipsis=r,class:"ellipsis"},!this.sortasc&&this.desclabel?this.desclabel:this.label),i("span",{key:"c852c01e557ca5245352ddcc7e35a9fe2d9710fb",class:"counter"},this.counter&&` (${this.counter})`),i("span",{key:"abc484df3ccc4a976831c3664e1e451620741419",class:"sort"},this.sortasc?this.sortlabelasc:this.sortlabeldesc),i("z-icon",{key:"f6325a573dd1f8f2208fb3edd70d176a2b7ad141",name:"caret-up-down",width:16,height:16}))}static get style(){return c()}},[1,"z-button-sort",{buttonid:[1],label:[1],desclabel:[1],counter:[2],sortlabelasc:[1],sortlabeldesc:[1],isselected:[1028],sortasc:[1028],allowTooltip:[32]}]);function l(){if(typeof customElements==="undefined"){return}const r=["z-button-sort","z-icon"];r.forEach((r=>{switch(r){case"z-button-sort":if(!customElements.get(e(r))){customElements.define(e(r),n)}break;case"z-icon":if(!customElements.get(e(r))){a()}break}}))}const d=n;const h=l;export{d as ZButtonSort,h as defineCustomElement};
 //# sourceMappingURL=z-button-sort.js.map

package/dist/components/z-color-picker.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as a,transformTag as s}from"@stencil/core/internal/client";import{a2 as i}from"./index2.js";import{a as l}from"./utils.js";const c=()=>`:host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}`;const n={it:{"Select a color":"Seleziona un colore","Color swatch":"Campione di colore"},en:{"Select a color":"Select a color","Color swatch":"Color swatch"}};const d=5;const h=9;const u=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.colorSelected=o(this,"colorSelected",7);this.lng="it";this.disableTransparent=false;this.colorKeysByRow=[];this._colorButtons=[]}get colorButtons(){if(!this._colorButtons.length){this._colorButtons=Array.from(this.host.shadowRoot.querySelectorAll("button"))}return this._colorButtons}sortColorKeysByRow(){const t=Object.keys(i);const e=[];for(let o=0;o<d;o++){for(let r=0;r<h;r++){const a=r*d+o;if(a<t.length){e.push(t[a])}}}return e}moveFocusTo(t){this.colorButtons.forEach(((e,o)=>e.tabIndex=o===t?0:-1));this.colorButtons[t].focus()}validateTransparentSelection(){if(this.disableTransparent&&this.selectedColor==="#FFFFFF00"){this.selectedColor="#333333"}}emitColorSelected(){this.colorSelected.emit(this.selectedColor)}async setFocus(){this.colorButtons.forEach((t=>t.tabIndex=-1));const t=this.colorButtons.find((t=>t.ariaSelected==="true"))||this.colorButtons.find((t=>!t.disabled));if(!t){return}t.tabIndex=0;setTimeout((()=>{t.focus()}),50);this.host.tabIndex=-1}getNextIndexByKey(t,e,o){const r=Math.floor(t/h);const a=t%h;let s=t;switch(e){case"ArrowRight":{const t=a+1;const e=t>=h?(r+1)%d:r;s=e*h+t%h;if(s>=o){s=0}break}case"ArrowLeft":{const t=a-1;const e=t<0?(r-1+d)%d:r;s=e*h+(t+h)%h;if(s>=o){s=o-1}break}case"ArrowDown":{let t=r+1;let e=a;if(t>=d){t=0;e=(a+1)%h}s=t*h+e;if(s>=o){s=0}break}case"ArrowUp":{let t=r-1;let e=a;if(t<0){t=d-1;e=(a-1+h)%h}s=t*h+e;if(s>=o){s=o-1}break}}return s}handleKeyDown(t){var e,o;const r=t.composedPath()[0];if(!r.dataset.color){return}const a=this.colorButtons.indexOf(r);const s=this.colorButtons.length;if(a<0||!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(t.key)){return}let i=a;let l=0;do{i=this.getNextIndexByKey(i,t.key,s);l++}while(l<s&&((e=this.colorButtons[i])===null||e===void 0?void 0:e.disabled));if(i!==a&&i>=0&&i<s&&!((o=this.colorButtons[i])===null||o===void 0?void 0:o.disabled)){this.moveFocusTo(i);t.preventDefault();t.stopPropagation()}}handleBlur(t){const e=t.relatedTarget;if(!l(this.host,e)){this.host.tabIndex=0;this.colorButtons.forEach((t=>t.tabIndex=-1))}}componentWillLoad(){this.colorKeysByRow=this.sortColorKeysByRow()}render(){return r(a,{key:"8ab27c4b68bd295e1bda15e78f1f41bfbfc66b47",role:"listbox","aria-label":this.htmlAriaLabel||n[this.lng]["Select a color"],tabIndex:0},this.colorKeysByRow.map((t=>{var e;return r("button",{class:"color-swatch","data-color":t,role:"option","aria-selected":((e=this.selectedColor)===null||e===void 0?void 0:e.toUpperCase())===t.toUpperCase()?"true":"false",tabIndex:-1,onClick:()=>this.selectedColor=t,disabled:this.disableTransparent&&t==="#FFFFFF00"},r("div",{class:"color-swatch",role:"img","aria-roledescription":n[this.lng]["Color swatch"],"aria-label":i[t][this.lng],title:i[t][this.lng],style:{backgroundColor:t}}))})))}get host(){return this}static get watchers(){return{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}}static get style(){return c()}},[1,"z-color-picker",{selectedColor:[1025,"selected-color"],lng:[1],htmlAriaLabel:[1,"html-aria-label"],disableTransparent:[4,"disable-transparent"],setFocus:[64]},[[0,"focus","setFocus"],[0,"keydown","handleKeyDown"],[0,"blur","handleBlur"]],{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["z-color-picker"];t.forEach((t=>{switch(t){case"z-color-picker":if(!customElements.get(s(t))){customElements.define(s(t),u)}break}}))}const p=u;const f=b;export{p as ZColorPicker,f as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as a,transformTag as s}from"@stencil/core/internal/client";import{a2 as i}from"./index2.js";import{a as c}from"./utils.js";const l=()=>`:host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}`;const n={it:{"Select a color":"Seleziona un colore","Color swatch":"Campione di colore"},en:{"Select a color":"Select a color","Color swatch":"Color swatch"}};const d=5;const h=9;const u=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.colorSelected=o(this,"colorSelected",7);this.lng="it";this.disableTransparent=false;this.colorKeysByRow=[];this._colorButtons=[]}get colorButtons(){if(!this._colorButtons.length){this._colorButtons=Array.from(this.host.shadowRoot.querySelectorAll("button"))}return this._colorButtons}sortColorKeysByRow(){const t=Object.keys(i);const e=[];for(let o=0;o<d;o++){for(let r=0;r<h;r++){const a=r*d+o;if(a<t.length){e.push(t[a])}}}return e}moveFocusTo(t){this.colorButtons.forEach(((e,o)=>e.tabIndex=o===t?0:-1));this.colorButtons[t].focus()}validateTransparentSelection(){if(this.disableTransparent&&this.selectedColor==="#FFFFFF00"){this.selectedColor="#333333"}}emitColorSelected(){this.colorSelected.emit(this.selectedColor)}async setFocus(){this.colorButtons.forEach((t=>t.tabIndex=-1));const t=this.colorButtons.find((t=>t.ariaSelected==="true"))||this.colorButtons.find((t=>!t.disabled));if(!t){return}t.tabIndex=0;setTimeout((()=>{t.focus()}),50);this.host.tabIndex=-1}getNextIndexByKey(t,e,o){const r=Math.floor(t/h);const a=t%h;let s=t;switch(e){case"ArrowRight":{const t=a+1;const e=t>=h?(r+1)%d:r;s=e*h+t%h;if(s>=o){s=0}break}case"ArrowLeft":{const t=a-1;const e=t<0?(r-1+d)%d:r;s=e*h+(t+h)%h;if(s>=o){s=o-1}break}case"ArrowDown":{let t=r+1;let e=a;if(t>=d){t=0;e=(a+1)%h}s=t*h+e;if(s>=o){s=0}break}case"ArrowUp":{let t=r-1;let e=a;if(t<0){t=d-1;e=(a-1+h)%h}s=t*h+e;if(s>=o){s=o-1}break}}return s}handleKeyDown(t){var e,o;const r=t.composedPath()[0];if(!r.dataset.color){return}const a=this.colorButtons.indexOf(r);const s=this.colorButtons.length;if(a<0||!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(t.key)){return}let i=a;let c=0;do{i=this.getNextIndexByKey(i,t.key,s);c++}while(c<s&&((e=this.colorButtons[i])===null||e===void 0?void 0:e.disabled));if(i!==a&&i>=0&&i<s&&!((o=this.colorButtons[i])===null||o===void 0?void 0:o.disabled)){this.moveFocusTo(i);t.preventDefault();t.stopPropagation()}}handleBlur(t){const e=t.relatedTarget;if(!c(this.host,e)){this.host.tabIndex=0;this.colorButtons.forEach((t=>t.tabIndex=-1))}}componentWillLoad(){this.colorKeysByRow=this.sortColorKeysByRow()}render(){return r(a,{key:"ea14b99e379cb85851c041edc4c4136afd693ba1",role:"listbox","aria-label":this.htmlAriaLabel||n[this.lng]["Select a color"],tabIndex:0},this.colorKeysByRow.map((t=>{var e;return r("button",{class:"color-swatch","data-color":t,role:"option","aria-selected":((e=this.selectedColor)===null||e===void 0?void 0:e.toUpperCase())===t.toUpperCase()?"true":"false",tabIndex:-1,onClick:()=>this.selectedColor=t,disabled:this.disableTransparent&&t==="#FFFFFF00"},r("div",{class:"color-swatch",role:"img","aria-roledescription":n[this.lng]["Color swatch"],"aria-label":i[t][this.lng],title:i[t][this.lng],style:{backgroundColor:t}}))})))}get host(){return this}static get watchers(){return{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}}static get style(){return l()}},[1,"z-color-picker",{selectedColor:[1025,"selected-color"],lng:[1],htmlAriaLabel:[1,"html-aria-label"],disableTransparent:[4,"disable-transparent"],setFocus:[64]},[[0,"focus","setFocus"],[0,"keydown","handleKeyDown"],[0,"blur","handleBlur"]],{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["z-color-picker"];t.forEach((t=>{switch(t){case"z-color-picker":if(!customElements.get(s(t))){customElements.define(s(t),u)}break}}))}const p=u;const F=b;export{p as ZColorPicker,F as defineCustomElement};
 //# sourceMappingURL=z-color-picker.js.map