@zanichelli/albe-web-components 18.6.3 → 18.6.5

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZPopoverStyle0","DOCUMENT_ELEMENT","document","documentElement","getParentElement","element","parentNode","shadowRoot","host","parentElement","findScrollableParent","parent","style","window","getComputedStyle","overflow","overflowX","overflowY","isOverflowNotVisible","isOverflowYNotVisible","isOverflowXNotVisible","scrollHeight","clientHeight","scrollWidth","clientWidth","computeOffset","targetParentOffset","rect","getBoundingClientRect","width","height","top","left","offsetParent","offsetLeft","body","scrollY","offsetTop","DOMMatrix","transform","domMatrix","m41","m42","parentWidth","parentHeight","innerWidth","innerHeight","offsetWidth","offsetHeight","right","bottom","ZPopover","this","spaceTolerance","PopoverPosition","TOP","closePopoverWithKeyboard","e","closable","key","KeyboardCode","ESC","open","handleOutsideClick","eventPath","composedPath","includes","target","triggerElemClicked","bindTo","closest","contains","stopPropagation","positionChange","emit","position","currentPosition","validatePosition","newValue","Object","values","AUTO","setPosition","onOpen","cancelAnimationFrame","animationFrameRequestId","requestAnimationFrame","setTimeout","openChange","hasCenteredHorizontalSpace","availableLeft","availableRight","hostWidth","boundWidth","offsetModifier","requiredSpace","hasCenteredVerticalSpace","availableTop","availableBottom","hostHeight","boundHeight","hasOffsetSpace","availableSpace","hostSize","boundSize","getOptimalPopoverPosition","desiredPosition","boundElemSizes","fits","pos","TOP_RIGHT","TOP_LEFT","RIGHT","RIGHT_BOTTOM","RIGHT_TOP","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","LEFT","LEFT_TOP","LEFT_BOTTOM","positions","positionOrder","startIndex","indexOf","i","length","posIndex","findBestFallbackPosition","bestHorizontalDirection","bestVerticalDirection","maxHorizontalSpace","Math","max","maxVerticalSpace","mainDirection","needsSecondaryDirection","minHorizontalSpace","min","minVerticalSpace","secondaryDirection","calculateAvailableSpace","boundElementRect","scrollContainer","scrollingBoundingRect","scrollTop","scrollLeft","overflowBottom","overflowRight","calculateRelativeOffsets","relativeBoundingRect","applyPositionStyles","offsets","boundElementSizes","arrowModifier","distanceFromBound","maxWidth","maxHeight","boundElement","ownerDocument","querySelector","offsetContainer","center","showArrow","componentWillLoad","componentDidLoad","disconnectedCallback","render","h","Host"],"sources":["src/components/z-popover/styles.css?tag=z-popover&encapsulation=shadow","src/components/z-popover/index.tsx"],"sourcesContent":[":host {\n  --z-popover-theme--surface: ;\n  --z-popover-theme--text: ;\n  --z-popover-padding: ;\n  --z-popover-shadow-filter: ;\n\n  position: absolute;\n  display: none;\n  min-width: calc(var(--space-unit) * 8);\n  max-width: 100%;\n  min-height: calc(var(--space-unit) * 4);\n  max-height: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: var(--z-popover-padding, 0);\n  background: var(--z-popover-theme--surface, var(--color-surface01));\n  border-radius: var(--border-radius-small);\n  color: var(--z-popover-theme--text, var(--color-default-text));\n  fill: currentcolor;\n  filter: var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));\n  font-family: var(--font-family-sans);\n  text-align: center;\n}\n\n:host([open]:not([current-position])) {\n  visibility: hidden;\n}\n\n:host([open][current-position]),\n:host([open=\"true\"][current-position]) {\n  display: flex;\n}\n\n:host([center][current-position=\"top\"]),\n:host([center][current-position=\"bottom\"]) {\n  transform: translateX(-50%);\n}\n\n:host([center][current-position=\"right\"]),\n:host([center][current-position=\"left\"]) {\n  transform: translateY(-50%);\n}\n\n:host([current-position^=\"top\"]) {\n  margin: 0 0 var(--space-unit);\n}\n\n:host([current-position^=\"bottom\"]) {\n  margin: var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"left\"]) {\n  margin: 0 var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"right\"]) {\n  margin: 0 0 0 var(--space-unit);\n}\n\n/* Arrow style */\n\n:host([current-position])::before {\n  --arrow-size: 6px;\n  --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));\n  --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));\n  --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));\n\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--z-popover-theme--surface, var(--color-surface01));\n  content: \"\";\n  transform: rotate(45deg);\n}\n\n:host([show-arrow=\"false\"])::before,\n:host(:not([show-arrow]))::before {\n  display: none;\n}\n\n:host([current-position^=\"top\"])::before {\n  top: var(--arrow-center-y-offset);\n}\n\n:host([current-position^=\"bottom\"])::before {\n  bottom: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top\"])::before,\n:host([current-position=\"bottom\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before,\n:host([current-position=\"left\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top_right\"])::before,\n:host([current-position=\"bottom_right\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"top_left\"])::before,\n:host([current-position=\"bottom_left\"])::before {\n  left: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"left_top\"])::before {\n  top: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"right_bottom\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left_top\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"right_bottom\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([center][current-position=\"top\"])::before,\n:host([center][current-position=\"bottom\"])::before {\n  right: auto;\n  left: var(--arrow-center-x-offset);\n}\n\n:host([center][current-position=\"right\"])::before,\n:host([center][current-position=\"left\"])::before {\n  top: var(--arrow-center-x-offset);\n  bottom: auto;\n}\n\n::slotted(*) {\n  overflow: auto;\n  flex: 1 auto;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, PopoverPosition} from \"../../beans\";\n\nconst DOCUMENT_ELEMENT = document.documentElement;\n\ntype Offsets = {top: number; right: number; bottom: number; left: number};\ntype ElementSizes = {width: number; height: number};\n/** Centering offset modifier. 0 for no offset, 0.5 for centering. */\ntype OffsetModifier = 0 | 0.5;\n\nfunction getParentElement(element: Element): Element {\n  if (element.parentNode === element.shadowRoot) {\n    return element.shadowRoot.host;\n  }\n\n  return element.parentElement;\n}\n\n/**\n * Find the closest scrollable parent of a node.\n *\n * @param {Element} element The node\n */\nfunction findScrollableParent(element: Element): Element {\n  let parent = getParentElement(element);\n\n  while (parent && parent !== DOCUMENT_ELEMENT) {\n    const style = window.getComputedStyle(parent);\n    const {overflow, overflowX, overflowY} = style;\n\n    // Check for hidden overflow first (early return)\n    if (overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\") {\n      return parent;\n    }\n\n    // Only check scrollable if overflow is not visible\n    const isOverflowNotVisible = overflow !== \"visible\";\n    const isOverflowYNotVisible = overflowY !== \"visible\";\n    const isOverflowXNotVisible = overflowX !== \"visible\";\n\n    if (\n      (parent.scrollHeight > parent.clientHeight && isOverflowNotVisible && isOverflowYNotVisible) ||\n      (parent.scrollWidth > parent.clientWidth && isOverflowNotVisible && isOverflowXNotVisible)\n    ) {\n      return parent;\n    }\n\n    parent = getParentElement(parent);\n  }\n\n  return DOCUMENT_ELEMENT;\n}\n\n/**\n * Calculate computed offset.\n * It includes matrix transformations.\n * @param element The target element.\n * @param targetParentOffset The relative offset parent.\n */\nfunction computeOffset(element: HTMLElement, targetParentOffset?: HTMLElement): Offsets & ElementSizes {\n  const rect = element.getBoundingClientRect();\n  const {width, height} = rect;\n\n  let top = 0;\n  let left = 0;\n  let offsetParent = element;\n\n  while (offsetParent && offsetParent !== targetParentOffset) {\n    left += offsetParent.offsetLeft;\n\n    // document.body sometimes has offsetTop == 0 but still has an offset because of children margins!\n    if (offsetParent === document.body) {\n      top += offsetParent.getBoundingClientRect().top + window.scrollY;\n    } else {\n      top += offsetParent.offsetTop;\n    }\n\n    // Handle CSS transforms only when DOMMatrix is available\n    if (window.DOMMatrix) {\n      const style = window.getComputedStyle(offsetParent);\n      const {transform} = style;\n\n      if (transform && transform !== \"none\") {\n        const domMatrix = new DOMMatrix(transform);\n        left += domMatrix.m41;\n        if (offsetParent !== document.body) {\n          top += domMatrix.m42;\n        }\n      }\n    }\n\n    if (!offsetParent.offsetParent) {\n      break;\n    }\n\n    offsetParent = offsetParent.offsetParent as HTMLElement;\n  }\n\n  let parentWidth: number;\n  let parentHeight: number;\n  if (offsetParent === document.body) {\n    parentWidth = window.innerWidth;\n    parentHeight = window.innerHeight;\n  } else {\n    parentWidth = offsetParent.offsetWidth;\n    parentHeight = offsetParent.offsetHeight;\n  }\n\n  const right = parentWidth - left - width;\n  const bottom = parentHeight - top - height;\n\n  return {top, right, bottom, left, width, height};\n}\n\n/**\n * Popover component.\n * This component displays a popover that can be bound to an element.\n * It supports various positions and can automatically adjust its position based on available space.\n *\n * Notes:\n * - To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.\n * - Consider manually adjusting the size of the slotted element (using `max-width`, `max-height`, etc...) when its content is \"fluid\" (like a big text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think that the popover doesn't fit in the available space).\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n  tag: \"z-popover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPopover {\n  /**\n   * The preferred position to render the popover.\n   * The popover will automatically search another position if not enough space is available for the preferred position.\n   * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.\n   */\n  @Prop({reflect: true, mutable: true})\n  position?: PopoverPosition = PopoverPosition.TOP;\n\n  /**\n   * The open state of the popover.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the popover.\n   * If string css selector is provided make sure to use a valid selector.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Whether to show popover's arrow.\n   */\n  @Prop({reflect: true})\n  showArrow = false;\n\n  /**\n   * Whether to center the popup on the main side (according to \"position\").\n   */\n  @Prop({reflect: true})\n  center = false;\n\n  /**\n   * If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n   */\n  @Prop()\n  closable = true;\n\n  /**\n   * The current position of the popover.\n   * It differs from `position` only when calculated automatically (position=auto) or when the position is recalculated for space reasons.\n   */\n  @State()\n  currentPosition?: PopoverPosition;\n\n  /**\n   * Position change event.\n   */\n  @Event()\n  positionChange: EventEmitter;\n\n  /**\n   * Open change event.\n   */\n  @Event()\n  openChange: EventEmitter;\n\n  @Element() host: HTMLZPopoverElement;\n\n  private animationFrameRequestId?: number;\n\n  private readonly spaceTolerance = 3; // 3px tolerance for space calculations\n\n  @Listen(\"keyup\", {target: \"window\"})\n  closePopoverWithKeyboard(e: KeyboardEvent): void {\n    if (this.closable && e.key === KeyboardCode.ESC) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Close the popover when clicking outside of its content.\n   * Stop event propagation if the click was fired by popover's trigger element,\n   * to prevent close and reopen glitches.\n   * @param {MouseEvent} e\n   */\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleOutsideClick(e: MouseEvent): void {\n    if (!this.closable || !this.open) {\n      return;\n    }\n\n    const eventPath = e.composedPath();\n    if (!eventPath.includes(this.host)) {\n      const target = e.target as HTMLElement;\n      let triggerElemClicked = false;\n\n      if (typeof this.bindTo === \"string\") {\n        triggerElemClicked = !!target.closest(this.bindTo);\n      } else if (this.bindTo) {\n        triggerElemClicked = this.bindTo.contains(target);\n      }\n\n      if (triggerElemClicked) {\n        // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n        e.stopPropagation();\n      }\n\n      this.open = false;\n      this.positionChange.emit({position: this.currentPosition});\n    }\n  }\n\n  @Watch(\"position\")\n  validatePosition(newValue: PopoverPosition): void {\n    if (!Object.values(PopoverPosition).includes(newValue as PopoverPosition) || newValue === PopoverPosition.AUTO) {\n      newValue = PopoverPosition.TOP;\n    }\n\n    this.position = newValue;\n    this.currentPosition = newValue;\n    this.positionChange.emit({position: this.currentPosition});\n    this.setPosition();\n  }\n\n  /**\n   * Setup popover behaviors on opening.\n   */\n  @Watch(\"open\")\n  onOpen(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n\n    if (this.open) {\n      const setPosition = (): void => {\n        if (this.open) {\n          this.setPosition();\n          this.animationFrameRequestId = requestAnimationFrame(setPosition);\n        }\n      };\n\n      // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n      setTimeout(() => {\n        setPosition();\n      }, 0);\n    }\n\n    this.openChange.emit({open: this.open});\n  }\n\n  // Clockwise order of positions.\n  private static readonly positionOrder: PopoverPosition[] = [\n    PopoverPosition.TOP_RIGHT,\n    PopoverPosition.TOP,\n    PopoverPosition.TOP_LEFT,\n    PopoverPosition.RIGHT_BOTTOM,\n    PopoverPosition.RIGHT,\n    PopoverPosition.RIGHT_TOP,\n    PopoverPosition.BOTTOM_LEFT,\n    PopoverPosition.BOTTOM,\n    PopoverPosition.BOTTOM_RIGHT,\n    PopoverPosition.LEFT_TOP,\n    PopoverPosition.LEFT,\n    PopoverPosition.LEFT_BOTTOM,\n  ] as const;\n\n  /**\n   * Helper functions for space calculation\n   */\n  private hasCenteredHorizontalSpace(\n    availableLeft: number,\n    availableRight: number,\n    hostWidth: number,\n    boundWidth: number,\n    offsetModifier: OffsetModifier\n  ): boolean {\n    const requiredSpace = (hostWidth - boundWidth) * (1 - offsetModifier);\n\n    return (\n      availableLeft >= requiredSpace - this.spaceTolerance && availableRight >= requiredSpace - this.spaceTolerance\n    );\n  }\n\n  private hasCenteredVerticalSpace(\n    availableTop: number,\n    availableBottom: number,\n    hostHeight: number,\n    boundHeight: number,\n    offsetModifier: OffsetModifier\n  ): boolean {\n    const requiredSpace = (hostHeight - boundHeight) * (1 - offsetModifier);\n\n    return (\n      availableTop >= requiredSpace - this.spaceTolerance && availableBottom >= requiredSpace - this.spaceTolerance\n    );\n  }\n\n  private hasOffsetSpace(\n    availableSpace: number,\n    hostSize: number,\n    boundSize: number,\n    offsetModifier: OffsetModifier\n  ): boolean {\n    return availableSpace >= hostSize - boundSize * (1 - offsetModifier) - this.spaceTolerance;\n  }\n\n  /**\n   * Given a desired position and available space around the bound element, returns the best position\n   * that fits the popover, trying all positions if needed.\n   * Takes into account offsetModifier for centering.\n   * @param desiredPosition The desired position of the popover.\n   * @param availableSpace The available space around the bound element.\n   * @param boundElemSizes The sizes of the bound element.\n   * @param offsetModifier The modifier to apply to the offset for centering.\n   */\n  private getOptimalPopoverPosition(\n    desiredPosition: PopoverPosition,\n    availableSpace: Offsets,\n    boundElemSizes: ElementSizes,\n    offsetModifier: OffsetModifier\n  ): PopoverPosition {\n    const hostWidth = this.host.offsetWidth;\n    const hostHeight = this.host.offsetHeight;\n\n    // Check if the desired position has enough space\n    const fits = (pos: PopoverPosition): boolean => {\n      switch (pos) {\n        case PopoverPosition.TOP:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasCenteredHorizontalSpace(\n              availableSpace.left,\n              availableSpace.right,\n              hostWidth,\n              boundElemSizes.width,\n              offsetModifier\n            )\n          );\n\n        case PopoverPosition.TOP_RIGHT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasOffsetSpace(availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier)\n          );\n\n        case PopoverPosition.TOP_LEFT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasOffsetSpace(availableSpace.left, hostWidth, boundElemSizes.width, offsetModifier)\n          );\n\n        case PopoverPosition.RIGHT:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasCenteredVerticalSpace(\n              availableSpace.top,\n              availableSpace.bottom,\n              hostHeight,\n              boundElemSizes.height,\n              offsetModifier\n            )\n          );\n\n        case PopoverPosition.RIGHT_BOTTOM:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasOffsetSpace(availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier)\n          );\n\n        case PopoverPosition.RIGHT_TOP:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasOffsetSpace(availableSpace.top, hostHeight, boundElemSizes.height, offsetModifier)\n          );\n\n        case PopoverPosition.BOTTOM:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasCenteredHorizontalSpace(\n              availableSpace.left,\n              availableSpace.right,\n              hostWidth,\n              boundElemSizes.width,\n              offsetModifier\n            )\n          );\n\n        case PopoverPosition.BOTTOM_LEFT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasOffsetSpace(availableSpace.left, hostWidth, boundElemSizes.width, offsetModifier)\n          );\n\n        case PopoverPosition.BOTTOM_RIGHT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasOffsetSpace(availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier)\n          );\n\n        case PopoverPosition.LEFT:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasCenteredVerticalSpace(\n              availableSpace.top,\n              availableSpace.bottom,\n              hostHeight,\n              boundElemSizes.height,\n              offsetModifier\n            )\n          );\n\n        case PopoverPosition.LEFT_TOP:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasOffsetSpace(availableSpace.top, hostHeight, boundElemSizes.height, offsetModifier)\n          );\n\n        case PopoverPosition.LEFT_BOTTOM:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasOffsetSpace(availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier)\n          );\n\n        default:\n          return false;\n      }\n    };\n\n    // Check desired position first\n    if (fits(desiredPosition)) {\n      return desiredPosition;\n    }\n\n    // Find position index and create rotation starting from next position\n    const positions = ZPopover.positionOrder;\n    const startIndex = positions.indexOf(desiredPosition);\n\n    if (startIndex === -1) {\n      return desiredPosition; // fallback if position not found\n    }\n\n    // Try all other positions starting from the next one\n    for (let i = 1; i < positions.length; i++) {\n      const posIndex = (startIndex + i) % positions.length;\n      const pos = positions[posIndex];\n      if (fits(pos)) {\n        return pos;\n      }\n    }\n\n    // If no position fits, find the best fallback based on available space\n    return this.findBestFallbackPosition(availableSpace);\n  }\n\n  /**\n   * Find the best fallback position based on available space when no position fits perfectly\n   */\n  private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n    // Determine the directions with the most space\n    const bestHorizontalDirection =\n      availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;\n\n    const bestVerticalDirection =\n      availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;\n\n    // Choose the main direction based on which has more space\n    const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);\n    const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);\n\n    const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;\n\n    // Check if secondary direction is necessary\n    // Only add secondary direction if the difference between min and max in that direction is at least double\n    let needsSecondaryDirection = false;\n\n    if (mainDirection === bestVerticalDirection) {\n      // Main direction is vertical, check horizontal space difference\n      const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);\n      needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;\n    } else {\n      // Main direction is horizontal, check vertical space difference\n      const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);\n      needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;\n    }\n\n    if (!needsSecondaryDirection) {\n      return mainDirection;\n    }\n\n    const secondaryDirection =\n      mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;\n\n    // Create a combined position (e.g., \"bottom_right\")\n    return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n  }\n\n  /**\n   * Calculate available space around the bound element\n   */\n  private calculateAvailableSpace(\n    boundElementRect: Offsets & ElementSizes,\n    scrollContainer: HTMLElement,\n    scrollingBoundingRect: DOMRect\n  ): {top: number; right: number; bottom: number; left: number} {\n    const top = boundElementRect.top - scrollContainer.scrollTop;\n    const bottom =\n      scrollingBoundingRect.height - (boundElementRect.top + boundElementRect.height) + scrollContainer.scrollTop;\n    const left = boundElementRect.left - scrollContainer.scrollLeft;\n    const right =\n      scrollingBoundingRect.width - (boundElementRect.left + boundElementRect.width) + scrollContainer.scrollLeft;\n\n    const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);\n    const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);\n\n    return {\n      top: Math.min(top, top + scrollingBoundingRect.top),\n      bottom: Math.min(bottom, bottom - overflowBottom),\n      left: Math.min(left, left + scrollingBoundingRect.left),\n      right: Math.min(right, right - overflowRight),\n    };\n  }\n\n  /**\n   * Calculate relative offsets for positioning\n   */\n  private calculateRelativeOffsets(\n    boundElementRect: Offsets,\n    relativeBoundingRect: Offsets\n  ): {top: number; right: number; bottom: number; left: number} {\n    return {\n      top: boundElementRect.top - relativeBoundingRect.top,\n      right: boundElementRect.right - relativeBoundingRect.right,\n      bottom: boundElementRect.bottom - relativeBoundingRect.bottom,\n      left: boundElementRect.left - relativeBoundingRect.left,\n    };\n  }\n\n  /**\n   * Apply positioning styles based on position\n   */\n  private applyPositionStyles(\n    position: PopoverPosition,\n    style: CSSStyleDeclaration,\n    offsets: Offsets,\n    boundElementSizes: ElementSizes,\n    availableSpace: Offsets,\n    offsetModifier: OffsetModifier,\n    arrowModifier: number\n  ): void {\n    const distanceFromBound = 8; // 8px is the distance of the popover from the bound element\n    // Reset all positioning properties\n    style.top = \"auto\";\n    style.right = \"auto\";\n    style.bottom = \"auto\";\n    style.left = \"auto\";\n    style.maxWidth = \"\";\n    style.maxHeight = \"\";\n\n    switch (position) {\n      case PopoverPosition.TOP:\n      case PopoverPosition.TOP_RIGHT:\n        style.bottom = `${offsets.bottom + boundElementSizes.height}px`;\n        style.left = `${offsets.left + boundElementSizes.width * offsetModifier - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n        style.maxHeight = `${availableSpace.top - distanceFromBound}px`;\n        if (position === PopoverPosition.TOP_RIGHT) {\n          style.maxWidth = `${availableSpace.right + boundElementSizes.width * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.TOP_LEFT:\n        style.right = `${offsets.right + boundElementSizes.width * offsetModifier - arrowModifier}px`;\n        style.bottom = `${offsets.bottom + boundElementSizes.height}px`;\n        style.maxWidth = `${availableSpace.left}px`;\n        style.maxHeight = `${availableSpace.top - distanceFromBound}px`;\n        break;\n\n      case PopoverPosition.BOTTOM:\n      case PopoverPosition.BOTTOM_RIGHT:\n        style.top = `${offsets.top + boundElementSizes.height}px`;\n        style.left = `${offsets.left + boundElementSizes.width * offsetModifier - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n        style.maxHeight = `${availableSpace.bottom - distanceFromBound}px`;\n        if (position === PopoverPosition.BOTTOM_RIGHT) {\n          style.maxWidth = `${availableSpace.right + boundElementSizes.width * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.BOTTOM_LEFT:\n        style.top = `${offsets.top + boundElementSizes.height}px`;\n        style.right = `${offsets.right + boundElementSizes.width * offsetModifier - arrowModifier}px`;\n        style.maxWidth = `${availableSpace.left}px`;\n        style.maxHeight = `${availableSpace.bottom - distanceFromBound}px`;\n        break;\n\n      case PopoverPosition.RIGHT:\n      case PopoverPosition.RIGHT_BOTTOM:\n        style.top = `${offsets.top + boundElementSizes.height * offsetModifier - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n        style.left = `${offsets.left + boundElementSizes.width}px`;\n        style.maxWidth = `${availableSpace.right - distanceFromBound}px`;\n        if (position === PopoverPosition.RIGHT) {\n          style.maxHeight = `${Math.min(availableSpace.top + availableSpace.bottom + boundElementSizes.height, window.innerHeight - 20)}px`;\n        } else {\n          style.maxHeight = `${availableSpace.bottom + boundElementSizes.height * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.RIGHT_TOP:\n        style.bottom = `${offsets.bottom + boundElementSizes.height * offsetModifier - arrowModifier}px`;\n        style.left = `${offsets.left + boundElementSizes.width}px`;\n        style.maxWidth = `${availableSpace.right - distanceFromBound}px`;\n        if (position === PopoverPosition.RIGHT_TOP) {\n          style.maxHeight = `${availableSpace.top + boundElementSizes.height * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.LEFT:\n      case PopoverPosition.LEFT_BOTTOM:\n        style.top = `${offsets.top + boundElementSizes.height * offsetModifier - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n        style.right = `${offsets.right + boundElementSizes.width}px`;\n        style.maxWidth = `${availableSpace.left - distanceFromBound}px`;\n        if (position === PopoverPosition.LEFT_BOTTOM) {\n          style.maxHeight = `${availableSpace.bottom + boundElementSizes.height * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.LEFT_TOP:\n        style.right = `${offsets.right + boundElementSizes.width}px`;\n        style.bottom = `${offsets.bottom + boundElementSizes.height * offsetModifier - arrowModifier}px`;\n        style.maxWidth = `${availableSpace.left - distanceFromBound}px`;\n        if (position === PopoverPosition.LEFT_TOP) {\n          style.maxHeight = `${availableSpace.top + boundElementSizes.height * offsetModifier}px`;\n        }\n        break;\n    }\n  }\n\n  /**\n   * Set the position of the popover.\n   */\n  private setPosition(): void {\n    let boundElement: HTMLElement;\n    if (typeof this.bindTo === \"string\") {\n      boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n    } else if (this.bindTo) {\n      boundElement = this.bindTo;\n    } else {\n      boundElement = this.host.parentElement as HTMLElement;\n    }\n\n    if (!boundElement) {\n      return;\n    }\n\n    const scrollContainer = findScrollableParent(boundElement) as HTMLElement;\n    const scrollingBoundingRect = scrollContainer.getBoundingClientRect();\n    const offsetContainer = this.host.offsetParent as HTMLElement;\n\n    const relativeBoundingRect = offsetContainer\n      ? computeOffset(offsetContainer, scrollContainer)\n      : {top: 0, right: 0, bottom: 0, left: 0};\n    const boundElementRect = computeOffset(boundElement, scrollContainer);\n\n    const availableSpace = this.calculateAvailableSpace(boundElementRect, scrollContainer, scrollingBoundingRect);\n    const offsets = this.calculateRelativeOffsets(boundElementRect, relativeBoundingRect);\n    const offsetModifier = this.center ? 0.5 : 0;\n    const arrowModifier = this.showArrow && this.center ? 8 : 0; // 8px is the distance of the arrow center from the edge of the popover\n\n    const position = this.getOptimalPopoverPosition(\n      this.position,\n      availableSpace,\n      {width: boundElementRect.width, height: boundElementRect.height},\n      offsetModifier\n    );\n\n    const style = this.host.style;\n    this.applyPositionStyles(position, style, offsets, boundElementRect, availableSpace, offsetModifier, arrowModifier);\n\n    this.currentPosition = position;\n  }\n\n  componentWillLoad(): void {\n    this.validatePosition(this.position);\n    this.onOpen();\n  }\n\n  componentDidLoad(): void {\n    this.setPosition();\n  }\n\n  disconnectedCallback(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <Host current-position={this.currentPosition}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/web-components-library/p-57b8bd19.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,a,g as e}from"./p-75c4a726.js";import{C as r}from"./p-17af7fb2.js";const i=':host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot="title"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot="title"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot="text"]){margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot="action"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]) .actions,:host([variant="shadow"]) .actions{margin-top:auto}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}';const s=i;const n=class{constructor(o){t(this,o);this.variant=undefined;this.coverIcon=undefined;this.showShadow=false;this.clickable=false;this.hasCoverImage=undefined}componentWillLoad(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null}renderColorCoverCard(){return[o("div",{class:"cover-container"},o("div",{class:"color-cover"},o("div",{class:"cover-content"},o("slot",{name:"metadata"}),o("slot",{name:"title"})))),o("div",{class:"content"},o("slot",{name:"text"}),o("div",{class:"actions"},o("slot",{name:"action"})))]}renderContent(){return o("div",{class:"content"},o("slot",{name:"metadata"}),o("slot",{name:"title"}),o("slot",{name:"text"}),o("div",{class:"actions"},o("slot",{name:"action"})))}render(){if(this.variant===r.TEXT){return o(a,null,this.renderContent())}if(this.variant===r.OVERLAY||this.hasCoverImage){return o(a,null,o("div",{class:"cover-container"},this.hasCoverImage&&[o("slot",{name:"cover"}),this.variant!==r.OVERLAY&&this.coverIcon&&o("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&o("div",{class:"color-cover"})),this.renderContent())}return o(a,null,this.renderColorCoverCard())}get host(){return e(this)}};n.style=s;export{n as z_card};
-//# sourceMappingURL=p-57b8bd19.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZCardStyle0","ZCard","componentWillLoad","this","hasCoverImage","host","querySelector","renderColorCoverCard","h","class","name","renderContent","render","variant","CardVariant","TEXT","Host","OVERLAY","coverIcon"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":["/* The width of the card must be set by its container,\nrespecting the grid indications of the design. */\n\n:host {\n  /* Override this var to change the cover's aspect ratio */\n  --aspect-ratio: 1.62;\n  --z-card--border-color: var(--gray200);\n  --z-card--color-cover-background: var(--color-surface01);\n  --z-card--text-background: var(--color-surface01);\n  --z-card--text-border-radius: none;\n  --z-card--text-border: none;\n  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n  position: relative;\n  width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n  padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.cover-container > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 11);\n  --z-icon-height: var(--z-icon-width);\n\n  position: absolute;\n  top: calc(50% - calc(var(--z-icon-height) / 2));\n  left: calc(50% - calc(var(--z-icon-width) / 2));\n  fill: var(--color-primary01);\n}\n\n.color-cover {\n  background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n  display: -webkit-inline-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n  margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: \"\";\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n  margin: 0 0 calc(var(--space-unit) * 0.25);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"title\"]) {\n  margin: 0;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n  margin: 0;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n}\n\n.actions {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n:host([variant=\"text\"]) {\n  border: var(--z-card--text-border);\n  background-color: var(--z-card--text-background);\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n  height: 100%;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n  padding: var(--z-card--text-padding);\n}\n\n:host([variant=\"border\"]) .actions,\n:host([variant=\"shadow\"]) .actions {\n  margin-top: auto;\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n  border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n  background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n  border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n  box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n  box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /** Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc. */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContent()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContent()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"],"mappings":"wFAAA,MAAMA,EAAY,0lIAClB,MAAAC,EAAeD,E,MCsBFE,EAAK,M,yFAeH,M,eAID,M,6BAOZ,iBAAAC,GACEC,KAAKC,cAAgBD,KAAKE,KAAKC,cAAc,oBAAsB,I,CAO7D,oBAAAC,GACN,MAAO,CACLC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,eACTD,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,aAIjBF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,a,CASX,aAAAC,GACN,OACEH,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,Y,CAMnB,MAAAE,GACE,GAAIT,KAAKU,UAAYC,EAAYC,KAAM,CACrC,OAAOP,EAACQ,EAAI,KAAEb,KAAKQ,gB,CAGrB,GAAIR,KAAKU,UAAYC,EAAYG,SAAWd,KAAKC,cAAe,CAC9D,OACEI,EAACQ,EAAI,KACHR,EAAA,OAAKC,MAAM,mBACRN,KAAKC,eAAiB,CACrBI,EAAA,QAAME,KAAK,UACXP,KAAKU,UAAYC,EAAYG,SAAWd,KAAKe,WAAaV,EAAA,UAAQE,KAAMP,KAAKe,cAE7Ef,KAAKC,eAAiBI,EAAA,OAAKC,MAAM,iBAEpCN,KAAKQ,gB,CAKZ,OAAOH,EAACQ,EAAI,KAAEb,KAAKI,uB","ignoreList":[]}

package/dist/web-components-library/p-69a1a67a.entry.js

@@ -1,2 +0,0 @@
-export{Z as z_tr}from"./p-61f76cab.js";import"./p-75c4a726.js";import"./p-a06fbbc0.js";import"./p-17af7fb2.js";import"./p-5145a606.js";import"./p-f19f12b1.js";import"./p-748fa3ae.js";
-//# sourceMappingURL=p-69a1a67a.entry.js.map

package/dist/web-components-library/p-8d5e3396.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as a,a as e,g as s}from"./p-75c4a726.js";import"./p-1170826b.js";import"./p-4c9bf42d.js";import"./p-d7f12672.js";import"./p-61f76cab.js";import"./p-a06fbbc0.js";import"./p-17af7fb2.js";import"./p-5145a606.js";import"./p-f19f12b1.js";import"./p-748fa3ae.js";const r=":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";const o=r;const i=class{constructor(a){t(this,a);this.bordered=false;this.expandable=false}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()}));this.expandableMutationObserver.observe(this.host,{childList:true,subtree:true,attributes:true,attributeFilter:["expandable"],attributeOldValue:false})}disconnectedCallback(){var t;(t=this.expandableMutationObserver)===null||t===void 0?void 0:t.disconnect()}render(){return a(e,{key:"6749b44ab2c28b92e6b282487bf9f23c40cead58",expandable:this.expandable},a("div",{key:"633237695b09182263ac74b5118d533a8cae33b8",class:"table",role:"table"},a("slot",{key:"f46d287050238e137ababadae8b8eb1ffdb96c7b"})))}get host(){return s(this)}};i.style=o;export{i as z_table};
-//# sourceMappingURL=p-8d5e3396.entry.js.map

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["boolean","value","randomId","Math","random","toString","replace","handleKeyboardSubmit","ev","callback","args","code","KeyboardCode","ENTER","SPACE","preventDefault","handleEnterKeydSubmit","getClickedElement","elem","document","activeElement","shadowRoot","getElementTree","tree","push","parentElement","parentNode","host","getDevice","window","innerWidth","Breakpoints","MOBILE","Device","TABLET","DESKTOP","DESKTOP_WIDE","convertJson","data","JSON","parse","_a","colorFromId","id","prefix","colorsCount","seed","ceil","parseFloat","color","padStart","containsElement","ancestor","descendant","contains"],"sources":["src/utils/utils.ts"],"sourcesContent":["import {ChildNode} from \"@stencil/core\";\nimport {Device, KeyboardCode} from \"../beans/index\";\nimport {Breakpoints} from \"../constants/breakpoints\";\n\n/**\n * Return boolean value for passed value if a boolean corresponding value is found\n * Return passed value otherwise\n */\nexport function boolean(value: string | number | boolean): boolean | string | number {\n  switch (value) {\n    case true:\n    case \"true\":\n    case 1:\n    case \"1\":\n    case \"on\":\n    case \"yes\":\n      return true;\n    case false:\n    case \"false\":\n    case 0:\n    case \"0\":\n    case \"off\":\n    case \"no\":\n      return false;\n    default:\n      return value;\n  }\n}\n\nexport function retrieveAsset(assetName: string): string {\n  return assetName && \"assets/images/png/\" + assetName;\n}\n\nexport function randomId(): string {\n  return Math.random().toString(36).replace(\"0.\", \"\");\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleKeyboardSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n  if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {\n    ev.preventDefault();\n    callback(...args);\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleEnterKeydSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n  if (ev.code === KeyboardCode.ENTER) {\n    ev.preventDefault();\n    callback(...args);\n  }\n}\n\nexport function getClickedElement(elem: null | Element = null): null | Element {\n  if (!elem) {\n    elem = document.activeElement;\n  }\n\n  if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {\n    elem = elem.shadowRoot.activeElement;\n\n    return getClickedElement(elem);\n  }\n\n  return elem;\n}\n\nexport function getElementTree(elem: Element, tree: Element[] = []): null | Element[] {\n  tree.push(elem);\n\n  if (elem.parentElement) {\n    elem = elem.parentElement;\n\n    return getElementTree(elem, tree);\n  } else if (elem.parentNode && (elem.parentNode as ShadowRoot).host) {\n    elem = (elem.parentNode as ShadowRoot).host;\n\n    return getElementTree(elem, tree);\n  }\n\n  return tree;\n}\n\nexport function getSiblings(elem: HTMLElement): ChildNode[] {\n  const siblings = [];\n  if (!elem || !elem.parentNode || !elem.parentNode.childNodes) {\n    return siblings;\n  }\n\n  elem.parentNode.childNodes.forEach((child) => {\n    if (child.nodeType === 1 && child !== elem) {\n      siblings.push(child);\n    }\n  });\n\n  return siblings;\n}\n\n/**\n * Get the current device type based on the window width.\n * @returns {Device} - The current device type\n */\nexport function getDevice(): Device {\n  switch (true) {\n    case window.innerWidth <= Breakpoints.MOBILE:\n      return Device.MOBILE;\n    case window.innerWidth <= Breakpoints.TABLET:\n      return Device.TABLET;\n    case window.innerWidth <= Breakpoints.DESKTOP:\n      return Device.DESKTOP;\n    default:\n      return Device.DESKTOP_WIDE;\n  }\n}\n\ntype JSONValue = string | number | boolean | JSONObject | JSONArray;\ninterface JSONObject {\n  [x: string]: JSONValue;\n}\ntype JSONArray = JSONValue[];\n\nexport function convertJson(data: string): JSONValue {\n  try {\n    return JSON.parse(data);\n  } catch {\n    return false;\n  }\n}\n\nexport function colorFromId(id: number): string {\n  const prefix = \"avatar-C\"; // prefix for color vars name\n  const colorsCount = 19; // available colors\n  const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);\n  let color = Math.ceil(colorsCount * (seed % 1));\n\n  // if result of mc is 0\n  // es.: 3895229\n  if (color === 0) {\n    color = 1;\n  }\n\n  return `${prefix}${color.toString().padStart(2, \"0\")}`;\n}\n\n/**\n * Check if the passed CSS selector is valid.\n * @param selector CSS selector to validate\n */\nexport function isSelectorValid(selector: string): boolean {\n  try {\n    document.createDocumentFragment().querySelector(selector);\n\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Check if an element contains another element, checking both light and shadow DOM.\n * @param ancestor Ancestor element\n * @param descendant Descendant element\n */\nexport function containsElement(ancestor: HTMLElement, descendant: Node): boolean {\n  return ancestor.contains(descendant) || !!ancestor.shadowRoot?.contains(descendant);\n}\n"],"mappings":"wFAQgBA,EAAQC,GACtB,OAAQA,GACN,KAAK,KACL,IAAK,OACL,KAAK,EACL,IAAK,IACL,IAAK,KACL,IAAK,MACH,OAAO,KACT,KAAK,MACL,IAAK,QACL,KAAK,EACL,IAAK,IACL,IAAK,MACL,IAAK,KACH,OAAO,MACT,QACE,OAAOA,EAEb,C,SAMgBC,IACd,OAAOC,KAAKC,SAASC,SAAS,IAAIC,QAAQ,KAAM,GAClD,C,SAGgBC,EAAqBC,EAAmBC,KAAgCC,GACtF,GAAIF,EAAGG,OAASC,EAAaC,OAASL,EAAGG,OAASC,EAAaE,MAAO,CACpEN,EAAGO,iBACHN,KAAYC,E,CAEhB,C,SAGgBM,EAAsBR,EAAmBC,KAAgCC,GACvF,GAAIF,EAAGG,OAASC,EAAaC,MAAO,CAClCL,EAAGO,iBACHN,KAAYC,E,CAEhB,C,SAEgBO,EAAkBC,EAAuB,MACvD,IAAKA,EAAM,CACTA,EAAOC,SAASC,a,CAGlB,GAAIF,GAAQA,EAAKG,YAAcH,EAAKG,WAAWD,cAAe,CAC5DF,EAAOA,EAAKG,WAAWD,cAEvB,OAAOH,EAAkBC,E,CAG3B,OAAOA,CACT,C,SAEgBI,EAAeJ,EAAeK,EAAkB,IAC9DA,EAAKC,KAAKN,GAEV,GAAIA,EAAKO,cAAe,CACtBP,EAAOA,EAAKO,cAEZ,OAAOH,EAAeJ,EAAMK,E,MACvB,GAAIL,EAAKQ,YAAeR,EAAKQ,WAA0BC,KAAM,CAClET,EAAQA,EAAKQ,WAA0BC,KAEvC,OAAOL,EAAeJ,EAAMK,E,CAG9B,OAAOA,CACT,C,SAqBgBK,IACd,OAAQ,MACN,KAAKC,OAAOC,YAAcC,EAAYC,OACpC,OAAOC,EAAOD,OAChB,KAAKH,OAAOC,YAAcC,EAAYG,OACpC,OAAOD,EAAOC,OAChB,KAAKL,OAAOC,YAAcC,EAAYI,QACpC,OAAOF,EAAOE,QAChB,QACE,OAAOF,EAAOG,aAEpB,C,SAQgBC,EAAYC,GAC1B,IACE,OAAOC,KAAKC,MAAMF,E,CAClB,MAAAG,GACA,OAAO,K,CAEX,C,SAEgBC,EAAYC,GAC1B,MAAMC,EAAS,WACf,MAAMC,EAAc,GACpB,MAAMC,EAAO3C,KAAK4C,KAAK,GAAK,GAAK,GAAKC,WAAW,KAAKL,KACtD,IAAIM,EAAQ9C,KAAK4C,KAAKF,GAAeC,EAAO,IAI5C,GAAIG,IAAU,EAAG,CACfA,EAAQ,C,CAGV,MAAO,GAAGL,IAASK,EAAM5C,WAAW6C,SAAS,EAAG,MAClD,C,SAqBgBC,EAAgBC,EAAuBC,G,MACrD,OAAOD,EAASE,SAASD,QAAiBZ,EAAAW,EAAS/B,cAAU,MAAAoB,SAAA,SAAAA,EAAEa,SAASD,GAC1E,Q","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,g as i}from"./p-75c4a726.js";import{e as l,g as c,l as r,i as n}from"./p-17af7fb2.js";import{r as o,b as a,e as h,d,f as z}from"./p-a06fbbc0.js";import"./p-5145a606.js";const p='.sc-z-select-h{display:inline-block;width:inherit;color:var(--color-form-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size="small"].sc-z-select-h,[size="x-small"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>z-input.sc-z-select .input-icon.sc-z-select{cursor:pointer}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;border-top:none;background:var(--color-form-background);box-shadow:var(--shadow-2);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select z-list.sc-z-select{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:0 calc(var(--space-unit) * 1.5);outline:none}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element[disabled].sc-z-select{color:var(--color-form-disabled03)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);column-gap:var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{margin-right:auto}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size="small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:var(--font-sb)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--color-form-default-text)}.reset-item.sc-z-select{color:var(--color-form-active-primary);fill:var(--color-form-active-primary)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:var(--space-unit)}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}.tree-list-reset-item.sc-z-select{padding:var(--space-unit) 0}z-list-element.sc-z-select{position:relative;display:block}z-list.sc-z-select z-list-element.sc-z-select::before{position:absolute;z-index:100;top:3px;left:-15px;width:8px;height:1em;border-bottom:1px solid var(--color-form-disabled01-icon);border-left:1px solid var(--color-form-disabled01-icon);content:"";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select::after{position:absolute;z-index:100;top:5px;left:-15px;width:8px;height:100%;border-left:1px solid var(--color-form-disabled01-icon);content:"";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select:last-child::after{display:none}z-list.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-element.sc-z-select::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::after{display:none}z-list.sc-z-select>div.children-node.sc-z-select{padding-left:calc(var(--space-unit) * 2)}z-list-element.grouped-tree-parent-node.sc-z-select{padding-top:0;padding-left:calc(var(--space-unit) * 2)}z-list-element.sc-z-select>.list-element.sc-z-select{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.25) 0;cursor:pointer}z-list-element.sc-z-select>.list-element.sc-z-select:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-list-element.sc-z-select>.list-element.sc-z-select .item.ellipsis.sc-z-select{overflow:hidden}z-list-element.sc-z-select .list-element.sc-z-select::after{position:absolute;top:0;right:-1px;display:block;width:100%;height:40px;content:"";transform:translateX(-100%)}z-list-element.tree-search-item.sc-z-select{padding-top:0}z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select::after{position:absolute;top:8px;right:-25px;display:block;width:100%;height:40px;content:"";transform:translateX(-100%)}z-list-element.grouped-tree-parent-node.sc-z-select .list-element.sc-z-select::after{position:absolute;top:8px;right:-25px;display:block;width:100%;height:40px;content:"";transform:translateX(-100%)}z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover,z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover::after{z-index:-1;background-color:var(--color-form-surface03);cursor:pointer}.item-label.selected.sc-z-select{font-weight:bold}z-list-element.sc-z-select:focus{box-shadow:var(--shadow-focus-primary);outline:none}.item.ellipsis.sc-z-select{display:inline-block;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}z-list.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after,z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select:hover::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;top:8px;right:-18px;display:block;width:100%;height:40px;content:"";transform:translateX(-100%)}z-list-element.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;top:0;right:0;display:block;width:100%;height:40px;content:"";transform:translateX(-100%)}.children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select z-list-element.sc-z-select::after{left:-15px}.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::after{left:-15px}.children-node.sc-z-select>z-list-element.sc-z-select{padding:0}';const u=p;const m=class{constructor(s){e(this,s);this.optionSelect=t(this,"optionSelect",7);this.resetSelect=t(this,"resetSelect",7);this.itemsList=[];this.itemIdKeyMap={};this.resetKey=-1;this.htmlid=`id-${o()}`;this.items=undefined;this.name=undefined;this.label=undefined;this.ariaLabel="";this.disabled=false;this.readonly=false;this.placeholder=undefined;this.htmltitle=undefined;this.status=undefined;this.message=true;this.autocomplete=false;this.noresultslabel="Nessun risultato";this.hasGroupItems=undefined;this.hasTreeItems=undefined;this.showChildrenOfMatchingParent=undefined;this.isfixed=false;this.resetItem=undefined;this.size=l.BIG;this.isOpen=false;this.selectedItem=null;this.focusedItemId=undefined;this.searchString=undefined;this.flattenedList=[];this.toggleSelectUl=this.toggleSelectUl.bind(this);this.handleSelectFocus=this.handleSelectFocus.bind(this)}watchItems(){this.itemsList=this.getInitialItemsArray();this.selectedItem=this.findSelectedItem(this.itemsList);this.flattenedList=this.flattenTreeItems(this.itemsList);this.itemIdKeyMap={};this.flattenedList.forEach((({item:e,key:t})=>{this.itemIdKeyMap[e.id]=t}))}getFocusedItemHandler(e){this.focusedItemId=e.target.id}async getSelectedItem(){return this.selectedItem}async getValue(){return this.getSelectedValue()}async setValue(e){let t=[];if(typeof e==="string"){t.push(e)}else{t=e}this.itemsList=this.getInitialItemsArray();if(t.length){this.updateSelection(this.itemsList,t[0])}this.selectedItem=this.findSelectedItem(this.itemsList)}emitOptionSelect(){this.optionSelect.emit({id:this.htmlid,selected:this.getSelectedValue()})}emitResetSelect(){this.resetSelect.emit({id:this.htmlid})}componentWillLoad(){this.watchItems()}componentWillRender(){this.filterItems(this.searchString)}getInitialItemsArray(){return typeof this.items==="string"?JSON.parse(this.items):this.items}mapSelectedItemToItemsArray(){const e=this.getInitialItemsArray();return e.map((e=>{var t;e.selected=e.id===((t=this.selectedItem)===null||t===void 0?void 0:t.id);return e}))}getSelectedValue(){var e;return(e=this.selectedItem)===null||e===void 0?void 0:e.id}filterItems(e){const t=this.mapSelectedItemToItemsArray();if(!(e===null||e===void 0?void 0:e.length)){this.itemsList=t;return}if(this.hasTreeItems){this.itemsList=this.filterTree(t,e,false)}else{this.itemsList=t.filter((t=>t.name.toUpperCase().includes(e.toUpperCase()))).map((t=>{t.name=this.getHighlightedText(t.name,e);return t}))}this.flattenedList=this.flattenTreeItems(this.itemsList);this.itemIdKeyMap={};this.flattenedList.forEach((({item:e,key:t})=>{this.itemIdKeyMap[e.id]=t}))}filterTree(e,t,s){if(!e){return[]}return e.map((e=>{const i=e.name.toUpperCase().includes(t.toUpperCase());const l=Object.assign({},e);if(l.children&&l.children.length>0){l.children=this.filterTree(l.children,t,i)}if(i){l.name=this.getHighlightedText(l.name,t)}if(i||l.children&&l.children.length>0||this.showChildrenOfMatchingParent&&s){return l}return null})).filter((e=>e!==null))}getHighlightedText(e,t){const s=e.toUpperCase();const i=t.toUpperCase();const l=s.indexOf(i);if(l===-1){return e}const c=l+t.length;return e.substring(0,l)+`<strong>${e.substring(l,c)}</strong>`+e.substring(c)}hasAutocomplete(){return a(this.autocomplete)===true}handleInputChange(e){this.searchString=e.detail.value;if(!this.isOpen){this.toggleSelectUl()}}updateSelection(e,t){if(e){e.forEach((e=>{e.selected=e.id===t;if(e.children&&e.children.length>0){this.updateSelection(e.children,t)}}))}}findSelectedItem(e){if(e){for(const t of e){if(t.selected){return t}if(t.children&&t.children.length>0){const e=this.findSelectedItem(t.children);if(e){return e}}}}return null}selectItem(e){if(e===null||e===void 0?void 0:e.disabled){return}this.itemsList=this.getInitialItemsArray();if(e){this.updateSelection(this.itemsList,e.id)}this.selectedItem=this.findSelectedItem(this.itemsList);this.emitOptionSelect();this.toggleSelectUl(true);if(this.searchString){this.searchString=null}}flattenTreeItems(e){const t=[];let s=0;const i=e=>{e.forEach((e=>{t.push({item:e,key:s++});if(e.children&&e.children.length>0){i(e.children)}}))};if(e){i(e)}return t}arrowsSelectNav(e,t){const s=this.resetItem&&!!this.selectedItem;const i=[c.ARROW_DOWN,c.ARROW_UP];if(!i.includes(e.key)){return}e.preventDefault();e.stopPropagation();const l=[...this.flattenedList].filter((e=>!e.item.disabled));if(this.resetItem&&s){l.unshift({item:{id:"__RESET_ITEM__"},key:this.resetKey})}let r;if(typeof t==="number"){r=l.findIndex((e=>e.key===t))}else{const e=this.itemIdKeyMap[t];r=l.findIndex((t=>t.key===e))}if(!this.isOpen){this.toggleSelectUl();if(r===-1){r=-1}}const n=l.length-1;let o=r;if(e.key===c.ARROW_DOWN){do{o=o===n?0:o+1}while(l[o].item.disabled)}else{do{o=o<=0?n:o-1}while(l[o].item.disabled)}this.focusSelectItem(l[o].key)}focusSelectItem(e){var t;(t=this.host.querySelector(`#${this.htmlid}_key_${e}`))===null||t===void 0?void 0:t.focus()}toggleSelectUl(e=false){var t;if(this.disabled||this.readonly){return}if(!this.isOpen){document.addEventListener("click",this.handleSelectFocus);document.addEventListener("keyup",this.handleSelectFocus)}else{document.removeEventListener("click",this.handleSelectFocus);document.removeEventListener("keyup",this.handleSelectFocus);if(e){(t=this.host.querySelector(`#${this.htmlid}_input`))===null||t===void 0?void 0:t.focus()}}this.focusedItemId="";this.isOpen=!this.isOpen}handleInputClick(e){if(e.target.closest(".reset-icon")){e.stopPropagation();return}this.toggleSelectUl()}handleSelectFocus(e){const t=z();if(t===null||t===void 0?void 0:t.hasAttribute("disabled")){return}if(e instanceof KeyboardEvent&&e.key===c.ESC){e.stopPropagation();return this.toggleSelectUl(true)}if(e instanceof KeyboardEvent&&(e.key===c.ENTER||e.key!==c.TAB)){return}if(!h(t).find((e=>e.nodeName.toLowerCase()==="z-input"&&e.id===`${this.htmlid}_input`))){this.toggleSelectUl(e instanceof MouseEvent)}}scrollToLetter(e){const t=this.itemsList.findIndex((t=>t.name.charAt(0)===e));if(t>-1){this.focusSelectItem(this.itemIdKeyMap[this.itemsList[t].id])}}renderInput(){return s("z-input",{class:{"active-select":this.isOpen,"cursor-select":!this.autocomplete},id:`${this.htmlid}_input`,htmlid:`${this.htmlid}_select_input`,placeholder:this.placeholder,value:!this.isOpen&&this.selectedItem?this.selectedItem.name.replace(/<[^>]+>/g,""):null,label:this.label,"aria-expanded":this.isOpen?"true":"false","aria-label":this.ariaLabel,"aria-controls":`${this.htmlid}_list`,"aria-autocomplete":this.hasAutocomplete()?"list":"none","aria-activedescendant":this.isOpen?this.focusedItemId:"",icon:this.isOpen?"caret-up":"caret-down",hasclearicon:this.hasAutocomplete(),message:false,name:this.name,disabled:this.disabled,readonly:this.readonly||!this.hasAutocomplete()&&this.isOpen,status:this.isOpen?undefined:this.status,role:"combobox",size:this.size,onClick:e=>{this.handleInputClick(e)},onKeyUp:e=>{if(e.key!==c.ENTER){e.preventDefault()}d(e,this.toggleSelectUl)},onKeyDown:e=>{const t=this.selectedItem?this.itemIdKeyMap[this.selectedItem.id]:this.resetItem?this.resetKey:"";return this.arrowsSelectNav(e,t)},onInputChange:e=>{this.handleInputChange(e)},onKeyPress:e=>{if(!this.hasAutocomplete()){e.preventDefault();this.scrollToLetter(String.fromCharCode(e.keyCode))}}})}renderSelectUl(){return s("div",{class:this.isOpen?"open":"closed"},s("div",{class:{"ul-scroll-wrapper":true,fixed:this.isfixed}},s("z-list",{role:"listbox","aria-label":this.ariaLabel||this.label,tabindex:this.disabled||this.readonly||!this.isOpen?-1:0,id:`${this.htmlid}_list`,"aria-multiselectable":false,size:this.listSizeType(),class:{disabled:this.disabled,readonly:this.readonly,[`input-${this.status}`]:!this.isOpen&&!!this.status,"z-scrollbar":true}},this.resetItem&&this.renderResetItem(),this.renderSelectUlItems())))}renderResetItem(){return s("z-list-element",{class:{hide:!this.selectedItem||!this.resetItem,"reset-item":true,"reset-item-margin":!this.hasGroupItems},clickable:true,disabled:false,dividerType:r.ELEMENT,role:"option",tabindex:"0","aria-selected":"false",id:`${this.htmlid}_key_${this.resetKey}`,size:this.hasTreeItems?n.MEDIUM:this.listSizeType(),onClickItem:()=>{this.selectedItem=null;this.searchString=null;this.emitResetSelect()},onKeyDown:e=>this.arrowsSelectNav(e,this.resetKey)},s("div",{class:{"reset-item-content":true,"tree-list-reset-item":this.hasTreeItems}},s("z-icon",{name:"multiply-circled"}),s("span",null,this.resetItem)))}renderItem(e,t){const i=this.itemIdKeyMap[e.id];return s("z-list-element",{clickable:!e.disabled,disabled:e.disabled,dividerType:t?r.HEADER:r.ELEMENT,role:"option",tabindex:e.disabled||!this.isOpen?-1:0,"aria-selected":e.selected?"true":"false",id:`${this.htmlid}_key_${i}`,size:this.listSizeType(),onClickItem:()=>this.selectItem(e),onKeyDown:e=>this.arrowsSelectNav(e,i)},s("div",{class:"list-element-container"},s("div",{class:{selected:!!e.selected,"list-element-content":true},innerHTML:e.name}),e.icon&&s("z-tag",{icon:e.icon})))}listSizeType(){if(this.hasTreeItems){return n.NONE}if(this.size===l.SMALL||this.size===l.X_SMALL){return n.SMALL}return n.MEDIUM}renderSelectUlItems(){if(!this.itemsList.length){return this.renderNoSearchResults()}if(this.hasGroupItems&&!this.hasTreeItems){return this.renderSelectGroupItems()}else if(this.hasGroupItems&&this.hasTreeItems){return this.renderGroupedTree()}return this.itemsList.map(((e,t,s)=>{const i=t===s.length-1;const l=s.length>1;if(this.hasTreeItems){return this.renderTreeItems(e,i,l,true)}return this.renderItem(e,i)}))}renderTreeItems(e,t,i,l){var n,o;const a=this.itemIdKeyMap[e.id];const h=this.hasGroupItems?undefined:this.hasGroupItems?t&&!i?r.ELEMENT:undefined:l&&i&&!t?r.ELEMENT:undefined;return s("z-list-element",{clickable:!e.disabled,disabled:e.disabled,class:{"grouped-tree-parent-node":this.hasGroupItems&&!!((n=e.children)===null||n===void 0?void 0:n.length),"tree-search-item":this.hasGroupItems&&l&&!((o=e.children)===null||o===void 0?void 0:o.length)&&!!this.searchString},size:this.listSizeType(),dividerType:h,hasTreeItems:this.hasTreeItems},s("div",{id:`${this.htmlid}_key_${a}`,role:"option",class:"list-element",tabIndex:0,onClick:()=>this.selectItem(e),onKeyDown:t=>{this.arrowsSelectNav(t,a);if(t.key===c.ENTER){this.selectItem(e)}}},s("span",{class:"item ellipsis"},s("span",{class:{"item-label":true,selected:!!e.selected},title:e.name,innerHTML:e.selected?`<strong>${e.name}</strong>`:e.name})),e.icon&&s("z-tag",{icon:e.icon})),e.children&&e.children.length>0?s("z-list",null,s("div",{class:"children-node"},e.children.map(((e,t,s)=>this.renderTreeItems(e,t===s.length-1,s.length>1,false))))):null)}renderGroupedTree(){const e=this.itemsList.reduce(((e,t)=>{const s=t.category||"Altra categoria";e[s]=e[s]||[];e[s].push(t);return e}),{});return Object.entries(e).map((([t,i],l,c)=>{const n=Object.values(e).some((e=>e.length>1));return s("z-list-group",{"divider-type":l===c.length-1?undefined:r.ELEMENT,hasTreeItems:true},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},t),s("z-list",null,i.map(((e,t,i)=>[this.renderTreeItems(e,t===i.length-1,n,true),t<i.length-1?s("z-divider",{key:`divider-${t}`,style:{zIndex:"100",height:"var(--border-size-small)"}}):null]))),l!==c.length-1&&s("z-divider",{style:{zIndex:"100",height:"var(--border-size-small)"}}))}))}renderSelectGroupItems(){const e=this.itemsList.reduce(((e,t,s,i)=>{var l;const{category:c}=t;const r=i.length===s+1;const n=this.renderItem(t,r);e[c]=(l=e[c])!==null&&l!==void 0?l:[];e[c].push(n);return e}),{});return Object.entries(e).map((([e,t])=>s("z-list-group",{"divider-type":r.ELEMENT},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},e),t.map((e=>e)))))}renderNoSearchResults(){return s("z-list-element",{color:"color-primary01",class:"no-results",size:this.hasTreeItems?n.MEDIUM:this.listSizeType()},s("z-icon",{name:"multiply-circle",fill:"color-primary01-icon"}),this.noresultslabel)}renderMessage(){if(a(this.message)===false){return}return s("z-input-message",{message:a(this.message)===true?undefined:this.message,status:this.status,class:this.size,disabled:this.disabled})}render(){return s("div",{key:"175046b438342ee0b6bae38a35a0c70f47cdc0f8",class:"select-wrapper"},this.renderInput(),this.renderSelectUl(),this.renderMessage())}get host(){return i(this)}static get watchers(){return{items:["watchItems"]}}};m.style=u;export{m as z_select};
-//# sourceMappingURL=p-da30a6cb.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZSelectStyle0","ZSelect","constructor","hostRef","this","itemsList","itemIdKeyMap","resetKey","randomId","ControlSize","BIG","toggleSelectUl","bind","handleSelectFocus","watchItems","getInitialItemsArray","selectedItem","findSelectedItem","flattenedList","flattenTreeItems","forEach","item","key","id","getFocusedItemHandler","e","focusedItemId","target","getSelectedItem","getValue","getSelectedValue","setValue","value","values","push","length","updateSelection","emitOptionSelect","optionSelect","emit","htmlid","selected","emitResetSelect","resetSelect","componentWillLoad","componentWillRender","filterItems","searchString","items","JSON","parse","mapSelectedItemToItemsArray","initialItemsList","map","_a","prevList","hasTreeItems","filterTree","filter","name","toUpperCase","includes","getHighlightedText","matchingParent","match","newItem","Object","assign","children","showChildrenOfMatchingParent","text","search","upperText","upperSearch","start","indexOf","end","substring","hasAutocomplete","boolean","autocomplete","handleInputChange","detail","isOpen","selectedId","found","selectItem","disabled","flatItems","index","flatten","subItems","itm","arrowsSelectNav","idOrReset","showResetIcon","resetItem","arrows","KeyboardCode","ARROW_DOWN","ARROW_UP","preventDefault","stopPropagation","f","unshift","currentIndex","findIndex","k","lastIndex","newIndex","focusSelectItem","host","querySelector","focus","selfFocusOnClose","readonly","document","addEventListener","removeEventListener","handleInputClick","closest","clickedElement","getClickedElement","hasAttribute","KeyboardEvent","ESC","ENTER","TAB","getElementTree","find","elem","nodeName","toLowerCase","MouseEvent","scrollToLetter","letter","foundItem","charAt","renderInput","h","class","placeholder","replace","label","ariaLabel","icon","hasclearicon","message","status","undefined","role","size","onClick","onKeyUp","handleKeyboardSubmit","onKeyDown","current","onInputChange","onKeyPress","String","fromCharCode","keyCode","renderSelectUl","fixed","isfixed","tabindex","listSizeType","renderResetItem","renderSelectUlItems","hide","hasGroupItems","clickable","dividerType","ListDividerType","ELEMENT","ListSize","MEDIUM","onClickItem","renderItem","lastItem","thisItemKey","HEADER","innerHTML","NONE","SMALL","X_SMALL","renderNoSearchResults","renderSelectGroupItems","renderGroupedTree","array","isLastItem","parentHasSiblings","renderTreeItems","isLastChild","isTopLevel","hasDivider","_b","tabIndex","title","child","arr","grouped","reduce","acc","category","entries","some","groupItems","slot","i","style","zIndex","height","newData","group","zListItem","color","fill","noresultslabel","renderMessage","render"],"sources":["src/components/z-select/styles.css?tag=z-select&encapsulation=scoped","src/components/z-select/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: inherit;\n  color: var(--color-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-form-surface03);\n  --background-active-color-list-element: var(--color-form-surface03);\n}\n\n.select-wrapper .ul-scroll-wrapper > z-list {\n  position: relative;\n  overflow: auto;\n  max-height: 240px;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  outline: none;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element[disabled] {\n  color: var(--color-form-disabled03);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container {\n  display: flex;\n  align-items: center;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  column-gap: var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content {\n  margin-right: auto;\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon + .list-element-content {\n  padding: calc(var(--space-unit) * 0.5) var(--space-unit);\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  .list-element-content {\n  padding: 0;\n}\n\n:host([size=\"small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n:host([size=\"x-small\"]) .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container > z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n:host([size=\"x-small\"])\n  .select-wrapper\n  .ul-scroll-wrapper\n  z-list\n  z-list-element\n  .list-element-container\n  > z-icon\n  + .list-element-content {\n  padding: 0 var(--space-unit);\n}\n\n.select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container .list-element-content.selected {\n  font-weight: var(--font-sb);\n}\n\n.select-wrapper .ul-scroll-wrapper .no-results z-icon {\n  margin-right: var(--space-unit);\n}\n\n.z-list-group-title {\n  color: var(--color-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-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: -15px;\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: -15px;\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.grouped-tree-parent-node {\n  padding-top: 0;\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.25) 0;\n  cursor: pointer;\n}\n\nz-list-element > .list-element:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\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: 40px;\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  top: 8px;\n  right: -25px;\n  display: block;\n  width: 100%;\n  height: 40px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\nz-list-element.grouped-tree-parent-node .list-element::after {\n  position: absolute;\n  top: 8px;\n  right: -25px;\n  display: block;\n  width: 100%;\n  height: 40px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\nz-list-element:not([disabled]) > .list-element:hover,\nz-list-element:not([disabled]) > .list-element:hover::after {\n  z-index: -1;\n  background-color: var(--color-form-surface03);\n  cursor: pointer;\n}\n\n.item-label.selected {\n  font-weight: bold;\n}\n\nz-list-element:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\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  top: 8px;\n  right: -18px;\n  display: block;\n  width: 100%;\n  height: 40px;\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: 40px;\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.children-node z-list-element::before,\n.children-node z-list-element::after {\n  left: -15px;\n}\n\n.children-node .children-node z-list-element::before,\n.children-node .children-node z-list-element::after {\n  left: -15px;\n}\n\n.children-node > z-list-element {\n  padding: 0;\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InputStatus, KeyboardCode, ListDividerType, ListSize, SelectItem} from \"../../beans\";\nimport {boolean, getClickedElement, getElementTree, handleKeyboardSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-select\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZSelect {\n  @Element() host: HTMLZSelectElement;\n\n  /** the id of the input element */\n  @Prop()\n  htmlid = `id-${randomId()}`;\n\n  /** the input select options */\n  @Prop()\n  items: SelectItem[] | string;\n\n  /** the input name */\n  @Prop()\n  name?: string;\n\n  /** the input label */\n  @Prop()\n  label?: string;\n\n  /** the input aria-label */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** the input is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** the input is readonly */\n  @Prop()\n  readonly?: boolean = false;\n\n  /** the input placeholder (optional) */\n  @Prop()\n  placeholder?: string;\n\n  /** the input html title (optional) */\n  @Prop()\n  htmltitle?: string;\n\n  /** the input status (optional) */\n  @Prop()\n  status?: InputStatus;\n\n  /** input helper message (optional) - if set to `false` message won't be displayed */\n  @Prop()\n  message?: string | boolean = true;\n\n  /** the input has autocomplete option */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** */\n  @Prop()\n  hasGroupItems?: boolean;\n\n  /** */\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  @State()\n  private flattenedList: {item: SelectItem; key: number}[] = [];\n\n  private itemsList: SelectItem[] = [];\n\n  private itemIdKeyMap: Record<string, number> = {};\n\n  private readonly resetKey = -1;\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    this.flattenedList = this.flattenTreeItems(this.itemsList);\n    this.itemIdKeyMap = {};\n    this.flattenedList.forEach(({item, key}) => {\n      this.itemIdKeyMap[item.id] = key;\n    });\n  }\n\n  @Listen(\"ariaDescendantFocus\")\n  getFocusedItemHandler(e: CustomEvent): void {\n    this.focusedItemId = (e.target as Element).id;\n  }\n\n  /** get the input selected options */\n  @Method()\n  async getSelectedItem(): Promise<SelectItem> {\n    return this.selectedItem;\n  }\n\n  /** get the input value */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.getSelectedValue();\n  }\n\n  /** set the input value */\n  @Method()\n  async setValue(value: string | string[]): Promise<void> {\n    let values: string[] = [];\n    if (typeof value === \"string\") {\n      values.push(value);\n    } else {\n      values = value;\n    }\n\n    this.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    return initialItemsList.map((item: SelectItem) => {\n      item.selected = item.id === this.selectedItem?.id;\n\n      return item;\n    });\n  }\n\n  private getSelectedValue(): string {\n    return this.selectedItem?.id;\n  }\n\n  private filterItems(searchString: string): void {\n    const prevList = this.mapSelectedItemToItemsArray();\n\n    if (!searchString?.length) {\n      this.itemsList = prevList;\n\n      return;\n    }\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    this.flattenedList = this.flattenTreeItems(this.itemsList);\n    this.itemIdKeyMap = {};\n    this.flattenedList.forEach(({item, key}) => {\n      this.itemIdKeyMap[item.id] = key;\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(newItem.children, searchString, match);\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(true);\n\n    if (this.searchString) {\n      this.searchString = null;\n    }\n  }\n\n  private flattenTreeItems(items: SelectItem[]): {item: SelectItem; key: number}[] {\n    const flatItems: {item: SelectItem; key: number}[] = [];\n    let index = 0;\n\n    const flatten = (subItems: SelectItem[]): void => {\n      subItems.forEach((itm) => {\n        flatItems.push({item: itm, key: index++});\n        if (itm.children && itm.children.length > 0) {\n          flatten(itm.children);\n        }\n      });\n    };\n\n    if (items) {\n      flatten(items);\n    }\n\n    return flatItems;\n  }\n\n  private arrowsSelectNav(e: KeyboardEvent, idOrReset: string | number): void {\n    const showResetIcon = this.resetItem && !!this.selectedItem;\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 flatItems = [...this.flattenedList].filter((f) => !f.item.disabled);\n\n    if (this.resetItem && showResetIcon) {\n      flatItems.unshift({\n        item: {id: \"__RESET_ITEM__\"} as SelectItem,\n        key: this.resetKey,\n      });\n    }\n\n    let currentIndex: number;\n    if (typeof idOrReset === \"number\") {\n      currentIndex = flatItems.findIndex((f) => f.key === idOrReset);\n    } else {\n      const k = this.itemIdKeyMap[idOrReset];\n      currentIndex = flatItems.findIndex((f) => f.key === k);\n    }\n\n    if (!this.isOpen) {\n      this.toggleSelectUl();\n\n      if (currentIndex === -1) {\n        currentIndex = -1;\n      }\n    }\n\n    const lastIndex = flatItems.length - 1;\n\n    let newIndex = currentIndex;\n\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      do {\n        newIndex = newIndex === lastIndex ? 0 : newIndex + 1;\n      } while (flatItems[newIndex].item.disabled);\n    } else {\n      do {\n        newIndex = newIndex <= 0 ? lastIndex : newIndex - 1;\n      } while (flatItems[newIndex].item.disabled);\n    }\n\n    this.focusSelectItem(flatItems[newIndex].key);\n  }\n\n  private focusSelectItem(key: number): void {\n    this.host.querySelector<HTMLDivElement>(`#${this.htmlid}_key_${key}`)?.focus();\n  }\n\n  private toggleSelectUl(selfFocusOnClose = false): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (!this.isOpen) {\n      document.addEventListener(\"click\", this.handleSelectFocus);\n      document.addEventListener(\"keyup\", this.handleSelectFocus);\n    } else {\n      document.removeEventListener(\"click\", this.handleSelectFocus);\n      document.removeEventListener(\"keyup\", this.handleSelectFocus);\n      if (selfFocusOnClose) {\n        (this.host.querySelector(`#${this.htmlid}_input`) as HTMLInputElement)?.focus();\n      }\n    }\n\n    this.focusedItemId = \"\";\n    this.isOpen = !this.isOpen;\n  }\n\n  private handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    if ((e.target as HTMLElement).closest(\".reset-icon\")) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    this.toggleSelectUl();\n  }\n\n  private handleSelectFocus(e: MouseEvent | KeyboardEvent): void {\n    const clickedElement = getClickedElement();\n    if (clickedElement?.hasAttribute(\"disabled\")) {\n      return;\n    }\n\n    if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {\n      e.stopPropagation();\n\n      return this.toggleSelectUl(true);\n    }\n\n    if (e instanceof KeyboardEvent && (e.key === KeyboardCode.ENTER || e.key !== KeyboardCode.TAB)) {\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      this.toggleSelectUl(e instanceof MouseEvent);\n    }\n  }\n\n  private scrollToLetter(letter: string): void {\n    const foundItem = this.itemsList.findIndex((item: SelectItem) => item.name.charAt(0) === letter);\n    if (foundItem > -1) {\n      this.focusSelectItem(this.itemIdKeyMap[this.itemsList[foundItem].id]);\n    }\n  }\n\n  private renderInput(): HTMLZInputElement {\n    return (\n      <z-input\n        class={{\n          \"active-select\": this.isOpen,\n          \"cursor-select\": !this.autocomplete,\n        }}\n        id={`${this.htmlid}_input`}\n        htmlid={`${this.htmlid}_select_input`}\n        placeholder={this.placeholder}\n        value={!this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, \"\") : null}\n        label={this.label}\n        aria-expanded={this.isOpen ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        aria-controls={`${this.htmlid}_list`}\n        aria-autocomplete={this.hasAutocomplete() ? \"list\" : \"none\"}\n        aria-activedescendant={this.isOpen ? this.focusedItemId : \"\"}\n        icon={this.isOpen ? \"caret-up\" : \"caret-down\"}\n        hasclearicon={this.hasAutocomplete()}\n        message={false}\n        name={this.name}\n        disabled={this.disabled}\n        readonly={this.readonly || (!this.hasAutocomplete() && this.isOpen)}\n        status={this.isOpen ? undefined : this.status}\n        role=\"combobox\"\n        size={this.size}\n        onClick={(e: MouseEvent) => {\n          this.handleInputClick(e);\n        }}\n        onKeyUp={(e: KeyboardEvent) => {\n          if (e.key !== KeyboardCode.ENTER) {\n            e.preventDefault();\n          }\n          handleKeyboardSubmit(e, this.toggleSelectUl);\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          const current = this.selectedItem\n            ? this.itemIdKeyMap[this.selectedItem.id]\n            : this.resetItem\n              ? this.resetKey\n              : \"\";\n\n          return this.arrowsSelectNav(e, current);\n        }}\n        onInputChange={(e: CustomEvent) => {\n          this.handleInputChange(e);\n        }}\n        onKeyPress={(e: KeyboardEvent) => {\n          if (!this.hasAutocomplete()) {\n            e.preventDefault();\n            this.scrollToLetter(String.fromCharCode(e.keyCode));\n          }\n        }}\n      />\n    );\n  }\n\n  private renderSelectUl(): HTMLDivElement {\n    return (\n      <div class={this.isOpen ? \"open\" : \"closed\"}>\n        <div\n          class={{\n            \"ul-scroll-wrapper\": true,\n            \"fixed\": this.isfixed,\n          }}\n        >\n          <z-list\n            role=\"listbox\"\n            aria-label={this.ariaLabel || this.label}\n            tabindex={this.disabled || this.readonly || !this.isOpen ? -1 : 0}\n            id={`${this.htmlid}_list`}\n            aria-multiselectable={false}\n            size={this.listSizeType()}\n            class={{\n              \"disabled\": this.disabled,\n              \"readonly\": this.readonly,\n              [`input-${this.status}`]: !this.isOpen && !!this.status,\n              \"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    return (\n      <z-list-element\n        class={{\n          \"hide\": !this.selectedItem || !this.resetItem,\n          \"reset-item\": true,\n          \"reset-item-margin\": !this.hasGroupItems,\n        }}\n        clickable={true}\n        disabled={false}\n        dividerType={ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex=\"0\"\n        aria-selected=\"false\"\n        id={`${this.htmlid}_key_${this.resetKey}`}\n        size={this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType()}\n        onClickItem={() => {\n          this.selectedItem = null;\n          this.searchString = null;\n          this.emitResetSelect();\n        }}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, this.resetKey)}\n      >\n        <div\n          class={{\n            \"reset-item-content\": true,\n            \"tree-list-reset-item\": this.hasTreeItems,\n          }}\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    const thisItemKey = this.itemIdKeyMap[item.id];\n\n    return (\n      <z-list-element\n        clickable={!item.disabled}\n        disabled={item.disabled}\n        dividerType={lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT}\n        role=\"option\"\n        tabindex={item.disabled || !this.isOpen ? -1 : 0}\n        aria-selected={item.selected ? \"true\" : \"false\"}\n        id={`${this.htmlid}_key_${thisItemKey}`}\n        size={this.listSizeType()}\n        onClickItem={() => this.selectItem(item)}\n        onKeyDown={(e: KeyboardEvent) => this.arrowsSelectNav(e, thisItemKey)}\n      >\n        <div class=\"list-element-container\">\n          <div\n            class={{\n              \"selected\": !!item.selected,\n              \"list-element-content\": true,\n            }}\n            innerHTML={item.name}\n          />\n          {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  //eslint-disable-next-line\n  private renderSelectUlItems(): any {\n    if (!this.itemsList.length) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasGroupItems && !this.hasTreeItems) {\n      return this.renderSelectGroupItems();\n    } else if (this.hasGroupItems && this.hasTreeItems) {\n      return this.renderGroupedTree();\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);\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  ): HTMLZListElementElement[] {\n    const thisItemKey = this.itemIdKeyMap[item.id];\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={item.disabled}\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      >\n        <div\n          id={`${this.htmlid}_key_${thisItemKey}`}\n          role=\"option\"\n          class=\"list-element\"\n          tabIndex={0}\n          onClick={() => this.selectItem(item)}\n          onKeyDown={(e: KeyboardEvent) => {\n            this.arrowsSelectNav(e, thisItemKey);\n            if (e.key === KeyboardCode.ENTER) {\n              this.selectItem(item);\n            }\n          }}\n        >\n          <span class=\"item ellipsis\">\n            <span\n              class={{\n                \"item-label\": true,\n                \"selected\": !!item.selected,\n              }}\n              title={item.name}\n              innerHTML={item.selected ? `<strong>${item.name}</strong>` : 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>\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                )\n              )}\n            </div>\n          </z-list>\n        ) : null}\n      </z-list-element>\n    );\n  }\n\n  private renderGroupedTree(): HTMLZListGroupElement[] {\n    const grouped = this.itemsList.reduce(\n      (acc, item) => {\n        const category = item.category || \"Altra categoria\";\n        acc[category] = acc[category] || [];\n        acc[category].push(item);\n\n        return acc;\n      },\n      {} as Record<string, SelectItem[]>\n    );\n\n    return Object.entries(grouped).map(([category, items], index, entries) => {\n      const parentHasSiblings = Object.values(grouped).some((groupItems) => groupItems.length > 1);\n      // const parentHasSiblings = items.length > 1;\n\n      return (\n        <z-list-group\n          divider-type={index === entries.length - 1 ? undefined : ListDividerType.ELEMENT}\n          hasTreeItems={true}\n        >\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {category}\n          </span>\n          <z-list>\n            {items.map((item, i, arr) => [\n              this.renderTreeItems(item, i === arr.length - 1, parentHasSiblings, true),\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 newData = this.itemsList.reduce(\n      (group, item, index, array) => {\n        const {category} = item;\n        const lastItem = array.length === index + 1;\n        const zListItem = this.renderItem(item, lastItem);\n\n        group[category] = group[category] ?? [];\n        group[category].push(zListItem);\n\n        return group;\n      },\n      {} as Record<string, HTMLZListElementElement[]>\n    );\n\n    return Object.entries(newData).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n  }\n\n  private renderNoSearchResults(): HTMLZListElementElement {\n    return (\n      <z-list-element\n        color=\"color-primary01\"\n        class=\"no-results\"\n        size={this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType()}\n      >\n        <z-icon\n          name=\"multiply-circle\"\n          fill=\"color-primary01-icon\"\n        />\n        {this.noresultslabel}\n      </z-list-element>\n    );\n  }\n\n  private renderMessage(): HTMLZInputMessageElement {\n    if (boolean(this.message) === false) {\n      return;\n    }\n\n    return (\n      <z-input-message\n        message={boolean(this.message) === true ? undefined : (this.message as string)}\n        status={this.status}\n        class={this.size}\n        disabled={this.disabled}\n      />\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div class=\"select-wrapper\">\n        {this.renderInput()}\n        {this.renderSelectUl()}\n        {this.renderMessage()}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-37f271c8.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as o,a as r,g as s}from"./p-75c4a726.js";import{P as i,g as n}from"./p-17af7fb2.js";const a=':host{position:absolute;display:none;min-width:calc(var(--space-unit) * 8);max-width:100%;min-height:calc(var(--space-unit) * 4);max-height:100%;align-items:center;justify-content:center;padding:var(--z-popover-padding, 0);background:var(--z-popover-theme--surface, var(--color-surface01));border-radius:var(--border-radius-small);color:var(--z-popover-theme--text, var(--color-default-text));fill:currentcolor;filter:var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));font-family:var(--font-family-sans);text-align:center}:host([open]:not([current-position])){visibility:hidden}:host([open][current-position]),:host([open="true"][current-position]){display:flex}:host([center][current-position="top"]),:host([center][current-position="bottom"]){transform:translateX(-50%)}:host([center][current-position="right"]),:host([center][current-position="left"]){transform:translateY(-50%)}:host([current-position^="top"]){margin:0 0 var(--space-unit)}:host([current-position^="bottom"]){margin:var(--space-unit) 0 0}:host([current-position^="left"]){margin:0 var(--space-unit) 0 0}:host([current-position^="right"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface, var(--color-surface01));content:"";transform:rotate(45deg)}:host([show-arrow="false"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^="top"])::before{top:var(--arrow-center-y-offset)}:host([current-position^="bottom"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position="top"])::before,:host([current-position="bottom"])::before{right:var(--arrow-edge-offset)}:host([current-position="right"])::before,:host([current-position="left"])::before{bottom:var(--arrow-edge-offset)}:host([current-position="right"])::before{right:var(--arrow-center-y-offset)}:host([current-position="left"])::before{left:var(--arrow-center-y-offset)}:host([current-position="top_right"])::before,:host([current-position="bottom_right"])::before{right:var(--arrow-edge-offset)}:host([current-position="top_left"])::before,:host([current-position="bottom_left"])::before{left:var(--arrow-edge-offset)}:host([current-position="right_top"])::before,:host([current-position="left_top"])::before{top:var(--arrow-edge-offset)}:host([current-position="right_top"])::before,:host([current-position="right_bottom"])::before{right:var(--arrow-center-y-offset)}:host([current-position="left_top"])::before,:host([current-position="left_bottom"])::before{left:var(--arrow-center-y-offset)}:host([current-position="right_bottom"])::before,:host([current-position="left_bottom"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position="top"])::before,:host([center][current-position="bottom"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position="right"])::before,:host([center][current-position="left"])::before{top:var(--arrow-center-x-offset);bottom:auto}::slotted(*){overflow:auto;flex:1 auto}';const c=a;const h=document.documentElement;function f(t){if(t.parentNode===t.shadowRoot){return t.shadowRoot.host}return t.parentElement}function p(t){let e=f(t);while(e&&e!==h){const t=window.getComputedStyle(e);const{overflow:o,overflowX:r,overflowY:s}=t;if(o==="hidden"||s==="hidden"||r==="hidden"){return e}const i=o!=="visible";const n=s!=="visible";const a=r!=="visible";if(e.scrollHeight>e.clientHeight&&i&&n||e.scrollWidth>e.clientWidth&&i&&a){return e}e=f(e)}return h}function u(t,e){const o=t.getBoundingClientRect();const{width:r,height:s}=o;let i=0;let n=0;let a=t;while(a&&a!==e){n+=a.offsetLeft;if(a===document.body){i+=a.getBoundingClientRect().top+window.scrollY}else{i+=a.offsetTop}if(window.DOMMatrix){const t=window.getComputedStyle(a);const{transform:e}=t;if(e&&e!=="none"){const t=new DOMMatrix(e);n+=t.m41;if(a!==document.body){i+=t.m42}}}if(!a.offsetParent){break}a=a.offsetParent}let c;let h;if(a===document.body){c=window.innerWidth;h=window.innerHeight}else{c=a.offsetWidth;h=a.offsetHeight}const f=c-n-r;const p=h-i-s;return{top:i,right:f,bottom:p,left:n,width:r,height:s}}const l=class{constructor(o){t(this,o);this.positionChange=e(this,"positionChange",7);this.openChange=e(this,"openChange",7);this.spaceTolerance=3;this.position=i.TOP;this.open=false;this.bindTo=undefined;this.showArrow=false;this.center=false;this.closable=true;this.currentPosition=undefined}closePopoverWithKeyboard(t){if(this.closable&&t.key===n.ESC){this.open=false}}handleOutsideClick(t){if(!this.closable||!this.open){return}const e=t.composedPath();if(!e.includes(this.host)){const e=t.target;let o=false;if(typeof this.bindTo==="string"){o=!!e.closest(this.bindTo)}else if(this.bindTo){o=this.bindTo.contains(e)}if(o){t.stopPropagation()}this.open=false;this.positionChange.emit({position:this.currentPosition})}}validatePosition(t){if(!Object.values(i).includes(t)||t===i.AUTO){t=i.TOP}this.position=t;this.currentPosition=t;this.positionChange.emit({position:this.currentPosition});this.setPosition()}onOpen(){cancelAnimationFrame(this.animationFrameRequestId);if(this.open){const t=()=>{if(this.open){this.setPosition();this.animationFrameRequestId=requestAnimationFrame(t)}};setTimeout((()=>{t()}),0)}this.openChange.emit({open:this.open})}hasCenteredHorizontalSpace(t,e,o,r,s){const i=(o-r)*(1-s);return t>=i-this.spaceTolerance&&e>=i-this.spaceTolerance}hasCenteredVerticalSpace(t,e,o,r,s){const i=(o-r)*(1-s);return t>=i-this.spaceTolerance&&e>=i-this.spaceTolerance}hasOffsetSpace(t,e,o,r){return t>=e-o*(1-r)-this.spaceTolerance}getOptimalPopoverPosition(t,e,o,r){const s=this.host.offsetWidth;const n=this.host.offsetHeight;const a=t=>{switch(t){case i.TOP:return e.top>=n&&this.hasCenteredHorizontalSpace(e.left,e.right,s,o.width,r);case i.TOP_RIGHT:return e.top>=n&&this.hasOffsetSpace(e.right,s,o.width,r);case i.TOP_LEFT:return e.top>=n&&this.hasOffsetSpace(e.left,s,o.width,r);case i.RIGHT:return e.right>=s&&this.hasCenteredVerticalSpace(e.top,e.bottom,n,o.height,r);case i.RIGHT_BOTTOM:return e.right>=s&&this.hasOffsetSpace(e.bottom,n,o.height,r);case i.RIGHT_TOP:return e.right>=s&&this.hasOffsetSpace(e.top,n,o.height,r);case i.BOTTOM:return e.bottom>=n&&this.hasCenteredHorizontalSpace(e.left,e.right,s,o.width,r);case i.BOTTOM_LEFT:return e.bottom>=n&&this.hasOffsetSpace(e.left,s,o.width,r);case i.BOTTOM_RIGHT:return e.bottom>=n&&this.hasOffsetSpace(e.right,s,o.width,r);case i.LEFT:return e.left>=s&&this.hasCenteredVerticalSpace(e.top,e.bottom,n,o.height,r);case i.LEFT_TOP:return e.left>=s&&this.hasOffsetSpace(e.top,n,o.height,r);case i.LEFT_BOTTOM:return e.left>=s&&this.hasOffsetSpace(e.bottom,n,o.height,r);default:return false}};if(a(t)){return t}const c=l.positionOrder;const h=c.indexOf(t);if(h===-1){return t}for(let t=1;t<c.length;t++){const e=(h+t)%c.length;const o=c[e];if(a(o)){return o}}return this.findBestFallbackPosition(e)}findBestFallbackPosition(t){const e=t.right>=t.left?i.RIGHT:i.LEFT;const o=t.bottom>=t.top?i.BOTTOM:i.TOP;const r=Math.max(t.right,t.left);const s=Math.max(t.bottom,t.top);const n=s>=r?o:e;let a=false;if(n===o){const e=Math.min(t.right,t.left);a=r>=e*2}else{const e=Math.min(t.bottom,t.top);a=s>=e*2}if(!a){return n}const c=n===o?e:o;return`${n}_${c}`}calculateAvailableSpace(t,e,o){const r=t.top-e.scrollTop;const s=o.height-(t.top+t.height)+e.scrollTop;const i=t.left-e.scrollLeft;const n=o.width-(t.left+t.width)+e.scrollLeft;const a=Math.max(0,o.top+o.height-window.innerHeight);const c=Math.max(0,o.left+o.width-window.innerWidth);return{top:Math.min(r,r+o.top),bottom:Math.min(s,s-a),left:Math.min(i,i+o.left),right:Math.min(n,n-c)}}calculateRelativeOffsets(t,e){return{top:t.top-e.top,right:t.right-e.right,bottom:t.bottom-e.bottom,left:t.left-e.left}}applyPositionStyles(t,e,o,r,s,n,a){const c=8;e.top="auto";e.right="auto";e.bottom="auto";e.left="auto";e.maxWidth="";e.maxHeight="";switch(t){case i.TOP:case i.TOP_RIGHT:e.bottom=`${o.bottom+r.height}px`;e.left=`${o.left+r.width*n-(t===i.TOP_RIGHT?a:0)}px`;e.maxHeight=`${s.top-c}px`;if(t===i.TOP_RIGHT){e.maxWidth=`${s.right+r.width*n}px`}break;case i.TOP_LEFT:e.right=`${o.right+r.width*n-a}px`;e.bottom=`${o.bottom+r.height}px`;e.maxWidth=`${s.left}px`;e.maxHeight=`${s.top-c}px`;break;case i.BOTTOM:case i.BOTTOM_RIGHT:e.top=`${o.top+r.height}px`;e.left=`${o.left+r.width*n-(t===i.BOTTOM_RIGHT?a:0)}px`;e.maxHeight=`${s.bottom-c}px`;if(t===i.BOTTOM_RIGHT){e.maxWidth=`${s.right+r.width*n}px`}break;case i.BOTTOM_LEFT:e.top=`${o.top+r.height}px`;e.right=`${o.right+r.width*n-a}px`;e.maxWidth=`${s.left}px`;e.maxHeight=`${s.bottom-c}px`;break;case i.RIGHT:case i.RIGHT_BOTTOM:e.top=`${o.top+r.height*n-(t===i.RIGHT_BOTTOM?a:0)}px`;e.left=`${o.left+r.width}px`;e.maxWidth=`${s.right-c}px`;if(t===i.RIGHT){e.maxHeight=`${Math.min(s.top+s.bottom+r.height,window.innerHeight-20)}px`}else{e.maxHeight=`${s.bottom+r.height*n}px`}break;case i.RIGHT_TOP:e.bottom=`${o.bottom+r.height*n-a}px`;e.left=`${o.left+r.width}px`;e.maxWidth=`${s.right-c}px`;if(t===i.RIGHT_TOP){e.maxHeight=`${s.top+r.height*n}px`}break;case i.LEFT:case i.LEFT_BOTTOM:e.top=`${o.top+r.height*n-(t===i.LEFT_BOTTOM?a:0)}px`;e.right=`${o.right+r.width}px`;e.maxWidth=`${s.left-c}px`;if(t===i.LEFT_BOTTOM){e.maxHeight=`${s.bottom+r.height*n}px`}break;case i.LEFT_TOP:e.right=`${o.right+r.width}px`;e.bottom=`${o.bottom+r.height*n-a}px`;e.maxWidth=`${s.left-c}px`;if(t===i.LEFT_TOP){e.maxHeight=`${s.top+r.height*n}px`}break}}setPosition(){let t;if(typeof this.bindTo==="string"){t=this.host.ownerDocument.querySelector(this.bindTo)}else if(this.bindTo){t=this.bindTo}else{t=this.host.parentElement}if(!t){return}const e=p(t);const o=e.getBoundingClientRect();const r=this.host.offsetParent;const s=r?u(r,e):{top:0,right:0,bottom:0,left:0};const i=u(t,e);const n=this.calculateAvailableSpace(i,e,o);const a=this.calculateRelativeOffsets(i,s);const c=this.center?.5:0;const h=this.showArrow&&this.center?8:0;const f=this.getOptimalPopoverPosition(this.position,n,{width:i.width,height:i.height},c);const l=this.host.style;this.applyPositionStyles(f,l,a,i,n,c,h);this.currentPosition=f}componentWillLoad(){this.validatePosition(this.position);this.onOpen()}componentDidLoad(){this.setPosition()}disconnectedCallback(){cancelAnimationFrame(this.animationFrameRequestId)}render(){return o(r,{key:"8628b0f299deb808e4c554047c76b82f392782c9","current-position":this.currentPosition},o("slot",{key:"144294e8216d7ad673e4ee3a96651c053703d135"}))}get host(){return s(this)}static get watchers(){return{position:["validatePosition"],open:["onOpen"]}}};l.positionOrder=[i.TOP_RIGHT,i.TOP,i.TOP_LEFT,i.RIGHT_BOTTOM,i.RIGHT,i.RIGHT_TOP,i.BOTTOM_LEFT,i.BOTTOM,i.BOTTOM_RIGHT,i.LEFT_TOP,i.LEFT,i.LEFT_BOTTOM];l.style=c;export{l as z_popover};
-//# sourceMappingURL=p-37f271c8.entry.js.map

package/www/build/p-37f271c8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZPopoverStyle0","DOCUMENT_ELEMENT","document","documentElement","getParentElement","element","parentNode","shadowRoot","host","parentElement","findScrollableParent","parent","style","window","getComputedStyle","overflow","overflowX","overflowY","isOverflowNotVisible","isOverflowYNotVisible","isOverflowXNotVisible","scrollHeight","clientHeight","scrollWidth","clientWidth","computeOffset","targetParentOffset","rect","getBoundingClientRect","width","height","top","left","offsetParent","offsetLeft","body","scrollY","offsetTop","DOMMatrix","transform","domMatrix","m41","m42","parentWidth","parentHeight","innerWidth","innerHeight","offsetWidth","offsetHeight","right","bottom","ZPopover","this","spaceTolerance","PopoverPosition","TOP","closePopoverWithKeyboard","e","closable","key","KeyboardCode","ESC","open","handleOutsideClick","eventPath","composedPath","includes","target","triggerElemClicked","bindTo","closest","contains","stopPropagation","positionChange","emit","position","currentPosition","validatePosition","newValue","Object","values","AUTO","setPosition","onOpen","cancelAnimationFrame","animationFrameRequestId","requestAnimationFrame","setTimeout","openChange","hasCenteredHorizontalSpace","availableLeft","availableRight","hostWidth","boundWidth","offsetModifier","requiredSpace","hasCenteredVerticalSpace","availableTop","availableBottom","hostHeight","boundHeight","hasOffsetSpace","availableSpace","hostSize","boundSize","getOptimalPopoverPosition","desiredPosition","boundElemSizes","fits","pos","TOP_RIGHT","TOP_LEFT","RIGHT","RIGHT_BOTTOM","RIGHT_TOP","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","LEFT","LEFT_TOP","LEFT_BOTTOM","positions","positionOrder","startIndex","indexOf","i","length","posIndex","findBestFallbackPosition","bestHorizontalDirection","bestVerticalDirection","maxHorizontalSpace","Math","max","maxVerticalSpace","mainDirection","needsSecondaryDirection","minHorizontalSpace","min","minVerticalSpace","secondaryDirection","calculateAvailableSpace","boundElementRect","scrollContainer","scrollingBoundingRect","scrollTop","scrollLeft","overflowBottom","overflowRight","calculateRelativeOffsets","relativeBoundingRect","applyPositionStyles","offsets","boundElementSizes","arrowModifier","distanceFromBound","maxWidth","maxHeight","boundElement","ownerDocument","querySelector","offsetContainer","center","showArrow","componentWillLoad","componentDidLoad","disconnectedCallback","render","h","Host"],"sources":["src/components/z-popover/styles.css?tag=z-popover&encapsulation=shadow","src/components/z-popover/index.tsx"],"sourcesContent":[":host {\n  --z-popover-theme--surface: ;\n  --z-popover-theme--text: ;\n  --z-popover-padding: ;\n  --z-popover-shadow-filter: ;\n\n  position: absolute;\n  display: none;\n  min-width: calc(var(--space-unit) * 8);\n  max-width: 100%;\n  min-height: calc(var(--space-unit) * 4);\n  max-height: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: var(--z-popover-padding, 0);\n  background: var(--z-popover-theme--surface, var(--color-surface01));\n  border-radius: var(--border-radius-small);\n  color: var(--z-popover-theme--text, var(--color-default-text));\n  fill: currentcolor;\n  filter: var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));\n  font-family: var(--font-family-sans);\n  text-align: center;\n}\n\n:host([open]:not([current-position])) {\n  visibility: hidden;\n}\n\n:host([open][current-position]),\n:host([open=\"true\"][current-position]) {\n  display: flex;\n}\n\n:host([center][current-position=\"top\"]),\n:host([center][current-position=\"bottom\"]) {\n  transform: translateX(-50%);\n}\n\n:host([center][current-position=\"right\"]),\n:host([center][current-position=\"left\"]) {\n  transform: translateY(-50%);\n}\n\n:host([current-position^=\"top\"]) {\n  margin: 0 0 var(--space-unit);\n}\n\n:host([current-position^=\"bottom\"]) {\n  margin: var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"left\"]) {\n  margin: 0 var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"right\"]) {\n  margin: 0 0 0 var(--space-unit);\n}\n\n/* Arrow style */\n\n:host([current-position])::before {\n  --arrow-size: 6px;\n  --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));\n  --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));\n  --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));\n\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--z-popover-theme--surface, var(--color-surface01));\n  content: \"\";\n  transform: rotate(45deg);\n}\n\n:host([show-arrow=\"false\"])::before,\n:host(:not([show-arrow]))::before {\n  display: none;\n}\n\n:host([current-position^=\"top\"])::before {\n  top: var(--arrow-center-y-offset);\n}\n\n:host([current-position^=\"bottom\"])::before {\n  bottom: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top\"])::before,\n:host([current-position=\"bottom\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before,\n:host([current-position=\"left\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top_right\"])::before,\n:host([current-position=\"bottom_right\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"top_left\"])::before,\n:host([current-position=\"bottom_left\"])::before {\n  left: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"left_top\"])::before {\n  top: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"right_bottom\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left_top\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"right_bottom\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([center][current-position=\"top\"])::before,\n:host([center][current-position=\"bottom\"])::before {\n  right: auto;\n  left: var(--arrow-center-x-offset);\n}\n\n:host([center][current-position=\"right\"])::before,\n:host([center][current-position=\"left\"])::before {\n  top: var(--arrow-center-x-offset);\n  bottom: auto;\n}\n\n::slotted(*) {\n  overflow: auto;\n  flex: 1 auto;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, PopoverPosition} from \"../../beans\";\n\nconst DOCUMENT_ELEMENT = document.documentElement;\n\ntype Offsets = {top: number; right: number; bottom: number; left: number};\ntype ElementSizes = {width: number; height: number};\n/** Centering offset modifier. 0 for no offset, 0.5 for centering. */\ntype OffsetModifier = 0 | 0.5;\n\nfunction getParentElement(element: Element): Element {\n  if (element.parentNode === element.shadowRoot) {\n    return element.shadowRoot.host;\n  }\n\n  return element.parentElement;\n}\n\n/**\n * Find the closest scrollable parent of a node.\n *\n * @param {Element} element The node\n */\nfunction findScrollableParent(element: Element): Element {\n  let parent = getParentElement(element);\n\n  while (parent && parent !== DOCUMENT_ELEMENT) {\n    const style = window.getComputedStyle(parent);\n    const {overflow, overflowX, overflowY} = style;\n\n    // Check for hidden overflow first (early return)\n    if (overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\") {\n      return parent;\n    }\n\n    // Only check scrollable if overflow is not visible\n    const isOverflowNotVisible = overflow !== \"visible\";\n    const isOverflowYNotVisible = overflowY !== \"visible\";\n    const isOverflowXNotVisible = overflowX !== \"visible\";\n\n    if (\n      (parent.scrollHeight > parent.clientHeight && isOverflowNotVisible && isOverflowYNotVisible) ||\n      (parent.scrollWidth > parent.clientWidth && isOverflowNotVisible && isOverflowXNotVisible)\n    ) {\n      return parent;\n    }\n\n    parent = getParentElement(parent);\n  }\n\n  return DOCUMENT_ELEMENT;\n}\n\n/**\n * Calculate computed offset.\n * It includes matrix transformations.\n * @param element The target element.\n * @param targetParentOffset The relative offset parent.\n */\nfunction computeOffset(element: HTMLElement, targetParentOffset?: HTMLElement): Offsets & ElementSizes {\n  const rect = element.getBoundingClientRect();\n  const {width, height} = rect;\n\n  let top = 0;\n  let left = 0;\n  let offsetParent = element;\n\n  while (offsetParent && offsetParent !== targetParentOffset) {\n    left += offsetParent.offsetLeft;\n\n    // document.body sometimes has offsetTop == 0 but still has an offset because of children margins!\n    if (offsetParent === document.body) {\n      top += offsetParent.getBoundingClientRect().top + window.scrollY;\n    } else {\n      top += offsetParent.offsetTop;\n    }\n\n    // Handle CSS transforms only when DOMMatrix is available\n    if (window.DOMMatrix) {\n      const style = window.getComputedStyle(offsetParent);\n      const {transform} = style;\n\n      if (transform && transform !== \"none\") {\n        const domMatrix = new DOMMatrix(transform);\n        left += domMatrix.m41;\n        if (offsetParent !== document.body) {\n          top += domMatrix.m42;\n        }\n      }\n    }\n\n    if (!offsetParent.offsetParent) {\n      break;\n    }\n\n    offsetParent = offsetParent.offsetParent as HTMLElement;\n  }\n\n  let parentWidth: number;\n  let parentHeight: number;\n  if (offsetParent === document.body) {\n    parentWidth = window.innerWidth;\n    parentHeight = window.innerHeight;\n  } else {\n    parentWidth = offsetParent.offsetWidth;\n    parentHeight = offsetParent.offsetHeight;\n  }\n\n  const right = parentWidth - left - width;\n  const bottom = parentHeight - top - height;\n\n  return {top, right, bottom, left, width, height};\n}\n\n/**\n * Popover component.\n * This component displays a popover that can be bound to an element.\n * It supports various positions and can automatically adjust its position based on available space.\n *\n * Notes:\n * - To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.\n * - Consider manually adjusting the size of the slotted element (using `max-width`, `max-height`, etc...) when its content is \"fluid\" (like a big text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think that the popover doesn't fit in the available space).\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n  tag: \"z-popover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPopover {\n  /**\n   * The preferred position to render the popover.\n   * The popover will automatically search another position if not enough space is available for the preferred position.\n   * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.\n   */\n  @Prop({reflect: true, mutable: true})\n  position?: PopoverPosition = PopoverPosition.TOP;\n\n  /**\n   * The open state of the popover.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the popover.\n   * If string css selector is provided make sure to use a valid selector.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Whether to show popover's arrow.\n   */\n  @Prop({reflect: true})\n  showArrow = false;\n\n  /**\n   * Whether to center the popup on the main side (according to \"position\").\n   */\n  @Prop({reflect: true})\n  center = false;\n\n  /**\n   * If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n   */\n  @Prop()\n  closable = true;\n\n  /**\n   * The current position of the popover.\n   * It differs from `position` only when calculated automatically (position=auto) or when the position is recalculated for space reasons.\n   */\n  @State()\n  currentPosition?: PopoverPosition;\n\n  /**\n   * Position change event.\n   */\n  @Event()\n  positionChange: EventEmitter;\n\n  /**\n   * Open change event.\n   */\n  @Event()\n  openChange: EventEmitter;\n\n  @Element() host: HTMLZPopoverElement;\n\n  private animationFrameRequestId?: number;\n\n  private readonly spaceTolerance = 3; // 3px tolerance for space calculations\n\n  @Listen(\"keyup\", {target: \"window\"})\n  closePopoverWithKeyboard(e: KeyboardEvent): void {\n    if (this.closable && e.key === KeyboardCode.ESC) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Close the popover when clicking outside of its content.\n   * Stop event propagation if the click was fired by popover's trigger element,\n   * to prevent close and reopen glitches.\n   * @param {MouseEvent} e\n   */\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleOutsideClick(e: MouseEvent): void {\n    if (!this.closable || !this.open) {\n      return;\n    }\n\n    const eventPath = e.composedPath();\n    if (!eventPath.includes(this.host)) {\n      const target = e.target as HTMLElement;\n      let triggerElemClicked = false;\n\n      if (typeof this.bindTo === \"string\") {\n        triggerElemClicked = !!target.closest(this.bindTo);\n      } else if (this.bindTo) {\n        triggerElemClicked = this.bindTo.contains(target);\n      }\n\n      if (triggerElemClicked) {\n        // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n        e.stopPropagation();\n      }\n\n      this.open = false;\n      this.positionChange.emit({position: this.currentPosition});\n    }\n  }\n\n  @Watch(\"position\")\n  validatePosition(newValue: PopoverPosition): void {\n    if (!Object.values(PopoverPosition).includes(newValue as PopoverPosition) || newValue === PopoverPosition.AUTO) {\n      newValue = PopoverPosition.TOP;\n    }\n\n    this.position = newValue;\n    this.currentPosition = newValue;\n    this.positionChange.emit({position: this.currentPosition});\n    this.setPosition();\n  }\n\n  /**\n   * Setup popover behaviors on opening.\n   */\n  @Watch(\"open\")\n  onOpen(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n\n    if (this.open) {\n      const setPosition = (): void => {\n        if (this.open) {\n          this.setPosition();\n          this.animationFrameRequestId = requestAnimationFrame(setPosition);\n        }\n      };\n\n      // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n      setTimeout(() => {\n        setPosition();\n      }, 0);\n    }\n\n    this.openChange.emit({open: this.open});\n  }\n\n  // Clockwise order of positions.\n  private static readonly positionOrder: PopoverPosition[] = [\n    PopoverPosition.TOP_RIGHT,\n    PopoverPosition.TOP,\n    PopoverPosition.TOP_LEFT,\n    PopoverPosition.RIGHT_BOTTOM,\n    PopoverPosition.RIGHT,\n    PopoverPosition.RIGHT_TOP,\n    PopoverPosition.BOTTOM_LEFT,\n    PopoverPosition.BOTTOM,\n    PopoverPosition.BOTTOM_RIGHT,\n    PopoverPosition.LEFT_TOP,\n    PopoverPosition.LEFT,\n    PopoverPosition.LEFT_BOTTOM,\n  ] as const;\n\n  /**\n   * Helper functions for space calculation\n   */\n  private hasCenteredHorizontalSpace(\n    availableLeft: number,\n    availableRight: number,\n    hostWidth: number,\n    boundWidth: number,\n    offsetModifier: OffsetModifier\n  ): boolean {\n    const requiredSpace = (hostWidth - boundWidth) * (1 - offsetModifier);\n\n    return (\n      availableLeft >= requiredSpace - this.spaceTolerance && availableRight >= requiredSpace - this.spaceTolerance\n    );\n  }\n\n  private hasCenteredVerticalSpace(\n    availableTop: number,\n    availableBottom: number,\n    hostHeight: number,\n    boundHeight: number,\n    offsetModifier: OffsetModifier\n  ): boolean {\n    const requiredSpace = (hostHeight - boundHeight) * (1 - offsetModifier);\n\n    return (\n      availableTop >= requiredSpace - this.spaceTolerance && availableBottom >= requiredSpace - this.spaceTolerance\n    );\n  }\n\n  private hasOffsetSpace(\n    availableSpace: number,\n    hostSize: number,\n    boundSize: number,\n    offsetModifier: OffsetModifier\n  ): boolean {\n    return availableSpace >= hostSize - boundSize * (1 - offsetModifier) - this.spaceTolerance;\n  }\n\n  /**\n   * Given a desired position and available space around the bound element, returns the best position\n   * that fits the popover, trying all positions if needed.\n   * Takes into account offsetModifier for centering.\n   * @param desiredPosition The desired position of the popover.\n   * @param availableSpace The available space around the bound element.\n   * @param boundElemSizes The sizes of the bound element.\n   * @param offsetModifier The modifier to apply to the offset for centering.\n   */\n  private getOptimalPopoverPosition(\n    desiredPosition: PopoverPosition,\n    availableSpace: Offsets,\n    boundElemSizes: ElementSizes,\n    offsetModifier: OffsetModifier\n  ): PopoverPosition {\n    const hostWidth = this.host.offsetWidth;\n    const hostHeight = this.host.offsetHeight;\n\n    // Check if the desired position has enough space\n    const fits = (pos: PopoverPosition): boolean => {\n      switch (pos) {\n        case PopoverPosition.TOP:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasCenteredHorizontalSpace(\n              availableSpace.left,\n              availableSpace.right,\n              hostWidth,\n              boundElemSizes.width,\n              offsetModifier\n            )\n          );\n\n        case PopoverPosition.TOP_RIGHT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasOffsetSpace(availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier)\n          );\n\n        case PopoverPosition.TOP_LEFT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasOffsetSpace(availableSpace.left, hostWidth, boundElemSizes.width, offsetModifier)\n          );\n\n        case PopoverPosition.RIGHT:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasCenteredVerticalSpace(\n              availableSpace.top,\n              availableSpace.bottom,\n              hostHeight,\n              boundElemSizes.height,\n              offsetModifier\n            )\n          );\n\n        case PopoverPosition.RIGHT_BOTTOM:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasOffsetSpace(availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier)\n          );\n\n        case PopoverPosition.RIGHT_TOP:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasOffsetSpace(availableSpace.top, hostHeight, boundElemSizes.height, offsetModifier)\n          );\n\n        case PopoverPosition.BOTTOM:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasCenteredHorizontalSpace(\n              availableSpace.left,\n              availableSpace.right,\n              hostWidth,\n              boundElemSizes.width,\n              offsetModifier\n            )\n          );\n\n        case PopoverPosition.BOTTOM_LEFT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasOffsetSpace(availableSpace.left, hostWidth, boundElemSizes.width, offsetModifier)\n          );\n\n        case PopoverPosition.BOTTOM_RIGHT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasOffsetSpace(availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier)\n          );\n\n        case PopoverPosition.LEFT:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasCenteredVerticalSpace(\n              availableSpace.top,\n              availableSpace.bottom,\n              hostHeight,\n              boundElemSizes.height,\n              offsetModifier\n            )\n          );\n\n        case PopoverPosition.LEFT_TOP:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasOffsetSpace(availableSpace.top, hostHeight, boundElemSizes.height, offsetModifier)\n          );\n\n        case PopoverPosition.LEFT_BOTTOM:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasOffsetSpace(availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier)\n          );\n\n        default:\n          return false;\n      }\n    };\n\n    // Check desired position first\n    if (fits(desiredPosition)) {\n      return desiredPosition;\n    }\n\n    // Find position index and create rotation starting from next position\n    const positions = ZPopover.positionOrder;\n    const startIndex = positions.indexOf(desiredPosition);\n\n    if (startIndex === -1) {\n      return desiredPosition; // fallback if position not found\n    }\n\n    // Try all other positions starting from the next one\n    for (let i = 1; i < positions.length; i++) {\n      const posIndex = (startIndex + i) % positions.length;\n      const pos = positions[posIndex];\n      if (fits(pos)) {\n        return pos;\n      }\n    }\n\n    // If no position fits, find the best fallback based on available space\n    return this.findBestFallbackPosition(availableSpace);\n  }\n\n  /**\n   * Find the best fallback position based on available space when no position fits perfectly\n   */\n  private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n    // Determine the directions with the most space\n    const bestHorizontalDirection =\n      availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;\n\n    const bestVerticalDirection =\n      availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;\n\n    // Choose the main direction based on which has more space\n    const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);\n    const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);\n\n    const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;\n\n    // Check if secondary direction is necessary\n    // Only add secondary direction if the difference between min and max in that direction is at least double\n    let needsSecondaryDirection = false;\n\n    if (mainDirection === bestVerticalDirection) {\n      // Main direction is vertical, check horizontal space difference\n      const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);\n      needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;\n    } else {\n      // Main direction is horizontal, check vertical space difference\n      const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);\n      needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;\n    }\n\n    if (!needsSecondaryDirection) {\n      return mainDirection;\n    }\n\n    const secondaryDirection =\n      mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;\n\n    // Create a combined position (e.g., \"bottom_right\")\n    return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n  }\n\n  /**\n   * Calculate available space around the bound element\n   */\n  private calculateAvailableSpace(\n    boundElementRect: Offsets & ElementSizes,\n    scrollContainer: HTMLElement,\n    scrollingBoundingRect: DOMRect\n  ): {top: number; right: number; bottom: number; left: number} {\n    const top = boundElementRect.top - scrollContainer.scrollTop;\n    const bottom =\n      scrollingBoundingRect.height - (boundElementRect.top + boundElementRect.height) + scrollContainer.scrollTop;\n    const left = boundElementRect.left - scrollContainer.scrollLeft;\n    const right =\n      scrollingBoundingRect.width - (boundElementRect.left + boundElementRect.width) + scrollContainer.scrollLeft;\n\n    const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);\n    const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);\n\n    return {\n      top: Math.min(top, top + scrollingBoundingRect.top),\n      bottom: Math.min(bottom, bottom - overflowBottom),\n      left: Math.min(left, left + scrollingBoundingRect.left),\n      right: Math.min(right, right - overflowRight),\n    };\n  }\n\n  /**\n   * Calculate relative offsets for positioning\n   */\n  private calculateRelativeOffsets(\n    boundElementRect: Offsets,\n    relativeBoundingRect: Offsets\n  ): {top: number; right: number; bottom: number; left: number} {\n    return {\n      top: boundElementRect.top - relativeBoundingRect.top,\n      right: boundElementRect.right - relativeBoundingRect.right,\n      bottom: boundElementRect.bottom - relativeBoundingRect.bottom,\n      left: boundElementRect.left - relativeBoundingRect.left,\n    };\n  }\n\n  /**\n   * Apply positioning styles based on position\n   */\n  private applyPositionStyles(\n    position: PopoverPosition,\n    style: CSSStyleDeclaration,\n    offsets: Offsets,\n    boundElementSizes: ElementSizes,\n    availableSpace: Offsets,\n    offsetModifier: OffsetModifier,\n    arrowModifier: number\n  ): void {\n    const distanceFromBound = 8; // 8px is the distance of the popover from the bound element\n    // Reset all positioning properties\n    style.top = \"auto\";\n    style.right = \"auto\";\n    style.bottom = \"auto\";\n    style.left = \"auto\";\n    style.maxWidth = \"\";\n    style.maxHeight = \"\";\n\n    switch (position) {\n      case PopoverPosition.TOP:\n      case PopoverPosition.TOP_RIGHT:\n        style.bottom = `${offsets.bottom + boundElementSizes.height}px`;\n        style.left = `${offsets.left + boundElementSizes.width * offsetModifier - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n        style.maxHeight = `${availableSpace.top - distanceFromBound}px`;\n        if (position === PopoverPosition.TOP_RIGHT) {\n          style.maxWidth = `${availableSpace.right + boundElementSizes.width * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.TOP_LEFT:\n        style.right = `${offsets.right + boundElementSizes.width * offsetModifier - arrowModifier}px`;\n        style.bottom = `${offsets.bottom + boundElementSizes.height}px`;\n        style.maxWidth = `${availableSpace.left}px`;\n        style.maxHeight = `${availableSpace.top - distanceFromBound}px`;\n        break;\n\n      case PopoverPosition.BOTTOM:\n      case PopoverPosition.BOTTOM_RIGHT:\n        style.top = `${offsets.top + boundElementSizes.height}px`;\n        style.left = `${offsets.left + boundElementSizes.width * offsetModifier - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n        style.maxHeight = `${availableSpace.bottom - distanceFromBound}px`;\n        if (position === PopoverPosition.BOTTOM_RIGHT) {\n          style.maxWidth = `${availableSpace.right + boundElementSizes.width * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.BOTTOM_LEFT:\n        style.top = `${offsets.top + boundElementSizes.height}px`;\n        style.right = `${offsets.right + boundElementSizes.width * offsetModifier - arrowModifier}px`;\n        style.maxWidth = `${availableSpace.left}px`;\n        style.maxHeight = `${availableSpace.bottom - distanceFromBound}px`;\n        break;\n\n      case PopoverPosition.RIGHT:\n      case PopoverPosition.RIGHT_BOTTOM:\n        style.top = `${offsets.top + boundElementSizes.height * offsetModifier - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n        style.left = `${offsets.left + boundElementSizes.width}px`;\n        style.maxWidth = `${availableSpace.right - distanceFromBound}px`;\n        if (position === PopoverPosition.RIGHT) {\n          style.maxHeight = `${Math.min(availableSpace.top + availableSpace.bottom + boundElementSizes.height, window.innerHeight - 20)}px`;\n        } else {\n          style.maxHeight = `${availableSpace.bottom + boundElementSizes.height * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.RIGHT_TOP:\n        style.bottom = `${offsets.bottom + boundElementSizes.height * offsetModifier - arrowModifier}px`;\n        style.left = `${offsets.left + boundElementSizes.width}px`;\n        style.maxWidth = `${availableSpace.right - distanceFromBound}px`;\n        if (position === PopoverPosition.RIGHT_TOP) {\n          style.maxHeight = `${availableSpace.top + boundElementSizes.height * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.LEFT:\n      case PopoverPosition.LEFT_BOTTOM:\n        style.top = `${offsets.top + boundElementSizes.height * offsetModifier - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n        style.right = `${offsets.right + boundElementSizes.width}px`;\n        style.maxWidth = `${availableSpace.left - distanceFromBound}px`;\n        if (position === PopoverPosition.LEFT_BOTTOM) {\n          style.maxHeight = `${availableSpace.bottom + boundElementSizes.height * offsetModifier}px`;\n        }\n        break;\n\n      case PopoverPosition.LEFT_TOP:\n        style.right = `${offsets.right + boundElementSizes.width}px`;\n        style.bottom = `${offsets.bottom + boundElementSizes.height * offsetModifier - arrowModifier}px`;\n        style.maxWidth = `${availableSpace.left - distanceFromBound}px`;\n        if (position === PopoverPosition.LEFT_TOP) {\n          style.maxHeight = `${availableSpace.top + boundElementSizes.height * offsetModifier}px`;\n        }\n        break;\n    }\n  }\n\n  /**\n   * Set the position of the popover.\n   */\n  private setPosition(): void {\n    let boundElement: HTMLElement;\n    if (typeof this.bindTo === \"string\") {\n      boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n    } else if (this.bindTo) {\n      boundElement = this.bindTo;\n    } else {\n      boundElement = this.host.parentElement as HTMLElement;\n    }\n\n    if (!boundElement) {\n      return;\n    }\n\n    const scrollContainer = findScrollableParent(boundElement) as HTMLElement;\n    const scrollingBoundingRect = scrollContainer.getBoundingClientRect();\n    const offsetContainer = this.host.offsetParent as HTMLElement;\n\n    const relativeBoundingRect = offsetContainer\n      ? computeOffset(offsetContainer, scrollContainer)\n      : {top: 0, right: 0, bottom: 0, left: 0};\n    const boundElementRect = computeOffset(boundElement, scrollContainer);\n\n    const availableSpace = this.calculateAvailableSpace(boundElementRect, scrollContainer, scrollingBoundingRect);\n    const offsets = this.calculateRelativeOffsets(boundElementRect, relativeBoundingRect);\n    const offsetModifier = this.center ? 0.5 : 0;\n    const arrowModifier = this.showArrow && this.center ? 8 : 0; // 8px is the distance of the arrow center from the edge of the popover\n\n    const position = this.getOptimalPopoverPosition(\n      this.position,\n      availableSpace,\n      {width: boundElementRect.width, height: boundElementRect.height},\n      offsetModifier\n    );\n\n    const style = this.host.style;\n    this.applyPositionStyles(position, style, offsets, boundElementRect, availableSpace, offsetModifier, arrowModifier);\n\n    this.currentPosition = position;\n  }\n\n  componentWillLoad(): void {\n    this.validatePosition(this.position);\n    this.onOpen();\n  }\n\n  componentDidLoad(): void {\n    this.setPosition();\n  }\n\n  disconnectedCallback(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n  }\n\n  render(): HTMLZPopoverElement {\n    return (\n      <Host current-position={this.currentPosition}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-57b8bd19.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,a,g as e}from"./p-75c4a726.js";import{C as r}from"./p-17af7fb2.js";const i=':host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot="title"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot="title"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot="text"]){margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot="action"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]) .actions,:host([variant="shadow"]) .actions{margin-top:auto}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}';const s=i;const n=class{constructor(o){t(this,o);this.variant=undefined;this.coverIcon=undefined;this.showShadow=false;this.clickable=false;this.hasCoverImage=undefined}componentWillLoad(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null}renderColorCoverCard(){return[o("div",{class:"cover-container"},o("div",{class:"color-cover"},o("div",{class:"cover-content"},o("slot",{name:"metadata"}),o("slot",{name:"title"})))),o("div",{class:"content"},o("slot",{name:"text"}),o("div",{class:"actions"},o("slot",{name:"action"})))]}renderContent(){return o("div",{class:"content"},o("slot",{name:"metadata"}),o("slot",{name:"title"}),o("slot",{name:"text"}),o("div",{class:"actions"},o("slot",{name:"action"})))}render(){if(this.variant===r.TEXT){return o(a,null,this.renderContent())}if(this.variant===r.OVERLAY||this.hasCoverImage){return o(a,null,o("div",{class:"cover-container"},this.hasCoverImage&&[o("slot",{name:"cover"}),this.variant!==r.OVERLAY&&this.coverIcon&&o("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&o("div",{class:"color-cover"})),this.renderContent())}return o(a,null,this.renderColorCoverCard())}get host(){return e(this)}};n.style=s;export{n as z_card};
-//# sourceMappingURL=p-57b8bd19.entry.js.map

package/www/build/p-57b8bd19.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZCardStyle0","ZCard","componentWillLoad","this","hasCoverImage","host","querySelector","renderColorCoverCard","h","class","name","renderContent","render","variant","CardVariant","TEXT","Host","OVERLAY","coverIcon"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":["/* The width of the card must be set by its container,\nrespecting the grid indications of the design. */\n\n:host {\n  /* Override this var to change the cover's aspect ratio */\n  --aspect-ratio: 1.62;\n  --z-card--border-color: var(--gray200);\n  --z-card--color-cover-background: var(--color-surface01);\n  --z-card--text-background: var(--color-surface01);\n  --z-card--text-border-radius: none;\n  --z-card--text-border: none;\n  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n  position: relative;\n  width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n  padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.cover-container > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 11);\n  --z-icon-height: var(--z-icon-width);\n\n  position: absolute;\n  top: calc(50% - calc(var(--z-icon-height) / 2));\n  left: calc(50% - calc(var(--z-icon-width) / 2));\n  fill: var(--color-primary01);\n}\n\n.color-cover {\n  background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n  display: -webkit-inline-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n  margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: \"\";\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n  margin: 0 0 calc(var(--space-unit) * 0.25);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"title\"]) {\n  margin: 0;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n  margin: 0;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n}\n\n.actions {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n:host([variant=\"text\"]) {\n  border: var(--z-card--text-border);\n  background-color: var(--z-card--text-background);\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n  height: 100%;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n  padding: var(--z-card--text-padding);\n}\n\n:host([variant=\"border\"]) .actions,\n:host([variant=\"shadow\"]) .actions {\n  margin-top: auto;\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n  border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n  background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n  border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n  box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n  box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /** Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc. */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContent()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContent()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"],"mappings":"wFAAA,MAAMA,EAAY,0lIAClB,MAAAC,EAAeD,E,MCsBFE,EAAK,M,yFAeH,M,eAID,M,6BAOZ,iBAAAC,GACEC,KAAKC,cAAgBD,KAAKE,KAAKC,cAAc,oBAAsB,I,CAO7D,oBAAAC,GACN,MAAO,CACLC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,eACTD,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,aAIjBF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,a,CASX,aAAAC,GACN,OACEH,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,Y,CAMnB,MAAAE,GACE,GAAIT,KAAKU,UAAYC,EAAYC,KAAM,CACrC,OAAOP,EAACQ,EAAI,KAAEb,KAAKQ,gB,CAGrB,GAAIR,KAAKU,UAAYC,EAAYG,SAAWd,KAAKC,cAAe,CAC9D,OACEI,EAACQ,EAAI,KACHR,EAAA,OAAKC,MAAM,mBACRN,KAAKC,eAAiB,CACrBI,EAAA,QAAME,KAAK,UACXP,KAAKU,UAAYC,EAAYG,SAAWd,KAAKe,WAAaV,EAAA,UAAQE,KAAMP,KAAKe,cAE7Ef,KAAKC,eAAiBI,EAAA,OAAKC,MAAM,iBAEpCN,KAAKQ,gB,CAKZ,OAAOH,EAACQ,EAAI,KAAEb,KAAKI,uB","ignoreList":[]}

package/www/build/p-69a1a67a.entry.js

@@ -1,2 +0,0 @@
-export{Z as z_tr}from"./p-61f76cab.js";import"./p-75c4a726.js";import"./p-a06fbbc0.js";import"./p-17af7fb2.js";import"./p-5145a606.js";import"./p-f19f12b1.js";import"./p-748fa3ae.js";
-//# sourceMappingURL=p-69a1a67a.entry.js.map

package/www/build/p-8d5e3396.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as a,a as e,g as s}from"./p-75c4a726.js";import"./p-1170826b.js";import"./p-4c9bf42d.js";import"./p-d7f12672.js";import"./p-61f76cab.js";import"./p-a06fbbc0.js";import"./p-17af7fb2.js";import"./p-5145a606.js";import"./p-f19f12b1.js";import"./p-748fa3ae.js";const r=":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";const o=r;const i=class{constructor(a){t(this,a);this.bordered=false;this.expandable=false}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()}));this.expandableMutationObserver.observe(this.host,{childList:true,subtree:true,attributes:true,attributeFilter:["expandable"],attributeOldValue:false})}disconnectedCallback(){var t;(t=this.expandableMutationObserver)===null||t===void 0?void 0:t.disconnect()}render(){return a(e,{key:"6749b44ab2c28b92e6b282487bf9f23c40cead58",expandable:this.expandable},a("div",{key:"633237695b09182263ac74b5118d533a8cae33b8",class:"table",role:"table"},a("slot",{key:"f46d287050238e137ababadae8b8eb1ffdb96c7b"})))}get host(){return s(this)}};i.style=o;export{i as z_table};
-//# sourceMappingURL=p-8d5e3396.entry.js.map

package/www/build/p-a06fbbc0.js

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