@zanichelli/albe-web-components 20.0.2-RC → 21.0.0-RC1

package/dist/components/z-menu.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","isZMenuSection","el","tagName","ZMenu","__stencil_proxyCustomElement","HTMLElement","focusableItem","this","items","find","item","htmlTabindex","tabIndex","toggle","hasContent","open","onLabelSlotChange","ev","labelElement","target","assignedElements","dataset","text","textContent","setLabelA11yAttrs","reflow","live","floating","content","style","left","host","getBoundingClientRect","widthPx","getComputedStyle","width","parseFloat","replace","safeScrollbarSpace","Math","min","window","innerWidth","raf","requestAnimationFrame","bind","checkContent","hasHeader","querySelectorAll","length","setItemTabindex","setItemsA11yAttrs","forEach","index","tabindex","setAttribute","onItemsChange","Array","from","children","filter","slot","moveFocus","receiver","current","setFocus","setTimeout","focus","onLabelClick","onLabelKeydown","key","KeyboardCode","ENTER","SPACE","preventDefault","stopPropagation","verticalContext","ARROW_RIGHT","label","labelButton","firstElementChild","focusLastItem","lastItem","onOpenChanged","cancelAnimationFrame","closed","emit","opened","slottedLabel","role","onItemClick","clickedItem","containsElement","onKeyDown","ESC","ARROW_DOWN","document","activeElement","currentIndex","indexOf","ARROW_UP","_a","ARROW_LEFT","constructor","registerHost","componentWillLoad","render","h","class","onSlotchange","Host","ref","onClick","name"],"sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n  outline: none;\n}\n\n:host {\n  /**\n   * @prop --z-menu-label-color: Color of the label's text.\n   */\n  --z-menu-label-color: ;\n\n  position: relative;\n  display: inline-flex;\n  height: fit-content;\n  flex-direction: column;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-bottom: var(--border-size-large) solid transparent;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(:is([active], [open])) .menu-label ::slotted(*),\n.menu-label:focus-visible ::slotted(*),\ndiv.menu-label:focus-within ::slotted(*) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n\n:host([vertical-context]) .menu-label {\n  padding: var(--space-unit) 0;\n  border-width: var(--border-size-small);\n  border-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label,\n.menu-label:hover,\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  border-color: var(--color-primary01);\n}\n\n:host([vertical-context]:is([active], [open])) .menu-label::after,\n:host([vertical-context]) .menu-label:hover::after,\n:host([vertical-context]) .menu-label:focus-visible::after,\n:host([vertical-context]) div.menu-label:focus-within::after {\n  position: absolute;\n  bottom: calc(var(--border-size-small) * -1);\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n  background-color: var(--color-primary01);\n  content: \"\";\n}\n\n:host([vertical-context]) .menu-label ::slotted(*) {\n  padding: 0;\n}\n\n.menu-label ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  min-width: fit-content;\n  padding-bottom: 2px;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color, var(--color-default-text));\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: inherit;\n  line-height: 1.5;\n  white-space: nowrap;\n}\n\n.menu-label z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text]:not([slot]))::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text]:not([slot]))::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]:not([slot])) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]:not([vertical-context])) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: 0 calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n}\n\n:host(:not([vertical-context])) .items > ::slotted([slot=\"item\"]:last-child) {\n  border-bottom: 0;\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active),\n.items > ::slotted([slot=\"item\"][active]),\n.items > ::slotted([slot=\"item\"][data-active]) {\n  border-color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst isZMenuSection = (el: HTMLElement | HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n  el?.tagName === \"Z-MENU-SECTION\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu implements ComponentInterface {\n  @Element() host: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  /**\n   * Tabindex value to set on the menu label.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n   */\n  @Prop({mutable: true})\n  htmlTabindex = -1;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private labelButton: HTMLButtonElement;\n\n  private content: HTMLElement;\n\n  private items: (HTMLElement | HTMLZMenuSectionElement)[] = [];\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  private get focusableItem(): HTMLZMenuSectionElement | HTMLElement | null {\n    return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n    this.setLabelA11yAttrs();\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (!this.floating) {\n      return;\n    }\n\n    if (this.content && this.hasContent) {\n      const {style} = this.content;\n      const {left} = this.host.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  private setItemTabindex(item: HTMLElement | HTMLZMenuSectionElement, tabIndex: number): void {\n    if (isZMenuSection(item)) {\n      item.htmlTabindex = tabIndex;\n    } else {\n      item.tabIndex = tabIndex;\n    }\n  }\n\n  /**\n   * Set `menuitem` role to all menu items (ZMenuSection items already have it).\n   * Set -1 to the tabindex of the items and 0 to the first one.\n   */\n  private setItemsA11yAttrs(): void {\n    this.items.forEach((item, index) => {\n      const tabindex = index === 0 ? 0 : -1;\n      this.setItemTabindex(item, tabindex);\n      if (!isZMenuSection(item)) {\n        item.setAttribute(\"role\", \"menuitem\");\n      }\n    });\n  }\n\n  private onItemsChange(): void {\n    this.checkContent();\n    this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n    this.setItemsA11yAttrs();\n    this.items.forEach((item) => {\n      if (!isZMenuSection(item)) {\n        item.dataset.text = item.textContent;\n      }\n    });\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n   */\n  private moveFocus(\n    receiver: HTMLElement | HTMLZMenuSectionElement,\n    current?: HTMLElement | HTMLZMenuSectionElement\n  ): void {\n    if (isZMenuSection(receiver)) {\n      receiver.setFocus();\n    } else {\n      receiver.tabIndex = 0;\n      setTimeout(() => {\n        receiver.focus();\n      }, 100);\n    }\n    if (!current) {\n      return;\n    }\n\n    this.setItemTabindex(current, -1);\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.moveFocus(this.items[0]);\n      }\n\n      return;\n    }\n\n    if (!this.verticalContext) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.open = true;\n      this.moveFocus(this.items[0]);\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n    label.focus();\n  }\n\n  /**\n   * Focus the last item.\n   */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    const lastItem = this.items[this.items.length - 1];\n    if (isZMenuSection(lastItem) && lastItem.open) {\n      lastItem.focusLastItem();\n\n      return;\n    }\n\n    this.moveFocus(lastItem);\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open) {\n      cancelAnimationFrame(this.raf);\n      this.closed.emit();\n      this.items.forEach((item) => {\n        if (isZMenuSection(item) && item.open) {\n          item.open = false;\n        }\n      });\n\n      return;\n    }\n\n    this.setItemsA11yAttrs();\n    this.opened.emit();\n    if (this.floating) {\n      this.reflow(true);\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  setLabelA11yAttrs(): void {\n    if (this.hasContent && this.labelButton) {\n      this.labelButton.tabIndex = this.htmlTabindex;\n\n      return;\n    }\n\n    const slottedLabel = this.host.firstElementChild as HTMLElement;\n    slottedLabel.role = \"menuitem\";\n    slottedLabel.tabIndex = this.htmlTabindex;\n  }\n\n  /**\n   * Set tabindex to -1 to all siblings of the clicked item.\n   */\n  @Listen(\"click\", {target: \"document\"})\n  onItemClick(ev: MouseEvent): void {\n    const clickedItem = this.items.find((item) => containsElement(item, ev.target as HTMLElement));\n    if (clickedItem) {\n      this.items.forEach((item) => {\n        if (item === clickedItem) {\n          return;\n        }\n\n        if (isZMenuSection(item)) {\n          item.htmlTabindex = -1;\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  onKeyDown(ev: KeyboardEvent): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n        if (!this.open) {\n          break;\n        }\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext && !this.open) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[0]);\n          break;\n        }\n\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (this.verticalContext && currentIndex === this.items.length - 1) {\n          // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n          this.setItemTabindex(this.items[currentIndex], -1);\n          this.htmlTabindex = 0;\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const receiver = this.items[currentIndex + 1];\n        // if the last item is already focused, navigate to the first one\n        this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          // open the menu and focus the last item\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (currentIndex === 0 && this.verticalContext) {\n          this.setItemTabindex(this.focusableItem, -1);\n          this.setFocus();\n          break;\n        }\n\n        const receiver = this.items[currentIndex - 1] ?? this.items[this.items.length - 1];\n        // if the receiver is a ZMenuSection and it's open, focus its last item\n        if (isZMenuSection(receiver) && receiver.open) {\n          this.setItemTabindex(this.focusableItem, -1);\n          receiver.focusLastItem();\n          break;\n        }\n\n        this.moveFocus(receiver, this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open || !this.verticalContext) {\n          break;\n        }\n\n        // close the menu and focus the label\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = false;\n        this.setFocus();\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setLabelA11yAttrs();\n    this.onItemsChange();\n  }\n\n  render(): HTMLDivElement | HTMLZMenuElement {\n    if (!this.hasContent) {\n      return (\n        <div class=\"menu-label\">\n          <slot onSlotchange={this.onLabelSlotChange} />\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.labelButton = el)}\n          class=\"menu-label\"\n          aria-expanded={`${!!this.open}`}\n          aria-haspopup={`${this.hasContent}`}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          role=\"menuitem\"\n          tabIndex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n        </button>\n\n        <div\n          class=\"content\"\n          ref={(el) => (this.content = el)}\n        >\n          {this.hasHeader && (\n            <header class=\"header\">\n              <slot\n                name=\"header\"\n                onSlotchange={this.checkContent}\n              />\n            </header>\n          )}\n\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"item\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stylesCss","isZMenuSection","el","tagName","ZMenu","__stencil_proxyCustomElement","HTMLElement","focusableItem","this","items","find","item","htmlTabindex","tabIndex","toggle","hasContent","open","onLabelSlotChange","ev","labelElement","target","assignedElements","dataset","text","textContent","setLabelA11yAttrs","reflow","live","floating","content","style","left","host","getBoundingClientRect","widthPx","getComputedStyle","width","parseFloat","replace","safeScrollbarSpace","Math","min","window","innerWidth","raf","requestAnimationFrame","bind","checkContent","hasHeader","querySelectorAll","length","setItemTabindex","setItemsA11yAttrs","forEach","index","tabindex","setAttribute","onItemsChange","Array","from","children","filter","slot","moveFocus","receiver","current","setFocus","setTimeout","focus","onLabelClick","onLabelKeydown","key","KeyboardCode","ENTER","SPACE","preventDefault","stopPropagation","verticalContext","ARROW_RIGHT","label","labelButton","firstElementChild","focusLastItem","lastItem","onOpenChanged","cancelAnimationFrame","closed","emit","opened","slottedLabel","role","onItemClick","clickedItem","containsElement","onKeyDown","ESC","ARROW_DOWN","document","activeElement","currentIndex","indexOf","ARROW_UP","_a","ARROW_LEFT","constructor","registerHost","componentWillLoad","render","h","class","onSlotchange","Host","ref","onClick","name"],"sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n  outline: none;\n}\n\n:host {\n  /**\n   * @prop --z-menu-label-color: Color of the label's text.\n   */\n  --z-menu-label-color: ;\n\n  position: relative;\n  display: inline-flex;\n  height: fit-content;\n  flex-direction: column;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-bottom: var(--border-size-large) solid transparent;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(:is([active], [open])) .menu-label ::slotted(*),\n.menu-label:focus-visible ::slotted(*),\ndiv.menu-label:focus-within ::slotted(*) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n\n:host([vertical-context]) .menu-label {\n  padding: var(--space-unit) 0;\n  border-width: var(--border-size-small);\n  border-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label,\n.menu-label:hover,\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  border-color: var(--color-primary01);\n}\n\n:host([vertical-context]:is([active], [open])) .menu-label::after,\n:host([vertical-context]) .menu-label:hover::after,\n:host([vertical-context]) .menu-label:focus-visible::after,\n:host([vertical-context]) div.menu-label:focus-within::after {\n  position: absolute;\n  bottom: calc(var(--border-size-small) * -1);\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n  background-color: var(--color-primary01);\n  content: \"\";\n}\n\n:host([vertical-context]) .menu-label ::slotted(*) {\n  padding: 0;\n}\n\n.menu-label ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  min-width: fit-content;\n  padding-bottom: 2px;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color, var(--color-default-text));\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: inherit;\n  line-height: 1.5;\n  white-space: nowrap;\n}\n\n.menu-label z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text]:not([slot]))::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text]:not([slot]))::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]:not([slot])) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]:not([vertical-context])) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: 0 calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n}\n\n:host(:not([vertical-context])) .items > ::slotted([slot=\"item\"]:last-child) {\n  border-bottom: 0;\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active),\n.items > ::slotted([slot=\"item\"][active]),\n.items > ::slotted([slot=\"item\"][data-active]) {\n  border-color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst isZMenuSection = (el: HTMLElement | HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n  el?.tagName === \"Z-MENU-SECTION\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu implements ComponentInterface {\n  @Element() host: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  /**\n   * Tabindex value to set on the menu label.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n   */\n  @Prop({mutable: true})\n  htmlTabindex = -1;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private labelButton: HTMLButtonElement;\n\n  private content: HTMLElement;\n\n  private items: (HTMLElement | HTMLZMenuSectionElement)[] = [];\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  private get focusableItem(): HTMLZMenuSectionElement | HTMLElement | null {\n    return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n    this.setLabelA11yAttrs();\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (!this.floating) {\n      return;\n    }\n\n    if (this.content && this.hasContent) {\n      const {style} = this.content;\n      const {left} = this.host.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  private setItemTabindex(item: HTMLElement | HTMLZMenuSectionElement, tabIndex: number): void {\n    if (isZMenuSection(item)) {\n      item.htmlTabindex = tabIndex;\n    } else {\n      item.tabIndex = tabIndex;\n    }\n  }\n\n  /**\n   * Set `menuitem` role to all menu items (ZMenuSection items already have it).\n   * Set -1 to the tabindex of the items and 0 to the first one.\n   */\n  private setItemsA11yAttrs(): void {\n    this.items.forEach((item, index) => {\n      const tabindex = index === 0 ? 0 : -1;\n      this.setItemTabindex(item, tabindex);\n      if (!isZMenuSection(item)) {\n        item.setAttribute(\"role\", \"menuitem\");\n      }\n    });\n  }\n\n  private onItemsChange(): void {\n    this.checkContent();\n    this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n    this.setItemsA11yAttrs();\n    this.items.forEach((item) => {\n      if (!isZMenuSection(item)) {\n        item.dataset.text = item.textContent;\n      }\n    });\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n   */\n  private moveFocus(\n    receiver: HTMLElement | HTMLZMenuSectionElement,\n    current?: HTMLElement | HTMLZMenuSectionElement\n  ): void {\n    if (isZMenuSection(receiver)) {\n      receiver.setFocus();\n    } else {\n      receiver.tabIndex = 0;\n      setTimeout(() => {\n        receiver.focus();\n      }, 100);\n    }\n    if (!current) {\n      return;\n    }\n\n    this.setItemTabindex(current, -1);\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.moveFocus(this.items[0]);\n      }\n\n      return;\n    }\n\n    if (!this.verticalContext) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.open = true;\n      this.moveFocus(this.items[0]);\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n    label.focus();\n  }\n\n  /**\n   * Focus the last item.\n   */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    const lastItem = this.items[this.items.length - 1];\n    if (isZMenuSection(lastItem) && lastItem.open) {\n      lastItem.focusLastItem();\n\n      return;\n    }\n\n    this.moveFocus(lastItem);\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open) {\n      cancelAnimationFrame(this.raf);\n      this.closed.emit();\n      this.items.forEach((item) => {\n        if (isZMenuSection(item) && item.open) {\n          item.open = false;\n        }\n      });\n\n      return;\n    }\n\n    this.setItemsA11yAttrs();\n    this.opened.emit();\n    if (this.floating) {\n      this.reflow(true);\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  setLabelA11yAttrs(): void {\n    if (this.hasContent && this.labelButton) {\n      this.labelButton.tabIndex = this.htmlTabindex;\n\n      return;\n    }\n\n    const slottedLabel = this.host.firstElementChild as HTMLElement;\n    slottedLabel.role = \"menuitem\";\n    slottedLabel.tabIndex = this.htmlTabindex;\n  }\n\n  /**\n   * Set tabindex to -1 to all siblings of the clicked item.\n   */\n  @Listen(\"click\", {target: \"document\"})\n  onItemClick(ev: MouseEvent): void {\n    const clickedItem = this.items.find((item) => containsElement(item, ev.target as HTMLElement));\n    if (clickedItem) {\n      this.items.forEach((item) => {\n        if (item === clickedItem) {\n          return;\n        }\n\n        if (isZMenuSection(item)) {\n          item.htmlTabindex = -1;\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  onKeyDown(ev: KeyboardEvent): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n        if (!this.open) {\n          break;\n        }\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext && !this.open) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[0]);\n          break;\n        }\n\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (this.verticalContext && currentIndex === this.items.length - 1) {\n          // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n          this.setItemTabindex(this.items[currentIndex], -1);\n          this.htmlTabindex = 0;\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const receiver = this.items[currentIndex + 1];\n        // if the last item is already focused, navigate to the first one\n        this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          // open the menu and focus the last item\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (currentIndex === 0 && this.verticalContext) {\n          this.setItemTabindex(this.focusableItem, -1);\n          this.setFocus();\n          break;\n        }\n\n        const receiver = this.items[currentIndex - 1] ?? this.items[this.items.length - 1];\n        // if the receiver is a ZMenuSection and it's open, focus its last item\n        if (isZMenuSection(receiver) && receiver.open) {\n          this.setItemTabindex(this.focusableItem, -1);\n          receiver.focusLastItem();\n          break;\n        }\n\n        this.moveFocus(receiver, this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open || !this.verticalContext) {\n          break;\n        }\n\n        // close the menu and focus the label\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = false;\n        this.setFocus();\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setLabelA11yAttrs();\n    this.onItemsChange();\n  }\n\n  render(): HTMLDivElement | HTMLZMenuElement {\n    if (!this.hasContent) {\n      return (\n        <div class=\"menu-label\">\n          <slot onSlotchange={this.onLabelSlotChange} />\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.labelButton = el)}\n          class=\"menu-label\"\n          aria-expanded={`${!!this.open}`}\n          aria-haspopup={`${this.hasContent}`}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          role=\"menuitem\"\n          tabIndex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n        </button>\n\n        <div\n          class=\"content\"\n          ref={(el) => (this.content = el)}\n        >\n          {this.hasHeader && (\n            <header class=\"header\">\n              <slot\n                name=\"header\"\n                onSlotchange={this.checkContent}\n              />\n            </header>\n          )}\n\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"item\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/z-modal.js

@@ -1,2 +1,2 @@
-import{Z as o,d as s}from"./index20.js";const t=o;const n=s;export{t as ZModal,n as defineCustomElement};
+import{Z as o,d as s}from"./p-BbZelagf.js";const t=o;const a=s;export{t as ZModal,a as defineCustomElement};
 //# sourceMappingURL=z-modal.js.map

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

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,Host as e,transformTag as o}from"@stencil/core/internal/client";import{N as s,a as r,b as l}from"./index2.js";import{d as c}from"./index3.js";const h=()=>`z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 2px 2px var(--shadow-color-base)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-primary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}`;const d=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.selected=a(this,"selected",7);this.orientation=s.HORIZONTAL;this.size=r.BIG;this.selectedTab=undefined;this.focusedTab=undefined}get direction(){return this.orientation==s.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==s.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.nav.children)}scrollToTab(t){const i=t.parentElement;if(!i){return}setTimeout((()=>{const a=this.orientation===s.HORIZONTAL;const n=i.getBoundingClientRect();const e=t.getBoundingClientRect();const o=a?e.left-n.left:e.top-n.top;const r=a?i.clientWidth:i.clientHeight;const l=a?t.clientWidth:t.clientHeight;const c=o-r/2+l/2;i.scrollTo({[a?"left":"top"]:i[a?"scrollLeft":"scrollTop"]+c,behavior:"smooth"})}),100)}navigateBackwards(){this.nav.scrollBy({[this.direction.toLowerCase()]:0-this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateForward(){this.nav.scrollBy({[this.direction.toLowerCase()]:this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}isArrowNavigation(t){return Object.values(l).includes(t.key)}checkScrollVisible(){if(!this.nav){return}this.canNavigate=this.nav[`scroll${this.dimension}`]>this.nav[`client${this.dimension}`]}checkScrollEnabled(){if(!this.nav){return}this.canNavigateNext=this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]<this.nav[`scroll${this.dimension}`];this.canNavigatePrev=this.nav[`scroll${this.direction}`]>0}onTabSelected(){this.tabs.forEach(((t,i)=>{const a=t.querySelector("z-icon");const n=a===null||a===void 0?void 0:a.name.replace("-filled","");if(i!==this.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;if(a){a.name=n}return}if(a){a.name=`${n}-filled`}t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}}handleTabClick(t){const i=t.target.closest("[role='tab']");if(!this.tabs.some((t=>t.contains(i)))){return}this.selectedTab=this.tabs.indexOf(i)}onTabFocusIn(t){const i=this.tabs.findIndex((i=>i.contains(t.target)));if(i===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=i;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])}navigateThroughTabs(t){if(!this.tabs.some((i=>i.contains(t.target)))||!this.isArrowNavigation(t)){return true}t.preventDefault();if(t.key===l.RIGHT&&this.orientation==s.HORIZONTAL||t.key===l.DOWN&&this.orientation==s.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(t.key===l.LEFT&&this.orientation==s.HORIZONTAL||t.key===l.UP&&this.orientation==s.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(t)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])}onTabFocusOut(t){var i;if(!this.tabs.some((i=>i.contains(t.relatedTarget)))){this.tabs[(i=this.selectedTab)!==null&&i!==void 0?i:0].tabIndex=0;this.focusedTab=undefined}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.checkScrollVisible()))}componentDidLoad(){var t;this.tabs.forEach((t=>{t.setAttribute("role","tab");t.tabIndex=-1}));const i=(t=this.selectedTab)!==null&&t!==void 0?t:this.tabs.findIndex((t=>t.ariaSelected==="true"));if(i!==-1){this.selectedTab=i;this.tabs[i].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){return n(e,{key:"4d0356146191eae6e0015b261f92a487dfd80025",class:{"interactive-2":this.size===r.SMALL,"interactive-1":this.size!==r.SMALL},scrollable:this.canNavigate},n("button",{key:"f57ebb5c49dc5aa665b0659c37af430690006bcb",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},n("z-icon",{key:"6a61f6be478d0b46a1ae189f3cff2496966ab69a",name:this.orientation===s.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),n("nav",{key:"b2f45b0e7db4af01bb8cbff865b4ef4d827f67d9",role:"tablist","aria-label":this.htmlAriaLabel||undefined,ref:t=>this.nav=t!==null&&t!==void 0?t:this.nav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},n("slot",{key:"fe16d95aa9406fa2f007fc68fd9827799f73d390"})),n("button",{key:"555e177253cc3c38955e08447f82e00ecaebe3e0",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},n("z-icon",{key:"891c2a9541d890bfe207fcaf830db2cdff99641e",name:this.orientation===s.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return this}static get watchers(){return{canNavigate:[{checkScrollEnabled:0}],selectedTab:[{onTabSelected:0}]}}static get style(){return h()}},[260,"z-navigation-tabs",{htmlAriaLabel:[1,"html-aria-label"],orientation:[513],size:[513],selectedTab:[1026,"selected-tab"],canNavigate:[32],canNavigatePrev:[32],canNavigateNext:[32]},[[0,"click","handleTabClick"],[0,"focusin","onTabFocusIn"],[0,"keydown","navigateThroughTabs"],[0,"focusout","onTabFocusOut"]],{canNavigate:[{checkScrollEnabled:0}],selectedTab:[{onTabSelected:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["z-navigation-tabs","z-icon"];t.forEach((t=>{switch(t){case"z-navigation-tabs":if(!customElements.get(o(t))){customElements.define(o(t),d)}break;case"z-icon":if(!customElements.get(o(t))){c()}break}}))}const b=d;const f=v;export{b as ZNavigationTabs,f as defineCustomElement};
+import{p as t,H as i,c as a,h as n,d as e,t as o}from"./p-RmbDDbWd.js";import{N as s,a as r,b as l}from"./p-DdetsoIY.js";import{d as c}from"./p-CbXEdwLi.js";const h=()=>`z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation="horizontal"]>nav{width:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation="vertical"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation="vertical"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation="vertical"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation="vertical"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation="vertical"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 2px 2px var(--shadow-color-base)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-background)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected="true"]{color:var(--color-hover-primary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected="true"]::after{position:absolute;background-color:var(--color-hover-primary);content:""}z-navigation-tabs[orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="horizontal"]>nav>[aria-selected="true"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size="small"][orientation="horizontal"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size="small"][orientation="horizontal"]>nav>[aria-selected="true"]::after{height:var(--border-size-medium)}z-navigation-tabs[size="small"]:not([orientation="vertical"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation="vertical"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation="vertical"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation="vertical"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation="vertical"]>nav>[aria-selected="true"]::after{top:0;right:0;width:var(--border-size-large);height:100%}`;const d=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.selected=a(this,"selected",7);this.orientation=s.HORIZONTAL;this.size=r.BIG;this.selectedTab=undefined;this.focusedTab=undefined}get direction(){return this.orientation==s.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==s.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.nav.children)}scrollToTab(t){const i=t.parentElement;if(!i){return}setTimeout((()=>{const a=this.orientation===s.HORIZONTAL;const n=i.getBoundingClientRect();const e=t.getBoundingClientRect();const o=a?e.left-n.left:e.top-n.top;const r=a?i.clientWidth:i.clientHeight;const l=a?t.clientWidth:t.clientHeight;const c=o-r/2+l/2;i.scrollTo({[a?"left":"top"]:i[a?"scrollLeft":"scrollTop"]+c,behavior:"smooth"})}),100)}navigateBackwards(){this.nav.scrollBy({[this.direction.toLowerCase()]:0-this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateForward(){this.nav.scrollBy({[this.direction.toLowerCase()]:this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]/2,behavior:"smooth"})}isArrowNavigation(t){return Object.values(l).includes(t.key)}checkScrollVisible(){if(!this.nav){return}this.canNavigate=this.nav[`scroll${this.dimension}`]>this.nav[`client${this.dimension}`]}checkScrollEnabled(){if(!this.nav){return}this.canNavigateNext=this.nav[`scroll${this.direction}`]+this.nav[`client${this.dimension}`]<this.nav[`scroll${this.dimension}`];this.canNavigatePrev=this.nav[`scroll${this.direction}`]>0}onTabSelected(){this.tabs.forEach(((t,i)=>{const a=t.querySelector("z-icon");const n=a===null||a===void 0?void 0:a.name.replace("-filled","");if(i!==this.selectedTab){t.setAttribute("aria-selected","false");t.tabIndex=-1;if(a){a.name=n}return}if(a){a.name=`${n}-filled`}t.setAttribute("aria-selected","true")}));this.selected.emit(this.selectedTab);if(this.selectedTab!==undefined){this.scrollToTab(this.tabs[this.selectedTab])}}handleTabClick(t){const i=t.target.closest("[role='tab']");if(!this.tabs.some((t=>t.contains(i)))){return}this.selectedTab=this.tabs.indexOf(i)}onTabFocusIn(t){const i=this.tabs.findIndex((i=>i.contains(t.target)));if(i===-1){return}if(this.selectedTab!==undefined){this.tabs[this.selectedTab].tabIndex=-1}this.focusedTab=i;this.tabs[this.focusedTab].tabIndex=-1;this.scrollToTab(this.tabs[this.focusedTab])}navigateThroughTabs(t){if(!this.tabs.some((i=>i.contains(t.target)))||!this.isArrowNavigation(t)){return true}t.preventDefault();if(t.key===l.RIGHT&&this.orientation==s.HORIZONTAL||t.key===l.DOWN&&this.orientation==s.VERTICAL){this.focusedTab++;if(this.focusedTab>=this.tabs.length){this.focusedTab=0}}else if(t.key===l.LEFT&&this.orientation==s.HORIZONTAL||t.key===l.UP&&this.orientation==s.VERTICAL){this.focusedTab--;if(this.focusedTab<0){this.focusedTab=this.tabs.length-1}}if(this.tabs[this.focusedTab].hasAttribute("disabled")&&this.tabs[this.focusedTab].getAttribute("disabled")!=="false"){return this.navigateThroughTabs(t)}this.tabs[this.focusedTab].focus();this.scrollToTab(this.tabs[this.focusedTab])}onTabFocusOut(t){var i;if(!this.tabs.some((i=>i.contains(t.relatedTarget)))){this.tabs[(i=this.selectedTab)!==null&&i!==void 0?i:0].tabIndex=0;this.focusedTab=undefined}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.checkScrollVisible()))}componentDidLoad(){var t;this.tabs.forEach((t=>{t.setAttribute("role","tab");t.tabIndex=-1}));const i=(t=this.selectedTab)!==null&&t!==void 0?t:this.tabs.findIndex((t=>t.ariaSelected==="true"));if(i!==-1){this.selectedTab=i;this.tabs[i].tabIndex=0;this.onTabSelected()}else{this.tabs[0].tabIndex=0}this.resizeObserver.observe(this.nav)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}render(){return n(e,{key:"4d0356146191eae6e0015b261f92a487dfd80025",class:{"interactive-2":this.size===r.SMALL,"interactive-1":this.size!==r.SMALL},scrollable:this.canNavigate},n("button",{key:"f57ebb5c49dc5aa665b0659c37af430690006bcb",class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabIndex:-1,disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti",hidden:!this.canNavigate},n("z-icon",{key:"6a61f6be478d0b46a1ae189f3cff2496966ab69a",name:this.orientation===s.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),n("nav",{key:"b2f45b0e7db4af01bb8cbff865b4ef4d827f67d9",role:"tablist","aria-label":this.htmlAriaLabel||undefined,ref:t=>this.nav=t!==null&&t!==void 0?t:this.nav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},n("slot",{key:"fe16d95aa9406fa2f007fc68fd9827799f73d390"})),n("button",{key:"555e177253cc3c38955e08447f82e00ecaebe3e0",class:"navigation-button",onClick:this.navigateForward.bind(this),tabIndex:-1,disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi",hidden:!this.canNavigate},n("z-icon",{key:"891c2a9541d890bfe207fcaf830db2cdff99641e",name:this.orientation===s.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return this}static get watchers(){return{canNavigate:[{checkScrollEnabled:0}],selectedTab:[{onTabSelected:0}]}}static get style(){return h()}},[260,"z-navigation-tabs",{htmlAriaLabel:[1,"html-aria-label"],orientation:[513],size:[513],selectedTab:[1026,"selected-tab"],canNavigate:[32],canNavigatePrev:[32],canNavigateNext:[32]},[[0,"click","handleTabClick"],[0,"focusin","onTabFocusIn"],[0,"keydown","navigateThroughTabs"],[0,"focusout","onTabFocusOut"]],{canNavigate:[{checkScrollEnabled:0}],selectedTab:[{onTabSelected:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["z-navigation-tabs","z-icon"];t.forEach((t=>{switch(t){case"z-navigation-tabs":if(!customElements.get(o(t))){customElements.define(o(t),d)}break;case"z-icon":if(!customElements.get(o(t))){c()}break}}))}const b=d;const f=v;export{b as ZNavigationTabs,f as defineCustomElement};
 //# sourceMappingURL=z-navigation-tabs.js.map

package/dist/components/z-navigation-tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZNavigationTabs","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","orientation","NavigationTabsOrientation","HORIZONTAL","size","NavigationTabsSize","BIG","selectedTab","undefined","focusedTab","direction","dimension","tabs","Array","from","nav","children","scrollToTab","tabElement","container","parentElement","setTimeout","isHorizontal","containerRect","getBoundingClientRect","tabRect","offset","left","top","containerSize","clientWidth","clientHeight","tabSize","scrollAmount","scrollTo","behavior","navigateBackwards","scrollBy","toLowerCase","navigateForward","isArrowNavigation","e","Object","values","NavigationTabsKeyboardEvents","includes","key","checkScrollVisible","canNavigate","checkScrollEnabled","canNavigateNext","canNavigatePrev","onTabSelected","forEach","tab","i","zicon","querySelector","strokeIcon","name","replace","setAttribute","tabIndex","selected","emit","handleTabClick","event","clickedTab","target","closest","some","child","contains","indexOf","onTabFocusIn","focused","findIndex","navigateThroughTabs","preventDefault","RIGHT","DOWN","VERTICAL","length","LEFT","UP","hasAttribute","getAttribute","focus","onTabFocusOut","relatedTarget","_a","connectedCallback","resizeObserver","ResizeObserver","componentDidLoad","preselectedTab","ariaSelected","observe","disconnectedCallback","disconnect","render","h","Host","class","SMALL","scrollable","onClick","bind","disabled","hidden","width","height","role","htmlAriaLabel","ref","el","onScroll"],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n  /**\n   * @prop --z-navigation-tabs-nav-buttons-bg: Background color of the navigation buttons. The default is `--color-surface01`.\n   * @prop --z-navigation-tabs-nav-buttons-fg: Foreground color of the navigation buttons. The default is `--color-primary01`.\n   */\n  --z-navigation-tabs-nav-buttons-bg: ;\n  --z-navigation-tabs-nav-buttons-fg: ;\n\n  position: relative;\n  z-index: 0;\n  display: flex;\n  overflow: hidden;\n  flex-direction: row;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n  box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n  display: none;\n}\n\nz-navigation-tabs .navigation-button {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n  border-radius: var(--border-no-radius);\n  box-shadow: 0 0 4px 1px var(--shadow-color-base);\n  cursor: pointer;\n  fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n  outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n  display: none;\n}\n\nz-navigation-tabs > nav {\n  z-index: 0;\n  display: flex;\n  overflow: auto;\n  align-items: center;\n  justify-content: flex-start;\n  scroll-behavior: smooth;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n  width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n  top: 0;\n  width: calc(var(--space-unit) * 4);\n  height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n  left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n  right: 0;\n}\n\n/* Orientation vertical */\nz-navigation-tabs[orientation=\"vertical\"] {\n  width: fit-content;\n  flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n  left: 0;\n  width: 100%;\n  height: calc(var(--space-unit) * 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n  top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n  bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n  height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs */\n\nz-navigation-tabs > nav > * {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  gap: var(--space-unit);\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n  text-decoration: none;\n}\n\nz-navigation-tabs > nav > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 2px 2px var(--shadow-color-base);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n  background-color: var(--color-background);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n  color: var(--color-disabled03);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n  color: var(--color-hover-primary);\n  fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n  position: absolute;\n  background-color: var(--color-hover-primary);\n  content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > * z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) */\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n  display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs implements ComponentInterface {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const container = tabElement.parentElement;\n\n    if (!container) {\n      return;\n    }\n\n    setTimeout(() => {\n      const isHorizontal = this.orientation === NavigationTabsOrientation.HORIZONTAL;\n\n      const containerRect = container.getBoundingClientRect();\n      const tabRect = tabElement.getBoundingClientRect();\n\n      const offset = isHorizontal ? tabRect.left - containerRect.left : tabRect.top - containerRect.top;\n      const containerSize = isHorizontal ? container.clientWidth : container.clientHeight;\n      const tabSize = isHorizontal ? tabElement.clientWidth : tabElement.clientHeight;\n      const scrollAmount = offset - containerSize / 2 + tabSize / 2;\n\n      container.scrollTo({\n        [isHorizontal ? \"left\" : \"top\"]: container[isHorizontal ? \"scrollLeft\" : \"scrollTop\"] + scrollAmount,\n        behavior: \"smooth\",\n      });\n    }, 100);\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        if (zicon) {\n          zicon.name = strokeIcon;\n        }\n\n        return;\n      }\n\n      if (zicon) {\n        zicon.name = `${strokeIcon}-filled`;\n      }\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.htmlAriaLabel || undefined}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZNavigationTabs","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","orientation","NavigationTabsOrientation","HORIZONTAL","size","NavigationTabsSize","BIG","selectedTab","undefined","focusedTab","direction","dimension","tabs","Array","from","nav","children","scrollToTab","tabElement","container","parentElement","setTimeout","isHorizontal","containerRect","getBoundingClientRect","tabRect","offset","left","top","containerSize","clientWidth","clientHeight","tabSize","scrollAmount","scrollTo","behavior","navigateBackwards","scrollBy","toLowerCase","navigateForward","isArrowNavigation","e","Object","values","NavigationTabsKeyboardEvents","includes","key","checkScrollVisible","canNavigate","checkScrollEnabled","canNavigateNext","canNavigatePrev","onTabSelected","forEach","tab","i","zicon","querySelector","strokeIcon","name","replace","setAttribute","tabIndex","selected","emit","handleTabClick","event","clickedTab","target","closest","some","child","contains","indexOf","onTabFocusIn","focused","findIndex","navigateThroughTabs","preventDefault","RIGHT","DOWN","VERTICAL","length","LEFT","UP","hasAttribute","getAttribute","focus","onTabFocusOut","relatedTarget","_a","connectedCallback","resizeObserver","ResizeObserver","componentDidLoad","preselectedTab","ariaSelected","observe","disconnectedCallback","disconnect","render","h","Host","class","SMALL","scrollable","onClick","bind","disabled","hidden","width","height","role","htmlAriaLabel","ref","el","onScroll"],"sources":["src/components/z-navigation-tabs/styles.css?tag=z-navigation-tabs","src/components/z-navigation-tabs/index.tsx"],"sourcesContent":["z-navigation-tabs {\n  /**\n   * @prop --z-navigation-tabs-nav-buttons-bg: Background color of the navigation buttons. The default is `--color-surface01`.\n   * @prop --z-navigation-tabs-nav-buttons-fg: Foreground color of the navigation buttons. The default is `--color-primary01`.\n   */\n  --z-navigation-tabs-nav-buttons-bg: ;\n  --z-navigation-tabs-nav-buttons-fg: ;\n\n  position: relative;\n  z-index: 0;\n  display: flex;\n  overflow: hidden;\n  flex-direction: row;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nz-navigation-tabs,\nz-navigation-tabs * {\n  box-sizing: border-box;\n}\n\nz-navigation-tabs > nav::-webkit-scrollbar {\n  display: none;\n}\n\nz-navigation-tabs .navigation-button {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));\n  border-radius: var(--border-no-radius);\n  box-shadow: 0 0 4px 1px var(--shadow-color-base);\n  cursor: pointer;\n  fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));\n  outline: none;\n}\n\nz-navigation-tabs .navigation-button:disabled {\n  display: none;\n}\n\nz-navigation-tabs > nav {\n  z-index: 0;\n  display: flex;\n  overflow: auto;\n  align-items: center;\n  justify-content: flex-start;\n  scroll-behavior: smooth;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav {\n  width: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button {\n  top: 0;\n  width: calc(var(--space-unit) * 4);\n  height: 100%;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child {\n  left: 0;\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child {\n  right: 0;\n}\n\n/* Orientation vertical */\nz-navigation-tabs[orientation=\"vertical\"] {\n  width: fit-content;\n  flex-direction: column;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav {\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button {\n  left: 0;\n  width: 100%;\n  height: calc(var(--space-unit) * 4);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child {\n  top: 0;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child {\n  bottom: 0;\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button {\n  height: calc(var(--space-unit) * 4);\n}\n\n/* Style for the tabs */\n\nz-navigation-tabs > nav > * {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  gap: var(--space-unit);\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tabs > nav > a {\n  text-decoration: none;\n}\n\nz-navigation-tabs > nav > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 2px 2px var(--shadow-color-base);\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover {\n  background-color: var(--color-background);\n}\n\nz-navigation-tabs > nav > button[disabled] {\n  color: var(--color-disabled03);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover,\nnav > [aria-selected=\"true\"] {\n  color: var(--color-hover-primary);\n  fill: currentcolor;\n}\n\nz-navigation-tabs > nav > :not([disabled]):hover::after,\nnav > [aria-selected=\"true\"]::after {\n  position: absolute;\n  background-color: var(--color-hover-primary);\n  content: \"\";\n}\n\nz-navigation-tabs[orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tabs > nav > * z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\n/* `small` size (only available for horizontal orientation) */\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[size=\"small\"][orientation=\"horizontal\"] > nav > [aria-selected=\"true\"]::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"]) > nav > * z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > * > :not(z-icon) {\n  display: none;\n}\n\nz-navigation-tabs[orientation=\"vertical\"] > nav > :not([disabled]):hover::after,\nz-navigation-tabs[orientation=\"vertical\"] > nav > [aria-selected=\"true\"]::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/**\n * Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n */\n@Component({\n  tag: \"z-navigation-tabs\",\n  styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs implements ComponentInterface {\n  /**\n   * Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n   */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /**\n   * Navigation tabs orientation.\n   */\n  @Prop({reflect: true})\n  orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Navigation tabs size.\n   */\n  @Prop({reflect: true})\n  size? = NavigationTabsSize.BIG;\n\n  /**\n   * Index of the selected tab.\n   * Useful to programmatically select a tab.\n   * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n   */\n  @Prop({mutable: true})\n  selectedTab: number = undefined;\n\n  /**\n   * Emitted when the selected tab changes.\n   * Contains the index of the new selected tab in the `detail` of the event.\n   */\n  @Event()\n  selected: EventEmitter<number>;\n\n  /**\n   * Whether to show navigation buttons.\n   */\n  @State()\n  canNavigate: boolean;\n\n  /**\n   * Whether backwards navigation is allowed.\n   */\n  @State()\n  canNavigatePrev: boolean;\n\n  /**\n   * Whether forward navigation is allowed.\n   */\n  @State()\n  canNavigateNext: boolean;\n\n  @Element() host: HTMLZNavigationTabsElement;\n\n  /**\n   * Index of the last tab that held focus.\n   */\n  private focusedTab = undefined;\n\n  /**\n   * Reference to the `<nav>` element\n   */\n  private nav: HTMLElement;\n\n  /**\n   * Getter for the direction to check based on current orientation.\n   */\n  get direction(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n  }\n\n  /**\n   * Getter for the dimension to check based on current orientation.\n   */\n  get dimension(): string {\n    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n  }\n\n  get tabs(): HTMLElement[] {\n    return Array.from(this.nav.children) as HTMLElement[];\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab(tabElement: HTMLElement): void {\n    const container = tabElement.parentElement;\n\n    if (!container) {\n      return;\n    }\n\n    setTimeout(() => {\n      const isHorizontal = this.orientation === NavigationTabsOrientation.HORIZONTAL;\n\n      const containerRect = container.getBoundingClientRect();\n      const tabRect = tabElement.getBoundingClientRect();\n\n      const offset = isHorizontal ? tabRect.left - containerRect.left : tabRect.top - containerRect.top;\n      const containerSize = isHorizontal ? container.clientWidth : container.clientHeight;\n      const tabSize = isHorizontal ? tabElement.clientWidth : tabElement.clientHeight;\n      const scrollAmount = offset - containerSize / 2 + tabSize / 2;\n\n      container.scrollTo({\n        [isHorizontal ? \"left\" : \"top\"]: container[isHorizontal ? \"scrollLeft\" : \"scrollTop\"] + scrollAmount,\n        behavior: \"smooth\",\n      });\n    }, 100);\n  }\n\n  /**\n   * Scroll the navigation bar half of its size backward.\n   */\n  private navigateBackwards(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Scroll the navigation bar half of its size forward.\n   */\n  private navigateForward(): void {\n    this.nav.scrollBy({\n      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n      behavior: \"smooth\",\n    });\n  }\n\n  /**\n   * Check if a keyboard event was triggered by an arrow key.\n   */\n  private isArrowNavigation(e: KeyboardEvent): boolean {\n    return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n  }\n\n  /**\n   * Check if the navigation buttons are needed.\n   */\n  private checkScrollVisible(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n  }\n\n  /**\n   * Check if navigation buttons can be enabled for each direction.\n   */\n  @Watch(\"canNavigate\")\n  checkScrollEnabled(): void {\n    if (!this.nav) {\n      return;\n    }\n\n    this.canNavigateNext =\n      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n  }\n\n  /**\n   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n   */\n  @Watch(\"selectedTab\")\n  onTabSelected(): void {\n    this.tabs.forEach((tab, i) => {\n      const zicon = tab.querySelector(\"z-icon\");\n      const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n      if (i !== this.selectedTab) {\n        tab.setAttribute(\"aria-selected\", \"false\");\n        tab.tabIndex = -1;\n        if (zicon) {\n          zicon.name = strokeIcon;\n        }\n\n        return;\n      }\n\n      if (zicon) {\n        zicon.name = `${strokeIcon}-filled`;\n      }\n      tab.setAttribute(\"aria-selected\", \"true\");\n    });\n    this.selected.emit(this.selectedTab);\n    if (this.selectedTab !== undefined) {\n      this.scrollToTab(this.tabs[this.selectedTab]);\n    }\n  }\n\n  /**\n   * Handle click on the tabs.\n   * @param event `click` event triggered by a child tab\n   */\n  @Listen(\"click\")\n  handleTabClick(event: MouseEvent): void {\n    const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n    if (!this.tabs.some((child) => child.contains(clickedTab))) {\n      return;\n    }\n\n    this.selectedTab = this.tabs.indexOf(clickedTab);\n  }\n\n  /**\n   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n   */\n  @Listen(\"focusin\")\n  onTabFocusIn(event: FocusEvent): void {\n    const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n    if (focused === -1) {\n      return;\n    }\n\n    if (this.selectedTab !== undefined) {\n      this.tabs[this.selectedTab].tabIndex = -1;\n    }\n    this.focusedTab = focused;\n    this.tabs[this.focusedTab].tabIndex = -1;\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * Handle keyboard navigation through tabs with arrow keys.\n   */\n  @Listen(\"keydown\")\n  navigateThroughTabs(event: KeyboardEvent): void | boolean {\n    if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) || !this.isArrowNavigation(event)) {\n      return true;\n    }\n\n    event.preventDefault();\n    if (\n      (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move forward\n      this.focusedTab++;\n      if (this.focusedTab >= this.tabs.length) {\n        this.focusedTab = 0;\n      }\n    } else if (\n      (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||\n      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n    ) {\n      // Move backward\n      this.focusedTab--;\n      if (this.focusedTab < 0) {\n        this.focusedTab = this.tabs.length - 1;\n      }\n    }\n    // Ignore disabled tabs\n    if (\n      this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n      this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n    ) {\n      return this.navigateThroughTabs(event);\n    }\n\n    this.tabs[this.focusedTab].focus();\n    this.scrollToTab(this.tabs[this.focusedTab]);\n  }\n\n  /**\n   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n   */\n  @Listen(\"focusout\")\n  onTabFocusOut(event: FocusEvent): void {\n    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n      this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n      this.focusedTab = undefined;\n    }\n  }\n\n  connectedCallback(): void {\n    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n  }\n\n  componentDidLoad(): void {\n    // Set role and tabindex to each slotted tab\n    this.tabs.forEach((tab) => {\n      tab.setAttribute(\"role\", \"tab\");\n      tab.tabIndex = -1;\n    });\n\n    const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n    if (preselectedTab !== -1) {\n      this.selectedTab = preselectedTab;\n      this.tabs[preselectedTab].tabIndex = 0;\n      this.onTabSelected();\n    } else {\n      this.tabs[0].tabIndex = 0;\n    }\n\n    this.resizeObserver.observe(this.nav);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): HTMLZNavigationTabsElement {\n    return (\n      <Host\n        class={{\n          \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n          \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n        }}\n        scrollable={this.canNavigate}\n      >\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateBackwards.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigatePrev}\n          aria-label=\"Mostra elementi precedenti\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n            width={16}\n            height={16}\n          />\n        </button>\n\n        <nav\n          role=\"tablist\"\n          aria-label={this.htmlAriaLabel || undefined}\n          ref={(el) => (this.nav = el ?? this.nav)}\n          onScroll={this.checkScrollEnabled.bind(this)}\n          aria-orientation={this.orientation}\n        >\n          <slot></slot>\n        </nav>\n\n        <button\n          class=\"navigation-button\"\n          onClick={this.navigateForward.bind(this)}\n          tabIndex={-1}\n          disabled={!this.canNavigateNext}\n          aria-label=\"Mostra elementi successivi\"\n          hidden={!this.canNavigate}\n        >\n          <z-icon\n            name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n            width={16}\n            height={16}\n          />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6JAAA,MAAMA,EAAY,IAAM,sjI,MCwBXC,EAAeC,EAAA,MAAAD,UAAAE,EAJ5B,WAAAC,CAAAC,G,+EAeEC,KAAAC,YAAeC,EAA0BC,WAMzCH,KAAAI,KAAQC,EAAmBC,IAQ3BN,KAAAO,YAAsBC,UAgCdR,KAAAS,WAAaD,SA0StB,CAhSC,aAAIE,GACF,OAAOV,KAAKC,aAAeC,EAA0BC,WAAa,OAAS,K,CAM7E,aAAIQ,GACF,OAAOX,KAAKC,aAAeC,EAA0BC,WAAa,QAAU,Q,CAG9E,QAAIS,GACF,OAAOC,MAAMC,KAAKd,KAAKe,IAAIC,S,CAQrB,WAAAC,CAAYC,GAClB,MAAMC,EAAYD,EAAWE,cAE7B,IAAKD,EAAW,CACd,M,CAGFE,YAAW,KACT,MAAMC,EAAetB,KAAKC,cAAgBC,EAA0BC,WAEpE,MAAMoB,EAAgBJ,EAAUK,wBAChC,MAAMC,EAAUP,EAAWM,wBAE3B,MAAME,EAASJ,EAAeG,EAAQE,KAAOJ,EAAcI,KAAOF,EAAQG,IAAML,EAAcK,IAC9F,MAAMC,EAAgBP,EAAeH,EAAUW,YAAcX,EAAUY,aACvE,MAAMC,EAAUV,EAAeJ,EAAWY,YAAcZ,EAAWa,aACnE,MAAME,EAAeP,EAASG,EAAgB,EAAIG,EAAU,EAE5Db,EAAUe,SAAS,CACjB,CAACZ,EAAe,OAAS,OAAQH,EAAUG,EAAe,aAAe,aAAeW,EACxFE,SAAU,UACV,GACD,I,CAMG,iBAAAC,GACNpC,KAAKe,IAAIsB,SAAS,CAChB,CAACrC,KAAKU,UAAU4B,eAAgB,EAAItC,KAAKe,IAAI,SAASf,KAAKW,aAAe,EAC1EwB,SAAU,U,CAON,eAAAI,GACNvC,KAAKe,IAAIsB,SAAS,CAChB,CAACrC,KAAKU,UAAU4B,eAAgBtC,KAAKe,IAAI,SAASf,KAAKU,aAAeV,KAAKe,IAAI,SAASf,KAAKW,aAAe,EAC5GwB,SAAU,U,CAON,iBAAAK,CAAkBC,GACxB,OAAOC,OAAOC,OAAOC,GAA8BC,SAASJ,EAAEK,I,CAMxD,kBAAAC,GACN,IAAK/C,KAAKe,IAAK,CACb,M,CAGFf,KAAKgD,YAAchD,KAAKe,IAAI,SAASf,KAAKW,aAAeX,KAAKe,IAAI,SAASf,KAAKW,Y,CAOlF,kBAAAsC,GACE,IAAKjD,KAAKe,IAAK,CACb,M,CAGFf,KAAKkD,gBACHlD,KAAKe,IAAI,SAASf,KAAKU,aAAeV,KAAKe,IAAI,SAASf,KAAKW,aAAeX,KAAKe,IAAI,SAASf,KAAKW,aACrGX,KAAKmD,gBAAkBnD,KAAKe,IAAI,SAASf,KAAKU,aAAe,C,CAO/D,aAAA0C,GACEpD,KAAKY,KAAKyC,SAAQ,CAACC,EAAKC,KACtB,MAAMC,EAAQF,EAAIG,cAAc,UAChC,MAAMC,EAAaF,IAAK,MAALA,SAAK,SAALA,EAAOG,KAAKC,QAAQ,UAAW,IAClD,GAAIL,IAAMvD,KAAKO,YAAa,CAC1B+C,EAAIO,aAAa,gBAAiB,SAClCP,EAAIQ,UAAW,EACf,GAAIN,EAAO,CACTA,EAAMG,KAAOD,C,CAGf,M,CAGF,GAAIF,EAAO,CACTA,EAAMG,KAAO,GAAGD,U,CAElBJ,EAAIO,aAAa,gBAAiB,OAAO,IAE3C7D,KAAK+D,SAASC,KAAKhE,KAAKO,aACxB,GAAIP,KAAKO,cAAgBC,UAAW,CAClCR,KAAKiB,YAAYjB,KAAKY,KAAKZ,KAAKO,a,EASpC,cAAA0D,CAAeC,GACb,MAAMC,EAAcD,EAAME,OAAuBC,QAAqB,gBACtE,IAAKrE,KAAKY,KAAK0D,MAAMC,GAAUA,EAAMC,SAASL,KAAc,CAC1D,M,CAGFnE,KAAKO,YAAcP,KAAKY,KAAK6D,QAAQN,E,CAOvC,YAAAO,CAAaR,GACX,MAAMS,EAAU3E,KAAKY,KAAKgE,WAAWtB,GAAQA,EAAIkB,SAASN,EAAME,UAChE,GAAIO,KAAY,EAAI,CAClB,M,CAGF,GAAI3E,KAAKO,cAAgBC,UAAW,CAClCR,KAAKY,KAAKZ,KAAKO,aAAauD,UAAW,C,CAEzC9D,KAAKS,WAAakE,EAClB3E,KAAKY,KAAKZ,KAAKS,YAAYqD,UAAW,EACtC9D,KAAKiB,YAAYjB,KAAKY,KAAKZ,KAAKS,Y,CAOlC,mBAAAoE,CAAoBX,GAClB,IAAKlE,KAAKY,KAAK0D,MAAMhB,GAAQA,EAAIkB,SAASN,EAAME,YAA4BpE,KAAKwC,kBAAkB0B,GAAQ,CACzG,OAAO,I,CAGTA,EAAMY,iBACN,GACGZ,EAAMpB,MAAQF,EAA6BmC,OAAS/E,KAAKC,aAAeC,EAA0BC,YAClG+D,EAAMpB,MAAQF,EAA6BoC,MAAQhF,KAAKC,aAAeC,EAA0B+E,SAClG,CAEAjF,KAAKS,aACL,GAAIT,KAAKS,YAAcT,KAAKY,KAAKsE,OAAQ,CACvClF,KAAKS,WAAa,C,OAEf,GACJyD,EAAMpB,MAAQF,EAA6BuC,MAAQnF,KAAKC,aAAeC,EAA0BC,YACjG+D,EAAMpB,MAAQF,EAA6BwC,IAAMpF,KAAKC,aAAeC,EAA0B+E,SAChG,CAEAjF,KAAKS,aACL,GAAIT,KAAKS,WAAa,EAAG,CACvBT,KAAKS,WAAaT,KAAKY,KAAKsE,OAAS,C,EAIzC,GACElF,KAAKY,KAAKZ,KAAKS,YAAY4E,aAAa,aACxCrF,KAAKY,KAAKZ,KAAKS,YAAY6E,aAAa,cAAgB,QACxD,CACA,OAAOtF,KAAK6E,oBAAoBX,E,CAGlClE,KAAKY,KAAKZ,KAAKS,YAAY8E,QAC3BvF,KAAKiB,YAAYjB,KAAKY,KAAKZ,KAAKS,Y,CAOlC,aAAA+E,CAActB,G,MACZ,IAAKlE,KAAKY,KAAK0D,MAAMhB,GAAQA,EAAIkB,SAASN,EAAMuB,iBAAgC,CAC9EzF,KAAKY,MAAK8E,EAAA1F,KAAKO,eAAW,MAAAmF,SAAA,EAAAA,EAAI,GAAG5B,SAAW,EAC5C9D,KAAKS,WAAaD,S,EAItB,iBAAAmF,GACE3F,KAAK4F,eAAiB,IAAIC,gBAAe,IAAM7F,KAAK+C,sB,CAGtD,gBAAA+C,G,MAEE9F,KAAKY,KAAKyC,SAASC,IACjBA,EAAIO,aAAa,OAAQ,OACzBP,EAAIQ,UAAW,CAAE,IAGnB,MAAMiC,GAAiBL,EAAA1F,KAAKO,eAAW,MAAAmF,SAAA,EAAAA,EAAI1F,KAAKY,KAAKgE,WAAWtB,GAAQA,EAAI0C,eAAiB,SAC7F,GAAID,KAAmB,EAAI,CACzB/F,KAAKO,YAAcwF,EACnB/F,KAAKY,KAAKmF,GAAgBjC,SAAW,EACrC9D,KAAKoD,e,KACA,CACLpD,KAAKY,KAAK,GAAGkD,SAAW,C,CAG1B9D,KAAK4F,eAAeK,QAAQjG,KAAKe,I,CAGnC,oBAAAmF,G,OACER,EAAA1F,KAAK4F,kBAAc,MAAAF,SAAA,SAAAA,EAAES,Y,CAGvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAxD,IAAA,2CACHyD,MAAO,CACL,gBAAiBvG,KAAKI,OAASC,EAAmBmG,MAClD,gBAAiBxG,KAAKI,OAASC,EAAmBmG,OAEpDC,WAAYzG,KAAKgD,aAEjBqD,EAAA,UAAAvD,IAAA,2CACEyD,MAAM,oBACNG,QAAS1G,KAAKoC,kBAAkBuE,KAAK3G,MACrC8D,UAAU,EACV8C,UAAW5G,KAAKmD,gBAAe,aACpB,6BACX0D,QAAS7G,KAAKgD,aAEdqD,EAAA,UAAAvD,IAAA,2CACEa,KAAM3D,KAAKC,cAAgBC,EAA0BC,WAAa,eAAiB,aACnF2G,MAAO,GACPC,OAAQ,MAIZV,EAAA,OAAAvD,IAAA,2CACEkE,KAAK,UAAS,aACFhH,KAAKiH,eAAiBzG,UAClC0G,IAAMC,GAAQnH,KAAKe,IAAMoG,IAAE,MAAFA,SAAE,EAAFA,EAAMnH,KAAKe,IACpCqG,SAAUpH,KAAKiD,mBAAmB0D,KAAK3G,MAAK,mBAC1BA,KAAKC,aAEvBoG,EAAA,QAAAvD,IAAA,8CAGFuD,EAAA,UAAAvD,IAAA,2CACEyD,MAAM,oBACNG,QAAS1G,KAAKuC,gBAAgBoE,KAAK3G,MACnC8D,UAAU,EACV8C,UAAW5G,KAAKkD,gBAAe,aACpB,6BACX2D,QAAS7G,KAAKgD,aAEdqD,EAAA,UAAAvD,IAAA,2CACEa,KAAM3D,KAAKC,cAAgBC,EAA0BC,WAAa,gBAAkB,eACpF2G,MAAO,GACPC,OAAQ,M","ignoreList":[]}

package/dist/components/z-notification.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as o,createEvent as i,h as e,Host as n,transformTag as a}from"@stencil/core/internal/client";import{d as s}from"./index3.js";const c=()=>`:host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-inverse-success)}:host([type="warning"]){background:var(--color-inverse-warning)}:host([type="error"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-default-success)}:host([type="warning"]) .status-icon{fill:var(--color-default-warning)}:host([type="error"]) .status-icon{fill:var(--color-default-error)}:host([borderposition="bottom"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition="top"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{width:100%;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.333;outline:none}.action-button:focus-visible{box-shadow:var(--shadow-focus-primary)}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}`;const r=t(class t extends o{handleActionButtonClick(t){t.preventDefault();this.notificationAction.emit()}handleCloseButtonClick(t){t.preventDefault();this.notificationClose.emit()}constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.notificationAction=i(this,"notificationAction",7);this.notificationClose=i(this,"notificationClose",7);this.showclose=false;this.showshadow=false;this.sticky=false;this.borderposition="bottom";this.handleActionButtonClick=this.handleActionButtonClick.bind(this);this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}render(){var t;return e(n,{key:"3cec1cd6ceb6f0bc28d90b1722d70a58812b76aa"},e("div",{key:"41318362f0392235d7d6c7e5c306c578aed676e7",class:"main-container"},this.contenticonname&&e("z-icon",{key:"ddf7058dab1d753edccd2d8176ae4cdbceefaf5e",class:"status-icon",name:this.contenticonname,width:16,height:16}),e("div",{key:"8bd106ce352bf6c62a28bbaa6e54a5ed87f9ce09",class:"content-container"},e("div",{key:"3f17ba167b3261565f7ab0d2da7671325746cca8",class:"content-text"},e("slot",{key:"1da9f02e9a69a51701423c3dbab6e6247f945069"})),!!((t=this.actiontext)===null||t===void 0?void 0:t.trim())&&e("button",{key:"8935fad3f17059b87853ff8a8ad738e4a6525535",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&e("button",{key:"a994ea73360e1844c60fedc8ed657e100f912330",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},e("z-icon",{key:"dc0b76a98ad6d273f6164c0f09d9574f45f20a16",name:"multiply-circle",width:16,height:16}))))}static get style(){return c()}},[257,"z-notification",{contenticonname:[1],actiontext:[1],type:[513],showclose:[4],showshadow:[516],sticky:[516],borderposition:[513]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-notification","z-icon"];t.forEach((t=>{switch(t){case"z-notification":if(!customElements.get(a(t))){customElements.define(a(t),r)}break;case"z-icon":if(!customElements.get(a(t))){s()}break}}))}const d=r;const f=l;export{d as ZNotification,f as defineCustomElement};
+import{p as t,H as o,c as i,h as e,d as n,t as a}from"./p-RmbDDbWd.js";import{d as s}from"./p-CbXEdwLi.js";const c=()=>`:host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-inverse-success)}:host([type="warning"]){background:var(--color-inverse-warning)}:host([type="error"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-default-success)}:host([type="warning"]) .status-icon{fill:var(--color-default-warning)}:host([type="error"]) .status-icon{fill:var(--color-default-error)}:host([borderposition="bottom"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition="top"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{width:100%;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.333;outline:none}.action-button:focus-visible{box-shadow:var(--shadow-focus-primary)}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}`;const r=t(class t extends o{handleActionButtonClick(t){t.preventDefault();this.notificationAction.emit()}handleCloseButtonClick(t){t.preventDefault();this.notificationClose.emit()}constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.notificationAction=i(this,"notificationAction",7);this.notificationClose=i(this,"notificationClose",7);this.showclose=false;this.showshadow=false;this.sticky=false;this.borderposition="bottom";this.handleActionButtonClick=this.handleActionButtonClick.bind(this);this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}render(){var t;return e(n,{key:"3cec1cd6ceb6f0bc28d90b1722d70a58812b76aa"},e("div",{key:"41318362f0392235d7d6c7e5c306c578aed676e7",class:"main-container"},this.contenticonname&&e("z-icon",{key:"ddf7058dab1d753edccd2d8176ae4cdbceefaf5e",class:"status-icon",name:this.contenticonname,width:16,height:16}),e("div",{key:"8bd106ce352bf6c62a28bbaa6e54a5ed87f9ce09",class:"content-container"},e("div",{key:"3f17ba167b3261565f7ab0d2da7671325746cca8",class:"content-text"},e("slot",{key:"1da9f02e9a69a51701423c3dbab6e6247f945069"})),!!((t=this.actiontext)===null||t===void 0?void 0:t.trim())&&e("button",{key:"8935fad3f17059b87853ff8a8ad738e4a6525535",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&e("button",{key:"a994ea73360e1844c60fedc8ed657e100f912330",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},e("z-icon",{key:"dc0b76a98ad6d273f6164c0f09d9574f45f20a16",name:"multiply-circle",width:16,height:16}))))}static get style(){return c()}},[257,"z-notification",{contenticonname:[1],actiontext:[1],type:[513],showclose:[4],showshadow:[516],sticky:[516],borderposition:[513]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-notification","z-icon"];t.forEach((t=>{switch(t){case"z-notification":if(!customElements.get(a(t))){customElements.define(a(t),r)}break;case"z-icon":if(!customElements.get(a(t))){s()}break}}))}const d=r;const f=l;export{d as ZNotification,f as defineCustomElement};
 //# sourceMappingURL=z-notification.js.map

package/dist/components/z-notification.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZNotification","__stencil_proxyCustomElement","HTMLElement","handleActionButtonClick","e","preventDefault","this","notificationAction","emit","handleCloseButtonClick","notificationClose","constructor","registerHost","showclose","showshadow","sticky","borderposition","bind","render","h","Host","key","class","contenticonname","name","width","height","_a","actiontext","trim","type","onClick"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-notification--top-offset: The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n   * @prop --z-notification--content-max-width: The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.\n   * @prop --z-notification--inline-padding: The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).\n   */\n  --z-notification--top-offset: 0;\n  --z-notification--content-max-width: 100%;\n  --z-notification--inline-padding: ;\n\n  display: block;\n  width: 100%;\n}\n\n.main-container {\n  display: flex;\n  max-width: var(--z-notification--content-max-width);\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));\n  margin: 0 auto;\n  background-color: transparent;\n  font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  width: 100%;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n  outline: none;\n}\n\n.action-button:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification implements ComponentInterface {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        <div class=\"main-container\">\n          {this.contenticonname && (\n            <z-icon\n              class=\"status-icon\"\n              name={this.contenticonname}\n              width={16}\n              height={16}\n            />\n          )}\n          <div class=\"content-container\">\n            <div class=\"content-text\">\n              <slot></slot>\n            </div>\n            {!!this.actiontext?.trim() && (\n              <button\n                class=\"action-button\"\n                type=\"button\"\n                onClick={this.handleActionButtonClick}\n              >\n                {this.actiontext}\n              </button>\n            )}\n          </div>\n          {this.showclose && (\n            <button\n              class=\"close-button\"\n              type=\"button\"\n              onClick={this.handleCloseButtonClick}\n            >\n              <z-icon\n                name=\"multiply-circle\"\n                width={16}\n                height={16}\n              />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wKAAA,MAAMA,EAAY,IAAM,wkE,MCYXC,EAAaC,EAAA,MAAAD,UAAAE,EAoChB,uBAAAC,CAAwBC,GAC9BA,EAAEC,iBACFC,KAAKC,mBAAmBC,M,CAOlB,sBAAAC,CAAuBL,GAC7BA,EAAEC,iBACFC,KAAKI,kBAAkBF,M,CAGzB,WAAAG,CAAAC,G,8KAnCAN,KAAAO,UAAsB,MAOtBP,KAAAQ,WAAuB,MAIvBR,KAAAS,OAAmB,MAInBT,KAAAU,eAAoC,SAqBlCV,KAAKH,wBAA0BG,KAAKH,wBAAwBc,KAAKX,MACjEA,KAAKG,uBAAyBH,KAAKG,uBAAuBQ,KAAKX,KAChE,CAED,MAAAY,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACRhB,KAAKiB,iBACJJ,EAAA,UAAAE,IAAA,2CACEC,MAAM,cACNE,KAAMlB,KAAKiB,gBACXE,MAAO,GACPC,OAAQ,KAGZP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,kDAECM,EAAArB,KAAKsB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,SAClBV,EAAA,UAAAE,IAAA,2CACEC,MAAM,gBACNQ,KAAK,SACLC,QAASzB,KAAKH,yBAEbG,KAAKsB,aAIXtB,KAAKO,WACJM,EAAA,UAAAE,IAAA,2CACEC,MAAM,eACNQ,KAAK,SACLC,QAASzB,KAAKG,wBAEdU,EAAA,UAAAE,IAAA,2CACEG,KAAK,kBACLC,MAAO,GACPC,OAAQ,O","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZNotification","__stencil_proxyCustomElement","HTMLElement","handleActionButtonClick","e","preventDefault","this","notificationAction","emit","handleCloseButtonClick","notificationClose","constructor","registerHost","showclose","showshadow","sticky","borderposition","bind","render","h","Host","key","class","contenticonname","name","width","height","_a","actiontext","trim","type","onClick"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-notification--top-offset: The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n   * @prop --z-notification--content-max-width: The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.\n   * @prop --z-notification--inline-padding: The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).\n   */\n  --z-notification--top-offset: 0;\n  --z-notification--content-max-width: 100%;\n  --z-notification--inline-padding: ;\n\n  display: block;\n  width: 100%;\n}\n\n.main-container {\n  display: flex;\n  max-width: var(--z-notification--content-max-width);\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));\n  margin: 0 auto;\n  background-color: transparent;\n  font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  width: 100%;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n  outline: none;\n}\n\n.action-button:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification implements ComponentInterface {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        <div class=\"main-container\">\n          {this.contenticonname && (\n            <z-icon\n              class=\"status-icon\"\n              name={this.contenticonname}\n              width={16}\n              height={16}\n            />\n          )}\n          <div class=\"content-container\">\n            <div class=\"content-text\">\n              <slot></slot>\n            </div>\n            {!!this.actiontext?.trim() && (\n              <button\n                class=\"action-button\"\n                type=\"button\"\n                onClick={this.handleActionButtonClick}\n              >\n                {this.actiontext}\n              </button>\n            )}\n          </div>\n          {this.showclose && (\n            <button\n              class=\"close-button\"\n              type=\"button\"\n              onClick={this.handleCloseButtonClick}\n            >\n              <z-icon\n                name=\"multiply-circle\"\n                width={16}\n                height={16}\n              />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,IAAM,wkE,MCYXC,EAAaC,EAAA,MAAAD,UAAAE,EAoChB,uBAAAC,CAAwBC,GAC9BA,EAAEC,iBACFC,KAAKC,mBAAmBC,M,CAOlB,sBAAAC,CAAuBL,GAC7BA,EAAEC,iBACFC,KAAKI,kBAAkBF,M,CAGzB,WAAAG,CAAAC,G,8KAnCAN,KAAAO,UAAsB,MAOtBP,KAAAQ,WAAuB,MAIvBR,KAAAS,OAAmB,MAInBT,KAAAU,eAAoC,SAqBlCV,KAAKH,wBAA0BG,KAAKH,wBAAwBc,KAAKX,MACjEA,KAAKG,uBAAyBH,KAAKG,uBAAuBQ,KAAKX,KAChE,CAED,MAAAY,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACRhB,KAAKiB,iBACJJ,EAAA,UAAAE,IAAA,2CACEC,MAAM,cACNE,KAAMlB,KAAKiB,gBACXE,MAAO,GACPC,OAAQ,KAGZP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,kDAECM,EAAArB,KAAKsB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,SAClBV,EAAA,UAAAE,IAAA,2CACEC,MAAM,gBACNQ,KAAK,SACLC,QAASzB,KAAKH,yBAEbG,KAAKsB,aAIXtB,KAAKO,WACJM,EAAA,UAAAE,IAAA,2CACEC,MAAM,eACNQ,KAAK,SACLC,QAASzB,KAAKG,wBAEdU,EAAA,UAAAE,IAAA,2CACEG,KAAK,kBACLC,MAAO,GACPC,OAAQ,O","ignoreList":[]}

package/dist/components/z-offcanvas.js

@@ -1,2 +1,2 @@
-import{Z as o,d as s}from"./index11.js";const t=o;const n=s;export{t as ZOffcanvas,n as defineCustomElement};
+import{Z as o,d as s}from"./p-DL2QAfIP.js";const t=o;const p=s;export{t as ZOffcanvas,p as defineCustomElement};
 //# sourceMappingURL=z-offcanvas.js.map

package/dist/components/z-pagination.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,Host as o,transformTag as s}from"@stencil/core/internal/client";import{I as e}from"./index2.js";import{d as r}from"./index4.js";import{d as l}from"./index3.js";import{d as p}from"./index6.js";import{d as g}from"./index7.js";const h=()=>`z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;--z-pagination-background-color:var(--color-background);--z-pagination-background-color-hover:var(--color-surface01);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(--z-pagination-background-color);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,     color 0.15s ease-out,     border-bottom-color 0.15s ease-out,     font-size 0.15s ease-in-out,     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}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(--z-pagination-background-color-hover)}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 c=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.pageChanged=a(this,"pageChanged",7);this.navArrows=true;this.skip=0;this.edges=false;this.currentPage=1;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(){var t,i;const a=this.host.querySelector(".pages-container");const n=this.host.querySelector(`[data-page="${this.currentPage}"]`);const o=this.host.querySelector(".navigation-button");if(!n||!a){return}const s=a.getBoundingClientRect().width;const e=n.getBoundingClientRect().width;const r=(i=(t=o===null||o===void 0?void 0:o.getBoundingClientRect())===null||t===void 0?void 0:t.width)!==null&&i!==void 0?i:0;a.scrollLeft=this.currentPage*e-r-s/2}selectPage(t){this.currentPage=Math.min(Math.max(t,1),this.totalPages)}renderPage(t){return n("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 n("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=>n("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 n("button",{class:"navigation-button",type:"button","aria-label":"Vai alla pagina precedente",title:"Vai alla pagina precedente",disabled:this.currentPage===1,onClick:()=>this.selectPage(this.currentPage-1)},n("z-icon",{name:"chevron-left"}))}renderForwardButton(){return n("button",{class:"navigation-button",type:"button","aria-label":"Vai alla prossima pagina",title:"Vai alla prossima pagina",disabled:this.currentPage===this.totalPages,onClick:()=>this.selectPage(this.currentPage+1)},n("z-icon",{name:"chevron-right"}))}renderMobile(){const t=this.getPagesChunks();return[this.label&&n("span",{class:"page-label body-1-sb"},this.label),n("div",{class:"pagination-bar"},this.renderBackButton(),!this.goToPage&&n("div",{class:"pages-container",role:"navigation",tabIndex:-1},t.length>0&&t.map((t=>n("div",{class:"pages-chunk"},t.map((t=>this.renderPage(t))))))),this.goToPage&&n("form",{class:"mobile-go-to-page",onSubmit:t=>{t.preventDefault();this.selectPage(this.goToPageValue)}},n("z-input",{class:"go-to-page-input",type:e.NUMBER,min:1,max:this.totalPages,message:false,onInput:t=>{this.goToPageValue=t.target.value},placeholder:this.currentPage.toString(),hasclearicon:false}),n("span",null,`/${this.totalPages}`)),this.renderForwardButton())]}componentDidLoad(){this.setVisiblePages()}componentDidRender(){if(this.split){this.edges=false}this.setPagesContainerWidth();this.setMobile();this.scrollToPage()}render(){if(this.isMobile){return n(o,null,this.renderMobile())}return n(o,null,n("div",{class:"pagination-bar"},this.label&&n("span",{class:"page-label body-1-sb"},this.label),this.edges&&n("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&&n("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(),n("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&&n("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&&n("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&&n("div",{class:"go-to-page"},n("span",{class:"z-label body-5-sb"},"Vai a pagina:"),n("div",{class:"inputs"},n("z-input",{class:"go-to-page-input",type:e.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)}),n("z-button",{disabled:!this.goToPageValue,title:"Vai alla pagina inserita",onClick:()=>this.selectPage(this.goToPageValue)},"vai"))))}get host(){return this}static get watchers(){return{_visiblePages:[{setPagesContainerWidth:0}],visiblePages:[{setVisiblePages:0}],currentPage:[{onPageChanged:0}],split:[{onSplitChanged:0}]}}static get style(){return h()}},[0,"z-pagination",{label:[1],navArrows:[4,"nav-arrows"],totalPages:[2,"total-pages"],skip:[2],edges:[4],split:[2],visiblePages:[2,"visible-pages"],currentPage:[1026,"current-page"],goToPage:[4,"go-to-page"],_visiblePages:[32],isMobile:[32],goToPageValue:[32]},[[9,"resize","onResize"]],{_visiblePages:[{setPagesContainerWidth:0}],visiblePages:[{setVisiblePages:0}],currentPage:[{onPageChanged:0}],split:[{onSplitChanged:0}]}]);function u(){if(typeof customElements==="undefined"){return}const t=["z-pagination","z-button","z-icon","z-input","z-input-message"];t.forEach((t=>{switch(t){case"z-pagination":if(!customElements.get(s(t))){customElements.define(s(t),c)}break;case"z-button":if(!customElements.get(s(t))){r()}break;case"z-icon":if(!customElements.get(s(t))){l()}break;case"z-input":if(!customElements.get(s(t))){p()}break;case"z-input-message":if(!customElements.get(s(t))){g()}break}}))}const d=c;const b=u;export{d as ZPagination,b as defineCustomElement};
+import{p as t,H as i,c as a,h as n,d as s,t as o}from"./p-RmbDDbWd.js";import{I as e}from"./p-DdetsoIY.js";import{d as r}from"./p-BAguKZnb.js";import{d as l}from"./p-CbXEdwLi.js";import{d as p}from"./p-LXvmZzZa.js";import{d as g}from"./p-CdBqnUF6.js";const h=()=>`z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;--z-pagination-background-color:var(--color-background);--z-pagination-background-color-hover:var(--color-surface01);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(--z-pagination-background-color);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,     color 0.15s ease-out,     border-bottom-color 0.15s ease-out,     font-size 0.15s ease-in-out,     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}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(--z-pagination-background-color-hover)}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 c=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.pageChanged=a(this,"pageChanged",7);this.navArrows=true;this.skip=0;this.edges=false;this.currentPage=1;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(){var t,i;const a=this.host.querySelector(".pages-container");const n=this.host.querySelector(`[data-page="${this.currentPage}"]`);const s=this.host.querySelector(".navigation-button");if(!n||!a){return}const o=a.getBoundingClientRect().width;const e=n.getBoundingClientRect().width;const r=(i=(t=s===null||s===void 0?void 0:s.getBoundingClientRect())===null||t===void 0?void 0:t.width)!==null&&i!==void 0?i:0;a.scrollLeft=this.currentPage*e-r-o/2}selectPage(t){this.currentPage=Math.min(Math.max(t,1),this.totalPages)}renderPage(t){return n("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 n("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=>n("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 n("button",{class:"navigation-button",type:"button","aria-label":"Vai alla pagina precedente",title:"Vai alla pagina precedente",disabled:this.currentPage===1,onClick:()=>this.selectPage(this.currentPage-1)},n("z-icon",{name:"chevron-left"}))}renderForwardButton(){return n("button",{class:"navigation-button",type:"button","aria-label":"Vai alla prossima pagina",title:"Vai alla prossima pagina",disabled:this.currentPage===this.totalPages,onClick:()=>this.selectPage(this.currentPage+1)},n("z-icon",{name:"chevron-right"}))}renderMobile(){const t=this.getPagesChunks();return[this.label&&n("span",{class:"page-label body-1-sb"},this.label),n("div",{class:"pagination-bar"},this.renderBackButton(),!this.goToPage&&n("div",{class:"pages-container",role:"navigation",tabIndex:-1},t.length>0&&t.map((t=>n("div",{class:"pages-chunk"},t.map((t=>this.renderPage(t))))))),this.goToPage&&n("form",{class:"mobile-go-to-page",onSubmit:t=>{t.preventDefault();this.selectPage(this.goToPageValue)}},n("z-input",{class:"go-to-page-input",type:e.NUMBER,min:1,max:this.totalPages,message:false,onInput:t=>{this.goToPageValue=t.target.value},placeholder:this.currentPage.toString(),hasclearicon:false}),n("span",null,`/${this.totalPages}`)),this.renderForwardButton())]}componentDidLoad(){this.setVisiblePages()}componentDidRender(){if(this.split){this.edges=false}this.setPagesContainerWidth();this.setMobile();this.scrollToPage()}render(){if(this.isMobile){return n(s,null,this.renderMobile())}return n(s,null,n("div",{class:"pagination-bar"},this.label&&n("span",{class:"page-label body-1-sb"},this.label),this.edges&&n("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&&n("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(),n("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&&n("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&&n("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&&n("div",{class:"go-to-page"},n("span",{class:"z-label body-5-sb"},"Vai a pagina:"),n("div",{class:"inputs"},n("z-input",{class:"go-to-page-input",type:e.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)}),n("z-button",{disabled:!this.goToPageValue,title:"Vai alla pagina inserita",onClick:()=>this.selectPage(this.goToPageValue)},"vai"))))}get host(){return this}static get watchers(){return{_visiblePages:[{setPagesContainerWidth:0}],visiblePages:[{setVisiblePages:0}],currentPage:[{onPageChanged:0}],split:[{onSplitChanged:0}]}}static get style(){return h()}},[0,"z-pagination",{label:[1],navArrows:[4,"nav-arrows"],totalPages:[2,"total-pages"],skip:[2],edges:[4],split:[2],visiblePages:[2,"visible-pages"],currentPage:[1026,"current-page"],goToPage:[4,"go-to-page"],_visiblePages:[32],isMobile:[32],goToPageValue:[32]},[[9,"resize","onResize"]],{_visiblePages:[{setPagesContainerWidth:0}],visiblePages:[{setVisiblePages:0}],currentPage:[{onPageChanged:0}],split:[{onSplitChanged:0}]}]);function u(){if(typeof customElements==="undefined"){return}const t=["z-pagination","z-button","z-icon","z-input","z-input-message"];t.forEach((t=>{switch(t){case"z-pagination":if(!customElements.get(o(t))){customElements.define(o(t),c)}break;case"z-button":if(!customElements.get(o(t))){r()}break;case"z-icon":if(!customElements.get(o(t))){l()}break;case"z-input":if(!customElements.get(o(t))){p()}break;case"z-input-message":if(!customElements.get(o(t))){g()}break}}))}const b=c;const d=u;export{b as ZPagination,d as defineCustomElement};
 //# sourceMappingURL=z-pagination.js.map