@zanichelli/albe-web-components 20.0.5 → 20.1.0

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

@@ -1 +0,0 @@
-{"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":[]}

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

@@ -1 +0,0 @@
-{"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":[]}

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

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

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

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

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

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

package/dist/components/z-range-picker.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZRangePicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","mode","ZRangePickerMode","DATE","firstPickerReadOnly","lastPickerReadOnly","firstPickerPlaceholder","lastPickerPlaceholder","flatpickrPosition","ZDatePickerPosition","BOTTOM","activeInput","firstInputError","lastInputError","handleClick","getFocusedInput","handleKeyDown","ev","currentPicker","firstPicker","lastPicker","key","document","activeElement","classList","contains","rangePickerId","_a","close","_b","open","isCrossIconEntered","_c","clear","printDate","_d","selectedDates","_e","_f","isPrevArrowEntered","isNextArrowEntered","arrowPressed","preventDefault","changeMonth","componentDidLoad","setupPickers","setupFirstPickersReadOnly","set","setupLastPickersReadOnly","config","enableTime","DATE_TIME","locale","Italian","allowInput","wrap","dateFormat","ariaDateFormat","minuteIncrement","time_24hr","onValueUpdate","firstInputActive","firstDate","lastDate","setRangeStyle","onChange","_selectedDates","_dateStr","instance","onDateSelect","input","onOpen","setAriaOptions","element","setFlatpickrPosition","onYearChange","onMonthChange","onKeyDown","flatpickr","Object","assign","clickOpens","appendTo","querySelector","querySelectorAll","forEach","innerHTML","trim","charAt","disableDates","date","index","calendar","getElementsByClassName","Array","from","calendarDate","getDateWithoutTime","replaceMonths","ariaLabel","breakpoint","inRange","toggle","formatDate","firstDateString","lastDateString","dateSelect","emit","newDate","Date","getFullYear","getMonth","getDate","time","month","split","months","Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre","pieces","replace","parseInt","focusedZInput","closest","hasFirstDate","length","hasLastDate","onStopTyping","value","text","detail","englishData","englishParsedData","join","isValidDate","validateDate","parse","toString","setDate","render","zInputProps","type","InputType","TEXT","icon","tabindex","message","bind","h","class","placeholder","readonly","firstAriaLabel","label","firstLabel","status","InputStatus","ERROR","onStartTyping","secondAriaLabel","secondLabel"],"sources":["src/components/date-picker/styles.css?tag=z-range-picker","src/components/date-picker/z-range-picker/index.tsx"],"sourcesContent":["@import \"~flatpickr/dist/flatpickr.min.css\";\n@import \"~flatpickr/dist/plugins/monthSelect/style.css\";\n\n/* stylelint-disable selector-class-pattern -- we have no control over flatpickr css classes naming */\n\n:host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-range-picker--toggle-height: 0;\n}\n\nz-date-picker {\n  position: relative;\n}\n\nz-date-picker > div > * {\n  cursor: pointer !important;\n}\n\nz-range-picker {\n  position: relative;\n}\n\n.flatpickr-toggle-container {\n  width: fit-content;\n}\n\n.range-pickers-container > div {\n  position: relative;\n}\n\n.hidden-input {\n  position: absolute;\n  bottom: 0;\n  width: 0;\n  height: 0;\n  visibility: hidden !important;\n}\n\n/* Calendar container selectors */\n.flatpickr-calendar::before,\n.flatpickr-calendar::after {\n  display: none;\n}\n\n.flatpickr-calendar {\n  position: absolute !important;\n  top: var(--z-range-picker--toggle-height) !important;\n  left: 0 !important;\n  padding-top: calc(var(--space-unit) * 2);\n  border-radius: 2px;\n  box-shadow: var(--shadow-2);\n  font-family: var(--font-family-sans) !important;\n}\n\n.months.top > .flatpickr-calendar {\n  top: -288px !important;\n}\n\n.date.top > .flatpickr-calendar,\n.date.top > div > .flatpickr-calendar {\n  top: -401px !important;\n}\n\n.date-time.top > .flatpickr-calendar,\n.date-time.top > div > .flatpickr-calendar {\n  top: -523px !important;\n}\n\n.flatpickr-calendar,\n.flatpickr-innerContainer,\n.flatpickr-days,\n.dayContainer,\n.flatpickr-rContainer,\n.flatpickr-monthSelect-months {\n  width: calc(var(--space-unit) * 42) !important;\n  max-width: calc(var(--space-unit) * 42) !important;\n}\n\n.flatpickr-monthSelect-months {\n  box-sizing: border-box;\n  padding: 0 !important;\n  margin: calc(var(--space-unit) * 2) 0 !important;\n}\n\n/* Months and year row containers selectors */\n.flatpickr-months {\n  position: relative;\n  height: calc(var(--space-unit) * 6) !important;\n  align-items: center;\n  margin-bottom: var(--space-unit) 0 !important;\n}\n\n.flatpickr-month {\n  overflow: visible !important;\n  height: calc(var(--space-unit) * 6) !important;\n}\n\n.flatpickr-current-month {\n  left: 0 !important;\n  display: flex !important;\n  width: fill-available;\n  height: calc(var(--space-unit) * 6);\n  align-items: baseline;\n  justify-content: space-evenly;\n  padding-top: 0;\n}\n\n/* Months arrows selectors */\n.flatpickr-next-month,\n.flatpickr-prev-month {\n  position: static !important;\n  display: flex;\n  width: calc(var(--space-unit) * 4) !important;\n  height: calc(var(--space-unit) * 4) !important;\n  align-items: center;\n  justify-content: center;\n  padding: 0 !important;\n}\n\n.flatpickr-prev-month {\n  margin-left: var(--space-unit);\n}\n\n.flatpickr-next-month {\n  margin-right: var(--space-unit);\n}\n\n.flatpickr-next-month > svg,\n.flatpickr-prev-month > svg {\n  width: calc(var(--space-unit) * 2) !important;\n  height: calc(var(--space-unit) * 2) !important;\n  fill: var(--color-primary01);\n}\n\n.flatpickr-next-month:hover,\n.flatpickr-prev-month:hover,\n.flatpickr-next-month:focus,\n.flatpickr-prev-month:focus {\n  border: none !important;\n  border-color: var(--color-primary03) !important;\n  background-color: var(--color-primary03) !important;\n  border-radius: var(--border-radius);\n  color: var(--color-hover-primary) !important;\n  outline: none !important;\n}\n\n.flatpickr-next-month:hover svg,\n.flatpickr-prev-month:hover svg {\n  fill: var(--color-hover-primary) !important;\n}\n\n.flatpickr-next-month:active,\n.flatpickr-prev-month:active {\n  border-color: var(--color-surface01) !important;\n  background-color: var(--color-surface01) !important;\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2) !important;\n  color: var(--color-primary01) !important;\n}\n\n.flatpickr-next-month:focus svg,\n.flatpickr-prev-month:focus svg {\n  fill: var(--color-primary01) !important;\n}\n\n/* Months dropdown selectors */\n.flatpickr-monthDropdown-months {\n  width: 108px !important;\n  height: calc(var(--space-unit) * 5.5) !important;\n  padding-left: var(--space-unit) !important;\n  background: var(--color-surface01) !important;\n  color: var(--color-default-text) !important;\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n  outline: 1px solid black !important;\n}\n\n.flatpickr-monthDropdown-months:hover,\n.flatpickr-monthDropdown-months:focus {\n  outline: 1px solid var(--color-primary01) !important;\n}\n\n/* Year toggle selectors */\n.flatpickr-current-month > .numInputWrapper {\n  display: flex;\n  width: calc(var(--space-unit) * 10);\n  height: calc(var(--space-unit) * 5.5) !important;\n  background: var(--color-surface01) !important;\n  color: var(--color-default-text);\n  outline: 1px solid black !important;\n}\n\n.flatpickr-current-month > .numInputWrapper:hover,\n.flatpickr-current-month > .numInputWrapper:focus-within {\n  outline: 1px solid var(--color-primary01) !important;\n}\n\n.flatpickr-current-month > .numInputWrapper > input {\n  padding: 0 calc(var(--space-unit) * 3) 0 var(--space-unit);\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n  text-align: center;\n}\n\n/* Weekdays selectors */\n.flatpickr-weekdays {\n  height: calc(var(--space-unit) * 6);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n.flatpickr-weekday {\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n}\n\n/* Calendar days and months selectors */\n.flatpickr-day,\n.flatpickr-monthSelect-month {\n  width: calc(var(--space-unit) * 6) !important;\n  max-width: 100% !important;\n  height: calc(var(--space-unit) * 6) !important;\n  border: none;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  font-size: var(--font-size-3) !important;\n  line-height: calc(var(--space-unit) * 6) !important;\n}\n\n.flatpickr-day {\n  width: calc(var(--space-unit) * 6) !important;\n  border: none;\n  line-height: calc(var(--space-unit) * 6) !important;\n}\n\n.flatpickr-monthSelect-month {\n  width: calc(var(--space-unit) * 14) !important;\n  padding: 0 !important;\n  border: 2px solid var(--color-surface01) !important;\n  line-height: calc(var(--space-unit) * 5) !important;\n}\n\n.flatpickr-day:not(.flatpickr-disabled):hover,\n.flatpickr-day:not(.flatpickr-disabled):active,\n.flatpickr-day:not(.flatpickr-disabled):focus,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:hover,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:active,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:focus,\n.flatpickr-day:not(.flatpickr-disabled).selected:hover,\n.flatpickr-day:not(.flatpickr-disabled).selected:active,\n.flatpickr-day:not(.flatpickr-disabled).selected:focus,\n.flatpickr-monthSelect-month:hover,\n.flatpickr-monthSelect-month:active,\n.flatpickr-monthSelect-month:focus {\n  border-color: var(--color-hover-primary) !important;\n  background-color: var(--color-hover-primary) !important;\n  color: var(--color-text-inverse) !important;\n}\n\n.flatpickr-day.today,\n.flatpickr-monthSelect-month.today {\n  border: 2px solid var(--color-hover-primary) !important;\n}\n\n.flatpickr-day.selected:not(.flatpickr-disabled),\n.flatpickr-monthSelect-month.selected:not(.flatpickr-disabled) {\n  border-color: var(--color-primary01) !important;\n  background-color: var(--color-primary01) !important;\n}\n\n.flatpickr-weekday:nth-child(6),\n.flatpickr-weekday:nth-child(7),\n.flatpickr-day:nth-child(7n + 6),\n.flatpickr-day:nth-child(7n + 7) {\n  font-weight: var(--font-sb) !important;\n}\n\n/* Date and time selectors */\n.flatpickr-time {\n  display: block;\n  height: 90px !important;\n  max-height: 90px !important;\n  text-align: left;\n}\n\n.flatpickr-time::before {\n  display: block;\n  width: 100%;\n  padding-left: var(--space-unit);\n  color: var(--color-default-text) !important;\n  content: \"Orario\";\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-transform: uppercase;\n}\n\n.flatpickr-time.time24hr {\n  margin: calc(var(--space-unit) * 2) !important;\n}\n\n.flatpickr-time.time24hr > .numInputWrapper > input:hover,\n.flatpickr-time.time24hr > .numInputWrapper > input:focus,\n.flatpickr-time.time24hr > .numInputWrapper:hover {\n  background-color: var(--color-surface01) !important;\n}\n\n.flatpickr-time.time24hr > div {\n  width: calc(var(--space-unit) * 10) !important;\n  height: calc(var(--space-unit) * 5.5) !important;\n  margin-right: var(--space-unit) !important;\n  margin-left: var(--space-unit) !important;\n}\n\n.flatpickr-time-separator {\n  display: flex;\n  height: calc(var(--space-unit) * 5.5) !important;\n  align-items: center;\n  justify-content: center;\n  font-weight: unset !important;\n}\n\n.flatpickr-minute,\n.flatpickr-hour {\n  font-size: var(--font-size-3) !important;\n  font-weight: var(--font-rg) !important;\n  outline: 1px solid black !important;\n}\n\n.numInputWrapper:hover .flatpickr-minute,\n.numInputWrapper:hover .flatpickr-hour,\n.flatpickr-minute:focus,\n.flatpickr-hour:focus {\n  outline: 1px solid var(--color-primary01) !important;\n}\n\n/* toggle arrows selectors */\n.arrowUp,\n.arrowDown {\n  width: calc(var(--space-unit) * 2) !important;\n  height: calc(var(--space-unit) * 2) !important;\n  padding: 0 !important;\n  border: none !important;\n  opacity: 1 !important;\n}\n\n.arrowUp {\n  margin-top: calc(var(--space-unit) / 2) !important;\n  margin-right: calc(var(--space-unit) / 2) !important;\n}\n\n.arrowDown {\n  top: auto !important;\n  margin-top: calc(var(--space-unit) * 3) !important;\n  margin-right: calc(var(--space-unit) / 2) !important;\n}\n\n.arrowUp:hover,\n.arrowDown:hover {\n  border-color: var(--color-primary03) !important;\n  background-color: var(--color-primary03) !important;\n  border-radius: var(--border-radius);\n  color: var(--color-hover-primary) !important;\n}\n\n.arrowUp:active,\n.arrowDown:active {\n  border-color: var(--color-surface01) !important;\n  background-color: var(--color-surface01) !important;\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-2) !important;\n  color: var(--color-primary01) !important;\n}\n\n.arrowUp::after,\n.arrowDown::after {\n  padding: 2.5px !important;\n  border: solid var(--color-primary01) !important;\n  border-width: 0 1px 1px 0 !important;\n}\n\n.arrowUp::after {\n  top: 0 !important;\n  margin-top: 6px !important;\n  margin-left: 5.5px !important;\n  transform: rotate(-135deg);\n}\n\n.arrowDown::after {\n  top: 0 !important;\n  left: 5.5px !important;\n  margin-top: 4px !important;\n  transform: rotate(45deg);\n}\n\n/* range-date-picker selectors */\n\n.flatpickr-day:not(.flatpickr-disabled).inRange:hover,\n.flatpickr-day:not(.flatpickr-disabled).today.inRange:hover,\n.flatpickr-day.prevMonthDay:not(.flatpickr-disabled).inRange:hover,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange:hover {\n  border-color: var(--color-hover-primary) !important;\n  background-color: var(--color-hover-primary) !important;\n}\n\n.flatpickr-day:not(.flatpickr-disabled).inRange,\n.flatpickr-day:not(.flatpickr-disabled).today.inRange,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.inRange,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange {\n  border-color: var(--color-primary03);\n  background-color: var(--color-primary03);\n}\n\n.flatpickr-day:not(.flatpickr-disabled).startRange,\n.flatpickr-day:not(.flatpickr-disabled).endRange,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).startRange,\n.flatpickr-monthSelect-month:not(.flatpickr-disabled).endRange {\n  border-color: var(--color-primary01) !important;\n  background-color: var(--color-primary01) !important;\n}\n\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.startRange,\n.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.endRange {\n  border-color: var(--color-primary01) !important;\n  background-color: var(--color-primary01) !important;\n}\n\n.flatpickr-range.second-input {\n  cursor: pointer;\n}\n\n.range-pickers-container {\n  display: flex;\n  gap: 16px;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\n\nimport flatpickr from \"flatpickr\";\nimport {Italian} from \"flatpickr/dist/l10n/it.js\";\n\nimport {InputStatus, InputType, ZDatePickerPosition, ZRangePickerMode} from \"../../../beans\";\nimport {setAriaOptions, setFlatpickrPosition, validateDate} from \"../utils\";\n\n@Component({\n  tag: \"z-range-picker\",\n  styleUrl: \"../styles.css\",\n  shadow: false,\n})\nexport class ZRangePicker implements ComponentInterface {\n  @Element() element: HTMLZRangePickerElement;\n\n  /** unique id */\n  @Prop()\n  rangePickerId: string;\n\n  /** first z-input aria label */\n  @Prop()\n  firstAriaLabel?: string;\n\n  /** first z-input label */\n  @Prop()\n  firstLabel?: string;\n\n  /** second z-input aria label */\n  @Prop()\n  secondAriaLabel?: string;\n\n  /** second z-input label */\n  @Prop()\n  secondLabel?: string;\n\n  /** [Optional] datepicker mode: date or datetime */\n  @Prop()\n  mode: ZRangePickerMode = ZRangePickerMode.DATE;\n\n  /** readonly mode */\n  @Prop()\n  firstPickerReadOnly = false;\n\n  /** readonly mode */\n  @Prop()\n  lastPickerReadOnly = false;\n\n  /** readonly mode */\n  @Prop()\n  firstPickerPlaceholder = \"\";\n\n  /** readonly mode */\n  @Prop()\n  lastPickerPlaceholder = \"\";\n\n  @State()\n  flatpickrPosition: ZDatePickerPosition = ZDatePickerPosition.BOTTOM;\n\n  @State()\n  activeInput = \"start-input\";\n\n  @State()\n  firstInputError = false;\n\n  @State()\n  lastInputError = false;\n\n  private firstPicker;\n\n  private lastPicker;\n\n  /** emitted when date changes, returns an array with the two selected dates */\n  @Event()\n  dateSelect: EventEmitter;\n\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleClick(): void {\n    this.getFocusedInput();\n  }\n\n  @Listen(\"keyup\", {target: \"body\", capture: true})\n  handleKeyDown(ev: KeyboardEvent): void {\n    const currentPicker = this.activeInput === \"start-input\" ? this.firstPicker : this.lastPicker;\n\n    this.getFocusedInput();\n\n    if (ev.key === \"Escape\") {\n      if (document.activeElement.classList.contains(`${this.rangePickerId}-1`)) {\n        this.firstPicker?.close();\n      }\n      if (document.activeElement.classList.contains(`${this.rangePickerId}-2`)) {\n        this.lastPicker?.close();\n      }\n    }\n\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      if (\n        document.activeElement.classList.contains(`${this.rangePickerId}-1`) ||\n        document.activeElement.classList.contains(`${this.rangePickerId}-2`)\n      ) {\n        currentPicker?.open();\n      }\n\n      const isCrossIconEntered = document.activeElement.classList.contains(\"reset-icon\");\n\n      if (isCrossIconEntered) {\n        if (this.activeInput === \"start-input\") {\n          this.firstInputError = false;\n          this.firstPicker?.clear();\n          this.printDate(null, this.lastPicker?.selectedDates[0] || null);\n        }\n        if (this.activeInput === \"end-input\") {\n          this.lastInputError = false;\n          this.firstPicker?.clear();\n          this.printDate(this.firstPicker?.selectedDates[0] || null, null);\n        }\n      }\n\n      const isPrevArrowEntered = document.activeElement.classList.contains(\"flatpickr-prev-month\");\n      const isNextArrowEntered = document.activeElement.classList.contains(\"flatpickr-next-month\");\n      const arrowPressed = isPrevArrowEntered || isNextArrowEntered;\n\n      if (arrowPressed && ev.key === \" \") {\n        ev.preventDefault();\n      }\n\n      if (isPrevArrowEntered) {\n        currentPicker?.changeMonth(-1);\n      }\n      if (isNextArrowEntered) {\n        currentPicker?.changeMonth(1);\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setupPickers();\n  }\n\n  @Watch(\"firstPickerReadOnly\")\n  setupFirstPickersReadOnly(): void {\n    this.firstPicker?.set(\"clickOpens\", !this.firstPickerReadOnly);\n  }\n\n  @Watch(\"lastPickerReadOnly\")\n  setupLastPickersReadOnly(): void {\n    this.lastPicker?.set(\"clickOpens\", !this.lastPickerReadOnly);\n  }\n\n  @Watch(\"mode\")\n  setupPickers(): void {\n    const config = {\n      enableTime: this.mode === ZRangePickerMode.DATE_TIME,\n      locale: Italian,\n      allowInput: true,\n      wrap: true,\n      dateFormat: this.mode === ZRangePickerMode.DATE_TIME ? \"d-m-Y - H:i\" : \"d-m-Y\",\n      ariaDateFormat: \"d F Y\",\n      minuteIncrement: 1,\n      time_24hr: true,\n      onValueUpdate: () => {\n        const firstInputActive = this.activeInput === \"start-input\";\n        const firstDate = this.firstPicker.selectedDates[0];\n        const lastDate = this.lastPicker.selectedDates[0];\n\n        if (+firstDate > +lastDate) {\n          if (firstInputActive) {\n            this.firstInputError = true;\n            this.printDate(null, lastDate || null);\n          } else {\n            this.lastInputError = true;\n            this.printDate(firstDate || null, null);\n          }\n        } else {\n          this.lastInputError = false;\n          this.firstInputError = false;\n          this.printDate(firstDate || null, lastDate || null);\n        }\n        this.setRangeStyle(0);\n        this.setRangeStyle(1);\n      },\n      onChange: (_selectedDates, _dateStr, instance) => {\n        this.onDateSelect();\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n      },\n      onOpen: (_selectedDates, _dateStr, instance) => {\n        setAriaOptions(this.element, this.mode);\n        this.flatpickrPosition = setFlatpickrPosition(this.element, this.mode);\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n        this.getFocusedInput();\n      },\n      onYearChange: (_selectedDates, _dateStr, instance) => {\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n      },\n      onMonthChange: (_selectedDates, _dateStr, instance) => {\n        this.setRangeStyle(instance.input.classList.contains(\"start-input\") ? 0 : 1);\n      },\n      onKeyDown: () => {\n        setAriaOptions(this.element, this.mode);\n      },\n    };\n\n    this.firstPicker = flatpickr(`.${this.rangePickerId}-1-container`, {\n      ...{...config, clickOpens: !this.firstPickerReadOnly},\n      mode: \"single\",\n      appendTo: this.element.querySelector(`.${this.rangePickerId}-1-wrapper`),\n    });\n    this.lastPicker = flatpickr(`.${this.rangePickerId}-2-container`, {\n      ...{...config, clickOpens: !this.lastPickerReadOnly},\n      mode: \"single\",\n      appendTo: this.element.querySelector(`.${this.rangePickerId}-2-wrapper`),\n    });\n\n    this.element.querySelectorAll(\".flatpickr-weekday\").forEach((element) => {\n      element.innerHTML = element.innerHTML.trim().charAt(0);\n    });\n  }\n\n  private onDateSelect(): void {\n    const firstInputActive = this.activeInput === \"start-input\";\n    const firstDate = this.firstPicker.selectedDates[0];\n    const lastDate = this.lastPicker.selectedDates[0];\n\n    if (+firstDate > +lastDate) {\n      if (firstInputActive) {\n        this.firstInputError = true;\n        this.printDate(null, lastDate || null);\n      } else {\n        this.lastInputError = true;\n        this.printDate(firstDate || null, null);\n      }\n    } else {\n      this.lastInputError = false;\n      this.firstInputError = false;\n      this.printDate(firstDate || null, lastDate || null);\n    }\n  }\n\n  private disableDates(date, index): void {\n    const calendar = this.element.getElementsByClassName(\"flatpickr-calendar\")[index];\n\n    Array.from(calendar.getElementsByClassName(\"flatpickr-day\")).forEach((element: Element) => {\n      const calendarDate = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));\n\n      const breakpoint = this.getDateWithoutTime(date);\n      const inRange = index === 0 ? calendarDate > breakpoint : calendarDate < breakpoint;\n\n      if (inRange) {\n        element.classList.toggle(\"flatpickr-disabled\", true);\n      } else {\n        element.classList.toggle(\"flatpickr-disabled\", false);\n      }\n    });\n    setAriaOptions(this.element, this.mode);\n  }\n\n  private formatDate(date): string {\n    if (this.mode === ZRangePickerMode.DATE) {\n      return `${flatpickr.formatDate(date, \"d-m-Y\")}`;\n    }\n\n    return `${flatpickr.formatDate(date, \"d-m-Y - H:i\")}`;\n  }\n\n  private printDate(firstDate, lastDate): void {\n    const firstDateString = firstDate ? this.formatDate(firstDate) : null;\n    const lastDateString = lastDate ? this.formatDate(lastDate) : null;\n\n    this.dateSelect.emit([firstDateString, lastDateString]);\n  }\n\n  private getDateWithoutTime(date): Date {\n    const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0);\n\n    return newDate;\n  }\n\n  /** Replace month word to month number */\n  private replaceMonths(date, time): Date {\n    const month = date.split(\" \")[1];\n    const months = {\n      Gennaio: \"01\",\n      Febbraio: \"02\",\n      Marzo: \"03\",\n      Aprile: \"04\",\n      Maggio: \"05\",\n      Giugno: \"06\",\n      Luglio: \"07\",\n      Agosto: \"08\",\n      Settembre: \"09\",\n      Ottobre: \"10\",\n      Novembre: \"11\",\n      Dicembre: \"12\",\n    };\n\n    const pieces = date.replace(month, months[month]).split(\" \");\n\n    return new Date(\n      parseInt(pieces[2]),\n      parseInt(pieces[1]) - 1,\n      parseInt(pieces[0]),\n      time ? parseInt(time.split(\":\")[0]) : 0,\n      time ? parseInt(time.split(\":\")[1]) : 0\n    );\n  }\n\n  /** Get the current focused input, first or last */\n  private getFocusedInput(): string {\n    const focusedZInput = document.activeElement.closest(\"z-input\");\n    if (!focusedZInput) {\n      return;\n    }\n\n    if (focusedZInput?.classList.contains(\"start-input\")) {\n      this.activeInput = \"start-input\";\n    } else if (focusedZInput.classList.contains(\"end-input\")) {\n      this.activeInput = \"end-input\";\n    }\n  }\n\n  /** Set style of the days between the two selected dates */\n  private setRangeStyle(index): void {\n    Array.from(this.element.getElementsByClassName(\"flatpickr-calendar\")).forEach((element: Element) => {\n      Array.from(element.getElementsByClassName(\"flatpickr-day\")).forEach((element: Element) => {\n        const hasFirstDate = this.firstPicker.selectedDates.length === 1;\n        const hasLastDate = this.lastPicker.selectedDates.length === 1;\n        let firstDate;\n        let lastDate;\n        const date = this.getDateWithoutTime(this.replaceMonths(element.ariaLabel, null));\n\n        if (hasFirstDate) {\n          firstDate = this.getDateWithoutTime(this.firstPicker.selectedDates[0]);\n          if (+date === +firstDate) {\n            element.classList.toggle(\"startRange\", true);\n          } else {\n            element.classList.toggle(\"startRange\", false);\n          }\n        }\n\n        if (hasLastDate) {\n          lastDate = this.getDateWithoutTime(this.lastPicker.selectedDates[0]);\n          if (+date === +lastDate) {\n            element.classList.toggle(\"endRange\", true);\n          } else {\n            element.classList.toggle(\"endRange\", false);\n          }\n        }\n\n        if (hasFirstDate && hasLastDate) {\n          if (date > firstDate && date < lastDate) {\n            element.classList.toggle(\"inRange\", true);\n          } else {\n            element.classList.toggle(\"inRange\", false);\n          }\n        }\n\n        if (index === 0 && hasLastDate) {\n          this.disableDates(this.lastPicker.selectedDates[0], index);\n        }\n        if (index === 1 && hasFirstDate) {\n          this.disableDates(this.firstPicker.selectedDates[0], index);\n        }\n      });\n    });\n  }\n\n  private onStopTyping(value): void {\n    const text = value.detail.value.replace(\"/\", \"-\");\n    const englishData = text.split(\"-\");\n    const time = this.mode === ZRangePickerMode.DATE_TIME ? `T${englishData[3]}:00` : \"\";\n    const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(\" \").join(\"\");\n\n    const isValidDate = validateDate(text, this.mode === ZRangePickerMode.DATE_TIME);\n\n    const date = Date.parse(englishParsedData).toString();\n\n    if (this.activeInput === \"start-input\") {\n      if (text === \"\") {\n        this.firstInputError = false;\n        this.firstPicker.setDate([]);\n        this.printDate(null, this.lastPicker.selectedDates[0] || null);\n      } else if (!isValidDate) {\n        this.firstInputError = true;\n        this.printDate(null, this.lastPicker.selectedDates[0] || null);\n      } else if (isValidDate) {\n        if (this.lastPicker.selectedDates.length === 1) {\n          if (+date <= +this.lastPicker.selectedDates[0]) {\n            this.firstInputError = false;\n            this.firstPicker.setDate([text]);\n            this.printDate(new Date(englishParsedData), this.lastPicker.selectedDates[0]);\n          } else {\n            this.firstInputError = true;\n            this.printDate(null, this.lastPicker.selectedDates[0]);\n          }\n        } else {\n          this.firstInputError = false;\n          this.firstPicker.setDate([text]);\n          this.printDate(new Date(englishParsedData), null);\n        }\n      }\n    } else if (text === \"\") {\n      this.lastInputError = false;\n      this.lastPicker.setDate([]);\n      this.printDate(this.firstPicker.selectedDates[0] || null, null);\n    } else if (!isValidDate) {\n      this.lastInputError = true;\n      this.printDate(this.firstPicker.selectedDates[0] || null, null);\n    } else if (isValidDate) {\n      if (this.firstPicker.selectedDates.length === 1) {\n        if (+date >= +this.firstPicker.selectedDates[0]) {\n          this.lastInputError = false;\n          this.lastPicker.setDate([text]);\n          this.printDate(this.firstPicker.selectedDates[0], new Date(englishParsedData));\n        } else {\n          this.lastInputError = true;\n          this.printDate(this.firstPicker.selectedDates[0], null);\n        }\n      } else {\n        this.lastInputError = false;\n        this.lastPicker.setDate([text]);\n        this.printDate(null, new Date(englishParsedData));\n      }\n    }\n\n    this.setRangeStyle(this.activeInput === \"start-input\" ? 0 : 1);\n  }\n\n  render(): HTMLDivElement {\n    const zInputProps = {\n      type: InputType.TEXT,\n      icon: \"event\",\n      tabindex: \"0\",\n      message: false,\n      onStopTyping: this.onStopTyping.bind(this),\n      value: \"\",\n    };\n\n    return (\n      <div\n        class={{\n          [\"range-pickers-container\"]: true,\n          [this.mode]: true,\n          [this.activeInput]: true,\n          [this.flatpickrPosition]: true,\n        }}\n      >\n        <div class={`${this.rangePickerId}-1-wrapper`}>\n          <div class={`${this.rangePickerId}-1-container`}>\n            <z-input\n              {...zInputProps}\n              placeholder={this.firstPickerPlaceholder}\n              readonly={this.firstPickerReadOnly}\n              data-input=\"data-input\"\n              class={`start-input ${this.rangePickerId}-1`}\n              ariaLabel={this.firstAriaLabel}\n              label={this.firstLabel}\n              status={this.firstInputError && InputStatus.ERROR}\n              onStartTyping={() => {\n                this.firstInputError = false;\n              }}\n            />\n          </div>\n        </div>\n        <div class={`${this.rangePickerId}-2-wrapper`}>\n          <div class={`${this.rangePickerId}-2-container`}>\n            <z-input\n              {...zInputProps}\n              placeholder={this.lastPickerPlaceholder}\n              readonly={this.lastPickerReadOnly}\n              data-input=\"data-input\"\n              class={`end-input ${this.rangePickerId}-2`}\n              ariaLabel={this.secondAriaLabel}\n              label={this.secondLabel}\n              status={this.lastInputError && InputStatus.ERROR}\n              onStartTyping={() => {\n                this.lastInputError = false;\n              }}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/z-result-card.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZResultCard","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasMultipleCovers","isInfoCard","resizeHandler","setTooltipTitle","authorsRef","titleRef","subtitleRef","renderTitle","TitleTag","titleHtmlTag","h","class","ref","el","cardTitle","renderSubtitle","cardSubtitle","renderOperaCard","Host","cover","coverAlt","fallbackCover","multiple","bordered","authors","name","renderInfoCard","style","window","getComputedStyle","hasLineClamp","getPropertyValue","isTruncated","lineHeight","parseInt","maxLines","maxHeight","scrollHeight","scrollWidth","clientWidth","clientHeight","setAttribute","textContent","trim","removeAttribute","componentDidRender","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","render"],"sources":["src/components/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/z-result-card/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  min-height: 11.125rem;\n  padding: var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-surface02);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-size-large);\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  gap: calc(var(--space-unit) * 2);\n}\n\nz-book-cover {\n  --z-book-cover-stack-shift-x: 6px;\n  --z-book-cover-stack-shift-y: 8px;\n  --z-book-cover-height: 158px;\n  --z-book-cover-border-radius: 0;\n}\n\n.info-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n}\n\n.authors-label {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  margin: 0;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.card-subtitle {\n  overflow: hidden;\n  color: var(--color-default-text);\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tags-container {\n  display: flex;\n  max-width: 100%;\n  flex-wrap: wrap;\n  margin-top: calc(var(--space-unit) * 2);\n  gap: var(--space-unit);\n}\n\n.volumes-label {\n  display: flex;\n  flex-grow: 1;\n  align-items: end;\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n}\n\n/* info-card */\n:host(.info-card) {\n  height: 5rem;\n  gap: calc(var(--space-unit) * 1.5);\n}\n\n:host(.info-card) .info-icon-container {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  justify-content: center;\n  padding: var(--space-unit);\n  margin-bottom: calc(var(--space-unit) * 3);\n  background-color: var(--gray50);\n  border-radius: var(--border-size-large);\n}\n\n:host(.info-card) .info-icon {\n  --z-icon-width: 1.125rem;\n  --z-icon-height: 1.125rem;\n\n  fill: var(--color-default-icon);\n}\n\n:host(.info-card) .card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  min-width: 0;\n  max-width: 100%;\n  max-height: 2.4em;\n  margin-top: 0;\n  margin-bottom: calc(var(--space-unit) / 2);\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  line-height: 1.2;\n  word-break: break-word;\n}\n\n:host(.info-card) .card-subtitle {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.2;\n  white-space: normal;\n  word-break: break-word;\n}\n\n@media (max-width: 767px) {\n  .card-title {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    line-height: 1.4;\n    word-break: break-word;\n  }\n}\n","import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot tags - slot containing the descriptors for the opera variant\n * @slot volumes - slot containing the volume count to be displayed in the opera variant\n */\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard implements ComponentInterface {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /** The title of the card. */\n  @Prop()\n  cardTitle: string;\n\n  /** The subtitle of the card. */\n  @Prop()\n  cardSubtitle: string;\n\n  /** The authors of the opera. */\n  @Prop()\n  authors?: string;\n\n  /** The URL of the cover image of the opera. */\n  @Prop()\n  cover?: string;\n\n  /** [optional] Fallback cover URL. */\n  @Prop()\n  fallbackCover?: string;\n\n  /** [optional] Alt text for the cover image. When provided, the image is exposed to assistive technologies. */\n  @Prop()\n  coverAlt?: string;\n\n  /** Whether to show a stack of covers to represent multiple books. */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /** Enables the \"info\" variant of the card. */\n  @Prop()\n  isInfoCard = false;\n\n  /** [optional] Set a specific heading level as html tag for the title. */\n  @Prop()\n  titleHtmlTag?: string;\n\n  private authorsRef: HTMLElement;\n\n  private titleRef: HTMLElement;\n\n  private subtitleRef: HTMLElement;\n\n  private setTooltipTitle(el: HTMLElement): void {\n    if (!el) {\n      return;\n    }\n\n    // Check if element uses line-clamp\n    const style = window.getComputedStyle(el);\n    const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n    let isTruncated;\n    if (hasLineClamp) {\n      // For elements with line-clamp, check if content height exceeds line-clamp height\n      const lineHeight = parseInt(style.lineHeight);\n      const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n      const maxHeight = lineHeight * maxLines;\n\n      isTruncated = el.scrollHeight > maxHeight;\n    } else {\n      // Original check for elements without line-clamp\n      isTruncated = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n    }\n\n    if (isTruncated) {\n      el.setAttribute(\"title\", el.textContent.trim());\n    } else {\n      el.removeAttribute(\"title\");\n    }\n  }\n\n  componentDidRender(): void {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  }\n\n  private resizeHandler = (): void => {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  };\n\n  componentDidLoad(): void {\n    window.addEventListener(\"resize\", this.resizeHandler);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"resize\", this.resizeHandler);\n  }\n\n  private renderTitle = (): HTMLElement => {\n    const TitleTag = this.titleHtmlTag || \"div\";\n\n    return (\n      <TitleTag\n        class=\"card-title\"\n        ref={(el) => (this.titleRef = el as HTMLElement)}\n      >\n        {this.cardTitle}\n      </TitleTag>\n    );\n  };\n\n  private renderSubtitle = (): HTMLSpanElement => {\n    return (\n      <span\n        class=\"card-subtitle\"\n        ref={(el) => (this.subtitleRef = el as HTMLElement)}\n      >\n        {this.cardSubtitle}\n      </span>\n    );\n  };\n\n  private renderOperaCard = (): HTMLZResultCardElement => {\n    return (\n      <Host>\n        <z-book-cover\n          cover={this.cover}\n          coverAlt={this.coverAlt}\n          fallbackCover={this.fallbackCover}\n          multiple={this.hasMultipleCovers}\n          bordered={true}\n        ></z-book-cover>\n        <div class=\"info-container\">\n          {this.authors && (\n            <span\n              class=\"authors-label\"\n              ref={(el) => (this.authorsRef = el as HTMLElement)}\n            >\n              {this.authors}\n            </span>\n          )}\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <div class=\"volumes-label\">\n            <slot name=\"volumes\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  };\n\n  private renderInfoCard = (): HTMLZResultCardElement => {\n    return (\n      <Host class=\"info-card\">\n        <div class=\"info-icon-container\">\n          <z-icon\n            class=\"info-icon\"\n            name=\"link\"\n          />\n        </div>\n        <div class=\"info-container\">\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n  }\n}\n"],"mappings":"wLAAA,MAAMA,EAAY,IAAM,k3E,MCWXC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,kEAkCEC,KAAAC,kBAAoB,MAIpBD,KAAAE,WAAa,MA+CLF,KAAAG,cAAgB,KACtBH,KAAKI,gBAAgBJ,KAAKK,YAC1BL,KAAKI,gBAAgBJ,KAAKM,UAC1BN,KAAKI,gBAAgBJ,KAAKO,YAAY,EAWhCP,KAAAQ,YAAc,KACpB,MAAMC,EAAWT,KAAKU,cAAgB,MAEtC,OACEC,EAACF,EAAQ,CACPG,MAAM,aACNC,IAAMC,GAAQd,KAAKM,SAAWQ,GAE7Bd,KAAKe,UACG,EAIPf,KAAAgB,eAAiB,IAErBL,EAAA,QACEC,MAAM,gBACNC,IAAMC,GAAQd,KAAKO,YAAcO,GAEhCd,KAAKiB,cAKJjB,KAAAkB,gBAAkB,IAEtBP,EAACQ,EAAI,KACHR,EAAA,gBACES,MAAOpB,KAAKoB,MACZC,SAAUrB,KAAKqB,SACfC,cAAetB,KAAKsB,cACpBC,SAAUvB,KAAKC,kBACfuB,SAAU,OAEZb,EAAA,OAAKC,MAAM,kBACRZ,KAAKyB,SACJd,EAAA,QACEC,MAAM,gBACNC,IAAMC,GAAQd,KAAKK,WAAaS,GAE/Bd,KAAKyB,SAGTzB,KAAKQ,cACLR,KAAKgB,iBACNL,EAAA,OAAKC,MAAM,kBACTD,EAAA,QAAMe,KAAK,UAEbf,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAMe,KAAK,eAOb1B,KAAA2B,eAAiB,IAErBhB,EAACQ,EAAI,CAACP,MAAM,aACVD,EAAA,OAAKC,MAAM,uBACTD,EAAA,UACEC,MAAM,YACNc,KAAK,UAGTf,EAAA,OAAKC,MAAM,kBACRZ,KAAKQ,cACLR,KAAKgB,kBASf,CA7HS,eAAAZ,CAAgBU,GACtB,IAAKA,EAAI,CACP,M,CAIF,MAAMc,EAAQC,OAAOC,iBAAiBhB,GACtC,MAAMiB,EAAeH,EAAMI,iBAAiB,wBAA0B,OAEtE,IAAIC,EACJ,GAAIF,EAAc,CAEhB,MAAMG,EAAaC,SAASP,EAAMM,YAClC,MAAME,EAAWD,SAASP,EAAMI,iBAAiB,uBACjD,MAAMK,EAAYH,EAAaE,EAE/BH,EAAcnB,EAAGwB,aAAeD,C,KAC3B,CAELJ,EAAcnB,EAAGyB,YAAczB,EAAG0B,aAAe1B,EAAGwB,aAAexB,EAAG2B,Y,CAGxE,GAAIR,EAAa,CACfnB,EAAG4B,aAAa,QAAS5B,EAAG6B,YAAYC,O,KACnC,CACL9B,EAAG+B,gBAAgB,Q,EAIvB,kBAAAC,GACE9C,KAAKI,gBAAgBJ,KAAKK,YAC1BL,KAAKI,gBAAgBJ,KAAKM,UAC1BN,KAAKI,gBAAgBJ,KAAKO,Y,CAS5B,gBAAAwC,GACElB,OAAOmB,iBAAiB,SAAUhD,KAAKG,c,CAGzC,oBAAA8C,GACEpB,OAAOqB,oBAAoB,SAAUlD,KAAKG,c,CA4E5C,MAAAgD,GACE,OAAOnD,KAAKE,WAAaF,KAAK2B,iBAAmB3B,KAAKkB,iB","ignoreList":[]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZSelect","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","disabled","readonly","required","message","autocomplete","noresultslabel","isfixed","size","ControlSize","BIG","isOpen","selectedItem","itemsList","toggleSelectUl","bind","handleSelectFocus","watchItems","getInitialItemsArray","findSelectedItem","getSelectedItem","getValue","getSelectedValue","setValue","value","values","push","length","updateSelection","emitOptionSelect","optionSelect","emit","id","selected","emitResetSelect","resetSelect","componentWillLoad","componentWillRender","filterItems","searchString","items","JSON","parse","mapSelectedItemToItemsArray","initialItemsList","_a","getOptionId","item","encodeString","name","getResetOptionId","getGroupedItems","Object","entries","reduce","group","category","prevList","map","assign","getPlainText","hasTreeItems","filterTree","filter","toUpperCase","includes","getHighlightedText","matchingParent","match","newItem","children","showChildrenOfMatchingParent","text","search","upperText","upperSearch","start","indexOf","end","substring","hasAutocomplete","boolean","handleInputChange","e","detail","selectedId","forEach","found","selectItem","handleResetClick","focusedItemId","handleInputKeyDown","code","KeyboardCode","ENTER","SPACE","find","preventDefault","ARROW_DOWN","ARROW_UP","arrowsSelectNav","arrows","key","stopPropagation","currElem","host","querySelector","options","Array","from","querySelectorAll","currElemIndex","firstElemIndex","lastElemIndex","focusSelectItem","nextElem","optionId","elem","scrollIntoView","block","container","selfFocusOnClose","document","addEventListener","removeEventListener","focus","handleInputClick","target","closest","KeyboardEvent","ESC","TAB","clickedElement","getClickedElement","hasAttribute","getElementTree","nodeName","toLowerCase","zSelect","scrollToLetter","letter","foundItem","charAt","renderInput","undefined","h","class","placeholder","label","htmlAriaLabel","icon","hasclearicon","status","role","onClick","onKeyDown","onInputChange","onKeyPress","renderSelectUl","fixed","tabindex","listSizeType","resetItem","renderResetItem","renderSelectUlItems","hidden","hide","hasGroupItems","clickable","dividerType","ListDividerType","ELEMENT","htmlTabindex","ListSize","MEDIUM","onClickItem","active","renderItem","lastItem","HEADER","innerHTML","NONE","SMALL","X_SMALL","renderNoSearchResults","renderGroupedTree","renderSelectGroupItems","index","array","isLastItem","parentHasSiblings","renderTreeItems","isLastChild","isTopLevel","disabledAncestor","isDisabled","hasDivider","_b","title","child","arr","groupedItems","some","groupItems","slot","i","style","zIndex","height","isLastGroup","subindex","renderMessage","render"],"sources":["src/components/z-select/styles.css?tag=z-select&encapsulation=scoped","src/components/z-select/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n  color: var(--color-form-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]),\n:host([size=\"x-small\"]) {\n  font-size: var(--font-size-2);\n}\n\n.select-wrapper > z-input {\n  width: 100%;\n}\n\n.select-wrapper > z-input .input-icon {\n  cursor: pointer;\n}\n\n.select-wrapper > div {\n  position: relative;\n}\n\n.select-wrapper > div.closed {\n  overflow: hidden;\n  height: 0;\n}\n\n.select-wrapper .ul-scroll-wrapper {\n  position: absolute;\n  width: 100%;\n  box-sizing: border-box;\n  border-top: none;\n  background: var(--color-form-background);\n  box-shadow: var(--shadow-2);\n  outline: none;\n}\n\n.select-wrapper .closed .ul-scroll-wrapper {\n  z-index: 10;\n}\n\n.select-wrapper .open .ul-scroll-wrapper {\n  z-index: 20;\n}\n\n.select-wrapper .ul-scroll-wrapper.fixed {\n  position: static;\n}\n\n.select-wrapper z-list {\n  --background-color-list-element: var(--color-form-background);\n  --background-hover-color-list-element: var(--color-surface02);\n  --background-active-color-list-element: var(--color-surface02);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list {\n  position: relative;\n  overflow: auto;\n  max-height: 240px;\n  padding: var(--space-unit) calc(var(--space-unit) * 1.5);\n  margin: 0;\n  outline: none;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element[disabled] {\n  color: var(--color-form-disabled03);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container {\n  display: flex;\n  align-items: center;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  column-gap: var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container.active {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content {\n  margin-right: auto;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  .list-element-content {\n  padding: 0;\n}\n\n:host([size=\"small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"x-small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  > z-icon\n  + .list-element-content {\n  padding: 0 var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content.selected {\n  font-weight: var(--font-sb);\n}\n\n.select-wrapper .ul-scroll-wrapper .no-results z-icon {\n  margin-right: var(--space-unit);\n}\n\n.z-list-group-title {\n  color: var(--color-form-default-text);\n}\n\n.reset-item {\n  color: var(--color-form-active-primary);\n  fill: var(--color-form-active-primary);\n}\n\n.reset-item-content {\n  display: flex;\n  align-items: center;\n}\n\n.reset-item .reset-item-content.active {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.reset-item.reset-item-margin .reset-item-content {\n  margin-left: var(--space-unit);\n}\n\n.reset-item .reset-item-content > z-icon {\n  margin-right: var(--space-unit);\n}\n\n.reset-item.hide {\n  display: none;\n}\n\n.tree-list-reset-item {\n  padding: var(--space-unit) 0;\n}\n\nz-list-element {\n  position: relative;\n  display: block;\n}\n\nz-list z-list-element::before {\n  position: absolute;\n  z-index: 100;\n  top: 3px;\n  left: -8px;\n  width: 8px;\n  height: 1em;\n  border-bottom: 1px solid var(--color-form-disabled01-icon);\n  border-left: 1px solid var(--color-form-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element::after {\n  position: absolute;\n  z-index: 100;\n  top: 5px;\n  left: -8px;\n  width: 8px;\n  height: 100%;\n  border-left: 1px solid var(--color-form-disabled01-icon);\n  content: \"\";\n  cursor: pointer;\n}\n\nz-list z-list-element:last-child::after {\n  display: none;\n}\n\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n  display: none;\n}\n\nz-list > div.children-node {\n  padding-left: calc(var(--space-unit) * 2);\n}\n\nz-list-element > .list-element {\n  display: flex;\n  justify-content: space-between;\n  padding: calc(var(--space-unit) * 1.5) var(--space-unit);\n  cursor: pointer;\n}\n\nz-list-element > .list-element.active {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nz-list-element:not([disabled]) > .list-element:hover,\nz-list-element:not([disabled]) > .list-element:hover::after {\n  background-color: var(--background-hover-color-list-element, var(--color-background));\n}\n\nz-list-element > .list-element .item.ellipsis {\n  overflow: hidden;\n}\n\nz-list-element .list-element::after {\n  position: absolute;\n  top: 0;\n  right: -1px;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\nz-list-element.tree-search-item {\n  padding-top: 0;\n}\n\nz-list-element.tree-search-item .list-element::after {\n  position: absolute;\n  right: -25px;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\nz-list-element.grouped-tree-parent-node .list-element::after {\n  position: absolute;\n  right: -25px;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.item-label.selected {\n  font-weight: bold;\n}\n\n.item.ellipsis {\n  display: inline-block;\n  overflow: hidden;\n  max-width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nz-list > z-list-element.grouped-tree-parent-node > .list-element:hover::after,\nz-list-element.tree-search-item .list-element:hover::after,\nz-list > z-list-group > z-list-element.grouped-tree-parent-node > .list-element:hover::after {\n  position: absolute;\n  z-index: -1;\n  right: -18px;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\nz-list-element > .list-element:hover::after {\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  right: 0;\n  display: block;\n  width: 100%;\n  height: 45px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.children-node z-list-element::before,\n.children-node z-list-element::after {\n  left: -8px;\n}\n\n.children-node .children-node z-list-element::before,\n.children-node .children-node z-list-element::after {\n  left: -8px;\n}\n\n.children-node > z-list-element {\n  padding: 0;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ControlSize, InputStatus, KeyboardCode, ListDividerType, ListSize, SelectItem} from \"../../beans\";\nimport {boolean, encodeString, getClickedElement, getElementTree, getPlainText, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-select\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZSelect implements ComponentInterface {\n  @Element() host: HTMLZSelectElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** the input select options */\n  @Prop()\n  items!: SelectItem[] | string;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input `aria-label` */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** the input is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input is required */\n  @Prop()\n  required?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional) */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional) - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input has autocomplete option */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** */\n  @Prop()\n  hasGroupItems?: boolean;\n\n  /** */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /** If true and an item matches the search string, children of matching item are shown even if they don't match the search string  */\n  @Prop()\n  showChildrenOfMatchingParent?: boolean;\n\n  /** When fixed, it occupies space and pushes down next elements. */\n  @Prop()\n  isfixed?: boolean = false;\n\n  /** */\n  @Prop()\n  resetItem?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  isOpen = false;\n\n  @State()\n  selectedItem: null | SelectItem = null;\n\n  @State()\n  focusedItemId: string;\n\n  @State()\n  searchString: null | string;\n\n  private itemsList: SelectItem[] = [];\n\n  constructor() {\n    this.toggleSelectUl = this.toggleSelectUl.bind(this);\n    this.handleSelectFocus = this.handleSelectFocus.bind(this);\n  }\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = this.getInitialItemsArray();\n\n    this.selectedItem = this.findSelectedItem(this.itemsList);\n  }\n\n  /** get the input selected options */\n  @Method()\n  async getSelectedItem(): Promise<SelectItem> {\n    return this.selectedItem;\n  }\n\n  /** get the input value */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.getSelectedValue();\n  }\n\n  /** set the input value */\n  @Method()\n  async setValue(value: string | string[]): Promise<void> {\n    let values: string[] = [];\n    if (typeof value === \"string\") {\n      values.push(value);\n    } else {\n      values = value;\n    }\n\n    this.itemsList = this.getInitialItemsArray();\n    if (values.length) {\n      this.updateSelection(this.itemsList, values[0]);\n    }\n    this.selectedItem = this.findSelectedItem(this.itemsList);\n  }\n\n  /** Emitted on select option selection, returns select id, selected item id */\n  @Event()\n  optionSelect: EventEmitter;\n\n  private emitOptionSelect(): void {\n    this.optionSelect.emit({\n      id: this.htmlid,\n      selected: this.getSelectedValue(),\n    });\n  }\n\n  /** Emitted on reset selected item, returns select id, selected item id */\n  @Event()\n  resetSelect: EventEmitter;\n\n  private emitResetSelect(): void {\n    this.resetSelect.emit({\n      id: this.htmlid,\n    });\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.filterItems(this.searchString);\n  }\n\n  private getInitialItemsArray(): SelectItem[] {\n    return typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  private mapSelectedItemToItemsArray(): SelectItem[] {\n    const initialItemsList = this.getInitialItemsArray();\n\n    this.updateSelection(initialItemsList, this.selectedItem?.id);\n\n    return initialItemsList;\n  }\n\n  private getSelectedValue(): string {\n    return this.selectedItem?.id;\n  }\n\n  private getOptionId(item: SelectItem): string {\n    return `${this.htmlid}_key_${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;\n  }\n\n  private getResetOptionId(): string {\n    return `${this.htmlid}_key_reset`;\n  }\n\n  private getGroupedItems(): [string, SelectItem[]][] {\n    if (!this.itemsList.length) {\n      return [];\n    }\n\n    return Object.entries(\n      this.itemsList.reduce(\n        (group, item) => {\n          const category = item.category || \"Altra categoria\";\n          group[category] = group[category] || [];\n          group[category].push(item);\n\n          return group;\n        },\n        {} as Record<string, SelectItem[]>\n      )\n    );\n  }\n\n  private filterItems(searchString: string): void {\n    let prevList = this.mapSelectedItemToItemsArray();\n\n    if (!searchString?.length) {\n      this.itemsList = prevList;\n\n      return;\n    }\n\n    prevList = prevList.map((item) => ({...item, name: getPlainText(item.name)}));\n\n    if (this.hasTreeItems) {\n      this.itemsList = this.filterTree(prevList, searchString, false);\n    } else {\n      this.itemsList = prevList\n        .filter((item: SelectItem) => item.name.toUpperCase().includes(searchString.toUpperCase()))\n        .map((item: SelectItem) => {\n          item.name = this.getHighlightedText(item.name, searchString);\n\n          return item;\n        });\n    }\n  }\n\n  private filterTree(items: SelectItem[], searchString: string, matchingParent: boolean): SelectItem[] {\n    if (!items) {\n      return [];\n    }\n\n    return items\n      .map((item) => {\n        const match = item.name.toUpperCase().includes(searchString.toUpperCase());\n\n        const newItem: SelectItem = {...item};\n        if (newItem.children && newItem.children.length > 0) {\n          newItem.children = this.filterTree(\n            newItem.children.map((item) => ({...item, name: getPlainText(item.name)})),\n            searchString,\n            match\n          );\n        }\n\n        if (match) {\n          newItem.name = this.getHighlightedText(newItem.name, searchString);\n        }\n        if (\n          match ||\n          (newItem.children && newItem.children.length > 0) ||\n          (this.showChildrenOfMatchingParent && matchingParent)\n        ) {\n          return newItem;\n        }\n\n        return null;\n      })\n      .filter((item) => item !== null) as SelectItem[];\n  }\n\n  private getHighlightedText(text: string, search: string): string {\n    const upperText = text.toUpperCase();\n    const upperSearch = search.toUpperCase();\n    const start = upperText.indexOf(upperSearch);\n\n    if (start === -1) {\n      return text;\n    }\n\n    const end = start + search.length;\n\n    return text.substring(0, start) + `<strong>${text.substring(start, end)}</strong>` + text.substring(end);\n  }\n\n  private hasAutocomplete(): boolean {\n    return boolean(this.autocomplete) === true;\n  }\n\n  private handleInputChange(e: CustomEvent): void {\n    this.searchString = e.detail.value;\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n    }\n  }\n\n  private updateSelection(items: SelectItem[], selectedId: string): void {\n    if (items) {\n      items.forEach((item) => {\n        item.selected = item.id === selectedId;\n        if (item.children && item.children.length > 0) {\n          this.updateSelection(item.children, selectedId);\n        }\n      });\n    }\n  }\n\n  private findSelectedItem(items: SelectItem[]): SelectItem | null {\n    if (items) {\n      for (const item of items) {\n        if (item.selected) {\n          return item;\n        }\n        if (item.children && item.children.length > 0) {\n          const found = this.findSelectedItem(item.children);\n          if (found) {\n            return found;\n          }\n        }\n      }\n    }\n\n    return null;\n  }\n\n  private selectItem(selected: null | SelectItem): void {\n    if (selected?.disabled) {\n      return;\n    }\n\n    this.itemsList = this.getInitialItemsArray();\n\n    if (selected) {\n      this.updateSelection(this.itemsList, selected.id);\n    }\n\n    this.selectedItem = this.findSelectedItem(this.itemsList);\n    this.emitOptionSelect();\n    this.toggleSelectUl();\n    if (this.searchString) {\n      this.searchString = null;\n    }\n  }\n\n  private handleResetClick(): void {\n    this.selectedItem = null;\n    this.searchString = null;\n    this.focusedItemId = \"\";\n    this.emitResetSelect();\n    this.toggleSelectUl();\n  }\n\n  private handleInputKeyDown(e: KeyboardEvent): void {\n    switch (e.code as KeyboardCode) {\n      case KeyboardCode.ENTER:\n      case KeyboardCode.SPACE:\n        if (this.focusedItemId) {\n          if (this.focusedItemId === this.getResetOptionId()) {\n            this.handleResetClick();\n          } else {\n            const item = this.itemsList.find((e) => this.getOptionId(e) === this.focusedItemId) || null;\n            if (item) {\n              this.selectedItem = item;\n              this.emitOptionSelect();\n              this.toggleSelectUl();\n            }\n          }\n        } else if (!this.hasAutocomplete()) {\n          e.preventDefault();\n          this.toggleSelectUl();\n        }\n        break;\n      case KeyboardCode.ARROW_DOWN:\n      case KeyboardCode.ARROW_UP:\n        this.arrowsSelectNav(e);\n        break;\n    }\n  }\n\n  private arrowsSelectNav(e: KeyboardEvent): void {\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n\n    if (!arrows.includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const currElem = this.focusedItemId ? this.host.querySelector(`#${this.focusedItemId}`) : null;\n    const options = Array.from(this.host.querySelectorAll('[role=\"option\"]'));\n\n    if (!options.length) {\n      return;\n    }\n\n    const currElemIndex = currElem ? options.indexOf(currElem) : null;\n    const firstElemIndex = 0;\n    const lastElemIndex = options.length - 1;\n\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n\n      if (this.selectedItem) {\n        this.focusSelectItem(this.getOptionId(this.selectedItem));\n\n        return;\n      }\n    }\n\n    let nextElem = null;\n    if (e.code === KeyboardCode.ARROW_DOWN) {\n      nextElem =\n        currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] || options[lastElemIndex];\n    } else if (e.code === KeyboardCode.ARROW_UP) {\n      nextElem =\n        currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];\n    }\n\n    this.focusSelectItem(nextElem.id);\n  }\n\n  private focusSelectItem(optionId: string): void {\n    this.focusedItemId = optionId;\n    const elem = this.host.querySelector(`#${optionId}`);\n    // @ts-expect-error 'container' does not exist in type 'ScrollIntoViewOptions'\n    elem.scrollIntoView({block: \"nearest\", container: \"nearest\"});\n  }\n\n  private toggleSelectUl(selfFocusOnClose = false): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (!this.isOpen) {\n      document.addEventListener(\"click\", this.handleSelectFocus);\n      document.addEventListener(\"keyup\", this.handleSelectFocus);\n    } else {\n      document.removeEventListener(\"click\", this.handleSelectFocus);\n      document.removeEventListener(\"keyup\", this.handleSelectFocus);\n      if (selfFocusOnClose) {\n        (this.host.querySelector(`#${this.htmlid}_select_input`) as HTMLInputElement)?.focus();\n      }\n\n      if (this.selectedItem && this.searchString) {\n        this.searchString = null;\n        this.filterItems(this.searchString);\n      }\n    }\n\n    this.focusedItemId = \"\";\n    this.isOpen = !this.isOpen;\n  }\n\n  private handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    if ((e.target as HTMLElement).closest(\".reset-icon\")) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    this.toggleSelectUl();\n  }\n\n  private handleSelectFocus(e: MouseEvent | KeyboardEvent): void {\n    if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {\n      e.stopPropagation();\n\n      return this.toggleSelectUl(true);\n    }\n\n    if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB) {\n      return;\n    }\n\n    const clickedElement = getClickedElement();\n    if (clickedElement?.hasAttribute(\"disabled\")) {\n      return;\n    }\n\n    if (\n      !getElementTree(clickedElement).find(\n        (elem: HTMLElement) => elem.nodeName.toLowerCase() === \"z-input\" && elem.id === `${this.htmlid}_input`\n      )\n    ) {\n      const zSelect = getElementTree(clickedElement).find((e) => e.nodeName === \"Z-SELECT\");\n      this.toggleSelectUl(zSelect === this.host);\n    }\n  }\n\n  private scrollToLetter(letter: string): void {\n    if (!this.itemsList.length) {\n      return;\n    }\n\n    const foundItem = this.itemsList.find(\n      (item: SelectItem) => item.name.toLowerCase().charAt(0) === letter.toLowerCase()\n    );\n    if (foundItem) {\n      if (!this.isOpen) {\n        this.toggleSelectUl();\n      }\n      this.focusSelectItem(this.getOptionId(foundItem));\n    }\n  }\n\n  private renderInput(): HTMLElement[] {\n    let value = null;\n    if (this.selectedItem) {\n      value = getPlainText(this.selectedItem.name);\n    }\n    if (this.isOpen && this.searchString !== undefined) {\n      value = this.searchString;\n    }\n\n    return [\n      <z-input\n        class={{\n          \"active-select\": this.isOpen,\n          \"cursor-select\": !this.autocomplete,\n        }}\n        id={`${this.htmlid}_input`}\n        htmlid={`${this.htmlid}_select_input`}\n        placeholder={this.placeholder}\n        value={value}\n        label={this.label}\n        autocomplete=\"off\"\n        htmlAriaLabel={this.htmlAriaLabel || undefined}\n        icon={this.isOpen ? \"caret-up\" : \"caret-down\"}\n        hasclearicon={false}\n        message={false}\n        name={this.name}\n        disabled={this.disabled}\n        readonly={this.readonly || (!this.hasAutocomplete() && this.isOpen)}\n        required={this.required}\n        status={this.isOpen ? undefined : this.status}\n        size={this.size}\n        role=\"combobox\"\n        html-aria-expanded={this.isOpen ? \"true\" : \"false\"}\n        html-aria-controls={`${this.htmlid}_list`}\n        html-aria-activedescendant={this.isOpen ? this.focusedItemId : \"\"}\n        html-aria-autocomplete={this.hasAutocomplete() ? \"list\" : undefined}\n        onClick={(e: MouseEvent) => this.handleInputClick(e)}\n        onKeyDown={(e: KeyboardEvent) => this.handleInputKeyDown(e)}\n        onInputChange={(e: CustomEvent) => this.handleInputChange(e)}\n        onKeyPress={(e: KeyboardEvent) => {\n          if (!this.hasAutocomplete()) {\n            e.preventDefault();\n            this.scrollToLetter(e.key);\n          }\n        }}\n      />,\n    ];\n  }\n\n  private renderSelectUl(): HTMLDivElement {\n    return (\n      <div class={this.isOpen ? \"open\" : \"closed\"}>\n        <div\n          class={{\n            \"ul-scroll-wrapper\": true,\n            \"fixed\": this.isfixed,\n          }}\n        >\n          <z-list\n            role=\"listbox\"\n            aria-label={this.htmlAriaLabel || this.label}\n            tabindex={this.disabled || this.readonly || !this.isOpen ? -1 : 0}\n            id={`${this.htmlid}_list`}\n            aria-multiselectable={false}\n            size={this.listSizeType()}\n            class={{\n              \"disabled\": this.disabled,\n              \"readonly\": this.readonly,\n              [`input-${this.status}`]: !this.isOpen && !!this.status,\n              \"z-scrollbar\": true,\n            }}\n          >\n            {this.resetItem && this.renderResetItem()}\n            {this.renderSelectUlItems()}\n          </z-list>\n        </div>\n      </div>\n    );\n  }\n\n  private renderResetItem(): HTMLZListElementElement {\n    const hidden = !this.selectedItem || !this.resetItem;\n\n    return (\n      <z-list-element\n        class={{\n          \"hide\": hidden,\n          \"reset-item\": true,\n          \"reset-item-margin\": !this.hasGroupItems,\n        }}\n        clickable={true}\n        disabled={false}\n        dividerType={ListDividerType.ELEMENT}\n        role={hidden ? \"presentation\" : \"option\"}\n        htmlTabindex={this.isOpen ? 0 : null}\n        aria-selected=\"false\"\n        aria-label={hidden ? undefined : this.resetItem}\n        id={this.getResetOptionId()}\n        size={this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType()}\n        onClickItem={() => this.handleResetClick()}\n      >\n        <div\n          class={{\n            \"reset-item-content\": true,\n            \"tree-list-reset-item\": this.hasTreeItems,\n            \"active\": this.focusedItemId === this.getResetOptionId(),\n          }}\n          aria-hidden=\"true\"\n        >\n          <z-icon name=\"multiply-circled\" />\n          <span>{this.resetItem}</span>\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private renderItem(item: SelectItem, lastItem: boolean): HTMLZListElementElement {\n    return (\n      <z-list-element\n        clickable={!item.disabled}\n        disabled={item.disabled}\n        dividerType={lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT}\n        role={item.disabled ? \"presentation\" : \"option\"}\n        htmlTabindex={-1}\n        aria-selected={item.selected ? \"true\" : \"false\"}\n        aria-label={item.disabled ? undefined : getPlainText(item.name)}\n        id={this.getOptionId(item)}\n        size={this.listSizeType()}\n        onClickItem={() => this.selectItem(item)}\n      >\n        <div\n          class={{\n            \"list-element-container\": true,\n            \"active\": this.focusedItemId === this.getOptionId(item),\n          }}\n          aria-hidden=\"true\"\n        >\n          <div\n            class={{\n              \"selected\": !!item.selected,\n              \"list-element-content\": true,\n            }}\n            innerHTML={item.name}\n          />\n          {item.icon && <z-tag icon={item.icon}></z-tag>}\n        </div>\n      </z-list-element>\n    );\n  }\n\n  private listSizeType(): ListSize {\n    if (this.hasTreeItems) {\n      return ListSize.NONE;\n    }\n\n    if (this.size === ControlSize.SMALL || this.size === ControlSize.X_SMALL) {\n      return ListSize.SMALL;\n    }\n\n    return ListSize.MEDIUM;\n  }\n\n  private renderSelectUlItems():\n    | HTMLZListElementElement\n    | (HTMLZListElementElement | HTMLZListElementElement[])[]\n    | HTMLZListGroupElement[] {\n    if (!this.itemsList.length) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasGroupItems) {\n      if (this.hasTreeItems) {\n        return this.renderGroupedTree();\n      }\n\n      return this.renderSelectGroupItems();\n    }\n\n    return this.itemsList.map((item: SelectItem, index, array) => {\n      const isLastItem = index === array.length - 1;\n      const parentHasSiblings = array.length > 1;\n\n      if (this.hasTreeItems) {\n        return this.renderTreeItems(item, isLastItem, parentHasSiblings, true, item.disabled);\n      }\n\n      return this.renderItem(item, isLastItem);\n    });\n  }\n\n  private renderTreeItems(\n    item: SelectItem,\n    isLastChild: boolean,\n    parentHasSiblings: boolean,\n    isTopLevel?: boolean,\n    disabledAncestor?: boolean\n  ): HTMLZListElementElement[] {\n    const isDisabled = item.disabled || disabledAncestor;\n\n    const hasDivider = this.hasGroupItems\n      ? undefined\n      : this.hasGroupItems\n        ? isLastChild && !parentHasSiblings\n          ? ListDividerType.ELEMENT\n          : undefined\n        : isTopLevel && parentHasSiblings && !isLastChild\n          ? ListDividerType.ELEMENT\n          : undefined;\n\n    return (\n      <z-list-element\n        clickable={!item.disabled}\n        disabled={isDisabled}\n        class={{\n          \"grouped-tree-parent-node\": this.hasGroupItems && !!item.children?.length,\n          \"tree-search-item\": this.hasGroupItems && isTopLevel && !item.children?.length && !!this.searchString,\n        }}\n        size={this.listSizeType()}\n        dividerType={hasDivider}\n        hasTreeItems={this.hasTreeItems}\n        htmlTabindex={null}\n        role=\"presentation\"\n      >\n        <div\n          id={this.getOptionId(item)}\n          role={isDisabled ? \"presentation\" : \"option\"}\n          aria-label={isDisabled ? undefined : getPlainText(item.name)}\n          class={{\"list-element\": true, \"active\": this.focusedItemId === this.getOptionId(item)}}\n          onClick={() => this.selectItem(item)}\n        >\n          <span\n            class=\"item ellipsis\"\n            aria-hidden=\"true\"\n          >\n            <span\n              class={{\n                \"item-label\": true,\n                \"selected\": !!item.selected,\n              }}\n              title={item.name}\n              innerHTML={item.name}\n            />\n          </span>\n          {item.icon && <z-tag icon={item.icon}></z-tag>}\n        </div>\n        {item.children && item.children.length > 0 ? (\n          <z-list role=\"presentation\">\n            <div class=\"children-node\">\n              {item.children.map((child, index, arr) =>\n                this.renderTreeItems(\n                  child,\n                  index === arr.length - 1,\n                  arr.length > 1,\n                  false, // isTopLevel = false for children\n                  isDisabled\n                )\n              )}\n            </div>\n          </z-list>\n        ) : null}\n      </z-list-element>\n    );\n  }\n\n  private renderGroupedTree(): HTMLZListGroupElement[] {\n    const groupedItems = this.getGroupedItems();\n\n    return groupedItems.map(([category, items], index, entries) => {\n      const parentHasSiblings = Object.values(groupedItems).some((groupItems) => groupItems.length > 1);\n\n      return (\n        <z-list-group\n          divider-type={index === entries.length - 1 ? undefined : ListDividerType.ELEMENT}\n          hasTreeItems={true}\n          aria-labelledby={`${this.htmlid}_tree_${index}`}\n        >\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n            id={`${this.htmlid}_tree_${index}`}\n            aria-hidden=\"true\"\n          >\n            {category}\n          </span>\n          <z-list role=\"presentation\">\n            {items.map((item, i, arr) => [\n              this.renderTreeItems(item, i === arr.length - 1, parentHasSiblings, true, item.disabled),\n              i < arr.length - 1 ? (\n                <z-divider\n                  key={`divider-${i}`}\n                  style={{zIndex: \"100\", height: \"var(--border-size-small)\"}}\n                />\n              ) : null,\n            ])}\n          </z-list>\n          {index !== entries.length - 1 && <z-divider style={{zIndex: \"100\", height: \"var(--border-size-small)\"}} />}\n        </z-list-group>\n      );\n    });\n  }\n\n  private renderSelectGroupItems(): HTMLZListElementElement[] {\n    const groupedItems = this.getGroupedItems();\n\n    return groupedItems.map(([key, items], index) => {\n      const isLastGroup = groupedItems.length === index + 1;\n\n      return (\n        <z-list-group\n          divider-type={ListDividerType.ELEMENT}\n          aria-labelledby={`${this.htmlid}_group_${index}`}\n        >\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n            id={`${this.htmlid}_group_${index}`}\n            aria-hidden=\"true\"\n          >\n            {key}\n          </span>\n          {items.map((item, subindex) => {\n            const isLastItem = items.length === subindex + 1;\n\n            return this.renderItem(item, isLastGroup && isLastItem);\n          })}\n        </z-list-group>\n      );\n    });\n  }\n\n  private renderNoSearchResults(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        class=\"no-results\"\n        size={this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType()}\n        htmlTabindex={null}\n        role=\"presentation\"\n      >\n        {this.noresultslabel}\n      </z-list-element>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n        disabled={this.disabled}\n      />\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"select-wrapper\">\n        {this.renderInput()}\n        {this.renderSelectUl()}\n        {this.renderMessage()}\n      </div>\n    );\n  }\n}\n"],"mappings":"ufAAA,MAAMA,EAAY,IAAM,omP,MCqBXC,EAAOC,EAAA,MAAAD,UAAAE,EAiGlB,WAAAC,CAAAC,G,gIA5FAC,KAAAC,OAAS,MAAMC,MAoBfF,KAAAG,SAAqB,MAIrBH,KAAAI,SAAqB,MAIrBJ,KAAAK,SAAqB,MAgBrBL,KAAAM,QAA6B,KAI7BN,KAAAO,aAAyB,MAIzBP,KAAAQ,eAA0B,mBAgB1BR,KAAAS,QAAoB,MAQpBT,KAAAU,KAAqBC,EAAYC,IAGjCZ,KAAAa,OAAS,MAGTb,KAAAc,aAAkC,KAQ1Bd,KAAAe,UAA0B,GAGhCf,KAAKgB,eAAiBhB,KAAKgB,eAAeC,KAAKjB,MAC/CA,KAAKkB,kBAAoBlB,KAAKkB,kBAAkBD,KAAKjB,KACtD,CAGD,UAAAmB,GACEnB,KAAKe,UAAYf,KAAKoB,uBAEtBpB,KAAKc,aAAed,KAAKqB,iBAAiBrB,KAAKe,U,CAKjD,qBAAMO,GACJ,OAAOtB,KAAKc,Y,CAKd,cAAMS,GACJ,OAAOvB,KAAKwB,kB,CAKd,cAAMC,CAASC,GACb,IAAIC,EAAmB,GACvB,UAAWD,IAAU,SAAU,CAC7BC,EAAOC,KAAKF,E,KACP,CACLC,EAASD,C,CAGX1B,KAAKe,UAAYf,KAAKoB,uBACtB,GAAIO,EAAOE,OAAQ,CACjB7B,KAAK8B,gBAAgB9B,KAAKe,UAAWY,EAAO,G,CAE9C3B,KAAKc,aAAed,KAAKqB,iBAAiBrB,KAAKe,U,CAOzC,gBAAAgB,GACN/B,KAAKgC,aAAaC,KAAK,CACrBC,GAAIlC,KAAKC,OACTkC,SAAUnC,KAAKwB,oB,CAQX,eAAAY,GACNpC,KAAKqC,YAAYJ,KAAK,CACpBC,GAAIlC,KAAKC,Q,CAIb,iBAAAqC,GACEtC,KAAKmB,Y,CAGP,mBAAAoB,GACEvC,KAAKwC,YAAYxC,KAAKyC,a,CAGhB,oBAAArB,GACN,cAAcpB,KAAK0C,QAAU,SAAWC,KAAKC,MAAM5C,KAAK0C,OAAS1C,KAAK0C,K,CAGhE,2BAAAG,G,MACN,MAAMC,EAAmB9C,KAAKoB,uBAE9BpB,KAAK8B,gBAAgBgB,GAAkBC,EAAA/C,KAAKc,gBAAY,MAAAiC,SAAA,SAAAA,EAAEb,IAE1D,OAAOY,C,CAGD,gBAAAtB,G,MACN,OAAOuB,EAAA/C,KAAKc,gBAAY,MAAAiC,SAAA,SAAAA,EAAEb,E,CAGpB,WAAAc,CAAYC,GAClB,MAAO,GAAGjD,KAAKC,cAAcgD,EAAKf,GAAKgB,EAAa,GAAGD,EAAKf,MAAQgB,EAAa,GAAGD,EAAKE,S,CAGnF,gBAAAC,GACN,MAAO,GAAGpD,KAAKC,kB,CAGT,eAAAoD,GACN,IAAKrD,KAAKe,UAAUc,OAAQ,CAC1B,MAAO,E,CAGT,OAAOyB,OAAOC,QACZvD,KAAKe,UAAUyC,QACb,CAACC,EAAOR,KACN,MAAMS,EAAWT,EAAKS,UAAY,kBAClCD,EAAMC,GAAYD,EAAMC,IAAa,GACrCD,EAAMC,GAAU9B,KAAKqB,GAErB,OAAOQ,CAAK,GAEd,I,CAKE,WAAAjB,CAAYC,GAClB,IAAIkB,EAAW3D,KAAK6C,8BAEpB,KAAKJ,IAAY,MAAZA,SAAY,SAAZA,EAAcZ,QAAQ,CACzB7B,KAAKe,UAAY4C,EAEjB,M,CAGFA,EAAWA,EAASC,KAAKX,GAASK,OAAAO,OAAAP,OAAAO,OAAA,GAAKZ,GAAI,CAAEE,KAAMW,EAAab,EAAKE,UAErE,GAAInD,KAAK+D,aAAc,CACrB/D,KAAKe,UAAYf,KAAKgE,WAAWL,EAAUlB,EAAc,M,KACpD,CACLzC,KAAKe,UAAY4C,EACdM,QAAQhB,GAAqBA,EAAKE,KAAKe,cAAcC,SAAS1B,EAAayB,iBAC3EN,KAAKX,IACJA,EAAKE,KAAOnD,KAAKoE,mBAAmBnB,EAAKE,KAAMV,GAE/C,OAAOQ,CAAI,G,EAKX,UAAAe,CAAWtB,EAAqBD,EAAsB4B,GAC5D,IAAK3B,EAAO,CACV,MAAO,E,CAGT,OAAOA,EACJkB,KAAKX,IACJ,MAAMqB,EAAQrB,EAAKE,KAAKe,cAAcC,SAAS1B,EAAayB,eAE5D,MAAMK,EAAOjB,OAAAO,OAAA,GAAmBZ,GAChC,GAAIsB,EAAQC,UAAYD,EAAQC,SAAS3C,OAAS,EAAG,CACnD0C,EAAQC,SAAWxE,KAAKgE,WACtBO,EAAQC,SAASZ,KAAKX,GAASK,OAAAO,OAAAP,OAAAO,OAAA,GAAKZ,GAAI,CAAEE,KAAMW,EAAab,EAAKE,UAClEV,EACA6B,E,CAIJ,GAAIA,EAAO,CACTC,EAAQpB,KAAOnD,KAAKoE,mBAAmBG,EAAQpB,KAAMV,E,CAEvD,GACE6B,GACCC,EAAQC,UAAYD,EAAQC,SAAS3C,OAAS,GAC9C7B,KAAKyE,8BAAgCJ,EACtC,CACA,OAAOE,C,CAGT,OAAO,IAAI,IAEZN,QAAQhB,GAASA,IAAS,M,CAGvB,kBAAAmB,CAAmBM,EAAcC,GACvC,MAAMC,EAAYF,EAAKR,cACvB,MAAMW,EAAcF,EAAOT,cAC3B,MAAMY,EAAQF,EAAUG,QAAQF,GAEhC,GAAIC,KAAU,EAAI,CAChB,OAAOJ,C,CAGT,MAAMM,EAAMF,EAAQH,EAAO9C,OAE3B,OAAO6C,EAAKO,UAAU,EAAGH,GAAS,WAAWJ,EAAKO,UAAUH,EAAOE,cAAkBN,EAAKO,UAAUD,E,CAG9F,eAAAE,GACN,OAAOC,EAAQnF,KAAKO,gBAAkB,I,CAGhC,iBAAA6E,CAAkBC,GACxBrF,KAAKyC,aAAe4C,EAAEC,OAAO5D,MAC7B,IAAK1B,KAAKa,OAAQ,CAChBb,KAAKgB,gB,EAID,eAAAc,CAAgBY,EAAqB6C,GAC3C,GAAI7C,EAAO,CACTA,EAAM8C,SAASvC,IACbA,EAAKd,SAAWc,EAAKf,KAAOqD,EAC5B,GAAItC,EAAKuB,UAAYvB,EAAKuB,SAAS3C,OAAS,EAAG,CAC7C7B,KAAK8B,gBAAgBmB,EAAKuB,SAAUe,E,MAMpC,gBAAAlE,CAAiBqB,GACvB,GAAIA,EAAO,CACT,IAAK,MAAMO,KAAQP,EAAO,CACxB,GAAIO,EAAKd,SAAU,CACjB,OAAOc,C,CAET,GAAIA,EAAKuB,UAAYvB,EAAKuB,SAAS3C,OAAS,EAAG,CAC7C,MAAM4D,EAAQzF,KAAKqB,iBAAiB4B,EAAKuB,UACzC,GAAIiB,EAAO,CACT,OAAOA,C,IAMf,OAAO,I,CAGD,UAAAC,CAAWvD,GACjB,GAAIA,IAAQ,MAARA,SAAQ,SAARA,EAAUhC,SAAU,CACtB,M,CAGFH,KAAKe,UAAYf,KAAKoB,uBAEtB,GAAIe,EAAU,CACZnC,KAAK8B,gBAAgB9B,KAAKe,UAAWoB,EAASD,G,CAGhDlC,KAAKc,aAAed,KAAKqB,iBAAiBrB,KAAKe,WAC/Cf,KAAK+B,mBACL/B,KAAKgB,iBACL,GAAIhB,KAAKyC,aAAc,CACrBzC,KAAKyC,aAAe,I,EAIhB,gBAAAkD,GACN3F,KAAKc,aAAe,KACpBd,KAAKyC,aAAe,KACpBzC,KAAK4F,cAAgB,GACrB5F,KAAKoC,kBACLpC,KAAKgB,gB,CAGC,kBAAA6E,CAAmBR,GACzB,OAAQA,EAAES,MACR,KAAKC,EAAaC,MAClB,KAAKD,EAAaE,MAChB,GAAIjG,KAAK4F,cAAe,CACtB,GAAI5F,KAAK4F,gBAAkB5F,KAAKoD,mBAAoB,CAClDpD,KAAK2F,kB,KACA,CACL,MAAM1C,EAAOjD,KAAKe,UAAUmF,MAAMb,GAAMrF,KAAKgD,YAAYqC,KAAOrF,KAAK4F,iBAAkB,KACvF,GAAI3C,EAAM,CACRjD,KAAKc,aAAemC,EACpBjD,KAAK+B,mBACL/B,KAAKgB,gB,QAGJ,IAAKhB,KAAKkF,kBAAmB,CAClCG,EAAEc,iBACFnG,KAAKgB,gB,CAEP,MACF,KAAK+E,EAAaK,WAClB,KAAKL,EAAaM,SAChBrG,KAAKsG,gBAAgBjB,GACrB,M,CAIE,eAAAiB,CAAgBjB,GACtB,MAAMkB,EAAS,CAACR,EAAaK,WAAYL,EAAaM,UAEtD,IAAKE,EAAOpC,SAASkB,EAAEmB,KAAsB,CAC3C,M,CAGFnB,EAAEc,iBACFd,EAAEoB,kBAEF,MAAMC,EAAW1G,KAAK4F,cAAgB5F,KAAK2G,KAAKC,cAAc,IAAI5G,KAAK4F,iBAAmB,KAC1F,MAAMiB,EAAUC,MAAMC,KAAK/G,KAAK2G,KAAKK,iBAAiB,oBAEtD,IAAKH,EAAQhF,OAAQ,CACnB,M,CAGF,MAAMoF,EAAgBP,EAAWG,EAAQ9B,QAAQ2B,GAAY,KAC7D,MAAMQ,EAAiB,EACvB,MAAMC,EAAgBN,EAAQhF,OAAS,EAEvC,IAAK7B,KAAKa,OAAQ,CAChBb,KAAKgB,iBAEL,GAAIhB,KAAKc,aAAc,CACrBd,KAAKoH,gBAAgBpH,KAAKgD,YAAYhD,KAAKc,eAE3C,M,EAIJ,IAAIuG,EAAW,KACf,GAAIhC,EAAES,OAASC,EAAaK,WAAY,CACtCiB,EACEJ,IAAkB,KAAOJ,EAAQK,GAAkBL,EAAQI,EAAgB,IAAMJ,EAAQM,E,MACtF,GAAI9B,EAAES,OAASC,EAAaM,SAAU,CAC3CgB,EACEJ,IAAkB,KAAOJ,EAAQM,GAAiBN,EAAQI,EAAgB,IAAMJ,EAAQK,E,CAG5FlH,KAAKoH,gBAAgBC,EAASnF,G,CAGxB,eAAAkF,CAAgBE,GACtBtH,KAAK4F,cAAgB0B,EACrB,MAAMC,EAAOvH,KAAK2G,KAAKC,cAAc,IAAIU,KAEzCC,EAAKC,eAAe,CAACC,MAAO,UAAWC,UAAW,W,CAG5C,cAAA1G,CAAe2G,EAAmB,O,MACxC,GAAI3H,KAAKG,UAAYH,KAAKI,SAAU,CAClC,M,CAGF,IAAKJ,KAAKa,OAAQ,CAChB+G,SAASC,iBAAiB,QAAS7H,KAAKkB,mBACxC0G,SAASC,iBAAiB,QAAS7H,KAAKkB,kB,KACnC,CACL0G,SAASE,oBAAoB,QAAS9H,KAAKkB,mBAC3C0G,SAASE,oBAAoB,QAAS9H,KAAKkB,mBAC3C,GAAIyG,EAAkB,EACpB5E,EAAC/C,KAAK2G,KAAKC,cAAc,IAAI5G,KAAKC,0BAA2C,MAAA8C,SAAA,SAAAA,EAAEgF,O,CAGjF,GAAI/H,KAAKc,cAAgBd,KAAKyC,aAAc,CAC1CzC,KAAKyC,aAAe,KACpBzC,KAAKwC,YAAYxC,KAAKyC,a,EAI1BzC,KAAK4F,cAAgB,GACrB5F,KAAKa,QAAUb,KAAKa,M,CAGd,gBAAAmH,CAAiB3C,GACvB,GAAKA,EAAE4C,OAAuBC,QAAQ,eAAgB,CACpD7C,EAAEoB,kBAEF,M,CAGFzG,KAAKgB,gB,CAGC,iBAAAE,CAAkBmE,GACxB,GAAIA,aAAa8C,eAAiB9C,EAAEmB,MAAQT,EAAaqC,IAAK,CAC5D/C,EAAEoB,kBAEF,OAAOzG,KAAKgB,eAAe,K,CAG7B,GAAIqE,aAAa8C,eAAiB9C,EAAEmB,MAAQT,EAAasC,IAAK,CAC5D,M,CAGF,MAAMC,EAAiBC,IACvB,GAAID,IAAc,MAAdA,SAAc,SAAdA,EAAgBE,aAAa,YAAa,CAC5C,M,CAGF,IACGC,EAAeH,GAAgBpC,MAC7BqB,GAAsBA,EAAKmB,SAASC,gBAAkB,WAAapB,EAAKrF,KAAO,GAAGlC,KAAKC,iBAE1F,CACA,MAAM2I,EAAUH,EAAeH,GAAgBpC,MAAMb,GAAMA,EAAEqD,WAAa,aAC1E1I,KAAKgB,eAAe4H,IAAY5I,KAAK2G,K,EAIjC,cAAAkC,CAAeC,GACrB,IAAK9I,KAAKe,UAAUc,OAAQ,CAC1B,M,CAGF,MAAMkH,EAAY/I,KAAKe,UAAUmF,MAC9BjD,GAAqBA,EAAKE,KAAKwF,cAAcK,OAAO,KAAOF,EAAOH,gBAErE,GAAII,EAAW,CACb,IAAK/I,KAAKa,OAAQ,CAChBb,KAAKgB,gB,CAEPhB,KAAKoH,gBAAgBpH,KAAKgD,YAAY+F,G,EAIlC,WAAAE,GACN,IAAIvH,EAAQ,KACZ,GAAI1B,KAAKc,aAAc,CACrBY,EAAQoC,EAAa9D,KAAKc,aAAaqC,K,CAEzC,GAAInD,KAAKa,QAAUb,KAAKyC,eAAiByG,UAAW,CAClDxH,EAAQ1B,KAAKyC,Y,CAGf,MAAO,CACL0G,EAAA,WACEC,MAAO,CACL,gBAAiBpJ,KAAKa,OACtB,iBAAkBb,KAAKO,cAEzB2B,GAAI,GAAGlC,KAAKC,eACZA,OAAQ,GAAGD,KAAKC,sBAChBoJ,YAAarJ,KAAKqJ,YAClB3H,MAAOA,EACP4H,MAAOtJ,KAAKsJ,MACZ/I,aAAa,MACbgJ,cAAevJ,KAAKuJ,eAAiBL,UACrCM,KAAMxJ,KAAKa,OAAS,WAAa,aACjC4I,aAAc,MACdnJ,QAAS,MACT6C,KAAMnD,KAAKmD,KACXhD,SAAUH,KAAKG,SACfC,SAAUJ,KAAKI,WAAcJ,KAAKkF,mBAAqBlF,KAAKa,OAC5DR,SAAUL,KAAKK,SACfqJ,OAAQ1J,KAAKa,OAASqI,UAAYlJ,KAAK0J,OACvChJ,KAAMV,KAAKU,KACXiJ,KAAK,WAAU,qBACK3J,KAAKa,OAAS,OAAS,QAAO,qBAC9B,GAAGb,KAAKC,cAAa,6BACbD,KAAKa,OAASb,KAAK4F,cAAgB,GAAE,yBACzC5F,KAAKkF,kBAAoB,OAASgE,UAC1DU,QAAUvE,GAAkBrF,KAAKgI,iBAAiB3C,GAClDwE,UAAYxE,GAAqBrF,KAAK6F,mBAAmBR,GACzDyE,cAAgBzE,GAAmBrF,KAAKoF,kBAAkBC,GAC1D0E,WAAa1E,IACX,IAAKrF,KAAKkF,kBAAmB,CAC3BG,EAAEc,iBACFnG,KAAK6I,eAAexD,EAAEmB,I,MAOxB,cAAAwD,GACN,OACEb,EAAA,OAAKC,MAAOpJ,KAAKa,OAAS,OAAS,UACjCsI,EAAA,OACEC,MAAO,CACL,oBAAqB,KACrBa,MAASjK,KAAKS,UAGhB0I,EAAA,UACEQ,KAAK,UAAS,aACF3J,KAAKuJ,eAAiBvJ,KAAKsJ,MACvCY,SAAUlK,KAAKG,UAAYH,KAAKI,WAAaJ,KAAKa,QAAS,EAAK,EAChEqB,GAAI,GAAGlC,KAAKC,cAAa,uBACH,MACtBS,KAAMV,KAAKmK,eACXf,MAAO,CACLjJ,SAAYH,KAAKG,SACjBC,SAAYJ,KAAKI,SACjB,CAAC,SAASJ,KAAK0J,WAAY1J,KAAKa,UAAYb,KAAK0J,OACjD,cAAe,OAGhB1J,KAAKoK,WAAapK,KAAKqK,kBACvBrK,KAAKsK,wB,CAOR,eAAAD,GACN,MAAME,GAAUvK,KAAKc,eAAiBd,KAAKoK,UAE3C,OACEjB,EAAA,kBACEC,MAAO,CACLoB,KAAQD,EACR,aAAc,KACd,qBAAsBvK,KAAKyK,eAE7BC,UAAW,KACXvK,SAAU,MACVwK,YAAaC,EAAgBC,QAC7BlB,KAAMY,EAAS,eAAiB,SAChCO,aAAc9K,KAAKa,OAAS,EAAI,KAAI,gBACtB,QAAO,aACT0J,EAASrB,UAAYlJ,KAAKoK,UACtClI,GAAIlC,KAAKoD,mBACT1C,KAAMV,KAAK+D,aAAegH,EAASC,OAAShL,KAAKmK,eACjDc,YAAa,IAAMjL,KAAK2F,oBAExBwD,EAAA,OACEC,MAAO,CACL,qBAAsB,KACtB,uBAAwBpJ,KAAK+D,aAC7BmH,OAAUlL,KAAK4F,gBAAkB5F,KAAKoD,oBACvC,cACW,QAEZ+F,EAAA,UAAQhG,KAAK,qBACbgG,EAAA,YAAOnJ,KAAKoK,Y,CAMZ,UAAAe,CAAWlI,EAAkBmI,GACnC,OACEjC,EAAA,kBACEuB,WAAYzH,EAAK9C,SACjBA,SAAU8C,EAAK9C,SACfwK,YAAaS,EAAWR,EAAgBS,OAAST,EAAgBC,QACjElB,KAAM1G,EAAK9C,SAAW,eAAiB,SACvC2K,cAAc,EAAE,gBACD7H,EAAKd,SAAW,OAAS,QAAO,aACnCc,EAAK9C,SAAW+I,UAAYpF,EAAab,EAAKE,MAC1DjB,GAAIlC,KAAKgD,YAAYC,GACrBvC,KAAMV,KAAKmK,eACXc,YAAa,IAAMjL,KAAK0F,WAAWzC,IAEnCkG,EAAA,OACEC,MAAO,CACL,yBAA0B,KAC1B8B,OAAUlL,KAAK4F,gBAAkB5F,KAAKgD,YAAYC,IACnD,cACW,QAEZkG,EAAA,OACEC,MAAO,CACLjH,WAAcc,EAAKd,SACnB,uBAAwB,MAE1BmJ,UAAWrI,EAAKE,OAEjBF,EAAKuG,MAAQL,EAAA,SAAOK,KAAMvG,EAAKuG,Q,CAMhC,YAAAW,GACN,GAAInK,KAAK+D,aAAc,CACrB,OAAOgH,EAASQ,I,CAGlB,GAAIvL,KAAKU,OAASC,EAAY6K,OAASxL,KAAKU,OAASC,EAAY8K,QAAS,CACxE,OAAOV,EAASS,K,CAGlB,OAAOT,EAASC,M,CAGV,mBAAAV,GAIN,IAAKtK,KAAKe,UAAUc,OAAQ,CAC1B,OAAO7B,KAAK0L,uB,CAGd,GAAI1L,KAAKyK,cAAe,CACtB,GAAIzK,KAAK+D,aAAc,CACrB,OAAO/D,KAAK2L,mB,CAGd,OAAO3L,KAAK4L,wB,CAGd,OAAO5L,KAAKe,UAAU6C,KAAI,CAACX,EAAkB4I,EAAOC,KAClD,MAAMC,EAAaF,IAAUC,EAAMjK,OAAS,EAC5C,MAAMmK,EAAoBF,EAAMjK,OAAS,EAEzC,GAAI7B,KAAK+D,aAAc,CACrB,OAAO/D,KAAKiM,gBAAgBhJ,EAAM8I,EAAYC,EAAmB,KAAM/I,EAAK9C,S,CAG9E,OAAOH,KAAKmL,WAAWlI,EAAM8I,EAAW,G,CAIpC,eAAAE,CACNhJ,EACAiJ,EACAF,EACAG,EACAC,G,QAEA,MAAMC,EAAapJ,EAAK9C,UAAYiM,EAEpC,MAAME,EAAatM,KAAKyK,cACpBvB,UACAlJ,KAAKyK,cACHyB,IAAgBF,EACdpB,EAAgBC,QAChB3B,UACFiD,GAAcH,IAAsBE,EAClCtB,EAAgBC,QAChB3B,UAER,OACEC,EAAA,kBACEuB,WAAYzH,EAAK9C,SACjBA,SAAUkM,EACVjD,MAAO,CACL,2BAA4BpJ,KAAKyK,mBAAmB1H,EAAAE,EAAKuB,YAAQ,MAAAzB,SAAA,SAAAA,EAAElB,QACnE,mBAAoB7B,KAAKyK,eAAiB0B,MAAeI,EAAAtJ,EAAKuB,YAAQ,MAAA+H,SAAA,SAAAA,EAAE1K,WAAY7B,KAAKyC,cAE3F/B,KAAMV,KAAKmK,eACXQ,YAAa2B,EACbvI,aAAc/D,KAAK+D,aACnB+G,aAAc,KACdnB,KAAK,gBAELR,EAAA,OACEjH,GAAIlC,KAAKgD,YAAYC,GACrB0G,KAAM0C,EAAa,eAAiB,SAAQ,aAChCA,EAAanD,UAAYpF,EAAab,EAAKE,MACvDiG,MAAO,CAAC,eAAgB,KAAM8B,OAAUlL,KAAK4F,gBAAkB5F,KAAKgD,YAAYC,IAChF2G,QAAS,IAAM5J,KAAK0F,WAAWzC,IAE/BkG,EAAA,QACEC,MAAM,gBAAe,cACT,QAEZD,EAAA,QACEC,MAAO,CACL,aAAc,KACdjH,WAAcc,EAAKd,UAErBqK,MAAOvJ,EAAKE,KACZmI,UAAWrI,EAAKE,QAGnBF,EAAKuG,MAAQL,EAAA,SAAOK,KAAMvG,EAAKuG,QAEjCvG,EAAKuB,UAAYvB,EAAKuB,SAAS3C,OAAS,EACvCsH,EAAA,UAAQQ,KAAK,gBACXR,EAAA,OAAKC,MAAM,iBACRnG,EAAKuB,SAASZ,KAAI,CAAC6I,EAAOZ,EAAOa,IAChC1M,KAAKiM,gBACHQ,EACAZ,IAAUa,EAAI7K,OAAS,EACvB6K,EAAI7K,OAAS,EACb,MACAwK,OAKN,K,CAKF,iBAAAV,GACN,MAAMgB,EAAe3M,KAAKqD,kBAE1B,OAAOsJ,EAAa/I,KAAI,EAAEF,EAAUhB,GAAQmJ,EAAOtI,KACjD,MAAMyI,EAAoB1I,OAAO3B,OAAOgL,GAAcC,MAAMC,GAAeA,EAAWhL,OAAS,IAE/F,OACEsH,EAAA,+BACgB0C,IAAUtI,EAAQ1B,OAAS,EAAIqH,UAAY0B,EAAgBC,QACzE9G,aAAc,KAAI,kBACD,GAAG/D,KAAKC,eAAe4L,KAExC1C,EAAA,QACEC,MAAM,+BACN0D,KAAK,eACL5K,GAAI,GAAGlC,KAAKC,eAAe4L,IAAO,cACtB,QAEXnI,GAEHyF,EAAA,UAAQQ,KAAK,gBACVjH,EAAMkB,KAAI,CAACX,EAAM8J,EAAGL,IAAQ,CAC3B1M,KAAKiM,gBAAgBhJ,EAAM8J,IAAML,EAAI7K,OAAS,EAAGmK,EAAmB,KAAM/I,EAAK9C,UAC/E4M,EAAIL,EAAI7K,OAAS,EACfsH,EAAA,aACE3C,IAAK,WAAWuG,IAChBC,MAAO,CAACC,OAAQ,MAAOC,OAAQ,8BAE/B,SAGPrB,IAAUtI,EAAQ1B,OAAS,GAAKsH,EAAA,aAAW6D,MAAO,CAACC,OAAQ,MAAOC,OAAQ,8BAC9D,G,CAKb,sBAAAtB,GACN,MAAMe,EAAe3M,KAAKqD,kBAE1B,OAAOsJ,EAAa/I,KAAI,EAAE4C,EAAK9D,GAAQmJ,KACrC,MAAMsB,EAAcR,EAAa9K,SAAWgK,EAAQ,EAEpD,OACE1C,EAAA,+BACgByB,EAAgBC,QAAO,kBACpB,GAAG7K,KAAKC,gBAAgB4L,KAEzC1C,EAAA,QACEC,MAAM,+BACN0D,KAAK,eACL5K,GAAI,GAAGlC,KAAKC,gBAAgB4L,IAAO,cACvB,QAEXrF,GAEF9D,EAAMkB,KAAI,CAACX,EAAMmK,KAChB,MAAMrB,EAAarJ,EAAMb,SAAWuL,EAAW,EAE/C,OAAOpN,KAAKmL,WAAWlI,EAAMkK,GAAepB,EAAW,IAE5C,G,CAKb,qBAAAL,GACN,OACEvC,EAAA,kBACEC,MAAM,aACN1I,KAAMV,KAAK+D,aAAegH,EAASC,OAAShL,KAAKmK,eACjDW,aAAc,KACdnB,KAAK,gBAEJ3J,KAAKQ,e,CAKJ,aAAA6M,GACN,GAAIlI,EAAQnF,KAAKM,WAAa,MAAO,CACnC,M,CAGF,OACE6I,EAAA,mBACE7I,QAAS6E,EAAQnF,KAAKM,WAAa,KAAO4I,UAAalJ,KAAKM,QAC5DoJ,OAAQ1J,KAAK0J,OACbN,MAAOpJ,KAAKU,KACZP,SAAUH,KAAKG,U,CAKrB,MAAAmN,GACE,OACEnE,EAAA,OAAA3C,IAAA,2CAAK4C,MAAM,kBACRpJ,KAAKiJ,cACLjJ,KAAKgK,iBACLhK,KAAKqN,gB","ignoreList":[]}

package/dist/components/z-skip-to-content.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZSkipToContent","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","links","visible","visibleLink","handleFocusOutSkipToContent","e","isInSkipToContent","target","handleFocusSkipToContent","componentDidLoad","showFirstChild","componentWillRender","JSON","parse","elem","tree","getElementTree","menuParent","find","nodeName","toLowerCase","firstChild","_a","hostElement","children","id","handleLinkClick","render","h","Host","key","class","variant","map","link","i","ThemeVariant","DARK","ariaLabel","label","href","onFocus","onClick","onKeyUp","handleKeyboardSubmit","bind"],"sources":["src/components/z-skip-to-content/styles.css?tag=z-skip-to-content&encapsulation=scoped","src/components/z-skip-to-content/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  left: -100%;\n  height: 60px;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);\n  background-color: #24f4ff;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  text-align: center;\n}\n\n:host > .link-container {\n  display: inline-flex;\n  height: 100%;\n  align-items: center;\n}\n\n:host.skip-to-content-visible,\n:host:focus {\n  position: static;\n  display: block;\n}\n\n:host > .link-container > a.z-link.link-invisible {\n  overflow: hidden;\n  width: 0;\n  height: 0;\n}\n\n:host > .link-container > a.z-link.link-visible {\n  width: initial;\n  height: initial;\n}\n\n:host.dark {\n  background-color: var(--color-surface05);\n  color: var(--color-surface01);\n}\n\n:host.light {\n  border: var(--border-size-medium) solid var(--color-surface05);\n  background-color: var(--color-surface01);\n  color: var(--color-default-text);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host {\n    text-align: start;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .link-container {\n    padding: 0 calc(var(--space-unit) * 3);\n    border-right: var(--border-size-small) solid var(--color-surface05);\n  }\n\n  :host > .link-container > a.z-link.link-invisible {\n    overflow: initial;\n    width: initial;\n    height: initial;\n  }\n\n  :host > .link-container:first-child {\n    padding-left: 0;\n  }\n\n  :host > .link-container:last-child,\n  :host.dark > .link-container:last-child,\n  :host.light > .link-container:last-child {\n    padding-right: 0;\n    border-right: none;\n  }\n\n  :host.dark > .link-container {\n    border-right: var(--border-size-small) solid var(--color-surface01);\n  }\n}\n","import {Component, ComponentInterface, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {SkipToContentLink, ThemeVariant} from \"../../beans\";\nimport {getElementTree, handleKeyboardSubmit} from \"../../utils/utils\";\n\n/**\n * Component short description.\n */\n@Component({\n  tag: \"z-skip-to-content\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZSkipToContent implements ComponentInterface {\n  /** Graphical variant: `dark`, `light`. */\n  @Prop({reflect: true})\n  variant?: ThemeVariant;\n\n  /** Array to fill link into skip-content */\n  @Prop({mutable: true})\n  links: string | SkipToContentLink[] = [];\n\n  @State()\n  visible = false;\n\n  @State()\n  visibleLink = \"\";\n\n  @Element() hostElement: HTMLZSkipToContentElement;\n\n  @Listen(\"focusout\", {target: \"document\"})\n  handleFocusOutSkipToContent(e: FocusEvent): void {\n    if (this.isInSkipToContent(e.target)) {\n      this.visible = false;\n    }\n  }\n\n  @Listen(\"focusin\", {target: \"document\"})\n  handleFocusSkipToContent(e: FocusEvent): void {\n    if (this.isInSkipToContent(e.target)) {\n      this.visible = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.showFirstChild();\n  }\n\n  componentWillRender(): void {\n    if (this.links) {\n      this.links = typeof this.links === \"string\" ? JSON.parse(this.links) : this.links;\n    }\n  }\n\n  private isInSkipToContent(elem): boolean {\n    const tree = getElementTree(elem);\n    const menuParent = tree.find((elem: Element) => elem.nodeName.toLowerCase() === \"z-skip-to-content\");\n\n    return !!menuParent;\n  }\n\n  private showFirstChild(): void {\n    const firstChild = this.hostElement.children?.[0];\n    if (firstChild) {\n      this.visibleLink = firstChild.id;\n    }\n  }\n\n  private handleLinkClick(): void {\n    this.visible = false;\n  }\n\n  render(): HTMLZSkipToContentElement {\n    return (\n      <Host\n        class={{\n          [this.variant]: true,\n          \"skip-to-content-visible\": this.visible,\n        }}\n      >\n        {(this.links as SkipToContentLink[]).map((link, i) => {\n          const id = `skip-to-content-${i}`;\n\n          return (\n            <div class=\"link-container\">\n              <a\n                id={id}\n                class={{\n                  \"body-1-sb\": true,\n                  \"z-link\": true,\n                  \"z-link-underline\": true,\n                  \"z-link-inverse\": this.variant === ThemeVariant.DARK,\n                  \"link-visible\": id == this.visibleLink,\n                  \"link-invisible\": id != this.visibleLink,\n                }}\n                aria-label={link.ariaLabel || link.label}\n                href={link.href}\n                onFocus={() => (this.visibleLink = id)}\n                onClick={() => this.handleLinkClick()}\n                onKeyUp={(e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this))}\n              >\n                {link.label}\n              </a>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"6LAAA,MAAMA,EAAY,IAAM,y3D,MCaXC,EAAcC,EAAA,MAAAD,UAAAE,EAN3B,WAAAC,CAAAC,G,4CAaEC,KAAAC,MAAsC,GAGtCD,KAAAE,QAAU,MAGVF,KAAAG,YAAc,EAmFf,CA9EC,2BAAAC,CAA4BC,GAC1B,GAAIL,KAAKM,kBAAkBD,EAAEE,QAAS,CACpCP,KAAKE,QAAU,K,EAKnB,wBAAAM,CAAyBH,GACvB,GAAIL,KAAKM,kBAAkBD,EAAEE,QAAS,CACpCP,KAAKE,QAAU,I,EAInB,gBAAAO,GACET,KAAKU,gB,CAGP,mBAAAC,GACE,GAAIX,KAAKC,MAAO,CACdD,KAAKC,aAAeD,KAAKC,QAAU,SAAWW,KAAKC,MAAMb,KAAKC,OAASD,KAAKC,K,EAIxE,iBAAAK,CAAkBQ,GACxB,MAAMC,EAAOC,EAAeF,GAC5B,MAAMG,EAAaF,EAAKG,MAAMJ,GAAkBA,EAAKK,SAASC,gBAAkB,sBAEhF,QAASH,C,CAGH,cAAAP,G,MACN,MAAMW,GAAaC,EAAAtB,KAAKuB,YAAYC,YAAQ,MAAAF,SAAA,SAAAA,EAAG,GAC/C,GAAID,EAAY,CACdrB,KAAKG,YAAckB,EAAWI,E,EAI1B,eAAAC,GACN1B,KAAKE,QAAU,K,CAGjB,MAAAyB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC/B,KAAKgC,SAAU,KAChB,0BAA2BhC,KAAKE,UAGhCF,KAAKC,MAA8BgC,KAAI,CAACC,EAAMC,KAC9C,MAAMV,EAAK,mBAAmBU,IAE9B,OACEP,EAAA,OAAKG,MAAM,kBACTH,EAAA,KACEH,GAAIA,EACJM,MAAO,CACL,YAAa,KACb,SAAU,KACV,mBAAoB,KACpB,iBAAkB/B,KAAKgC,UAAYI,EAAaC,KAChD,eAAgBZ,GAAMzB,KAAKG,YAC3B,iBAAkBsB,GAAMzB,KAAKG,aAC9B,aACW+B,EAAKI,WAAaJ,EAAKK,MACnCC,KAAMN,EAAKM,KACXC,QAAS,IAAOzC,KAAKG,YAAcsB,EACnCiB,QAAS,IAAM1C,KAAK0B,kBACpBiB,QAAUtC,GAAMuC,EAAqBvC,EAAGL,KAAK0B,gBAAgBmB,KAAK7C,QAEjEkC,EAAKK,OAEJ,I","ignoreList":[]}

package/dist/components/z-stepper-item.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZStepperItem","__stencil_proxyCustomElement","HTMLElement","getAttributes","href","this","disabled","onClick","location","undefined","role","current","pressed","tabindex","tabIndex","ariaPressed","String","ariaDisabled","Object","assign","render","h","Host","key","class","htmlAriaLabel","checked","name","index"],"sources":["src/components/z-stepper-item/styles.css?tag=z-stepper-item&encapsulation=shadow","src/components/z-stepper-item/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-icon-width: 18px;\n  --z-icon-height: 18px;\n  --indicator-size: calc(var(--space-unit) * 3.5);\n  --stepper-item-size: calc(var(--space-unit) * 3.5);\n  --indicator-overflow: calc((var(--indicator-size) - var(--stepper-item-size)) / 2);\n  --connector-top: calc(var(--stepper-item-size) / 2);\n}\n\n:host(:not(:first-child)) {\n  flex: 1;\n  justify-content: flex-end;\n}\n\n:host(:not(:first-child))::before {\n  position: absolute;\n  z-index: 1;\n  top: var(--connector-top);\n  right: calc(var(--stepper-item-size) + var(--indicator-overflow));\n  left: 0;\n  display: block;\n  width: auto;\n  border-bottom: var(--border-size-medium) solid var(--color-disabled03);\n  content: \"\";\n  transform: translateY(-50%);\n}\n\n:host(:not([disabled], :first-child))::before {\n  border-bottom: var(--border-size-large) solid var(--color-primary01);\n}\n\n.stepper-item {\n  display: grid;\n  width: var(--stepper-item-size);\n  align-items: center;\n  padding: 0;\n  border: 0;\n  appearance: none;\n  background: transparent;\n  gap: 10px;\n  grid-template-columns: var(--stepper-item-size);\n  grid-template-rows: var(--stepper-item-size) auto;\n  justify-items: center;\n  outline: 0;\n  text-decoration: none;\n}\n\n.indicator {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  width: var(--indicator-size);\n  min-width: 0;\n  height: var(--indicator-size);\n  min-height: 0;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  border: var(--border-size-medium) solid var(--color-primary01);\n  background: var(--color-surface01);\n  border-radius: 50%;\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n}\n\n.indicator-number {\n  display: block;\n  transform: translateY(0.04em);\n}\n\n.stepper-item span:not(.indicator-number) {\n  min-width: 50px;\n  align-self: start;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n  text-align: center;\n}\n\n:host([pressed]) {\n  --indicator-size: calc(var(--space-unit) * 4);\n}\n\n:host([pressed]) .stepper-item {\n  gap: 8px;\n}\n\n:host([pressed]) .stepper-item .indicator {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-sb);\n}\n\n:host([pressed]) .stepper-item span:not(.indicator-number) {\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n:host([href]:not([disabled])) .stepper-item {\n  cursor: pointer;\n}\n\n:host([disabled]) .stepper-item {\n  pointer-events: none;\n}\n\n:host([pressed]:not([disabled])) .indicator {\n  border-color: var(--color-hover-primary);\n  background: var(--color-hover-primary);\n  color: var(--color-text-inverse);\n}\n\n:host([href]:not([disabled]):focus-within) .indicator {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([href]:not([disabled], [pressed], [checked])) .indicator:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n}\n\n:host([disabled]) .indicator {\n  border-color: var(--color-form-disabled01-icon);\n  color: var(--color-form-disabled01-icon);\n}\n\n:host([checked]:not([disabled])) .indicator {\n  border-color: var(--color-primary01);\n  background-color: var(--color-primary01);\n}\n\n:host([checked]:not([disabled])) .indicator z-icon {\n  fill: var(--color-white);\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host {\n    --z-icon-width: 24px;\n    --z-icon-height: 24px;\n    --indicator-size: calc(var(--space-unit) * 4.5);\n    --stepper-item-size: calc(var(--space-unit) * 4.5);\n  }\n\n  .stepper-item {\n    gap: 12px;\n  }\n\n  .stepper-item .indicator,\n  .stepper-item span:not(.indicator-number) {\n    font-size: var(--font-size-3);\n    line-height: 1.5;\n  }\n\n  :host([pressed]) {\n    --indicator-size: calc(var(--space-unit) * 5);\n  }\n\n  :host([pressed]) .stepper-item {\n    gap: 10px;\n  }\n\n  :host([pressed]) .stepper-item .indicator {\n    font-size: var(--font-size-6);\n  }\n}\n\n/* stylelint-disable property-no-unknown */\n@supports (text-box-trim: trim-both) {\n  .indicator-number {\n    text-box-edge: cap alphabetic;\n    text-box-trim: trim-both;\n    transform: none;\n  }\n}\n/* stylelint-enable property-no-unknown */\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-stepper-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepperItem implements ComponentInterface {\n  /**\n   * The number of the step item.\n   */\n  @Prop({reflect: true})\n  index: number;\n\n  /**\n   * The href to navigate on click.\n   */\n  @Prop({reflect: true})\n  href: string;\n\n  /**\n   * The pressed state of the item.\n   */\n  @Prop({reflect: true})\n  pressed: boolean;\n\n  /**\n   * The checked state of the item.\n   */\n  @Prop({reflect: true})\n  checked: boolean;\n\n  /**\n   * The disabled state of the item.\n   */\n  @Prop({reflect: true})\n  disabled: boolean;\n\n  /**\n   * Aria label of the item.\n   */\n  @Prop()\n  htmlAriaLabel: string;\n\n  private getAttributes(): Record<string, unknown> {\n    const href = this.href && !this.disabled ? {onClick: () => (location.href = this.href)} : undefined;\n    const role = href ? {role: \"link\"} : undefined;\n    const current = this.pressed && !this.disabled ? {\"aria-current\": \"step\"} : undefined;\n    const tabindex = this.href === \"\" ? {tabIndex: -1} : undefined;\n    const ariaPressed = !role && this.pressed !== undefined ? {\"aria-pressed\": String(this.pressed)} : undefined;\n    const ariaDisabled = this.disabled !== undefined ? {\"aria-disabled\": String(this.disabled)} : undefined;\n\n    return {\n      ...href,\n      ...role,\n      ...current,\n      ...tabindex,\n      ...ariaPressed,\n      ...ariaDisabled,\n    };\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class=\"stepper-item\"\n          disabled={this.disabled}\n          {...this.getAttributes()}\n          aria-label={this.htmlAriaLabel}\n        >\n          <div class=\"indicator\">\n            {this.checked ? <z-icon name=\"checkmark\" /> : <span class=\"indicator-number\">{this.index}</span>}\n          </div>\n          <span>\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uJAAA,MAAMA,EAAY,IAAM,07G,MCOXC,EAAYC,EAAA,MAAAD,UAAAE,E,iFAqCf,aAAAC,GACN,MAAMC,EAAOC,KAAKD,OAASC,KAAKC,SAAW,CAACC,QAAS,IAAOC,SAASJ,KAAOC,KAAKD,MAASK,UAC1F,MAAMC,EAAON,EAAO,CAACM,KAAM,QAAUD,UACrC,MAAME,EAAUN,KAAKO,UAAYP,KAAKC,SAAW,CAAC,eAAgB,QAAUG,UAC5E,MAAMI,EAAWR,KAAKD,OAAS,GAAK,CAACU,UAAU,GAAML,UACrD,MAAMM,GAAeL,GAAQL,KAAKO,UAAYH,UAAY,CAAC,eAAgBO,OAAOX,KAAKO,UAAYH,UACnG,MAAMQ,EAAeZ,KAAKC,WAAaG,UAAY,CAAC,gBAAiBO,OAAOX,KAAKC,WAAaG,UAE9F,OAAAS,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACKf,GACAM,GACAC,GACAE,GACAE,GACAE,E,CAIP,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACb,KAAK,YACTW,EAAA,SAAAH,OAAAC,OAAA,CAAAI,IAAA,2CACEC,MAAM,eACNlB,SAAUD,KAAKC,UACXD,KAAKF,gBAAe,cACZE,KAAKoB,gBAEjBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACRnB,KAAKqB,QAAUL,EAAA,UAAQM,KAAK,cAAiBN,EAAA,QAAMG,MAAM,oBAAoBnB,KAAKuB,QAErFP,EAAA,QAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZStepper","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key","role","class"],"sources":["src/components/z-stepper/styles.css?tag=z-stepper&encapsulation=shadow","src/components/z-stepper/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.stepper-list {\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  flex-direction: row;\n  padding: 0 calc(var(--space-unit) * 3);\n  margin: 0;\n}\n","import {Component, ComponentInterface, Host, h} from \"@stencil/core\";\n\n/**\n * @slot - slot for `z-stepper-item`\n */\n@Component({\n  tag: \"z-stepper\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepper implements ComponentInterface {\n  render(): HTMLDivElement {\n    return (\n      <Host role=\"navigation\">\n        <div\n          class=\"stepper-list\"\n          role=\"list\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,qR,MCUXC,EAAQC,EAAA,MAAAD,UAAAE,E,iFACnB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,cACTH,EAAA,OAAAE,IAAA,2CACEE,MAAM,eACND,KAAK,QAELH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZTable","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","bordered","expandable","updateExpandable","host","querySelectorAll","length","componentWillLoad","expandableMutationObserver","MutationObserver","observe","childList","subtree","attributes","attributeFilter","attributeOldValue","disconnectedCallback","_a","disconnect","render","h","Host","key","class","role"],"sources":["src/components/deprecated/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/deprecated/table/z-table/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-table--cells-padding: Padding of the cells.\n   */\n\n  position: relative;\n  display: block;\n  overflow: auto;\n  min-width: max-content;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-unit);\n}\n\n:host([expandable]) {\n  --z-table--expand-button-size: 40px;\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/**\n * ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n */\n@Component({\n  tag: \"z-table\",\n  styleUrls: [\"styles.css\", \"../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTable implements ComponentInterface {\n  @Element() host: HTMLZTableElement;\n\n  /**\n   * Whether the table cells should show a border between them.\n   */\n  @Prop({reflect: true})\n  bordered = false;\n\n  /**\n   * Whether the table contains some expandable rows.\n   */\n  @State()\n  expandable = false;\n\n  private updateExpandable(): void {\n    this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n  }\n\n  private expandableMutationObserver: MutationObserver;\n\n  /**\n   * Setup the table creating a mutation observer for the expandable attribute.\n   */\n  componentWillLoad(): void {\n    this.expandableMutationObserver = new MutationObserver(() => {\n      this.updateExpandable();\n    });\n    this.expandableMutationObserver.observe(this.host, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\"expandable\"],\n      attributeOldValue: false,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.expandableMutationObserver?.disconnect();\n  }\n\n  render(): HTMLZTableElement {\n    return (\n      <Host expandable={this.expandable}>\n        <div\n          class=\"table\"\n          role=\"table\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8MAAA,MAAMA,EAAY,IAAM,mMCAxB,MAAMA,EAAY,IAAM,6sD,MCeXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAYEC,KAAAC,SAAW,MAMXD,KAAAE,WAAa,KAwCd,CAtCS,gBAAAC,GACNH,KAAKE,WAAaF,KAAKI,KAAKC,iBAAiB,oBAAoBC,OAAS,C,CAQ5E,iBAAAC,GACEP,KAAKQ,2BAA6B,IAAIC,kBAAiB,KACrDT,KAAKG,kBAAkB,IAEzBH,KAAKQ,2BAA2BE,QAAQV,KAAKI,KAAM,CACjDO,UAAW,KACXC,QAAS,KACTC,WAAY,KACZC,gBAAiB,CAAC,cAClBC,kBAAmB,O,CAIvB,oBAAAC,G,OACEC,EAAAjB,KAAKQ,8BAA0B,MAAAS,SAAA,SAAAA,EAAEC,Y,CAGnC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACpB,WAAYF,KAAKE,YACrBkB,EAAA,OAAAE,IAAA,2CACEC,MAAM,QACNC,KAAK,SAELJ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZTbody","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key","role"],"sources":["src/components/deprecated/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-tbody&encapsulation=shadow","src/components/deprecated/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrls: [\"styles.css\", \"../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTbody implements ComponentInterface {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,6CCAxB,MAAMA,EAAY,IAAM,6sD,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,E,iFACjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["zTableCellsCss","stylesCss","ZTd","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sticky","showMenu","popoverPosition","PopoverPosition","AUTO","isMenuOpen","updateColspan","colspan","host","style","gridColumn","removeProperty","colspanChange","emit","onMenuButtonClick","ev","stopPropagation","popoverEl","open","componentWillLoad","render","h","Host","key","role","class","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","onClick","bind","bindTo","onOpenChange","event","detail","position","name"],"sources":["src/components/deprecated/table/cells/z-table-cells.css?tag=z-td&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-td&encapsulation=shadow","src/components/deprecated/table/cells/z-td/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  max-width: 100%;\n  align-items: center;\n  background-color: var(--color-surface01);\n  gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n  z-index: 2;\n}\n\n.cell--content {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n  margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n  z-index: 1;\n  opacity: 1;\n  pointer-events: all;\n}\n\n:host .cell-popover {\n  z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-menu=\"hover\"]) .cell--menu-container {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n    z-index: 1;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n  tag: \"z-td\",\n  styleUrls: [\"../z-table-cells.css\", \"../../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTd implements ComponentInterface {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showMenu && (\n            <div class=\"cell--menu-container prevent-expand\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n                onClick={this.onMenuButtonClick.bind(this)}\n              />\n              <z-popover\n                class=\"cell-popover\"\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger as HTMLElement}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kRAAA,MAAMA,EAAiB,IAAM,q9BCA7B,MAAMC,EAAY,IAAM,6sD,MCYXC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,+GAkBEC,KAAAC,OAAS,MAQTD,KAAAE,SAAgC,KAMhCF,KAAAG,gBAAoCC,EAAgBC,KAMpDL,KAAAM,WAAa,KAmEd,CAnDW,aAAAC,GACR,GAAIP,KAAKQ,QAAS,CAChBR,KAAKS,KAAKC,MAAMC,WAAa,QAAQX,KAAKQ,S,KACrC,CACLR,KAAKS,KAAKC,MAAME,eAAe,c,CAGjCZ,KAAKa,cAAcC,KAAKd,KAAKQ,SAAW,E,CAGlC,iBAAAO,CAAkBC,GACxBA,EAAGC,kBACHjB,KAAKkB,UAAUC,MAAQnB,KAAKkB,UAAUC,I,CAGxC,iBAAAC,GACEpB,KAAKO,e,CAGP,MAAAc,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OAAM,YACAzB,KAAKM,YAEhBgB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,iBACTJ,EAAA,QAAAE,IAAA,6CACCxB,KAAKE,UACJoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uCACTJ,EAAA,YAAAE,IAAA,2CACEG,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQnC,KAAKoC,YAAcD,EACjCE,QAASrC,KAAKe,kBAAkBuB,KAAKtC,QAEvCsB,EAAA,aAAAE,IAAA,2CACEE,MAAM,eACNQ,IAAMC,GAAQnC,KAAKkB,UAAYiB,EAC/BI,OAAQvC,KAAKoC,YACbI,aAAeC,GAAWzC,KAAKM,WAAamC,EAAMC,OAAOvB,KACzDwB,SAAU3C,KAAKG,iBAEfmB,EAAA,QAAAE,IAAA,2CAAMoB,KAAK,uB","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZTfoot","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sticky","render","h","Host","key","role","tabIndex"],"sources":["src/components/deprecated/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/deprecated/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  margin-top: -1px;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  background-color: var(--color-surface01);\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrls: [\"styles.css\", \"../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTfoot implements ComponentInterface {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={-1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,wJCAxB,MAAMA,EAAY,IAAM,6sD,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAUEC,KAAAC,OAAS,KAYV,CAVC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,UAAU,GAEVJ,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["zTableCellsCss","stylesCss","ZTh","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","showMenu","showSorting","sticky","sorted","popoverPosition","PopoverPosition","AUTO","isMenuOpen","ariaSortDirection","sortDirection","SortDirection","ASC","handleSort","DESC","sort","emit","updateColspan","colspan","host","style","gridColumn","removeProperty","componentWillLoad","render","h","Host","key","role","sortable","class","type","onClick","bind","name","width","height","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","popoverEl","open","bindTo","onOpenChange","event","detail","position"],"sources":["src/components/deprecated/table/cells/z-table-cells.css?tag=z-th&encapsulation=shadow","src/components/deprecated/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-th&encapsulation=shadow","src/components/deprecated/table/cells/z-th/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  max-width: 100%;\n  align-items: center;\n  background-color: var(--color-surface01);\n  gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n  z-index: 2;\n}\n\n.cell--content {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n  margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n  z-index: 1;\n  opacity: 1;\n  pointer-events: all;\n}\n\n:host .cell-popover {\n  z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-menu=\"hover\"]) .cell--menu-container {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n    z-index: 1;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n",":host {\n  z-index: 1;\n  padding: 0;\n  background-color: var(--color-background);\n  font-weight: var(--font-sb);\n}\n\n:host([show-sorting]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  outline: none;\n}\n\n.z-th--sort-button:focus,\n.z-th--sort-button:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  opacity: 1;\n  outline: none;\n  pointer-events: all;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-sorting=\"hover\"]) .z-th--sort-button {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n  :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n  :host([show-sorting=\"always\"]) .z-th--sort-button,\n  :host([sorted]) .z-th--sort-button {\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  width: calc(100% - 12px);\n  height: calc(100% - 10px);\n  background-color: transparent;\n  content: \"\";\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrls: [\"../z-table-cells.css\", \"styles.css\", \"../../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTh implements ComponentInterface {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Enables the sorting button.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the sort button.\n   */\n  @Prop({reflect: true})\n  showSorting: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   */\n  @Prop({mutable: true})\n  sortDirection?: SortDirection;\n\n  /**\n   * Sorted state of the column.\n   */\n  @Prop({reflect: true, mutable: true})\n  sorted: boolean | null = false;\n\n  /**\n   * Set popover position.\n   */\n  @Prop()\n  popoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  /**\n   * Sort event fired when the user clicks on the sort button.\n   * The sorting logic must be implemented by the app.\n   * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n   */\n  @Event()\n  private sort: EventEmitter;\n\n  private menuTrigger: HTMLElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n   */\n  private get ariaSortDirection(): string {\n    if (!this.sortDirection) {\n      return null;\n    }\n\n    return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n  }\n\n  /**\n   * Handle the click on the sort button.\n   * @fires sort\n   */\n  private handleSort(): void {\n    if (!this.sortDirection) {\n      this.sorted = false;\n\n      return;\n    }\n\n    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n    this.sorted = true;\n\n    this.sort.emit({sortDirection: this.sortDirection});\n  }\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZThElement {\n    return (\n      <Host\n        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n        sortable={this.showSorting}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showSorting && (\n            <button\n              class=\"z-th--sort-button\"\n              type=\"button\"\n              onClick={this.handleSort.bind(this)}\n            >\n              <z-icon\n                name={this.sortDirection === SortDirection.DESC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n                width={14}\n                height={14}\n              />\n            </button>\n          )}\n          {this.showMenu && (\n            <div class=\"cell--menu-container\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLElement)}\n                onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n              />\n              <z-popover\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yRAAA,MAAMA,EAAiB,IAAM,q9BCA7B,MAAMC,EAAY,IAAM,snCCAxB,MAAMA,EAAY,IAAM,6sD,MCaXC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,6FAoBEC,KAAAC,SAAgC,KAQhCD,KAAAE,YAAmC,KAMnCF,KAAAG,OAAS,MAYTH,KAAAI,OAAyB,MAMzBJ,KAAAK,gBAAkBC,EAAgBC,KAMlCP,KAAAQ,WAAa,KAqGd,CApFC,qBAAYC,GACV,IAAKT,KAAKU,cAAe,CACvB,OAAO,I,CAGT,OAAOV,KAAKU,gBAAkBC,EAAcC,IAAM,YAAc,Y,CAO1D,UAAAC,GACN,IAAKb,KAAKU,cAAe,CACvBV,KAAKI,OAAS,MAEd,M,CAGFJ,KAAKU,cAAgBV,KAAKU,gBAAkBC,EAAcC,IAAMD,EAAcG,KAAOH,EAAcC,IACnGZ,KAAKI,OAAS,KAEdJ,KAAKe,KAAKC,KAAK,CAACN,cAAeV,KAAKU,e,CAI5B,aAAAO,GACR,GAAIjB,KAAKkB,QAAS,CAChBlB,KAAKmB,KAAKC,MAAMC,WAAa,QAAQrB,KAAKkB,S,KACrC,CACLlB,KAAKmB,KAAKC,MAAME,eAAe,c,EAInC,iBAAAC,GACEvB,KAAKiB,e,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,eAAc,YACR5B,KAAKQ,WAAU,YACfR,KAAKS,kBAChBoB,SAAU7B,KAAKE,aAEfuB,EAAA,OAAAE,IAAA,2CAAKG,MAAM,iBACTL,EAAA,QAAAE,IAAA,6CACC3B,KAAKE,aACJuB,EAAA,UAAAE,IAAA,2CACEG,MAAM,oBACNC,KAAK,SACLC,QAAShC,KAAKa,WAAWoB,KAAKjC,OAE9ByB,EAAA,UAAAE,IAAA,2CACEO,KAAMlC,KAAKU,gBAAkBC,EAAcG,KAAO,kBAAoB,oBACtEqB,MAAO,GACPC,OAAQ,MAIbpC,KAAKC,UACJwB,EAAA,OAAAE,IAAA,2CAAKG,MAAM,wBACTL,EAAA,YAAAE,IAAA,2CACEU,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQ7C,KAAK8C,YAAcD,EACjCb,QAAS,IAAOhC,KAAK+C,UAAUC,MAAQhD,KAAK+C,UAAUC,OAExDvB,EAAA,aAAAE,IAAA,2CACEiB,IAAMC,GAAQ7C,KAAK+C,UAAYF,EAC/BI,OAAQjD,KAAK8C,YACbI,aAAeC,GAAWnD,KAAKQ,WAAa2C,EAAMC,OAAOJ,KACzDK,SAAUrD,KAAKK,iBAEfoB,EAAA,QAAAE,IAAA,2CAAMO,KAAK,uB","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZThead","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sticky","isFocusable","render","h","Host","key","role","tabIndex"],"sources":["src/components/deprecated/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-thead&encapsulation=shadow","src/components/deprecated/table/z-thead/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-background: var(\n    --color-background\n  ); /* Needed to handle the background-color of the expand button cell */\n\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n\n:host(:focus-visible) {\n  box-shadow: none;\n  outline: none;\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrls: [\"styles.css\", \"../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZThead implements ComponentInterface {\n  @Element() host: HTMLZTheadElement;\n\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,+PCAxB,MAAMA,EAAY,IAAM,6sD,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAYEC,KAAAC,OAAS,MAMTD,KAAAE,YAAc,KAYf,CAVC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,SAAUR,KAAKE,YAAc,GAAI,GAEjCE,EAAA,QAAAE,IAAA,6C","ignoreList":[]}