@zanichelli/albe-web-components 20.0.2 → 20.0.4

package/dist/components/index6.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesGeneralCss","stylesTextCss","stylesTextareaCss","stylesCheckboxRadioCss","ZInput","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","type","InputType","TEXT","disabled","readonly","required","checked","indeterminate","message","labelPosition","LabelPosition","RIGHT","hasclearicon","size","ControlSize","BIG","isTyping","passwordHidden","typingtimeout","inputCheckListener","e","data","detail","RADIO","name","id","watchIndeterminate","syncCheckboxIndeterminate","CHECKBOX","inputRef","isChecked","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","TEL","SEARCH","URL","EMAIL","pattern","inputHasMessage","boolean","getAriaAttributes","role","htmlRole","undefined","htmlAriaDescribedby","htmlAriaLabelledby","getTextAriaAttributes","Object","assign","htmlAriaExpanded","htmlAriaControls","htmlAriaAutocomplete","htmlAriaActivedescendant","InputStatus","ERROR","getFocusBlurAttributes","onFocus","onBlur","renderInputText","attr","htmlAriaLabel","icon","h","renderLabel","ref","el","renderIcons","renderMessage","label","htmlFor","renderResetIcon","renderIcon","renderShowHidePassword","hidden","onClick","focus","renderTextarea","attributes","ariaAttributes","Fragment","handleCheck","ev","renderCheckbox","ariaRequired","onChange","bind","after","before","LEFT","innerHTML","renderRadio","render"],"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-icon);\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-disabled03-icon);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {Fragment, 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 type */\n  @Prop()\n  type: InputType = InputType.TEXT;\n\n  /** the input `name` attribute */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input `aria-label` */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** the input `aria-expanded`: available for text, password, number, email */\n  @Prop()\n  htmlAriaExpanded?: string;\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  /** indeterminate: available for checkbox */\n  @Prop({mutable: true})\n  indeterminate?: 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  htmlRole?: string;\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  @Watch(\"indeterminate\")\n  watchIndeterminate(): void {\n    this.syncCheckboxIndeterminate();\n  }\n\n  private syncCheckboxIndeterminate(): void {\n    if (this.type !== InputType.CHECKBOX || !this.inputRef) {\n      return;\n    }\n\n    this.inputRef.indeterminate = !!this.indeterminate;\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 (typeof boolean(this.message) === \"boolean\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private getAriaAttributes(): Record<string, string | undefined> {\n    return {\n      \"role\": this.htmlRole || undefined,\n      \"aria-describedby\": this.htmlAriaDescribedby || undefined,\n      \"aria-labelledby\": this.htmlAriaLabelledby || undefined,\n    };\n  }\n\n  private getTextAriaAttributes(): Record<string, string | undefined> {\n    return {\n      ...this.getAriaAttributes(),\n      \"aria-expanded\": this.htmlAriaExpanded || undefined,\n      \"aria-controls\": this.htmlAriaControls || undefined,\n      \"aria-autocomplete\": this.htmlAriaAutocomplete || undefined,\n      \"aria-activedescendant\": this.htmlAriaActivedescendant || undefined,\n      \"aria-describedby\":\n        this.htmlAriaDescribedby || this.inputHasMessage()\n          ? this.htmlAriaDescribedby || `${this.htmlid}-message`\n          : undefined,\n      \"aria-invalid\": this.status === InputStatus.ERROR ? \"true\" : undefined,\n      \"aria-required\": this.required ? \"true\" : undefined,\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 attr = {\n      ...this.getTextAttributes(),\n      ...this.getNumberAttributes(type),\n      ...this.getPatternAttribute(type),\n      ...this.getTextAriaAttributes(),\n      ...this.getFocusBlurAttributes(),\n      \"aria-label\": this.htmlAriaLabel || undefined,\n    };\n\n    attr.class = {\n      ...(attr.class as {[className: string]: boolean}),\n      \"has-icon\": !!this.icon || type === InputType.PASSWORD,\n      \"has-clear-icon\": this.hasclearicon && type != InputType.NUMBER,\n    };\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div>\n          <input\n            {...attr}\n            type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\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.htmlAriaLabel || undefined}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </Fragment>\n    );\n  }\n\n  /* END textarea */\n\n  private handleCheck(ev: Event): void {\n    if (this.type === InputType.CHECKBOX && this.indeterminate) {\n      this.indeterminate = false;\n    }\n\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.indeterminate ? false : 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          ref={(el) => {\n            this.inputRef = el;\n            this.syncCheckboxIndeterminate();\n          }}\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.indeterminate ? \"indeterminated-checkbox\" : 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    switch (this.type) {\n      case InputType.TEXTAREA:\n        return this.renderTextarea();\n      case InputType.CHECKBOX:\n        return this.renderCheckbox();\n      case InputType.RADIO:\n        return this.renderRadio();\n      case InputType.TEXT:\n      default:\n        return this.renderInputText(this.type);\n    }\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","type","InputType","TEXT","disabled","readonly","required","checked","indeterminate","message","labelPosition","LabelPosition","RIGHT","hasclearicon","size","ControlSize","BIG","isTyping","passwordHidden","typingtimeout","inputCheckListener","e","data","detail","RADIO","name","id","watchIndeterminate","syncCheckboxIndeterminate","CHECKBOX","inputRef","isChecked","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","TEL","SEARCH","URL","EMAIL","pattern","inputHasMessage","boolean","getAriaAttributes","role","htmlRole","undefined","htmlAriaDescribedby","htmlAriaLabelledby","getTextAriaAttributes","Object","assign","htmlAriaExpanded","htmlAriaControls","htmlAriaAutocomplete","htmlAriaActivedescendant","InputStatus","ERROR","getFocusBlurAttributes","onFocus","onBlur","renderInputText","attr","htmlAriaLabel","icon","h","renderLabel","ref","el","renderIcons","renderMessage","label","htmlFor","renderResetIcon","renderIcon","renderShowHidePassword","hidden","onClick","focus","renderTextarea","attributes","ariaAttributes","Fragment","handleCheck","ev","getCheckboxAriaChecked","renderCheckbox","ariaRequired","onChange","bind","after","before","LEFT","innerHTML","renderRadio","render"],"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/* stylelint-disable-next-line selector-not-notation */\n:host(:not(.active-select):not(.cursor-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  caret-color: transparent;\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-icon);\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-disabled03-icon);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {Fragment, 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 type */\n  @Prop()\n  type: InputType = InputType.TEXT;\n\n  /** the input `name` attribute */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input `aria-label` */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** the input `aria-expanded`: available for text, password, number, email */\n  @Prop()\n  htmlAriaExpanded?: string;\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  /** indeterminate: available for checkbox */\n  @Prop({mutable: true})\n  indeterminate?: 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  htmlRole?: string;\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  @Watch(\"indeterminate\")\n  watchIndeterminate(): void {\n    this.syncCheckboxIndeterminate();\n  }\n\n  private syncCheckboxIndeterminate(): void {\n    if (this.type !== InputType.CHECKBOX || !this.inputRef) {\n      return;\n    }\n\n    this.inputRef.indeterminate = !!this.indeterminate;\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 (typeof boolean(this.message) === \"boolean\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private getAriaAttributes(): Record<string, string | undefined> {\n    return {\n      \"role\": this.htmlRole || undefined,\n      \"aria-describedby\": this.htmlAriaDescribedby || undefined,\n      \"aria-labelledby\": this.htmlAriaLabelledby || undefined,\n    };\n  }\n\n  private getTextAriaAttributes(): Record<string, string | undefined> {\n    return {\n      ...this.getAriaAttributes(),\n      \"aria-expanded\": this.htmlAriaExpanded || undefined,\n      \"aria-controls\": this.htmlAriaControls || undefined,\n      \"aria-autocomplete\": this.htmlAriaAutocomplete || undefined,\n      \"aria-activedescendant\": this.htmlAriaActivedescendant || undefined,\n      \"aria-describedby\":\n        this.htmlAriaDescribedby || this.inputHasMessage()\n          ? this.htmlAriaDescribedby || `${this.htmlid}-message`\n          : undefined,\n      \"aria-invalid\": this.status === InputStatus.ERROR ? \"true\" : undefined,\n      \"aria-required\": this.required ? \"true\" : undefined,\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 attr = {\n      ...this.getTextAttributes(),\n      ...this.getNumberAttributes(type),\n      ...this.getPatternAttribute(type),\n      ...this.getTextAriaAttributes(),\n      ...this.getFocusBlurAttributes(),\n      \"aria-label\": this.htmlAriaLabel || undefined,\n    };\n\n    attr.class = {\n      ...(attr.class as {[className: string]: boolean}),\n      \"has-icon\": !!this.icon || type === InputType.PASSWORD,\n      \"has-clear-icon\": this.hasclearicon && type != InputType.NUMBER,\n    };\n\n    return (\n      <div class=\"text-wrapper\">\n        {this.renderLabel()}\n        <div>\n          <input\n            {...attr}\n            type={type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type}\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.htmlAriaLabel || undefined}\n          ></textarea>\n        </div>\n        {this.renderMessage()}\n      </Fragment>\n    );\n  }\n\n  /* END textarea */\n\n  private handleCheck(ev: Event): void {\n    if (this.type === InputType.CHECKBOX && this.indeterminate) {\n      this.indeterminate = false;\n    }\n\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.emitInputCheck(this.checked);\n  }\n\n  private getCheckboxAriaChecked(): \"true\" | \"false\" | \"mixed\" {\n    if (this.indeterminate) {\n      return \"mixed\";\n    }\n\n    return this.checked ? \"true\" : \"false\";\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.indeterminate ? false : 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          aria-checked={this.getCheckboxAriaChecked()}\n          {...ariaRequired}\n          {...this.getAriaAttributes()}\n          {...this.getFocusBlurAttributes()}\n          ref={(el) => {\n            this.inputRef = el;\n            this.syncCheckboxIndeterminate();\n          }}\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.indeterminate ? \"indeterminated-checkbox\" : 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    switch (this.type) {\n      case InputType.TEXTAREA:\n        return this.renderTextarea();\n      case InputType.CHECKBOX:\n        return this.renderCheckbox();\n      case InputType.RADIO:\n        return this.renderRadio();\n      case InputType.TEXT:\n      default:\n        return this.renderInputText(this.type);\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/index7.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as s,h as i,Host as e,transformTag as c}from"@stencil/core/internal/client";import{r as a}from"./utils.js";import{d as o}from"./index3.js";const r=()=>`: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 n=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.htmlId=`id-${a()}`;this.htmlRole="alert";this.statusIcons={success:"checkmark-circle",error:"multiply-circled",warning:"exclamation-circle"}}render(){return i(e,{key:"acc2b74cb7dfda1d8529785c601d3fd92c2884dc",role:this.htmlRole&&this.message&&this.status?this.htmlRole:undefined,id:this.htmlId},this.statusIcons[this.status]&&this.message&&i("z-icon",{key:"b9532d92b1a91d4218c30ed7bb543964c7822b03",name:this.statusIcons[this.status]}),i("span",{key:"933d1ac0a4194da9ec3f70ca715812d6cf3a7891",innerHTML:this.message}))}static get style(){return r()}},[1,"z-input-message",{message:[1],htmlId:[1,"html-id"],htmlRole:[1,"html-role"],status:[513],disabled:[516]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-input-message","z-icon"];t.forEach((t=>{switch(t){case"z-input-message":if(!customElements.get(c(t))){customElements.define(c(t),n)}break;case"z-icon":if(!customElements.get(c(t))){o()}break}}))}export{n as Z,l as d};
+import{proxyCustomElement as t,HTMLElement as s,h as e,Host as i,transformTag as a}from"@stencil/core/internal/client";import{r as o}from"./utils.js";import{d as c}from"./index3.js";const r=()=>`: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 n=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.htmlId=`id-${o()}`;this.htmlRole="alert";this.statusIcons={success:"checkmark-circle",error:"multiply-circled",warning:"exclamation-circle"}}render(){return e(i,{key:"9172ac365fc1852474edf21707ed4cb4ba42aa89",role:this.htmlRole&&this.message&&this.status?this.htmlRole:undefined,id:this.htmlId},this.statusIcons[this.status]&&this.message&&e("z-icon",{key:"92e17ba97e7648ee9974f8e3da732169be30a6f6",name:this.statusIcons[this.status]}),e("span",{key:"11753702f3a21f1f422f85c1bc4c55719152a2d8",innerHTML:this.message}))}static get style(){return r()}},[1,"z-input-message",{message:[1],htmlId:[1,"html-id"],htmlRole:[1,"html-role"],status:[513],disabled:[516]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-input-message","z-icon"];t.forEach((t=>{switch(t){case"z-input-message":if(!customElements.get(a(t))){customElements.define(a(t),n)}break;case"z-icon":if(!customElements.get(a(t))){c()}break}}))}export{n as Z,l as d};
 //# sourceMappingURL=index7.js.map

package/dist/components/index8.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{i as r,m as o}from"./index2.js";const l=()=>`:host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}`;const a=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=r.MEDIUM;this.listType=o.NONE;this.htmlRole="list"}onRoleChange(e){this.htmlRole=e}setChildrenProps(){Array.from(this.host.children).filter((e=>e.tagName.toLowerCase()==="z-list-element")).forEach(((e,t)=>{e.size=this.size;e.listType=this.listType;e.listElementPosition=`${t+1}`}))}render(){return s(i,{key:"aeaf7ef699223b8f5da68f49d8eb6ea5ea5cebb1",role:this.htmlRole},s("slot",{key:"942882c5e4f03ef9dd64ec255b4cd8b8c5c2c107"}))}get host(){return this}static get watchers(){return{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}]}}static get style(){return l()}},[257,"z-list",{size:[513],listType:[513,"list-type"],htmlRole:[32]},undefined,{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["z-list"];e.forEach((e=>{switch(e){case"z-list":if(!customElements.get(n(e))){customElements.define(n(e),a)}break}}))}export{a as Z,c as d};
+import{proxyCustomElement as e,HTMLElement as t,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{i as r,m as o}from"./index2.js";const l=()=>`:host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}`;const a=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=r.MEDIUM;this.listType=o.NONE;this.htmlRole="list"}onRoleChange(e){this.htmlRole=e}setChildrenProps(){Array.from(this.host.children).filter((e=>e.tagName.toLowerCase()==="z-list-element")).forEach(((e,t)=>{e.size=this.size;e.listType=this.listType;e.listElementPosition=`${t+1}`}))}render(){return s(i,{key:"98a78ca75d510f3a1d804bbb2e2fc33d815b74b1",role:this.htmlRole},s("slot",{key:"6bfc24a0ed5dfc13cffc47eb20ad4475ba598c20"}))}get host(){return this}static get watchers(){return{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}]}}static get style(){return l()}},[257,"z-list",{size:[513],listType:[513,"list-type"],htmlRole:[32]},undefined,{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["z-list"];e.forEach((e=>{switch(e){case"z-list":if(!customElements.get(n(e))){customElements.define(n(e),a)}break}}))}export{a as Z,c as d};
 //# sourceMappingURL=index8.js.map

package/dist/components/index9.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as n,Host as s,transformTag as a}from"@stencil/core/internal/client";import{j as o,l,D as r,E as c,i as h,m as d,g as u}from"./index2.js";import{d as m}from"./index5.js";import{d as b}from"./index3.js";const f=()=>`:host{outline:none}:host>.container{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;background-color:var(--background-color-list-element, var(--color-surface01));font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size="small"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size="medium"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size="medium"])>.tree-element-container{padding-top:0;padding-bottom:0}:host([size="large"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size="x-large"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element, var(--color-background))}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{position:relative;z-index:1;box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element, var(--color-background))}:host([align-button="left"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button="right"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button="left"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button="right"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}:host .z-tree-list-divider{position:absolute;z-index:100;left:0}:host([disabled])>.container{color:var(--color-form-disabled03);cursor:default}`;const p=e(class e extends t{accessibleFocusHandler(e){if(this.listElementId===e.detail){const t=this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);t.focus()}}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.accessibleFocus=i(this,"accessibleFocus",7);this.ariaDescendantFocus=i(this,"ariaDescendantFocus",7);this.clickItem=i(this,"clickItem",7);this.alignButton=o.LEFT;this.clickable=false;this.dividerColor="color-surface03";this.dividerType=l.NONE;this.dividerSize=r.SMALL;this.expandable=false;this.expandableStyle=c.ACCORDION;this.size=h.MEDIUM;this.color="none";this.disabled=false;this.listElementPosition="0";this.listType=d.NONE;this.htmlTabindex=0;this.showInnerContent=false;this.htmlRole="listitem";this.openElementConfig={accordion:{open:"minus-circled",close:"plus-circled"},menu:{open:"chevron-up",close:"chevron-down"}};this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}handleClick(){if(this.disabled){return}this.clickItem.emit(this.listElementId);if(!this.expandable){return}this.showInnerContent=!this.showInnerContent}handleKeyDown(e){const t=e.code===u.ENTER;switch(e.code){case u.ARROW_DOWN:e.preventDefault();this.accessibleFocus.emit(this.listElementId+1);break;case u.ARROW_UP:e.preventDefault();this.accessibleFocus.emit(this.listElementId-1);break;case u.ENTER:e.preventDefault();this.clickItem.emit(this.listElementId);break}if(!this.expandable||!t){return}this.showInnerContent=!this.showInnerContent}onRoleChange(e){this.htmlRole=e}renderExpandableButton(){if(!this.expandable){return null}return n("z-icon",{name:this.showInnerContent?this.openElementConfig[this.expandableStyle].open:this.openElementConfig[this.expandableStyle].close})}renderExpandedContent(){if(!this.expandable){return null}return n("div",{class:{"z-list-element-inner-container":true,expanded:this.showInnerContent}},n("slot",{name:"inner-content"}))}renderContent(){if(this.listType===d.NONE){return n("slot",null)}if(this.listType===d.ORDERED){return n("div",{class:"z-list-content-container"},n("div",null,this.listElementPosition,". "),n("slot",null))}if(this.listType===d.UNORDERED){return n("div",{class:"z-list-content-container"},n("span",null,"• "),n("slot",null))}}render(){return n(s,{key:"08ed403eb2e275906b9cce38cd09d8ad26683efc","aria-expanded":this.expandable?this.showInnerContent:null,onClick:this.handleClick,onFocus:()=>this.ariaDescendantFocus.emit(this.listElementId),onKeyDown:this.handleKeyDown,clickable:this.clickable&&!this.disabled,tabIndex:this.hasTreeItems?undefined:this.htmlTabindex,role:this.hasTreeItems?"none":this.htmlRole},n("div",{key:"64c3b6826652d98b557f32098ab87b3eccabed93",class:this.hasTreeItems?"tree-element-container":"container",style:!this.disabled&&{color:`var(--${this.color})`},tabindex:"-1",id:`z-list-element-id-${this.listElementId}`,part:"list-item-container"},n("div",{key:"222187f25d69dd2fb6128ce6a0c5c81dd6a05b31",class:"z-list-element-container"},this.renderExpandableButton(),this.renderContent()),this.renderExpandedContent()),this.dividerType===l.ELEMENT&&n("z-divider",{key:"1ff298c5fc086f1e303194b69de2324e5448508f",class:{"z-tree-list-divider":this.hasTreeItems},color:this.dividerColor,size:this.dividerSize}))}get host(){return this}static get watchers(){return{role:[{onRoleChange:1}]}}static get style(){return f()}},[257,"z-list-element",{alignButton:[513,"align-button"],clickable:[516],dividerColor:[1,"divider-color"],dividerType:[1,"divider-type"],dividerSize:[1,"divider-size"],expandable:[516],expandableStyle:[1,"expandable-style"],listElementId:[514,"list-element-id"],size:[513],color:[513],disabled:[516],listElementPosition:[513,"list-element-position"],listType:[513,"list-type"],hasTreeItems:[4,"has-tree-items"],htmlTabindex:[2,"html-tabindex"],showInnerContent:[32],htmlRole:[32]},[[4,"accessibleFocus","accessibleFocusHandler"]],{role:[{onRoleChange:1}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["z-list-element","z-divider","z-icon"];e.forEach((e=>{switch(e){case"z-list-element":if(!customElements.get(a(e))){customElements.define(a(e),p)}break;case"z-divider":if(!customElements.get(a(e))){m()}break;case"z-icon":if(!customElements.get(a(e))){b()}break}}))}export{p as Z,v as d};
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as n,Host as s,transformTag as a}from"@stencil/core/internal/client";import{j as o,l,D as r,E as c,i as h,m as d,g as u}from"./index2.js";import{d as b}from"./index5.js";import{d as m}from"./index3.js";const p=()=>`:host{outline:none}:host>.container{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;background-color:var(--background-color-list-element, var(--color-surface01));font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size="small"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size="medium"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size="medium"])>.tree-element-container{padding-top:0;padding-bottom:0}:host([size="large"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size="x-large"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element, var(--color-background))}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{position:relative;z-index:1;box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element, var(--color-background))}:host([align-button="left"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button="right"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button="left"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button="right"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}:host .z-tree-list-divider{position:absolute;z-index:100;left:0}:host([disabled])>.container{color:var(--color-form-disabled03);cursor:default}`;const f=e(class e extends t{accessibleFocusHandler(e){if(this.listElementId===e.detail){const t=this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);t.focus()}}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.accessibleFocus=i(this,"accessibleFocus",7);this.ariaDescendantFocus=i(this,"ariaDescendantFocus",7);this.clickItem=i(this,"clickItem",7);this.alignButton=o.LEFT;this.clickable=false;this.dividerColor="color-surface03";this.dividerType=l.NONE;this.dividerSize=r.SMALL;this.expandable=false;this.expandableStyle=c.ACCORDION;this.size=h.MEDIUM;this.color="none";this.disabled=false;this.listElementPosition="0";this.listType=d.NONE;this.htmlTabindex=0;this.showInnerContent=false;this.htmlRole="listitem";this.openElementConfig={accordion:{open:"minus-circled",close:"plus-circled"},menu:{open:"chevron-up",close:"chevron-down"}};this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}handleClick(){if(this.disabled){return}this.clickItem.emit(this.listElementId);if(!this.expandable){return}this.showInnerContent=!this.showInnerContent}handleKeyDown(e){const t=e.code===u.ENTER;switch(e.code){case u.ARROW_DOWN:e.preventDefault();this.accessibleFocus.emit(this.listElementId+1);break;case u.ARROW_UP:e.preventDefault();this.accessibleFocus.emit(this.listElementId-1);break;case u.ENTER:e.preventDefault();this.clickItem.emit(this.listElementId);break}if(!this.expandable||!t){return}this.showInnerContent=!this.showInnerContent}onRoleChange(e){this.htmlRole=e}renderExpandableButton(){if(!this.expandable){return null}return n("z-icon",{name:this.showInnerContent?this.openElementConfig[this.expandableStyle].open:this.openElementConfig[this.expandableStyle].close})}renderExpandedContent(){if(!this.expandable){return null}return n("div",{class:{"z-list-element-inner-container":true,expanded:this.showInnerContent}},n("slot",{name:"inner-content"}))}renderContent(){if(this.listType===d.NONE){return n("slot",null)}if(this.listType===d.ORDERED){return n("div",{class:"z-list-content-container"},n("div",null,this.listElementPosition,". "),n("slot",null))}if(this.listType===d.UNORDERED){return n("div",{class:"z-list-content-container"},n("span",null,"• "),n("slot",null))}}render(){return n(s,{key:"6309a4608286747636c1bc81a1783e31224b0ce7","aria-expanded":this.expandable?this.showInnerContent:null,onClick:this.handleClick,onFocus:()=>this.ariaDescendantFocus.emit(this.listElementId),onKeyDown:this.handleKeyDown,clickable:this.clickable&&!this.disabled,tabIndex:this.hasTreeItems?undefined:this.htmlTabindex,role:this.hasTreeItems?"none":this.htmlRole},n("div",{key:"362e834bcc4b561e9a90c74bb41a3dcd3bf4c3ad",class:this.hasTreeItems?"tree-element-container":"container",style:!this.disabled&&{color:`var(--${this.color})`},tabindex:"-1",id:`z-list-element-id-${this.listElementId}`,part:"list-item-container"},n("div",{key:"9b4bc30d2200b4eb3c9da3030acef0222c690734",class:"z-list-element-container"},this.renderExpandableButton(),this.renderContent()),this.renderExpandedContent()),this.dividerType===l.ELEMENT&&n("z-divider",{key:"09a6e380faaefce03873bc1976bec917c60fd9b9",class:{"z-tree-list-divider":this.hasTreeItems},color:this.dividerColor,size:this.dividerSize}))}get host(){return this}static get watchers(){return{role:[{onRoleChange:1}]}}static get style(){return p()}},[257,"z-list-element",{alignButton:[513,"align-button"],clickable:[516],dividerColor:[1,"divider-color"],dividerType:[1,"divider-type"],dividerSize:[1,"divider-size"],expandable:[516],expandableStyle:[1,"expandable-style"],listElementId:[514,"list-element-id"],size:[513],color:[513],disabled:[516],listElementPosition:[513,"list-element-position"],listType:[513,"list-type"],hasTreeItems:[4,"has-tree-items"],htmlTabindex:[2,"html-tabindex"],showInnerContent:[32],htmlRole:[32]},[[4,"accessibleFocus","accessibleFocusHandler"]],{role:[{onRoleChange:1}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["z-list-element","z-divider","z-icon"];e.forEach((e=>{switch(e){case"z-list-element":if(!customElements.get(a(e))){customElements.define(a(e),f)}break;case"z-divider":if(!customElements.get(a(e))){b()}break;case"z-icon":if(!customElements.get(a(e))){m()}break}}))}export{f as Z,v 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 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 i("details",{key:"9dbc24c1558cb8dd8278224d4721a173dc6050f3",ref:a=>this.detailsElm=a,onToggle:this.onDetailsToggle.bind(this),open:this.open},i("summary",{key:"191e306e811898c6e199664af41746a7f7fc6885",tabIndex:this.isDisabled?-1:null,part:"summary"},this.icon&&i("z-icon",{key:"8562f6af8717ec125a8be1def19816c67437a3d0",class:"z-accordion-label-icon",name:this.icon}),i("span",{key:"0a863e554c09d43fe7c778fb15266232c45e5c8c",class:"z-accordion-label"},this.label),this.hasSlottedTags&&i("span",{key:"ec62cf2331385b745e9abde47b763c4f76291cc7",class:"z-accordion-tags"},i("slot",{key:"f4e709e2eeb465595e96fe24b4a0bda02f6eaa84",name:"tag",onSlotchange:()=>this.checkSlottedTags()})),i("z-icon",{key:"dec4e49f0d1fee8f59d38b9d97f98aad3affd8aa",class:"z-accordion-chevron",name:this.open?"chevron-up":"chevron-down"})),!this.isDisabled&&i("div",{key:"21a60ab43db780e601d886f6d7ab3a63e2e102a8",class:"z-accordion-content",part:"content"},i("slot",{key:"8a43604d836c04288661b83fc479cec799143cfc"})))}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(e(a))){customElements.define(e(a),l)}break;case"z-icon":if(!customElements.get(e(a))){c()}break}}))}const h=l;const m=d;export{h as ZAccordion,m as defineCustomElement};
+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 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 i("details",{key:"343e80da7b2d5d3e0a8928eac232c7fe74978c70",ref:a=>this.detailsElm=a,onToggle:this.onDetailsToggle.bind(this),open:this.open},i("summary",{key:"405a4cbf6bc51db034ee78af9441f4e5b4702441",tabIndex:this.isDisabled?-1:null,part:"summary"},this.icon&&i("z-icon",{key:"65cc760624c249b2bb1edb3a717f055c0c1580c8",class:"z-accordion-label-icon",name:this.icon}),i("span",{key:"0f6e2bbf5a34de3b926896b5ab3a876c436a8b8b",class:"z-accordion-label"},this.label),this.hasSlottedTags&&i("span",{key:"54e5c4cad8217cbe41c4869af2b6ae7f973ec8ba",class:"z-accordion-tags"},i("slot",{key:"8460e87ed7cc4fc77149b024be0d74b7f744e042",name:"tag",onSlotchange:()=>this.checkSlottedTags()})),i("z-icon",{key:"472e3ade3c1931ebc8ccf08c2be93d4159580c82",class:"z-accordion-chevron",name:this.open?"chevron-up":"chevron-down"})),!this.isDisabled&&i("div",{key:"9324498fbfc6c99841580e9f504c3a825438849b",class:"z-accordion-content",part:"content"},i("slot",{key:"c276b70da9ea8692479b3eda272aa0cd36edafec"})))}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(e(a))){customElements.define(e(a),l)}break;case"z-icon":if(!customElements.get(e(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 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"./index4.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 h=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:"89751109cccb5d8bef38667bbfdfdc28e1a1febf",collapsed:this.collapsed,class:"z-scrollbar"},n("z-button",{key:"2b5cbb4358af217a87d52c52a24326c316dbc56b",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:"3f5560712a71aaa112b1258b2177efcbb260487d",ref:o=>this.nav=o},n("slot",{key:"da9a478eb5667533ffc14e3ea7f4c28aba30218a"})))}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(i(o))){customElements.define(i(o),h)}break;case"z-button":if(!customElements.get(i(o))){c()}break;case"z-icon":if(!customElements.get(i(o))){s()}break}}))}const v=h;const u=d;export{v as ZAnchorNavigation,u as defineCustomElement};
+import{proxyCustomElement as o,HTMLElement as n,h as a,Host as t,transformTag as i}from"@stencil/core/internal/client";import{B as e,e as r}from"./index2.js";import{d as s}from"./index4.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 d=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:"011b87db007cf01c52321e35439e10331efbc792",collapsed:this.collapsed,class:"z-scrollbar"},a("z-button",{key:"29af3c3ba5b6706aebb7ac269a4004a98d3f0dd9",class:"toggle",size:r.SMALL,variant:e.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},this.collapsedLabel),a("nav",{key:"a6f0dd31673d81f822cd65ad024434f58a1e1fa3",ref:o=>this.nav=o},a("slot",{key:"8488115014b8e3d1a81930c9dedf8dce1d08975e"})))}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))){s()}break;case"z-icon":if(!customElements.get(i(o))){c()}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"./index4.js";import{d as g}from"./index5.js";import{d as m}from"./index3.js";import{d as v}from"./index6.js";import{d as b}from"./index7.js";import{d as w}from"./index8.js";import{d as x}from"./index9.js";import{d as z}from"./index10.js";import{d as k}from"./index11.js";import{d as y}from"./index12.js";import{d as C}from"./index13.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:"a464234ec0ce538282727aa83c43d30b5ea23ffa","menu-length":this.menuLength},i("div",{key:"0f41b7571c5e1acf4298910ab415ca986616a40e",class:{"heading-panel":true,"has-menubar":this.menuLength>0&&!this.enableOffcanvas},ref:e=>this.container=e},i("div",{key:"9b9d45789be83c2db23e035a72b60cd4910b68b2",class:{"heading-container":true,"has-top-subtitle":e}},(!this.enableSearch&&this.isMobile||!this.isMobile)&&i("div",{key:"bd1196659bc19936603de3994011b82ea7649147",class:{"top-subtitle":true,"has-product-logo":e&&this.hasSlot("product-logo")}},i("slot",{key:"5d50957c5b91c138ad21efb849fdd371e93057ae",name:"top-subtitle"})),i("div",{key:"47a21fe5a5b508fe23cf4e185813743e8dce0fab",class:"heading-title"},i("slot",{key:"1c027312231d68cb2ebc625b6aeed177d2e22cf4",name:"menu-button"},this.renderMenuButton()),!this._stuck&&this.renderProductLogos(),i("slot",{key:"6917fa59229dc3d80b5c3ca472bd14b671be9e27",name:"title"}),this.enableSearch&&!this.isMobile&&this.renderSeachbar()),this.enableSearch&&this.isMobile&&this.renderSeachbar()),i("nav",{key:"e3ac84ff0933a8955fa7433f8ea0ae94e5eec080",class:"menu-container","aria-label":this.title||undefined},this.canShowMenu&&i("div",{key:"1f3461f8b2b99d8515774265c07ddcb850ed7757",role:"menubar","aria-label":this.title||undefined},i("slot",{key:"eda425c16602287225554fcca0c65661b46e0366",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"./index4.js";import{d as g}from"./index5.js";import{d as m}from"./index3.js";import{d as b}from"./index6.js";import{d as v}from"./index7.js";import{d as w}from"./index8.js";import{d as x}from"./index9.js";import{d as z}from"./index10.js";import{d as k}from"./index11.js";import{d as y}from"./index12.js";import{d as C}from"./index13.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:var(--space-unit) var(--grid-margin);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-end}.heading-container>.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;align-self:self-end;-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)}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;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}.search-slot{margin-left:auto}.search-slot .z-label{padding-bottom:0;margin-bottom:-3px;font-size:10px;line-height:10px}.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)}.heading-block{display:flex;width:100%;flex-direction:column}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}.heading-block>.top-subtitle{margin-top:calc(var(--space-unit) * 0.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9)}: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}z-searchbar{height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}::slotted([slot="top-subtitle"]){margin-top:calc(var(--space-unit) * 0.5);margin-bottom:calc(var(--space-unit) * -0.5)}.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 S=typeof IntersectionObserver!=="undefined";const E=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",{value:this.searchString,placeholder:this.searchPlaceholder,htmlAriaLabel: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})}renderSearchLabel(){if(this.searchLabel&&!this.isMobile&&!this.isTablet&&!this.enableOffcanvas){return i("label",{class:"z-label"},this.searchLabel)}}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=S?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()}renderTopSubtitle(){if(!this.hasSlot("top-subtitle")||this.enableSearch&&this.isMobile){return}return i("div",{class:{"top-subtitle":true,"has-product-logo":this.hasSlot("product-logo")}},i("slot",{name:"top-subtitle"}))}render(){const e=this.hasSlot("top-subtitle");return i(n,{key:"b2b9e7ca77504392b37f3d77b1266df7818cb0cf","menu-length":this.menuLength},i("div",{key:"9e6b112e27f30445a34f1adbe4287ab226421de0",class:{"heading-panel":true,"has-menubar":this.menuLength>0&&!this.enableOffcanvas},ref:e=>this.container=e},i("div",{key:"44c38afdf95c506ba2d1241b88f86fe9ed2113b7",class:{"heading-container":true,"has-top-subtitle":e}},i("div",{key:"c061f870b799b52b089be972709793ab471a3d98",class:"heading-block"},i("div",{key:"77b4f385458a41751e6d2363d9c07aa19e3888fc",class:"heading-title"},i("slot",{key:"eff35b8f35ee97e91dbcc24acc87a28f0b3268d9",name:"menu-button"},this.renderMenuButton()),!this._stuck&&this.renderProductLogos(),i("div",{key:"9db36b58de99fe7e08d50e81c6483705108f2975",class:"title-container"},!this.isMobile&&this.renderTopSubtitle(),i("slot",{key:"c6b537b48e4486a1ddc5f5dae27639f91d71ac0b",name:"title"})),i("div",{key:"416324b5ea6f9a6a3f27212d02710a70953ff0d7",class:"search-slot"},this.renderSearchLabel(),this.enableSearch&&!this.isMobile&&this.renderSeachbar())),this.isMobile&&this.renderTopSubtitle()),this.enableSearch&&this.isMobile&&this.renderSeachbar()),i("nav",{key:"c7019897ca741018b24fa29bb9bd2e01c20f3de5",class:"menu-container","aria-label":this.title||undefined},this.canShowMenu&&i("div",{key:"77c54b43e038bc4f79d213934303801be87ff0ff",role:"menubar","aria-label":this.title||undefined},i("slot",{key:"bde1fc4c59b536c7cee2acd2177c8f8f3615ffe0",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),E)}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=E;const L=j;export{H as ZAppHeader,L as defineCustomElement};
 //# sourceMappingURL=z-app-header.js.map