@zanichelli/albe-web-components 19.6.0 → 20.0.0-RC1

package/dist/components/index17.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZPopover","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","position","PopoverPosition","TOP","open","showArrow","center","closable","spaceTolerance","closePopoverWithKeyboard","e","key","KeyboardCode","ESC","stopPropagation","handleOutsideClick","target","containsElement","host","boundElement","validatePosition","newValue","Object","values","includes","AUTO","currentPosition","setPosition","onOpen","cancelAnimationFrame","animationFrameRequestId","openChange","emit","assign","style","top","right","bottom","left","maxWidth","maxHeight","visibility","undefined","updatePositionLoop","requestAnimationFrame","setTimeout","onBindingChange","findBoundElement","offsetModifier","bindTo","ownerDocument","querySelector","getParentElement","tagName","toLowerCase","hasCenteredHorizontalSpace","availableLeft","availableRight","hostWidth","boundElementWidth","requiredSideSpace","hasCenteredVerticalSpace","availableTop","availableBottom","hostHeight","boundElementHeight","hasEnoughSideSpace","availableSpace","hostSize","boundElementSize","getOptimalPopoverPosition","desiredPosition","offsetWidth","offsetHeight","getBoundingClientRect","width","height","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","findScrollableAncestor","element","parent","documentElement","getComputedStyle","overflow","overflowX","overflowY","hasHiddenOverflow","isScrollable","scrollHeight","clientHeight","scrollWidth","clientWidth","calculateAvailableSpace","boundElementRect","lastBoundRect","x","y","cachedAvailableSpace","scrollableAncestor","scrollableAncestorRect","isScrollableAncestorNested","documentWidth","documentHeight","safeSpace","deltaTop","deltaRight","deltaBottom","deltaLeft","getBoundElementOffsets","elementRect","computePositionOffsets","boundElementOffsets","containingBlockAncestor","findContainingBlockAncestor","isDocumentElement","containingBlockRect","containingBlockStyle","paddingBox","parseFloat","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","relativeOffsets","scrollTop","scrollLeft","applyPositionStyles","arrowModifier","hostStyle","distanceFromBound","marginTop","replace","positionOffsets","leftBase","rightBase","topBase","bottomBase","sideTopBase","sideBottomBase","getDevice","Device","MOBILE","isElementVisibleInContainer","positionChange","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  /**\n   * @prop --z-popover-theme--surface: background color of the popover.\n   * @prop --z-popover-theme--text: foreground color of the popover.\n   * @prop --z-popover-padding: padding of the popover.\n   * @prop --z-popover-shadow-filter: drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n   */\n  --z-popover-theme--surface: ;\n  --z-popover-theme--text: ;\n  --z-popover-padding: ;\n  --z-popover-shadow-filter: ;\n\n  position: fixed;\n  display: none;\n  max-width: calc(100dvw - var(--grid-margin) * 2);\n  max-height: calc(100dvh - var(--grid-margin) * 2);\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  text-align: center;\n  visibility: hidden; /* hidden by default. the positioning algorithm will set it to 'visible' when needed */\n}\n\n:host([open]:not([open=\"false\"])[current-position]) {\n  display: block;\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: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","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {Device, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {\n  containsElement,\n  findContainingBlockAncestor,\n  getDevice,\n  getParentElement,\n  isElementVisibleInContainer,\n} from \"../../utils/utils\";\n\n/** Centering offset modifier. 0 for no offset, 0.5 for centering. */\ntype OffsetModifier = 0 | 0.5;\ntype Offsets = {top: number; right: number; bottom: number; left: number};\n\n/**\n * Popover component.\n * This component displays a popover bound to an element.\n * It supports various positions and can automatically adjust it based on available space, accounting for scrollable containers.\n *\n * Notes:\n * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is \"fluid\" (like 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 the popover doesn't fits).\n */\n@Component({\n  tag: \"z-popover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPopover implements ComponentInterface {\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 initial open state of the popover.\n   * Internal changes of this prop are emitted through the `openChange` event.\n   * Make sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values.\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  /** Whether to show popover's arrow. */\n  @Prop({reflect: true})\n  showArrow = false;\n\n  /** Whether to center the popup on the main side (according to \"position\"). */\n  @Prop({reflect: true})\n  center = false;\n\n  /**\n   * Whether 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   * Default: `true`.\n   */\n  @Prop()\n  closable = true;\n\n  /**\n   * The current position of the popover.\n   * It differs from `position` only when calculated automatically for space reasons.\n   */\n  @State()\n  currentPosition?: PopoverPosition;\n\n  @Element() host: HTMLZPopoverElement;\n\n  // Clockwise order of positions.\n  private static readonly positionOrder: PopoverPosition[] = [\n    PopoverPosition.TOP,\n    PopoverPosition.TOP_RIGHT,\n    PopoverPosition.TOP_LEFT,\n    PopoverPosition.RIGHT,\n    PopoverPosition.RIGHT_BOTTOM,\n    PopoverPosition.RIGHT_TOP,\n    PopoverPosition.BOTTOM,\n    PopoverPosition.BOTTOM_LEFT,\n    PopoverPosition.BOTTOM_RIGHT,\n    PopoverPosition.LEFT,\n    PopoverPosition.LEFT_TOP,\n    PopoverPosition.LEFT_BOTTOM,\n  ] as const;\n\n  private animationFrameRequestId?: number;\n\n  /** space tolerance for space calculations */\n  private readonly spaceTolerance = 3;\n\n  /** The element bound to the popover. */\n  private boundElement?: HTMLElement;\n\n  /** Cached available space around the bound element to avoid unnecessary recalculations */\n  private cachedAvailableSpace?: Offsets;\n\n  /** Last bounding rect of the bound element to detect changes and eventually invalidate the caches. */\n  private lastBoundRect?: DOMRect;\n\n  /** Fired when the position changes. */\n  @Event()\n  positionChange: EventEmitter<{position: PopoverPosition}>;\n\n  /** Event emitted when the open state of the popover changes (e.g. when the user clicks outside the popover to close it, if `closable` is true). */\n  @Event()\n  openChange: EventEmitter<{open: boolean}>;\n\n  @Listen(\"keyup\", {target: \"window\", capture: true})\n  closePopoverWithKeyboard(e: KeyboardEvent): void {\n    if (this.closable && e.key === KeyboardCode.ESC) {\n      e.stopPropagation();\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   */\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleOutsideClick(e: MouseEvent): void {\n    const target = e.target as Element;\n    if (!this.closable || !this.open || containsElement(this.host, target)) {\n      return;\n    }\n\n    if (containsElement(this.boundElement, target)) {\n      // stop propagation if the click was on the trigger element to prevent close and reopen glitches\n      e.stopPropagation();\n    }\n    this.open = false;\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      this.position = newValue;\n    }\n    this.currentPosition = newValue;\n    if (this.open) {\n      this.setPosition();\n    }\n  }\n\n  /** Setup popover behaviors when `open` changes. */\n  @Watch(\"open\")\n  onOpen(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n    this.openChange.emit({open: this.open});\n    if (!this.open) {\n      Object.assign(this.host.style, {\n        // Reset all positioning properties\n        top: \"auto\",\n        right: \"auto\",\n        bottom: \"auto\",\n        left: \"auto\",\n        maxWidth: \"\",\n        maxHeight: \"\",\n        // Set initial visibility to hidden while calculating position...\n        visibility: \"hidden\",\n      });\n      this.currentPosition = undefined;\n\n      return;\n    }\n\n    const updatePositionLoop = (): void => {\n      if (!this.open) {\n        return;\n      }\n\n      this.setPosition();\n      this.animationFrameRequestId = requestAnimationFrame(updatePositionLoop);\n    };\n\n    // call `setPosition` after a tick to ensure the DOM is ready and sizes are available\n    setTimeout(() => {\n      updatePositionLoop();\n    }, 0);\n  }\n\n  @Watch(\"bindTo\")\n  onBindingChange(): void {\n    this.findBoundElement();\n  }\n\n  /** Returns the offset modifier to use in calculations to align the popover with the bound element. */\n  private get offsetModifier(): OffsetModifier {\n    return this.center ? 0.5 : 0;\n  }\n\n  private findBoundElement(): void {\n    if (typeof this.bindTo === \"string\") {\n      this.boundElement = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n    } else if (this.bindTo) {\n      this.boundElement = this.bindTo;\n    } else {\n      this.boundElement = getParentElement(this.host) as HTMLElement;\n      if (this.boundElement.tagName.toLowerCase() === \"z-tooltip\") {\n        // If the popover is used inside a tooltip without a specified `bindTo`, bind it to the parent of the tooltip.\n        this.boundElement = getParentElement(this.boundElement) as HTMLElement;\n      }\n    }\n  }\n\n  /**\n   * Check if element has enough space to the right and left to be centered.\n   * Used for `TOP` and `BOTTOM` position.\n   * When `center` is not enabled, only one side needs to be checked and `RIGHT` is the default.\n   */\n  private hasCenteredHorizontalSpace(\n    availableLeft: number,\n    availableRight: number,\n    hostWidth: number,\n    boundElementWidth: number\n  ): boolean {\n    const requiredSideSpace = (hostWidth - boundElementWidth) * (1 - this.offsetModifier);\n\n    if (!this.center) {\n      return availableRight >= requiredSideSpace - this.spaceTolerance;\n    }\n\n    return (\n      availableRight >= requiredSideSpace - this.spaceTolerance &&\n      availableLeft >= requiredSideSpace - this.spaceTolerance\n    );\n  }\n\n  /**\n   * Check if element has enough space to the top and bottom to be centered.\n   * Used for `RIGHT` and `LEFT` position.\n   * When `center` is not enabled, only one side needs to be checked and `BOTTOM` is the default.\n   */\n  private hasCenteredVerticalSpace(\n    availableTop: number,\n    availableBottom: number,\n    hostHeight: number,\n    boundElementHeight: number\n  ): boolean {\n    const requiredSideSpace = (hostHeight - boundElementHeight) * (1 - this.offsetModifier);\n\n    if (!this.center) {\n      return availableBottom >= requiredSideSpace - this.spaceTolerance;\n    }\n\n    return (\n      availableTop >= requiredSideSpace - this.spaceTolerance &&\n      availableBottom >= requiredSideSpace - this.spaceTolerance\n    );\n  }\n\n  /**\n   * Check if there is enough space in the given direction to fit the popover.\n   * Used for composed positions like TOP_RIGHT, LEFT_BOTTOM, etc.\n   */\n  private hasEnoughSideSpace(\n    availableSpace: number,\n    hostSize: number,\n    boundElementSize: number,\n    offsetModifier: OffsetModifier\n  ): boolean {\n    return availableSpace >= hostSize - boundElementSize * (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   */\n  private getOptimalPopoverPosition(desiredPosition: PopoverPosition, availableSpace: Offsets): PopoverPosition {\n    const hostWidth = this.host.offsetWidth;\n    const hostHeight = this.host.offsetHeight;\n    const boundElementWidth = this.boundElement.getBoundingClientRect().width;\n    const boundElementHeight = this.boundElement.getBoundingClientRect().height;\n    const offsetModifier = this.offsetModifier;\n\n    /** Check if there is enough space to fit the popover in the desired position */\n    const fits = (pos: PopoverPosition): boolean => {\n      switch (pos) {\n        case PopoverPosition.TOP:\n          return (\n            availableSpace.top >= hostHeight - this.spaceTolerance &&\n            this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n          );\n        case PopoverPosition.TOP_RIGHT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.TOP_LEFT:\n          return (\n            availableSpace.top >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.RIGHT:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n          );\n        case PopoverPosition.RIGHT_BOTTOM:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier)\n          );\n        case PopoverPosition.RIGHT_TOP:\n          return (\n            availableSpace.right >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n          );\n        case PopoverPosition.BOTTOM:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth)\n          );\n        case PopoverPosition.BOTTOM_LEFT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.BOTTOM_RIGHT:\n          return (\n            availableSpace.bottom >= hostHeight &&\n            this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier)\n          );\n        case PopoverPosition.LEFT:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight)\n          );\n        case PopoverPosition.LEFT_TOP:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier)\n          );\n        case PopoverPosition.LEFT_BOTTOM:\n          return (\n            availableSpace.left >= hostWidth &&\n            this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, 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    return this.findBestFallbackPosition(availableSpace);\n  }\n\n  /** Find the best fallback position based on available space when no position fits perfectly. */\n  private findBestFallbackPosition(availableSpace: Offsets): PopoverPosition {\n    // Determine which horizontal and vertical direction has the most available 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 axis has more space overall\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    // Decide if a secondary direction is needed\n    // Only add a secondary direction if the difference between min and max in that axis is at least double\n    let needsSecondaryDirection = false;\n\n    if (mainDirection === bestVerticalDirection) {\n      // If 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      // If 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    // Return a combined position (e.g., \"bottom_right\")\n    return `${mainDirection}_${secondaryDirection}` as PopoverPosition;\n  }\n\n  /**\n   * Find the nearest scrollable ancestor of an element to take as a reference for positioning.\n   * The ancestor is considered scrollable if it doesn't have `overflow` property set to `hidden` and its scroll size is bigger than its client size.\n   */\n  private findScrollableAncestor(element: HTMLElement): HTMLElement {\n    let parent = getParentElement(element);\n\n    while (parent) {\n      if (parent === element.ownerDocument.documentElement) {\n        return parent as HTMLElement;\n      }\n\n      const style = getComputedStyle(parent);\n      const {overflow, overflowX, overflowY} = style;\n      const hasHiddenOverflow = overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\";\n      const isScrollable =\n        (parent.scrollHeight > parent.clientHeight && overflow !== \"visible\" && overflowY !== \"visible\") ||\n        (parent.scrollWidth > parent.clientWidth && overflow !== \"visible\" && overflowX !== \"visible\");\n\n      if (!hasHiddenOverflow && isScrollable) {\n        return parent as HTMLElement;\n      }\n\n      parent = getParentElement(parent);\n    }\n\n    return element.ownerDocument.documentElement;\n  }\n\n  /**\n   * Calculate available space around the element bound with the popover, based on its nearest scrollable ancestor.\n   *\n   * Calculations for `right` and `bottom` can be a little bit confusing because `boundingRect.right` and `bottom` may not be what you expect...\n   * For more information see the explanation in the docs.\n   * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#return_value\n   */\n  private calculateAvailableSpace(): Offsets {\n    const boundElementRect = this.boundElement.getBoundingClientRect();\n\n    if (\n      this.lastBoundRect &&\n      this.lastBoundRect.x === boundElementRect.x &&\n      this.lastBoundRect.y === boundElementRect.y &&\n      this.lastBoundRect.width === boundElementRect.width &&\n      this.lastBoundRect.height === boundElementRect.height &&\n      this.cachedAvailableSpace\n    ) {\n      // If the bound element's rect hasn't changed, return the cached rect\n      return this.cachedAvailableSpace;\n    }\n\n    this.lastBoundRect = boundElementRect;\n    const scrollableAncestor = this.findScrollableAncestor(this.boundElement);\n    const scrollableAncestorRect = scrollableAncestor.getBoundingClientRect();\n    const isScrollableAncestorNested = scrollableAncestor !== this.boundElement.ownerDocument.documentElement;\n    const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n    const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n    const safeSpace = 8; // extra space to avoid popover being too close to the edges\n\n    // These deltas represent the offset between the scrollable ancestor and the viewport.\n    // They are used to adjust the available space calculations when the scrollable ancestor is not the document or body,\n    // to try to fit the popover inside the scrollable ancestor.\n    const deltaTop = isScrollableAncestorNested ? scrollableAncestorRect.top : 0;\n    const deltaRight = isScrollableAncestorNested ? documentWidth - scrollableAncestorRect.right : 0;\n    const deltaBottom = isScrollableAncestorNested ? documentHeight - scrollableAncestorRect.bottom : 0;\n    const deltaLeft = isScrollableAncestorNested ? scrollableAncestorRect.left : 0;\n\n    this.cachedAvailableSpace = {\n      top: boundElementRect.top - deltaTop - safeSpace,\n      right: documentWidth - boundElementRect.right - deltaRight - safeSpace,\n      bottom: documentHeight - boundElementRect.bottom - deltaBottom - safeSpace,\n      left: boundElementRect.left - deltaLeft - safeSpace,\n    };\n\n    return this.cachedAvailableSpace;\n  }\n\n  /** Calculate the space around the bound element relative to the viewport. */\n  private getBoundElementOffsets(): Offsets {\n    const elementRect = this.boundElement.getBoundingClientRect();\n    const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;\n    const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;\n\n    return {\n      top: elementRect.top,\n      right: documentWidth - elementRect.right,\n      bottom: documentHeight - elementRect.bottom,\n      left: elementRect.left,\n    };\n  }\n\n  /** Compute positioning offsets in the appropriate coordinate space, accounting for transformed containing blocks and scroll. */\n  private computePositionOffsets(): Offsets {\n    const boundElementOffsets = this.getBoundElementOffsets();\n    const containingBlockAncestor = findContainingBlockAncestor(this.host);\n    const isDocumentElement = containingBlockAncestor === this.host.ownerDocument.documentElement;\n\n    if (isDocumentElement) {\n      return boundElementOffsets;\n    }\n\n    const containingBlockRect = containingBlockAncestor.getBoundingClientRect();\n    const containingBlockStyle = getComputedStyle(containingBlockAncestor);\n    /** Padding box of the containing block, accounting for borders. */\n    const paddingBox = {\n      top: containingBlockRect.top + parseFloat(containingBlockStyle.borderTopWidth),\n      right: containingBlockRect.right - parseFloat(containingBlockStyle.borderRightWidth),\n      bottom: containingBlockRect.bottom - parseFloat(containingBlockStyle.borderBottomWidth),\n      left: containingBlockRect.left + parseFloat(containingBlockStyle.borderLeftWidth),\n    };\n\n    const boundElementRect = this.boundElement.getBoundingClientRect();\n    /** Bound element offsets relative to the containing block padding box. */\n    const relativeOffsets = {\n      top: boundElementRect.top - paddingBox.top,\n      right: paddingBox.right - boundElementRect.right,\n      bottom: paddingBox.bottom - boundElementRect.bottom,\n      left: boundElementRect.left - paddingBox.left,\n    };\n\n    /** Account for scroll to keep the popover aligned while the containing block scrolls. */\n    return {\n      top: relativeOffsets.top + containingBlockAncestor.scrollTop,\n      right: relativeOffsets.right - containingBlockAncestor.scrollLeft,\n      bottom: relativeOffsets.bottom - containingBlockAncestor.scrollTop,\n      left: relativeOffsets.left + containingBlockAncestor.scrollLeft,\n    };\n  }\n\n  /** Apply positioning styles based on `position` parameter. */\n  private applyPositionStyles(position: PopoverPosition, availableSpace: Offsets): void {\n    const boundElementWidth = this.boundElement.offsetWidth;\n    const boundElementHeight = this.boundElement.offsetHeight;\n    const offsetModifier = this.offsetModifier;\n    /**\n     * Distance between the arrow center and the popover edge.\n     * Needed to align the center of the arrow with the center of the bound element when `showArrow` and `center` are enabled.\n     */\n    const arrowModifier = this.showArrow && this.center ? 8 : 0;\n    const hostStyle = this.host.style;\n    /** Gap between the popover and the bound element, set as margin in CSS. */\n    const distanceFromBound = parseFloat(getComputedStyle(this.host).marginTop.replace(\"px\", \"\")) || 0;\n    const positionOffsets = this.computePositionOffsets();\n\n    /**\n     * Precomputed bases to reduce repeated arithmetic in the switch below.\n     * They represent the bound element edges plus optional centering offsets.\n     */\n    const leftBase = positionOffsets.left + boundElementWidth * offsetModifier;\n    const rightBase = positionOffsets.right + boundElementWidth * offsetModifier;\n    const topBase = positionOffsets.top + boundElementHeight;\n    const bottomBase = positionOffsets.bottom + boundElementHeight;\n    const sideTopBase = positionOffsets.top + boundElementHeight * offsetModifier;\n    const sideBottomBase = positionOffsets.bottom + boundElementHeight * offsetModifier;\n\n    let maxWidth: number;\n    let maxHeight: number;\n\n    switch (position) {\n      case PopoverPosition.TOP:\n      case PopoverPosition.TOP_RIGHT:\n        hostStyle.bottom = `${bottomBase}px`;\n        hostStyle.left = `${leftBase - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;\n        maxHeight = availableSpace.top - distanceFromBound;\n        if (position === PopoverPosition.TOP_RIGHT) {\n          maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.TOP_LEFT:\n        hostStyle.right = `${rightBase - arrowModifier}px`;\n        hostStyle.bottom = `${bottomBase}px`;\n        maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n        maxHeight = availableSpace.top - distanceFromBound;\n        break;\n\n      case PopoverPosition.BOTTOM:\n      case PopoverPosition.BOTTOM_RIGHT:\n        hostStyle.top = `${topBase}px`;\n        hostStyle.left = `${leftBase - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;\n        maxHeight = availableSpace.bottom - distanceFromBound;\n        if (position === PopoverPosition.BOTTOM_RIGHT) {\n          maxWidth = availableSpace.right + boundElementWidth * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.BOTTOM_LEFT:\n        hostStyle.top = `${topBase}px`;\n        hostStyle.right = `${rightBase - arrowModifier}px`;\n        maxWidth = availableSpace.left + boundElementWidth * offsetModifier;\n        maxHeight = availableSpace.bottom - distanceFromBound;\n        break;\n\n      case PopoverPosition.RIGHT:\n      case PopoverPosition.RIGHT_BOTTOM:\n        hostStyle.top = `${sideTopBase - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;\n        hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;\n        maxWidth = availableSpace.right - distanceFromBound;\n        if (position === PopoverPosition.RIGHT) {\n          maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;\n        } else {\n          maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.RIGHT_TOP:\n        hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n        hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;\n        maxWidth = availableSpace.right - distanceFromBound;\n        maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n        break;\n\n      case PopoverPosition.LEFT:\n      case PopoverPosition.LEFT_BOTTOM:\n        hostStyle.top = `${sideTopBase - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;\n        hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;\n        maxWidth = availableSpace.left - distanceFromBound;\n        if (position === PopoverPosition.LEFT_BOTTOM) {\n          maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;\n        }\n        break;\n\n      case PopoverPosition.LEFT_TOP:\n        hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;\n        hostStyle.bottom = `${sideBottomBase - arrowModifier}px`;\n        maxWidth = availableSpace.left - distanceFromBound;\n        maxHeight = availableSpace.top + boundElementHeight * offsetModifier;\n        break;\n    }\n\n    if (getDevice() !== Device.MOBILE) {\n      // Only force max sizes on non-mobile viewports\n      Object.assign(hostStyle, {\n        maxWidth: maxWidth ? `${maxWidth}px` : \"\",\n        maxHeight: maxHeight ? `${maxHeight}px` : \"\",\n      });\n    }\n  }\n\n  /** Set the position of the popover. */\n  private setPosition(): void {\n    if (!this.boundElement) {\n      return;\n    }\n\n    if (!isElementVisibleInContainer(this.boundElement, this.findScrollableAncestor(this.boundElement))) {\n      // If the bound element is not visible, hide the popover too\n      this.open = false;\n\n      return;\n    }\n\n    Object.assign(this.host.style, {\n      // Reset all positioning properties\n      top: \"auto\",\n      right: \"auto\",\n      bottom: \"auto\",\n      left: \"auto\",\n      maxWidth: \"\",\n      maxHeight: \"\",\n      // Set initial visibility to hidden while calculating position...\n      visibility: \"hidden\",\n    });\n\n    const availableSpace = this.calculateAvailableSpace();\n    const position = this.getOptimalPopoverPosition(this.position, availableSpace);\n\n    this.applyPositionStyles(position, availableSpace);\n    this.currentPosition = position;\n    this.positionChange.emit({position: this.currentPosition});\n\n    // ...then restore the visibility\n    this.host.style.visibility = \"visible\";\n  }\n\n  componentWillLoad(): void {\n    this.validatePosition(this.position);\n  }\n\n  componentDidLoad(): void {\n    this.findBoundElement();\n    if (this.open) {\n      this.onOpen();\n    }\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":"iPAAA,MAAMA,EAAY,IAAM,+iG,MCuCXC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,wJAYEC,KAAAC,SAA6BC,EAAgBC,IAQ7CH,KAAAI,KAAO,MAWPJ,KAAAK,UAAY,MAIZL,KAAAM,OAAS,MAQTN,KAAAO,SAAW,KA8BMP,KAAAQ,eAAiB,CA+mBnC,CA3lBC,wBAAAC,CAAyBC,GACvB,GAAIV,KAAKO,UAAYG,EAAEC,MAAQC,EAAaC,IAAK,CAC/CH,EAAEI,kBACFd,KAAKI,KAAO,K,EAUhB,kBAAAW,CAAmBL,GACjB,MAAMM,EAASN,EAAEM,OACjB,IAAKhB,KAAKO,WAAaP,KAAKI,MAAQa,EAAgBjB,KAAKkB,KAAMF,GAAS,CACtE,M,CAGF,GAAIC,EAAgBjB,KAAKmB,aAAcH,GAAS,CAE9CN,EAAEI,iB,CAEJd,KAAKI,KAAO,K,CAId,gBAAAgB,CAAiBC,GACf,IAAKC,OAAOC,OAAOrB,GAAiBsB,SAASH,IAAgCA,IAAanB,EAAgBuB,KAAM,CAC9GJ,EAAWnB,EAAgBC,IAC3BH,KAAKC,SAAWoB,C,CAElBrB,KAAK0B,gBAAkBL,EACvB,GAAIrB,KAAKI,KAAM,CACbJ,KAAK2B,a,EAMT,MAAAC,GACEC,qBAAqB7B,KAAK8B,yBAC1B9B,KAAK+B,WAAWC,KAAK,CAAC5B,KAAMJ,KAAKI,OACjC,IAAKJ,KAAKI,KAAM,CACdkB,OAAOW,OAAOjC,KAAKkB,KAAKgB,MAAO,CAE7BC,IAAK,OACLC,MAAO,OACPC,OAAQ,OACRC,KAAM,OACNC,SAAU,GACVC,UAAW,GAEXC,WAAY,WAEdzC,KAAK0B,gBAAkBgB,UAEvB,M,CAGF,MAAMC,EAAqB,KACzB,IAAK3C,KAAKI,KAAM,CACd,M,CAGFJ,KAAK2B,cACL3B,KAAK8B,wBAA0Bc,sBAAsBD,EAAmB,EAI1EE,YAAW,KACTF,GAAoB,GACnB,E,CAIL,eAAAG,GACE9C,KAAK+C,kB,CAIP,kBAAYC,GACV,OAAOhD,KAAKM,OAAS,GAAM,C,CAGrB,gBAAAyC,GACN,UAAW/C,KAAKiD,SAAW,SAAU,CACnCjD,KAAKmB,aAAenB,KAAKkB,KAAKgC,cAAcC,cAAcnD,KAAKiD,O,MAC1D,GAAIjD,KAAKiD,OAAQ,CACtBjD,KAAKmB,aAAenB,KAAKiD,M,KACpB,CACLjD,KAAKmB,aAAeiC,EAAiBpD,KAAKkB,MAC1C,GAAIlB,KAAKmB,aAAakC,QAAQC,gBAAkB,YAAa,CAE3DtD,KAAKmB,aAAeiC,EAAiBpD,KAAKmB,a,GAUxC,0BAAAoC,CACNC,EACAC,EACAC,EACAC,GAEA,MAAMC,GAAqBF,EAAYC,IAAsB,EAAI3D,KAAKgD,gBAEtE,IAAKhD,KAAKM,OAAQ,CAChB,OAAOmD,GAAkBG,EAAoB5D,KAAKQ,c,CAGpD,OACEiD,GAAkBG,EAAoB5D,KAAKQ,gBAC3CgD,GAAiBI,EAAoB5D,KAAKQ,c,CAStC,wBAAAqD,CACNC,EACAC,EACAC,EACAC,GAEA,MAAML,GAAqBI,EAAaC,IAAuB,EAAIjE,KAAKgD,gBAExE,IAAKhD,KAAKM,OAAQ,CAChB,OAAOyD,GAAmBH,EAAoB5D,KAAKQ,c,CAGrD,OACEsD,GAAgBF,EAAoB5D,KAAKQ,gBACzCuD,GAAmBH,EAAoB5D,KAAKQ,c,CAQxC,kBAAA0D,CACNC,EACAC,EACAC,EACArB,GAEA,OAAOmB,GAAkBC,EAAWC,GAAoB,EAAIrB,GAAkBhD,KAAKQ,c,CAU7E,yBAAA8D,CAA0BC,EAAkCJ,GAClE,MAAMT,EAAY1D,KAAKkB,KAAKsD,YAC5B,MAAMR,EAAahE,KAAKkB,KAAKuD,aAC7B,MAAMd,EAAoB3D,KAAKmB,aAAauD,wBAAwBC,MACpE,MAAMV,EAAqBjE,KAAKmB,aAAauD,wBAAwBE,OACrE,MAAM5B,EAAiBhD,KAAKgD,eAG5B,MAAM6B,EAAQC,IACZ,OAAQA,GACN,KAAK5E,EAAgBC,IACnB,OACEgE,EAAehC,KAAO6B,EAAahE,KAAKQ,gBACxCR,KAAKuD,2BAA2BY,EAAe7B,KAAM6B,EAAe/B,MAAOsB,EAAWC,GAE1F,KAAKzD,EAAgB6E,UACnB,OACEZ,EAAehC,KAAO6B,GACtBhE,KAAKkE,mBAAmBC,EAAe/B,MAAOsB,EAAWC,EAAmBX,GAEhF,KAAK9C,EAAgB8E,SACnB,OACEb,EAAehC,KAAO6B,GACtBhE,KAAKkE,mBAAmBC,EAAe7B,KAAMoB,EAAWC,EAAmBX,GAE/E,KAAK9C,EAAgB+E,MACnB,OACEd,EAAe/B,OAASsB,GACxB1D,KAAK6D,yBAAyBM,EAAehC,IAAKgC,EAAe9B,OAAQ2B,EAAYC,GAEzF,KAAK/D,EAAgBgF,aACnB,OACEf,EAAe/B,OAASsB,GACxB1D,KAAKkE,mBAAmBC,EAAe9B,OAAQ2B,EAAYC,EAAoBjB,GAEnF,KAAK9C,EAAgBiF,UACnB,OACEhB,EAAe/B,OAASsB,GACxB1D,KAAKkE,mBAAmBC,EAAehC,IAAK6B,EAAYC,EAAoBjB,GAEhF,KAAK9C,EAAgBkF,OACnB,OACEjB,EAAe9B,QAAU2B,GACzBhE,KAAKuD,2BAA2BY,EAAe7B,KAAM6B,EAAe/B,MAAOsB,EAAWC,GAE1F,KAAKzD,EAAgBmF,YACnB,OACElB,EAAe9B,QAAU2B,GACzBhE,KAAKkE,mBAAmBC,EAAe7B,KAAMoB,EAAWC,EAAmBX,GAE/E,KAAK9C,EAAgBoF,aACnB,OACEnB,EAAe9B,QAAU2B,GACzBhE,KAAKkE,mBAAmBC,EAAe/B,MAAOsB,EAAWC,EAAmBX,GAEhF,KAAK9C,EAAgBqF,KACnB,OACEpB,EAAe7B,MAAQoB,GACvB1D,KAAK6D,yBAAyBM,EAAehC,IAAKgC,EAAe9B,OAAQ2B,EAAYC,GAEzF,KAAK/D,EAAgBsF,SACnB,OACErB,EAAe7B,MAAQoB,GACvB1D,KAAKkE,mBAAmBC,EAAehC,IAAK6B,EAAYC,EAAoBjB,GAEhF,KAAK9C,EAAgBuF,YACnB,OACEtB,EAAe7B,MAAQoB,GACvB1D,KAAKkE,mBAAmBC,EAAe9B,OAAQ2B,EAAYC,EAAoBjB,GAGnF,QACE,OAAO,M,EAKb,GAAI6B,EAAKN,GAAkB,CACzB,OAAOA,C,CAIT,MAAMmB,EAAY/F,EAASgG,cAC3B,MAAMC,EAAaF,EAAUG,QAAQtB,GAErC,GAAIqB,KAAe,EAAI,CACrB,OAAOrB,C,CAIT,IAAK,IAAIuB,EAAI,EAAGA,EAAIJ,EAAUK,OAAQD,IAAK,CACzC,MAAME,GAAYJ,EAAaE,GAAKJ,EAAUK,OAC9C,MAAMjB,EAAMY,EAAUM,GACtB,GAAInB,EAAKC,GAAM,CACb,OAAOA,C,EAIX,OAAO9E,KAAKiG,yBAAyB9B,E,CAI/B,wBAAA8B,CAAyB9B,GAE/B,MAAM+B,EACJ/B,EAAe/B,OAAS+B,EAAe7B,KAAOpC,EAAgB+E,MAAQ/E,EAAgBqF,KAExF,MAAMY,EACJhC,EAAe9B,QAAU8B,EAAehC,IAAMjC,EAAgBkF,OAASlF,EAAgBC,IAGzF,MAAMiG,EAAqBC,KAAKC,IAAInC,EAAe/B,MAAO+B,EAAe7B,MACzE,MAAMiE,EAAmBF,KAAKC,IAAInC,EAAe9B,OAAQ8B,EAAehC,KAExE,MAAMqE,EAAgBD,GAAoBH,EAAqBD,EAAwBD,EAIvF,IAAIO,EAA0B,MAE9B,GAAID,IAAkBL,EAAuB,CAE3C,MAAMO,EAAqBL,KAAKM,IAAIxC,EAAe/B,MAAO+B,EAAe7B,MACzEmE,EAA0BL,GAAsBM,EAAqB,C,KAChE,CAEL,MAAME,EAAmBP,KAAKM,IAAIxC,EAAe9B,OAAQ8B,EAAehC,KACxEsE,EAA0BF,GAAoBK,EAAmB,C,CAGnE,IAAKH,EAAyB,CAC5B,OAAOD,C,CAGT,MAAMK,EACJL,IAAkBL,EAAwBD,EAA0BC,EAGtE,MAAO,GAAGK,KAAiBK,G,CAOrB,sBAAAC,CAAuBC,GAC7B,IAAIC,EAAS5D,EAAiB2D,GAE9B,MAAOC,EAAQ,CACb,GAAIA,IAAWD,EAAQ7D,cAAc+D,gBAAiB,CACpD,OAAOD,C,CAGT,MAAM9E,EAAQgF,iBAAiBF,GAC/B,MAAMG,SAACA,EAAQC,UAAEA,EAASC,UAAEA,GAAanF,EACzC,MAAMoF,EAAoBH,IAAa,UAAYE,IAAc,UAAYD,IAAc,SAC3F,MAAMG,EACHP,EAAOQ,aAAeR,EAAOS,cAAgBN,IAAa,WAAaE,IAAc,WACrFL,EAAOU,YAAcV,EAAOW,aAAeR,IAAa,WAAaC,IAAc,UAEtF,IAAKE,GAAqBC,EAAc,CACtC,OAAOP,C,CAGTA,EAAS5D,EAAiB4D,E,CAG5B,OAAOD,EAAQ7D,cAAc+D,e,CAUvB,uBAAAW,GACN,MAAMC,EAAmB7H,KAAKmB,aAAauD,wBAE3C,GACE1E,KAAK8H,eACL9H,KAAK8H,cAAcC,IAAMF,EAAiBE,GAC1C/H,KAAK8H,cAAcE,IAAMH,EAAiBG,GAC1ChI,KAAK8H,cAAcnD,QAAUkD,EAAiBlD,OAC9C3E,KAAK8H,cAAclD,SAAWiD,EAAiBjD,QAC/C5E,KAAKiI,qBACL,CAEA,OAAOjI,KAAKiI,oB,CAGdjI,KAAK8H,cAAgBD,EACrB,MAAMK,EAAqBlI,KAAK8G,uBAAuB9G,KAAKmB,cAC5D,MAAMgH,EAAyBD,EAAmBxD,wBAClD,MAAM0D,EAA6BF,IAAuBlI,KAAKmB,aAAa+B,cAAc+D,gBAC1F,MAAMoB,EAAgBrI,KAAKmB,aAAa+B,cAAc+D,gBAAgBU,YACtE,MAAMW,EAAiBtI,KAAKmB,aAAa+B,cAAc+D,gBAAgBQ,aACvE,MAAMc,EAAY,EAKlB,MAAMC,EAAWJ,EAA6BD,EAAuBhG,IAAM,EAC3E,MAAMsG,EAAaL,EAA6BC,EAAgBF,EAAuB/F,MAAQ,EAC/F,MAAMsG,EAAcN,EAA6BE,EAAiBH,EAAuB9F,OAAS,EAClG,MAAMsG,EAAYP,EAA6BD,EAAuB7F,KAAO,EAE7EtC,KAAKiI,qBAAuB,CAC1B9F,IAAK0F,EAAiB1F,IAAMqG,EAAWD,EACvCnG,MAAOiG,EAAgBR,EAAiBzF,MAAQqG,EAAaF,EAC7DlG,OAAQiG,EAAiBT,EAAiBxF,OAASqG,EAAcH,EACjEjG,KAAMuF,EAAiBvF,KAAOqG,EAAYJ,GAG5C,OAAOvI,KAAKiI,oB,CAIN,sBAAAW,GACN,MAAMC,EAAc7I,KAAKmB,aAAauD,wBACtC,MAAM2D,EAAgBrI,KAAKmB,aAAa+B,cAAc+D,gBAAgBU,YACtE,MAAMW,EAAiBtI,KAAKmB,aAAa+B,cAAc+D,gBAAgBQ,aAEvE,MAAO,CACLtF,IAAK0G,EAAY1G,IACjBC,MAAOiG,EAAgBQ,EAAYzG,MACnCC,OAAQiG,EAAiBO,EAAYxG,OACrCC,KAAMuG,EAAYvG,K,CAKd,sBAAAwG,GACN,MAAMC,EAAsB/I,KAAK4I,yBACjC,MAAMI,EAA0BC,EAA4BjJ,KAAKkB,MACjE,MAAMgI,EAAoBF,IAA4BhJ,KAAKkB,KAAKgC,cAAc+D,gBAE9E,GAAIiC,EAAmB,CACrB,OAAOH,C,CAGT,MAAMI,EAAsBH,EAAwBtE,wBACpD,MAAM0E,EAAuBlC,iBAAiB8B,GAE9C,MAAMK,EAAa,CACjBlH,IAAKgH,EAAoBhH,IAAMmH,WAAWF,EAAqBG,gBAC/DnH,MAAO+G,EAAoB/G,MAAQkH,WAAWF,EAAqBI,kBACnEnH,OAAQ8G,EAAoB9G,OAASiH,WAAWF,EAAqBK,mBACrEnH,KAAM6G,EAAoB7G,KAAOgH,WAAWF,EAAqBM,kBAGnE,MAAM7B,EAAmB7H,KAAKmB,aAAauD,wBAE3C,MAAMiF,EAAkB,CACtBxH,IAAK0F,EAAiB1F,IAAMkH,EAAWlH,IACvCC,MAAOiH,EAAWjH,MAAQyF,EAAiBzF,MAC3CC,OAAQgH,EAAWhH,OAASwF,EAAiBxF,OAC7CC,KAAMuF,EAAiBvF,KAAO+G,EAAW/G,MAI3C,MAAO,CACLH,IAAKwH,EAAgBxH,IAAM6G,EAAwBY,UACnDxH,MAAOuH,EAAgBvH,MAAQ4G,EAAwBa,WACvDxH,OAAQsH,EAAgBtH,OAAS2G,EAAwBY,UACzDtH,KAAMqH,EAAgBrH,KAAO0G,EAAwBa,W,CAKjD,mBAAAC,CAAoB7J,EAA2BkE,GACrD,MAAMR,EAAoB3D,KAAKmB,aAAaqD,YAC5C,MAAMP,EAAqBjE,KAAKmB,aAAasD,aAC7C,MAAMzB,EAAiBhD,KAAKgD,eAK5B,MAAM+G,EAAgB/J,KAAKK,WAAaL,KAAKM,OAAS,EAAI,EAC1D,MAAM0J,EAAYhK,KAAKkB,KAAKgB,MAE5B,MAAM+H,EAAoBX,WAAWpC,iBAAiBlH,KAAKkB,MAAMgJ,UAAUC,QAAQ,KAAM,MAAQ,EACjG,MAAMC,EAAkBpK,KAAK8I,yBAM7B,MAAMuB,EAAWD,EAAgB9H,KAAOqB,EAAoBX,EAC5D,MAAMsH,EAAYF,EAAgBhI,MAAQuB,EAAoBX,EAC9D,MAAMuH,EAAUH,EAAgBjI,IAAM8B,EACtC,MAAMuG,EAAaJ,EAAgB/H,OAAS4B,EAC5C,MAAMwG,EAAcL,EAAgBjI,IAAM8B,EAAqBjB,EAC/D,MAAM0H,EAAiBN,EAAgB/H,OAAS4B,EAAqBjB,EAErE,IAAIT,EACJ,IAAIC,EAEJ,OAAQvC,GACN,KAAKC,EAAgBC,IACrB,KAAKD,EAAgB6E,UACnBiF,EAAU3H,OAAS,GAAGmI,MACtBR,EAAU1H,KAAO,GAAG+H,GAAYpK,IAAaC,EAAgB6E,UAAYgF,EAAgB,OACzFvH,EAAY2B,EAAehC,IAAM8H,EACjC,GAAIhK,IAAaC,EAAgB6E,UAAW,CAC1CxC,EAAW4B,EAAe/B,MAAQuB,EAAoBX,C,CAExD,MAEF,KAAK9C,EAAgB8E,SACnBgF,EAAU5H,MAAQ,GAAGkI,EAAYP,MACjCC,EAAU3H,OAAS,GAAGmI,MACtBjI,EAAW4B,EAAe7B,KAAOqB,EAAoBX,EACrDR,EAAY2B,EAAehC,IAAM8H,EACjC,MAEF,KAAK/J,EAAgBkF,OACrB,KAAKlF,EAAgBoF,aACnB0E,EAAU7H,IAAM,GAAGoI,MACnBP,EAAU1H,KAAO,GAAG+H,GAAYpK,IAAaC,EAAgBoF,aAAeyE,EAAgB,OAC5FvH,EAAY2B,EAAe9B,OAAS4H,EACpC,GAAIhK,IAAaC,EAAgBoF,aAAc,CAC7C/C,EAAW4B,EAAe/B,MAAQuB,EAAoBX,C,CAExD,MAEF,KAAK9C,EAAgBmF,YACnB2E,EAAU7H,IAAM,GAAGoI,MACnBP,EAAU5H,MAAQ,GAAGkI,EAAYP,MACjCxH,EAAW4B,EAAe7B,KAAOqB,EAAoBX,EACrDR,EAAY2B,EAAe9B,OAAS4H,EACpC,MAEF,KAAK/J,EAAgB+E,MACrB,KAAK/E,EAAgBgF,aACnB8E,EAAU7H,IAAM,GAAGsI,GAAexK,IAAaC,EAAgBgF,aAAe6E,EAAgB,OAC9FC,EAAU1H,KAAO,GAAG8H,EAAgB9H,KAAOqB,MAC3CpB,EAAW4B,EAAe/B,MAAQ6H,EAClC,GAAIhK,IAAaC,EAAgB+E,MAAO,CACtCzC,EAAY2B,EAAehC,IAAMgC,EAAe9B,OAAS4B,C,KACpD,CACLzB,EAAY2B,EAAe9B,OAAS4B,EAAqBjB,C,CAE3D,MAEF,KAAK9C,EAAgBiF,UACnB6E,EAAU3H,OAAS,GAAGqI,EAAiBX,MACvCC,EAAU1H,KAAO,GAAG8H,EAAgB9H,KAAOqB,MAC3CpB,EAAW4B,EAAe/B,MAAQ6H,EAClCzH,EAAY2B,EAAehC,IAAM8B,EAAqBjB,EACtD,MAEF,KAAK9C,EAAgBqF,KACrB,KAAKrF,EAAgBuF,YACnBuE,EAAU7H,IAAM,GAAGsI,GAAexK,IAAaC,EAAgBuF,YAAcsE,EAAgB,OAC7FC,EAAU5H,MAAQ,GAAGgI,EAAgBhI,MAAQuB,MAC7CpB,EAAW4B,EAAe7B,KAAO2H,EACjC,GAAIhK,IAAaC,EAAgBuF,YAAa,CAC5CjD,EAAY2B,EAAe9B,OAAS4B,EAAqBjB,C,CAE3D,MAEF,KAAK9C,EAAgBsF,SACnBwE,EAAU5H,MAAQ,GAAGgI,EAAgBhI,MAAQuB,MAC7CqG,EAAU3H,OAAS,GAAGqI,EAAiBX,MACvCxH,EAAW4B,EAAe7B,KAAO2H,EACjCzH,EAAY2B,EAAehC,IAAM8B,EAAqBjB,EACtD,MAGJ,GAAI2H,MAAgBC,EAAOC,OAAQ,CAEjCvJ,OAAOW,OAAO+H,EAAW,CACvBzH,SAAUA,EAAW,GAAGA,MAAe,GACvCC,UAAWA,EAAY,GAAGA,MAAgB,I,EAMxC,WAAAb,GACN,IAAK3B,KAAKmB,aAAc,CACtB,M,CAGF,IAAK2J,EAA4B9K,KAAKmB,aAAcnB,KAAK8G,uBAAuB9G,KAAKmB,eAAgB,CAEnGnB,KAAKI,KAAO,MAEZ,M,CAGFkB,OAAOW,OAAOjC,KAAKkB,KAAKgB,MAAO,CAE7BC,IAAK,OACLC,MAAO,OACPC,OAAQ,OACRC,KAAM,OACNC,SAAU,GACVC,UAAW,GAEXC,WAAY,WAGd,MAAM0B,EAAiBnE,KAAK4H,0BAC5B,MAAM3H,EAAWD,KAAKsE,0BAA0BtE,KAAKC,SAAUkE,GAE/DnE,KAAK8J,oBAAoB7J,EAAUkE,GACnCnE,KAAK0B,gBAAkBzB,EACvBD,KAAK+K,eAAe/I,KAAK,CAAC/B,SAAUD,KAAK0B,kBAGzC1B,KAAKkB,KAAKgB,MAAMO,WAAa,S,CAG/B,iBAAAuI,GACEhL,KAAKoB,iBAAiBpB,KAAKC,S,CAG7B,gBAAAgL,GACEjL,KAAK+C,mBACL,GAAI/C,KAAKI,KAAM,CACbJ,KAAK4B,Q,EAIT,oBAAAsJ,GACErJ,qBAAqB7B,KAAK8B,wB,CAG5B,MAAAqJ,GACE,OACEC,EAACC,EAAI,CAAA1K,IAAA,8DAAmBX,KAAK0B,iBAC3B0J,EAAA,QAAAzK,IAAA,6C,odA7nBkBhB,EAAAgG,cAAmC,CACzDzF,EAAgBC,IAChBD,EAAgB6E,UAChB7E,EAAgB8E,SAChB9E,EAAgB+E,MAChB/E,EAAgBgF,aAChBhF,EAAgBiF,UAChBjF,EAAgBkF,OAChBlF,EAAgBmF,YAChBnF,EAAgBoF,aAChBpF,EAAgBqF,KAChBrF,EAAgBsF,SAChBtF,EAAgBuF,a","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZGhostLoading","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key"],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  background: var(--color-surface02);\n  border-radius: var(--border-radius);\n  transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n  display: block;\n  width: 100%;\n  height: 100%;\n  animation: progress 1.6s ease-in-out infinite;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );\n  content: \"\";\n  filter: blur(6px);\n}\n\n@keyframes progress {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n","import {Component, ComponentInterface, h, Host} from \"@stencil/core\";\n@Component({\n  tag: \"z-ghost-loading\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZGhostLoading implements ComponentInterface {\n  render(): HTMLZGhostLoadingElement {\n    return <Host />;\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,wgB,MCMXC,EAAaC,EAAA,MAAAD,UAAAE,E,iFACxB,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,4C","ignoreList":[]}

package/dist/components/index18.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as r,h as t,Host as s,transformTag as a}from"@stencil/core/internal/client";const o=()=>`:host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--color-surface02);border-radius:var(--border-radius);transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(     90deg,     var(--color-surface02) 0%,     var(--color-surface03) 95%,     var(--color-surface02) 100%   );content:"";filter:blur(6px)}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}`;const n=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return t(s,{key:"15c0d5cc4985a23bd1cba510e6c1d323ac0be0c4"})}static get style(){return o()}},[1,"z-ghost-loading"]);function i(){if(typeof customElements==="undefined"){return}const e=["z-ghost-loading"];e.forEach((e=>{switch(e){case"z-ghost-loading":if(!customElements.get(a(e))){customElements.define(a(e),n)}break}}))}export{n as Z,i as d};
+import{proxyCustomElement as i,HTMLElement as c,createEvent as r,h as e,transformTag as o}from"@stencil/core/internal/client";import{x as a,y as n}from"./index2.js";import{d as t}from"./index3.js";const s=()=>`.sc-z-chip-h,.sc-z-chip-h *.sc-z-chip{box-sizing:border-box}.sc-z-chip-h{display:block}.sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:14px;color:var(--color-primary01);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);gap:var(--space-unit);line-height:1}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{position:relative;display:flex;width:28px;height:28px;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;border-radius:50%;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) button.sc-z-chip:hover .interactive-icon.sc-z-chip{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip{border-color:transparent;background-color:var(--color-primary01);color:var(--color-text-inverse);fill:var(--color-inverse-icon)}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-inverse-icon)}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip:not([aria-disabled]) button.sc-z-chip::before{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-inverse-icon);border-radius:50%;content:"";opacity:0;pointer-events:none;transition:opacity 0.2s}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip:not([aria-disabled]) button.sc-z-chip:hover::before{opacity:0.16}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip:not([aria-disabled]) button.sc-z-chip:hover .interactive-icon.sc-z-chip{color:var(--color-inverse-icon);fill:var(--color-inverse-icon)}.sc-z-chip-h>.z-chip-container.soft.sc-z-chip{border-color:transparent;background-color:var(--color-primary02);color:var(--color-default-text)}.sc-z-chip-h>.z-chip-container.soft.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip .interactive-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01);background-color:transparent}.sc-z-chip-h>.z-chip-container.filled[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container.soft[aria-disabled].sc-z-chip{border-color:transparent;background-color:var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{padding:0 calc(var(--space-unit) * 1.5);font-size:12px;gap:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{width:20px;height:20px}}`;const h=i(class i extends c{constructor(i){super();if(i!==false){this.__registerHost()}this.interactiveIconClick=r(this,"interactiveIconClick",7);this.type=a.DEFAULT;this.variant=n.OUTLINE;this.disabled=false}render(){return e("div",{key:"1d7f780bb25a957983564f132f34014c443db4fb",class:{"z-chip-container":true,"z-chip-interactive":!!this.interactiveIcon,[this.type]:true,[this.variant]:true},"aria-disabled":this.disabled?"true":undefined},this.icon&&e("z-icon",{key:"713b643f92f56eb2ba3860620af7d825e4670aa7",name:this.icon}),e("slot",{key:"f1b591dea14c29a3e5357a5fd063de560bae1497"}),this.interactiveIcon&&e("button",{key:"3ba72530a98214d2c82b8cd98ea44d91cb4a849d",type:"button",onClick:()=>this.interactiveIconClick.emit(),"aria-label":this.htmlAriaLabel||undefined,disabled:this.disabled},e("z-icon",{key:"e2c247e4b372b800facc047fd20d13331b72c7d9",class:"interactive-icon",name:this.interactiveIcon})))}get el(){return this}static get style(){return s()}},[262,"z-chip",{icon:[1],type:[513],variant:[513],interactiveIcon:[513,"interactive-icon"],disabled:[516],htmlAriaLabel:[1,"html-aria-label"]}]);function p(){if(typeof customElements==="undefined"){return}const i=["z-chip","z-icon"];i.forEach((i=>{switch(i){case"z-chip":if(!customElements.get(o(i))){customElements.define(o(i),h)}break;case"z-icon":if(!customElements.get(o(i))){t()}break}}))}export{h as Z,p as d};
 //# sourceMappingURL=index18.js.map

package/dist/components/index18.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZGhostLoading","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key"],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  background: var(--color-surface02);\n  border-radius: var(--border-radius);\n  transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n  display: block;\n  width: 100%;\n  height: 100%;\n  animation: progress 1.6s ease-in-out infinite;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );\n  content: \"\";\n  filter: blur(6px);\n}\n\n@keyframes progress {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n","import {Component, ComponentInterface, h, Host} from \"@stencil/core\";\n@Component({\n  tag: \"z-ghost-loading\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZGhostLoading implements ComponentInterface {\n  render(): HTMLZGhostLoadingElement {\n    return <Host />;\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,wgB,MCMXC,EAAaC,EAAA,MAAAD,UAAAE,E,iFACxB,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,4C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZChip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","ZChipType","DEFAULT","variant","ZChipVariant","OUTLINE","disabled","render","h","key","class","interactiveIcon","undefined","icon","name","onClick","interactiveIconClick","emit","htmlAriaLabel"],"sources":["src/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/z-chip/index.tsx"],"sourcesContent":[":host,\n:host * {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n:host > .z-chip-container {\n  display: inline-flex;\n  min-height: 28px;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 2);\n  border: var(--border-size-small) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: 14px;\n  color: var(--color-primary01);\n  fill: var(--color-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  gap: var(--space-unit);\n  line-height: 1;\n}\n\n:host > .z-chip-container > button {\n  position: relative;\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n:host > .z-chip-container .interactive-icon {\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container:not([aria-disabled]) button:hover .interactive-icon {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\n/* Variants */\n:host > .z-chip-container.filled {\n  border-color: transparent;\n  background-color: var(--color-primary01);\n  color: var(--color-text-inverse);\n  fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.filled .interactive-icon {\n  fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-inverse-icon);\n  border-radius: 50%;\n  content: \"\";\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s;\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button:hover::before {\n  opacity: 0.16;\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button:hover .interactive-icon {\n  color: var(--color-inverse-icon);\n  fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.soft {\n  border-color: transparent;\n  background-color: var(--color-primary02);\n  color: var(--color-default-text);\n}\n\n:host > .z-chip-container.soft .interactive-icon {\n  fill: var(--color-primary01);\n}\n\n/* Disabled state */\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] .interactive-icon {\n  color: var(--color-disabled03);\n  cursor: auto;\n  fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n  border: var(--border-size-small) solid var(--color-disabled01);\n  background-color: transparent;\n}\n\n:host > .z-chip-container.filled[aria-disabled],\n:host > .z-chip-container.soft[aria-disabled] {\n  border-color: transparent;\n  background-color: var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n  border-radius: 100%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n  --z-icon-width: 22px;\n  --z-icon-height: 22px;\n}\n\n/* :host type */\n:host > .z-chip-container.default {\n  min-height: 44px;\n  border-radius: 22px;\n}\n\n:host > .z-chip-container.medium {\n  min-height: 40px;\n  border-radius: 22px;\n}\n\n:host > .z-chip-container.small {\n  min-height: 36px;\n  border-radius: 22px;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .z-chip-container {\n    padding: 0 calc(var(--space-unit) * 1.5);\n    font-size: 12px;\n    gap: calc(var(--space-unit) / 2);\n  }\n\n  /* :host type */\n  :host > .z-chip-container.default {\n    min-height: 32px;\n    border-radius: 16px;\n  }\n\n  :host > .z-chip-container.medium {\n    min-height: 28px;\n    border-radius: 16px;\n  }\n\n  :host > .z-chip-container.small {\n    min-height: 24px;\n    border-radius: 16px;\n  }\n\n  :host > .z-chip-container > z-icon,\n  :host > .z-chip-container .interactive-icon {\n    --z-icon-width: 14px;\n    --z-icon-height: 14px;\n  }\n\n  :host > .z-chip-container > button {\n    width: 20px;\n    height: 20px;\n  }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType, ZChipVariant} from \"../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip implements ComponentInterface {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip variant type, can be outline, filled or soft */\n  @Prop({reflect: true})\n  variant?: ZChipVariant = ZChipVariant.OUTLINE;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** `aria-label` for the icon button */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n          [this.variant]: true,\n        }}\n        aria-disabled={this.disabled ? \"true\" : undefined}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.htmlAriaLabel || undefined}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"qMAAA,MAAMA,EAAY,IAAM,yzH,MCSXC,EAAKC,EAAA,MAAAD,UAAAE,EANlB,WAAAC,CAAAC,G,uGAeEC,KAAAC,KAAmBC,EAAUC,QAI7BH,KAAAI,QAAyBC,EAAaC,QAQtCN,KAAAO,SAAqB,KAuCtB,CA7BC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,mBAAoB,KACpB,uBAAwBX,KAAKY,gBAC7B,CAACZ,KAAKC,MAAO,KACb,CAACD,KAAKI,SAAU,MACjB,gBACcJ,KAAKO,SAAW,OAASM,WAEvCb,KAAKc,MAAQL,EAAA,UAAAC,IAAA,2CAAQK,KAAMf,KAAKc,OACjCL,EAAA,QAAAC,IAAA,6CACCV,KAAKY,iBACJH,EAAA,UAAAC,IAAA,2CACET,KAAK,SACLe,QAAS,IAAMhB,KAAKiB,qBAAqBC,OAAM,aACnClB,KAAKmB,eAAiBN,UAClCN,SAAUP,KAAKO,UAEfE,EAAA,UAAAC,IAAA,2CACEC,MAAM,mBACNI,KAAMf,KAAKY,mB","ignoreList":[]}

package/dist/components/index19.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as i,HTMLElement as c,createEvent as r,h as e,transformTag as o}from"@stencil/core/internal/client";import{x as a,y as n}from"./index2.js";import{d as t}from"./index3.js";const s=()=>`.sc-z-chip-h,.sc-z-chip-h *.sc-z-chip{box-sizing:border-box}.sc-z-chip-h{display:block}.sc-z-chip-h>.z-chip-container.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:14px;color:var(--color-primary01);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);gap:var(--space-unit);line-height:1}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{position:relative;display:flex;width:28px;height:28px;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;border-radius:50%;cursor:pointer}.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container.sc-z-chip:not([aria-disabled]) button.sc-z-chip:hover .interactive-icon.sc-z-chip{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip{border-color:transparent;background-color:var(--color-primary01);color:var(--color-text-inverse);fill:var(--color-inverse-icon)}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-inverse-icon)}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip:not([aria-disabled]) button.sc-z-chip::before{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-inverse-icon);border-radius:50%;content:"";opacity:0;pointer-events:none;transition:opacity 0.2s}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip:not([aria-disabled]) button.sc-z-chip:hover::before{opacity:0.16}.sc-z-chip-h>.z-chip-container.filled.sc-z-chip:not([aria-disabled]) button.sc-z-chip:hover .interactive-icon.sc-z-chip{color:var(--color-inverse-icon);fill:var(--color-inverse-icon)}.sc-z-chip-h>.z-chip-container.soft.sc-z-chip{border-color:transparent;background-color:var(--color-primary02);color:var(--color-default-text)}.sc-z-chip-h>.z-chip-container.soft.sc-z-chip .interactive-icon.sc-z-chip{fill:var(--color-primary01)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip .interactive-icon.sc-z-chip{color:var(--color-disabled03);cursor:auto;fill:var(--color-disabled03)}.sc-z-chip-h>.z-chip-container[aria-disabled].sc-z-chip{border:var(--border-size-small) solid var(--color-disabled01);background-color:transparent}.sc-z-chip-h>.z-chip-container.filled[aria-disabled].sc-z-chip,.sc-z-chip-h>.z-chip-container.soft[aria-disabled].sc-z-chip{border-color:transparent;background-color:var(--color-disabled01)}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip:focus:focus-visible{border-radius:100%;box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:22px;--z-icon-height:22px}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:44px;border-radius:22px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:40px;border-radius:22px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:36px;border-radius:22px}@media (min-width: 1152px){.sc-z-chip-h>.z-chip-container.sc-z-chip{padding:0 calc(var(--space-unit) * 1.5);font-size:12px;gap:calc(var(--space-unit) / 2)}.sc-z-chip-h>.z-chip-container.default.sc-z-chip{min-height:32px;border-radius:16px}.sc-z-chip-h>.z-chip-container.medium.sc-z-chip{min-height:28px;border-radius:16px}.sc-z-chip-h>.z-chip-container.small.sc-z-chip{min-height:24px;border-radius:16px}.sc-z-chip-h>.z-chip-container.sc-z-chip>z-icon.sc-z-chip,.sc-z-chip-h>.z-chip-container.sc-z-chip .interactive-icon.sc-z-chip{--z-icon-width:14px;--z-icon-height:14px}.sc-z-chip-h>.z-chip-container.sc-z-chip>button.sc-z-chip{width:20px;height:20px}}`;const h=i(class i extends c{constructor(i){super();if(i!==false){this.__registerHost()}this.interactiveIconClick=r(this,"interactiveIconClick",7);this.type=a.DEFAULT;this.variant=n.OUTLINE;this.disabled=false;this.ariaLabel=""}render(){return e("div",{key:"9a098f7915cfbb84e2290a853fe59b7e30c6f555",class:{"z-chip-container":true,"z-chip-interactive":!!this.interactiveIcon,[this.type]:true,[this.variant]:true},"aria-disabled":this.disabled?"true":undefined},this.icon&&e("z-icon",{key:"e563c31c093f46beeda6e658c5c05e7c16a56204",name:this.icon}),e("slot",{key:"9b186a85b090df0ab12c030ee3a517ef253e62d6"}),this.interactiveIcon&&e("button",{key:"4a5dd47a8ec40062d0b564f165adb81b11a3b4a5",type:"button",onClick:()=>this.interactiveIconClick.emit(),"aria-label":this.ariaLabel,disabled:this.disabled},e("z-icon",{key:"092864aef71920ba68f9d778797489e476c51971",class:"interactive-icon",name:this.interactiveIcon})))}get el(){return this}static get style(){return s()}},[262,"z-chip",{icon:[1],type:[513],variant:[513],interactiveIcon:[513,"interactive-icon"],disabled:[516],ariaLabel:[1,"aria-label"]}]);function p(){if(typeof customElements==="undefined"){return}const i=["z-chip","z-icon"];i.forEach((i=>{switch(i){case"z-chip":if(!customElements.get(o(i))){customElements.define(o(i),h)}break;case"z-icon":if(!customElements.get(o(i))){t()}break}}))}export{h as Z,p as d};
+import{proxyCustomElement as r,HTMLElement as e,createEvent as a,h as t,Host as o,transformTag as n}from"@stencil/core/internal/client";import{d as s}from"./index4.js";import{d as i}from"./index3.js";const c=()=>`:host{position:relative;display:flex;width:100%;height:232px;flex-direction:column;align-items:center;padding:calc(var(--space-unit) * 3);background-color:var(--color-surface02);background-image:repeating-linear-gradient(       0deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     ),     repeating-linear-gradient(       90deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     ),     repeating-linear-gradient(       180deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     ),     repeating-linear-gradient(       270deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     );background-position:0 0,     0 0,     100% 0,     0 100%;background-repeat:no-repeat;background-size:2px 100%,     100% 2px,     2px 100%,     100% 2px;border-radius:var(--border-radius-small);color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host(.dragover) *{pointer-events:none}.dragover-container{position:absolute;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host(.dragover) .dragover-container{display:flex;align-items:center;justify-content:center}`;const d=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.fileDropped=a(this,"fileDropped",7);this.dragging=false}onDrop(r){r.preventDefault();this.dragging=false;if(r.dataTransfer.files.length){this.fileDropped.emit(r.dataTransfer.files)}}render(){return t(o,{key:"67cb9dfea1cd24f61d1b1c628752d7a770365c5c",class:{dragover:this.dragging},onDragOver:r=>{r.preventDefault();this.dragging=true},onDragLeave:()=>{this.dragging=false},onDrop:this.onDrop.bind(this)},t("div",{key:"38ecbac3eb08bf669a75869c78f6e95dff67941f",class:"dragover-container"},t("z-button",{key:"b0b1e63c600d4e01155ddfb593faf3fd89e55abd"},this.dragAndDropLabel)),t("slot",{key:"6876fc9e23ffc13a39651ee26c92d6355d45aff7"}))}static get style(){return c()}},[257,"z-dragdrop-area",{dragAndDropLabel:[1,"drag-and-drop-label"],dragging:[32]}]);function p(){if(typeof customElements==="undefined"){return}const r=["z-dragdrop-area","z-button","z-icon"];r.forEach((r=>{switch(r){case"z-dragdrop-area":if(!customElements.get(n(r))){customElements.define(n(r),d)}break;case"z-button":if(!customElements.get(n(r))){s()}break;case"z-icon":if(!customElements.get(n(r))){i()}break}}))}export{d as Z,p as d};
 //# sourceMappingURL=index19.js.map

package/dist/components/index19.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZChip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","ZChipType","DEFAULT","variant","ZChipVariant","OUTLINE","disabled","ariaLabel","render","h","key","class","interactiveIcon","undefined","icon","name","onClick","interactiveIconClick","emit"],"sources":["src/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/z-chip/index.tsx"],"sourcesContent":[":host,\n:host * {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n:host > .z-chip-container {\n  display: inline-flex;\n  min-height: 28px;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 2);\n  border: var(--border-size-small) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: 14px;\n  color: var(--color-primary01);\n  fill: var(--color-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  gap: var(--space-unit);\n  line-height: 1;\n}\n\n:host > .z-chip-container > button {\n  position: relative;\n  display: flex;\n  width: 28px;\n  height: 28px;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n:host > .z-chip-container .interactive-icon {\n  fill: var(--color-primary01);\n}\n\n:host > .z-chip-container:not([aria-disabled]) button:hover .interactive-icon {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\n/* Variants */\n:host > .z-chip-container.filled {\n  border-color: transparent;\n  background-color: var(--color-primary01);\n  color: var(--color-text-inverse);\n  fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.filled .interactive-icon {\n  fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-inverse-icon);\n  border-radius: 50%;\n  content: \"\";\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s;\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button:hover::before {\n  opacity: 0.16;\n}\n\n:host > .z-chip-container.filled:not([aria-disabled]) button:hover .interactive-icon {\n  color: var(--color-inverse-icon);\n  fill: var(--color-inverse-icon);\n}\n\n:host > .z-chip-container.soft {\n  border-color: transparent;\n  background-color: var(--color-primary02);\n  color: var(--color-default-text);\n}\n\n:host > .z-chip-container.soft .interactive-icon {\n  fill: var(--color-primary01);\n}\n\n/* Disabled state */\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] .interactive-icon {\n  color: var(--color-disabled03);\n  cursor: auto;\n  fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n  border: var(--border-size-small) solid var(--color-disabled01);\n  background-color: transparent;\n}\n\n:host > .z-chip-container.filled[aria-disabled],\n:host > .z-chip-container.soft[aria-disabled] {\n  border-color: transparent;\n  background-color: var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n  border-radius: 100%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n  --z-icon-width: 22px;\n  --z-icon-height: 22px;\n}\n\n/* :host type */\n:host > .z-chip-container.default {\n  min-height: 44px;\n  border-radius: 22px;\n}\n\n:host > .z-chip-container.medium {\n  min-height: 40px;\n  border-radius: 22px;\n}\n\n:host > .z-chip-container.small {\n  min-height: 36px;\n  border-radius: 22px;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .z-chip-container {\n    padding: 0 calc(var(--space-unit) * 1.5);\n    font-size: 12px;\n    gap: calc(var(--space-unit) / 2);\n  }\n\n  /* :host type */\n  :host > .z-chip-container.default {\n    min-height: 32px;\n    border-radius: 16px;\n  }\n\n  :host > .z-chip-container.medium {\n    min-height: 28px;\n    border-radius: 16px;\n  }\n\n  :host > .z-chip-container.small {\n    min-height: 24px;\n    border-radius: 16px;\n  }\n\n  :host > .z-chip-container > z-icon,\n  :host > .z-chip-container .interactive-icon {\n    --z-icon-width: 14px;\n    --z-icon-height: 14px;\n  }\n\n  :host > .z-chip-container > button {\n    width: 20px;\n    height: 20px;\n  }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType, ZChipVariant} from \"../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip implements ComponentInterface {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip variant type, can be outline, filled or soft */\n  @Prop({reflect: true})\n  variant?: ZChipVariant = ZChipVariant.OUTLINE;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** z-chip aria-label string */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n          [this.variant]: true,\n        }}\n        aria-disabled={this.disabled ? \"true\" : undefined}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.ariaLabel}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"qMAAA,MAAMA,EAAY,IAAM,yzH,MCSXC,EAAKC,EAAA,MAAAD,UAAAE,EANlB,WAAAC,CAAAC,G,uGAeEC,KAAAC,KAAmBC,EAAUC,QAI7BH,KAAAI,QAAyBC,EAAaC,QAQtCN,KAAAO,SAAqB,MAIrBP,KAAAQ,UAAY,EAmCb,CA7BC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,mBAAoB,KACpB,uBAAwBZ,KAAKa,gBAC7B,CAACb,KAAKC,MAAO,KACb,CAACD,KAAKI,SAAU,MACjB,gBACcJ,KAAKO,SAAW,OAASO,WAEvCd,KAAKe,MAAQL,EAAA,UAAAC,IAAA,2CAAQK,KAAMhB,KAAKe,OACjCL,EAAA,QAAAC,IAAA,6CACCX,KAAKa,iBACJH,EAAA,UAAAC,IAAA,2CACEV,KAAK,SACLgB,QAAS,IAAMjB,KAAKkB,qBAAqBC,OAAM,aACnCnB,KAAKQ,UACjBD,SAAUP,KAAKO,UAEfG,EAAA,UAAAC,IAAA,2CACEC,MAAM,mBACNI,KAAMhB,KAAKa,mB","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZDragdropArea","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","dragging","onDrop","e","preventDefault","dataTransfer","files","length","fileDropped","emit","render","h","Host","key","class","dragover","onDragOver","onDragLeave","bind","dragAndDropLabel"],"sources":["src/components/file-upload/z-dragdrop-area/styles.css?tag=z-dragdrop-area&encapsulation=shadow","src/components/file-upload/z-dragdrop-area/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 232px;\n  flex-direction: column;\n  align-items: center;\n  padding: calc(var(--space-unit) * 3);\n  background-color: var(--color-surface02);\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      180deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      270deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    );\n  background-position:\n    0 0,\n    0 0,\n    100% 0,\n    0 100%;\n  background-repeat: no-repeat;\n  background-size:\n    2px 100%,\n    100% 2px,\n    2px 100%,\n    100% 2px;\n  border-radius: var(--border-radius-small);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */\n:host(.dragover) * {\n  pointer-events: none;\n}\n\n.dragover-container {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-primary03);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(.dragover) .dragover-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea implements ComponentInterface {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** State that indicates if the user is dragging a file over the drag & drop area */\n  @State()\n  dragging = false;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.dragging = false;\n    if (e.dataTransfer.files.length) {\n      this.fileDropped.emit(e.dataTransfer.files);\n    }\n  }\n\n  render(): HTMLZDragdropAreaElement {\n    return (\n      <Host\n        class={{dragover: this.dragging}}\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragging = true;\n        }}\n        onDragLeave={() => {\n          this.dragging = false;\n        }}\n        onDrop={this.onDrop.bind(this)}\n      >\n        <div class=\"dragover-container\">\n          <z-button>{this.dragAndDropLabel}</z-button>\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"wMAAA,MAAMA,EAAY,IAAM,+7C,MCOXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,2GAYEC,KAAAC,SAAW,KAkCZ,CA5BS,MAAAC,CAAOC,GACbA,EAAEC,iBACFJ,KAAKC,SAAW,MAChB,GAAIE,EAAEE,aAAaC,MAAMC,OAAQ,CAC/BP,KAAKQ,YAAYC,KAAKN,EAAEE,aAAaC,M,EAIzC,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAACC,SAAUf,KAAKC,UACvBe,WAAab,IACXA,EAAEC,iBACFJ,KAAKC,SAAW,IAAI,EAEtBgB,YAAa,KACXjB,KAAKC,SAAW,KAAK,EAEvBC,OAAQF,KAAKE,OAAOgB,KAAKlB,OAEzBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,YAAAE,IAAA,4CAAWb,KAAKmB,mBAElBR,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/index20.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as a,h as t,Host as o,transformTag as n}from"@stencil/core/internal/client";import{d as s}from"./index5.js";import{d as i}from"./index3.js";const c=()=>`:host{position:relative;display:flex;width:100%;height:232px;flex-direction:column;align-items:center;padding:calc(var(--space-unit) * 3);background-color:var(--color-surface02);background-image:repeating-linear-gradient(       0deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     ),     repeating-linear-gradient(       90deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     ),     repeating-linear-gradient(       180deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     ),     repeating-linear-gradient(       270deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     );background-position:0 0,     0 0,     100% 0,     0 100%;background-repeat:no-repeat;background-size:2px 100%,     100% 2px,     2px 100%,     100% 2px;border-radius:var(--border-radius-small);color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host(.dragover) *{pointer-events:none}.dragover-container{position:absolute;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host(.dragover) .dragover-container{display:flex;align-items:center;justify-content:center}`;const d=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.fileDropped=a(this,"fileDropped",7);this.dragging=false}onDrop(r){r.preventDefault();this.dragging=false;if(r.dataTransfer.files.length){this.fileDropped.emit(r.dataTransfer.files)}}render(){return t(o,{key:"ccf7bb034552345593b13a996bb80af42d808f41",class:{dragover:this.dragging},onDragOver:r=>{r.preventDefault();this.dragging=true},onDragLeave:()=>{this.dragging=false},onDrop:this.onDrop.bind(this)},t("div",{key:"efa401f0a7885029e1c1c403b94daebf7f8d24db",class:"dragover-container"},t("z-button",{key:"d302fd74282ea98b68cad4f090a1985f8f70a256"},this.dragAndDropLabel)),t("slot",{key:"e558e6fcf2f1ca7dd7b1dc617d3e98879e8c9a04"}))}static get style(){return c()}},[257,"z-dragdrop-area",{dragAndDropLabel:[1,"drag-and-drop-label"],dragging:[32]}]);function p(){if(typeof customElements==="undefined"){return}const r=["z-dragdrop-area","z-button","z-icon"];r.forEach((r=>{switch(r){case"z-dragdrop-area":if(!customElements.get(n(r))){customElements.define(n(r),d)}break;case"z-button":if(!customElements.get(n(r))){s()}break;case"z-icon":if(!customElements.get(n(r))){i()}break}}))}export{d as Z,p as d};
+import{proxyCustomElement as t,createEvent as i,h as e,transformTag as o}from"@stencil/core/internal/client";import{g as n}from"./index2.js";import{R as a,F as r}from"./reactive-controller.js";import{d as s}from"./index3.js";var l=window.CustomEvent;if(!l||typeof l==="object"){l=function t(i,e){e=e||{};var o=document.createEvent("CustomEvent");o.initCustomEvent(i,!!e.bubbles,!!e.cancelable,e.detail||null);return o};l.prototype=window.Event.prototype}function d(t,i){var e="on"+i.type.toLowerCase();if(typeof t[e]==="function"){t[e](i)}return t.dispatchEvent(i)}function c(t){while(t&&t!==document.body){var i=window.getComputedStyle(t);var e=function(t,e){return!(i[t]===undefined||i[t]===e)};if(i.opacity<1||e("zIndex","auto")||e("transform","none")||e("mixBlendMode","normal")||e("filter","none")||e("perspective","none")||i["isolation"]==="isolate"||i.position==="fixed"||i.webkitOverflowScrolling==="touch"){return true}t=t.parentElement}return false}function h(t){while(t){if(t.localName==="dialog"){return t}if(t.parentElement){t=t.parentElement}else if(t.parentNode){t=t.parentNode.host}else{t=null}}return null}function u(t){while(t&&t.shadowRoot&&t.shadowRoot.activeElement){t=t.shadowRoot.activeElement}if(t&&t.blur&&t!==document.body){t.blur()}}function f(t,i){for(var e=0;e<t.length;++e){if(t[e]===i){return true}}return false}function m(t){if(!t||!t.hasAttribute("method")){return false}return t.getAttribute("method").toLowerCase()==="dialog"}function v(t){var i=["button","input","keygen","select","textarea"];var e=i.map((function(t){return t+":not([disabled])"}));e.push('[tabindex]:not([disabled]):not([tabindex=""])');var o=t.querySelector(e.join(", "));if(!o&&"attachShadow"in Element.prototype){var n=t.querySelectorAll("*");for(var a=0;a<n.length;a++){if(n[a].tagName&&n[a].shadowRoot){o=v(n[a].shadowRoot);if(o){break}}}}return o}function b(t){return t.isConnected||document.body.contains(t)}function p(t){if(t.submitter){return t.submitter}var i=t.target;if(!(i instanceof HTMLFormElement)){return null}var e=k.formSubmitter;if(!e){var o=t.target;var n="getRootNode"in o&&o.getRootNode()||document;e=n.activeElement}if(!e||e.form!==i){return null}return e}function g(t){if(t.defaultPrevented){return}var i=t.target;var e=k.imagemapUseValue;var o=p(t);if(e===null&&o){e=o.value}var n=h(i);if(!n){return}var a=o&&o.getAttribute("formmethod")||i.getAttribute("method");if(a!=="dialog"){return}t.preventDefault();if(e!=null){n.close(e)}else{n.close()}}function w(t){this.dialog_=t;this.replacedStyleTop_=false;this.openAsModal_=false;if(!t.hasAttribute("role")){t.setAttribute("role","dialog")}t.show=this.show.bind(this);t.showModal=this.showModal.bind(this);t.close=this.close.bind(this);t.addEventListener("submit",g,false);if(!("returnValue"in t)){t.returnValue=""}if("MutationObserver"in window){var i=new MutationObserver(this.maybeHideModal.bind(this));i.observe(t,{attributes:true,attributeFilter:["open"]})}else{var e=false;var o=function(){e?this.downgradeModal():this.maybeHideModal();e=false}.bind(this);var n;var a=function(i){if(i.target!==t){return}var a="DOMNodeRemoved";e|=i.type.substr(0,a.length)===a;window.clearTimeout(n);n=window.setTimeout(o,0)};["DOMAttrModified","DOMNodeRemoved","DOMNodeRemovedFromDocument"].forEach((function(i){t.addEventListener(i,a)}))}Object.defineProperty(t,"open",{set:this.setOpen.bind(this),get:t.hasAttribute.bind(t,"open")});this.backdrop_=document.createElement("div");this.backdrop_.className="backdrop";this.backdrop_.addEventListener("mouseup",this.backdropMouseEvent_.bind(this));this.backdrop_.addEventListener("mousedown",this.backdropMouseEvent_.bind(this));this.backdrop_.addEventListener("click",this.backdropMouseEvent_.bind(this))}w.prototype={get dialog(){return this.dialog_},maybeHideModal:function(){if(this.dialog_.hasAttribute("open")&&b(this.dialog_)){return}this.downgradeModal()},downgradeModal:function(){if(!this.openAsModal_){return}this.openAsModal_=false;this.dialog_.style.zIndex="";if(this.replacedStyleTop_){this.dialog_.style.top="";this.replacedStyleTop_=false}this.backdrop_.parentNode&&this.backdrop_.parentNode.removeChild(this.backdrop_);k.dm.removeDialog(this)},setOpen:function(t){if(t){this.dialog_.hasAttribute("open")||this.dialog_.setAttribute("open","")}else{this.dialog_.removeAttribute("open");this.maybeHideModal()}},backdropMouseEvent_:function(t){if(!this.dialog_.hasAttribute("tabindex")){var i=document.createElement("div");this.dialog_.insertBefore(i,this.dialog_.firstChild);i.tabIndex=-1;i.focus();this.dialog_.removeChild(i)}else{this.dialog_.focus()}var e=document.createEvent("MouseEvents");e.initMouseEvent(t.type,t.bubbles,t.cancelable,window,t.detail,t.screenX,t.screenY,t.clientX,t.clientY,t.ctrlKey,t.altKey,t.shiftKey,t.metaKey,t.button,t.relatedTarget);this.dialog_.dispatchEvent(e);t.stopPropagation()},focus_:function(){var t=this.dialog_.querySelector("[autofocus]:not([disabled])");if(!t&&this.dialog_.tabIndex>=0){t=this.dialog_}if(!t){t=v(this.dialog_)}u(document.activeElement);t&&t.focus()},updateZIndex:function(t,i){if(t<i){throw new Error("dialogZ should never be < backdropZ")}this.dialog_.style.zIndex=t;this.backdrop_.style.zIndex=i},show:function(){if(!this.dialog_.open){this.setOpen(true);this.focus_()}},showModal:function(){if(this.dialog_.hasAttribute("open")){throw new Error("Failed to execute 'showModal' on dialog: The element is already open, and therefore cannot be opened modally.")}if(!b(this.dialog_)){throw new Error("Failed to execute 'showModal' on dialog: The element is not in a Document.")}if(!k.dm.pushDialog(this)){throw new Error("Failed to execute 'showModal' on dialog: There are too many open modal dialogs.")}if(c(this.dialog_.parentElement)){console.warn("A dialog is being shown inside a stacking context. "+"This may cause it to be unusable. For more information, see this link: "+"https://github.com/GoogleChrome/dialog-polyfill/#stacking-context")}this.setOpen(true);this.openAsModal_=true;if(k.needsCentering(this.dialog_)){k.reposition(this.dialog_);this.replacedStyleTop_=true}else{this.replacedStyleTop_=false}this.dialog_.parentNode.insertBefore(this.backdrop_,this.dialog_.nextSibling);this.focus_()},close:function(t){if(!this.dialog_.hasAttribute("open")){throw new Error("Failed to execute 'close' on dialog: The element does not have an 'open' attribute, and therefore cannot be closed.")}this.setOpen(false);if(t!==undefined){this.dialog_.returnValue=t}var i=new l("close",{bubbles:false,cancelable:false});d(this.dialog_,i)}};var k={};k.reposition=function(t){var i=document.body.scrollTop||document.documentElement.scrollTop;var e=i+(window.innerHeight-t.offsetHeight)/2;t.style.top=Math.max(i,e)+"px"};k.isInlinePositionSetByStylesheet=function(t){for(var i=0;i<document.styleSheets.length;++i){var e=document.styleSheets[i];var o=null;try{o=e.cssRules}catch(t){}if(!o){continue}for(var n=0;n<o.length;++n){var a=o[n];var r=null;try{r=document.querySelectorAll(a.selectorText)}catch(t){}if(!r||!f(r,t)){continue}var s=a.style.getPropertyValue("top");var l=a.style.getPropertyValue("bottom");if(s&&s!=="auto"||l&&l!=="auto"){return true}}}return false};k.needsCentering=function(t){var i=window.getComputedStyle(t);if(i.position!=="absolute"){return false}if(t.style.top!=="auto"&&t.style.top!==""||t.style.bottom!=="auto"&&t.style.bottom!==""){return false}return!k.isInlinePositionSetByStylesheet(t)};k.forceRegisterDialog=function(t){if(window.HTMLDialogElement||t.showModal){console.warn("This browser already supports <dialog>, the polyfill "+"may not work correctly",t)}if(t.localName!=="dialog"){throw new Error("Failed to register dialog: The element is not a dialog.")}new w(t)};k.registerDialog=function(t){if(!t.showModal){k.forceRegisterDialog(t)}};k.DialogManager=function(){this.pendingDialogStack=[];var t=this.checkDOM_.bind(this);this.overlay=document.createElement("div");this.overlay.className="_dialog_overlay";this.overlay.addEventListener("click",function(i){this.forwardTab_=undefined;i.stopPropagation();t([])}.bind(this));this.handleKey_=this.handleKey_.bind(this);this.handleFocus_=this.handleFocus_.bind(this);this.zIndexLow_=1e5;this.zIndexHigh_=1e5+150;this.forwardTab_=undefined;if("MutationObserver"in window){this.mo_=new MutationObserver((function(i){var e=[];i.forEach((function(t){for(var i=0,o;o=t.removedNodes[i];++i){if(!(o instanceof Element)){continue}else if(o.localName==="dialog"){e.push(o)}e=e.concat(o.querySelectorAll("dialog"))}}));e.length&&t(e)}))}};k.DialogManager.prototype.blockDocument=function(){document.documentElement.addEventListener("focus",this.handleFocus_,true);document.addEventListener("keydown",this.handleKey_);this.mo_&&this.mo_.observe(document,{childList:true,subtree:true})};k.DialogManager.prototype.unblockDocument=function(){document.documentElement.removeEventListener("focus",this.handleFocus_,true);document.removeEventListener("keydown",this.handleKey_);this.mo_&&this.mo_.disconnect()};k.DialogManager.prototype.updateStacking=function(){var t=this.zIndexHigh_;for(var i=0,e;e=this.pendingDialogStack[i];++i){e.updateZIndex(--t,--t);if(i===0){this.overlay.style.zIndex=--t}}var o=this.pendingDialogStack[0];if(o){var n=o.dialog.parentNode||document.body;n.appendChild(this.overlay)}else if(this.overlay.parentNode){this.overlay.parentNode.removeChild(this.overlay)}};k.DialogManager.prototype.containedByTopDialog_=function(t){while(t=h(t)){for(var i=0,e;e=this.pendingDialogStack[i];++i){if(e.dialog===t){return i===0}}t=t.parentElement}return false};k.DialogManager.prototype.handleFocus_=function(t){var i=t.composedPath?t.composedPath()[0]:t.target;if(this.containedByTopDialog_(i)){return}if(document.activeElement===document.documentElement){return}t.preventDefault();t.stopPropagation();u(i);if(this.forwardTab_===undefined){return}var e=this.pendingDialogStack[0];var o=e.dialog;var n=o.compareDocumentPosition(i);if(n&Node.DOCUMENT_POSITION_PRECEDING){if(this.forwardTab_){e.focus_()}else if(i!==document.documentElement){document.documentElement.focus()}}return false};k.DialogManager.prototype.handleKey_=function(t){this.forwardTab_=undefined;if(t.keyCode===27){t.preventDefault();t.stopPropagation();var i=new l("cancel",{bubbles:false,cancelable:true});var e=this.pendingDialogStack[0];if(e&&d(e.dialog,i)){e.dialog.close()}}else if(t.keyCode===9){this.forwardTab_=!t.shiftKey}};k.DialogManager.prototype.checkDOM_=function(t){var i=this.pendingDialogStack.slice();i.forEach((function(i){if(t.indexOf(i.dialog)!==-1){i.downgradeModal()}else{i.maybeHideModal()}}))};k.DialogManager.prototype.pushDialog=function(t){var i=(this.zIndexHigh_-this.zIndexLow_)/2-1;if(this.pendingDialogStack.length>=i){return false}if(this.pendingDialogStack.unshift(t)===1){this.blockDocument()}this.updateStacking();return true};k.DialogManager.prototype.removeDialog=function(t){var i=this.pendingDialogStack.indexOf(t);if(i===-1){return}this.pendingDialogStack.splice(i,1);if(this.pendingDialogStack.length===0){this.unblockDocument()}this.updateStacking()};k.dm=new k.DialogManager;k.formSubmitter=null;k.imagemapUseValue=null;if(window.HTMLDialogElement===undefined){var y=document.createElement("form");y.setAttribute("method","dialog");if(y.method!=="dialog"){var x=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,"method");if(x){var M=x.get;x.get=function(){if(m(this)){return"dialog"}return M.call(this)};var z=x.set;x.set=function(t){if(typeof t==="string"&&t.toLowerCase()==="dialog"){return this.setAttribute("method",t)}return z.call(this,t)};Object.defineProperty(HTMLFormElement.prototype,"method",x)}}document.addEventListener("click",(function(t){k.formSubmitter=null;k.imagemapUseValue=null;if(t.defaultPrevented){return}var i=t.target;if("composedPath"in t){var e=t.composedPath();i=e.shift()||i}if(!i||!m(i.form)){return}var o=i.type==="submit"&&["button","input"].indexOf(i.localName)>-1;if(!o){if(!(i.localName==="input"&&i.type==="image")){return}k.imagemapUseValue=t.offsetX+","+t.offsetY}var n=h(i);if(!n){return}k.formSubmitter=i}),false);document.addEventListener("submit",(function(t){var i=t.target;var e=h(i);if(e){return}var o=p(t);var n=o&&o.getAttribute("formmethod")||i.getAttribute("method");if(n==="dialog"){t.preventDefault()}}));var E=HTMLFormElement.prototype.submit;var C=function(){if(!m(this)){return E.call(this)}var t=h(this);t&&t.close()};HTMLFormElement.prototype.submit=C}const F=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}::slotted([slot="modalContent"]){padding:var(--z-modal-content-padding, calc(var(--space-unit) * 2))}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2);background:var(--color-background)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header button:focus-visible{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}.modal-container>header button::after{position:absolute;top:6px;right:4px;display:block;width:40px;height:40px;background-color:transparent;content:""}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.25);--z-icon-height:calc(var(--space-unit) * 2.25);display:flex;fill:var(--color-primary01-icon)}.modal-container>header>div{display:flex;width:100%;align-items:baseline;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header .subtitle{padding:0;margin:0;color:var(--color-default-text);font-weight:var(--font-sb)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header .subtitle{font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+.subtitle{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:" "}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}}@media (min-width: 1152px){.modal-container>header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) * 1.5)}.modal-container>header h1{font-size:var(--font-size-6);font-weight:var(--font-sb);letter-spacing:0;line-height:1.333}.modal-container>header .subtitle{font-size:var(--font-size-4);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header h1+.subtitle{margin-top:0}}`;const O=t(class t extends a{constructor(t){super(false);if(t!==false){this.__registerHost()}this.__attachShadow();this.modalClose=i(this,"modalClose",7);this.modalHeaderActive=i(this,"modalHeaderActive",7);this.modalBackgroundClick=i(this,"modalBackgroundClick",7);this.closeButtonLabel="chiudi modale";this.alertdialog=false;this.closable=true;this.scrollInside=true;this.lockPageScroll=true;this.focusTrapController=new r(this,{isActive:()=>{var t;return!!((t=this.dialog)===null||t===void 0?void 0:t.open)}})}emitModalClose(){if(this.closable){this.modalClose.emit({modalid:this.modalid});this.resetPageScroll()}}emitModalHeaderActive(){this.modalHeaderActive.emit({modalid:this.modalid})}emitBackgroundClick(){if(this.closable){this.modalBackgroundClick.emit({modalid:this.modalid});this.resetPageScroll()}}resetPageScroll(){if(this.lockPageScroll&&document.body.style.overflowY==="hidden"){document.body.style.overflowY=""}}componentDidLoad(){if(typeof window.HTMLDialogElement!=="function"){if(!this.dialog.localName){Object.defineProperty(this.dialog,"localName",{value:"dialog"})}k.registerDialog(this.dialog);this.dialog.setAttribute("open","true")}else{this.open()}if(this.lockPageScroll){requestAnimationFrame((()=>document.body.style.overflowY="hidden"))}super.componentDidLoad()}disconnectedCallback(){this.resetPageScroll();super.disconnectedCallback()}async open(){var t;(t=this.dialog)===null||t===void 0?void 0:t.showModal();this.focusTrapController.sync();if(this.lockPageScroll){document.body.style.overflowY="hidden"}}async close(){var t;if(this.closable){(t=this.dialog)===null||t===void 0?void 0:t.close();this.focusTrapController.sync();this.resetPageScroll()}}handleKeyDown(t){if(t.code===n.ESC&&!this.closable){t.preventDefault();return}this.focusTrapController.handleWrapTab(t)}closeButtonSlot(){if(this.closable){return e("slot",{name:"modalCloseButton"},e("button",{"aria-label":this.closeButtonLabel,onClick:()=>this.close()},e("z-icon",{name:"multiply-circle-filled"})))}}handleEscape(t){if(this.closable){return}t.preventDefault()}render(){return e("dialog",{key:"526d8a729f276a07f3ff7c40566c7e57051485a7",class:{"modal-dialog":!this.scrollInside},"aria-labelledby":"modal-title","aria-describedby":"modal-content",role:this.alertdialog?"alertdialog":undefined,ref:t=>this.dialog=t,onClose:()=>this.emitModalClose(),onCancel:t=>this.handleEscape(t)},e("div",{key:"a2a80ee8d4ea3800715cc2c1b90d6490a6cf681c",class:{"modal-container":true,"modal-container-scroll-inside":this.scrollInside,"modal-container-scroll-outside":!this.scrollInside},id:this.modalid},e("header",{key:"9406127d701e8d8c552732057f1a17c5ea9feaab",onClick:this.emitModalHeaderActive.bind(this)},e("div",{key:"bfcb837521ff1bac75f1f25d4c7c1d8405f0447d"},this.modaltitle&&e("h1",{key:"b5887ad16f0cec7086c47b7eaafa141bef42ad35",id:"modal-title"},this.modaltitle),this.closeButtonSlot()),this.modalsubtitle&&e("div",{key:"b9fdb82ebd831d6e75705b0016549139054e5901",class:"subtitle",id:"modal-subtitle"},this.modalsubtitle)),e("div",{key:"8b53454963abf4a743bf7fe19faeb2333bf8dd9e",class:{"modal-content-scroll-inside":this.scrollInside,"modal-content-scroll-outside":!this.scrollInside},id:"modal-content"},e("slot",{key:"afe97d828fea5d9b2b79d8706508b43eb74e3b5a",name:"modalContent"}))),e("div",{key:"bc6e6b79153b0187a520a75b77558e47de1db312",class:{"modal-background":true,"modal-background-scroll-outside":!this.scrollInside},"data-action":"modalBackground","data-modal":this.modalid,onClick:()=>{this.emitBackgroundClick();this.close()}}))}get host(){return this}static get style(){return F()}},[769,"z-modal",{modalid:[1],modaltitle:[1],modalsubtitle:[1],closeButtonLabel:[1,"close-button-label"],alertdialog:[4],closable:[4],scrollInside:[4,"scroll-inside"],lockPageScroll:[4,"lock-page-scroll"],open:[64],close:[64]},[[0,"keydown","handleKeyDown"]]]);function T(){if(typeof customElements==="undefined"){return}const t=["z-modal","z-icon"];t.forEach((t=>{switch(t){case"z-modal":if(!customElements.get(o(t))){customElements.define(o(t),O)}break;case"z-icon":if(!customElements.get(o(t))){s()}break}}))}export{O as Z,T as d};
 //# sourceMappingURL=index20.js.map

package/dist/components/index20.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZDragdropArea","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","dragging","onDrop","e","preventDefault","dataTransfer","files","length","fileDropped","emit","render","h","Host","key","class","dragover","onDragOver","onDragLeave","bind","dragAndDropLabel"],"sources":["src/components/file-upload/z-dragdrop-area/styles.css?tag=z-dragdrop-area&encapsulation=shadow","src/components/file-upload/z-dragdrop-area/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 232px;\n  flex-direction: column;\n  align-items: center;\n  padding: calc(var(--space-unit) * 3);\n  background-color: var(--color-surface02);\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      180deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      270deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    );\n  background-position:\n    0 0,\n    0 0,\n    100% 0,\n    0 100%;\n  background-repeat: no-repeat;\n  background-size:\n    2px 100%,\n    100% 2px,\n    2px 100%,\n    100% 2px;\n  border-radius: var(--border-radius-small);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */\n:host(.dragover) * {\n  pointer-events: none;\n}\n\n.dragover-container {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-primary03);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(.dragover) .dragover-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea implements ComponentInterface {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** State that indicates if the user is dragging a file over the drag & drop area */\n  @State()\n  dragging = false;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.dragging = false;\n    if (e.dataTransfer.files.length) {\n      this.fileDropped.emit(e.dataTransfer.files);\n    }\n  }\n\n  render(): HTMLZDragdropAreaElement {\n    return (\n      <Host\n        class={{dragover: this.dragging}}\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragging = true;\n        }}\n        onDragLeave={() => {\n          this.dragging = false;\n        }}\n        onDrop={this.onDrop.bind(this)}\n      >\n        <div class=\"dragover-container\">\n          <z-button>{this.dragAndDropLabel}</z-button>\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"wMAAA,MAAMA,EAAY,IAAM,+7C,MCOXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,2GAYEC,KAAAC,SAAW,KAkCZ,CA5BS,MAAAC,CAAOC,GACbA,EAAEC,iBACFJ,KAAKC,SAAW,MAChB,GAAIE,EAAEE,aAAaC,MAAMC,OAAQ,CAC/BP,KAAKQ,YAAYC,KAAKN,EAAEE,aAAaC,M,EAIzC,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAACC,SAAUf,KAAKC,UACvBe,WAAab,IACXA,EAAEC,iBACFJ,KAAKC,SAAW,IAAI,EAEtBgB,YAAa,KACXjB,KAAKC,SAAW,KAAK,EAEvBC,OAAQF,KAAKE,OAAOgB,KAAKlB,OAEzBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,YAAAE,IAAA,4CAAWb,KAAKmB,mBAElBR,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["supportCustomEvent","window","CustomEvent","event","x","ev","document","createEvent","initCustomEvent","bubbles","cancelable","detail","prototype","Event","safeDispatchEvent","target","check","type","toLowerCase","dispatchEvent","createsStackingContext","el","body","s","getComputedStyle","invalid","k","ok","undefined","opacity","position","webkitOverflowScrolling","parentElement","findNearestDialog","localName","parentNode","host","safeBlur","shadowRoot","activeElement","blur","inNodeList","nodeList","node","i","length","isFormMethodDialog","hasAttribute","getAttribute","findFocusableElementWithin","hostElement","opts","query","map","push","querySelector","join","Element","elems","querySelectorAll","tagName","isConnected","element","contains","findFormSubmitter","submitter","form","HTMLFormElement","dialogPolyfill","formSubmitter","root","getRootNode","maybeHandleSubmit","defaultPrevented","value","imagemapUseValue","dialog","formmethod","preventDefault","close","dialogPolyfillInfo","this","dialog_","replacedStyleTop_","openAsModal_","setAttribute","show","bind","showModal","addEventListener","returnValue","mo","MutationObserver","maybeHideModal","observe","attributes","attributeFilter","removed","cb","downgradeModal","timeout","delayModel","cand","substr","clearTimeout","setTimeout","forEach","name","Object","defineProperty","set","setOpen","get","backdrop_","createElement","className","backdropMouseEvent_","style","zIndex","top","removeChild","dm","removeDialog","removeAttribute","e","fake","insertBefore","firstChild","tabIndex","focus","redirectedEvent","initMouseEvent","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget","stopPropagation","focus_","updateZIndex","dialogZ","backdropZ","Error","open","pushDialog","console","warn","needsCentering","reposition","nextSibling","opt_returnValue","closeEvent","scrollTop","documentElement","topValue","innerHeight","offsetHeight","Math","max","isInlinePositionSetByStylesheet","styleSheets","styleSheet","cssRules","j","rule","selectedNodes","selectorText","cssTop","getPropertyValue","cssBottom","computedStyle","bottom","forceRegisterDialog","HTMLDialogElement","registerDialog","DialogManager","pendingDialogStack","checkDOM","checkDOM_","overlay","forwardTab_","handleKey_","handleFocus_","zIndexLow_","zIndexHigh_","mo_","records","rec","c","removedNodes","concat","blockDocument","childList","subtree","unblockDocument","removeEventListener","disconnect","updateStacking","dpi","last","p","appendChild","containedByTopDialog_","candidate","composedPath","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","keyCode","cancelEvent","clone","slice","indexOf","allowed","unshift","index","splice","testForm","method","methodDescriptor","getOwnPropertyDescriptor","realGet","call","realSet","v","path","shift","valid","offsetX","offsetY","nativeFormSubmit","submit","replacementFormSubmit","stylesCss","ZModal","__stencil_proxyCustomElement","ReactiveControllerHost","closeButtonLabel","alertdialog","closable","scrollInside","lockPageScroll","focusTrapController","FocusTrapController","isActive","_a","emitModalClose","modalClose","emit","modalid","resetPageScroll","emitModalHeaderActive","modalHeaderActive","emitBackgroundClick","modalBackgroundClick","overflowY","componentDidLoad","requestAnimationFrame","super","disconnectedCallback","sync","handleKeyDown","code","KeyboardCode","ESC","handleWrapTab","closeButtonSlot","h","onClick","handleEscape","render","key","class","role","ref","onClose","onCancel","id","modaltitle","modalsubtitle"],"sources":["node_modules/dialog-polyfill/dist/dialog-polyfill.esm.js","src/components/z-modal/styles.css?tag=z-modal&encapsulation=shadow","src/components/z-modal/index.tsx"],"sourcesContent":["// nb. This is for IE10 and lower _only_.\nvar supportCustomEvent = window.CustomEvent;\nif (!supportCustomEvent || typeof supportCustomEvent === 'object') {\n  supportCustomEvent = function CustomEvent(event, x) {\n    x = x || {};\n    var ev = document.createEvent('CustomEvent');\n    ev.initCustomEvent(event, !!x.bubbles, !!x.cancelable, x.detail || null);\n    return ev;\n  };\n  supportCustomEvent.prototype = window.Event.prototype;\n}\n\n/**\n * Dispatches the passed event to both an \"on<type>\" handler as well as via the\n * normal dispatch operation. Does not bubble.\n *\n * @param {!EventTarget} target\n * @param {!Event} event\n * @return {boolean}\n */\nfunction safeDispatchEvent(target, event) {\n  var check = 'on' + event.type.toLowerCase();\n  if (typeof target[check] === 'function') {\n    target[check](event);\n  }\n  return target.dispatchEvent(event);\n}\n\n/**\n * @param {Element} el to check for stacking context\n * @return {boolean} whether this el or its parents creates a stacking context\n */\nfunction createsStackingContext(el) {\n  while (el && el !== document.body) {\n    var s = window.getComputedStyle(el);\n    var invalid = function(k, ok) {\n      return !(s[k] === undefined || s[k] === ok);\n    };\n\n    if (s.opacity < 1 ||\n        invalid('zIndex', 'auto') ||\n        invalid('transform', 'none') ||\n        invalid('mixBlendMode', 'normal') ||\n        invalid('filter', 'none') ||\n        invalid('perspective', 'none') ||\n        s['isolation'] === 'isolate' ||\n        s.position === 'fixed' ||\n        s.webkitOverflowScrolling === 'touch') {\n      return true;\n    }\n    el = el.parentElement;\n  }\n  return false;\n}\n\n/**\n * Finds the nearest <dialog> from the passed element.\n *\n * @param {Element} el to search from\n * @return {HTMLDialogElement} dialog found\n */\nfunction findNearestDialog(el) {\n  while (el) {\n    if (el.localName === 'dialog') {\n      return /** @type {HTMLDialogElement} */ (el);\n    }\n    if (el.parentElement) {\n      el = el.parentElement;\n    } else if (el.parentNode) {\n      el = el.parentNode.host;\n    } else {\n      el = null;\n    }\n  }\n  return null;\n}\n\n/**\n * Blur the specified element, as long as it's not the HTML body element.\n * This works around an IE9/10 bug - blurring the body causes Windows to\n * blur the whole application.\n *\n * @param {Element} el to blur\n */\nfunction safeBlur(el) {\n  // Find the actual focused element when the active element is inside a shadow root\n  while (el && el.shadowRoot && el.shadowRoot.activeElement) {\n    el = el.shadowRoot.activeElement;\n  }\n\n  if (el && el.blur && el !== document.body) {\n    el.blur();\n  }\n}\n\n/**\n * @param {!NodeList} nodeList to search\n * @param {Node} node to find\n * @return {boolean} whether node is inside nodeList\n */\nfunction inNodeList(nodeList, node) {\n  for (var i = 0; i < nodeList.length; ++i) {\n    if (nodeList[i] === node) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * @param {HTMLFormElement} el to check\n * @return {boolean} whether this form has method=\"dialog\"\n */\nfunction isFormMethodDialog(el) {\n  if (!el || !el.hasAttribute('method')) {\n    return false;\n  }\n  return el.getAttribute('method').toLowerCase() === 'dialog';\n}\n\n/**\n * @param {!DocumentFragment|!Element} hostElement\n * @return {?Element}\n */\nfunction findFocusableElementWithin(hostElement) {\n  // Note that this is 'any focusable area'. This list is probably not exhaustive, but the\n  // alternative involves stepping through and trying to focus everything.\n  var opts = ['button', 'input', 'keygen', 'select', 'textarea'];\n  var query = opts.map(function(el) {\n    return el + ':not([disabled])';\n  });\n  // TODO(samthor): tabindex values that are not numeric are not focusable.\n  query.push('[tabindex]:not([disabled]):not([tabindex=\"\"])');  // tabindex != \"\", not disabled\n  var target = hostElement.querySelector(query.join(', '));\n\n  if (!target && 'attachShadow' in Element.prototype) {\n    // If we haven't found a focusable target, see if the host element contains an element\n    // which has a shadowRoot.\n    // Recursively search for the first focusable item in shadow roots.\n    var elems = hostElement.querySelectorAll('*');\n    for (var i = 0; i < elems.length; i++) {\n      if (elems[i].tagName && elems[i].shadowRoot) {\n        target = findFocusableElementWithin(elems[i].shadowRoot);\n        if (target) {\n          break;\n        }\n      }\n    }\n  }\n  return target;\n}\n\n/**\n * Determines if an element is attached to the DOM.\n * @param {Element} element to check\n * @return {boolean} whether the element is in DOM\n */\nfunction isConnected(element) {\n  return element.isConnected || document.body.contains(element);\n}\n\n/**\n * @param {!Event} event\n * @return {?Element}\n */\nfunction findFormSubmitter(event) {\n  if (event.submitter) {\n    return event.submitter;\n  }\n\n  var form = event.target;\n  if (!(form instanceof HTMLFormElement)) {\n    return null;\n  }\n\n  var submitter = dialogPolyfill.formSubmitter;\n  if (!submitter) {\n    var target = event.target;\n    var root = ('getRootNode' in target && target.getRootNode() || document);\n    submitter = root.activeElement;\n  }\n\n  if (!submitter || submitter.form !== form) {\n    return null;\n  }\n  return submitter;\n}\n\n/**\n * @param {!Event} event\n */\nfunction maybeHandleSubmit(event) {\n  if (event.defaultPrevented) {\n    return;\n  }\n  var form = /** @type {!HTMLFormElement} */ (event.target);\n\n  // We'd have a value if we clicked on an imagemap.\n  var value = dialogPolyfill.imagemapUseValue;\n  var submitter = findFormSubmitter(event);\n  if (value === null && submitter) {\n    value = submitter.value;\n  }\n\n  // There should always be a dialog as this handler is added specifically on them, but check just\n  // in case.\n  var dialog = findNearestDialog(form);\n  if (!dialog) {\n    return;\n  }\n\n  // Prefer formmethod on the button.\n  var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method');\n  if (formmethod !== 'dialog') {\n    return;\n  }\n  event.preventDefault();\n\n  if (value != null) {\n    // nb. we explicitly check against null/undefined\n    dialog.close(value);\n  } else {\n    dialog.close();\n  }\n}\n\n/**\n * @param {!HTMLDialogElement} dialog to upgrade\n * @constructor\n */\nfunction dialogPolyfillInfo(dialog) {\n  this.dialog_ = dialog;\n  this.replacedStyleTop_ = false;\n  this.openAsModal_ = false;\n\n  // Set a11y role. Browsers that support dialog implicitly know this already.\n  if (!dialog.hasAttribute('role')) {\n    dialog.setAttribute('role', 'dialog');\n  }\n\n  dialog.show = this.show.bind(this);\n  dialog.showModal = this.showModal.bind(this);\n  dialog.close = this.close.bind(this);\n\n  dialog.addEventListener('submit', maybeHandleSubmit, false);\n\n  if (!('returnValue' in dialog)) {\n    dialog.returnValue = '';\n  }\n\n  if ('MutationObserver' in window) {\n    var mo = new MutationObserver(this.maybeHideModal.bind(this));\n    mo.observe(dialog, {attributes: true, attributeFilter: ['open']});\n  } else {\n    // IE10 and below support. Note that DOMNodeRemoved etc fire _before_ removal. They also\n    // seem to fire even if the element was removed as part of a parent removal. Use the removed\n    // events to force downgrade (useful if removed/immediately added).\n    var removed = false;\n    var cb = function() {\n      removed ? this.downgradeModal() : this.maybeHideModal();\n      removed = false;\n    }.bind(this);\n    var timeout;\n    var delayModel = function(ev) {\n      if (ev.target !== dialog) { return; }  // not for a child element\n      var cand = 'DOMNodeRemoved';\n      removed |= (ev.type.substr(0, cand.length) === cand);\n      window.clearTimeout(timeout);\n      timeout = window.setTimeout(cb, 0);\n    };\n    ['DOMAttrModified', 'DOMNodeRemoved', 'DOMNodeRemovedFromDocument'].forEach(function(name) {\n      dialog.addEventListener(name, delayModel);\n    });\n  }\n  // Note that the DOM is observed inside DialogManager while any dialog\n  // is being displayed as a modal, to catch modal removal from the DOM.\n\n  Object.defineProperty(dialog, 'open', {\n    set: this.setOpen.bind(this),\n    get: dialog.hasAttribute.bind(dialog, 'open')\n  });\n\n  this.backdrop_ = document.createElement('div');\n  this.backdrop_.className = 'backdrop';\n  this.backdrop_.addEventListener('mouseup'  , this.backdropMouseEvent_.bind(this));\n  this.backdrop_.addEventListener('mousedown', this.backdropMouseEvent_.bind(this));\n  this.backdrop_.addEventListener('click'    , this.backdropMouseEvent_.bind(this));\n}\n\ndialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ ({\n\n  get dialog() {\n    return this.dialog_;\n  },\n\n  /**\n   * Maybe remove this dialog from the modal top layer. This is called when\n   * a modal dialog may no longer be tenable, e.g., when the dialog is no\n   * longer open or is no longer part of the DOM.\n   */\n  maybeHideModal: function() {\n    if (this.dialog_.hasAttribute('open') && isConnected(this.dialog_)) { return; }\n    this.downgradeModal();\n  },\n\n  /**\n   * Remove this dialog from the modal top layer, leaving it as a non-modal.\n   */\n  downgradeModal: function() {\n    if (!this.openAsModal_) { return; }\n    this.openAsModal_ = false;\n    this.dialog_.style.zIndex = '';\n\n    // This won't match the native <dialog> exactly because if the user set top on a centered\n    // polyfill dialog, that top gets thrown away when the dialog is closed. Not sure it's\n    // possible to polyfill this perfectly.\n    if (this.replacedStyleTop_) {\n      this.dialog_.style.top = '';\n      this.replacedStyleTop_ = false;\n    }\n\n    // Clear the backdrop and remove from the manager.\n    this.backdrop_.parentNode && this.backdrop_.parentNode.removeChild(this.backdrop_);\n    dialogPolyfill.dm.removeDialog(this);\n  },\n\n  /**\n   * @param {boolean} value whether to open or close this dialog\n   */\n  setOpen: function(value) {\n    if (value) {\n      this.dialog_.hasAttribute('open') || this.dialog_.setAttribute('open', '');\n    } else {\n      this.dialog_.removeAttribute('open');\n      this.maybeHideModal();  // nb. redundant with MutationObserver\n    }\n  },\n\n  /**\n   * Handles mouse events ('mouseup', 'mousedown', 'click') on the fake .backdrop element, redirecting them as if\n   * they were on the dialog itself.\n   *\n   * @param {!Event} e to redirect\n   */\n  backdropMouseEvent_: function(e) {\n    if (!this.dialog_.hasAttribute('tabindex')) {\n      // Clicking on the backdrop should move the implicit cursor, even if dialog cannot be\n      // focused. Create a fake thing to focus on. If the backdrop was _before_ the dialog, this\n      // would not be needed - clicks would move the implicit cursor there.\n      var fake = document.createElement('div');\n      this.dialog_.insertBefore(fake, this.dialog_.firstChild);\n      fake.tabIndex = -1;\n      fake.focus();\n      this.dialog_.removeChild(fake);\n    } else {\n      this.dialog_.focus();\n    }\n\n    var redirectedEvent = document.createEvent('MouseEvents');\n    redirectedEvent.initMouseEvent(e.type, e.bubbles, e.cancelable, window,\n        e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey,\n        e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget);\n    this.dialog_.dispatchEvent(redirectedEvent);\n    e.stopPropagation();\n  },\n\n  /**\n   * Focuses on the first focusable element within the dialog. This will always blur the current\n   * focus, even if nothing within the dialog is found.\n   */\n  focus_: function() {\n    // Find element with `autofocus` attribute, or fall back to the first form/tabindex control.\n    var target = this.dialog_.querySelector('[autofocus]:not([disabled])');\n    if (!target && this.dialog_.tabIndex >= 0) {\n      target = this.dialog_;\n    }\n    if (!target) {\n      target = findFocusableElementWithin(this.dialog_);\n    }\n    safeBlur(document.activeElement);\n    target && target.focus();\n  },\n\n  /**\n   * Sets the zIndex for the backdrop and dialog.\n   *\n   * @param {number} dialogZ\n   * @param {number} backdropZ\n   */\n  updateZIndex: function(dialogZ, backdropZ) {\n    if (dialogZ < backdropZ) {\n      throw new Error('dialogZ should never be < backdropZ');\n    }\n    this.dialog_.style.zIndex = dialogZ;\n    this.backdrop_.style.zIndex = backdropZ;\n  },\n\n  /**\n   * Shows the dialog. If the dialog is already open, this does nothing.\n   */\n  show: function() {\n    if (!this.dialog_.open) {\n      this.setOpen(true);\n      this.focus_();\n    }\n  },\n\n  /**\n   * Show this dialog modally.\n   */\n  showModal: function() {\n    if (this.dialog_.hasAttribute('open')) {\n      throw new Error('Failed to execute \\'showModal\\' on dialog: The element is already open, and therefore cannot be opened modally.');\n    }\n    if (!isConnected(this.dialog_)) {\n      throw new Error('Failed to execute \\'showModal\\' on dialog: The element is not in a Document.');\n    }\n    if (!dialogPolyfill.dm.pushDialog(this)) {\n      throw new Error('Failed to execute \\'showModal\\' on dialog: There are too many open modal dialogs.');\n    }\n\n    if (createsStackingContext(this.dialog_.parentElement)) {\n      console.warn('A dialog is being shown inside a stacking context. ' +\n          'This may cause it to be unusable. For more information, see this link: ' +\n          'https://github.com/GoogleChrome/dialog-polyfill/#stacking-context');\n    }\n\n    this.setOpen(true);\n    this.openAsModal_ = true;\n\n    // Optionally center vertically, relative to the current viewport.\n    if (dialogPolyfill.needsCentering(this.dialog_)) {\n      dialogPolyfill.reposition(this.dialog_);\n      this.replacedStyleTop_ = true;\n    } else {\n      this.replacedStyleTop_ = false;\n    }\n\n    // Insert backdrop.\n    this.dialog_.parentNode.insertBefore(this.backdrop_, this.dialog_.nextSibling);\n\n    // Focus on whatever inside the dialog.\n    this.focus_();\n  },\n\n  /**\n   * Closes this HTMLDialogElement. This is optional vs clearing the open\n   * attribute, however this fires a 'close' event.\n   *\n   * @param {string=} opt_returnValue to use as the returnValue\n   */\n  close: function(opt_returnValue) {\n    if (!this.dialog_.hasAttribute('open')) {\n      throw new Error('Failed to execute \\'close\\' on dialog: The element does not have an \\'open\\' attribute, and therefore cannot be closed.');\n    }\n    this.setOpen(false);\n\n    // Leave returnValue untouched in case it was set directly on the element\n    if (opt_returnValue !== undefined) {\n      this.dialog_.returnValue = opt_returnValue;\n    }\n\n    // Triggering \"close\" event for any attached listeners on the <dialog>.\n    var closeEvent = new supportCustomEvent('close', {\n      bubbles: false,\n      cancelable: false\n    });\n    safeDispatchEvent(this.dialog_, closeEvent);\n  }\n\n});\n\nvar dialogPolyfill = {};\n\ndialogPolyfill.reposition = function(element) {\n  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;\n  var topValue = scrollTop + (window.innerHeight - element.offsetHeight) / 2;\n  element.style.top = Math.max(scrollTop, topValue) + 'px';\n};\n\ndialogPolyfill.isInlinePositionSetByStylesheet = function(element) {\n  for (var i = 0; i < document.styleSheets.length; ++i) {\n    var styleSheet = document.styleSheets[i];\n    var cssRules = null;\n    // Some browsers throw on cssRules.\n    try {\n      cssRules = styleSheet.cssRules;\n    } catch (e) {}\n    if (!cssRules) { continue; }\n    for (var j = 0; j < cssRules.length; ++j) {\n      var rule = cssRules[j];\n      var selectedNodes = null;\n      // Ignore errors on invalid selector texts.\n      try {\n        selectedNodes = document.querySelectorAll(rule.selectorText);\n      } catch(e) {}\n      if (!selectedNodes || !inNodeList(selectedNodes, element)) {\n        continue;\n      }\n      var cssTop = rule.style.getPropertyValue('top');\n      var cssBottom = rule.style.getPropertyValue('bottom');\n      if ((cssTop && cssTop !== 'auto') || (cssBottom && cssBottom !== 'auto')) {\n        return true;\n      }\n    }\n  }\n  return false;\n};\n\ndialogPolyfill.needsCentering = function(dialog) {\n  var computedStyle = window.getComputedStyle(dialog);\n  if (computedStyle.position !== 'absolute') {\n    return false;\n  }\n\n  // We must determine whether the top/bottom specified value is non-auto.  In\n  // WebKit/Blink, checking computedStyle.top == 'auto' is sufficient, but\n  // Firefox returns the used value. So we do this crazy thing instead: check\n  // the inline style and then go through CSS rules.\n  if ((dialog.style.top !== 'auto' && dialog.style.top !== '') ||\n      (dialog.style.bottom !== 'auto' && dialog.style.bottom !== '')) {\n    return false;\n  }\n  return !dialogPolyfill.isInlinePositionSetByStylesheet(dialog);\n};\n\n/**\n * @param {!Element} element to force upgrade\n */\ndialogPolyfill.forceRegisterDialog = function(element) {\n  if (window.HTMLDialogElement || element.showModal) {\n    console.warn('This browser already supports <dialog>, the polyfill ' +\n        'may not work correctly', element);\n  }\n  if (element.localName !== 'dialog') {\n    throw new Error('Failed to register dialog: The element is not a dialog.');\n  }\n  new dialogPolyfillInfo(/** @type {!HTMLDialogElement} */ (element));\n};\n\n/**\n * @param {!Element} element to upgrade, if necessary\n */\ndialogPolyfill.registerDialog = function(element) {\n  if (!element.showModal) {\n    dialogPolyfill.forceRegisterDialog(element);\n  }\n};\n\n/**\n * @constructor\n */\ndialogPolyfill.DialogManager = function() {\n  /** @type {!Array<!dialogPolyfillInfo>} */\n  this.pendingDialogStack = [];\n\n  var checkDOM = this.checkDOM_.bind(this);\n\n  // The overlay is used to simulate how a modal dialog blocks the document.\n  // The blocking dialog is positioned on top of the overlay, and the rest of\n  // the dialogs on the pending dialog stack are positioned below it. In the\n  // actual implementation, the modal dialog stacking is controlled by the\n  // top layer, where z-index has no effect.\n  this.overlay = document.createElement('div');\n  this.overlay.className = '_dialog_overlay';\n  this.overlay.addEventListener('click', function(e) {\n    this.forwardTab_ = undefined;\n    e.stopPropagation();\n    checkDOM([]);  // sanity-check DOM\n  }.bind(this));\n\n  this.handleKey_ = this.handleKey_.bind(this);\n  this.handleFocus_ = this.handleFocus_.bind(this);\n\n  this.zIndexLow_ = 100000;\n  this.zIndexHigh_ = 100000 + 150;\n\n  this.forwardTab_ = undefined;\n\n  if ('MutationObserver' in window) {\n    this.mo_ = new MutationObserver(function(records) {\n      var removed = [];\n      records.forEach(function(rec) {\n        for (var i = 0, c; c = rec.removedNodes[i]; ++i) {\n          if (!(c instanceof Element)) {\n            continue;\n          } else if (c.localName === 'dialog') {\n            removed.push(c);\n          }\n          removed = removed.concat(c.querySelectorAll('dialog'));\n        }\n      });\n      removed.length && checkDOM(removed);\n    });\n  }\n};\n\n/**\n * Called on the first modal dialog being shown. Adds the overlay and related\n * handlers.\n */\ndialogPolyfill.DialogManager.prototype.blockDocument = function() {\n  document.documentElement.addEventListener('focus', this.handleFocus_, true);\n  document.addEventListener('keydown', this.handleKey_);\n  this.mo_ && this.mo_.observe(document, {childList: true, subtree: true});\n};\n\n/**\n * Called on the first modal dialog being removed, i.e., when no more modal\n * dialogs are visible.\n */\ndialogPolyfill.DialogManager.prototype.unblockDocument = function() {\n  document.documentElement.removeEventListener('focus', this.handleFocus_, true);\n  document.removeEventListener('keydown', this.handleKey_);\n  this.mo_ && this.mo_.disconnect();\n};\n\n/**\n * Updates the stacking of all known dialogs.\n */\ndialogPolyfill.DialogManager.prototype.updateStacking = function() {\n  var zIndex = this.zIndexHigh_;\n\n  for (var i = 0, dpi; dpi = this.pendingDialogStack[i]; ++i) {\n    dpi.updateZIndex(--zIndex, --zIndex);\n    if (i === 0) {\n      this.overlay.style.zIndex = --zIndex;\n    }\n  }\n\n  // Make the overlay a sibling of the dialog itself.\n  var last = this.pendingDialogStack[0];\n  if (last) {\n    var p = last.dialog.parentNode || document.body;\n    p.appendChild(this.overlay);\n  } else if (this.overlay.parentNode) {\n    this.overlay.parentNode.removeChild(this.overlay);\n  }\n};\n\n/**\n * @param {Element} candidate to check if contained or is the top-most modal dialog\n * @return {boolean} whether candidate is contained in top dialog\n */\ndialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function(candidate) {\n  while (candidate = findNearestDialog(candidate)) {\n    for (var i = 0, dpi; dpi = this.pendingDialogStack[i]; ++i) {\n      if (dpi.dialog === candidate) {\n        return i === 0;  // only valid if top-most\n      }\n    }\n    candidate = candidate.parentElement;\n  }\n  return false;\n};\n\ndialogPolyfill.DialogManager.prototype.handleFocus_ = function(event) {\n  var target = event.composedPath ? event.composedPath()[0] : event.target;\n\n  if (this.containedByTopDialog_(target)) { return; }\n\n  if (document.activeElement === document.documentElement) { return; }\n\n  event.preventDefault();\n  event.stopPropagation();\n  safeBlur(/** @type {Element} */ (target));\n\n  if (this.forwardTab_ === undefined) { return; }  // move focus only from a tab key\n\n  var dpi = this.pendingDialogStack[0];\n  var dialog = dpi.dialog;\n  var position = dialog.compareDocumentPosition(target);\n  if (position & Node.DOCUMENT_POSITION_PRECEDING) {\n    if (this.forwardTab_) {\n      // forward\n      dpi.focus_();\n    } else if (target !== document.documentElement) {\n      // backwards if we're not already focused on <html>\n      document.documentElement.focus();\n    }\n  }\n\n  return false;\n};\n\ndialogPolyfill.DialogManager.prototype.handleKey_ = function(event) {\n  this.forwardTab_ = undefined;\n  if (event.keyCode === 27) {\n    event.preventDefault();\n    event.stopPropagation();\n    var cancelEvent = new supportCustomEvent('cancel', {\n      bubbles: false,\n      cancelable: true\n    });\n    var dpi = this.pendingDialogStack[0];\n    if (dpi && safeDispatchEvent(dpi.dialog, cancelEvent)) {\n      dpi.dialog.close();\n    }\n  } else if (event.keyCode === 9) {\n    this.forwardTab_ = !event.shiftKey;\n  }\n};\n\n/**\n * Finds and downgrades any known modal dialogs that are no longer displayed. Dialogs that are\n * removed and immediately readded don't stay modal, they become normal.\n *\n * @param {!Array<!HTMLDialogElement>} removed that have definitely been removed\n */\ndialogPolyfill.DialogManager.prototype.checkDOM_ = function(removed) {\n  // This operates on a clone because it may cause it to change. Each change also calls\n  // updateStacking, which only actually needs to happen once. But who removes many modal dialogs\n  // at a time?!\n  var clone = this.pendingDialogStack.slice();\n  clone.forEach(function(dpi) {\n    if (removed.indexOf(dpi.dialog) !== -1) {\n      dpi.downgradeModal();\n    } else {\n      dpi.maybeHideModal();\n    }\n  });\n};\n\n/**\n * @param {!dialogPolyfillInfo} dpi\n * @return {boolean} whether the dialog was allowed\n */\ndialogPolyfill.DialogManager.prototype.pushDialog = function(dpi) {\n  var allowed = (this.zIndexHigh_ - this.zIndexLow_) / 2 - 1;\n  if (this.pendingDialogStack.length >= allowed) {\n    return false;\n  }\n  if (this.pendingDialogStack.unshift(dpi) === 1) {\n    this.blockDocument();\n  }\n  this.updateStacking();\n  return true;\n};\n\n/**\n * @param {!dialogPolyfillInfo} dpi\n */\ndialogPolyfill.DialogManager.prototype.removeDialog = function(dpi) {\n  var index = this.pendingDialogStack.indexOf(dpi);\n  if (index === -1) { return; }\n\n  this.pendingDialogStack.splice(index, 1);\n  if (this.pendingDialogStack.length === 0) {\n    this.unblockDocument();\n  }\n  this.updateStacking();\n};\n\ndialogPolyfill.dm = new dialogPolyfill.DialogManager();\ndialogPolyfill.formSubmitter = null;\ndialogPolyfill.imagemapUseValue = null;\n\n/**\n * Installs global handlers, such as click listers and native method overrides. These are needed\n * even if a no dialog is registered, as they deal with <form method=\"dialog\">.\n */\nif (window.HTMLDialogElement === undefined) {\n\n  /**\n   * If HTMLFormElement translates method=\"DIALOG\" into 'get', then replace the descriptor with\n   * one that returns the correct value.\n   */\n  var testForm = document.createElement('form');\n  testForm.setAttribute('method', 'dialog');\n  if (testForm.method !== 'dialog') {\n    var methodDescriptor = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, 'method');\n    if (methodDescriptor) {\n      // nb. Some older iOS and older PhantomJS fail to return the descriptor. Don't do anything\n      // and don't bother to update the element.\n      var realGet = methodDescriptor.get;\n      methodDescriptor.get = function() {\n        if (isFormMethodDialog(this)) {\n          return 'dialog';\n        }\n        return realGet.call(this);\n      };\n      var realSet = methodDescriptor.set;\n      /** @this {HTMLElement} */\n      methodDescriptor.set = function(v) {\n        if (typeof v === 'string' && v.toLowerCase() === 'dialog') {\n          return this.setAttribute('method', v);\n        }\n        return realSet.call(this, v);\n      };\n      Object.defineProperty(HTMLFormElement.prototype, 'method', methodDescriptor);\n    }\n  }\n\n  /**\n   * Global 'click' handler, to capture the <input type=\"submit\"> or <button> element which has\n   * submitted a <form method=\"dialog\">. Needed as Safari and others don't report this inside\n   * document.activeElement.\n   */\n  document.addEventListener('click', function(ev) {\n    dialogPolyfill.formSubmitter = null;\n    dialogPolyfill.imagemapUseValue = null;\n    if (ev.defaultPrevented) { return; }  // e.g. a submit which prevents default submission\n\n    var target = /** @type {Element} */ (ev.target);\n    if ('composedPath' in ev) {\n      var path = ev.composedPath();\n      target = path.shift() || target;\n    }\n    if (!target || !isFormMethodDialog(target.form)) { return; }\n\n    var valid = (target.type === 'submit' && ['button', 'input'].indexOf(target.localName) > -1);\n    if (!valid) {\n      if (!(target.localName === 'input' && target.type === 'image')) { return; }\n      // this is a <input type=\"image\">, which can submit forms\n      dialogPolyfill.imagemapUseValue = ev.offsetX + ',' + ev.offsetY;\n    }\n\n    var dialog = findNearestDialog(target);\n    if (!dialog) { return; }\n\n    dialogPolyfill.formSubmitter = target;\n\n  }, false);\n\n  /**\n   * Global 'submit' handler. This handles submits of `method=\"dialog\"` which are invalid, i.e.,\n   * outside a dialog. They get prevented.\n   */\n  document.addEventListener('submit', function(ev) {\n    var form = ev.target;\n    var dialog = findNearestDialog(form);\n    if (dialog) {\n      return;  // ignore, handle there\n    }\n\n    var submitter = findFormSubmitter(ev);\n    var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method');\n    if (formmethod === 'dialog') {\n      ev.preventDefault();\n    }\n  });\n\n  /**\n   * Replace the native HTMLFormElement.submit() method, as it won't fire the\n   * submit event and give us a chance to respond.\n   */\n  var nativeFormSubmit = HTMLFormElement.prototype.submit;\n  var replacementFormSubmit = function () {\n    if (!isFormMethodDialog(this)) {\n      return nativeFormSubmit.call(this);\n    }\n    var dialog = findNearestDialog(this);\n    dialog && dialog.close();\n  };\n  HTMLFormElement.prototype.submit = replacementFormSubmit;\n}\n\nexport default dialogPolyfill;\n",":host {\n  /**\n   * @prop --z-modal-content-padding: padding of the modal's content. The default is `16px` (`--space-unit * 2`).\n   */\n  --z-modal-content-padding: ;\n\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > dialog {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\n/* stylelint-disable selector-pseudo-class-no-unknown */\n:host > dialog:modal {\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n:host > dialog::backdrop {\n  display: none;\n}\n\n/* polyfill style */\n:host > dialog + .backdrop {\n  display: none;\n}\n\n:host > dialog:not([open]) {\n  display: none;\n}\n\n:host > dialog[open] {\n  display: block;\n}\n\n::slotted([slot=\"modalContent\"]) {\n  padding: var(--z-modal-content-padding, calc(var(--space-unit) * 2));\n}\n\n.modal-container {\n  z-index: 1010;\n  display: flex;\n  overflow: -moz-scrollbars-none;\n  width: 100%;\n  height: 100vh;\n  flex-direction: column;\n}\n\n.modal-container > .modal-content-scroll-outside {\n  overflow: auto;\n  background: var(--color-surface01);\n}\n\n.modal-container > header {\n  padding: calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2);\n  background: var(--color-background);\n}\n\n.modal-container > header button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  margin-left: auto;\n  background: transparent;\n  cursor: pointer;\n}\n\n.modal-container > header button:focus-visible {\n  border-radius: 50%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n.modal-container > header button::after {\n  position: absolute;\n  top: 6px;\n  right: 4px;\n  display: block;\n  width: 40px;\n  height: 40px;\n  background-color: transparent;\n  content: \"\";\n}\n\n.modal-container > header z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2.25);\n  --z-icon-height: calc(var(--space-unit) * 2.25);\n\n  display: flex;\n  fill: var(--color-primary01-icon);\n}\n\n.modal-container > header > div {\n  display: flex;\n  width: 100%;\n  align-items: baseline;\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n.modal-container > header h1,\n.modal-container > header .subtitle {\n  padding: 0;\n  margin: 0;\n  color: var(--color-default-text);\n  font-weight: var(--font-sb);\n}\n\n.modal-container > header h1 {\n  font-size: var(--font-size-5);\n  letter-spacing: 0;\n  line-height: 1.4;\n}\n\n.modal-container > header .subtitle {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  letter-spacing: 0;\n  line-height: 1.5;\n}\n\n.modal-container > header > div > h1 *:empty {\n  display: none;\n}\n\n.modal-container > header h1 + .subtitle {\n  margin-top: calc(var(--space-unit) * 0.5);\n}\n\n.modal-container-scroll-inside > .modal-content-scroll-inside {\n  overflow: hidden auto;\n  flex: 1 auto;\n  background: var(--color-surface01);\n}\n\n.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar,\n.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar-thumb,\n.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,\n.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n/* Firefox */\n@supports not selector(::-webkit-scrollbar-track) {\n  .modal-container-scroll-inside .modal-content-scroll-inside,\n  .modal-container-scroll-outside .modal-content-scroll-outside {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n}\n\n/* Tablet / Desktop */\n@media only screen and (min-width: 768px) {\n  .modal-background {\n    position: fixed;\n    top: 0;\n    left: 0;\n    overflow: hidden;\n    width: 100vw;\n    height: 100vh;\n    background-color: var(--gray900);\n    opacity: 0.7;\n  }\n\n  .modal-background.modal-background-scroll-outside {\n    position: sticky;\n  }\n\n  .modal-container-scroll-inside {\n    position: fixed;\n    top: calc(var(--space-unit) * 6);\n    left: 50%;\n    overflow: hidden;\n    width: auto;\n    min-width: calc(var(--space-unit) * 40);\n    height: auto;\n    min-height: calc(var(--space-unit) * 40);\n    max-height: calc(100vh - calc(var(--space-unit) * 6 * 2));\n    border-radius: var(--border-radius);\n    transform: translateX(-50%);\n  }\n\n  .modal-container-scroll-outside {\n    position: absolute;\n    top: calc(var(--space-unit) * 6);\n    left: 50%;\n    display: block;\n    overflow: initial;\n    width: auto;\n    min-width: calc(var(--space-unit) * 40);\n    height: auto;\n    min-height: calc(var(--space-unit) * 40);\n    max-height: calc(100vh - calc(var(--space-unit) * 6 * 2));\n    transform: translateX(-50%);\n  }\n\n  .modal-container > .modal-content-scroll-outside {\n    overflow: initial;\n  }\n\n  .modal-container-scroll-outside > header,\n  .modal-container-scroll-inside > header {\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n\n  .modal-container-scroll-outside::after {\n    display: block;\n    height: calc(var(--space-unit) * 6);\n    content: \" \";\n  }\n\n  .modal-dialog {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: auto;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n\n  .modal-content-scroll-outside {\n    border-bottom-left-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n  }\n\n  .modal-dialog::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n/* Desktop */\n@media (min-width: 1152px) {\n  .modal-container > header {\n    padding-top: calc(var(--space-unit) * 1.5);\n    padding-bottom: calc(var(--space-unit) * 1.5);\n  }\n\n  .modal-container > header h1 {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-sb);\n    letter-spacing: 0;\n    line-height: 1.333;\n  }\n\n  .modal-container > header .subtitle {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    letter-spacing: 0;\n    line-height: 1.5;\n  }\n\n  .modal-container > header h1 + .subtitle {\n    margin-top: 0;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Listen, Method, Prop, h} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../beans\";\nimport {FocusTrapController} from \"../../utils/focus-trap-controller\";\nimport {ReactiveControllerHost} from \"../../utils/reactive-controller\";\n\n/**\n * @slot modalCloseButton - slot for custom close button\n * @slot modalContent - slot for the content of the modal\n */\n@Component({\n  tag: \"z-modal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZModal extends ReactiveControllerHost {\n  /** unique id */\n  @Prop()\n  modalid: string;\n\n  /** title text (optional) */\n  @Prop()\n  modaltitle?: string;\n\n  /** subtitle (optional) */\n  @Prop()\n  modalsubtitle?: string;\n\n  /** aria-label for close button (optional) */\n  @Prop()\n  closeButtonLabel = \"chiudi modale\";\n\n  /** add role \"alertdialog\" to dialog (optional, default is false) */\n  @Prop()\n  alertdialog?: boolean = false;\n\n  /** if true, the modal is closable (optional, default is true) */\n  @Prop()\n  closable?: boolean = true;\n\n  /** if true, the modal can scroll inside, if false the viewport can scroll */\n  @Prop()\n  scrollInside?: boolean = true;\n\n  /** if true, the page scroll is locked when the modal is open (optional, default is true) */\n  @Prop()\n  lockPageScroll?: boolean = true;\n\n  private dialog: HTMLDialogElement;\n\n  private focusTrapController = new FocusTrapController(this, {\n    isActive: () => !!this.dialog?.open,\n  });\n\n  @Element() host: HTMLZModalElement;\n\n  /** emitted on close button click, returns modalid */\n  @Event()\n  modalClose: EventEmitter;\n\n  private emitModalClose(): void {\n    if (this.closable) {\n      this.modalClose.emit({modalid: this.modalid});\n      this.resetPageScroll();\n    }\n  }\n\n  /** emitted on modal header click, returns modalid */\n  @Event()\n  modalHeaderActive: EventEmitter;\n\n  private emitModalHeaderActive(): void {\n    this.modalHeaderActive.emit({modalid: this.modalid});\n  }\n\n  /** emitted on background click, returns modalid */\n  @Event()\n  modalBackgroundClick: EventEmitter;\n\n  private emitBackgroundClick(): void {\n    if (this.closable) {\n      this.modalBackgroundClick.emit({modalid: this.modalid});\n      this.resetPageScroll();\n    }\n  }\n\n  private resetPageScroll(): void {\n    if (this.lockPageScroll && document.body.style.overflowY === \"hidden\") {\n      document.body.style.overflowY = \"\";\n    }\n  }\n\n  componentDidLoad(): void {\n    if (typeof window.HTMLDialogElement !== \"function\") {\n      /* workaround to fix `registerDialog` in test environment:\n      stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n      which is used by `registerDialog` to recognize the element as dialog */\n      if (!this.dialog.localName) {\n        Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n      }\n      dialogPolyfill.registerDialog(this.dialog);\n      this.dialog.setAttribute(\"open\", \"true\");\n    } else {\n      this.open();\n    }\n    if (this.lockPageScroll) {\n      requestAnimationFrame(() => (document.body.style.overflowY = \"hidden\"));\n    }\n\n    super.componentDidLoad();\n  }\n\n  disconnectedCallback(): void {\n    this.resetPageScroll();\n    super.disconnectedCallback();\n  }\n\n  /** open modal */\n  @Method()\n  async open(): Promise<void> {\n    this.dialog?.showModal();\n    this.focusTrapController.sync();\n    if (this.lockPageScroll) {\n      document.body.style.overflowY = \"hidden\";\n    }\n  }\n\n  /** close modal */\n  @Method()\n  async close(): Promise<void> {\n    if (this.closable) {\n      this.dialog?.close();\n      this.focusTrapController.sync();\n      this.resetPageScroll();\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === KeyboardCode.ESC && !this.closable) {\n      e.preventDefault();\n\n      return;\n    }\n\n    this.focusTrapController.handleWrapTab(e);\n  }\n\n  private closeButtonSlot(): HTMLElement | void {\n    if (this.closable) {\n      return (\n        <slot name=\"modalCloseButton\">\n          <button\n            aria-label={this.closeButtonLabel}\n            onClick={() => this.close()}\n          >\n            <z-icon name=\"multiply-circle-filled\"></z-icon>\n          </button>\n        </slot>\n      );\n    }\n  }\n\n  private handleEscape(e: Event): void {\n    if (this.closable) {\n      return;\n    }\n    e.preventDefault();\n  }\n\n  render(): HTMLZModalElement {\n    return (\n      <dialog\n        class={{\n          \"modal-dialog\": !this.scrollInside,\n        }}\n        aria-labelledby=\"modal-title\"\n        aria-describedby=\"modal-content\"\n        role={this.alertdialog ? \"alertdialog\" : undefined}\n        ref={(el) => (this.dialog = el as HTMLDialogElement)}\n        onClose={() => this.emitModalClose()}\n        onCancel={(e) => this.handleEscape(e)}\n      >\n        <div\n          class={{\n            \"modal-container\": true,\n            \"modal-container-scroll-inside\": this.scrollInside,\n            \"modal-container-scroll-outside\": !this.scrollInside,\n          }}\n          id={this.modalid}\n        >\n          <header onClick={this.emitModalHeaderActive.bind(this)}>\n            <div>\n              {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n              {this.closeButtonSlot()}\n            </div>\n            {this.modalsubtitle && (\n              <div\n                class=\"subtitle\"\n                id=\"modal-subtitle\"\n              >\n                {this.modalsubtitle}\n              </div>\n            )}\n          </header>\n\n          <div\n            class={{\n              \"modal-content-scroll-inside\": this.scrollInside,\n              \"modal-content-scroll-outside\": !this.scrollInside,\n            }}\n            id=\"modal-content\"\n          >\n            <slot name=\"modalContent\"></slot>\n          </div>\n        </div>\n        <div\n          class={{\n            \"modal-background\": true,\n            \"modal-background-scroll-outside\": !this.scrollInside,\n          }}\n          data-action=\"modalBackground\"\n          data-modal={this.modalid}\n          onClick={() => {\n            this.emitBackgroundClick();\n            this.close();\n          }}\n        ></div>\n      </dialog>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/index21.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,createEvent as e,h as i,transformTag as o}from"@stencil/core/internal/client";import{g as n}from"./index2.js";import{R as a,F as r}from"./reactive-controller.js";import{d as s}from"./index3.js";var l=window.CustomEvent;if(!l||typeof l==="object"){l=function t(e,i){i=i||{};var o=document.createEvent("CustomEvent");o.initCustomEvent(e,!!i.bubbles,!!i.cancelable,i.detail||null);return o};l.prototype=window.Event.prototype}function d(t,e){var i="on"+e.type.toLowerCase();if(typeof t[i]==="function"){t[i](e)}return t.dispatchEvent(e)}function c(t){while(t&&t!==document.body){var e=window.getComputedStyle(t);var i=function(t,i){return!(e[t]===undefined||e[t]===i)};if(e.opacity<1||i("zIndex","auto")||i("transform","none")||i("mixBlendMode","normal")||i("filter","none")||i("perspective","none")||e["isolation"]==="isolate"||e.position==="fixed"||e.webkitOverflowScrolling==="touch"){return true}t=t.parentElement}return false}function h(t){while(t){if(t.localName==="dialog"){return t}if(t.parentElement){t=t.parentElement}else if(t.parentNode){t=t.parentNode.host}else{t=null}}return null}function u(t){while(t&&t.shadowRoot&&t.shadowRoot.activeElement){t=t.shadowRoot.activeElement}if(t&&t.blur&&t!==document.body){t.blur()}}function f(t,e){for(var i=0;i<t.length;++i){if(t[i]===e){return true}}return false}function m(t){if(!t||!t.hasAttribute("method")){return false}return t.getAttribute("method").toLowerCase()==="dialog"}function v(t){var e=["button","input","keygen","select","textarea"];var i=e.map((function(t){return t+":not([disabled])"}));i.push('[tabindex]:not([disabled]):not([tabindex=""])');var o=t.querySelector(i.join(", "));if(!o&&"attachShadow"in Element.prototype){var n=t.querySelectorAll("*");for(var a=0;a<n.length;a++){if(n[a].tagName&&n[a].shadowRoot){o=v(n[a].shadowRoot);if(o){break}}}}return o}function b(t){return t.isConnected||document.body.contains(t)}function p(t){if(t.submitter){return t.submitter}var e=t.target;if(!(e instanceof HTMLFormElement)){return null}var i=k.formSubmitter;if(!i){var o=t.target;var n="getRootNode"in o&&o.getRootNode()||document;i=n.activeElement}if(!i||i.form!==e){return null}return i}function g(t){if(t.defaultPrevented){return}var e=t.target;var i=k.imagemapUseValue;var o=p(t);if(i===null&&o){i=o.value}var n=h(e);if(!n){return}var a=o&&o.getAttribute("formmethod")||e.getAttribute("method");if(a!=="dialog"){return}t.preventDefault();if(i!=null){n.close(i)}else{n.close()}}function w(t){this.dialog_=t;this.replacedStyleTop_=false;this.openAsModal_=false;if(!t.hasAttribute("role")){t.setAttribute("role","dialog")}t.show=this.show.bind(this);t.showModal=this.showModal.bind(this);t.close=this.close.bind(this);t.addEventListener("submit",g,false);if(!("returnValue"in t)){t.returnValue=""}if("MutationObserver"in window){var e=new MutationObserver(this.maybeHideModal.bind(this));e.observe(t,{attributes:true,attributeFilter:["open"]})}else{var i=false;var o=function(){i?this.downgradeModal():this.maybeHideModal();i=false}.bind(this);var n;var a=function(e){if(e.target!==t){return}var a="DOMNodeRemoved";i|=e.type.substr(0,a.length)===a;window.clearTimeout(n);n=window.setTimeout(o,0)};["DOMAttrModified","DOMNodeRemoved","DOMNodeRemovedFromDocument"].forEach((function(e){t.addEventListener(e,a)}))}Object.defineProperty(t,"open",{set:this.setOpen.bind(this),get:t.hasAttribute.bind(t,"open")});this.backdrop_=document.createElement("div");this.backdrop_.className="backdrop";this.backdrop_.addEventListener("mouseup",this.backdropMouseEvent_.bind(this));this.backdrop_.addEventListener("mousedown",this.backdropMouseEvent_.bind(this));this.backdrop_.addEventListener("click",this.backdropMouseEvent_.bind(this))}w.prototype={get dialog(){return this.dialog_},maybeHideModal:function(){if(this.dialog_.hasAttribute("open")&&b(this.dialog_)){return}this.downgradeModal()},downgradeModal:function(){if(!this.openAsModal_){return}this.openAsModal_=false;this.dialog_.style.zIndex="";if(this.replacedStyleTop_){this.dialog_.style.top="";this.replacedStyleTop_=false}this.backdrop_.parentNode&&this.backdrop_.parentNode.removeChild(this.backdrop_);k.dm.removeDialog(this)},setOpen:function(t){if(t){this.dialog_.hasAttribute("open")||this.dialog_.setAttribute("open","")}else{this.dialog_.removeAttribute("open");this.maybeHideModal()}},backdropMouseEvent_:function(t){if(!this.dialog_.hasAttribute("tabindex")){var e=document.createElement("div");this.dialog_.insertBefore(e,this.dialog_.firstChild);e.tabIndex=-1;e.focus();this.dialog_.removeChild(e)}else{this.dialog_.focus()}var i=document.createEvent("MouseEvents");i.initMouseEvent(t.type,t.bubbles,t.cancelable,window,t.detail,t.screenX,t.screenY,t.clientX,t.clientY,t.ctrlKey,t.altKey,t.shiftKey,t.metaKey,t.button,t.relatedTarget);this.dialog_.dispatchEvent(i);t.stopPropagation()},focus_:function(){var t=this.dialog_.querySelector("[autofocus]:not([disabled])");if(!t&&this.dialog_.tabIndex>=0){t=this.dialog_}if(!t){t=v(this.dialog_)}u(document.activeElement);t&&t.focus()},updateZIndex:function(t,e){if(t<e){throw new Error("dialogZ should never be < backdropZ")}this.dialog_.style.zIndex=t;this.backdrop_.style.zIndex=e},show:function(){if(!this.dialog_.open){this.setOpen(true);this.focus_()}},showModal:function(){if(this.dialog_.hasAttribute("open")){throw new Error("Failed to execute 'showModal' on dialog: The element is already open, and therefore cannot be opened modally.")}if(!b(this.dialog_)){throw new Error("Failed to execute 'showModal' on dialog: The element is not in a Document.")}if(!k.dm.pushDialog(this)){throw new Error("Failed to execute 'showModal' on dialog: There are too many open modal dialogs.")}if(c(this.dialog_.parentElement)){console.warn("A dialog is being shown inside a stacking context. "+"This may cause it to be unusable. For more information, see this link: "+"https://github.com/GoogleChrome/dialog-polyfill/#stacking-context")}this.setOpen(true);this.openAsModal_=true;if(k.needsCentering(this.dialog_)){k.reposition(this.dialog_);this.replacedStyleTop_=true}else{this.replacedStyleTop_=false}this.dialog_.parentNode.insertBefore(this.backdrop_,this.dialog_.nextSibling);this.focus_()},close:function(t){if(!this.dialog_.hasAttribute("open")){throw new Error("Failed to execute 'close' on dialog: The element does not have an 'open' attribute, and therefore cannot be closed.")}this.setOpen(false);if(t!==undefined){this.dialog_.returnValue=t}var e=new l("close",{bubbles:false,cancelable:false});d(this.dialog_,e)}};var k={};k.reposition=function(t){var e=document.body.scrollTop||document.documentElement.scrollTop;var i=e+(window.innerHeight-t.offsetHeight)/2;t.style.top=Math.max(e,i)+"px"};k.isInlinePositionSetByStylesheet=function(t){for(var e=0;e<document.styleSheets.length;++e){var i=document.styleSheets[e];var o=null;try{o=i.cssRules}catch(t){}if(!o){continue}for(var n=0;n<o.length;++n){var a=o[n];var r=null;try{r=document.querySelectorAll(a.selectorText)}catch(t){}if(!r||!f(r,t)){continue}var s=a.style.getPropertyValue("top");var l=a.style.getPropertyValue("bottom");if(s&&s!=="auto"||l&&l!=="auto"){return true}}}return false};k.needsCentering=function(t){var e=window.getComputedStyle(t);if(e.position!=="absolute"){return false}if(t.style.top!=="auto"&&t.style.top!==""||t.style.bottom!=="auto"&&t.style.bottom!==""){return false}return!k.isInlinePositionSetByStylesheet(t)};k.forceRegisterDialog=function(t){if(window.HTMLDialogElement||t.showModal){console.warn("This browser already supports <dialog>, the polyfill "+"may not work correctly",t)}if(t.localName!=="dialog"){throw new Error("Failed to register dialog: The element is not a dialog.")}new w(t)};k.registerDialog=function(t){if(!t.showModal){k.forceRegisterDialog(t)}};k.DialogManager=function(){this.pendingDialogStack=[];var t=this.checkDOM_.bind(this);this.overlay=document.createElement("div");this.overlay.className="_dialog_overlay";this.overlay.addEventListener("click",function(e){this.forwardTab_=undefined;e.stopPropagation();t([])}.bind(this));this.handleKey_=this.handleKey_.bind(this);this.handleFocus_=this.handleFocus_.bind(this);this.zIndexLow_=1e5;this.zIndexHigh_=1e5+150;this.forwardTab_=undefined;if("MutationObserver"in window){this.mo_=new MutationObserver((function(e){var i=[];e.forEach((function(t){for(var e=0,o;o=t.removedNodes[e];++e){if(!(o instanceof Element)){continue}else if(o.localName==="dialog"){i.push(o)}i=i.concat(o.querySelectorAll("dialog"))}}));i.length&&t(i)}))}};k.DialogManager.prototype.blockDocument=function(){document.documentElement.addEventListener("focus",this.handleFocus_,true);document.addEventListener("keydown",this.handleKey_);this.mo_&&this.mo_.observe(document,{childList:true,subtree:true})};k.DialogManager.prototype.unblockDocument=function(){document.documentElement.removeEventListener("focus",this.handleFocus_,true);document.removeEventListener("keydown",this.handleKey_);this.mo_&&this.mo_.disconnect()};k.DialogManager.prototype.updateStacking=function(){var t=this.zIndexHigh_;for(var e=0,i;i=this.pendingDialogStack[e];++e){i.updateZIndex(--t,--t);if(e===0){this.overlay.style.zIndex=--t}}var o=this.pendingDialogStack[0];if(o){var n=o.dialog.parentNode||document.body;n.appendChild(this.overlay)}else if(this.overlay.parentNode){this.overlay.parentNode.removeChild(this.overlay)}};k.DialogManager.prototype.containedByTopDialog_=function(t){while(t=h(t)){for(var e=0,i;i=this.pendingDialogStack[e];++e){if(i.dialog===t){return e===0}}t=t.parentElement}return false};k.DialogManager.prototype.handleFocus_=function(t){var e=t.composedPath?t.composedPath()[0]:t.target;if(this.containedByTopDialog_(e)){return}if(document.activeElement===document.documentElement){return}t.preventDefault();t.stopPropagation();u(e);if(this.forwardTab_===undefined){return}var i=this.pendingDialogStack[0];var o=i.dialog;var n=o.compareDocumentPosition(e);if(n&Node.DOCUMENT_POSITION_PRECEDING){if(this.forwardTab_){i.focus_()}else if(e!==document.documentElement){document.documentElement.focus()}}return false};k.DialogManager.prototype.handleKey_=function(t){this.forwardTab_=undefined;if(t.keyCode===27){t.preventDefault();t.stopPropagation();var e=new l("cancel",{bubbles:false,cancelable:true});var i=this.pendingDialogStack[0];if(i&&d(i.dialog,e)){i.dialog.close()}}else if(t.keyCode===9){this.forwardTab_=!t.shiftKey}};k.DialogManager.prototype.checkDOM_=function(t){var e=this.pendingDialogStack.slice();e.forEach((function(e){if(t.indexOf(e.dialog)!==-1){e.downgradeModal()}else{e.maybeHideModal()}}))};k.DialogManager.prototype.pushDialog=function(t){var e=(this.zIndexHigh_-this.zIndexLow_)/2-1;if(this.pendingDialogStack.length>=e){return false}if(this.pendingDialogStack.unshift(t)===1){this.blockDocument()}this.updateStacking();return true};k.DialogManager.prototype.removeDialog=function(t){var e=this.pendingDialogStack.indexOf(t);if(e===-1){return}this.pendingDialogStack.splice(e,1);if(this.pendingDialogStack.length===0){this.unblockDocument()}this.updateStacking()};k.dm=new k.DialogManager;k.formSubmitter=null;k.imagemapUseValue=null;if(window.HTMLDialogElement===undefined){var y=document.createElement("form");y.setAttribute("method","dialog");if(y.method!=="dialog"){var x=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,"method");if(x){var M=x.get;x.get=function(){if(m(this)){return"dialog"}return M.call(this)};var z=x.set;x.set=function(t){if(typeof t==="string"&&t.toLowerCase()==="dialog"){return this.setAttribute("method",t)}return z.call(this,t)};Object.defineProperty(HTMLFormElement.prototype,"method",x)}}document.addEventListener("click",(function(t){k.formSubmitter=null;k.imagemapUseValue=null;if(t.defaultPrevented){return}var e=t.target;if("composedPath"in t){var i=t.composedPath();e=i.shift()||e}if(!e||!m(e.form)){return}var o=e.type==="submit"&&["button","input"].indexOf(e.localName)>-1;if(!o){if(!(e.localName==="input"&&e.type==="image")){return}k.imagemapUseValue=t.offsetX+","+t.offsetY}var n=h(e);if(!n){return}k.formSubmitter=e}),false);document.addEventListener("submit",(function(t){var e=t.target;var i=h(e);if(i){return}var o=p(t);var n=o&&o.getAttribute("formmethod")||e.getAttribute("method");if(n==="dialog"){t.preventDefault()}}));var E=HTMLFormElement.prototype.submit;var C=function(){if(!m(this)){return E.call(this)}var t=h(this);t&&t.close()};HTMLFormElement.prototype.submit=C}const F=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}::slotted([slot="modalContent"]){padding:var(--z-modal-content-padding, calc(var(--space-unit) * 2))}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2);background:var(--color-background)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header button:focus-visible{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}.modal-container>header button::after{position:absolute;top:6px;right:4px;display:block;width:40px;height:40px;background-color:transparent;content:""}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.25);--z-icon-height:calc(var(--space-unit) * 2.25);display:flex;fill:var(--color-primary01-icon)}.modal-container>header>div{display:flex;width:100%;align-items:baseline;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header .subtitle{padding:0;margin:0;color:var(--color-default-text);font-weight:var(--font-sb)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header .subtitle{font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+.subtitle{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:" "}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}}@media (min-width: 1152px){.modal-container>header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:calc(var(--space-unit) * 1.5)}.modal-container>header h1{font-size:var(--font-size-6);font-weight:var(--font-sb);letter-spacing:0;line-height:1.333}.modal-container>header .subtitle{font-size:var(--font-size-4);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}.modal-container>header h1+.subtitle{margin-top:0}}`;const O=t(class t extends a{constructor(t){super(false);if(t!==false){this.__registerHost()}this.__attachShadow();this.modalClose=e(this,"modalClose",7);this.modalHeaderActive=e(this,"modalHeaderActive",7);this.modalBackgroundClick=e(this,"modalBackgroundClick",7);this.closeButtonLabel="chiudi modale";this.alertdialog=false;this.closable=true;this.scrollInside=true;this.lockPageScroll=true;this.focusTrapController=new r(this,{isActive:()=>{var t;return!!((t=this.dialog)===null||t===void 0?void 0:t.open)}})}emitModalClose(){if(this.closable){this.modalClose.emit({modalid:this.modalid});this.resetPageScroll()}}emitModalHeaderActive(){this.modalHeaderActive.emit({modalid:this.modalid})}emitBackgroundClick(){if(this.closable){this.modalBackgroundClick.emit({modalid:this.modalid});this.resetPageScroll()}}resetPageScroll(){if(this.lockPageScroll&&document.body.style.overflowY==="hidden"){document.body.style.overflowY=""}}componentDidLoad(){if(typeof window.HTMLDialogElement!=="function"){if(!this.dialog.localName){Object.defineProperty(this.dialog,"localName",{value:"dialog"})}k.registerDialog(this.dialog);this.dialog.setAttribute("open","true")}else{this.open()}if(this.lockPageScroll){requestAnimationFrame((()=>document.body.style.overflowY="hidden"))}super.componentDidLoad()}disconnectedCallback(){this.resetPageScroll();super.disconnectedCallback()}async open(){var t;(t=this.dialog)===null||t===void 0?void 0:t.showModal();this.focusTrapController.sync();if(this.lockPageScroll){document.body.style.overflowY="hidden"}}async close(){var t;if(this.closable){(t=this.dialog)===null||t===void 0?void 0:t.close();this.focusTrapController.sync();this.resetPageScroll()}}handleKeyDown(t){if(t.code===n.ESC&&!this.closable){t.preventDefault();return}this.focusTrapController.handleWrapTab(t)}closeButtonSlot(){if(this.closable){return i("slot",{name:"modalCloseButton"},i("button",{"aria-label":this.closeButtonLabel,onClick:()=>this.close()},i("z-icon",{name:"multiply-circle-filled"})))}}handleEscape(t){if(this.closable){return}t.preventDefault()}render(){return i("dialog",{key:"081900076d57b4b96592ec9491b7c46dc705f3bf",class:{"modal-dialog":!this.scrollInside},"aria-labelledby":"modal-title","aria-describedby":"modal-content",role:this.alertdialog?"alertdialog":undefined,ref:t=>this.dialog=t,onClose:()=>this.emitModalClose(),onCancel:t=>this.handleEscape(t)},i("div",{key:"1e13132fada1a6446f21820e0759fc79728e48d3",class:{"modal-container":true,"modal-container-scroll-inside":this.scrollInside,"modal-container-scroll-outside":!this.scrollInside},id:this.modalid},i("header",{key:"3e35e0b3d568b2ebab9bb95cb3493fcb1e1d5b81",onClick:this.emitModalHeaderActive.bind(this)},i("div",{key:"4da4deaab0437652909b9c8fae45744b9bbd8bb6"},this.modaltitle&&i("h1",{key:"dd392fffb016cd7300544ac0be8225799ec831f1",id:"modal-title"},this.modaltitle),this.closeButtonSlot()),this.modalsubtitle&&i("div",{key:"a3aaffbfbce5f6c6daccee1cd34effe9eeaeb6b6",class:"subtitle",id:"modal-subtitle"},this.modalsubtitle)),i("div",{key:"ab70680024e1d43e5b4fdb7348eefeccefa8efdb",class:{"modal-content-scroll-inside":this.scrollInside,"modal-content-scroll-outside":!this.scrollInside},id:"modal-content"},i("slot",{key:"1170bba2f95b5936138443a61624ed4906ae57de",name:"modalContent"}))),i("div",{key:"df1c02457d80a75ffcc46cc670b4220df75c4150",class:{"modal-background":true,"modal-background-scroll-outside":!this.scrollInside},"data-action":"modalBackground","data-modal":this.modalid,onClick:()=>{this.emitBackgroundClick();this.close()}}))}get host(){return this}static get style(){return F()}},[769,"z-modal",{modalid:[1],modaltitle:[1],modalsubtitle:[1],closeButtonLabel:[1,"close-button-label"],alertdialog:[4],closable:[4],scrollInside:[4,"scroll-inside"],lockPageScroll:[4,"lock-page-scroll"],open:[64],close:[64]},[[0,"keydown","handleKeyDown"]]]);function T(){if(typeof customElements==="undefined"){return}const t=["z-modal","z-icon"];t.forEach((t=>{switch(t){case"z-modal":if(!customElements.get(o(t))){customElements.define(o(t),O)}break;case"z-icon":if(!customElements.get(o(t))){s()}break}}))}export{O as Z,T as d};
+import{proxyCustomElement as e,HTMLElement as o,createEvent as t,h as r,transformTag as s}from"@stencil/core/internal/client";import{P as i}from"./index2.js";import{d as p}from"./index16.js";const a=()=>`:host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));--z-tooltip-padding:var(--space-unit)}z-popover{--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-padding:var(--z-tooltip-padding);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}`;const n=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.openChange=t(this,"openChange",7);this.position=i.AUTO;this.dark=false;this.open=false;this.closable=true}onPopoverOpenChange(){this.open=this.popoverEl.open}render(){return r("z-popover",{key:"fc20f5c5d66fb5b9dabd41dfb986b28fbedfad9d",ref:e=>this.popoverEl=e,bindTo:this.bindTo,open:this.open,position:this.position,closable:this.closable,center:true,showArrow:true,onOpenChange:e=>this.openChange.emit(e.detail)},r("slot",{key:"5c5a2e8be7183824b50fa87d18b6f26e4bb2c0f7"}))}static get style(){return a()}},[257,"z-tooltip",{position:[513],dark:[516],open:[1540],bindTo:[1,"bind-to"],closable:[4]},[[0,"openChange","onPopoverOpenChange"]]]);function h(){if(typeof customElements==="undefined"){return}const e=["z-tooltip","z-popover"];e.forEach((e=>{switch(e){case"z-tooltip":if(!customElements.get(s(e))){customElements.define(s(e),n)}break;case"z-popover":if(!customElements.get(s(e))){p()}break}}))}export{n as Z,h as d};
 //# sourceMappingURL=index21.js.map