@zanichelli/albe-web-components 12.4.1-RC1 → 12.4.1

package/dist/web-components-library/p-a7e61213.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZSelectStyle0","ZSelect","constructor","hostRef","this","itemsList","randomId","ControlSize","BIG","toggleSelectUl","bind","selectItem","handleSelectFocus","watchItems","getInitialItemsArray","selectedItem","find","item","selected","getFocusedItemHandler","e","focusedItemId","target","id","getSelectedItem","getValue","getSelectedValue","setValue","value","values","push","includes","emitOptionSelect","optionSelect","emit","htmlid","emitResetSelect","resetSelect","componentWillLoad","componentWillRender","filterItems","searchString","items","JSON","parse","mapSelectedItemToItemsArray","initialItemsList","map","_a","prevList","length","filter","name","toUpperCase","start","indexOf","end","newName","substring","hasAutocomplete","boolean","autocomplete","handleInputChange","detail","isOpen","disabled","i","arrowsSelectNav","key","showResetIcon","resetItem","arrows","KeyboardCode","ARROW_DOWN","ARROW_UP","preventDefault","stopPropagation","index","focusSelectItem","focusElem","element","querySelector","focus","selfFocusOnClose","readonly","document","addEventListener","removeEventListener","handleInputClick","cp","composedPath","clearIcon","classList","contains","KeyboardEvent","ESC","TAB","ENTER","tree","getElementTree","getClickedElement","parent","elem","nodeName","toLowerCase","MouseEvent","scrollToLetter","letter","foundItem","charAt","renderInput","h","class","placeholder","replace","label","ariaLabel","icon","hasclearicon","message","status","undefined","role","size","onClick","onKeyUp","keyCode","handleKeyboardSubmit","onKeyDown","onInputChange","onKeyPress","String","fromCharCode","renderSelectUl","tabindex","fixed","isfixed","listSizeType","filled","renderResetItem","renderSelectUlItems","hide","hasGroupItems","clickable","dividerType","ListDividerType","ELEMENT","onClickItem","renderItem","lastItem","HEADER","innerHTML","SMALL","X_SMALL","ListSize","MEDIUM","renderNoSearchResults","renderSelectGroupItems","array","itemKey","newData","reduce","group","category","zListItem","Object","entries","slot","color","fill","noresultslabel","renderMessage","render"],"sources":["src/components/inputs/z-select/styles.css?tag=z-select&encapsulation=scoped","src/components/inputs/z-select/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n  color: var(--color-text02);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]),\n:host([size=\"x-small\"]) {\n  font-size: var(--font-size-2);\n}\n\n.select-wrapper > z-input {\n  width: 100%;\n}\n\n.select-wrapper > div {\n  position: relative;\n}\n\n.select-wrapper > div.closed {\n  overflow: hidden;\n  height: 0;\n}\n\n.select-wrapper .ul-scroll-wrapper {\n  position: absolute;\n  width: 100%;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n  border: var(--border-size-small) solid var(--gray200);\n  border-top: none;\n  background: var(--color-surface01);\n  outline: none;\n}\n\n.select-wrapper .closed .ul-scroll-wrapper {\n  z-index: 10;\n}\n\n.select-wrapper .open .ul-scroll-wrapper {\n  z-index: 20;\n}\n\n.select-wrapper .ul-scroll-wrapper.fixed {\n  position: static;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list {\n  position: relative;\n  overflow: auto;\n  max-height: 240px;\n  padding: calc(var(--space-unit) * 0.5);\n  outline: none;\n\n  /* Firefox scrollbar */\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n  border-radius: var(--border-radius);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container {\n  display: flex;\n  align-items: center;\n  padding-left: calc(var(--space-unit) * 1.5);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content {\n  display: block;\n  padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {\n  display: block;\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  .list-element-content {\n  padding: 0;\n}\n\n:host([size=\"small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"x-small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  > z-icon\n  + .list-element-content {\n  padding: 0 var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content.selected {\n  font-weight: bold;\n}\n\n.select-wrapper .ul-scroll-wrapper .no-results z-icon {\n  margin-right: var(--space-unit);\n}\n\n.z-list-group-title {\n  color: var(--gray800);\n}\n\n.reset-item {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\n.reset-item-content {\n  display: flex;\n  align-items: center;\n}\n\n.reset-item.reset-item-margin .reset-item-content {\n  margin-left: calc(var(--space-unit));\n}\n\n.reset-item .reset-item-content > z-icon {\n  margin-right: var(--space-unit);\n}\n\n.reset-item.hide {\n  display: none;\n}\n","import {Component, Prop, State, h, Event, EventEmitter, Watch, Element, Method, Listen} from \"@stencil/core\";\nimport {SelectItem, ListDividerType, KeyboardCode, InputStatus, ControlSize, ListSize} from \"../../../beans\";\nimport {randomId, handleKeyboardSubmit, getClickedElement, getElementTree, boolean} from \"../../../utils/utils\";\n\n@Component({\n  tag: \"z-select\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZSelect {\n  @Element() element: HTMLZSelectElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** the input select options */\n  @Prop()\n  items: SelectItem[] | string;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: 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) */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional) - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input has autocomplete option */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** */\n  @Prop()\n  hasGroupItems?: boolean;\n\n  /** When fixed, it occupies space and pushes down next elements. */\n  @Prop()\n  isfixed?: boolean = false;\n\n  /** */\n  @Prop()\n  resetItem?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isOpen = false;\n\n  @State()\n  selectedItem: null | SelectItem = null;\n\n  @State()\n  focusedItemId: string;\n\n  @State()\n  searchString: null | string;\n\n  private itemsList: SelectItem[] = [];\n\n  constructor() {\n    this.toggleSelectUl = this.toggleSelectUl.bind(this);\n    this.selectItem = this.selectItem.bind(this);\n    this.handleSelectFocus = this.handleSelectFocus.bind(this);\n  }\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = this.getInitialItemsArray();\n    this.selectedItem = this.itemsList.find((item: SelectItem) => item.selected);\n  }\n\n  @Listen(\"ariaDescendantFocus\")\n  getFocusedItemHandler(e: CustomEvent): void {\n    this.focusedItemId = (e.target as Element).id;\n  }\n\n  /** get the input selected options */\n  @Method()\n  async getSelectedItem(): Promise<SelectItem> {\n    return this.selectedItem;\n  }\n\n  /** get the input value */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.getSelectedValue();\n  }\n\n  /** set the input value */\n  @Method()\n  async setValue(value: string | string[]): Promise<void> {\n    let values: string[] = [];\n    if (typeof value === \"string\") {\n      values.push(value);\n    } else {\n      values = value;\n    }\n\n    this.selectedItem = this.itemsList.find((item: SelectItem) => values.includes(item.id));\n  }\n\n  /** Emitted on select option selection, returns select id, selected item id */\n  @Event()\n  optionSelect: EventEmitter;\n\n  private emitOptionSelect(): void {\n    this.optionSelect.emit({\n      id: this.htmlid,\n      selected: this.getSelectedValue(),\n    });\n  }\n\n  /** Emitted on reset selected item, returns select id, selected item id */\n  @Event()\n  resetSelect: EventEmitter;\n\n  private emitResetSelect(): void {\n    this.resetSelect.emit({\n      id: this.htmlid,\n    });\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.filterItems(this.searchString);\n  }\n\n  private getInitialItemsArray(): SelectItem[] {\n    return typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  private mapSelectedItemToItemsArray(): SelectItem[] {\n    const initialItemsList = this.getInitialItemsArray();\n\n    return initialItemsList.map((item: SelectItem) => {\n      item.selected = item.id === this.selectedItem?.id;\n\n      return item;\n    });\n  }\n\n  private getSelectedValue(): string {\n    return this.selectedItem?.id;\n  }\n\n  private filterItems(searchString: string): void {\n    const prevList = this.mapSelectedItemToItemsArray();\n    if (!searchString?.length) {\n      this.itemsList = prevList;\n    } else {\n      this.itemsList = prevList\n        .filter((item: SelectItem) => {\n          return item.name.toUpperCase().includes(searchString.toUpperCase());\n        })\n        .map((item: SelectItem) => {\n          const start = item.name.toUpperCase().indexOf(searchString.toUpperCase());\n          const end = start + searchString.length;\n          const newName =\n            item.name.substring(0, start) +\n            `<strong>${item.name.substring(start, end)}</strong>` +\n            item.name.substring(end, item.name.length);\n          item.name = newName;\n\n          return item;\n        });\n    }\n  }\n\n  private hasAutocomplete(): boolean {\n    return boolean(this.autocomplete) === true;\n  }\n\n  private handleInputChange(e: CustomEvent): void {\n    this.searchString = e.detail.value;\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n    }\n  }\n\n  private selectItem(item: null | SelectItem, selected: boolean): void {\n    if (item && item.disabled) {\n      return;\n    }\n\n    this.itemsList = this.mapSelectedItemToItemsArray();\n    this.itemsList = this.itemsList.map((i: SelectItem) => {\n      i.selected = false;\n      if (i.id === item?.id) {\n        i.selected = selected;\n      }\n\n      return i;\n    });\n\n    this.selectedItem = this.itemsList.find((item: SelectItem) => item.selected);\n\n    this.emitOptionSelect();\n\n    if (this.searchString) {\n      this.searchString = null;\n    }\n  }\n\n  private arrowsSelectNav(e: KeyboardEvent, key: number): void {\n    const showResetIcon = this.resetItem && !!this.selectedItem;\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (!arrows.includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n    }\n\n    let index: number;\n\n    if (this.resetItem) {\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        index = key + 1 === this.itemsList.length + 1 ? +!showResetIcon : key + 1;\n      } else if (e.key === KeyboardCode.ARROW_UP) {\n        index = key <= +!showResetIcon ? this.itemsList.length : key - 1;\n      }\n    }\n\n    if (!this.resetItem) {\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        index = key + 1 === this.itemsList.length ? 0 : key + 1;\n      } else if (e.key === KeyboardCode.ARROW_UP) {\n        index = key <= 0 ? this.itemsList.length - 1 : key - 1;\n      }\n    }\n\n    this.focusSelectItem(index);\n  }\n\n  private focusSelectItem(index: number): void {\n    const focusElem: HTMLLIElement = this.element.querySelector(`#${this.htmlid}_${index}`);\n    if (focusElem) {\n      focusElem.focus();\n    }\n  }\n\n  private toggleSelectUl(selfFocusOnClose = false): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (!this.isOpen) {\n      document.addEventListener(\"click\", this.handleSelectFocus);\n      document.addEventListener(\"keyup\", this.handleSelectFocus);\n    } else {\n      document.removeEventListener(\"click\", this.handleSelectFocus);\n      document.removeEventListener(\"keyup\", this.handleSelectFocus);\n      if (selfFocusOnClose) {\n        (this.element.querySelector(`#${this.htmlid}_input`) as HTMLInputElement).focus();\n      }\n    }\n\n    this.focusedItemId = \"\";\n    this.isOpen = !this.isOpen;\n  }\n\n  private handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    const cp = e.composedPath();\n    const clearIcon = cp.find((item: HTMLElement) => item.classList && item.classList.contains(\"reset-icon\"));\n    if (clearIcon) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    this.toggleSelectUl();\n  }\n\n  private handleSelectFocus(e: MouseEvent | KeyboardEvent): void {\n    if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {\n      e.stopPropagation();\n\n      return this.toggleSelectUl(true);\n    }\n\n    if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {\n      return;\n    }\n\n    const tree = getElementTree(getClickedElement());\n    const parent = tree.find((elem: HTMLElement) => {\n      return elem.nodeName.toLowerCase() === \"z-input\" && elem.id === `${this.htmlid}_input`;\n    });\n\n    if (!parent) {\n      this.toggleSelectUl(e instanceof MouseEvent ? true : false);\n    }\n  }\n\n  private scrollToLetter(letter: string): void {\n    const foundItem = this.itemsList.find((item: SelectItem) => item.name.charAt(0) === letter);\n    if (foundItem) {\n      this.focusSelectItem(this.itemsList.indexOf(foundItem));\n    }\n  }\n\n  private renderInput(): HTMLZInputElement {\n    return (\n      <z-input\n        class={{\n          \"active-select\": this.isOpen,\n          \"cursor-select\": !this.autocomplete,\n        }}\n        id={`${this.htmlid}_input`}\n        htmlid={`${this.htmlid}_select_input`}\n        placeholder={this.placeholder}\n        value={!this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, \"\") : null}\n        label={this.label}\n        aria-expanded={this.isOpen ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        aria-controls={`${this.htmlid}_list`}\n        aria-autocomplete={this.hasAutocomplete() ? \"list\" : \"none\"}\n        aria-activedescendant={this.isOpen ? this.focusedItemId : \"\"}\n        icon={this.isOpen ? \"caret-up\" : \"caret-down\"}\n        hasclearicon={this.hasAutocomplete()}\n        message={false}\n        disabled={this.disabled}\n        readonly={this.readonly || (!this.hasAutocomplete() && this.isOpen)}\n        status={this.isOpen ? undefined : this.status}\n        role=\"combobox\"\n        size={this.size}\n        onClick={(e: MouseEvent) => {\n          this.handleInputClick(e);\n        }}\n        onKeyUp={(e: KeyboardEvent) => {\n          if (e.keyCode !== 13) {\n            e.preventDefault();\n          }\n          handleKeyboardSubmit(e, this.toggleSelectUl);\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          return this.arrowsSelectNav(\n            e,\n            this.selectedItem ? this.itemsList.indexOf(this.selectedItem) : this.resetItem ? 0 : -1\n          );\n        }}\n        onInputChange={(e: CustomEvent) => {\n          this.handleInputChange(e);\n        }}\n        onKeyPress={(e: KeyboardEvent) => {\n          if (!this.hasAutocomplete()) {\n            e.preventDefault();\n            this.scrollToLetter(String.fromCharCode(e.keyCode));\n          }\n        }}\n      />\n    );\n  }\n\n  private renderSelectUl(): HTMLDivElement {\n    return (\n      <div\n        class={this.isOpen ? \"open\" : \"closed\"}\n        tabindex=\"-1\"\n      >\n        <div\n          class={{\n            \"ul-scroll-wrapper\": true,\n            \"fixed\": this.isfixed,\n          }}\n          tabindex=\"-1\"\n        >\n          <z-list\n            role=\"listbox\"\n            aria-label={this.ariaLabel || this.label}\n            tabindex={this.disabled || this.readonly || !this.isOpen ? -1 : 0}\n            id={`${this.htmlid}_list`}\n            aria-multiselectable={false}\n            size={this.listSizeType()}\n            class={{\n              disabled: this.disabled,\n              readonly: this.readonly,\n              filled: !!this.selectedItem,\n              [`input-${this.status}`]: !this.isOpen && !!this.status,\n            }}\n          >\n            {this.resetItem && this.renderResetItem()}\n            {this.renderSelectUlItems()}\n          </z-list>\n        </div>\n      </div>\n    );\n  }\n\n  private renderResetItem(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        class={{\n          \"hide\": !this.selectedItem || !this.resetItem,\n          \"reset-item\": true,\n          \"reset-item-margin\": !this.hasGroupItems,\n        }}\n        clickable={true}\n        disabled={false}\n        dividerType={ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex=\"0\"\n        aria-selected=\"false\"\n        id={`${this.htmlid}_${this.resetItem ? \"0\" : \"none\"}`}\n        size={this.listSizeType()}\n        onClickItem={() => {\n          this.selectedItem = null;\n          this.searchString = null;\n          this.emitResetSelect();\n        }}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, 0)}\n      >\n        <div class=\"reset-item-content\">\n          <z-icon name=\"multiply-circled\" />\n          <span>{this.resetItem}</span>\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private renderItem(item: SelectItem, key: number, lastItem: boolean): HTMLZListElementElement {\n    return (\n      <z-list-element\n        clickable={!item.disabled}\n        disabled={item.disabled}\n        dividerType={lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex={item.disabled || !this.isOpen ? -1 : 0}\n        aria-selected={item.selected ? \"true\" : \"false\"}\n        id={`${this.htmlid}_${key}`}\n        size={this.listSizeType()}\n        onClickItem={() => this.selectItem(item, true)}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, key)}\n      >\n        <div class=\"list-element-container\">\n          {item.icon && <z-icon name={item.icon} />}\n          <span\n            class={{\n              \"selected\": !!item.selected,\n              \"list-element-content\": true,\n            }}\n            innerHTML={item.name}\n          />\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private listSizeType(): ListSize {\n    if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {\n      return ListSize.SMALL;\n    }\n\n    return ListSize.MEDIUM;\n  }\n\n  private renderSelectUlItems(): HTMLZListElementElement | HTMLZListElementElement[] {\n    if (!this.itemsList.length) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasGroupItems) {\n      return this.renderSelectGroupItems();\n    }\n\n    return this.itemsList.map((item: SelectItem, key, array) => {\n      const lastItem = array.length === key + 1;\n      const itemKey = this.resetItem ? key + 1 : key;\n\n      return this.renderItem(item, itemKey, lastItem);\n    });\n  }\n\n  private renderSelectGroupItems(): HTMLZListElementElement | HTMLZListElementElement[] {\n    const newData = this.itemsList.reduce((group, item, index, array) => {\n      const {category} = item;\n      const lastItem = array.length === index + 1;\n      const itemKey = this.resetItem ? index + 1 : index;\n      const zListItem = this.renderItem(item, itemKey, lastItem);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    return Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n  }\n\n  private renderNoSearchResults(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        color=\"blue500\"\n        class=\"no-results\"\n        size={this.listSizeType()}\n      >\n        <z-icon\n          name=\"multiply-circle\"\n          fill=\"blue500\"\n        />\n        {this.noresultslabel}\n      </z-list-element>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n      />\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"select-wrapper\">\n        {this.renderInput()}\n        {this.renderSelectUl()}\n        {this.renderMessage()}\n      </div>\n    );\n  }\n}\n"],"mappings":"0MAAA,MAAMA,EAAY,wxIAClB,MAAAC,EAAeD,E,MCSFE,EAAO,MAqFlB,WAAAC,CAAAC,G,8FAFQC,KAAAC,UAA0B,G,YA9EzB,MAAMC,M,6EAgBH,G,cAIS,M,cAIA,M,uFAgBQ,K,kBAIJ,M,oBAIC,mB,0CAQN,M,mCAQCC,EAAYC,I,YAGxB,M,kBAGyB,K,yDAWhCJ,KAAKK,eAAiBL,KAAKK,eAAeC,KAAKN,MAC/CA,KAAKO,WAAaP,KAAKO,WAAWD,KAAKN,MACvCA,KAAKQ,kBAAoBR,KAAKQ,kBAAkBF,KAAKN,K,CAIvD,UAAAS,GACET,KAAKC,UAAYD,KAAKU,uBACtBV,KAAKW,aAAeX,KAAKC,UAAUW,MAAMC,GAAqBA,EAAKC,U,CAIrE,qBAAAC,CAAsBC,GACpBhB,KAAKiB,cAAiBD,EAAEE,OAAmBC,E,CAK7C,qBAAMC,GACJ,OAAOpB,KAAKW,Y,CAKd,cAAMU,GACJ,OAAOrB,KAAKsB,kB,CAKd,cAAMC,CAASC,GACb,IAAIC,EAAmB,GACvB,UAAWD,IAAU,SAAU,CAC7BC,EAAOC,KAAKF,E,KACP,CACLC,EAASD,C,CAGXxB,KAAKW,aAAeX,KAAKC,UAAUW,MAAMC,GAAqBY,EAAOE,SAASd,EAAKM,K,CAO7E,gBAAAS,GACN5B,KAAK6B,aAAaC,KAAK,CACrBX,GAAInB,KAAK+B,OACTjB,SAAUd,KAAKsB,oB,CAQX,eAAAU,GACNhC,KAAKiC,YAAYH,KAAK,CACpBX,GAAInB,KAAK+B,Q,CAIb,iBAAAG,GACElC,KAAKS,Y,CAGP,mBAAA0B,GACEnC,KAAKoC,YAAYpC,KAAKqC,a,CAGhB,oBAAA3B,GACN,cAAcV,KAAKsC,QAAU,SAAWC,KAAKC,MAAMxC,KAAKsC,OAAStC,KAAKsC,K,CAGhE,2BAAAG,GACN,MAAMC,EAAmB1C,KAAKU,uBAE9B,OAAOgC,EAAiBC,KAAK9B,I,MAC3BA,EAAKC,SAAWD,EAAKM,OAAOyB,EAAA5C,KAAKW,gBAAY,MAAAiC,SAAA,SAAAA,EAAEzB,IAE/C,OAAON,CAAI,G,CAIP,gBAAAS,G,MACN,OAAOsB,EAAA5C,KAAKW,gBAAY,MAAAiC,SAAA,SAAAA,EAAEzB,E,CAGpB,WAAAiB,CAAYC,GAClB,MAAMQ,EAAW7C,KAAKyC,8BACtB,KAAKJ,IAAY,MAAZA,SAAY,SAAZA,EAAcS,QAAQ,CACzB9C,KAAKC,UAAY4C,C,KACZ,CACL7C,KAAKC,UAAY4C,EACdE,QAAQlC,GACAA,EAAKmC,KAAKC,cAActB,SAASU,EAAaY,iBAEtDN,KAAK9B,IACJ,MAAMqC,EAAQrC,EAAKmC,KAAKC,cAAcE,QAAQd,EAAaY,eAC3D,MAAMG,EAAMF,EAAQb,EAAaS,OACjC,MAAMO,EACJxC,EAAKmC,KAAKM,UAAU,EAAGJ,GACvB,WAAWrC,EAAKmC,KAAKM,UAAUJ,EAAOE,cACtCvC,EAAKmC,KAAKM,UAAUF,EAAKvC,EAAKmC,KAAKF,QACrCjC,EAAKmC,KAAOK,EAEZ,OAAOxC,CAAI,G,EAKX,eAAA0C,GACN,OAAOC,EAAQxD,KAAKyD,gBAAkB,I,CAGhC,iBAAAC,CAAkB1C,GACxBhB,KAAKqC,aAAerB,EAAE2C,OAAOnC,MAC7B,IAAKxB,KAAK4D,OAAQ,CAChB5D,KAAKK,gB,EAID,UAAAE,CAAWM,EAAyBC,GAC1C,GAAID,GAAQA,EAAKgD,SAAU,CACzB,M,CAGF7D,KAAKC,UAAYD,KAAKyC,8BACtBzC,KAAKC,UAAYD,KAAKC,UAAU0C,KAAKmB,IACnCA,EAAEhD,SAAW,MACb,GAAIgD,EAAE3C,MAAON,IAAI,MAAJA,SAAI,SAAJA,EAAMM,IAAI,CACrB2C,EAAEhD,SAAWA,C,CAGf,OAAOgD,CAAC,IAGV9D,KAAKW,aAAeX,KAAKC,UAAUW,MAAMC,GAAqBA,EAAKC,WAEnEd,KAAK4B,mBAEL,GAAI5B,KAAKqC,aAAc,CACrBrC,KAAKqC,aAAe,I,EAIhB,eAAA0B,CAAgB/C,EAAkBgD,GACxC,MAAMC,EAAgBjE,KAAKkE,aAAelE,KAAKW,aAC/C,MAAMwD,EAAS,CAACC,EAAaC,WAAYD,EAAaE,UACtD,IAAKH,EAAOxC,SAASX,EAAEgD,KAAsB,CAC3C,M,CAGFhD,EAAEuD,iBACFvD,EAAEwD,kBAEF,IAAKxE,KAAK4D,OAAQ,CAChB5D,KAAKK,gB,CAGP,IAAIoE,EAEJ,GAAIzE,KAAKkE,UAAW,CAClB,GAAIlD,EAAEgD,MAAQI,EAAaC,WAAY,CACrCI,EAAQT,EAAM,IAAMhE,KAAKC,UAAU6C,OAAS,IAAMmB,EAAgBD,EAAM,C,MACnE,GAAIhD,EAAEgD,MAAQI,EAAaE,SAAU,CAC1CG,EAAQT,KAASC,EAAgBjE,KAAKC,UAAU6C,OAASkB,EAAM,C,EAInE,IAAKhE,KAAKkE,UAAW,CACnB,GAAIlD,EAAEgD,MAAQI,EAAaC,WAAY,CACrCI,EAAQT,EAAM,IAAMhE,KAAKC,UAAU6C,OAAS,EAAIkB,EAAM,C,MACjD,GAAIhD,EAAEgD,MAAQI,EAAaE,SAAU,CAC1CG,EAAQT,GAAO,EAAIhE,KAAKC,UAAU6C,OAAS,EAAIkB,EAAM,C,EAIzDhE,KAAK0E,gBAAgBD,E,CAGf,eAAAC,CAAgBD,GACtB,MAAME,EAA2B3E,KAAK4E,QAAQC,cAAc,IAAI7E,KAAK+B,UAAU0C,KAC/E,GAAIE,EAAW,CACbA,EAAUG,O,EAIN,cAAAzE,CAAe0E,EAAmB,OACxC,GAAI/E,KAAK6D,UAAY7D,KAAKgF,SAAU,CAClC,M,CAGF,IAAKhF,KAAK4D,OAAQ,CAChBqB,SAASC,iBAAiB,QAASlF,KAAKQ,mBACxCyE,SAASC,iBAAiB,QAASlF,KAAKQ,kB,KACnC,CACLyE,SAASE,oBAAoB,QAASnF,KAAKQ,mBAC3CyE,SAASE,oBAAoB,QAASnF,KAAKQ,mBAC3C,GAAIuE,EAAkB,CACnB/E,KAAK4E,QAAQC,cAAc,IAAI7E,KAAK+B,gBAAqC+C,O,EAI9E9E,KAAKiB,cAAgB,GACrBjB,KAAK4D,QAAU5D,KAAK4D,M,CAGd,gBAAAwB,CAAiBpE,GACvB,MAAMqE,EAAKrE,EAAEsE,eACb,MAAMC,EAAYF,EAAGzE,MAAMC,GAAsBA,EAAK2E,WAAa3E,EAAK2E,UAAUC,SAAS,gBAC3F,GAAIF,EAAW,CACbvE,EAAEwD,kBAEF,M,CAGFxE,KAAKK,gB,CAGC,iBAAAG,CAAkBQ,GACxB,GAAIA,aAAa0E,eAAiB1E,EAAEgD,MAAQI,EAAauB,IAAK,CAC5D3E,EAAEwD,kBAEF,OAAOxE,KAAKK,eAAe,K,CAG7B,GAAIW,aAAa0E,eAAiB1E,EAAEgD,MAAQI,EAAawB,KAAO5E,EAAEgD,MAAQI,EAAayB,MAAO,CAC5F,M,CAGF,MAAMC,EAAOC,EAAeC,KAC5B,MAAMC,EAASH,EAAKlF,MAAMsF,GACjBA,EAAKC,SAASC,gBAAkB,WAAaF,EAAK/E,KAAO,GAAGnB,KAAK+B,iBAG1E,IAAKkE,EAAQ,CACXjG,KAAKK,eAAeW,aAAaqF,WAAa,KAAO,M,EAIjD,cAAAC,CAAeC,GACrB,MAAMC,EAAYxG,KAAKC,UAAUW,MAAMC,GAAqBA,EAAKmC,KAAKyD,OAAO,KAAOF,IACpF,GAAIC,EAAW,CACbxG,KAAK0E,gBAAgB1E,KAAKC,UAAUkD,QAAQqD,G,EAIxC,WAAAE,GACN,OACEC,EAAA,WACEC,MAAO,CACL,gBAAiB5G,KAAK4D,OACtB,iBAAkB5D,KAAKyD,cAEzBtC,GAAI,GAAGnB,KAAK+B,eACZA,OAAQ,GAAG/B,KAAK+B,sBAChB8E,YAAa7G,KAAK6G,YAClBrF,OAAQxB,KAAK4D,QAAU5D,KAAKW,aAAeX,KAAKW,aAAaqC,KAAK8D,QAAQ,WAAY,IAAM,KAC5FC,MAAO/G,KAAK+G,MAAK,gBACF/G,KAAK4D,OAAS,OAAS,QAAO,aACjC5D,KAAKgH,UAAS,gBACX,GAAGhH,KAAK+B,cAAa,oBACjB/B,KAAKuD,kBAAoB,OAAS,OAAM,wBACpCvD,KAAK4D,OAAS5D,KAAKiB,cAAgB,GAC1DgG,KAAMjH,KAAK4D,OAAS,WAAa,aACjCsD,aAAclH,KAAKuD,kBACnB4D,QAAS,MACTtD,SAAU7D,KAAK6D,SACfmB,SAAUhF,KAAKgF,WAAchF,KAAKuD,mBAAqBvD,KAAK4D,OAC5DwD,OAAQpH,KAAK4D,OAASyD,UAAYrH,KAAKoH,OACvCE,KAAK,WACLC,KAAMvH,KAAKuH,KACXC,QAAUxG,IACRhB,KAAKoF,iBAAiBpE,EAAE,EAE1ByG,QAAUzG,IACR,GAAIA,EAAE0G,UAAY,GAAI,CACpB1G,EAAEuD,gB,CAEJoD,EAAqB3G,EAAGhB,KAAKK,eAAe,EAE9CuH,UAAY5G,GACHhB,KAAK+D,gBACV/C,EACAhB,KAAKW,aAAeX,KAAKC,UAAUkD,QAAQnD,KAAKW,cAAgBX,KAAKkE,UAAY,GAAK,GAG1F2D,cAAgB7G,IACdhB,KAAK0D,kBAAkB1C,EAAE,EAE3B8G,WAAa9G,IACX,IAAKhB,KAAKuD,kBAAmB,CAC3BvC,EAAEuD,iBACFvE,KAAKsG,eAAeyB,OAAOC,aAAahH,EAAE0G,S,KAO5C,cAAAO,GACN,OACEtB,EAAA,OACEC,MAAO5G,KAAK4D,OAAS,OAAS,SAC9BsE,SAAS,MAETvB,EAAA,OACEC,MAAO,CACL,oBAAqB,KACrBuB,MAASnI,KAAKoI,SAEhBF,SAAS,MAETvB,EAAA,UACEW,KAAK,UAAS,aACFtH,KAAKgH,WAAahH,KAAK+G,MACnCmB,SAAUlI,KAAK6D,UAAY7D,KAAKgF,WAAahF,KAAK4D,QAAU,EAAI,EAChEzC,GAAI,GAAGnB,KAAK+B,cAAa,uBACH,MACtBwF,KAAMvH,KAAKqI,eACXzB,MAAO,CACL/C,SAAU7D,KAAK6D,SACfmB,SAAUhF,KAAKgF,SACfsD,SAAUtI,KAAKW,aACf,CAAC,SAASX,KAAKoH,WAAYpH,KAAK4D,UAAY5D,KAAKoH,SAGlDpH,KAAKkE,WAAalE,KAAKuI,kBACvBvI,KAAKwI,wB,CAOR,eAAAD,GACN,OACE5B,EAAA,kBACEC,MAAO,CACL6B,MAASzI,KAAKW,eAAiBX,KAAKkE,UACpC,aAAc,KACd,qBAAsBlE,KAAK0I,eAE7BC,UAAW,KACX9E,SAAU,MACV+E,YAAaC,EAAgBC,QAC7BxB,KAAK,SACLY,SAAS,IAAG,gBACE,QACd/G,GAAI,GAAGnB,KAAK+B,UAAU/B,KAAKkE,UAAY,IAAM,SAC7CqD,KAAMvH,KAAKqI,eACXU,YAAa,KACX/I,KAAKW,aAAe,KACpBX,KAAKqC,aAAe,KACpBrC,KAAKgC,iBAAiB,EAExB4F,UAAY5G,GAAqBhB,KAAK+D,gBAAgB/C,EAAG,IAEzD2F,EAAA,OAAKC,MAAM,sBACTD,EAAA,UAAQ3D,KAAK,qBACb2D,EAAA,YAAO3G,KAAKkE,Y,CAMZ,UAAA8E,CAAWnI,EAAkBmD,EAAaiF,GAChD,OACEtC,EAAA,kBACEgC,WAAY9H,EAAKgD,SACjBA,SAAUhD,EAAKgD,SACf+E,YAAaK,EAAWJ,EAAgBK,OAASL,EAAgBC,QACjExB,KAAK,SACLY,SAAUrH,EAAKgD,WAAa7D,KAAK4D,QAAU,EAAI,EAAC,gBACjC/C,EAAKC,SAAW,OAAS,QACxCK,GAAI,GAAGnB,KAAK+B,UAAUiC,IACtBuD,KAAMvH,KAAKqI,eACXU,YAAa,IAAM/I,KAAKO,WAAWM,EAAM,MACzC+G,UAAY5G,GAAqBhB,KAAK+D,gBAAgB/C,EAAGgD,IAEzD2C,EAAA,OAAKC,MAAM,0BACR/F,EAAKoG,MAAQN,EAAA,UAAQ3D,KAAMnC,EAAKoG,OACjCN,EAAA,QACEC,MAAO,CACL9F,WAAcD,EAAKC,SACnB,uBAAwB,MAE1BqI,UAAWtI,EAAKmC,Q,CAOlB,YAAAqF,GACN,GAAIrI,KAAKuH,OAASpH,EAAYiJ,OAASpJ,KAAKuH,OAASpH,EAAYkJ,QAAS,CACxE,OAAOC,EAASF,K,CAGlB,OAAOE,EAASC,M,CAGV,mBAAAf,GACN,IAAKxI,KAAKC,UAAU6C,OAAQ,CAC1B,OAAO9C,KAAKwJ,uB,CAGd,GAAIxJ,KAAK0I,cAAe,CACtB,OAAO1I,KAAKyJ,wB,CAGd,OAAOzJ,KAAKC,UAAU0C,KAAI,CAAC9B,EAAkBmD,EAAK0F,KAChD,MAAMT,EAAWS,EAAM5G,SAAWkB,EAAM,EACxC,MAAM2F,EAAU3J,KAAKkE,UAAYF,EAAM,EAAIA,EAE3C,OAAOhE,KAAKgJ,WAAWnI,EAAM8I,EAASV,EAAS,G,CAI3C,sBAAAQ,GACN,MAAMG,EAAU5J,KAAKC,UAAU4J,QAAO,CAACC,EAAOjJ,EAAM4D,EAAOiF,K,MACzD,MAAMK,SAACA,GAAYlJ,EACnB,MAAMoI,EAAWS,EAAM5G,SAAW2B,EAAQ,EAC1C,MAAMkF,EAAU3J,KAAKkE,UAAYO,EAAQ,EAAIA,EAC7C,MAAMuF,EAAYhK,KAAKgJ,WAAWnI,EAAM8I,EAASV,GAEjDa,EAAMC,IAAYnH,EAAAkH,EAAMC,MAAS,MAAAnH,SAAA,EAAAA,EAAI,GACrCkH,EAAMC,GAAUrI,KAAKsI,GAErB,OAAOF,CAAK,GACX,IAEH,OAAOG,OAAOC,QAAQN,GAAuDjH,KAAI,EAAEqB,EAAKxC,KAEpFmF,EAAA,+BAA4BkC,EAAgBC,SAC1CnC,EAAA,QACEC,MAAM,+BACNuD,KAAK,gBAEJnG,GAEFxC,EAAMmB,KAAK9B,GAASA,M,CAMrB,qBAAA2I,GACN,OACE7C,EAAA,kBACEyD,MAAM,UACNxD,MAAM,aACNW,KAAMvH,KAAKqI,gBAEX1B,EAAA,UACE3D,KAAK,kBACLqH,KAAK,YAENrK,KAAKsK,e,CAKJ,aAAAC,GACN,GAAI/G,EAAQxD,KAAKmH,WAAa,MAAO,CACnC,M,CAGF,OACER,EAAA,mBACEQ,QAAS3D,EAAQxD,KAAKmH,WAAa,KAAOE,UAAarH,KAAKmH,QAC5DC,OAAQpH,KAAKoH,OACbR,MAAO5G,KAAKuH,M,CAKlB,MAAAiD,GACE,OACE7D,EAAA,OAAA3C,IAAA,2CAAK4C,MAAM,kBACR5G,KAAK0G,cACL1G,KAAKiI,iBACLjI,KAAKuK,gB"}

package/dist/web-components-library/p-a8901c35.entry.js

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

package/dist/web-components-library/p-a8901c35.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMyzListItemStyle0","ZMyzListItem","emitZListItemLinkClick","e","linkId","this","zListItemLinkClick","emit","emitZListItemClick","listitemid","zListItemClick","constructor","hostRef","bind","render","h","key","role","id","action","onClick","onKeyPress","ev","handleKeyboardSubmit","class","underlined","icon","name","link","href","target","linktarget","tabindex","text","innerHTML"],"sources":["src/snowflakes/myz/list/z-myz-list-item/styles.css?tag=z-myz-list-item&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list-item/index.tsx"],"sourcesContent":[":host li {\n  all: unset;\n  all: reset;\n  width: 100%;\n  line-height: 14px;\n  list-style-type: none;\n}\n\n:host li > span {\n  display: flex;\n  padding: calc(var(--space-unit) * 2) 0;\n  color: var(--color-text01);\n  fill: var(--color-icon02);\n  font-family: var(--font-family-sans);\n  font-size: 16px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.23px;\n  line-height: 14px;\n}\n\n:host(.small) li > span {\n  padding: calc(var(--space-unit) * 1.5) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.x-small) li > span {\n  padding: var(--space-unit) 0;\n  font-size: var(--font-size-2);\n}\n\n:host(.small) li > span > z-icon,\n:host(.x-small) li > span > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: calc(var(--space-unit) * 0.5);\n\n  padding: 0;\n}\n\n:host li > span.border {\n  border-bottom: 2px solid var(--color-surface03);\n}\n\n:host li span:hover,\na:hover {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\na,\na:visited,\na:active {\n  color: inherit;\n  fill: inherit;\n  text-decoration: none;\n}\n\n:host li span z-icon {\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  padding: 0 calc(var(--space-unit) * 1.5) 0 0;\n  background-repeat: no-repeat;\n  background-size: contain;\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n","import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\n\n@Component({\n  tag: \"z-myz-list-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzListItem {\n  /** content text */\n  @Prop()\n  text: string;\n\n  /** link url (optional) */\n  @Prop()\n  link?: string;\n\n  /** link target (optional) */\n  @Prop()\n  linktarget?: string = \"_self\";\n\n  /** icon name (optional) */\n  @Prop()\n  icon?: string;\n\n  /** id (optional) */\n  @Prop()\n  listitemid?: string;\n\n  /** data-action attribute (optional) */\n  @Prop()\n  action?: string;\n\n  /** underlined style flag */\n  @Prop()\n  underlined = true;\n\n  /** emitted on list item link click, returns linkId */\n  @Event()\n  zListItemLinkClick: EventEmitter;\n\n  private emitZListItemLinkClick(e: MouseEvent, linkId): void {\n    this.zListItemLinkClick.emit({e, linkId});\n  }\n\n  /** emitted on list item click, returns listitemid */\n  @Event()\n  zListItemClick: EventEmitter;\n\n  private emitZListItemClick(e: MouseEvent, listitemid): void {\n    this.zListItemClick.emit({e, listitemid});\n  }\n\n  constructor() {\n    this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);\n    this.emitZListItemClick = this.emitZListItemClick.bind(this);\n  }\n\n  render(): HTMLLIElement {\n    const linkId = this.listitemid ? `link_${this.listitemid}` : \"\";\n\n    return (\n      <li\n        role=\"button\"\n        id={this.listitemid}\n        data-action={this.action}\n        onClick={(e: MouseEvent) => this.emitZListItemClick(e, this.listitemid)}\n        onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid)}\n      >\n        <span class={this.underlined && \"border\"}>\n          {this.icon && <z-icon name={this.icon} />}\n          {this.link ? (\n            <a\n              href={this.link ? this.link : null}\n              target={this.linktarget}\n              id={linkId}\n              onClick={(e: MouseEvent) => this.emitZListItemLinkClick(e, linkId)}\n              onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId)}\n              role={this.link ? \"link\" : \"button\"}\n              tabindex=\"0\"\n            >\n              {this.text}\n            </a>\n          ) : (\n            <span innerHTML={this.text}></span>\n          )}\n          <slot />\n        </span>\n      </li>\n    );\n  }\n}\n"],"mappings":"sIAAA,MAAMA,EAAY,0lCAClB,MAAAC,EAAeD,E,MCOFE,EAAY,MAiCf,sBAAAC,CAAuBC,EAAeC,GAC5CC,KAAKC,mBAAmBC,KAAK,CAACJ,IAAGC,U,CAO3B,kBAAAI,CAAmBL,EAAeM,GACxCJ,KAAKK,eAAeH,KAAK,CAACJ,IAAGM,c,CAG/B,WAAAE,CAAAC,G,wKAlCsB,Q,oFAgBT,KAmBXP,KAAKH,uBAAyBG,KAAKH,uBAAuBW,KAAKR,MAC/DA,KAAKG,mBAAqBH,KAAKG,mBAAmBK,KAAKR,K,CAGzD,MAAAS,GACE,MAAMV,EAASC,KAAKI,WAAa,QAAQJ,KAAKI,aAAe,GAE7D,OACEM,EAAA,MAAAC,IAAA,2CACEC,KAAK,SACLC,GAAIb,KAAKI,WAAU,cACNJ,KAAKc,OAClBC,QAAUjB,GAAkBE,KAAKG,mBAAmBL,EAAGE,KAAKI,YAC5DY,WAAaC,GAAsBC,EAAqBD,EAAIjB,KAAKG,mBAAoBH,KAAKI,aAE1FM,EAAA,QAAAC,IAAA,2CAAMQ,MAAOnB,KAAKoB,YAAc,UAC7BpB,KAAKqB,MAAQX,EAAA,UAAQY,KAAMtB,KAAKqB,OAChCrB,KAAKuB,KACJb,EAAA,KACEc,KAAMxB,KAAKuB,KAAOvB,KAAKuB,KAAO,KAC9BE,OAAQzB,KAAK0B,WACbb,GAAId,EACJgB,QAAUjB,GAAkBE,KAAKH,uBAAuBC,EAAGC,GAC3DiB,WAAaC,GAAsBC,EAAqBD,EAAIjB,KAAKH,uBAAwBE,GACzFa,KAAMZ,KAAKuB,KAAO,OAAS,SAC3BI,SAAS,KAER3B,KAAK4B,MAGRlB,EAAA,QAAMmB,UAAW7B,KAAK4B,OAExBlB,EAAA,QAAAC,IAAA,8C"}

package/dist/web-components-library/p-a9d42b98.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o,a as i,g as s}from"./p-10bb4f4b.js";const a=':host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-icon02)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot="item"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}';const n=a;const l=class{constructor(o){t(this,o);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.open=undefined;this.hasContent=undefined}toggle(){if(!this.hasContent){return}this.open=!this.open;this.open?this.opened.emit():this.closed.emit()}handleClick(t){if(!this.open||this.hostElement.contains(t.target)){return}this.open=false;this.closed.emit()}checkContent(){this.hasContent=this.hostElement.querySelectorAll('[slot="item"]').length>0}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=(e===null||e===void 0?void 0:e.innerText)||null}componentWillLoad(){this.checkContent()}render(){return o(i,{key:"beadad10be10337d069e96c4144372b3ae9188d7",role:"menu",open:this.open},o("button",{key:"d76a6e7da3bb60238571b5a4e9c76b2923b07a97",class:"label","aria-pressed":this.open?"true":"false",onClick:this.toggle.bind(this)},o("slot",{key:"ba6a653482a7e3f5de77877e7e69225c236b85f8",onSlotchange:this.onLabelSlotChange.bind(this)}),this.hasContent&&o("z-icon",{name:this.open?"chevron-up":"chevron-down"})),this.open&&o("div",{class:"items"},o("slot",{name:"item",onSlotchange:this.checkContent.bind(this)})))}get hostElement(){return s(this)}};l.style=n;export{l as z_menu_section};
+//# sourceMappingURL=p-a9d42b98.entry.js.map

package/dist/web-components-library/p-a9d42b98.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMenuSectionStyle0","ZMenuSection","toggle","this","hasContent","open","opened","emit","closed","handleClick","ev","hostElement","contains","target","checkContent","querySelectorAll","length","onLabelSlotChange","labelElement","assignedElements","dataset","text","innerText","componentWillLoad","render","h","Host","key","role","class","onClick","bind","onSlotchange","name"],"sources":["src/components/navigation/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/navigation/z-menu-section/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-text01);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-secondary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-icon02);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-secondary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, h, Prop, State, Event, EventEmitter, Element, Listen, Host} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() hostElement: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,u7DAClB,MAAAC,EAAeD,E,MCWFE,EAAY,M,2JAqBf,MAAAC,GACN,IAAKC,KAAKC,WAAY,CACpB,M,CAGFD,KAAKE,MAAQF,KAAKE,KAClBF,KAAKE,KAAOF,KAAKG,OAAOC,OAASJ,KAAKK,OAAOD,M,CAK/C,WAAAE,CAAYC,GACV,IAAKP,KAAKE,MAAQF,KAAKQ,YAAYC,SAASF,EAAGG,QAAiB,CAC9D,M,CAGFV,KAAKE,KAAO,MACZF,KAAKK,OAAOD,M,CAMN,YAAAO,GACNX,KAAKC,WAAaD,KAAKQ,YAAYI,iBAAiB,iBAAiBC,OAAS,C,CAOxE,iBAAAC,CAAkBP,GACxB,MAAMQ,EAAgBR,EAAGG,OAA2BM,mBAAmB,GACvED,EAAaE,QAAQC,MAAOH,IAAY,MAAZA,SAAY,SAAZA,EAAcI,YAAa,I,CAGzD,iBAAAC,GACEpB,KAAKW,c,CAGP,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OACLvB,KAAMF,KAAKE,MAEXoB,EAAA,UAAAE,IAAA,2CACEE,MAAM,QAAO,eACC1B,KAAKE,KAAO,OAAS,QACnCyB,QAAS3B,KAAKD,OAAO6B,KAAK5B,OAE1BsB,EAAA,QAAAE,IAAA,2CAAMK,aAAc7B,KAAKc,kBAAkBc,KAAK5B,QAC/CA,KAAKC,YAAcqB,EAAA,UAAQQ,KAAM9B,KAAKE,KAAO,aAAe,kBAE9DF,KAAKE,MACJoB,EAAA,OAAKI,MAAM,SACTJ,EAAA,QACEQ,KAAK,OACLD,aAAc7B,KAAKW,aAAaiB,KAAK5B,S"}

package/dist/web-components-library/p-ac497c80.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,a as o,g as r}from"./p-10bb4f4b.js";import{M as a,Q as i}from"./p-025f494e.js";const n=':host{--cover-hero-overlay:linear-gradient(270deg, #0000 0%, #000000e6 100%);--cover-hero-text-color:var(--color-text-inverse);display:block;overflow:hidden}:host,*{box-sizing:border-box}:host .main-container{position:relative;width:100%;align-items:baseline}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .main-container .cover-container{position:relative;width:100%;padding-top:calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));background-color:var(--gray600)}::slotted([slot="cover"]){position:absolute;display:block;width:100%;height:100%;inset:0;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container{height:100%}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .cover-container{position:absolute;z-index:-1;height:100%;padding:0}:host([variant="overlay"]) .main-container .cover-container::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:""}:host([variant="overlay"]:is([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .content-container{position:absolute;inset:0}:host([variant="overlay"]) .main-container .content-container{height:100%;padding:var(--grid-margin)}:host([variant="stacked"]){--cover-hero-text-color:var(--color-text01)}:host([variant="stacked"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}';const s=n;const c=class{constructor(t){e(this,t);this.variant=a.OVERLAY;this.contentPosition=i.TOP;this.preserveAspectRatio=true}onImgLoad({target:e}){if(e instanceof Image&&e.closest("[slot=cover]")){const t=e.naturalWidth/e.naturalHeight;this.host.style.setProperty("--image-aspect-ratio",t.toString())}}renderContent(){return t("div",{class:"content-container"},t("slot",{name:"content"}))}render(){return t(o,{key:"fc8b3e5e75eb8fbc7d553710b5146f73087b4eaf"},this.variant===a.STACKED&&this.contentPosition===i.TOP&&this.renderContent(),t("div",{key:"efc3d392c4787468d390874443a693ddf3a05a5b",class:"main-container"},t("div",{key:"7e316099ba2078d3f56554f0216e048dddd6d6b3",class:"cover-container"},t("slot",{key:"d2aa516b5342f02c51445872a183623d251a5947",name:"cover"})),t("slot",{key:"06c215f93567e670bd358ece2ccc68e7daa09c8d",name:"info-reveal"}),this.variant===a.OVERLAY&&this.renderContent()),this.variant===a.STACKED&&this.contentPosition===i.BOTTOM&&this.renderContent())}get host(){return r(this)}};c.style=s;export{c as z_cover_hero};
+//# sourceMappingURL=p-ac497c80.entry.js.map

package/dist/web-components-library/p-ac497c80.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZCoverHeroStyle0","ZCoverHero","CoverHeroVariant","OVERLAY","CoverHeroContentPosition","TOP","onImgLoad","target","Image","closest","ratio","naturalWidth","naturalHeight","this","host","style","setProperty","toString","renderContent","h","class","name","render","Host","key","variant","STACKED","contentPosition","BOTTOM"],"sources":["src/components/z-cover-hero/styles.css?tag=z-cover-hero&encapsulation=shadow","src/components/z-cover-hero/index.tsx"],"sourcesContent":[":host {\n  --cover-hero-overlay: linear-gradient(270deg, #0000 0%, #000000e6 100%);\n  --cover-hero-text-color: var(--color-text-inverse);\n  --cover-hero-aspect-ratio: ;\n\n  display: block;\n  overflow: hidden;\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host .main-container {\n  position: relative;\n  width: 100%;\n  align-items: baseline;\n}\n\n:host .content-container {\n  color: var(--cover-hero-text-color);\n  fill: var(--cover-hero-text-color);\n}\n\n:host .main-container .cover-container {\n  position: relative;\n  width: 100%;\n  padding-top: calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));\n  background-color: var(--gray600);\n}\n\n::slotted([slot=\"cover\"]) {\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  inset: 0;\n  object-fit: cover;\n  object-position: top center;\n}\n\n::slotted(z-info-reveal) {\n  position: absolute;\n  z-index: 1;\n  right: var(--grid-margin);\n  bottom: var(--grid-margin);\n}\n\n/* Variant overlay */\n:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"])) .main-container {\n  height: 100%;\n}\n\n:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"]))\n  .main-container\n  .cover-container {\n  position: absolute;\n  z-index: -1;\n  height: 100%;\n  padding: 0;\n}\n\n:host([variant=\"overlay\"]) .main-container .cover-container::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--cover-hero-overlay);\n  content: \"\";\n}\n\n:host([variant=\"overlay\"]:is([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"]))\n  .main-container\n  .content-container {\n  position: absolute;\n  inset: 0;\n}\n\n:host([variant=\"overlay\"]) .main-container .content-container {\n  height: 100%;\n  padding: var(--grid-margin);\n}\n\n/* Variant stacked */\n:host([variant=\"stacked\"]) {\n  --cover-hero-text-color: var(--color-text01);\n}\n\n:host([variant=\"stacked\"]) .content-container ::slotted(*) {\n  padding: var(--grid-margin) 0;\n}\n","import {Component, Prop, h, Host, Listen, Element} from \"@stencil/core\";\nimport {CoverHeroVariant, CoverHeroContentPosition} from \"../../beans\";\n\n/**\n * Cover hero component.\n * Component to display a hero image with content.\n *\n * @slot cover - slot for the cover image.\n * @slot content - slot for the content.\n * @slot info-reveal - slot for the info reveal.\n * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.\n * @cssprop --cover-hero-text-color - color of the text.\n * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.\n */\n@Component({\n  tag: \"z-cover-hero\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCoverHero {\n  @Element() host: HTMLZCoverHeroElement;\n\n  /**\n   * Cover hero variant. Can be `OVERLAY` or `STACKED`.\n   */\n  @Prop({reflect: true})\n  variant: CoverHeroVariant = CoverHeroVariant.OVERLAY;\n\n  /**\n   * Vertical content position (for `STACKED` variant).\n   */\n  @Prop({reflect: true})\n  contentPosition: CoverHeroContentPosition = CoverHeroContentPosition.TOP;\n\n  /**\n   * Whether to keep the image aspect ratio.\n   * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\n   * instead, the height of the component follows the content's one.\n   * Note: it may be necessary to set a min and/or max height to the component.\n   */\n  @Prop({reflect: true})\n  preserveAspectRatio = true;\n\n  /**\n   * Store the intrinsic aspect ratio of the slotted image when loaded,\n   * to have a default when `--cover-hero-aspect-ratio` is not set.\n   * @param target The event target\n   */\n  @Listen(\"load\", {capture: true})\n  protected onImgLoad({target}: Event): void {\n    if (target instanceof Image && target.closest(\"[slot=cover]\")) {\n      const ratio = target.naturalWidth / target.naturalHeight;\n      this.host.style.setProperty(\"--image-aspect-ratio\", ratio.toString());\n    }\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content-container\">\n        <slot name=\"content\"></slot>\n      </div>\n    );\n  }\n\n  render(): HTMLZCoverHeroElement {\n    return (\n      <Host>\n        {this.variant === CoverHeroVariant.STACKED &&\n          this.contentPosition === CoverHeroContentPosition.TOP &&\n          this.renderContent()}\n        <div class=\"main-container\">\n          <div class=\"cover-container\">\n            <slot name=\"cover\"></slot>\n          </div>\n          <slot name=\"info-reveal\"></slot>\n          {this.variant === CoverHeroVariant.OVERLAY && this.renderContent()}\n        </div>\n        {this.variant === CoverHeroVariant.STACKED &&\n          this.contentPosition === CoverHeroContentPosition.BOTTOM &&\n          this.renderContent()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,unDAClB,MAAAC,EAAeD,E,MCkBFE,EAAU,M,sCAOOC,EAAiBC,Q,qBAMDC,EAAyBC,I,yBAS/C,I,CAQZ,SAAAC,EAAUC,OAACA,IACnB,GAAIA,aAAkBC,OAASD,EAAOE,QAAQ,gBAAiB,CAC7D,MAAMC,EAAQH,EAAOI,aAAeJ,EAAOK,cAC3CC,KAAKC,KAAKC,MAAMC,YAAY,uBAAwBN,EAAMO,W,EAOtD,aAAAC,GACN,OACEC,EAAA,OAAKC,MAAM,qBACTD,EAAA,QAAME,KAAK,Y,CAKjB,MAAAC,GACE,OACEH,EAACI,EAAI,CAAAC,IAAA,4CACFX,KAAKY,UAAYvB,EAAiBwB,SACjCb,KAAKc,kBAAoBvB,EAAyBC,KAClDQ,KAAKK,gBACPC,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,kBACTD,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,mBACTD,EAAA,QAAAK,IAAA,2CAAMH,KAAK,WAEbF,EAAA,QAAAK,IAAA,2CAAMH,KAAK,gBACVR,KAAKY,UAAYvB,EAAiBC,SAAWU,KAAKK,iBAEpDL,KAAKY,UAAYvB,EAAiBwB,SACjCb,KAAKc,kBAAoBvB,EAAyBwB,QAClDf,KAAKK,gB"}

package/dist/web-components-library/p-ac768eff.js

@@ -0,0 +1,2 @@
+import{r as o,h as r,a as s}from"./p-10bb4f4b.js";const c=":host{display:block;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}";const a=c;const t=class{constructor(r){o(this,r);this.sticky=false}render(){return r(s,{key:"1ebaa2ba1dca561a52963708d05c8e3e5f0940ac",role:"rowgroup"},r("slot",{key:"06826f87e1ffdcf4b54cbf3b13d779dcb77f8c9a"}))}};t.style=a;export{t as Z};
+//# sourceMappingURL=p-ac768eff.js.map

package/dist/web-components-library/p-ac768eff.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTfootStyle0","ZTfoot","render","h","Host","key","role"],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  border-top: 1px solid var(--color-surface03);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  background-color: var(--color-surface01);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTfoot {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,mOAClB,MAAAC,EAAeD,E,MCUFE,EAAM,M,qCAKR,K,CAET,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C"}

package/dist/web-components-library/p-acfde9fa.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as n,a}from"./p-10bb4f4b.js";import{B as i}from"./p-025f494e.js";const t="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;color:inherit;font-weight:inherit;-webkit-line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}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;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface04);color:var(--color-text01);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>[current]{border-left-color:var(--color-primary01);color:var(--color-link-primary);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button,z-icon){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}z-anchor-navigation nav z-icon{--z-icon-width:16px;--z-icon-height:16px;display:flex;padding:calc(var(--space-unit) * 1.5);fill:var(--color-icon02)}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav a{outline:none}@media (hover: hover){z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-secondary);background-color:var(--color-hover-surface);color:var(--color-hover-link)}}z-anchor-navigation nav>*:is(:focus,:focus-within),z-anchor-navigation nav :is(z-icon,button):focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation[hide-unselected] nav>*:not([current],:hover,:focus,:focus-within){color:transparent}z-anchor-navigation nav>*:not([current],:hover,:focus,:focus-within)>*:is(z-button,button,z-icon):not(:focus:focus-visible){opacity:0;pointer-events:none}@media (hover: none){z-anchor-navigation:not([hide-unselected]) nav>*>*:is(z-button,button,z-icon){opacity:1;pointer-events:all}}}";const r=t;const e=class{constructor(n){o(this,n);this.hideUnselected=false;this.collapsed=false}setAriaCurrent(){Array.from(this.nav.children).forEach((o=>{const n=o instanceof HTMLAnchorElement?o:o.querySelector("a");const a=window.location.href===n.href;n.setAttribute("aria-current",a.toString());o.toggleAttribute("current",a)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){window.addEventListener("hashchange",this.setAriaCurrent.bind(this));this.setAriaCurrent()}disconnectedCallback(){window.removeEventListener("hashchange",this.setAriaCurrent)}render(){return n(a,{key:"2f19d516f4b99e0f76268f025227f94d302273ea",collapsed:this.collapsed},n("z-button",{key:"822dca30f3ea2176f463b35a167fcc4714feeb7f",class:"toggle",variant:i.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},"salta a"),n("nav",{key:"218bf9aeb919037ad4725a9593ded46302b9e42a",ref:o=>this.nav=o},n("slot",{key:"0dfb9d2e7642d86b5c3e7da97be6ec04d05db70f"})))}};e.style=r;export{e as z_anchor_navigation};
+//# sourceMappingURL=p-acfde9fa.entry.js.map

package/dist/web-components-library/p-acfde9fa.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZAnchorNavigationStyle0","ZAnchorNavigation","setAriaCurrent","Array","from","this","nav","children","forEach","item","anchor","HTMLAnchorElement","querySelector","isCurrent","window","location","href","setAttribute","toString","toggleAttribute","toggleCollapsed","collapsed","componentDidLoad","addEventListener","bind","disconnectedCallback","removeEventListener","render","h","Host","key","class","variant","ButtonVariant","SECONDARY","icon","onClick","ref","el"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n  scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n  display: none;\n  flex-direction: column;\n  justify-content: flex-start;\n  row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n  display: flex;\n  margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n  display: -webkit-box;\n  overflow: clip;\n  width: 100%;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  -webkit-box-orient: vertical;\n  color: inherit;\n  font-weight: inherit;\n  -webkit-line-clamp: 2;\n  overflow-clip-margin: content-box;\n  text-decoration: none;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n  padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n  z-anchor-navigation nav a {\n    display: inline-block;\n    overflow: hidden;\n    -webkit-line-clamp: none;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\nz-anchor-navigation nav > * {\n  position: relative;\n  border-left: var(--border-size-large) solid var(--color-surface04);\n  color: var(--color-text01);\n  font-family: var(--font-family-sans);\n  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [current] {\n  border-left-color: var(--color-primary01);\n  color: var(--color-link-primary);\n  font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button, z-icon) {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nz-anchor-navigation nav z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  display: flex;\n  padding: calc(var(--space-unit) * 1.5);\n  fill: var(--color-icon02);\n}\n\n@media (min-width: 768px) {\n  z-anchor-navigation z-button.toggle {\n    display: none !important;\n  }\n\n  z-anchor-navigation nav {\n    display: flex;\n  }\n\n  z-anchor-navigation nav a {\n    outline: none;\n  }\n\n  @media (hover: hover) {\n    z-anchor-navigation nav > *:hover {\n      border-left-color: var(--color-hover-secondary);\n      background-color: var(--color-hover-surface);\n      color: var(--color-hover-link);\n    }\n  }\n\n  z-anchor-navigation nav > *:is(:focus, :focus-within),\n  z-anchor-navigation nav :is(z-icon, button):focus:focus-visible {\n    box-shadow: var(--shadow-focus-primary);\n    outline: none;\n  }\n\n  z-anchor-navigation[hide-unselected] nav > *:not([current], :hover, :focus, :focus-within) {\n    color: transparent;\n  }\n\n  z-anchor-navigation\n    nav\n    > *:not([current], :hover, :focus, :focus-within)\n    > *:is(z-button, button, z-icon):not(:focus:focus-visible) {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  @media (hover: none) {\n    z-anchor-navigation:not([hide-unselected]) nav > * > *:is(z-button, button, z-icon) {\n      opacity: 1;\n      pointer-events: all;\n    }\n  }\n}\n","import {Component, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * * Anchor navigation component.\n * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.\n * @example\n * ```\n * <z-anchor-navigation>\n *  <div>\n *    <a href=\"#section-id\">Section name</a>\n *    <button type=\"button\">\n *      <z-icon name=\"share\" />\n *    </button>\n *  </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n  tag: \"z-anchor-navigation\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZAnchorNavigation {\n  /**\n   * If enabled, the text of each anchor will be hidden unless\n   * for the current one or the one the user is hovering.\n   */\n  @Prop({reflect: true})\n  hideUnselected = false;\n\n  /**\n   * Whether the mobile list is collapsed.\n   */\n  @State()\n  collapsed = false;\n\n  /** Reference to the nav element. */\n  private nav: HTMLElement;\n\n  /**\n   * Set aria-current attribute to the anchors and `current` to nav children.\n   */\n  private setAriaCurrent(): void {\n    Array.from(this.nav.children).forEach((item) => {\n      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n      const isCurrent = window.location.href === anchor.href;\n      anchor.setAttribute(\"aria-current\", isCurrent.toString());\n      item.toggleAttribute(\"current\", isCurrent);\n    });\n  }\n\n  /**\n   * Toggle collapsed state.\n   */\n  private toggleCollapsed(): void {\n    this.collapsed = !this.collapsed;\n  }\n\n  componentDidLoad(): void {\n    window.addEventListener(\"hashchange\", this.setAriaCurrent.bind(this));\n    this.setAriaCurrent();\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"hashchange\", this.setAriaCurrent);\n  }\n\n  render(): HTMLZAnchorNavigationElement {\n    return (\n      <Host collapsed={this.collapsed}>\n        <z-button\n          class=\"toggle\"\n          variant={ButtonVariant.SECONDARY}\n          icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n          onClick={this.toggleCollapsed.bind(this)}\n        >\n          salta a\n        </z-button>\n        <nav ref={(el) => (this.nav = el)}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,k7EAClB,MAAAC,EAAeD,E,MCsBFE,EAAiB,M,6CAMX,M,eAML,K,CAQJ,cAAAC,GACNC,MAAMC,KAAKC,KAAKC,IAAIC,UAAUC,SAASC,IACrC,MAAMC,EAASD,aAAgBE,kBAAoBF,EAAOA,EAAKG,cAAc,KAC7E,MAAMC,EAAYC,OAAOC,SAASC,OAASN,EAAOM,KAClDN,EAAOO,aAAa,eAAgBJ,EAAUK,YAC9CT,EAAKU,gBAAgB,UAAWN,EAAU,G,CAOtC,eAAAO,GACNf,KAAKgB,WAAahB,KAAKgB,S,CAGzB,gBAAAC,GACER,OAAOS,iBAAiB,aAAclB,KAAKH,eAAesB,KAAKnB,OAC/DA,KAAKH,gB,CAGP,oBAAAuB,GACEX,OAAOY,oBAAoB,aAAcrB,KAAKH,e,CAGhD,MAAAyB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACT,UAAWhB,KAAKgB,WACpBO,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,QAASC,EAAcC,UACvBC,KAAM9B,KAAKgB,UAAY,aAAe,eACtCe,QAAS/B,KAAKe,gBAAgBI,KAAKnB,OAAK,WAI1CuB,EAAA,OAAAE,IAAA,2CAAKO,IAAMC,GAAQjC,KAAKC,IAAMgC,GAC5BV,EAAA,QAAAE,IAAA,8C"}

package/dist/web-components-library/p-ae71256f.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,a as e,g as i}from"./p-10bb4f4b.js";import{J as n}from"./p-025f494e.js";const r=':host{--z-info-reveal-theme--surface:var(--color-black);--z-info-reveal-theme--text:var(--color-white);--z-info-reveal-shadow:var(--shadow-2);--z-info-reveal-max-width:375px;position:relative;display:flex;width:fit-content;background-color:var(--z-info-reveal-theme--surface);color:var(--z-info-reveal-theme--text);font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}button{padding:0;border:none;background-color:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3);display:flex}.z-info-reveal-trigger{display:flex;width:fit-content;height:100%;align-items:center;padding:calc(var(--space-unit) / 2);box-shadow:var(--z-info-reveal-shadow);column-gap:calc(var(--space-unit) / 2)}:host([position="top_left"]) .z-info-reveal-trigger,:host([position="bottom_left"]) .z-info-reveal-trigger{flex-direction:row-reverse}:host([open]) .z-info-reveal-trigger{box-shadow:none}.info-box{position:absolute;display:flex;max-width:var(--z-info-reveal-max-width);padding:calc(var(--space-unit) / 2);background-color:var(--z-info-reveal-theme--surface);box-shadow:var(--z-info-reveal-shadow);column-gap:calc(var(--space-unit) / 2);cursor:pointer}:host([position="bottom_left"]) .info-box,:host([position="bottom_right"]) .info-box{bottom:0}:host([position="top_right"]) .info-box,:host([position="bottom_right"]) .info-box{right:0}:host([position="top_left"]) .info-box,:host([position="bottom_left"]) .info-box{left:0;flex-direction:row-reverse}::slotted(*){display:none;width:max-content}::slotted([data-current]){display:block}:host([position="top_left"]) .z-info-reveal-close,:host([position="top_right"]) .z-info-reveal-close{align-self:flex-start}:host([position="bottom_left"]) .z-info-reveal-close,:host([position="bottom_right"]) .z-info-reveal-close{align-self:flex-end}';const s=r;const a=class{constructor(o){t(this,o);this.icon="informationsource";this.position=n.BOTTOM_RIGHT;this.label=undefined;this.open=false;this.currentIndex=null}watchItems(){Array.from(this.el.children).forEach(((t,o)=>{if(this.currentIndex===o){t.setAttribute("data-current","")}else{t.removeAttribute("data-current")}}))}openInfoBox(){this.currentIndex=0;this.open=true}closeInfoBox(){this.open=false}next(){this.currentIndex=this.currentIndex+1;if(this.currentIndex===this.el.children.length){this.closeInfoBox()}}render(){return o(e,{key:"0edaf256477519c003699874f8f2de0837eeae3a",open:this.open},o("button",{key:"0b60861bf9e23c0238e5f9bffc97aa5d2398f6d6",class:"z-info-reveal-trigger",onClick:this.openInfoBox.bind(this)},this.label&&o("span",{class:"z-info-reveal-label"},this.label),o("z-icon",{key:"649cfbfda1ef3a7d0947fc680817aa461f48a71c",name:this.icon})),this.open&&o("div",{class:"info-box",onClick:this.next.bind(this),tabIndex:0},o("slot",null),o("button",{class:"z-info-reveal-close",onClick:this.closeInfoBox.bind(this)},o("z-icon",{name:"close"}))))}get el(){return i(this)}static get watchers(){return{currentIndex:["watchItems"]}}};a.style=s;export{a as z_info_reveal};
+//# sourceMappingURL=p-ae71256f.entry.js.map

package/dist/web-components-library/p-ae71256f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZInfoRevealStyle0","ZInfoReveal","InfoRevealPosition","BOTTOM_RIGHT","watchItems","Array","from","this","el","children","forEach","child","index","currentIndex","setAttribute","removeAttribute","openInfoBox","open","closeInfoBox","next","length","render","h","Host","key","class","onClick","bind","label","name","icon","tabIndex"],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n  --z-info-reveal-theme--surface: var(--color-black);\n  --z-info-reveal-theme--text: var(--color-white);\n  --z-info-reveal-shadow: var(--shadow-2);\n  --z-info-reveal-max-width: 375px; /* defaults to average width of mobile devices */\n\n  position: relative;\n  display: flex;\n  width: fit-content;\n  background-color: var(--z-info-reveal-theme--surface);\n  color: var(--z-info-reveal-theme--text);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  letter-spacing: 0;\n  line-height: 1.5;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  border-radius: 0;\n  color: inherit;\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n}\n\nz-icon {\n  --z-icon-width: calc(var(--space-unit) * 3);\n  --z-icon-height: calc(var(--space-unit) * 3);\n\n  display: flex;\n}\n\n.z-info-reveal-trigger {\n  display: flex;\n  width: fit-content;\n  height: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) / 2);\n  box-shadow: var(--z-info-reveal-shadow);\n  column-gap: calc(var(--space-unit) / 2);\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-trigger,\n:host([position=\"bottom_left\"]) .z-info-reveal-trigger {\n  flex-direction: row-reverse;\n}\n\n:host([open]) .z-info-reveal-trigger {\n  box-shadow: none;\n}\n\n.info-box {\n  position: absolute;\n  display: flex;\n  max-width: var(--z-info-reveal-max-width);\n  padding: calc(var(--space-unit) / 2);\n  background-color: var(--z-info-reveal-theme--surface);\n  box-shadow: var(--z-info-reveal-shadow);\n  column-gap: calc(var(--space-unit) / 2);\n  cursor: pointer;\n}\n\n:host([position=\"bottom_left\"]) .info-box,\n:host([position=\"bottom_right\"]) .info-box {\n  bottom: 0;\n}\n\n:host([position=\"top_right\"]) .info-box,\n:host([position=\"bottom_right\"]) .info-box {\n  right: 0;\n}\n\n:host([position=\"top_left\"]) .info-box,\n:host([position=\"bottom_left\"]) .info-box {\n  left: 0;\n  flex-direction: row-reverse;\n}\n\n::slotted(*) {\n  display: none;\n  width: max-content;\n}\n\n::slotted([data-current]) {\n  display: block;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-close,\n:host([position=\"top_right\"]) .z-info-reveal-close {\n  align-self: flex-start;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-close,\n:host([position=\"bottom_right\"]) .z-info-reveal-close {\n  align-self: flex-end;\n}\n","import {Component, h, Prop, State, Watch, Element, Host} from \"@stencil/core\";\nimport {InfoRevealPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\n\n/**\n * Info reveal component.\n *\n * @slot - info to display in the info box. If more than one element has been slotted,\n * by clicking on the panel it switches to the next info element.\n * @cssprop --z-info-reveal-theme--surface - background color of the info reveal panel.\n * @cssprop --z-info-reveal-theme--text - foreground color of the info reveal panel.\n * @cssprop --z-info-reveal-shadow - shadow of the info reveal panel.\n * @cssprop --z-info-reveal-max-width - max width of the info reveal panel.\n */\nexport class ZInfoReveal {\n  @Element() el: HTMLZInfoRevealElement;\n\n  /** Name of the icon for the open button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /** Info reveal's position */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Text that appears on closed panel next to the open button. */\n  @Prop()\n  label?: string;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  /** Current index for the info queue. */\n  @State()\n  currentIndex: number = null;\n\n  @Watch(\"currentIndex\")\n  watchItems(): void {\n    Array.from(this.el.children).forEach((child, index) => {\n      if (this.currentIndex === index) {\n        child.setAttribute(\"data-current\", \"\");\n      } else {\n        child.removeAttribute(\"data-current\");\n      }\n    });\n  }\n\n  /**\n   * Open the info box.\n   */\n  private openInfoBox(): void {\n    this.currentIndex = 0;\n    this.open = true;\n  }\n\n  /**\n   * Close the info box.\n   */\n  private closeInfoBox(): void {\n    this.open = false;\n  }\n\n  /**\n   * Navigate slotted info.\n   * It closes the info box after the last info has been navigated.\n   */\n  private next(): void {\n    this.currentIndex = this.currentIndex + 1;\n    if (this.currentIndex === this.el.children.length) {\n      this.closeInfoBox();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          onClick={this.openInfoBox.bind(this)}\n        >\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n          <z-icon name={this.icon}></z-icon>\n        </button>\n        {this.open && (\n          <div\n            class=\"info-box\"\n            onClick={this.next.bind(this)}\n            tabIndex={0}\n          >\n            <slot></slot>\n            <button\n              class=\"z-info-reveal-close\"\n              onClick={this.closeInfoBox.bind(this)}\n            >\n              <z-icon name=\"close\"></z-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,o+DAClB,MAAAC,EAAeD,E,MCkBFE,EAAW,M,mCAKd,oB,cAIwBC,EAAmBC,a,+BAQ5C,M,kBAIgB,I,CAGvB,UAAAC,GACEC,MAAMC,KAAKC,KAAKC,GAAGC,UAAUC,SAAQ,CAACC,EAAOC,KAC3C,GAAIL,KAAKM,eAAiBD,EAAO,CAC/BD,EAAMG,aAAa,eAAgB,G,KAC9B,CACLH,EAAMI,gBAAgB,e,KAQpB,WAAAC,GACNT,KAAKM,aAAe,EACpBN,KAAKU,KAAO,I,CAMN,YAAAC,GACNX,KAAKU,KAAO,K,CAON,IAAAE,GACNZ,KAAKM,aAAeN,KAAKM,aAAe,EACxC,GAAIN,KAAKM,eAAiBN,KAAKC,GAAGC,SAASW,OAAQ,CACjDb,KAAKW,c,EAIT,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACP,KAAMV,KAAKU,MACfK,EAAA,UAAAE,IAAA,2CACEC,MAAM,wBACNC,QAASnB,KAAKS,YAAYW,KAAKpB,OAE9BA,KAAKqB,OAASN,EAAA,QAAMG,MAAM,uBAAuBlB,KAAKqB,OACvDN,EAAA,UAAAE,IAAA,2CAAQK,KAAMtB,KAAKuB,QAEpBvB,KAAKU,MACJK,EAAA,OACEG,MAAM,WACNC,QAASnB,KAAKY,KAAKQ,KAAKpB,MACxBwB,SAAU,GAEVT,EAAA,aACAA,EAAA,UACEG,MAAM,sBACNC,QAASnB,KAAKW,aAAaS,KAAKpB,OAEhCe,EAAA,UAAQO,KAAK,Y"}

package/dist/web-components-library/p-af27423a.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as e}from"./p-10bb4f4b.js";import{q as r}from"./p-025f494e.js";const t=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{color:var(--color-primary01);fill:var(--color-primary01);font-size:12px;font-weight:var(--font-sb)}:host>z-pocket>z-pocket-header span.badge{display:inline-block;padding:0 calc(var(--space-unit) * 0.5);margin-left:var(--space-unit);background:var(--color-secondary02);border-radius:50%;color:var(--color-surface01)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;padding:var(--space-unit);margin:0 var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgb(255 0 0 / 0%), white)}:host>z-pocket.open>z-pocket-body>div.body{overflow:auto;max-height:calc(100vh - 166px);scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-color:var(--color-primary01) var(--color-surface03);scrollbar-width:thin}:host ::-webkit-scrollbar{width:10px;background:linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );border-radius:var(--border-radius)}:host ::-webkit-scrollbar-thumb{width:var(--space-unit);background-color:var(--color-primary01);border-radius:var(--border-radius)}}";const a=t;const i=class{constructor(e){o(this,e);this.pocketid=undefined;this.messages=undefined;this.status=r.PREVIEW}handlePocketToggle(o){if(o.detail.id===this.pocketid){this.status=o.detail.status}}renderHeader(){let o;let t;switch(this.status){case r.PREVIEW:case r.CLOSED:o=e("span",null,"Messaggi ",e("span",{class:"badge"},this.messages));t="chevron-up";break;case r.OPEN:o=e("span",null,"Riduci");t="chevron-down";break}return e("z-pocket-header",{pocketid:this.pocketid},o,e("z-icon",{name:t,width:14,height:14}))}renderBody(){return e("z-pocket-body",{pocketid:this.pocketid},e("div",{class:"body"},e("slot",null)),e("div",{class:"gradient"}))}render(){return e("z-pocket",{key:"3aefef3d845cb5f672ed037667da8d59bf2355dd",pocketid:this.pocketid,status:this.status,class:this.status},this.renderHeader(),this.renderBody())}};i.style=a;export{i as z_messages_pocket};
+//# sourceMappingURL=p-af27423a.entry.js.map

package/dist/web-components-library/p-af27423a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMessagesPocketStyle0","ZMessagesPocket","PocketStatus","PREVIEW","handlePocketToggle","e","detail","id","this","pocketid","status","renderHeader","message","icon","CLOSED","h","class","messages","OPEN","name","width","height","renderBody","render","key"],"sources":["src/snowflakes/myz/pocket/z-messages-pocket/styles.css?tag=z-messages-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-messages-pocket/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-pocket {\n  width: 100%;\n}\n\n:host > z-pocket.closed {\n  width: 158px;\n}\n\n:host > z-pocket > z-pocket-header {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n  font-size: 12px;\n  font-weight: var(--font-sb);\n}\n\n:host > z-pocket > z-pocket-header span.badge {\n  display: inline-block;\n  padding: 0 calc(var(--space-unit) * 0.5);\n  margin-left: var(--space-unit);\n  background: var(--color-secondary02);\n  border-radius: 50%;\n  color: var(--color-surface01);\n}\n\n:host > z-pocket > z-pocket-header > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > z-pocket > z-pocket-body > div.body {\n  overflow: hidden;\n  padding: var(--space-unit);\n  margin: 0 var(--space-unit);\n}\n\n:host > z-pocket.preview > z-pocket-body {\n  position: relative;\n}\n\n:host > z-pocket.preview > z-pocket-body > div.gradient {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-image: linear-gradient(rgb(255 0 0 / 0%), white);\n}\n\n:host > z-pocket.open > z-pocket-body > div.body {\n  overflow: auto;\n  max-height: calc(100vh - 166px);\n  scrollbar-width: none;\n}\n\n:host ::-webkit-scrollbar {\n  width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host > z-pocket {\n    width: 768px;\n    margin: 0 calc((100% - 768px) / 2);\n  }\n\n  :host > z-pocket.closed {\n    margin: 0 calc((100% - 158px) / 2);\n  }\n\n  :host > z-pocket.open > z-pocket-body > div.body {\n    max-height: 326px;\n  }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1152px) {\n  :host > z-pocket.open > z-pocket-body > div.body {\n    scrollbar-color: var(--color-primary01) var(--color-surface03);\n    scrollbar-width: thin;\n  }\n\n  :host ::-webkit-scrollbar {\n    width: 10px;\n    background: linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );\n    border-radius: var(--border-radius);\n  }\n\n  :host ::-webkit-scrollbar-thumb {\n    width: var(--space-unit);\n    background-color: var(--color-primary01);\n    border-radius: var(--border-radius);\n  }\n}\n","import {Component, Prop, h, Listen /* , State */} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot  - pocket body content\n */\n@Component({\n  tag: \"z-messages-pocket\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMessagesPocket {\n  /** pocket id */\n  @Prop()\n  pocketid: string;\n\n  /** number of messages */\n  @Prop()\n  messages: number;\n\n  /** pocket status */\n  @Prop({mutable: true})\n  status: PocketStatus = PocketStatus.PREVIEW;\n\n  @Listen(\"pocketToggle\", {target: \"body\"})\n  handlePocketToggle(e: CustomEvent): void {\n    if (e.detail.id === this.pocketid) {\n      this.status = e.detail.status;\n    }\n  }\n\n  private renderHeader(): HTMLZPocketHeaderElement {\n    let message: HTMLElement;\n    let icon: string;\n    switch (this.status) {\n      case PocketStatus.PREVIEW:\n      case PocketStatus.CLOSED:\n        message = (\n          <span>\n            Messaggi <span class=\"badge\">{this.messages}</span>\n          </span>\n        );\n        icon = \"chevron-up\";\n        break;\n      case PocketStatus.OPEN:\n        message = <span>Riduci</span>;\n        icon = \"chevron-down\";\n        break;\n    }\n\n    return (\n      <z-pocket-header pocketid={this.pocketid}>\n        {message}\n        <z-icon\n          name={icon}\n          width={14}\n          height={14}\n        />\n      </z-pocket-header>\n    );\n  }\n\n  private renderBody(): HTMLZPocketBodyElement {\n    return (\n      <z-pocket-body pocketid={this.pocketid}>\n        <div class=\"body\">\n          <slot />\n        </div>\n        <div class=\"gradient\" />\n      </z-pocket-body>\n    );\n  }\n\n  render(): HTMLZPocketElement {\n    return (\n      <z-pocket\n        pocketid={this.pocketid}\n        status={this.status}\n        class={this.status}\n      >\n        {this.renderHeader()}\n        {this.renderBody()}\n      </z-pocket>\n    );\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,0tDAClB,MAAAC,EAAeD,E,MCUFE,EAAe,M,qFAWHC,EAAaC,O,CAGpC,kBAAAC,CAAmBC,GACjB,GAAIA,EAAEC,OAAOC,KAAOC,KAAKC,SAAU,CACjCD,KAAKE,OAASL,EAAEC,OAAOI,M,EAInB,YAAAC,GACN,IAAIC,EACJ,IAAIC,EACJ,OAAQL,KAAKE,QACX,KAAKR,EAAaC,QAClB,KAAKD,EAAaY,OAChBF,EACEG,EAAA,wBACWA,EAAA,QAAMC,MAAM,SAASR,KAAKS,WAGvCJ,EAAO,aACP,MACF,KAAKX,EAAagB,KAChBN,EAAUG,EAAA,sBACVF,EAAO,eACP,MAGJ,OACEE,EAAA,mBAAiBN,SAAUD,KAAKC,UAC7BG,EACDG,EAAA,UACEI,KAAMN,EACNO,MAAO,GACPC,OAAQ,K,CAMR,UAAAC,GACN,OACEP,EAAA,iBAAeN,SAAUD,KAAKC,UAC5BM,EAAA,OAAKC,MAAM,QACTD,EAAA,cAEFA,EAAA,OAAKC,MAAM,a,CAKjB,MAAAO,GACE,OACER,EAAA,YAAAS,IAAA,2CACEf,SAAUD,KAAKC,SACfC,OAAQF,KAAKE,OACbM,MAAOR,KAAKE,QAEXF,KAAKG,eACLH,KAAKc,a"}

package/dist/web-components-library/p-b1b69181.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_table_expanded_row}from"./p-6790a3c1.js";import"./p-10bb4f4b.js";
+//# sourceMappingURL=p-b1b69181.entry.js.map

package/dist/web-components-library/p-b1b69181.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/dist/web-components-library/p-b3c92412.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c,h,g as r}from"./p-10bb4f4b.js";import{x as e}from"./p-025f494e.js";const s=".sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--color-surface01);border-radius:14px;color:var(--color-text01);fill:var(--color-text01);font-family:var(--font-family-sans);font-size:14px;line-height:28px}.sc-z-chip-h>.z-chip-interactive.sc-z-chip{font-weight:var(--font-sb)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{padding:0;border:none;margin-left:var(--space-unit);background-color:transparent;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip:first-child{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]):hover>z-icon.sc-z-chip:first-child{fill:var(--color-icon02)}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) .interactive-icon.sc-z-chip:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip z-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:not([disabled]):active:hover .interactive-icon.sc-z-chip{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{font-size:12px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}}";const o=s;const a=class{constructor(h){i(this,h);this.interactiveIconClick=c(this,"interactiveIconClick",7);this.icon=undefined;this.type=e.DEFAULT;this.interactiveIcon=undefined;this.disabled=false;this.ariaLabel=""}render(){return h("div",{key:"6f854f9af61641c48e7870b320f330e08fa10115",class:{"z-chip-container":true,"z-chip-interactive":!!this.interactiveIcon,[this.type]:true},"aria-disabled":this.disabled},this.icon&&h("z-icon",{name:this.icon}),h("slot",{key:"17dd6eacc4edf0df59bd68f4c453126e954c5e86"}),this.interactiveIcon&&h("button",{type:"button",onClick:()=>this.interactiveIconClick.emit(),"aria-label":this.ariaLabel,disabled:this.disabled},h("z-icon",{class:"interactive-icon",name:this.interactiveIcon})))}get el(){return r(this)}};a.style=o;export{a as z_chip};
+//# sourceMappingURL=p-b3c92412.entry.js.map

package/dist/web-components-library/p-b3c92412.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZChipStyle0","ZChip","ZChipType","DEFAULT","render","h","key","class","this","interactiveIcon","type","disabled","icon","name","onClick","interactiveIconClick","emit","ariaLabel"],"sources":["src/components/buttons/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/buttons/z-chip/index.tsx"],"sourcesContent":[":host > .z-chip-container {\n  display: inline-flex;\n  min-height: 28px;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--gray400);\n  background-color: var(--color-surface01);\n  border-radius: 14px;\n  color: var(--color-text01);\n  fill: var(--color-text01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  line-height: 28px;\n}\n\n:host > .z-chip-interactive {\n  font-weight: var(--font-sb);\n}\n\n:host > .z-chip-container > button {\n  padding: 0;\n  border: none;\n  margin-left: var(--space-unit);\n  background-color: transparent;\n  cursor: pointer;\n}\n\n:host > .z-chip-container > z-icon:first-child {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n:host > .z-chip-container:not([aria-disabled]):hover > z-icon:first-child {\n  fill: var(--color-icon02);\n}\n\n:host > .z-chip-container .interactive-icon {\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] z-icon {\n  color: var(--color-disabled03);\n  cursor: auto;\n  fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n  border: var(--border-size-small) solid var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n  border-radius: 100%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > button:not([disabled]):active:hover .interactive-icon {\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n  --z-icon-width: 22px;\n  --z-icon-height: 22px;\n}\n\n/* :host type */\n:host > .z-chip-container.default {\n  min-height: 44px;\n  border-radius: 22px;\n  line-height: 44px;\n}\n\n:host > .z-chip-container.medium {\n  min-height: 40px;\n  border-radius: 22px;\n  line-height: 40px;\n}\n\n:host > .z-chip-container.small {\n  min-height: 36px;\n  border-radius: 22px;\n  line-height: 36px;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .z-chip-container {\n    font-size: 12px;\n  }\n\n  /* :host type */\n  :host > .z-chip-container.default {\n    min-height: 32px;\n    border-radius: 16px;\n    line-height: 32px;\n  }\n\n  :host > .z-chip-container.medium {\n    min-height: 28px;\n    border-radius: 16px;\n    line-height: 28px;\n  }\n\n  :host > .z-chip-container.small {\n    min-height: 24px;\n    border-radius: 16px;\n    line-height: 24px;\n  }\n\n  :host > .z-chip-container > z-icon,\n  :host > .z-chip-container .interactive-icon {\n    --z-icon-width: 14px;\n    --z-icon-height: 14px;\n  }\n}\n","import {Component, Prop, h, Element, Event, EventEmitter} from \"@stencil/core\";\nimport {ZChipType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** z-chip aria-label string */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n        }}\n        aria-disabled={this.disabled}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.ariaLabel}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"mFAAA,MAAMA,EAAY,4pFAClB,MAAAC,EAAeD,E,MCQFE,EAAK,M,kHASGC,EAAUC,Q,6CAQR,M,eAIT,E,CAMZ,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,mBAAoB,KACpB,uBAAwBC,KAAKC,gBAC7B,CAACD,KAAKE,MAAO,MACd,gBACcF,KAAKG,UAEnBH,KAAKI,MAAQP,EAAA,UAAQQ,KAAML,KAAKI,OACjCP,EAAA,QAAAC,IAAA,6CACCE,KAAKC,iBACJJ,EAAA,UACEK,KAAK,SACLI,QAAS,IAAMN,KAAKO,qBAAqBC,OAAM,aACnCR,KAAKS,UACjBN,SAAUH,KAAKG,UAEfN,EAAA,UACEE,MAAM,mBACNM,KAAML,KAAKC,mB"}

package/dist/web-components-library/p-b574f1be.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,a as s,g as a}from"./p-10bb4f4b.js";import{s as n}from"./p-025f494e.js";import{m as r}from"./p-2c886e8b.js";import{H as o}from"./p-54b0b04e.js";const l=":host{display:inline-block;width:100vw;min-width:200px;--percentuale:0}:host(.slide-in-left){animation:slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-right){animation:slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-down){animation:slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-in-up){animation:slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-left){animation:slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-right){animation:slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-down){animation:slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}:host(.slide-out-up){animation:slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);animation-fill-mode:forwards}@keyframes slideinleft{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes slideinright{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes slideinup{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideindown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideoutleft{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(-100%)}}@keyframes slideoutright{0%{opacity:calc(100% - var(--percentuale));transform:translateX(var(--percentuale))}100%{opacity:0;transform:translateX(100%)}}@keyframes slideoutup{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(-100%)}}@keyframes slideoutdown{0%{opacity:1;transform:translateY(var(--percentuale))}100%{opacity:0;transform:translateY(100%)}}:host>#external-container{display:flex;min-height:52px;box-sizing:border-box;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-radius:4px;box-shadow:var(--shadow-3);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px}:host>#external-container.mobile-wrapped>#icon{align-self:flex-start}:host>#external-container.several-lines-padding{padding:calc(var(--space-unit) * 2)}:host>#external-container>#flex-container{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between}:host>#external-container #text{margin-right:calc(var(--space-unit) * 2);color:var(--color-white);letter-spacing:0.16px;line-height:20px;text-align:left}:host>#external-container #text>.title{margin-right:4px;font-weight:600}:host>#external-container.mobile-wrapped #button ::slotted(z-button){margin-top:calc(var(--space-unit) * 2)}:host>#external-container #icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-white)}:host>#external-container.dark{background:var(--gray800)}:host>#external-container.light{background:var(--color-background)}:host>#external-container.light #icon,:host>#external-container.warning #text,:host>#external-container.warning #icon{fill:var(--color-icon01)}:host>#external-container.light #text,:host>#external-container.warning #text{color:var(--gray800)}:host>#external-container.accent{background:var(--color-primary01)}:host>#external-container.error{background:var(--color-error-default)}:host>#external-container.success{background:var(--color-success-default)}:host>#external-container.warning{background:var(--color-warning-default)}@media only screen and (min-width: 768px){:host{width:unset;max-width:50vw}:host>#external-container>#flex-container{flex-wrap:nowrap}:host>#external-container #text{width:100%}}@media only screen and (min-width: 1366px){:host{width:unset;max-width:33vw}}";const h=l;const c=class{constructor(i){t(this,i);this.toastClose=e(this,"toastClose",7);this.isCloseEventCalled=false;this.heading=undefined;this.message=undefined;this.closebutton=undefined;this.autoclose=undefined;this.pauseonfocusloss=true;this.type=undefined;this.isdraggable=true;this.draggablepercentage=80;this.transition=undefined;this.percentage=undefined}watchPropIsdraggable(t){if(t){this.sliderManager.get("pan").set({enable:true})}else{this.sliderManager.get("pan").set({enable:false})}}watchPropAutoclose(t){clearTimeout(this.timeoutHandle);this.startClosingTimeout(t)}watchPropPauseonfocusloss(t){if(this.autoclose){if(t){document.addEventListener("visibilitychange",this.visibilityChangeEventHandler)}else{document.removeEventListener("visibilitychange",this.visibilityChangeEventHandler)}}}emitToastClose(t){this.timeoutHandle=null;this.elapsedTime=null;this.hostElement.classList.add(t);this.toastClose.emit()}componentWillLoad(){this.isMobile=window.innerWidth<=r;this.validateAutoclose();this.percentage=0}componentDidLoad(){this.isTextLong=this.detectWrap()||this.toastText.offsetHeight>20;this.startTime=Date.now();if(this.autoclose&&this.pauseonfocusloss){document.addEventListener("visibilitychange",this.visibilityChangeEventHandler)}this.isdraggable&&this.handleSlideOutDragAnimation()}visibilityChangeEventHandler(){if(document.visibilityState==="hidden"){this.timeoutHandle&&this.onBlur()}else{this.elapsedTime&&this.onFocus()}}validateAutoclose(){if(!this.autoclose&&!this.closebutton){console.error("At least one between autoclose and closebutton must be present")}}mapSlideOutClass(){switch(this.transition){case n.SLIDE_IN_DOWN:return n.SLIDE_OUT_UP;case n.SLIDE_IN_UP:return n.SLIDE_OUT_DOWN;case n.SLIDE_IN_LEFT:return n.SLIDE_OUT_RIGHT;case n.SLIDE_IN_RIGHT:return n.SLIDE_OUT_LEFT}}calculateDraggedPercentage(t){const e=this.hostElement.getBoundingClientRect();return Math.round(100*t.deltaX/e.width)}handleSlideOutDragAnimation(){this.sliderManager=new o(this.hostElement);this.sliderManager.get("pan").set({direction:o.DIRECTION_HORIZONTAL});this.sliderManager.on("pan",(t=>{this.percentage=this.calculateDraggedPercentage(t);this.hostElement.style.transition="none";this.hostElement.classList.remove(this.transition);const e={translate:`translateX(${this.percentage}%)`,translateBack:"translateX(0)"};this.hostElement.style.opacity=`${100-Math.abs(this.percentage)}%`;if(t.eventType===o.DIRECTION_LEFT||t.eventType===o.DIRECTION_RIGHT){this.hostElement.style.transform=e.translate;if(Math.abs(this.percentage)>this.draggablepercentage&&!this.isCloseEventCalled){this.isCloseEventCalled=true;this.emitToastClose(t.direction===o.DIRECTION_LEFT?"slide-out-left":"slide-out-right")}}if(t.isFinal&&Math.abs(this.percentage)<this.draggablepercentage){this.hostElement.style.transform=e.translateBack;this.hostElement.style.transition="all 1s";this.hostElement.style.opacity="100%";this.percentage=0}}))}onFocus(){let t=this.autoclose;if(this.elapsedTime){t=this.autoclose-this.elapsedTime}if(t>0){this.startClosingTimeout(t)}}onBlur(){this.elapsedTime=Date.now()-this.startTime;clearTimeout(this.timeoutHandle)}startClosingTimeout(t){this.timeoutHandle=window.setTimeout((()=>this.emitToastClose(this.mapSlideOutClass())),t)}detectWrap(){const t=this.container.offsetWidth;const e=this.container.children;let i=0;for(let t=0;t<e.length;t++){i+=e[t].offsetWidth}return i>t}renderText(){return i("div",{id:"text",ref:t=>this.toastText=t},i("span",{class:"title"},this.heading),i("span",{class:"message"},this.message))}renderButton(){return i("div",{id:"button"},i("slot",{name:"button"}))}renderCloseIcon(){if(!this.closebutton){return}return i("div",{id:"icon"},i("z-icon",{tabIndex:0,name:"multiply-circled",width:15,height:15,onClick:()=>this.emitToastClose(this.mapSlideOutClass()),onKeyPress:t=>{if(t.keyCode==32||t.keyCode==13){t.preventDefault();this.emitToastClose(this.mapSlideOutClass())}}}))}renderContainer(){return i("div",{tabIndex:0,id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong},ref:t=>this.container=t},this.renderText(),this.renderButton(),this.renderCloseIcon())}renderMobileContainer(){return i("div",{id:"external-container",class:{[this.type]:!!this.type,"several-lines-padding":this.isTextLong,"mobile-wrapped":this.isTextLong}},i("div",{id:"flex-container",ref:t=>this.container=t},this.renderText(),this.renderButton()),this.renderCloseIcon())}render(){return i(s,{key:"d6ea4a44c85076f5db4dca3513e6f659f3405d13",style:{"--percentuale":`${this.percentage}%`},class:this.transition?this.transition:n.SLIDE_IN_DOWN,onAnimationEnd:t=>{if(this.autoclose&&t.animationName.includes("slidein")){this.startClosingTimeout(this.autoclose)}if(t.animationName.includes("slideout")){this.hostElement.parentNode.removeChild(this.hostElement)}}},this.isMobile?this.renderMobileContainer():this.renderContainer())}get hostElement(){return a(this)}static get watchers(){return{isdraggable:["watchPropIsdraggable"],autoclose:["watchPropAutoclose"],pauseonfocusloss:["watchPropPauseonfocusloss"]}}};c.style=h;export{c as z_toast_notification};
+//# sourceMappingURL=p-b574f1be.entry.js.map

package/dist/web-components-library/p-b574f1be.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZToastNotificationStyle0","ZToastNotification","this","isCloseEventCalled","watchPropIsdraggable","newValue","sliderManager","get","set","enable","watchPropAutoclose","clearTimeout","timeoutHandle","startClosingTimeout","watchPropPauseonfocusloss","autoclose","document","addEventListener","visibilityChangeEventHandler","removeEventListener","emitToastClose","cssClass","elapsedTime","hostElement","classList","add","toastClose","emit","componentWillLoad","isMobile","window","innerWidth","mobileBreakpoint","validateAutoclose","percentage","componentDidLoad","isTextLong","detectWrap","toastText","offsetHeight","startTime","Date","now","pauseonfocusloss","isdraggable","handleSlideOutDragAnimation","visibilityState","onBlur","onFocus","closebutton","console","error","mapSlideOutClass","transition","ToastNotificationTransition","SLIDE_IN_DOWN","SLIDE_OUT_UP","SLIDE_IN_UP","SLIDE_OUT_DOWN","SLIDE_IN_LEFT","SLIDE_OUT_RIGHT","SLIDE_IN_RIGHT","SLIDE_OUT_LEFT","calculateDraggedPercentage","e","bounding","getBoundingClientRect","Math","round","deltaX","width","Hammer","direction","DIRECTION_HORIZONTAL","on","style","remove","translateObj","translate","translateBack","opacity","abs","eventType","DIRECTION_LEFT","DIRECTION_RIGHT","transform","draggablepercentage","isFinal","time","setTimeout","parentWidth","container","offsetWidth","children","totalWidth","i","length","renderText","h","id","ref","el","class","heading","message","renderButton","name","renderCloseIcon","tabIndex","height","onClick","onKeyPress","keyCode","preventDefault","renderContainer","type","renderMobileContainer","render","Host","key","onAnimationEnd","animationName","includes","parentNode","removeChild"],"sources":["src/components/notification/z-toast-notification/styles.css?tag=z-toast-notification&encapsulation=shadow","src/components/notification/z-toast-notification/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100vw;\n  min-width: 200px;\n\n  --percentuale: 0;\n}\n\n:host(.slide-in-left) {\n  animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-right) {\n  animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-down) {\n  animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-in-up) {\n  animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-left) {\n  animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-right) {\n  animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-down) {\n  animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n:host(.slide-out-up) {\n  animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);\n  animation-fill-mode: forwards;\n}\n\n@keyframes slideinleft {\n  0% {\n    transform: translateX(100%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideinright {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideinup {\n  0% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideindown {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideoutleft {\n  0% {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - var(--percentuale));\n    transform: translateX(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes slideoutright {\n  0% {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - var(--percentuale));\n    transform: translateX(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n}\n\n@keyframes slideoutup {\n  0% {\n    opacity: 1;\n    transform: translateY(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes slideoutdown {\n  0% {\n    opacity: 1;\n    transform: translateY(var(--percentuale));\n  }\n\n  100% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n}\n\n:host > #external-container {\n  display: flex;\n  min-height: 52px;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);\n  border-radius: 4px;\n  box-shadow: var(--shadow-3);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n}\n\n:host > #external-container.mobile-wrapped > #icon {\n  align-self: flex-start;\n}\n\n:host > #external-container.several-lines-padding {\n  padding: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container > #flex-container {\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n}\n\n:host > #external-container #text {\n  margin-right: calc(var(--space-unit) * 2);\n  color: var(--color-white);\n  letter-spacing: 0.16px;\n  line-height: 20px;\n  text-align: left;\n}\n\n:host > #external-container #text > .title {\n  margin-right: 4px;\n  font-weight: 600;\n}\n\n:host > #external-container.mobile-wrapped #button ::slotted(z-button) {\n  margin-top: calc(var(--space-unit) * 2);\n}\n\n:host > #external-container #icon {\n  margin-left: calc(var(--space-unit) * 2);\n  cursor: pointer;\n  fill: var(--color-white);\n}\n\n:host > #external-container.dark {\n  background: var(--gray800);\n}\n\n:host > #external-container.light {\n  background: var(--color-background);\n}\n\n:host > #external-container.light #icon,\n:host > #external-container.warning #text,\n:host > #external-container.warning #icon {\n  fill: var(--color-icon01);\n}\n\n:host > #external-container.light #text,\n:host > #external-container.warning #text {\n  color: var(--gray800);\n}\n\n:host > #external-container.accent {\n  background: var(--color-primary01);\n}\n\n:host > #external-container.error {\n  background: var(--color-error-default);\n}\n\n:host > #external-container.success {\n  background: var(--color-success-default);\n}\n\n:host > #external-container.warning {\n  background: var(--color-warning-default);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    width: unset;\n    max-width: 50vw;\n  }\n\n  :host > #external-container > #flex-container {\n    flex-wrap: nowrap;\n  }\n\n  :host > #external-container #text {\n    width: 100%;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    width: unset;\n    max-width: 33vw;\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Element, Host, State, Watch} from \"@stencil/core\";\nimport {ToastNotificationTransition, ToastNotification} from \"../../../beans\";\nimport {mobileBreakpoint} from \"../../../constants/breakpoints\";\n\nimport Hammer from \"hammerjs\";\n\n@Component({\n  tag: \"z-toast-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotification {\n  @Element() hostElement: HTMLZToastNotificationElement;\n\n  /** toast notification's title */\n  @Prop()\n  heading?: string;\n\n  /** toast notification's message */\n  @Prop()\n  message: string;\n\n  /** toggles closing button rendering */\n  @Prop()\n  closebutton: boolean;\n\n  /** toast notification closing timeout (ms) */\n  @Prop()\n  autoclose?: number;\n\n  /** toast notification autoclose can be paused */\n  @Prop()\n  pauseonfocusloss?: boolean = true;\n\n  /** toast notification type: dark, light, accent, error, success, warning */\n  @Prop()\n  type?: ToastNotification;\n\n  /** toast notification can be draggable*/\n  @Prop()\n  isdraggable?: boolean = true;\n\n  /** toast notification draggable percentage*/\n  @Prop()\n  draggablepercentage?: number = 80;\n\n  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/\n  @Prop()\n  transition?: ToastNotificationTransition;\n\n  @State()\n  percentage: number;\n\n  private isTextLong: boolean;\n\n  private container!: HTMLElement;\n\n  private toastText!: HTMLElement;\n\n  private sliderManager: HammerManager;\n\n  private elapsedTime: number;\n\n  private timeoutHandle: number;\n\n  private startTime: number;\n\n  private isMobile: boolean;\n\n  private isCloseEventCalled = false;\n\n  @Watch(\"isdraggable\")\n  watchPropIsdraggable(newValue: boolean): void {\n    if (newValue) {\n      this.sliderManager.get(\"pan\").set({enable: true});\n    } else {\n      this.sliderManager.get(\"pan\").set({enable: false});\n    }\n  }\n\n  @Watch(\"autoclose\")\n  watchPropAutoclose(newValue: number): void {\n    clearTimeout(this.timeoutHandle);\n    this.startClosingTimeout(newValue);\n  }\n\n  @Watch(\"pauseonfocusloss\")\n  watchPropPauseonfocusloss(newValue: boolean): void {\n    if (this.autoclose) {\n      if (newValue) {\n        document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      } else {\n        document.removeEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n      }\n    }\n  }\n\n  /** notification close event */\n  @Event()\n  toastClose: EventEmitter;\n\n  private emitToastClose(cssClass: string): void {\n    this.timeoutHandle = null;\n    this.elapsedTime = null;\n    this.hostElement.classList.add(cssClass);\n    this.toastClose.emit();\n  }\n\n  componentWillLoad(): void {\n    this.isMobile = window.innerWidth <= mobileBreakpoint;\n    this.validateAutoclose();\n    this.percentage = 0;\n  }\n\n  componentDidLoad(): void {\n    this.isTextLong = this.detectWrap() || this.toastText.offsetHeight > 20;\n    this.startTime = Date.now();\n    if (this.autoclose && this.pauseonfocusloss) {\n      document.addEventListener(\"visibilitychange\", this.visibilityChangeEventHandler);\n    }\n\n    this.isdraggable && this.handleSlideOutDragAnimation();\n  }\n\n  private visibilityChangeEventHandler(): void {\n    if (document.visibilityState === \"hidden\") {\n      this.timeoutHandle && this.onBlur();\n    } else {\n      this.elapsedTime && this.onFocus();\n    }\n  }\n\n  private validateAutoclose(): void {\n    if (!this.autoclose && !this.closebutton) {\n      console.error(\"At least one between autoclose and closebutton must be present\");\n    }\n  }\n\n  private mapSlideOutClass(): ToastNotificationTransition {\n    switch (this.transition) {\n      case ToastNotificationTransition.SLIDE_IN_DOWN:\n        return ToastNotificationTransition.SLIDE_OUT_UP;\n      case ToastNotificationTransition.SLIDE_IN_UP:\n        return ToastNotificationTransition.SLIDE_OUT_DOWN;\n      case ToastNotificationTransition.SLIDE_IN_LEFT:\n        return ToastNotificationTransition.SLIDE_OUT_RIGHT;\n      case ToastNotificationTransition.SLIDE_IN_RIGHT:\n        return ToastNotificationTransition.SLIDE_OUT_LEFT;\n    }\n  }\n\n  private calculateDraggedPercentage(e): number {\n    const bounding = this.hostElement.getBoundingClientRect();\n\n    return Math.round((100 * e.deltaX) / bounding.width);\n  }\n\n  private handleSlideOutDragAnimation(): void {\n    this.sliderManager = new Hammer(this.hostElement);\n    this.sliderManager.get(\"pan\").set({\n      direction: Hammer.DIRECTION_HORIZONTAL,\n    });\n\n    this.sliderManager.on(\"pan\", (e) => {\n      this.percentage = this.calculateDraggedPercentage(e);\n      this.hostElement.style.transition = \"none\";\n      this.hostElement.classList.remove(this.transition);\n      const translateObj = {\n        translate: `translateX(${this.percentage}%)`,\n        translateBack: \"translateX(0)\",\n      };\n\n      this.hostElement.style.opacity = `${100 - Math.abs(this.percentage)}%`;\n      if (e.eventType === Hammer.DIRECTION_LEFT || e.eventType === Hammer.DIRECTION_RIGHT) {\n        this.hostElement.style.transform = translateObj.translate;\n        if (Math.abs(this.percentage) > this.draggablepercentage && !this.isCloseEventCalled) {\n          this.isCloseEventCalled = true;\n          this.emitToastClose(e.direction === Hammer.DIRECTION_LEFT ? \"slide-out-left\" : \"slide-out-right\");\n        }\n      }\n\n      if (e.isFinal && Math.abs(this.percentage) < this.draggablepercentage) {\n        this.hostElement.style.transform = translateObj.translateBack;\n        this.hostElement.style.transition = \"all 1s\";\n        this.hostElement.style.opacity = \"100%\";\n        this.percentage = 0;\n      }\n    });\n  }\n\n  private onFocus(): void {\n    let time = this.autoclose;\n    if (this.elapsedTime) {\n      time = this.autoclose - this.elapsedTime;\n    }\n    if (time > 0) {\n      this.startClosingTimeout(time);\n    }\n  }\n\n  private onBlur(): void {\n    this.elapsedTime = Date.now() - this.startTime;\n    clearTimeout(this.timeoutHandle);\n  }\n\n  private startClosingTimeout(time: number): void {\n    this.timeoutHandle = window.setTimeout(() => this.emitToastClose(this.mapSlideOutClass()), time);\n  }\n\n  private detectWrap(): boolean {\n    const parentWidth = this.container.offsetWidth;\n    const children = this.container.children;\n    let totalWidth = 0;\n\n    for (let i = 0; i < children.length; i++) {\n      totalWidth += (children[i] as HTMLElement).offsetWidth;\n    }\n\n    return totalWidth > parentWidth;\n  }\n\n  private renderText(): HTMLDivElement {\n    return (\n      <div\n        id=\"text\"\n        ref={(el) => (this.toastText = el as HTMLElement)}\n      >\n        <span class=\"title\">{this.heading}</span>\n        <span class=\"message\">{this.message}</span>\n      </div>\n    );\n  }\n\n  private renderButton(): HTMLDivElement {\n    return (\n      <div id=\"button\">\n        <slot name=\"button\" />\n      </div>\n    );\n  }\n\n  private renderCloseIcon(): HTMLDivElement {\n    if (!this.closebutton) {\n      return;\n    }\n\n    return (\n      <div id=\"icon\">\n        <z-icon\n          tabIndex={0}\n          name=\"multiply-circled\"\n          width={15}\n          height={15}\n          onClick={() => this.emitToastClose(this.mapSlideOutClass())}\n          onKeyPress={(e) => {\n            if (e.keyCode == 32 || e.keyCode == 13) {\n              e.preventDefault();\n              this.emitToastClose(this.mapSlideOutClass());\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  private renderContainer(): HTMLDivElement {\n    return (\n      <div\n        tabIndex={0}\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n        }}\n        ref={(el) => (this.container = el as HTMLElement)}\n      >\n        {this.renderText()}\n        {this.renderButton()}\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  private renderMobileContainer(): HTMLDivElement {\n    return (\n      <div\n        id=\"external-container\"\n        class={{\n          [this.type]: !!this.type,\n          \"several-lines-padding\": this.isTextLong,\n          \"mobile-wrapped\": this.isTextLong,\n        }}\n      >\n        <div\n          id=\"flex-container\"\n          ref={(el) => (this.container = el as HTMLElement)}\n        >\n          {this.renderText()}\n          {this.renderButton()}\n        </div>\n        {this.renderCloseIcon()}\n      </div>\n    );\n  }\n\n  render(): HTMLZToastNotificationElement {\n    return (\n      <Host\n        style={{\n          \"--percentuale\": `${this.percentage}%`,\n        }}\n        class={this.transition ? this.transition : ToastNotificationTransition.SLIDE_IN_DOWN}\n        onAnimationEnd={(e: AnimationEvent) => {\n          if (this.autoclose && e.animationName.includes(\"slidein\")) {\n            this.startClosingTimeout(this.autoclose);\n          }\n          if (e.animationName.includes(\"slideout\")) {\n            this.hostElement.parentNode.removeChild(this.hostElement);\n          }\n        }}\n      >\n        {this.isMobile ? this.renderMobileContainer() : this.renderContainer()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/web-components-library/p-b5e223fb.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,a,g as r}from"./p-10bb4f4b.js";import{O as n,v as s,B as o,e as c,c as l,D as h,h as p,k as d,I as u,i as b,m as f,j as v,l as z,E as g,g as m}from"./p-025f494e.js";import{I as x}from"./p-4686b762.js";import{r as y,b as w,h as k}from"./p-955da62e.js";import"./p-2c886e8b.js";const C=':host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-text01);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-text01);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}: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-title{display:flex;max-width:100%;flex-direction:row;align-items:flex-start;column-gap:calc(var(--space-unit) * 2)}::slotted([slot="title"]),.heading-stuck .heading-title>*,::slotted([slot="stucked-title"]){margin:0;font-family:"IBM Plex Serif", serif;font-weight:var(--font-bd)}::slotted([slot="title"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot="stucked-title"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length="0"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot="top-subtitle"]),::slotted([slot="subtitle"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;line-height:26px}::slotted([slot="subtitle"]){font-weight:500}::slotted([slot="top-subtitle"]){font-weight:400}.menu-container{display:flex;width:100%;flex:1 auto;flex-flow:row wrap}:host([menu-length="0"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);flex:1 auto;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title{overflow:hidden}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot="stucked-title"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:none}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:"";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{flex-flow:row wrap;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow="offcanvas"],[menu-length="0"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow="offcanvas"])) .heading-subtitle{padding-left:0}.menu-container{flex:initial;align-items:center}:host([menu-length="0"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow="offcanvas"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow="offcanvas"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow="stack"]) .heading-panel{flex-flow:column;align-items:flex-start}:host([flow="stack"]) .menu-container{width:100%}:host(:not([flow="offcanvas"],[menu-length="0"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}';const j=C;const S=typeof IntersectionObserver!=="undefined";const O=class{constructor(i){t(this,i);this.sticking=e(this,"sticking",7);this.observer=S&&new IntersectionObserver((([t])=>{this._stuck=!t.isIntersecting}),{threshold:.5});this.stuck=false;this.hero=undefined;this.overlay=false;this.flow="auto";this.drawerOpen=false;this.enableSearch=false;this.searchPlaceholder="Cerca";this.searchString="";this.searchPageUrl=undefined;this._stuck=false;this.currentViewport="mobile";this.menuLength=undefined;this.openDrawer=this.openDrawer.bind(this);this.closeDrawer=this.closeDrawer.bind(this);this.collectMenuElements=this.collectMenuElements.bind(this)}evaluateViewport(){if(window.innerWidth<768){this.currentViewport="mobile"}else if(window.innerWidth>=768&&window.innerWidth<1152){this.currentViewport="tablet"}else{this.currentViewport="desktop"}}onStuck(){const t=this.scrollParent;if(!t){return}this.sticking.emit(this._stuck)}setMenuFloatingMode(){if(this.menuElements.length===0){return}const t=this.menuElements;t.forEach((t=>{t.open=false;t.floating=!this.drawerOpen;t.verticalContext=this.drawerOpen}))}get title(){const t=this.hostElement.querySelector('[slot="title"]');if(t===null){return""}return t.textContent.trim()}get scrollParent(){const t=this.hostElement.offsetParent;if(t===document.body||t===document.documentElement){return window}return t}get canShowMenu(){return this.flow!=="offcanvas"&&this.currentViewport!=="mobile"&&!this.drawerOpen}get canShowSearchbar(){if(!this.enableSearch){return false}if(this.searchPageUrl){return this.currentViewport==="desktop"}return true}get hasHero(){return!!this.hero||this.hostElement.querySelector("[slot=hero]")!==null}openDrawer(){this.drawerOpen=true}closeDrawer(){this.drawerOpen=false}collectMenuElements(){const t=this.menuElements=this.hostElement.querySelectorAll('[slot="menu"]');this.menuLength=t.length;this.setMenuFloatingMode()}enableStuckObserver(){if(this.observer){this.observer.observe(this.container)}}disableStuckMode(){this._stuck=false;if(this.observer){this.observer.unobserve(this.container)}}onStuckMode(){if(this.stuck){this.enableStuckObserver()}else{this.disableStuckMode()}}renderSearchLinkButton(){if(!this.enableSearch||!this.searchPageUrl||this.currentViewport==="desktop"){return null}return i("z-button",{class:"search-page-button",variant:o.SECONDARY,href:this.searchPageUrl,icon:"search",size:c.X_SMALL})}renderSeachbar(t){return i("z-searchbar",{value:this.searchString,placeholder:this.searchPlaceholder,showSearchButton:true,searchButtonIconOnly:t,size:c.X_SMALL,variant:o.SECONDARY,preventSubmit:this.searchString.length<3,onSearchTyping:t=>this.searchString=t.detail})}componentDidLoad(){this.collectMenuElements();this.onStuckMode();this.evaluateViewport()}render(){return i(a,{key:"10a6de9066a2b47fce8c05b28584ebcfbd9d308e","menu-length":this.menuLength},this.hasHero&&i("div",{class:"hero-container"},i("slot",{name:"hero"},this.hero&&i("img",{alt:"",src:this.hero}))),i("div",{key:"598744c6237cb30c4d4e467b45944a7879dce93e",class:"heading-panel",ref:t=>this.container=t},i("div",{key:"2132ed4349abc878b8cec1ca73978fa42dd5c5a4",class:"heading-container"},i("div",{key:"d3dcd130c4968e278ca5e0a610ad59a51b630abf",class:"heading-subtitle"},i("slot",{key:"d86a2a02577aad72e68d78fccee74d0cafd395e6",name:"top-subtitle"})),i("div",{key:"59f31cad85c438e675a419267cbd1e41b06009c8",class:"heading-title"},this.menuLength>0&&i("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},i("z-icon",{name:"burger-menu"})),i("slot",{key:"48a7e46471a03d776f15d30114ffdaf7f90b15cd",name:"title"}),this.renderSearchLinkButton()),i("div",{key:"41320040925b00a83fb6ed7bcd8911b2e2e1b88e",class:"heading-subtitle"},i("slot",{key:"2da90e290780904617080944c2bcc507e918f9f7",name:"subtitle"}))),(this.canShowMenu||this.canShowSearchbar)&&i("div",{class:"menu-container"},this.canShowMenu&&i("slot",{name:"menu",onSlotchange:this.collectMenuElements}),this.canShowSearchbar&&this.renderSeachbar(this.currentViewport!=="desktop"))),i("z-offcanvas",{key:"d54bb515efad20ca24686a5bc0743b9e3906dfef",variant:n.OVERLAY,transitiondirection:s.RIGHT,open:this.drawerOpen,onCanvasOpenStatusChanged:t=>this.drawerOpen=t.detail},i("button",{key:"22a9c1865a7fcb9660dbcb14c4202e6c78c2166b",class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer,slot:"canvasContent","aria-hidden":`${!this.drawerOpen}`,disabled:!this.drawerOpen},i("z-icon",{key:"6bba2e8d9c1d081a8d826654eed502cab8018b87",name:"close"})),i("div",{key:"edbd9d23c8adc99adc65a6a343e6587a55b4d12c",class:"drawer-content",slot:"canvasContent","aria-hidden":`${!this.drawerOpen}`},i("slot",{key:"d8ba82c48339422e6a2db733839c8cf8062dd2c3",name:"menu",onSlotchange:this.collectMenuElements}))),this._stuck&&i("div",{class:"heading-stuck"},i("div",{class:"heading-stuck-content"},this.menuLength>0&&i("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},i("z-icon",{name:"burger-menu"})),i("div",{class:"heading-title"},i("slot",{name:"stucked-title"},this.title)),this.renderSearchLinkButton(),this.canShowSearchbar&&this.currentViewport==="desktop"&&this.renderSeachbar(false))))}get hostElement(){return r(this)}static get watchers(){return{_stuck:["onStuck"],drawerOpen:["setMenuFloatingMode"],stuck:["onStuckMode"]}}};O.style=j;const I='.sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled="false"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size="big"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size="small"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size="x-small"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant="primary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant="secondary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary02);background-color:var(--color-primary02);color:var(--color-primary01)}@media (hover: hover){[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-primary02);background-color:var(--color-primary02);color:var(--color-primary01)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-primary02);background-color:var(--color-primary02);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant="tertiary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}';const $=I;const T=class{constructor(e){t(this,e);this.ariaLabel="";this.role=undefined;this.href=undefined;this.target=undefined;this.htmlid=undefined;this.name=undefined;this.disabled=false;this.type=l.BUTTON;this.variant=o.PRIMARY;this.icon=undefined;this.size=c.BIG}getAttributes(){return{id:this.htmlid,class:{"z-button--container":true,"z-button--has-text":!!this.hostElement.textContent.trim()}}}render(){if(this.href){return i("a",Object.assign({},this.getAttributes(),{"aria-label":this.ariaLabel,href:this.href,target:this.target}),this.icon&&i("z-icon",{name:this.icon,width:16,height:16}),i("slot",null))}return i("button",Object.assign({},this.getAttributes(),{"aria-label":this.ariaLabel,name:this.name,type:this.type,role:this.role,disabled:this.disabled}),this.icon&&i("z-icon",{name:this.icon,width:16,height:16}),i("slot",null))}get hostElement(){return r(this)}};T.style=$;const M=".sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}";const L=M;const _=class{constructor(e){t(this,e);this.size=h.SMALL;this.color="gray200";this.orientation=p.HORIZONTAL}render(){return i(a,{key:"ae08a473772cfda024b84cdf94e83e634a66c73f",class:`divider-${this.size} divider-${this.orientation}`,style:{backgroundColor:`var(--${this.color})`}})}};_.style=L;const R=":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";const A=R;const E=class{constructor(e){t(this,e);this.name=undefined;this.height=undefined;this.width=undefined;this.iconid=undefined;this.fill=undefined}selectPathOrPolygon(t){if(t===null||t===void 0?void 0:t.startsWith("M")){return i("path",{d:x[this.name]})}return i("polygon",{points:x[this.name]})}render(){return i(a,{key:"2b01f04c92ac8e4772036eb52aad46a62d46d35c","aria-hidden":"true"},i("svg",{key:"18067d6877c79af11d5af240d030c8f82531cf6b",viewBox:"0 0 1000 1000",width:this.width,height:this.height,id:this.iconid,fill:this.fill?`var(--${this.fill})`:""},this.selectPathOrPolygon(x[this.name])))}};E.style=A;const B='.sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}[size="small"].sc-z-input-h input.sc-z-input,[size="small"].sc-z-input-h textarea.sc-z-input,[size="small"].sc-z-input-h .textarea-wrapper.sc-z-input,[size="x-small"].sc-z-input-h input.sc-z-input,[size="x-small"].sc-z-input-h textarea.sc-z-input,[size="x-small"].sc-z-input-h .textarea-wrapper.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,[readonly="false"].sc-z-input-h .textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-input-field02)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-primary01)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{box-shadow:none}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled="false"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size="small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size="x-small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}';const F=B;const H=class{constructor(i){t(this,i);this.inputChange=e(this,"inputChange",7);this.startTyping=e(this,"startTyping",7);this.stopTyping=e(this,"stopTyping",7);this.inputCheck=e(this,"inputCheck",7);this.typingtimeout=300;this.htmlid=`id-${y()}`;this.type=undefined;this.name=undefined;this.label=undefined;this.ariaLabel="";this.ariaExpanded=undefined;this.ariaControls=undefined;this.ariaAutocomplete=undefined;this.ariaActivedescendant=undefined;this.value=undefined;this.disabled=false;this.readonly=false;this.required=false;this.checked=false;this.placeholder=undefined;this.htmltitle=undefined;this.status=undefined;this.message=true;this.labelPosition=d.RIGHT;this.autocomplete=undefined;this.role=undefined;this.hasclearicon=true;this.icon=undefined;this.min=undefined;this.minlength=undefined;this.max=undefined;this.maxlength=undefined;this.step=undefined;this.pattern=undefined;this.size=c.BIG;this.isTyping=false;this.passwordHidden=true}inputCheckListener(t){const e=t.detail;switch(this.type){case u.RADIO:if(e.type===u.RADIO&&e.name===this.name&&e.id!==this.htmlid){this.checked=false}break}}async isChecked(){switch(this.type){case u.CHECKBOX:case u.RADIO:return this.checked;default:console.warn("`isChecked` method is only available for type `checkbox` and `radio`");return false}}emitInputChange(t){if(!this.isTyping){this.emitStartTyping()}let e;if(this.type===u.TEXTAREA){e=this.getValidity("textarea")}else{e=this.getValidity("input")}this.value=t;this.inputChange.emit({value:t,validity:e});clearTimeout(this.timer);this.timer=setTimeout((()=>{this.emitStopTyping(this.value,e)}),this.typingtimeout)}emitStartTyping(){this.isTyping=true;this.startTyping.emit()}emitStopTyping(t,e){this.isTyping=false;this.stopTyping.emit({value:t,validity:e})}emitInputCheck(t){this.inputCheck.emit({id:this.htmlid,checked:t,type:this.type,name:this.name,value:this.value,validity:this.getValidity("input")})}getValidity(t){const e=this.hostElement.querySelector(t);return e.validity}getTextAttributes(){return{id:this.htmlid,name:this.name,placeholder:this.placeholder,value:this.value,disabled:this.disabled,readonly:this.readonly,required:this.required,title:this.htmltitle,minlength:this.minlength,maxlength:this.maxlength,class:{[`input-${this.status}`]:!!this.status,filled:!!this.value},autocomplete:this.autocomplete,onInput:t=>this.emitInputChange(t.target.value)}}getNumberAttributes(t){if(t!=u.NUMBER){return}return{min:this.min,max:this.max,step:this.step}}getPatternAttribute(t){if(t!=u.PASSWORD&&t!=u.TEXT&&t!=u.TEL&&t!=u.SEARCH&&t!=u.URL&&t!=u.EMAIL){return}return{pattern:this.pattern}}getRoleAttribute(){return this.role?{role:this.role}:{}}getAriaAttrubutes(){const t=this.ariaExpanded?{"aria-expanded":this.ariaExpanded}:{};const e=this.ariaControls?{"aria-controls":this.ariaControls}:{};const i=this.ariaAutocomplete?{"aria-autocomplete":this.ariaAutocomplete}:{};const a=this.ariaActivedescendant?{"aria-activedescendant":this.ariaActivedescendant}:{};return Object.assign(Object.assign(Object.assign(Object.assign({},t),e),i),a)}renderInputText(t=u.TEXT){const e=this.ariaLabel?{"aria-label":this.ariaLabel}:{};const a=Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},this.getTextAttributes()),this.getNumberAttributes(t)),this.getPatternAttribute(t)),e),this.getRoleAttribute()),this.getAriaAttrubutes());if(this.icon||t===u.PASSWORD){Object.assign(a.class,{"has-icon":true})}if(this.hasclearicon&&t!=u.NUMBER){Object.assign(a.class,{"has-clear-icon":true})}return i("div",{class:"text-wrapper"},this.renderLabel(),i("div",null,i("input",Object.assign({type:t===u.PASSWORD&&!this.passwordHidden?u.TEXT:t},a,{ref:t=>this.inputRef=t})),this.renderIcons()),this.renderMessage())}renderLabel(){if(!this.label){return}return i("label",{class:"input-label body-5-sb",id:`${this.htmlid}_label`,htmlFor:this.htmlid},this.label)}renderIcons(){return i("span",{class:"icons-wrapper"},this.renderResetIcon(),this.renderIcon())}renderIcon(){if(this.type===u.PASSWORD){return this.renderShowHidePassword()}if(!this.icon){return}return i("button",{type:"button",class:"icon-button input-icon",tabIndex:-1,"aria-hidden":"true"},i("z-icon",{name:this.icon,class:this.size}))}renderResetIcon(){let t=false;if(!this.hasclearicon||!this.value||this.disabled||this.readonly||this.type==u.NUMBER){t=true}return i("button",{type:"button",class:`icon-button reset-icon ${t?"hidden":""}`,"aria-label":"cancella il contenuto dell'input",onClick:()=>{this.inputRef.value="";this.emitInputChange("")}},i("z-icon",{name:"multiply",class:this.size}))}renderShowHidePassword(){return i("button",{type:"button",class:"icon-button toggle-password-icon",disabled:this.disabled,"aria-label":this.passwordHidden?"mostra password":"nascondi password",onClick:()=>this.passwordHidden=!this.passwordHidden},i("z-icon",{name:this.passwordHidden?"view-filled":"view-off-filled",class:this.size}))}renderMessage(){if(w(this.message)===false){return}return i("z-input-message",{message:w(this.message)===true?undefined:this.message,status:this.status,class:this.size})}renderTextarea(){const t=this.getTextAttributes();const e=this.ariaLabel?{"aria-label":this.ariaLabel}:{};return i("div",{class:"text-wrapper"},this.renderLabel(),i("div",{class:Object.assign(Object.assign({},t.class),{"textarea-wrapper":true,readonly:t.readonly})},i("textarea",Object.assign({},t,e,this.getRoleAttribute()))),this.renderMessage())}handleCheck(t){this.checked=t.target.checked;this.emitInputCheck(this.checked)}renderCheckbox(){return i("div",{class:"checkbox-wrapper"},i("input",Object.assign({id:this.htmlid,type:"checkbox",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,required:this.required,onChange:this.handleCheck.bind(this),value:this.value},this.getRoleAttribute())),i("label",{htmlFor:this.htmlid,class:{"checkbox-label":true,after:this.labelPosition===d.RIGHT,before:this.labelPosition===d.LEFT}},i("z-icon",{name:this.checked?"checkbox-checked":"checkbox","aria-hidden":"true",class:this.size}),this.label&&i("span",{innerHTML:this.label})))}renderRadio(){return i("div",{class:"radio-wrapper"},i("input",Object.assign({id:this.htmlid,type:"radio",name:this.name,checked:this.checked,disabled:this.disabled,readonly:this.readonly,onChange:this.handleCheck.bind(this),value:this.value},this.getRoleAttribute())),i("label",{htmlFor:this.htmlid,class:{"radio-label":true,after:this.labelPosition===d.RIGHT,before:this.labelPosition===d.LEFT}},i("z-icon",{name:this.checked?"radio-button-checked":"radio-button","aria-hidden":"true",class:this.size}),this.label&&i("span",{innerHTML:this.label})))}render(){let t;switch(this.type){case u.TEXTAREA:t=this.renderTextarea();break;case u.CHECKBOX:t=this.renderCheckbox();break;case u.RADIO:t=this.renderRadio();break;default:t=this.renderInputText(this.type)}return i(a,{key:"67a39cc20219fa02de2cca264a5d51428f4359f3"},t)}get hostElement(){return r(this)}};H.style=F;const P=':host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-text05);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-text-success)}:host([status="error"]){color:var(--color-text-error)}:host([status="warning"]){color:var(--color-warning02)}: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)}';const D=P;const V=class{constructor(e){t(this,e);this.statusIcons={success:"checkmark-circle",error:"multiply-circled",warning:"exclamation-circle"};this.message=undefined;this.status=undefined;this.statusRole={}}onMessageChange(){this.statusRole=this.message&&this.status?{role:"alert"}:{}}componentWillLoad(){this.onMessageChange()}render(){return i(a,Object.assign({key:"7cb2d7df7604fbc5801ce1eb9142155a4905861d"},this.statusRole,{"aria-label":this.message}),this.statusIcons[this.status]&&this.message&&i("z-icon",{name:this.statusIcons[this.status]}),i("span",{key:"d1734748c3be02eba1d40526855bc4ea69e454f8",innerHTML:this.message}))}static get watchers(){return{message:["onMessageChange"],status:["onMessageChange"]}}};V.style=D;const X=":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";const N=X;const q=class{constructor(e){t(this,e);this.size=b.MEDIUM;this.listType=f.NONE;this.role="list"}setChildrenSizeType(){const t=this.host.children;for(let e=0;e<t.length;e++){t[e].setAttribute("size",this.size);t[e].setAttribute("list-type",this.listType);t[e].setAttribute("list-element-position",(e+1).toString())}}componentDidLoad(){this.setChildrenSizeType()}render(){return i(a,{key:"2593adc6912a0a49a9e38eadd5056d779cac33b4"},i("slot",{key:"5fb99c0f4cad9633c84d2c353334fc5c816be5a5"}))}get host(){return r(this)}};q.style=N;const K=':host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--color-surface01);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;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="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([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked,:host([clickable]:not([expandable]))>.container-contextual-menu.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button="left"][expandable])>.container>.z-list-element-container,:host([align-button="left"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button="right"][expandable])>.container>.z-list-element-container,:host([align-button="right"][expandable])>.container-contextual-menu>.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,:host([align-button="left"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button="right"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button="right"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-list-content-container{display:flex;align-items:center}';const W=K;const U=class{accessibleFocusHandler(t){if(this.listElementId===t.detail){const e=this.host.shadowRoot.getElementById(`z-list-element-id-${t.detail}`);e.focus()}}constructor(i){t(this,i);this.accessibleFocus=e(this,"accessibleFocus",7);this.ariaDescendantFocus=e(this,"ariaDescendantFocus",7);this.clickItem=e(this,"clickItem",7);this.openElementConfig={accordion:{open:"minus-circled",close:"plus-circled"},menu:{open:"chevron-up",close:"chevron-down"}};this.alignButton=v.LEFT;this.clickable=false;this.dividerColor="color-surface03";this.dividerType=z.NONE;this.dividerSize=h.SMALL;this.expandable=false;this.expandableStyle=g.ACCORDION;this.listElementId=undefined;this.size=b.MEDIUM;this.color="none";this.disabled=false;this.isContextualMenu=false;this.listElementPosition="0";this.listType=f.NONE;this.role="listitem";this.showInnerContent=false;this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}handleClick(){this.clickItem.emit(this.listElementId);if(!this.expandable){return}this.showInnerContent=!this.showInnerContent}calculateClass(){if(this.isContextualMenu){return"container-contextual-menu"}return"container"}handleKeyDown(t){const e=t.code===m.ENTER;switch(t.code){case m.ARROW_DOWN:t.preventDefault();this.accessibleFocus.emit(this.listElementId+1);break;case m.ARROW_UP:t.preventDefault();this.accessibleFocus.emit(this.listElementId-1);break;case m.ENTER:t.preventDefault();this.clickItem.emit(this.listElementId);break}if(!this.expandable||!e){return}this.showInnerContent=!this.showInnerContent}renderExpandableButton(){if(!this.expandable){return null}return i("z-icon",{name:this.showInnerContent?this.openElementConfig[this.expandableStyle].open:this.openElementConfig[this.expandableStyle].close})}renderExpandedContent(){if(!this.expandable){return null}return i("div",{class:{"z-list-element-inner-container":true,expanded:this.showInnerContent}},i("slot",{name:"inner-content"}))}renderContent(){if(this.listType===f.NONE){return i("slot",null)}if(this.listType===f.ORDERED){return i("div",{class:"z-list-content-container"},i("div",null,this.listElementPosition,". "),i("slot",null))}if(this.listType===f.UNORDERED){return i("div",{class:"z-list-content-container"},i("span",null,"• "),i("slot",null))}}render(){return i(a,{key:"3c55ce5744a82e1b1871f658d0d63dc49a55fbba","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.isContextualMenu?"0":null},i("div",{key:"f9ccf0529e72d61ffed2f8da94461b6d0d904447",class:`${this.calculateClass()}`,style:{color:`var(--${this.color})`},tabindex:this.isContextualMenu?"0":"-1",id:`z-list-element-id-${this.listElementId}`,part:"list-item-container"},i("div",{key:"9747b70e158f1e0a50bd392bc11724df0951196e",class:"z-list-element-container"},this.renderExpandableButton(),this.renderContent()),this.renderExpandedContent()),this.dividerType===z.ELEMENT&&i("z-divider",{color:this.dividerColor,size:this.dividerSize}))}get host(){return r(this)}};U.style=W;const Z=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";const G=Z;const J=class{constructor(e){t(this,e);this.size=b.MEDIUM;this.dividerType=z.NONE;this.dividerSize=h.SMALL;this.dividerColor="gray200";this.listType=f.NONE}componentDidLoad(){const t=this.host.children;for(let e=0;e<t.length;e++){if(t.length-1>e){t[e].setAttribute("divider-type",this.dividerType);t[e].setAttribute("divider-size",this.dividerSize);t[e].setAttribute("divider-color",this.dividerColor)}t[e].setAttribute("size",this.size);t[e].setAttribute("list-type",this.listType);t[e].setAttribute("list-element-position",e.toString())}}componentWillLoad(){this.hasHeader=!!this.host.querySelector('[slot="header-title"]')}render(){return i(a,{key:"c25db9a48f30bf98694c87dce08463ac6b314719",role:"group"},i("div",{key:"354ea1928b4f2e58b46ef2eb18e84234e9db2cd9",class:{"z-list-group-header-container":true,"has-header":this.hasHeader}},i("slot",{key:"48b577a0a6b35ab74eb9b70c53dd9462ab57e92d",name:"header-title"}),this.dividerType===z.HEADER&&i("z-divider",{color:this.dividerColor,size:this.dividerSize})),i("slot",{key:"407e9151406fdc7f01b0ba40a69bd0516d5cc1f4"}))}get host(){return r(this)}};J.style=G;const Y='.sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;min-width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01)}[variant="pushcontent"].sc-z-offcanvas-h{display:none}[open].sc-z-offcanvas-h{display:flex;visibility:visible}.sc-z-offcanvas-h:not([open]){visibility:hidden}[variant="overlay"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;display:flex;height:calc(100% - var(--z-offcanvas--top-space))}[variant="overlay"][transitiondirection="left"].sc-z-offcanvas-h{justify-content:end}[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant="overlay"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (max-width: 768px){[open][transitiondirection="left"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection="right"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}.sc-z-offcanvas-h:not([variant="overlay"])[open]:not(.skip-animation){width:auto;animation:grow 0.4s ease-out}}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open][variant="overlay"][transitiondirection="left"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection="right"].sc-z-offcanvas-h:not(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant="overlay"][transitiondirection="right"]>.canvas-container.sc-z-offcanvas{transform:translateX(-100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant="overlay"][transitiondirection="left"]>.canvas-container.sc-z-offcanvas{transform:translateX(100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant="overlay"] .canvas-background.sc-z-offcanvas{transition:visibility 0.4s ease-out;visibility:hidden}';const Q=Y;const tt=class{constructor(i){t(this,i);this.canvasOpenStatusChanged=e(this,"canvasOpenStatusChanged",7);this.variant=n.PUSHCONTENT;this.open=false;this.transitiondirection=s.LEFT;this.skipLoadAnimation=false}onOpenChanged(){if(!this.open&&this.skipLoadAnimation){this.skipLoadAnimation=false}this.handlePageOverflow();this.canvasOpenStatusChanged.emit(this.open)}handlePageOverflow(){const t=this.variant===n.OVERLAY?"overflow-y":"overflow-x";document.body.style[t]=this.open?"hidden":""}disconnectedCallback(){this.open=false}render(){return i(a,{key:"f0f282fa9732f81f98d644210d2b602a53161b7d",class:{"skip-animation":this.skipLoadAnimation}},i("div",{key:"15bf03615f187509da41d3206b39d705ca34cb50",role:"presentation",class:"canvas-container",onTransitionEnd:()=>this.handlePageOverflow()},i("div",{key:"ba4444c4f3e6c3d9c9fecc4ff4ab103fc614b6bb",role:"presentation",class:"canvas-content"},i("slot",{key:"4da6be1451be2a26815c7d6503a1eb9cec7c48f6",name:"canvasContent"}))),this.variant==n.OVERLAY&&i("div",{class:"canvas-background","data-action":"canvasBackground",onClick:()=>this.open=false}))}static get watchers(){return{open:["onOpenChanged"]}}};tt.style=Q;const et=':host{z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.results-wrapper{position:absolute;top:calc(100% - 1px);left:0;width:100%;padding:calc(var(--space-unit) / 4);border:var(--border-size-small) solid var(--color-surface03);border-top:none;background:var(--color-surface01)}.results{overflow:auto;max-height:var(--z-searchbar-results-height, 540px);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}.results::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.results::-webkit-scrollbar-track{background-color:transparent}.results::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.results .category-heading{display:block;font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:var(--font-size-3)}.results .category-heading>*{display:block}.results .category-heading>.category{color:var(--color-text05);font-style:italic}.results .category-heading>.subcategory{margin-top:var(--space-unit);color:var(--color-text01);text-transform:uppercase}.results z-list-element{display:block}.results .item{--z-icon-height:12px;--z-icon-width:12px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;color:var(--color-text01);column-gap:calc(var(--space-unit) * 1.5);fill:var(--color-icon02);font-size:var(--font-size-2);line-height:var(--font-size-3)}.results .item.ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item>.item-label mark{background:var(--color-primary03)}.results .item.has-category{padding-left:calc(var(--space-unit) * 3)}.results .item.item-search{--z-icon-height:16px;--z-icon-width:16px}.results .item-show-all{text-align:center}.results .item-no-results{display:block;font-size:var(--font-size-2);font-style:italic;line-height:var(--font-size-5)}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results .category-heading{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item{font-size:var(--font-size-3);line-height:var(--font-size-6)}.results .item.item-search{--z-icon-height:18px;--z-icon-width:18px}.results .item.ellipsis>.item-label{height:24px}}@media (min-width: 1152px){.results .item{cursor:pointer}.results .item-no-results{cursor:default;font-size:var(--font-size-3);line-height:var(--font-size-6)}}:host([size="small"]) .results :is(.item,.category-heading),:host([size="x-small"]) .results :is(.item,.category-heading){font-size:var(--font-size-2)}:host([size="small"]) .results .item:not(.has-category),:host([size="x-small"]) .results .item:not(.has-category){--z-icon-height:16px;--z-icon-width:16px}:host([size="small"])::part(list-item-container){min-height:calc(var(--space-unit) * 4.5);padding:0}:host([size="x-small"])::part(list-item-container){min-height:calc(var(--space-unit) * 4);padding:0}';const it=et;const at=class{constructor(i){t(this,i);this.searchSubmit=e(this,"searchSubmit",7);this.searchTyping=e(this,"searchTyping",7);this.searchItemClick=e(this,"searchItemClick",7);this.resultsItemsList=null;this.htmlid=`searchbar-${y()}`;this.preventSubmit=false;this.value=undefined;this.placeholder=undefined;this.autocomplete=false;this.autocompleteMinChars=3;this.resultsCount=undefined;this.resultsEllipsis=true;this.searchHelperLabel="Cerca {searchString}";this.resultsItems=undefined;this.sortResultsItems=false;this.showSearchButton=false;this.searchButtonIconOnly=false;this.size=c.BIG;this.variant=o.PRIMARY;this.searchString=this.value;this.currResultsCount=0;this.showResults=false}emitSearchSubmit(){this.searchSubmit.emit(this.inputRef.value)}emitSearchTyping(t){this.searchTyping.emit(t)}emitSearchItemClick(t){this.searchItemClick.emit(t)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.searchString=this.value}watchSearchString(){this.emitSearchTyping(this.searchString);if(!this.searchString){this.currResultsCount=this.resultsCount}}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList();this.currResultsCount=this.resultsCount}getResultsItemsList(){return typeof this.resultsItems==="string"?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(t){const e={};t.forEach((t=>{var i;const a=`${t===null||t===void 0?void 0:t.category}${t===null||t===void 0?void 0:t.subcategory}`;e[a]=(i=e[a])!==null&&i!==void 0?i:{category:t===null||t===void 0?void 0:t.category,subcategory:t===null||t===void 0?void 0:t.subcategory,items:[]};e[a]["items"].push(t)}));if(this.sortResultsItems){return Object.keys(e).sort().reduce(((t,i)=>{t[i]=Object.assign(Object.assign({},e[i]),{items:e[i]["items"].sort(((t,e)=>{const i=t.label.toUpperCase();const a=e.label.toUpperCase();if(i<a){return-1}if(i>a){return 1}return 0}))});return t}),{})}return e}checkResultsCount(t){if(!this.currResultsCount||t<this.currResultsCount){return true}return false}handleStopTyping(t){t.stopPropagation();this.searchString=t.detail.value}handleSubmit(){if(this.preventSubmit){return}this.emitSearchSubmit()}handleOutsideClick(t){const e=t.composedPath();const i=e.find((t=>t.nodeName==="Z-SEARCHBAR"));if(!i||i.htmlid!==this.htmlid){this.showResults=false;return}if(e.find((t=>{var e;return(t===null||t===void 0?void 0:t.nodeName)==="Z-INPUT"||((e=t===null||t===void 0?void 0:t.classList)===null||e===void 0?void 0:e.contains("results"))}))){this.showResults=true;return}this.showResults=false}renderInput(){return i("z-input",{ref:t=>{this.inputRef=t},message:false,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>k(t,(()=>this.handleSubmit())),value:this.value,size:this.size})}renderButton(){if(!this.showSearchButton){return null}const t=this.searchButtonIconOnly?{icon:"search"}:null;const e=this.searchButtonIconOnly?"":"CERCA";const a=Object.assign({disabled:this.preventSubmit,variant:this.variant,size:this.size,onClick:()=>this.handleSubmit()},t);return i("z-button",Object.assign({},a),e)}renderResults(){if(!this.showResults||!this.autocomplete||!this.searchString||this.searchString.length<this.autocompleteMinChars||!this.resultsItemsList){return null}return i("div",{class:"results-wrapper"},i("div",{class:"results"},this.renderResultsList()))}renderResultsList(){var t,e;if(this.preventSubmit&&!((t=this.resultsItemsList)===null||t===void 0?void 0:t.length)){return i("span",{class:"item item-no-results"},"Non abbiamo trovato risultati per ",i("b",null,this.searchString),i("br",null),i("br",null),"Cosa puoi fare?",i("ul",null,i("li",null,"Verificare di aver scritto bene"),i("li",null,"Provare a cercare un'altra parola"),i("li",null,"Provare a cercare qualcosa di più generico")))}return i("z-list",{role:"listbox",id:`list-${this.htmlid}`},this.renderSearchHelper(!!((e=this.resultsItemsList)===null||e===void 0?void 0:e.length)),this.renderItems(),this.renderShowAllResults())}renderItems(){var t;if(!((t=this.resultsItemsList)===null||t===void 0?void 0:t.length)){return[]}const e=this.getGroupedItems(this.resultsItemsList);const a=[];let r=0;Object.values(e).forEach(((t,e,n)=>{if(this.checkResultsCount(r)){const s=[];t.items.forEach(((t,i,a)=>{if(this.checkResultsCount(r)){const r=e===n.length-1&&i===a.length-1;s.push(this.renderItem(t,i,!r))}r++}));if(s.length){a.push(i("z-list-group",{"divider-type":z.ELEMENT},this.renderItemCategory(t),s))}}}));return a}renderItem(t,e,a){return i("z-list-element",{id:`list-item-${this.htmlid}-${e}`,role:"option",tabindex:0,dividerType:a?z.ELEMENT:undefined,clickable:true,onClickItem:()=>this.emitSearchItemClick(t)},i("span",{class:{item:true,ellipsis:this.resultsEllipsis,"has-category":!!t.category}},(t===null||t===void 0?void 0:t.icon)&&i("z-icon",{class:"item-icon",name:t.icon}),i("span",{class:"item-label",title:t.label,innerHTML:this.renderItemLabel(t.label)})))}renderItemLabel(t){if(!this.searchString){return t}return t.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"gmi"),(t=>`<mark>${t}</mark>`))}renderItemCategory(t){if(!(t===null||t===void 0?void 0:t.category)){return null}return i("span",{class:"category-heading",slot:"header-title"},i("span",{class:"category"},t.category),(t===null||t===void 0?void 0:t.subcategory)&&i("span",{class:"subcategory"},t.subcategory))}renderSearchHelper(t=true){if(!this.autocomplete||this.preventSubmit||!this.searchString){return null}return i("z-list-element",{role:"option",tabindex:0,dividerType:t?z.ELEMENT:undefined,clickable:true,id:`list-item-${this.htmlid}-search`,onClickItem:()=>this.emitSearchSubmit()},i("span",{class:"item item-search"},i("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),i("span",{class:"item-label",innerHTML:this.searchHelperLabel.replace("{searchString}",`<mark>${this.searchString}</mark>`)})))}renderShowAllResults(){var t,e;if(!this.currResultsCount||!this.searchString||!((t=this.resultsItemsList)===null||t===void 0?void 0:t.length)||this.currResultsCount>=((e=this.resultsItemsList)===null||e===void 0?void 0:e.length)){return null}return i("z-list-element",{role:"option",tabindex:0,clickable:true,id:`list-item-${this.htmlid}-show-all`,onClickItem:()=>this.currResultsCount=0,color:"color-primary01"},i("div",{class:"item-show-all"},"Vedi tutti i risultati"))}render(){return i(a,{key:"fb00861518eb5646a75f2fa810b907163d720531",onFocus:()=>this.showResults=true,onClick:t=>this.handleOutsideClick(t),class:{"has-submit":this.showSearchButton,"has-results":this.autocomplete}},i("div",{key:"10ed44f469ddd16737653dff61427ccde59df735",class:"input-container"},this.renderInput(),this.renderResults()),this.renderButton())}static get watchers(){return{resultsItems:["watchItems"],resultsCount:["watchResultsCount"],value:["watchValue"],searchString:["watchSearchString"]}}};at.style=it;export{O as z_app_header,T as z_button,_ as z_divider,E as z_icon,H as z_input,V as z_input_message,q as z_list,U as z_list_element,J as z_list_group,tt as z_offcanvas,at as z_searchbar};
+//# sourceMappingURL=p-b5e223fb.entry.js.map