@zanichelli/albe-web-components 17.0.2 → 17.0.4

package/www/build/p-ce0d5448.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZSelectStyle0","ZSelect","constructor","hostRef","this","itemsList","randomId","ControlSize","BIG","toggleSelectUl","bind","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","selectItem","disabled","forEach","i","arrowsSelectNav","key","showResetIcon","resetItem","arrows","KeyboardCode","ARROW_DOWN","ARROW_UP","preventDefault","stopPropagation","index","focusSelectItem","host","querySelector","focus","selfFocusOnClose","readonly","document","addEventListener","removeEventListener","handleInputClick","closest","clickedElement","getClickedElement","hasAttribute","KeyboardEvent","ESC","TAB","ENTER","containsElement","MouseEvent","scrollToLetter","letter","foundItem","findIndex","charAt","renderInput","h","class","placeholder","replace","label","ariaLabel","icon","hasclearicon","message","status","undefined","role","size","onClick","onKeyUp","handleKeyboardSubmit","onKeyDown","onInputChange","onKeyPress","String","fromCharCode","keyCode","renderSelectUl","fixed","isfixed","tabindex","listSizeType","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/z-select/styles.css?tag=z-select&encapsulation=scoped","src/components/z-select/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n  color: var(--color-default-text);\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 > z-input .input-icon {\n  cursor: pointer;\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  border-top: none;\n  background: var(--color-form-background);\n  box-shadow: var(--shadow-2);\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: 0 calc(var(--space-unit) * 1.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[disabled] {\n  color: var(--color-form-disabled03);\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: calc(var(--space-unit) / 2) var(--space-unit);\n  column-gap: var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content {\n  margin-right: auto;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {\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: var(--font-sb);\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(--color-default-text);\n}\n\n.reset-item {\n  color: var(--color-primary01);\n  fill: var(--color-primary01-icon);\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: 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, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InputStatus, KeyboardCode, ListDividerType, ListSize, SelectItem} from \"../../beans\";\nimport {boolean, containsElement, getClickedElement, handleKeyboardSubmit, randomId} 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() host: 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.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(selected: null | SelectItem): void {\n    if (selected?.disabled) {\n      return;\n    }\n\n    this.itemsList = this.mapSelectedItemToItemsArray();\n    this.itemsList.forEach((i: SelectItem) => {\n      i.selected = i.id === selected?.id;\n\n      return i;\n    });\n\n    this.selectedItem = this.itemsList.find((item: SelectItem) => item.selected);\n\n    this.emitOptionSelect();\n    this.toggleSelectUl(true);\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    this.host.querySelector<HTMLLIElement>(`#${this.htmlid}_${index}`)?.focus();\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.host.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    if ((e.target as HTMLElement).closest(\".reset-icon\")) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    this.toggleSelectUl();\n  }\n\n  private handleSelectFocus(e: MouseEvent | KeyboardEvent): void {\n    const clickedElement = getClickedElement();\n    if (clickedElement?.hasAttribute(\"disabled\")) {\n      return;\n    }\n\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    if (!containsElement(this.host, clickedElement)) {\n      this.toggleSelectUl(e instanceof MouseEvent);\n    }\n  }\n\n  private scrollToLetter(letter: string): void {\n    const foundItem = this.itemsList.findIndex((item: SelectItem) => item.name.charAt(0) === letter);\n    if (foundItem > -1) {\n      this.focusSelectItem(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.key !== KeyboardCode.ENTER) {\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 class={this.isOpen ? \"open\" : \"closed\"}>\n        <div\n          class={{\n            \"ul-scroll-wrapper\": true,\n            \"fixed\": this.isfixed,\n          }}\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              [`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)}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, key)}\n      >\n        <div class=\"list-element-container\">\n          <div\n            class={{\n              \"selected\": !!item.selected,\n              \"list-element-content\": true,\n            }}\n            innerHTML={item.name}\n          />\n\n          {item.icon && <z-tag icon={item.icon}></z-tag>}\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=\"color-primary01\"\n        class=\"no-results\"\n        size={this.listSizeType()}\n      >\n        <z-icon\n          name=\"multiply-circle\"\n          fill=\"color-primary01-icon\"\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        disabled={this.disabled}\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":"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","ignoreList":[]}

package/www/build/{p-9f0a3d88.entry.js → p-cf7b7e73.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as s}from"./p-75c4a726.js";import{d as e}from"./p-10607a39.js";import"./p-b34993de.js";import"./p-5145a606.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-default-text);fill:var(--color-default-icon);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:"b96b5f850ed4f955ef40eafdedfabe71c942e886",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:"2ca05ec788e9ff591ad7b1cdbb5517b32d5681a9",class:this.underlined&&"border"},this.icon&&s("z-icon",{key:"e573f22f4797e9420e9a460a4aa4c793be06c14f",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:"6efed7b8ca33c2dcb7402555330443244340bae5"})))}};o.style=n;export{o as z_myz_list_item};
-//# sourceMappingURL=p-9f0a3d88.entry.js.map
+import{r as i,c as t,h as s}from"./p-75c4a726.js";import{d as e}from"./p-e691c0b8.js";import"./p-b34993de.js";import"./p-5145a606.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-default-text);fill:var(--color-default-icon);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:"b96b5f850ed4f955ef40eafdedfabe71c942e886",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:"2ca05ec788e9ff591ad7b1cdbb5517b32d5681a9",class:this.underlined&&"border"},this.icon&&s("z-icon",{key:"e573f22f4797e9420e9a460a4aa4c793be06c14f",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:"6efed7b8ca33c2dcb7402555330443244340bae5"})))}};o.style=n;export{o as z_myz_list_item};
+//# sourceMappingURL=p-cf7b7e73.entry.js.map

package/www/build/p-d1cca5ea.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as a,a as n,g as o}from"./p-75c4a726.js";import{I as s}from"./p-b34993de.js";const e="z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;display:flex;max-width:100%;flex-flow:column wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-primary01-icon)}z-pagination *:disabled z-icon{fill:var(--color-disabled03)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-default-text)}z-pagination .pagination-bar{display:flex;max-width:100%;height:48px;align-items:center}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;border:none;margin:0;background-color:var(--color-surface02);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,\n    color 0.15s ease-out,\n    border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out,\n    font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-surface01);outline:none}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);font-weight:var(--font-sb);text-transform:uppercase;white-space:nowrap}z-pagination .pagination-bar .navigation-button{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)}z-pagination .pagination-bar .pagination-button:disabled,z-pagination .pagination-bar .navigation-button:disabled{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);pointer-events:none}z-pagination .pagination-bar .page-button,z-pagination .pagination-bar .ellipsis-button{width:var(--z-pagination--page-button-width)}z-pagination .pages-container{position:relative;display:inline-flex;max-width:100%;height:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-align:center;scrollbar-width:none}z-pagination .pages-container::-webkit-scrollbar{display:none}z-pagination .pages-chunk{display:flex;scroll-snap-align:center}z-pagination .pagination-bar .page-button{padding-top:var(--border-size-large) solid transparent;border-bottom:var(--border-size-large) solid transparent;font-size:var(--font-size-2);font-weight:var(--font-sb)}z-pagination .pagination-bar .page-button[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column;row-gap:var(--space-unit)}z-pagination .go-to-page .label{color:var(--color-default-text);text-transform:uppercase}z-pagination .go-to-page .inputs{display:flex;column-gap:var(--space-unit)}z-pagination .go-to-page .inputs z-input{width:calc(var(--space-unit) * 11)}z-pagination .go-to-page .inputs z-input input,z-pagination .mobile-go-to-page z-input input{padding:0 calc(var(--space-unit) * 1.5) !important;appearance:none}z-pagination .mobile-go-to-page{display:flex;height:100%;flex:1 auto;align-items:center;justify-content:center;background-color:var(--color-surface02)}z-pagination .mobile-go-to-page z-input{width:var(--z-pagination--page-button-width);margin-right:var(--space-unit)}z-pagination .mobile-go-to-page z-input input{text-align:center}z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button{appearance:none}z-pagination .mobile-go-to-page>span{font-size:var(--font-size-2)}@media (hover: hover){z-pagination .pagination-bar button:hover{background-color:var(--color-surface01)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-primary);color:var(--color-hover-primary)}}@media (min-width: 768px){z-pagination{--z-pagination--page-button-width:88px;flex-direction:row;align-items:flex-end}z-pagination .pages-container{max-width:var(--z-pagination--pages-container-max-width)}}";const r=e;const l=class{constructor(a){t(this,a);this.pageChanged=i(this,"pageChanged",7);this.label=undefined;this.navArrows=true;this.totalPages=undefined;this.skip=0;this.edges=false;this.split=undefined;this.visiblePages=undefined;this.currentPage=1;this.goToPage=undefined;this._visiblePages=this.visiblePages;this.isMobile=false;this.goToPageValue=null}setPagesContainerWidth(){if(!this._visiblePages||this.split){this.host.style.setProperty("--z-pagination--pages-container-max-width","100%");return}const t=window.getComputedStyle(this.host);const i=t.getPropertyValue("--z-pagination--page-button-width");this.host.style.setProperty("--z-pagination--pages-container-max-width",`calc(${i} * ${this._visiblePages})`)}setVisiblePages(){this._visiblePages=Math.min(this.visiblePages||this.totalPages,this.totalPages)}onPageChanged(){this.pageChanged.emit(this.currentPage);this.scrollToPage()}onSplitChanged(){if(this.split){this.edges=false}}onResize(){this.setMobile()}setMobile(){const t="screen and (max-width: 767px)";this.isMobile=window.matchMedia(t).matches}getPagesChunks(){const t=Array.from({length:this.totalPages},((t,i)=>i+1));const i=[];const a=Math.ceil(t.length/this._visiblePages);for(let n=0;n<a;n++){i.push(t.slice(n*this._visiblePages,(n+1)*this._visiblePages))}return i}scrollToPage(){const t=this.host.querySelector(`[data-page="${this.currentPage}"]`);if(!t){return}t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}selectPage(t){this.currentPage=Math.min(Math.max(t,1),this.totalPages)}renderPage(t){return a("button",{class:"page-button",type:"button","aria-current":this.currentPage===t?"page":"false",title:`Vai alla pagina ${t}`,"data-page":t,"data-current":this.currentPage===t,onClick:()=>this.selectPage(t)},t)}renderEllipsisButton(t){return a("button",{class:"ellipsis-button",type:"button",title:`Vai alla pagina ${t}`,onClick:()=>this.selectPage(t)},"…")}renderPages(){const t=this.getPagesChunks();if(t.length<=0){return}return t.map((t=>a("div",{class:"pages-chunk"},t.map((t=>this.renderPage(t))))))}renderSplitPages(){if(this.totalPages<=this.split*2+5){return Array.from({length:this.totalPages},((t,i)=>this.renderPage(i+1)))}if(this.currentPage<=this.split*2+2){return[...Array.from({length:this.split*2+3},((t,i)=>this.renderPage(i+1))),this.renderEllipsisButton(this.split*2+4),this.renderPage(this.totalPages)]}if(this.currentPage>this.split*2+2&&this.currentPage<this.totalPages-this.split*2-1){return[this.renderPage(1),this.renderEllipsisButton(this.currentPage-this.split-1),...Array.from({length:this.split*2+1},((t,i)=>this.renderPage(this.currentPage-this.split+i))),this.renderEllipsisButton(this.currentPage+this.split+1),this.renderPage(this.totalPages)]}return[this.renderPage(1),this.renderEllipsisButton(this.totalPages-this.split*2-3),...Array.from({length:this.split*2+3},((t,i)=>this.renderPage(this.totalPages-this.split*2-2+i)))]}renderBackButton(){return a("button",{class:"navigation-button",type:"button",title:"Vai alla pagina precedente",disabled:this.currentPage===1,onClick:()=>this.selectPage(this.currentPage-1)},a("z-icon",{name:"chevron-left"}))}renderForwardButton(){return a("button",{class:"navigation-button",type:"button",title:"Vai alla prossima pagina",disabled:this.currentPage===this.totalPages,onClick:()=>this.selectPage(this.currentPage+1)},a("z-icon",{name:"chevron-right"}))}renderMobile(){const t=this.getPagesChunks();return[this.label&&a("span",{class:"page-label body-1-sb"},this.label),a("div",{class:"pagination-bar"},this.renderBackButton(),!this.goToPage&&a("div",{class:"pages-container",role:"navigation",tabIndex:-1},t.length>0&&t.map((t=>a("div",{class:"pages-chunk"},t.map((t=>this.renderPage(t))))))),this.goToPage&&a("form",{class:"mobile-go-to-page",onSubmit:t=>{t.preventDefault();this.selectPage(this.goToPageValue)}},a("z-input",{class:"go-to-page-input",type:s.NUMBER,min:1,max:this.totalPages,message:false,onInput:t=>{this.goToPageValue=t.target.value},placeholder:this.currentPage.toString(),hasclearicon:false}),a("span",null,`/${this.totalPages}`)),this.renderForwardButton())]}componentDidLoad(){this.setVisiblePages()}componentDidRender(){if(this.split){this.edges=false}this.setPagesContainerWidth();this.setMobile()}render(){if(this.isMobile){return a(n,null,this.renderMobile())}return a(n,null,a("div",{class:"pagination-bar"},this.label&&a("span",{class:"page-label body-1-sb"},this.label),this.edges&&a("button",{class:"pagination-button",type:"button",title:"Vai alla pagina 1",disabled:this.currentPage===1,onClick:()=>this.selectPage(1)},"Pagina 1"),this.skip<this.totalPages&&this.skip>1&&a("button",{class:"pagination-button",type:"button",title:`Vai alla pagina ${this.currentPage-this.skip}`,disabled:this.currentPage<=this.skip,onClick:()=>this.selectPage(this.currentPage-this.skip)},"-",this.skip),this.navArrows&&this.renderBackButton(),a("div",{class:"pages-container",role:"navigation",tabIndex:-1},this.split?this.renderSplitPages():this.renderPages()),this.navArrows&&this.renderForwardButton(),this.skip<this.totalPages&&this.skip>1&&a("button",{class:"pagination-button",type:"button",title:`Vai alla pagina ${this.currentPage+this.skip}`,disabled:this.currentPage>this.totalPages-this.skip,onClick:()=>this.selectPage(this.currentPage+this.skip)},"+",this.skip),this.edges&&a("button",{class:"pagination-button",type:"button",title:`Vai alla pagina ${this.totalPages}`,disabled:this.currentPage===this.totalPages,onClick:()=>this.selectPage(this.totalPages)},"Pagina ",this.totalPages)),this.goToPage&&a("div",{class:"go-to-page"},a("span",{class:"label body-5-sb"},"Vai a pagina:"),a("div",{class:"inputs"},a("z-input",{class:"go-to-page-input",type:s.NUMBER,min:1,max:this.totalPages,message:false,placeholder:"2",hasclearicon:false,onInput:t=>{this.goToPageValue=t.target.value},onKeyDown:t=>t.key==="Enter"&&this.selectPage(this.goToPageValue)}),a("z-button",{disabled:!this.goToPageValue,title:"Vai alla pagina inserita",onClick:()=>this.selectPage(this.goToPageValue)},"vai"))))}get host(){return o(this)}static get watchers(){return{_visiblePages:["setPagesContainerWidth"],visiblePages:["setVisiblePages"],currentPage:["onPageChanged"],split:["onSplitChanged"]}}};l.style=r;export{l as z_pagination};
+//# sourceMappingURL=p-d1cca5ea.entry.js.map

package/www/build/p-d1cca5ea.entry.js.map

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

package/www/build/p-d6a2b1c6.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as o,a as n,g as t}from"./p-75c4a726.js";import{B as i}from"./p-b34993de.js";const r="html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav>* a{color:inherit}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface05);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,\n    border-color 0.3s ease-in-out,\n    color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-primary01);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-surface02);color:var(--color-hover-primary)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}";const e=r;const c=class{constructor(o){a(this,o);this.hideUnselected=false;this.autoCurrent=true;this.collapsed=false}setCurrent(){const a=Array.from(this.nav.querySelectorAll("a")).find((a=>a.href===this.host.ownerDocument.location.href));Array.from(this.nav.children).forEach((o=>{const n=o instanceof HTMLAnchorElement?o:o.querySelector("a");const t=n===a;n.setAttribute("aria-current",t.toString());o.toggleAttribute("data-current",t)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){if(this.autoCurrent){window.addEventListener("hashchange",this.setCurrent.bind(this));this.setCurrent()}}disconnectedCallback(){window.removeEventListener("hashchange",this.setCurrent)}render(){return o(n,{key:"13b73e5270d20ed2fe6993c36bcc67b462e906c6",collapsed:this.collapsed},o("z-button",{key:"e30c82721fc47924bcea1d16d0df1809ce8bf9e5",class:"toggle",variant:i.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},"salta a"),o("nav",{key:"2947b460bbaa7df8d2a8a9a50c51d1b4aa9230d4",ref:a=>this.nav=a},o("slot",{key:"9db93583f854c9a6ca57da4d7efeebca6c88836e"})))}get host(){return t(this)}};c.style=e;export{c as z_anchor_navigation};
+//# sourceMappingURL=p-d6a2b1c6.entry.js.map

package/www/build/p-d6a2b1c6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZAnchorNavigationStyle0","ZAnchorNavigation","setCurrent","currentElement","Array","from","this","nav","querySelectorAll","find","anchor","href","host","ownerDocument","location","children","forEach","item","HTMLAnchorElement","querySelector","isCurrent","setAttribute","toString","toggleAttribute","toggleCollapsed","collapsed","componentDidLoad","autoCurrent","window","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  font-weight: inherit;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  overflow-clip-margin: content-box;\n  text-decoration: none;\n}\n\nz-anchor-navigation nav > * a {\n  color: inherit;\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    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-surface05);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  transition:\n    background-color 0.3s ease-in-out,\n    border-color 0.3s ease-in-out,\n    color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n  border-left-color: var(--color-primary01);\n  color: var(--color-primary01);\n  font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button) {\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 > *:focus:focus-visible,\nz-anchor-navigation nav > * > *:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nz-anchor-navigation nav button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\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  /* hide anchor actions by default... */\n  z-anchor-navigation nav > * > :is(z-button, button) {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  @media (hover: hover) {\n    /* ...show them only hovering/focusing the anchor */\n    z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {\n      opacity: 1;\n      pointer-events: unset;\n    }\n\n    z-anchor-navigation nav > *:hover {\n      border-left-color: var(--color-hover-primary);\n      background-color: var(--color-surface02);\n      color: var(--color-hover-primary);\n    }\n  }\n\n  z-anchor-navigation[hide-unselected] nav > *:not([data-current], :hover, :focus, :focus-within) {\n    color: transparent;\n    fill: transparent;\n  }\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\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   * Enables automatic inference of the current item, listening for hash change\n   * and checking the `href` of the slotted anchors.\n   * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n   * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n   */\n  @Prop()\n  autoCurrent = true;\n\n  /**\n   * Whether the mobile list is collapsed.\n   */\n  @State()\n  collapsed = false;\n\n  @Element() host: HTMLZAnchorNavigationElement;\n\n  /** Reference to the nav element. */\n  private nav: HTMLElement;\n\n  /**\n   * Set `aria-current` attribute to the anchors.\n   */\n  private setCurrent(): void {\n    const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n      (anchor) => anchor.href === this.host.ownerDocument.location.href\n    );\n    Array.from(this.nav.children).forEach((item) => {\n      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n      const isCurrent = anchor === currentElement;\n      anchor.setAttribute(\"aria-current\", isCurrent.toString());\n      item.toggleAttribute(\"data-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    if (this.autoCurrent) {\n      window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n      this.setCurrent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"hashchange\", this.setCurrent);\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":"6FAAA,MAAMA,EAAY,wuEAClB,MAAAC,EAAeD,E,MCsBFE,EAAiB,M,6CAMX,M,iBASH,K,eAMF,K,CAUJ,UAAAC,GACN,MAAMC,EAAiBC,MAAMC,KAAKC,KAAKC,IAAIC,iBAAiB,MAAMC,MAC/DC,GAAWA,EAAOC,OAASL,KAAKM,KAAKC,cAAcC,SAASH,OAE/DP,MAAMC,KAAKC,KAAKC,IAAIQ,UAAUC,SAASC,IACrC,MAAMP,EAASO,aAAgBC,kBAAoBD,EAAOA,EAAKE,cAAc,KAC7E,MAAMC,EAAYV,IAAWP,EAC7BO,EAAOW,aAAa,eAAgBD,EAAUE,YAC9CL,EAAKM,gBAAgB,eAAgBH,EAAU,G,CAO3C,eAAAI,GACNlB,KAAKmB,WAAanB,KAAKmB,S,CAGzB,gBAAAC,GACE,GAAIpB,KAAKqB,YAAa,CACpBC,OAAOC,iBAAiB,aAAcvB,KAAKJ,WAAW4B,KAAKxB,OAC3DA,KAAKJ,Y,EAIT,oBAAA6B,GACEH,OAAOI,oBAAoB,aAAc1B,KAAKJ,W,CAGhD,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACX,UAAWnB,KAAKmB,WACpBS,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,QAASC,EAAcC,UACvBC,KAAMnC,KAAKmB,UAAY,aAAe,eACtCiB,QAASpC,KAAKkB,gBAAgBM,KAAKxB,OAAK,WAI1C4B,EAAA,OAAAE,IAAA,2CAAKO,IAAMC,GAAQtC,KAAKC,IAAMqC,GAC5BV,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/www/build/p-e185545c.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_tr}from"./p-bba6129f.js";import"./p-75c4a726.js";import"./p-e691c0b8.js";import"./p-b34993de.js";import"./p-5145a606.js";import"./p-14e61df6.js";import"./p-123739cb.js";
+//# sourceMappingURL=p-e185545c.entry.js.map

package/www/build/{p-10607a39.js → p-e691c0b8.js}

@@ -1,2 +1,2 @@
-import{g as e,p as t}from"./p-b34993de.js";import{B as n}from"./p-5145a606.js";function r(e){switch(e){case true:case"true":case 1:case"1":case"on":case"yes":return true;case false:case"false":case 0:case"0":case"off":case"no":return false;default:return e}}function a(){return Math.random().toString(36).replace("0.","")}function s(t,n,...r){if(t.code===e.ENTER||t.code===e.SPACE){t.preventDefault();n(...r)}}function u(t,n,...r){if(t.code===e.ENTER){t.preventDefault();n(...r)}}function c(e=null){if(!e){e=document.activeElement}if(e&&e.shadowRoot&&e.shadowRoot.activeElement){e=e.shadowRoot.activeElement;return c(e)}return e}function f(e,t=[]){t.push(e);if(e.parentElement){e=e.parentElement;return f(e,t)}else if(e.parentNode&&e.parentNode.host){e=e.parentNode.host;return f(e,t)}return t}function o(){switch(true){case window.innerWidth<=n.MOBILE:return t.MOBILE;case window.innerWidth<=n.TABLET:return t.TABLET;case window.innerWidth<=n.DESKTOP:return t.DESKTOP;default:return t.DESKTOP_WIDE}}function i(e){try{return JSON.parse(e)}catch(e){return false}}function l(e){const t="avatar-C";const n=19;const r=Math.ceil(2**31-1)*parseFloat(`0.${e}`);let a=Math.ceil(n*(r%1));if(a===0){a=1}return`${t}${a.toString().padStart(2,"0")}`}function d(e,t){var n;return e.contains(t)||!!((n=e.shadowRoot)===null||n===void 0?void 0:n.contains(t))}export{d as a,r as b,l as c,s as d,f as e,c as f,o as g,u as h,i,a as r};
-//# sourceMappingURL=p-10607a39.js.map
+import{g as e,p as t}from"./p-b34993de.js";import{B as n}from"./p-5145a606.js";function r(e){switch(e){case true:case"true":case 1:case"1":case"on":case"yes":return true;case false:case"false":case 0:case"0":case"off":case"no":return false;default:return e}}function a(){return Math.random().toString(36).replace("0.","")}function s(t,n,...r){if(t.code===e.ENTER||t.code===e.SPACE){t.preventDefault();n(...r)}}function u(t,n,...r){if(t.code===e.ENTER){t.preventDefault();n(...r)}}function c(e=null){if(!e){e=document.activeElement}if(e&&e.shadowRoot&&e.shadowRoot.activeElement){e=e.shadowRoot.activeElement;return c(e)}return e}function f(e,t=[]){t.push(e);if(e.parentElement){e=e.parentElement;return f(e,t)}else if(e.parentNode&&e.parentNode.host){e=e.parentNode.host;return f(e,t)}return t}function o(){switch(true){case window.innerWidth<=n.MOBILE:return t.MOBILE;case window.innerWidth<=n.TABLET:return t.TABLET;case window.innerWidth<=n.DESKTOP:return t.DESKTOP;default:return t.DESKTOP_WIDE}}function i(e){try{return JSON.parse(e)}catch(e){return false}}function l(e){const t="avatar-C";const n=19;const r=Math.ceil(2**31-1)*parseFloat(`0.${e}`);let a=Math.ceil(n*(r%1));if(a===0){a=1}return`${t}${a.toString().padStart(2,"0")}`}function d(e,t){var n;return e.contains(t)||!!((n=e.shadowRoot)===null||n===void 0?void 0:n.contains(t))}export{d as a,r as b,l as c,s as d,c as e,f,o as g,u as h,i,a as r};
+//# sourceMappingURL=p-e691c0b8.js.map

package/{dist/web-components-library/p-3bf02cab.entry.js → www/build/p-e78353d6.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,a as s,g as o}from"./p-75c4a726.js";import{g as n}from"./p-b34993de.js";import{a}from"./p-10607a39.js";import"./p-5145a606.js";const h=':host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-primary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:0;left:0;width:100%;height:var(--border-size-large);background-color:var(--color-primary01);content:""}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot="header"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot="header"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot="item"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot="item"]:last-child){border-bottom:0}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active){border-color:var(--color-primary01);font-weight:var(--font-bd)}';const r=h;const l=t=>(t===null||t===void 0?void 0:t.tagName)==="Z-MENU-SECTION";const c=class{get focusableItem(){return this.items.find((t=>l(t)?t.htmlTabindex===0:t.tabIndex===0))}toggle(){if(!this.hasContent){return}this.open=!this.open}onLabelSlotChange(t){const i=t.target.assignedElements()[0];i.dataset.text=i===null||i===void 0?void 0:i.textContent;this.setLabelA11yAttrs()}reflow(t=false){if(!this.floating){return}if(this.content&&this.hasContent){const{style:t}=this.content;const{left:i}=this.host.getBoundingClientRect();const e=getComputedStyle(this.content).width;const s=e?parseFloat(e.replace("px","")):375;const o=30;t.left=`${Math.min(window.innerWidth-i-s-o,0)}px`}if(t){this.raf=requestAnimationFrame(this.reflow.bind(this,t))}}checkContent(){this.hasHeader=!!this.host.querySelectorAll("[slot=header]").length;this.hasContent=!!this.host.querySelectorAll("[slot=item]").length||this.hasHeader}setItemTabindex(t,i){if(l(t)){t.htmlTabindex=i}else{t.tabIndex=i}}setItemsA11yAttrs(){this.items.forEach(((t,i)=>{const e=i===0?0:-1;this.setItemTabindex(t,e);if(!l(t)){t.setAttribute("role","menuitem")}}))}onItemsChange(){this.checkContent();this.items=Array.from(this.host.children).filter((({slot:t})=>t==="item"));this.setItemsA11yAttrs();this.items.forEach((t=>{if(!l(t)){t.dataset.text=t.textContent}}))}moveFocus(t,i){if(l(t)){t.setFocus()}else{t.tabIndex=0;setTimeout((()=>{t.focus()}),100)}if(!i){return}this.setItemTabindex(i,-1)}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===n.ENTER||t.key===n.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.moveFocus(this.items[0])}return}if(!this.verticalContext){return}if(t.key===n.ARROW_RIGHT&&!this.open){t.preventDefault();t.stopPropagation();this.open=true;this.moveFocus(this.items[0])}}async setFocus(){this.htmlTabindex=0;const t=this.hasContent?this.labelButton:this.host.firstElementChild;t.focus()}async focusLastItem(){const t=this.items[this.items.length-1];if(l(t)&&t.open){t.focusLastItem();return}this.moveFocus(t)}onOpenChanged(){if(!this.open){cancelAnimationFrame(this.raf);this.closed.emit();this.items.forEach((t=>{if(l(t)&&t.open){t.open=false}}));return}this.setItemsA11yAttrs();this.opened.emit();if(this.floating){this.reflow(true)}}setLabelA11yAttrs(){if(this.hasContent&&this.labelButton){this.labelButton.tabIndex=this.htmlTabindex;return}const t=this.host.firstElementChild;t.role="menuitem";t.tabIndex=this.htmlTabindex}onItemClick(t){const i=this.items.find((i=>a(i,t.target)));if(i){this.items.forEach((t=>{if(t===i){return}if(l(t)){t.htmlTabindex=-1}else{t.tabIndex=-1}}))}}onKeyDown(t){var i;if(!this.hasContent){return}switch(t.key){case n.ESC:if(!this.open){break}t.stopPropagation();t.preventDefault();this.open=false;this.setFocus();break;case n.ARROW_DOWN:{if(document.activeElement===this.host){if(this.verticalContext&&!this.open){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[0]);break}const i=this.items.indexOf(this.focusableItem);if(this.verticalContext&&i===this.items.length-1){this.setItemTabindex(this.items[i],-1);this.htmlTabindex=0;break}t.stopPropagation();t.preventDefault();const e=this.items[i+1];this.moveFocus(e!==null&&e!==void 0?e:this.items[0],this.focusableItem);break}case n.ARROW_UP:{if(document.activeElement===this.host){if(this.verticalContext){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[this.items.length-1],this.focusableItem);break}t.stopPropagation();t.preventDefault();const e=this.items.indexOf(this.focusableItem);if(e===0&&this.verticalContext){this.setItemTabindex(this.focusableItem,-1);this.setFocus();break}const s=(i=this.items[e-1])!==null&&i!==void 0?i:this.items[this.items.length-1];if(l(s)&&s.open){this.setItemTabindex(this.focusableItem,-1);s.focusLastItem();break}this.moveFocus(s,this.focusableItem);break}case n.ARROW_LEFT:if(!this.open||!this.verticalContext){break}t.preventDefault();t.stopPropagation();this.open=false;this.setFocus()}}constructor(e){t(this,e);this.opened=i(this,"opened",7);this.closed=i(this,"closed",7);this.items=[];this.active=undefined;this.floating=true;this.open=false;this.verticalContext=false;this.htmlTabindex=-1;this.hasHeader=undefined;this.hasContent=undefined;this.toggle=this.toggle.bind(this);this.checkContent=this.checkContent.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this)}componentWillLoad(){this.setLabelA11yAttrs();this.onItemsChange()}render(){if(!this.hasContent){return e("div",{class:"menu-label"},e("slot",{onSlotchange:this.onLabelSlotChange}))}return e(s,null,e("button",{ref:t=>this.labelButton=t,class:"menu-label","aria-expanded":`${!!this.open}`,"aria-haspopup":`${this.hasContent}`,"aria-label":this.open?"Chiudi menù":"Apri menù",role:"menuitem",tabIndex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},e("slot",{onSlotchange:this.onLabelSlotChange}),e("z-icon",{name:this.open?"chevron-up":"chevron-down"})),e("div",{class:"content",ref:t=>this.content=t},this.hasHeader&&e("header",{class:"header"},e("slot",{name:"header",onSlotchange:this.checkContent})),e("div",{class:"items",role:"menu"},e("slot",{name:"item",onSlotchange:this.onItemsChange}))))}get host(){return o(this)}static get watchers(){return{open:["onOpenChanged"],htmlTabindex:["setLabelA11yAttrs"]}}};c.style=r;export{c as z_menu};
-//# sourceMappingURL=p-3bf02cab.entry.js.map
+import{r as t,c as i,h as e,a as s,g as o}from"./p-75c4a726.js";import{g as n}from"./p-b34993de.js";import{a}from"./p-e691c0b8.js";import"./p-5145a606.js";const h=':host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-primary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:0;left:0;width:100%;height:var(--border-size-large);background-color:var(--color-primary01);content:""}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot="header"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot="header"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot="item"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot="item"]:last-child){border-bottom:0}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active){border-color:var(--color-primary01);font-weight:var(--font-bd)}';const r=h;const l=t=>(t===null||t===void 0?void 0:t.tagName)==="Z-MENU-SECTION";const c=class{get focusableItem(){return this.items.find((t=>l(t)?t.htmlTabindex===0:t.tabIndex===0))}toggle(){if(!this.hasContent){return}this.open=!this.open}onLabelSlotChange(t){const i=t.target.assignedElements()[0];i.dataset.text=i===null||i===void 0?void 0:i.textContent;this.setLabelA11yAttrs()}reflow(t=false){if(!this.floating){return}if(this.content&&this.hasContent){const{style:t}=this.content;const{left:i}=this.host.getBoundingClientRect();const e=getComputedStyle(this.content).width;const s=e?parseFloat(e.replace("px","")):375;const o=30;t.left=`${Math.min(window.innerWidth-i-s-o,0)}px`}if(t){this.raf=requestAnimationFrame(this.reflow.bind(this,t))}}checkContent(){this.hasHeader=!!this.host.querySelectorAll("[slot=header]").length;this.hasContent=!!this.host.querySelectorAll("[slot=item]").length||this.hasHeader}setItemTabindex(t,i){if(l(t)){t.htmlTabindex=i}else{t.tabIndex=i}}setItemsA11yAttrs(){this.items.forEach(((t,i)=>{const e=i===0?0:-1;this.setItemTabindex(t,e);if(!l(t)){t.setAttribute("role","menuitem")}}))}onItemsChange(){this.checkContent();this.items=Array.from(this.host.children).filter((({slot:t})=>t==="item"));this.setItemsA11yAttrs();this.items.forEach((t=>{if(!l(t)){t.dataset.text=t.textContent}}))}moveFocus(t,i){if(l(t)){t.setFocus()}else{t.tabIndex=0;setTimeout((()=>{t.focus()}),100)}if(!i){return}this.setItemTabindex(i,-1)}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===n.ENTER||t.key===n.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.moveFocus(this.items[0])}return}if(!this.verticalContext){return}if(t.key===n.ARROW_RIGHT&&!this.open){t.preventDefault();t.stopPropagation();this.open=true;this.moveFocus(this.items[0])}}async setFocus(){this.htmlTabindex=0;const t=this.hasContent?this.labelButton:this.host.firstElementChild;t.focus()}async focusLastItem(){const t=this.items[this.items.length-1];if(l(t)&&t.open){t.focusLastItem();return}this.moveFocus(t)}onOpenChanged(){if(!this.open){cancelAnimationFrame(this.raf);this.closed.emit();this.items.forEach((t=>{if(l(t)&&t.open){t.open=false}}));return}this.setItemsA11yAttrs();this.opened.emit();if(this.floating){this.reflow(true)}}setLabelA11yAttrs(){if(this.hasContent&&this.labelButton){this.labelButton.tabIndex=this.htmlTabindex;return}const t=this.host.firstElementChild;t.role="menuitem";t.tabIndex=this.htmlTabindex}onItemClick(t){const i=this.items.find((i=>a(i,t.target)));if(i){this.items.forEach((t=>{if(t===i){return}if(l(t)){t.htmlTabindex=-1}else{t.tabIndex=-1}}))}}onKeyDown(t){var i;if(!this.hasContent){return}switch(t.key){case n.ESC:if(!this.open){break}t.stopPropagation();t.preventDefault();this.open=false;this.setFocus();break;case n.ARROW_DOWN:{if(document.activeElement===this.host){if(this.verticalContext&&!this.open){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[0]);break}const i=this.items.indexOf(this.focusableItem);if(this.verticalContext&&i===this.items.length-1){this.setItemTabindex(this.items[i],-1);this.htmlTabindex=0;break}t.stopPropagation();t.preventDefault();const e=this.items[i+1];this.moveFocus(e!==null&&e!==void 0?e:this.items[0],this.focusableItem);break}case n.ARROW_UP:{if(document.activeElement===this.host){if(this.verticalContext){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[this.items.length-1],this.focusableItem);break}t.stopPropagation();t.preventDefault();const e=this.items.indexOf(this.focusableItem);if(e===0&&this.verticalContext){this.setItemTabindex(this.focusableItem,-1);this.setFocus();break}const s=(i=this.items[e-1])!==null&&i!==void 0?i:this.items[this.items.length-1];if(l(s)&&s.open){this.setItemTabindex(this.focusableItem,-1);s.focusLastItem();break}this.moveFocus(s,this.focusableItem);break}case n.ARROW_LEFT:if(!this.open||!this.verticalContext){break}t.preventDefault();t.stopPropagation();this.open=false;this.setFocus()}}constructor(e){t(this,e);this.opened=i(this,"opened",7);this.closed=i(this,"closed",7);this.items=[];this.active=undefined;this.floating=true;this.open=false;this.verticalContext=false;this.htmlTabindex=-1;this.hasHeader=undefined;this.hasContent=undefined;this.toggle=this.toggle.bind(this);this.checkContent=this.checkContent.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this)}componentWillLoad(){this.setLabelA11yAttrs();this.onItemsChange()}render(){if(!this.hasContent){return e("div",{class:"menu-label"},e("slot",{onSlotchange:this.onLabelSlotChange}))}return e(s,null,e("button",{ref:t=>this.labelButton=t,class:"menu-label","aria-expanded":`${!!this.open}`,"aria-haspopup":`${this.hasContent}`,"aria-label":this.open?"Chiudi menù":"Apri menù",role:"menuitem",tabIndex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},e("slot",{onSlotchange:this.onLabelSlotChange}),e("z-icon",{name:this.open?"chevron-up":"chevron-down"})),e("div",{class:"content",ref:t=>this.content=t},this.hasHeader&&e("header",{class:"header"},e("slot",{name:"header",onSlotchange:this.checkContent})),e("div",{class:"items",role:"menu"},e("slot",{name:"item",onSlotchange:this.onItemsChange}))))}get host(){return o(this)}static get watchers(){return{open:["onOpenChanged"],htmlTabindex:["setLabelA11yAttrs"]}}};c.style=r;export{c as z_menu};
+//# sourceMappingURL=p-e78353d6.entry.js.map

package/www/build/web-components-library.css

@@ -2238,137 +2238,186 @@ button.z-link.z-link-inverse:visited {
 }
 
 .theme-dark {
+  background: var(--color-surface01);
+
+  --shadow-focus-primary: 0 0 0 2px var(--gray900), 0 0 2px 5px var(--blue25);
+
+  /* primary */
+  --color-active-primary: var(--gray25);
+  --color-hover-primary: var(--gray100);
+  --color-pressed-primary: var(--gray25);
   --color-primary01: var(--color-white);
   --color-primary02: var(--gray800);
   --color-primary03: var(--gray700);
-  --color-hover-primary: var(--gray100);
-  --color-pressed-primary: var(--gray25);
+
+  /* secondary */
+  --color-hover-secondary: var(--red200);
   --color-secondary01: var(--red500);
   --color-secondary02: var(--red900);
   --color-secondary03: var(--red800);
-  --color-hover-secondary: var(--red200);
-  --color-active-primary: var(--gray25);
+
+  /* surface */
   --color-surface01: var(--gray900);
   --color-surface02: var(--gray700);
   --color-surface03: var(--gray300);
   --color-surface04: var(--gray100);
   --color-surface05: var(--color-white);
+
+  /* text */
   --color-default-text: var(--gray100);
+  --color-hover-text: var(--gray300);
+  --color-pressed-text: var(--gray300);
+  --color-text-inverse: var(--gray900);
+  --color-text-link-default: var(--gray100);
   --color-text02: var(--gray900);
   --color-text03: var(--gray700);
   --color-text05: var(--gray500);
-  --color-text-inverse: var(--gray900);
-  --color-pressed-text: var(--gray300);
-  --color-hover-text: var(--gray300);
-  --color-disabled01: var(--gray700);
-  --color-disabled02: var(--gray900);
-  --color-primary01-icon: var(--color-white);
+
+  /* icons */
+  --color-active-primary-icon: var(--gray300);
   --color-disabled01-icon: var(--gray700);
   --color-disabled02-icon: var(--gray900);
-  --color-pressed-icon: var(--gray300);
   --color-hover-icon: var(--gray300);
-  --color-active-primary-icon: var(--gray300);
   --color-hover-primary-icon: var(--gray300);
+  --color-pressed-icon: var(--gray300);
+  --color-primary01-icon: var(--color-white);
+
+  /* status */
+  --color-danger01: var(--red50);
+  --color-danger02: var(--red50);
   --color-default-icon: var(--gray100);
+  --color-disabled01: var(--gray700);
+  --color-disabled02: var(--gray900);
   --color-error01: var(--red50);
   --color-error02: var(--red50);
-  --color-danger01: var(--red50);
-  --color-danger02: var(--red50);
-  --color-text-error: var(--red50);
-  --color-inverse-error: var(--red700);
-  --color-hover-error: var(--red300);
   --color-hover-danger: var(--red300);
-  --color-success01: var(--green50);
-  --color-success02: var(--green50);
-  --color-inverse-success: var(--green700);
+  --color-hover-error: var(--red300);
   --color-hover-success: var(--green300);
-  --color-inverse-hover-success: var(--green50);
+  --color-hover-warning: var(--yellow50);
+  --color-inverse-error: var(--red700);
   --color-inverse-hover-error: var(--red50);
+  --color-inverse-hover-success: var(--green50);
+  --color-inverse-hover-warning: var(--yellow300);
+  --color-inverse-success: var(--green700);
+  --color-inverse-warning: var(--yellow700);
+  --color-success01: var(--green50);
+  --color-success02: var(--green50);
+  --color-text-error: var(--red50);
   --color-warning01: var(--yellow300);
   --color-warning02: var(--yellow300);
-  --color-inverse-warning: var(--yellow700);
-  --color-hover-warning: var(--yellow50);
-  --color-inverse-hover-warning: var(--yellow300);
-
-  background: var(--color-surface01);
 
-  --shadow-focus-primary: 0 0 0 2px var(--gray800), 0 0 2px 5px var(--blue25);
+  /* forms */
+  --color-form-active-primary: var(--gray800);
+  --color-form-hover-primary: var(--gray800);
 }
 
 :root,
 .theme-default {
   --color-background: var(--gray50);
+  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--blue800);
+
+  /* primary */
+  --color-active-primary: var(--blue800);
+  --color-hover-primary: var(--blue800);
+  --color-pressed-primary: var(--blue400);
   --color-primary01: var(--blue500);
   --color-primary02: var(--blue25);
   --color-primary03: var(--blue50);
+
+  /* secondary */
+  --color-active-secondary: var(--red400);
+  --color-hover-secondary: var(--red800);
+  --color-pressed-secondary: var(--red400);
   --color-secondary01: var(--red500);
   --color-secondary02: var(--red25);
   --color-secondary03: var(--red50);
-  --color-danger01: var(--red500);
-  --color-danger02: var(--red500);
-  --color-error01: var(--red500);
-  --color-error02: var(--red500);
-  --color-error-inverse: var(--red50);
-  --color-text-error: var(--red700);
-  --color-success01: var(--green500);
-  --color-success02: var(--green500);
-  --color-text-success: var(--color-success-default);
-  --color-success-inverse: var(--green50);
-  --color-warning01: var(--yellow500);
-  --color-warning02: var(--yellow500);
-  --color-text-warning: var(--color-warning-default);
-  --color-warning-inverse: var(--yellow50);
+
+  /* surface */
   --color-surface01: var(--color-white);
   --color-surface02: var(--gray100);
   --color-surface03: var(--gray300);
   --color-surface04: var(--gray700);
   --color-surface05: var(--gray900);
+
+  /* text */
   --color-default-text: var(--gray900);
+  --color-hover-primary-text: var(--color-black);
+  --color-text-inverse: var(--color-white);
   --color-text02: var(--gray100);
   --color-text03: var(--gray300);
   --color-text05: var(--gray600);
-  --color-text-inverse: var(--color-white);
-  --color-primary01-icon: var(--blue500);
+
+  /* icons */
+  --color-active-primary-icon: var(--blue400);
   --color-default-icon: var(--gray900);
-  --color-inverse-icon: var(--color-white);
-  --color-hover-icon: var(--color-black);
-  --color-pressed-icon: var(--gray700);
-  --color-disabled03-icon: var(--gray500);
   --color-disabled01-icon: var(--gray300);
   --color-disabled02-icon: var(--gray100);
+  --color-disabled03-icon: var(--gray500);
+  --color-hover-icon: var(--color-black);
   --color-hover-primary-icon: var(--blue800);
-  --color-active-primary-icon: var(--blue400);
-  --color-form-background: var(--color-white);
-  --color-hover-primary: var(--blue800);
-  --color-hover-primary-text: var(--color-black);
-  --color-hover-secondary: var(--red800);
-  --color-hover-tertiary: var(--blue800);
-  --color-hover-surface: var(--gray50);
-  --color-hover-light: var(--blue400);
+  --color-inverse-icon: var(--color-white);
+  --color-pressed-icon: var(--gray700);
+  --color-primary01-icon: var(--blue500);
+
+  /* status */
+  --color-danger01: var(--red500);
+  --color-danger02: var(--red500);
+  --color-disabled01: var(--gray300);
+  --color-disabled02: var(--gray100);
+  --color-disabled03: var(--gray500);
+  --color-error-inverse: var(--red50);
+  --color-error01: var(--red500);
+  --color-error02: var(--red500);
   --color-hover-danger: var(--red700);
   --color-hover-error: var(--red700);
   --color-hover-success: var(--green700);
   --color-hover-warning: var(--yellow700);
-  --color-active-primary: var(--blue800);
-  --color-active-secondary: var(--red400);
-  --color-active-tertiary: var(--blue800);
-  --color-active-light: var(--blue400);
-  --color-pressed-primary: var(--blue400);
-  --color-pressed-secondary: var(--red400);
-  --color-selected-light: var(--gray300);
-  --color-highlight: var(--blue400);
-  --color-ghost01: var(--gray300);
-  --color-ghost02: var(--gray500);
-  --color-disabled01: var(--gray300);
-  --color-disabled02: var(--gray100);
-  --color-disabled03: var(--gray500);
-  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--blue800);
+  --color-inverse-error: var(--red50);
   --color-inverse-hover-error: var(--red500);
   --color-inverse-hover-success: var(--green500);
   --color-inverse-hover-warning: var(--yellow500);
-  --color-inverse-error: var(--red50);
   --color-inverse-success: var(--green50);
   --color-inverse-warning: var(--yellow50);
+  --color-success-inverse: var(--green50);
+  --color-success01: var(--green500);
+  --color-success02: var(--green500);
+  --color-text-error: var(--red700);
+  --color-text-success: var(--color-success-default);
+  --color-text-warning: var(--color-warning-default);
+  --color-warning-inverse: var(--yellow50);
+  --color-warning01: var(--yellow500);
+  --color-warning02: var(--yellow500);
+
+  /* forms */
+  --color-form-active-primary: var(--blue400);
+  --color-form-background: var(--color-white);
+  --color-form-default-icon: var(--gray900);
+  --color-form-default-text: var(--gray900);
+  --color-form-disabled-text: var(--gray500);
+  --color-form-disabled01-icon: var(--gray500);
+  --color-form-disabled03: var(--gray500);
+  --color-form-hover-error: var(--red800);
+  --color-form-hover-primary: var(--blue800);
+  --color-form-hover-warning: var(--yellow800);
+  --color-form-inverse-error: var(--red50);
+  --color-form-inverse-success: var(--green50);
+  --color-form-inverse-warning: var(--yellow50);
+  --color-form-placeholder-text: var(--gray500);
+  --color-form-success01: var(--green500);
+  --color-form-surface03: var(--gray200);
+  --color-form-surface04: var(--gray600);
+  --color-form-warning01: var(--yellow500);
+
+  /* misc */
+  --color-active-light: var(--blue400);
+  --color-active-tertiary: var(--blue800);
+  --color-hover-tertiary: var(--blue800);
+  --color-hover-surface: var(--gray50);
+  --color-ghost01: var(--gray300);
+  --color-ghost02: var(--gray500);
+  --color-highlight: var(--blue400);
+  --color-hover-light: var(--blue400);
+  --color-selected-light: var(--gray300);
 }
 
 .theme-red {
@@ -2380,10 +2429,9 @@ button.z-link.z-link-inverse:visited {
   --color-hover-primary-icon: var(--red800);
   --color-hover-primary: var(--red800);
   --color-pressed-primary: var(--red400);
-  --color-primary01-icon: var(--red500);
+  --color-primary01: var(--red500);
   --color-primary02: var(--red25);
   --color-primary03: var(--red50);
-  --color-primary01: var(--red500);
 
   /* secondary */
   --color-active-secondary: var(--gray400);
@@ -2414,6 +2462,11 @@ button.z-link.z-link-inverse:visited {
   --color-hover-icon: var(--color-black);
   --color-inverse-icon: var(--color-white);
   --color-pressed-icon: var(--gray700);
+  --color-primary01-icon: var(--red500);
+
+  /* forms */
+  --color-form-active-primary: var(--red400);
+  --color-form-hover-primary: var(--red800);
 }