igniteui-webcomponents 7.3.1 → 7.4.0

package/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  inline,\n  limitShift,\n  type Middleware,\n  type MiddlewareData,\n  offset,\n  type Placement,\n  shift,\n  size,\n} from '@floating-ui/dom';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport {\n  addSlotController,\n  type SlotChangeCallbackParameters,\n  setSlots,\n} from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport {\n  getElementByIdFromRoot,\n  hasStickyAncestor,\n  isPopoverOpen,\n  roundByDPR,\n  setStyles,\n} from '#internals/utils/dom.js';\nimport { isString } from '#internals/utils/types.js';\nimport { styles } from './themes/light/popover.base.css.js';\n\n/**\n * Describes the preferred placement of a toggle component.\n */\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\nconst OPPOSITE_SIDE = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n} as const;\n\ntype PopoverSide = keyof typeof OPPOSITE_SIDE;\n\nconst SIDES = Object.keys(OPPOSITE_SIDE) as PopoverSide[];\n\n/* blazorSuppress */\n/**\n * @element igc-popover\n *\n * @slot - Content of the popover.\n * @slot anchor - The element the popover will be anchored to.\n *\n * @csspart container - The container wrapping the slotted content in the popover.\n */\nexport default class IgcPopoverComponent extends LitElement {\n  public static readonly tagName = 'igc-popover';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcPopoverComponent);\n  }\n\n  //#region Internal properties and state\n\n  private _dispose?: ReturnType<typeof autoUpdate>;\n  private _target?: Element;\n  private _middleware?: Middleware[];\n  private _positionId = 0;\n\n  /**\n   * The positioning strategy resolved when the popover is opened. The `fixed`\n   * strategy is used when the anchor has a `position: sticky` ancestor, otherwise\n   * the default `absolute` strategy is used. Cached here to avoid repeated DOM\n   * traversals and style reflows on every scroll/resize reposition.\n   *\n   * Also, time to migrate to CSS Anchor positioning!!!\n   */\n  private _strategy: 'absolute' | 'fixed' = 'absolute';\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('anchor'),\n    onChange: this._handleSlotChange,\n  });\n\n  @query('#container', true)\n  private readonly _container!: HTMLElement;\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Pass an IDREF or an DOM element reference to use as the\n   * anchor target for the floating element.\n   */\n  @property()\n  public anchor?: Element | string;\n\n  /**\n   * Element to render as an \"arrow\" element for the current popover.\n   */\n  @property({ attribute: false })\n  public arrow: HTMLElement | null = null;\n\n  /** Additional offset to apply to the arrow element if enabled. */\n  @property({ type: Number, attribute: 'arrow-offset' })\n  public arrowOffset = 0;\n\n  /**\n   * Improves positioning for inline reference elements that span over multiple lines.\n   * Useful for tooltips or similar components.\n   */\n  @property({ type: Boolean, reflect: true })\n  public inline = false;\n\n  /**\n   * When enabled this changes the placement of the floating element in order to keep it\n   * in view along the main axis.\n   */\n  @property({ type: Boolean, reflect: true })\n  public flip = false;\n\n  /**\n   * Placement modifier which translates the floating element along the main axis.\n   */\n  @property({ type: Number })\n  public offset = 0;\n\n  /**\n   * The visibility state of the popover component.\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Where to place the floating element relative to the parent anchor element.\n   */\n  @property()\n  public placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * When enabled the floating element will match the width of its parent anchor element.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'same-width' })\n  public sameWidth = false;\n\n  /**\n   * When enabled this tries to shift the floating element along the main axis\n   * keeping it in view, preventing overflow while maintaining the desired placement.\n   */\n  @property({ type: Boolean, reflect: true })\n  public shift = false;\n\n  /**\n   * Virtual padding for the resolved overflow detection offsets in pixels.\n   */\n  @property({ type: Number, attribute: 'shift-padding' })\n  public shiftPadding = 0;\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  protected override update(properties: PropertyValues<this>): void {\n    if (this.hasUpdated) {\n      this._middleware = undefined;\n\n      if (properties.has('sameWidth') && !this.sameWidth) {\n        setStyles(this._container, { width: '' });\n      }\n\n      if (properties.has('open') || properties.has('anchor')) {\n        this._setOpenState(this.open);\n      } else if (this.open) {\n        this._updatePosition();\n      }\n    }\n\n    super.update(properties);\n  }\n\n  protected override firstUpdated(): void {\n    this._setOpenState(this.open);\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasUpdated) {\n      this._setOpenState(this.open);\n    }\n  }\n\n  /** @internal */\n  public override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._setOpenState(false);\n  }\n\n  //#endregion\n\n  private _handleSlotChange({\n    isDefault,\n  }: SlotChangeCallbackParameters<unknown>): void {\n    if (isDefault || this.anchor) {\n      return;\n    }\n\n    this._setOpenState(this.open);\n  }\n\n  private _handleToggle(): void {\n    if (!isPopoverOpen(this._container)) {\n      this._clearDispose();\n    }\n  }\n\n  //#region Internal open state API\n\n  /**\n   * An unresolved IDREF keeps the current target, so that an anchor rendered\n   * after this popover is picked up the next time it opens.\n   */\n  private _resolveTarget(): Element | undefined {\n    if (isString(this.anchor)) {\n      return getElementByIdFromRoot(this, this.anchor) ?? this._target;\n    }\n\n    return (\n      this.anchor ??\n      firstOf(this._slots.getAssignedElements('anchor', { flatten: true }))\n    );\n  }\n\n  private _setOpenState(state: boolean): void {\n    this._clearDispose();\n\n    if (state) {\n      this._target = this._resolveTarget();\n\n      if (this._target) {\n        this._strategy = hasStickyAncestor(this._target) ? 'fixed' : 'absolute';\n        this._dispose = autoUpdate(\n          this._target,\n          this._container,\n          this._updatePosition.bind(this)\n        );\n      }\n    }\n\n    this._setPopoverState(state);\n  }\n\n  private _setPopoverState(state: boolean): void {\n    const container = this._container;\n\n    if (!container) {\n      return;\n    }\n\n    const shouldOpen = state && this._target != null;\n\n    if (shouldOpen !== isPopoverOpen(container)) {\n      shouldOpen ? container.showPopover() : container.hidePopover();\n    }\n  }\n\n  private _clearDispose(): void {\n    this._dispose?.();\n    this._dispose = undefined;\n  }\n\n  //#endregion\n\n  //#region Internal position API\n\n  private get _placement(): PopoverPlacement {\n    return this.placement ?? 'bottom-start';\n  }\n\n  private _createMiddleware(): Middleware[] {\n    const shiftMiddleware = this.shift\n      ? shift({ padding: this.shiftPadding, limiter: limitShift() })\n      : null;\n    const flipMiddleware = this.flip ? flip() : null;\n\n    // Aligned placements flip before shifting, base placements shift first.\n    // See https://floating-ui.com/docs/flip\n    const positioners = this._placement.includes('-')\n      ? [flipMiddleware, shiftMiddleware]\n      : [shiftMiddleware, flipMiddleware];\n\n    const chain = [\n      this.offset !== 0 ? offset(this.offset) : null,\n      this.inline ? inline() : null,\n      ...positioners,\n      this.sameWidth\n        ? size({\n            apply: ({ rects }) =>\n              setStyles(this._container, {\n                width: `${rects.reference.width}px`,\n              }),\n          })\n        : null,\n      this.arrow ? arrow({ element: this.arrow }) : null,\n    ];\n\n    return chain.filter((entry): entry is Middleware => entry !== null);\n  }\n\n  private async _updatePosition(): Promise<void> {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this._target?.isConnected) {\n      this._target = undefined;\n      this._clearDispose();\n      this._setPopoverState(false);\n      return;\n    }\n\n    const positionId = ++this._positionId;\n    const strategy = this._strategy;\n\n    const { x, y, middlewareData, placement } = await computePosition(\n      this._target,\n      this._container,\n      {\n        placement: this._placement,\n        middleware: (this._middleware ??= this._createMiddleware()),\n        strategy,\n      }\n    );\n\n    if (positionId !== this._positionId || !this.open) {\n      return;\n    }\n\n    setStyles(this._container, {\n      position: strategy,\n      left: '0',\n      top: '0',\n      transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,\n    });\n\n    this._updateArrowPosition(placement, middlewareData);\n  }\n\n  private _updateArrowPosition(\n    placement: Placement,\n    data: MiddlewareData\n  ): void {\n    const element = this.arrow;\n\n    if (!(data.arrow && element)) {\n      return;\n    }\n\n    const { x, y } = data.arrow;\n    const offset = this.arrowOffset;\n    const [side] = placement.split('-') as [PopoverSide];\n    const staticSide = OPPOSITE_SIDE[side];\n\n    if (!element.part.contains(side)) {\n      element.part.remove(...SIDES);\n      element.part.add(side);\n    }\n\n    // Measured after the part switch, since it is what gives the arrow its size.\n    const inset =\n      staticSide === 'top' || staticSide === 'bottom'\n        ? element.offsetHeight\n        : element.offsetWidth;\n\n    // Every side is reset, otherwise the inset of the previous placement is left\n    // behind and over-constrains the arrow.\n    const styles: Partial<CSSStyleDeclaration> = {\n      top: y != null ? `${roundByDPR(y + offset)}px` : '',\n      right: '',\n      bottom: '',\n      left: x != null ? `${roundByDPR(x + offset)}px` : '',\n    };\n\n    styles[staticSide] = `${-inset}px`;\n\n    setStyles(element, styles);\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`\n      <slot name=\"anchor\"></slot>\n      <div\n        id=\"container\"\n        part=\"container\"\n        popover=\"manual\"\n        @toggle=${this._handleToggle}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-popover': IgcPopoverComponent;\n  }\n}\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport {\n  addSlotController,\n  type SlotChangeCallbackParameters,\n  setSlots,\n} from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport { getElementByIdFromRoot, isPopoverOpen } from '#internals/utils/dom.js';\nimport { toggleEventListener } from '#internals/utils/events.js';\nimport { isString } from '#internals/utils/types.js';\nimport type { PopoverScrollStrategy } from '../types.js';\nimport { FloatingPositionStrategy } from './position/floating.js';\nimport {\n  NativePositionStrategy,\n  shouldUseNativeAnchorPositioning,\n} from './position/native.js';\nimport type { PopoverPositionStrategy } from './position/strategy.js';\nimport {\n  type PopoverPositionStrategyMode,\n  resolvePlacement,\n  SCROLL_LISTENER_OPTIONS,\n} from './position/types.js';\nimport { styles } from './themes/light/popover.base.css.js';\n\n/**\n * Describes the preferred placement of a toggle component.\n */\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n/* blazorSuppress */\n/**\n * @element igc-popover\n *\n * @slot - Content of the popover.\n * @slot anchor - The element the popover will be anchored to.\n *\n * @fires igcPopoverScrollClose - The popover emits this event on each document scroll,\n * but only while it shows against its anchor and the scroll strategy is `close`.\n * The popover does not control its own `open` state, so the component that owns that state must close it.\n * The event does not bubble, so add the listener on the popover element.\n *\n * @csspart container - The container wrapping the slotted content in the popover.\n */\nexport default class IgcPopoverComponent extends LitElement {\n  public static readonly tagName = 'igc-popover';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcPopoverComponent);\n  }\n\n  //#region Internal properties and state\n\n  private _target?: Element;\n  private _positionStrategy?: PopoverPositionStrategy;\n  private _positionMode?: PopoverPositionStrategyMode;\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('anchor'),\n    onChange: this._handleSlotChange,\n  });\n\n  @query('#container', true)\n  private readonly _container!: HTMLElement;\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * Pass an IDREF or a DOM element reference to use as the\n   * anchor target for the floating element.\n   */\n  @property()\n  public anchor?: Element | string;\n\n  /**\n   * Element to render as an \"arrow\" element for the current popover.\n   */\n  @property({ attribute: false })\n  public arrow: HTMLElement | null = null;\n\n  /** Additional offset to apply to the arrow element if enabled. */\n  @property({ type: Number, attribute: 'arrow-offset' })\n  public arrowOffset = 0;\n\n  /**\n   * When enabled this changes the placement of the floating element in order to keep it\n   * in view along the main axis.\n   */\n  @property({ type: Boolean, reflect: true })\n  public flip = false;\n\n  /**\n   * Placement modifier which translates the floating element along the main axis.\n   */\n  @property({ type: Number })\n  public offset = 0;\n\n  /**\n   * The visibility state of the popover component.\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Where to place the floating element relative to the parent anchor element.\n   */\n  @property()\n  public placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * When enabled the floating element will match the width of its parent anchor element.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'same-width' })\n  public sameWidth = false;\n\n  /**\n   * Sets the behavior of the popover when an ancestor scroll container\n   * scrolls and the popover is open.\n   *\n   * If the value is `hide`, the popover hides while the anchor is fully out\n   * of view. The popover shows again when the anchor returns to view. `hide`\n   * is the default value.\n   *\n   * If the value is `scroll`, the popover stays visible. The popover also\n   * stays anchored while the anchor is out of view.\n   *\n   * If the value is `close`, the popover behaves as for `hide`. The popover\n   * also emits `igcPopoverScrollClose` for each scroll. The component that\n   * owns the `open` state must then close the popover.\n   */\n  @property({ attribute: 'scroll-strategy' })\n  public scrollStrategy: PopoverScrollStrategy = 'hide';\n\n  //#endregion\n\n  //#region Life-cycle hooks\n\n  protected override update(properties: PropertyValues<this>): void {\n    if (this.hasUpdated) {\n      if (properties.has('open') || properties.has('anchor')) {\n        this._setOpenState(this.open);\n      } else if (this.open) {\n        this._positionStrategy?.update();\n      }\n\n      if (properties.has('scrollStrategy')) {\n        this._syncScrollStrategy();\n      }\n    }\n\n    super.update(properties);\n  }\n\n  protected override firstUpdated(): void {\n    this._setOpenState(this.open);\n  }\n\n  /**\n   * Waits also for the position strategy. The fallback strategy positions\n   * asynchronously, so the container has no position when Lit ends the update.\n   */\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const complete = await super.getUpdateComplete();\n    await this._positionStrategy?.whenPositioned();\n\n    return complete;\n  }\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasUpdated) {\n      this._setOpenState(this.open);\n    }\n  }\n\n  /** @internal */\n  public override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._setOpenState(false);\n  }\n\n  //#endregion\n\n  private _handleSlotChange({\n    isDefault,\n  }: SlotChangeCallbackParameters<unknown>): void {\n    if (isDefault || this.anchor) {\n      return;\n    }\n\n    this._setOpenState(this.open);\n  }\n\n  //#region Internal open state API\n\n  private _getPositionStrategy(target: Element): PopoverPositionStrategy {\n    const mode = shouldUseNativeAnchorPositioning(target)\n      ? 'native'\n      : 'floating';\n\n    if (this._positionStrategy && this._positionMode === mode) {\n      return this._positionStrategy;\n    }\n\n    this._positionStrategy?.detach();\n    this._positionStrategy?.clear();\n\n    this._positionMode = mode;\n    this._positionStrategy =\n      mode === 'native'\n        ? new NativePositionStrategy(this, this._handleAnchorRemoved)\n        : new FloatingPositionStrategy(this, this._handleAnchorRemoved);\n\n    return this._positionStrategy;\n  }\n\n  /**\n   * Hides the container if the anchor leaves the DOM. The `open` property\n   * keeps its value, so the popover shows again when a new anchor resolves.\n   */\n  private readonly _handleAnchorRemoved = (): void => {\n    this._target = undefined;\n    this._setOpenState(false);\n  };\n\n  /**\n   * An IDREF that does not resolve keeps the current target, so the popover\n   * finds an anchor that renders later, at the next open.\n   */\n  private _resolveTarget(): Element | undefined {\n    if (isString(this.anchor)) {\n      return getElementByIdFromRoot(this, this.anchor) ?? this._target;\n    }\n\n    return (\n      this.anchor ??\n      firstOf(this._slots.getAssignedElements('anchor', { flatten: true }))\n    );\n  }\n\n  private _setOpenState(state: boolean): void {\n    if (state) {\n      this._target = this._resolveTarget();\n    }\n\n    if (state && this._target) {\n      // `attach` also detaches the previous open cycle.\n      this._getPositionStrategy(this._target).attach(\n        this._target,\n        this._container\n      );\n    } else {\n      this._positionStrategy?.detach();\n    }\n\n    this._syncContainerState(state);\n  }\n\n  /**\n   * Binds one document `scroll` listener while the container shows and the\n   * scroll strategy is `close`. Reads the container, which can stay closed\n   * while `open` is true.\n   */\n  private _syncScrollStrategy(): void {\n    toggleEventListener(\n      document,\n      isPopoverOpen(this._container) && this.scrollStrategy === 'close',\n      'scroll',\n      this._handleRootScroll,\n      SCROLL_LISTENER_OPTIONS\n    );\n  }\n\n  private readonly _handleRootScroll = (): void => {\n    this.dispatchEvent(new CustomEvent('igcPopoverScrollClose'));\n  };\n\n  /** Shows or hides the container and then syncs the scroll listener. */\n  private _syncContainerState(state: boolean): void {\n    if (!this._container) {\n      return;\n    }\n\n    if (state && this._target) {\n      this._positionStrategy?.show();\n    } else {\n      this._positionStrategy?.hide();\n    }\n\n    this._syncScrollStrategy();\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`\n      <slot name=\"anchor\"></slot>\n      <div\n        id=\"container\"\n        part=\"container\"\n        popover=\"manual\"\n        data-placement=${resolvePlacement(this)}\n        data-scroll-strategy=${this.scrollStrategy}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-popover': IgcPopoverComponent;\n  }\n}\n"]}

package/components/popover/position/arrow.d.ts

@@ -0,0 +1,19 @@
+export declare const OPPOSITE_SIDE: {
+    readonly top: "bottom";
+    readonly right: "left";
+    readonly bottom: "top";
+    readonly left: "right";
+};
+export type PopoverSide = keyof typeof OPPOSITE_SIDE;
+/** Returns the side of a placement, without the alignment. */
+export declare function getPlacementSide(placement: string): PopoverSide;
+/** True if `side` is on the block axis. */
+export declare function isBlockSide(side: PopoverSide): boolean;
+/**
+ * Sets the part and the inline styles of the arrow. Both strategies call it,
+ * so the arrow gets the same styles.
+ *
+ * `side` is the side of the container that touches the anchor. `distance` is
+ * the position of the arrow on the cross axis of that side.
+ */
+export declare function applyArrowStyles(element: HTMLElement, side: PopoverSide, distance: number, offset: number): void;

package/components/popover/position/arrow.js

@@ -0,0 +1,33 @@
+import { roundByDPR, setStyles } from '#internals/utils/dom.js';
+export const OPPOSITE_SIDE = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+const SIDES = Object.keys(OPPOSITE_SIDE);
+export function getPlacementSide(placement) {
+    return placement.split('-')[0];
+}
+export function isBlockSide(side) {
+    return side === 'top' || side === 'bottom';
+}
+export function applyArrowStyles(element, side, distance, offset) {
+    const staticSide = OPPOSITE_SIDE[side];
+    if (!element.part.contains(side)) {
+        element.part.remove(...SIDES);
+        element.part.add(side);
+    }
+    const block = isBlockSide(staticSide);
+    const inset = block ? element.offsetHeight : element.offsetWidth;
+    const styles = {
+        top: '',
+        right: '',
+        bottom: '',
+        left: '',
+        [block ? 'left' : 'top']: `${roundByDPR(distance + offset)}px`,
+    };
+    styles[staticSide] = `${-inset}px`;
+    setStyles(element, styles);
+}
+//# sourceMappingURL=arrow.js.map

package/components/popover/position/arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","sourceRoot":"","sources":["../../../../src/components/popover/position/arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,GAAG,EAAE,QAAQ;IACb,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,OAAO;CACL,CAAC;AAIX,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,CAAkB,CAAC;AAG1D,MAAM,UAAU,gBAAgB,CAAC,SAAiB;IAChD,OAAO,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAgB,CAAC;AAChD,CAAC;AAGD,MAAM,UAAU,WAAW,CAAC,IAAiB;IAC3C,OAAO,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,QAAQ,CAAC;AAC7C,CAAC;AASD,MAAM,UAAU,gBAAgB,CAC9B,OAAoB,EACpB,IAAiB,EACjB,QAAgB,EAChB,MAAc;IAEd,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEvC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;IAGD,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC;IAGjE,MAAM,MAAM,GAAiC;QAC3C,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,EAAE;QACR,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI;KAC/D,CAAC;IAEF,MAAM,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,KAAK,IAAI,CAAC;IAEnC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC7B,CAAC","sourcesContent":["import { roundByDPR, setStyles } from '#internals/utils/dom.js';\n\nexport const OPPOSITE_SIDE = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n} as const;\n\nexport type PopoverSide = keyof typeof OPPOSITE_SIDE;\n\nconst SIDES = Object.keys(OPPOSITE_SIDE) as PopoverSide[];\n\n/** Returns the side of a placement, without the alignment. */\nexport function getPlacementSide(placement: string): PopoverSide {\n  return placement.split('-')[0] as PopoverSide;\n}\n\n/** True if `side` is on the block axis. */\nexport function isBlockSide(side: PopoverSide): boolean {\n  return side === 'top' || side === 'bottom';\n}\n\n/**\n * Sets the part and the inline styles of the arrow. Both strategies call it,\n * so the arrow gets the same styles.\n *\n * `side` is the side of the container that touches the anchor. `distance` is\n * the position of the arrow on the cross axis of that side.\n */\nexport function applyArrowStyles(\n  element: HTMLElement,\n  side: PopoverSide,\n  distance: number,\n  offset: number\n): void {\n  const staticSide = OPPOSITE_SIDE[side];\n\n  if (!element.part.contains(side)) {\n    element.part.remove(...SIDES);\n    element.part.add(side);\n  }\n\n  // The part gives the arrow its size. Measure after the part changes.\n  const block = isBlockSide(staticSide);\n  const inset = block ? element.offsetHeight : element.offsetWidth;\n\n  // Reset all sides. A stale inset over-constrains the arrow.\n  const styles: Partial<CSSStyleDeclaration> = {\n    top: '',\n    right: '',\n    bottom: '',\n    left: '',\n    [block ? 'left' : 'top']: `${roundByDPR(distance + offset)}px`,\n  };\n\n  styles[staticSide] = `${-inset}px`;\n\n  setStyles(element, styles);\n}\n"]}

package/components/popover/position/floating.d.ts

@@ -0,0 +1,40 @@
+import { PopoverPositionStrategy } from './strategy.js';
+/**
+ * The fallback strategy, for a browser without the native CSS anchor
+ * positioning. It positions the container with `@floating-ui/dom`.
+ */
+export declare class FloatingPositionStrategy extends PopoverPositionStrategy {
+    private _dispose?;
+    private _middleware?;
+    private _positionId;
+    /** The module load of the current open cycle, with its first position. */
+    private _pendingLoad?;
+    /** The position update that runs now. */
+    private _pendingPosition?;
+    /**
+     * Identifies the open cycle. Each `attach` and `detach` increments it.
+     * Every `attach` chains a callback onto the shared module loader, so a
+     * callback of a replaced cycle must not start an update.
+     */
+    private _attachId;
+    /**
+     * `fixed` if an ancestor of the anchor has `position: sticky`, `absolute`
+     * in all other cases. The value updates one time for each open cycle,
+     * because the calculation walks the DOM and forces a style reflow.
+     */
+    private _strategy;
+    attach(target: Element, container: HTMLElement): void;
+    /**
+     * This strategy loads its module on demand and then positions
+     * asynchronously, so the host waits for both.
+     */
+    whenPositioned(): Promise<void>;
+    show(): void;
+    update(): void;
+    detach(): void;
+    clear(): void;
+    private _startAutoUpdate;
+    private _createMiddleware;
+    private _updatePosition;
+    private _computePosition;
+}

package/components/popover/position/floating.js

@@ -0,0 +1,146 @@
+import { hasStickyAncestor, isPopoverOpen, roundByDPR, setStyles, } from '#internals/utils/dom.js';
+import { applyArrowStyles, getPlacementSide } from './arrow.js';
+import { PopoverPositionStrategy } from './strategy.js';
+import { resolvePlacement } from './types.js';
+let floatingUiModule;
+let floatingUiLoader;
+function loadFloatingUi() {
+    floatingUiLoader ??= import('@floating-ui/dom').then((module) => {
+        floatingUiModule = module;
+        return module;
+    });
+    return floatingUiLoader;
+}
+export class FloatingPositionStrategy extends PopoverPositionStrategy {
+    constructor() {
+        super(...arguments);
+        this._positionId = 0;
+        this._attachId = 0;
+        this._strategy = 'absolute';
+    }
+    attach(target, container) {
+        super.attach(target, container);
+        const attachId = ++this._attachId;
+        this._middleware = undefined;
+        const reset = { visibility: '' };
+        if (!this._host.sameWidth) {
+            reset.width = '';
+        }
+        setStyles(container, reset);
+        this._strategy = hasStickyAncestor(target) ? 'fixed' : 'absolute';
+        if (floatingUiModule) {
+            this._startAutoUpdate(floatingUiModule, target, container);
+            return;
+        }
+        this._pendingLoad = loadFloatingUi().then((module) => {
+            if (attachId !== this._attachId) {
+                return undefined;
+            }
+            this._startAutoUpdate(module, target, container);
+            return this._pendingPosition;
+        });
+    }
+    async whenPositioned() {
+        await this._pendingLoad;
+        await this._pendingPosition;
+    }
+    show() {
+        if (this._container && !isPopoverOpen(this._container)) {
+            this._container.showPopover();
+        }
+    }
+    update() {
+        this._middleware = undefined;
+        if (!this._host.sameWidth && this._container) {
+            setStyles(this._container, { width: '' });
+        }
+        this._updatePosition();
+    }
+    detach() {
+        this._attachId++;
+        this._pendingLoad = undefined;
+        this._dispose?.();
+        this._dispose = undefined;
+    }
+    clear() {
+        if (this._container) {
+            setStyles(this._container, {
+                position: '',
+                left: '',
+                top: '',
+                transform: '',
+                width: '',
+                visibility: '',
+            });
+        }
+    }
+    _startAutoUpdate(floating, target, container) {
+        this._dispose = floating.autoUpdate(target, container, this._updatePosition.bind(this));
+    }
+    _createMiddleware(floating) {
+        const { offset, flip, sameWidth, arrow, scrollStrategy } = this._host;
+        const middleware = [];
+        if (offset !== 0) {
+            middleware.push(floating.offset(offset));
+        }
+        if (flip) {
+            middleware.push(floating.flip());
+        }
+        if (sameWidth) {
+            middleware.push(floating.size({
+                apply: ({ rects }) => {
+                    if (this._container) {
+                        setStyles(this._container, {
+                            width: `${rects.reference.width}px`,
+                        });
+                    }
+                },
+            }));
+        }
+        if (arrow) {
+            middleware.push(floating.arrow({ element: arrow }));
+        }
+        if (scrollStrategy !== 'scroll') {
+            middleware.push(floating.hide());
+        }
+        return middleware;
+    }
+    _updatePosition() {
+        this._pendingPosition = this._computePosition();
+        return this._pendingPosition;
+    }
+    async _computePosition() {
+        const container = this._container;
+        const floating = floatingUiModule;
+        if (!(this._host.open && container && floating)) {
+            return;
+        }
+        if (!this._target?.isConnected) {
+            this._onAnchorRemoved();
+            return;
+        }
+        const positionId = ++this._positionId;
+        const strategy = this._strategy;
+        const { x, y, middlewareData, placement } = await floating.computePosition(this._target, container, {
+            placement: resolvePlacement(this._host),
+            middleware: (this._middleware ??= this._createMiddleware(floating)),
+            strategy,
+        });
+        if (positionId !== this._positionId || !this._host.open) {
+            return;
+        }
+        setStyles(container, {
+            position: strategy,
+            left: '0',
+            top: '0',
+            transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
+            visibility: middlewareData.hide?.referenceHidden ? 'hidden' : '',
+        });
+        const { arrow, arrowOffset } = this._host;
+        if (arrow && middlewareData.arrow) {
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+            applyArrowStyles(arrow, getPlacementSide(placement), arrowX ?? arrowY ?? 0, arrowOffset);
+        }
+    }
+}
+//# sourceMappingURL=floating.js.map

package/components/popover/position/floating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating.js","sourceRoot":"","sources":["../../../../src/components/popover/position/floating.ts"],"names":[],"mappings":"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","sourcesContent":["import type * as FloatingUi from '@floating-ui/dom';\nimport type { Middleware } from '@floating-ui/dom';\nimport {\n  hasStickyAncestor,\n  isPopoverOpen,\n  roundByDPR,\n  setStyles,\n} from '#internals/utils/dom.js';\nimport { applyArrowStyles, getPlacementSide } from './arrow.js';\nimport { PopoverPositionStrategy } from './strategy.js';\nimport { resolvePlacement } from './types.js';\n\ntype FloatingUiModule = typeof FloatingUi;\n\n/**\n * The module loads on demand, at the first attach of the fallback strategy. A\n * browser that uses the native strategy never loads it. The published build\n * is ESM, so the bundler of a consumer can split the code at this import.\n */\nlet floatingUiModule: FloatingUiModule | undefined;\nlet floatingUiLoader: Promise<FloatingUiModule> | undefined;\n\nfunction loadFloatingUi(): Promise<FloatingUiModule> {\n  floatingUiLoader ??= import('@floating-ui/dom').then((module) => {\n    floatingUiModule = module;\n    return module;\n  });\n\n  return floatingUiLoader;\n}\n\n/**\n * The fallback strategy, for a browser without the native CSS anchor\n * positioning. It positions the container with `@floating-ui/dom`.\n */\nexport class FloatingPositionStrategy extends PopoverPositionStrategy {\n  private _dispose?: () => void;\n  private _middleware?: Middleware[];\n  private _positionId = 0;\n\n  /** The module load of the current open cycle, with its first position. */\n  private _pendingLoad?: Promise<unknown>;\n\n  /** The position update that runs now. */\n  private _pendingPosition?: Promise<void>;\n\n  /**\n   * Identifies the open cycle. Each `attach` and `detach` increments it.\n   * Every `attach` chains a callback onto the shared module loader, so a\n   * callback of a replaced cycle must not start an update.\n   */\n  private _attachId = 0;\n\n  /**\n   * `fixed` if an ancestor of the anchor has `position: sticky`, `absolute`\n   * in all other cases. The value updates one time for each open cycle,\n   * because the calculation walks the DOM and forces a style reflow.\n   */\n  private _strategy: 'absolute' | 'fixed' = 'absolute';\n\n  public override attach(target: Element, container: HTMLElement): void {\n    super.attach(target, container);\n\n    const attachId = ++this._attachId;\n\n    this._middleware = undefined;\n\n    // Remove the inline styles of the previous open cycle. A popover that\n    // closes while the anchor is out of view keeps `visibility: hidden`, and\n    // the first `computePosition` clears it too late.\n    const reset: Partial<CSSStyleDeclaration> = { visibility: '' };\n\n    if (!this._host.sameWidth) {\n      reset.width = '';\n    }\n\n    setStyles(container, reset);\n\n    this._strategy = hasStickyAncestor(target) ? 'fixed' : 'absolute';\n\n    if (floatingUiModule) {\n      this._startAutoUpdate(floatingUiModule, target, container);\n      return;\n    }\n\n    // `autoUpdate` positions the container one time before it returns, so\n    // the pending position of that call completes the load.\n    this._pendingLoad = loadFloatingUi().then((module) => {\n      if (attachId !== this._attachId) {\n        return undefined;\n      }\n\n      this._startAutoUpdate(module, target, container);\n      return this._pendingPosition;\n    });\n  }\n\n  /**\n   * This strategy loads its module on demand and then positions\n   * asynchronously, so the host waits for both.\n   */\n  public override async whenPositioned(): Promise<void> {\n    await this._pendingLoad;\n    await this._pendingPosition;\n  }\n\n  public show(): void {\n    if (this._container && !isPopoverOpen(this._container)) {\n      this._container.showPopover();\n    }\n  }\n\n  public update(): void {\n    this._middleware = undefined;\n\n    if (!this._host.sameWidth && this._container) {\n      setStyles(this._container, { width: '' });\n    }\n\n    this._updatePosition();\n  }\n\n  public detach(): void {\n    this._attachId++;\n    this._pendingLoad = undefined;\n    this._dispose?.();\n    this._dispose = undefined;\n  }\n\n  public clear(): void {\n    if (this._container) {\n      setStyles(this._container, {\n        position: '',\n        left: '',\n        top: '',\n        transform: '',\n        width: '',\n        visibility: '',\n      });\n    }\n  }\n\n  private _startAutoUpdate(\n    floating: FloatingUiModule,\n    target: Element,\n    container: HTMLElement\n  ): void {\n    this._dispose = floating.autoUpdate(\n      target,\n      container,\n      this._updatePosition.bind(this)\n    );\n  }\n\n  private _createMiddleware(floating: FloatingUiModule): Middleware[] {\n    const { offset, flip, sameWidth, arrow, scrollStrategy } = this._host;\n    const middleware: Middleware[] = [];\n\n    if (offset !== 0) {\n      middleware.push(floating.offset(offset));\n    }\n\n    if (flip) {\n      middleware.push(floating.flip());\n    }\n\n    if (sameWidth) {\n      middleware.push(\n        floating.size({\n          apply: ({ rects }) => {\n            if (this._container) {\n              setStyles(this._container, {\n                width: `${rects.reference.width}px`,\n              });\n            }\n          },\n        })\n      );\n    }\n\n    if (arrow) {\n      middleware.push(floating.arrow({ element: arrow }));\n    }\n\n    // `hide()` matches `position-visibility: anchors-visible` of the native\n    // strategy. The `scroll` strategy adds no middleware, which matches\n    // `position-visibility: always`.\n    if (scrollStrategy !== 'scroll') {\n      middleware.push(floating.hide());\n    }\n\n    return middleware;\n  }\n\n  private _updatePosition(): Promise<void> {\n    this._pendingPosition = this._computePosition();\n    return this._pendingPosition;\n  }\n\n  private async _computePosition(): Promise<void> {\n    const container = this._container;\n    // A pending `attach` positions the container when the module loads, so an\n    // update before the first load can stop here.\n    const floating = floatingUiModule;\n\n    if (!(this._host.open && container && floating)) {\n      return;\n    }\n\n    if (!this._target?.isConnected) {\n      this._onAnchorRemoved();\n      return;\n    }\n\n    const positionId = ++this._positionId;\n    const strategy = this._strategy;\n\n    const { x, y, middlewareData, placement } = await floating.computePosition(\n      this._target,\n      container,\n      {\n        placement: resolvePlacement(this._host),\n        middleware: (this._middleware ??= this._createMiddleware(floating)),\n        strategy,\n      }\n    );\n\n    if (positionId !== this._positionId || !this._host.open) {\n      return;\n    }\n\n    setStyles(container, {\n      position: strategy,\n      left: '0',\n      top: '0',\n      transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,\n      visibility: middlewareData.hide?.referenceHidden ? 'hidden' : '',\n    });\n\n    const { arrow, arrowOffset } = this._host;\n\n    if (arrow && middlewareData.arrow) {\n      const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n      applyArrowStyles(\n        arrow,\n        getPlacementSide(placement),\n        arrowX ?? arrowY ?? 0,\n        arrowOffset\n      );\n    }\n  }\n}\n"]}

package/components/popover/position/native.d.ts

@@ -0,0 +1,45 @@
+import { PopoverPositionStrategy } from './strategy.js';
+/**
+ * True if the native CSS anchor positioning can position the `target`.
+ *
+ * The `source` option accepts only an HTMLElement, so the fallback positions
+ * an anchor such as an SVG element.
+ */
+export declare function shouldUseNativeAnchorPositioning(target: Element): target is HTMLElement;
+/**
+ * The position strategy that uses the native CSS anchor positioning.
+ *
+ * `showPopover({ source: target })` sets the implicit anchor. This is
+ * necessary, because `anchor-name` is tree-scoped and cannot cross the shadow
+ * boundary. The CSS rules then do all the positioning. They apply only with
+ * the `data-anchored` attribute, which this strategy owns.
+ */
+export declare class NativePositionStrategy extends PopoverPositionStrategy {
+    /** The anchor that the container currently shows against. */
+    private _shownSource?;
+    private _arrowFrame;
+    /**
+     * Detects the removal of the anchor from the DOM. The observer does not
+     * detect the removal of a shadow host above the root of the anchor, and
+     * the fallback strategy does not detect it either.
+     */
+    private readonly _anchorObserver;
+    attach(target: Element, container: HTMLElement): void;
+    show(): void;
+    hide(): void;
+    update(): void;
+    detach(): void;
+    clear(): void;
+    private _syncOffset;
+    /**
+     * The arrow needs JavaScript: CSS gives no signal about the position-try
+     * fallback, and a descendant of the container cannot reference the implicit
+     * anchor. The strategy calculates the side from the rectangles of the
+     * container and the anchor, on each scroll and resize.
+     */
+    private readonly _handleArrowInvalidation;
+    /** Keeps the invalidation listeners bound while an open popover has an arrow. */
+    private _syncArrowListeners;
+    private _scheduleArrowUpdate;
+    private _updateArrow;
+}

package/components/popover/position/native.js

@@ -0,0 +1,158 @@
+import { isServer } from 'lit';
+import { getRoot, isPopoverOpen } from '#internals/utils/dom.js';
+import { toggleEventListener } from '#internals/utils/events.js';
+import { clamp } from '#internals/utils/math.js';
+import { applyArrowStyles, getPlacementSide, isBlockSide, OPPOSITE_SIDE, } from './arrow.js';
+import { PopoverPositionStrategy } from './strategy.js';
+import { getForcedPopoverPositionStrategy, resolvePlacement, SCROLL_LISTENER_OPTIONS, } from './types.js';
+const OFFSET_PROPERTY = '--_igc-popover-offset';
+let nativeSupport;
+function supportsNativeAnchoring() {
+    nativeSupport ??= probeNativeAnchoring();
+    return nativeSupport;
+}
+function probeNativeAnchoring() {
+    if (isServer ||
+        typeof CSS === 'undefined' ||
+        !CSS.supports('anchor-name: --a')) {
+        return false;
+    }
+    const anchor = document.createElement('div');
+    const popover = document.createElement('div');
+    popover.popover = 'manual';
+    anchor.style.cssText = 'position:fixed;top:0;left:0;width:1px;height:1px';
+    popover.style.cssText =
+        'margin:0;inset:auto;border:none;padding:0;width:1px;height:1px;position-area:bottom span-right';
+    try {
+        document.body.append(anchor, popover);
+        popover.showPopover({ source: anchor });
+        const anchored = Math.abs(popover.getBoundingClientRect().top - 1) <= 1;
+        popover.hidePopover();
+        return anchored;
+    }
+    catch {
+        return false;
+    }
+    finally {
+        anchor.remove();
+        popover.remove();
+    }
+}
+export function shouldUseNativeAnchorPositioning(target) {
+    const forced = getForcedPopoverPositionStrategy();
+    if (forced) {
+        return forced === 'native';
+    }
+    return target instanceof HTMLElement && supportsNativeAnchoring();
+}
+export class NativePositionStrategy extends PopoverPositionStrategy {
+    constructor() {
+        super(...arguments);
+        this._arrowFrame = 0;
+        this._anchorObserver = new MutationObserver(() => {
+            if (this._target?.isConnected === false) {
+                this._onAnchorRemoved();
+            }
+        });
+        this._handleArrowInvalidation = () => {
+            this._scheduleArrowUpdate();
+        };
+    }
+    attach(target, container) {
+        super.attach(target, container);
+        container.toggleAttribute('data-anchored', true);
+        this._anchorObserver.observe(getRoot(target), {
+            childList: true,
+            subtree: true,
+        });
+    }
+    show() {
+        const container = this._container;
+        const target = this._target;
+        if (!(container && target)) {
+            return;
+        }
+        if (isPopoverOpen(container)) {
+            if (this._shownSource !== target) {
+                container.hidePopover();
+                container.showPopover({ source: target });
+                this._shownSource = target;
+            }
+        }
+        else {
+            container.showPopover({ source: target });
+            this._shownSource = target;
+        }
+        this.update();
+    }
+    hide() {
+        this._shownSource = undefined;
+        super.hide();
+    }
+    update() {
+        this._syncOffset();
+        this._syncArrowListeners();
+        this._scheduleArrowUpdate();
+    }
+    detach() {
+        this._anchorObserver.disconnect();
+        this._syncArrowListeners(false);
+    }
+    clear() {
+        if (this._container) {
+            this._container.toggleAttribute('data-anchored', false);
+            this._container.style.removeProperty(OFFSET_PROPERTY);
+        }
+    }
+    _syncOffset() {
+        this._container?.style.setProperty(OFFSET_PROPERTY, `${this._host.offset}px`);
+    }
+    _syncArrowListeners(active = this._host.arrow != null &&
+        this._container != null &&
+        isPopoverOpen(this._container)) {
+        toggleEventListener(window, active, 'scroll', this._handleArrowInvalidation, SCROLL_LISTENER_OPTIONS);
+        toggleEventListener(window, active, 'resize', this._handleArrowInvalidation);
+        if (!active) {
+            cancelAnimationFrame(this._arrowFrame);
+            this._arrowFrame = 0;
+        }
+    }
+    _scheduleArrowUpdate() {
+        if (this._arrowFrame || !this._host.arrow) {
+            return;
+        }
+        this._arrowFrame = requestAnimationFrame(() => {
+            this._arrowFrame = 0;
+            this._updateArrow();
+        });
+    }
+    _updateArrow() {
+        const { arrow, arrowOffset } = this._host;
+        const target = this._target;
+        const container = this._container;
+        if (!(arrow && target && container && isPopoverOpen(container))) {
+            return;
+        }
+        const anchorRect = target.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const placementSide = getPlacementSide(resolvePlacement(this._host));
+        const block = isBlockSide(placementSide);
+        const main = block ? 'top' : 'left';
+        const mainSize = block ? 'height' : 'width';
+        const cross = block ? 'left' : 'top';
+        const crossSize = block ? 'width' : 'height';
+        const arrowSize = block ? arrow.offsetWidth : arrow.offsetHeight;
+        const containerSize = block
+            ? container.clientWidth
+            : container.clientHeight;
+        const nearSide = containerRect[main] + containerRect[mainSize] / 2 <
+            anchorRect[main] + anchorRect[mainSize] / 2;
+        const side = nearSide ? main : OPPOSITE_SIDE[main];
+        const distance = clamp(anchorRect[cross] +
+            anchorRect[crossSize] / 2 -
+            containerRect[cross] -
+            arrowSize / 2, 0, containerSize - arrowSize);
+        applyArrowStyles(arrow, side, distance, arrowOffset);
+    }
+}
+//# sourceMappingURL=native.js.map

package/components/popover/position/native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.js","sourceRoot":"","sources":["../../../../src/components/popover/position/native.ts"],"names":[],"mappings":"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","sourcesContent":["import { isServer } from 'lit';\nimport { getRoot, isPopoverOpen } from '#internals/utils/dom.js';\nimport { toggleEventListener } from '#internals/utils/events.js';\nimport { clamp } from '#internals/utils/math.js';\nimport {\n  applyArrowStyles,\n  getPlacementSide,\n  isBlockSide,\n  OPPOSITE_SIDE,\n} from './arrow.js';\nimport { PopoverPositionStrategy } from './strategy.js';\nimport {\n  getForcedPopoverPositionStrategy,\n  resolvePlacement,\n  SCROLL_LISTENER_OPTIONS,\n} from './types.js';\n\nconst OFFSET_PROPERTY = '--_igc-popover-offset';\n\nlet nativeSupport: boolean | undefined;\n\n/**\n * Tests the native CSS anchor positioning one time, on the first use.\n *\n * `CSS.supports` cannot test the implicit anchor of `showPopover({ source })`.\n * Chromium 125 to 132 passes the CSS tests but ignores the `source` option.\n * The test therefore measures a real popover.\n */\nfunction supportsNativeAnchoring(): boolean {\n  nativeSupport ??= probeNativeAnchoring();\n  return nativeSupport;\n}\n\nfunction probeNativeAnchoring(): boolean {\n  if (\n    isServer ||\n    typeof CSS === 'undefined' ||\n    !CSS.supports('anchor-name: --a')\n  ) {\n    return false;\n  }\n\n  const anchor = document.createElement('div');\n  const popover = document.createElement('div');\n\n  popover.popover = 'manual';\n  anchor.style.cssText = 'position:fixed;top:0;left:0;width:1px;height:1px';\n  // `span-right` also tests the span keywords, which the aligned placements\n  // need. An engine without them drops the declaration and fails the\n  // measurement below.\n  popover.style.cssText =\n    'margin:0;inset:auto;border:none;padding:0;width:1px;height:1px;position-area:bottom span-right';\n\n  try {\n    document.body.append(anchor, popover);\n    popover.showPopover({ source: anchor });\n\n    // An anchored popover sits directly below the 1 pixel anchor. The\n    // tolerance allows for rounding. A browser that ignores `source` centers\n    // the popover, far away.\n    const anchored = Math.abs(popover.getBoundingClientRect().top - 1) <= 1;\n\n    popover.hidePopover();\n    return anchored;\n  } catch {\n    return false;\n  } finally {\n    anchor.remove();\n    popover.remove();\n  }\n}\n\n/**\n * True if the native CSS anchor positioning can position the `target`.\n *\n * The `source` option accepts only an HTMLElement, so the fallback positions\n * an anchor such as an SVG element.\n */\nexport function shouldUseNativeAnchorPositioning(\n  target: Element\n): target is HTMLElement {\n  const forced = getForcedPopoverPositionStrategy();\n\n  if (forced) {\n    return forced === 'native';\n  }\n\n  return target instanceof HTMLElement && supportsNativeAnchoring();\n}\n\n/**\n * The position strategy that uses the native CSS anchor positioning.\n *\n * `showPopover({ source: target })` sets the implicit anchor. This is\n * necessary, because `anchor-name` is tree-scoped and cannot cross the shadow\n * boundary. The CSS rules then do all the positioning. They apply only with\n * the `data-anchored` attribute, which this strategy owns.\n */\nexport class NativePositionStrategy extends PopoverPositionStrategy {\n  /** The anchor that the container currently shows against. */\n  private _shownSource?: Element;\n  private _arrowFrame = 0;\n\n  /**\n   * Detects the removal of the anchor from the DOM. The observer does not\n   * detect the removal of a shadow host above the root of the anchor, and\n   * the fallback strategy does not detect it either.\n   */\n  private readonly _anchorObserver = new MutationObserver(() => {\n    if (this._target?.isConnected === false) {\n      this._onAnchorRemoved();\n    }\n  });\n\n  public override attach(target: Element, container: HTMLElement): void {\n    super.attach(target, container);\n\n    container.toggleAttribute('data-anchored', true);\n    this._anchorObserver.observe(getRoot(target), {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  public show(): void {\n    const container = this._container;\n    const target = this._target;\n\n    if (!(container && target)) {\n      return;\n    }\n\n    // The browser binds the implicit anchor only in `showPopover`, so a new\n    // anchor needs a hide and a show. The focus moves out and then back.\n    if (isPopoverOpen(container)) {\n      if (this._shownSource !== target) {\n        container.hidePopover();\n        container.showPopover({ source: target as HTMLElement });\n        this._shownSource = target;\n      }\n    } else {\n      container.showPopover({ source: target as HTMLElement });\n      this._shownSource = target;\n    }\n\n    this.update();\n  }\n\n  public override hide(): void {\n    this._shownSource = undefined;\n    super.hide();\n  }\n\n  public update(): void {\n    this._syncOffset();\n    this._syncArrowListeners();\n    // The browser positions the container. The arrow follows in the next\n    // frame, when the content has its final size.\n    this._scheduleArrowUpdate();\n  }\n\n  public detach(): void {\n    this._anchorObserver.disconnect();\n    this._syncArrowListeners(false);\n  }\n\n  public clear(): void {\n    if (this._container) {\n      this._container.toggleAttribute('data-anchored', false);\n      this._container.style.removeProperty(OFFSET_PROPERTY);\n    }\n  }\n\n  private _syncOffset(): void {\n    this._container?.style.setProperty(\n      OFFSET_PROPERTY,\n      `${this._host.offset}px`\n    );\n  }\n\n  //#region Arrow support\n\n  /**\n   * The arrow needs JavaScript: CSS gives no signal about the position-try\n   * fallback, and a descendant of the container cannot reference the implicit\n   * anchor. The strategy calculates the side from the rectangles of the\n   * container and the anchor, on each scroll and resize.\n   */\n  private readonly _handleArrowInvalidation = (): void => {\n    this._scheduleArrowUpdate();\n  };\n\n  /** Keeps the invalidation listeners bound while an open popover has an arrow. */\n  private _syncArrowListeners(\n    active = this._host.arrow != null &&\n      this._container != null &&\n      isPopoverOpen(this._container)\n  ): void {\n    toggleEventListener(\n      window,\n      active,\n      'scroll',\n      this._handleArrowInvalidation,\n      SCROLL_LISTENER_OPTIONS\n    );\n    toggleEventListener(\n      window,\n      active,\n      'resize',\n      this._handleArrowInvalidation\n    );\n\n    if (!active) {\n      cancelAnimationFrame(this._arrowFrame);\n      this._arrowFrame = 0;\n    }\n  }\n\n  private _scheduleArrowUpdate(): void {\n    if (this._arrowFrame || !this._host.arrow) {\n      return;\n    }\n\n    this._arrowFrame = requestAnimationFrame(() => {\n      this._arrowFrame = 0;\n      this._updateArrow();\n    });\n  }\n\n  private _updateArrow(): void {\n    const { arrow, arrowOffset } = this._host;\n    const target = this._target;\n    const container = this._container;\n\n    if (!(arrow && target && container && isPopoverOpen(container))) {\n      return;\n    }\n\n    const anchorRect = target.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n    const placementSide = getPlacementSide(resolvePlacement(this._host));\n    const block = isBlockSide(placementSide);\n\n    // The main axis carries the placement. The cross axis centers the arrow.\n    const main = block ? 'top' : 'left';\n    const mainSize = block ? 'height' : 'width';\n    const cross = block ? 'left' : 'top';\n    const crossSize = block ? 'width' : 'height';\n    const arrowSize = block ? arrow.offsetWidth : arrow.offsetHeight;\n    const containerSize = block\n      ? container.clientWidth\n      : container.clientHeight;\n\n    // Compare the centers to find the side after a flip fallback. This stays\n    // correct for an offset gap and for a negative offset that overlaps the\n    // anchor.\n    const nearSide =\n      containerRect[main] + containerRect[mainSize] / 2 <\n      anchorRect[main] + anchorRect[mainSize] / 2;\n    const side = nearSide ? main : OPPOSITE_SIDE[main];\n\n    // Center the arrow on the anchor. Keep the arrow inside the container.\n    const distance = clamp(\n      anchorRect[cross] +\n        anchorRect[crossSize] / 2 -\n        containerRect[cross] -\n        arrowSize / 2,\n      0,\n      containerSize - arrowSize\n    );\n\n    applyArrowStyles(arrow, side, distance, arrowOffset);\n  }\n\n  //#endregion\n}\n"]}

package/components/popover/position/strategy.d.ts

@@ -0,0 +1,37 @@
+import type { PopoverPositionHost } from './types.js';
+/**
+ * Positions the container of a popover against an anchor.
+ *
+ * For each open cycle the host calls `attach`, then `show`. The host calls
+ * `update` after a property changes, and `hide` to close the container.
+ */
+export declare abstract class PopoverPositionStrategy {
+    protected readonly _host: PopoverPositionHost;
+    /** The strategy calls this callback if the anchor leaves the DOM. */
+    protected readonly _onAnchorRemoved: () => void;
+    protected _target?: Element;
+    protected _container?: HTMLElement;
+    constructor(host: PopoverPositionHost, onAnchorRemoved: () => void);
+    /** Starts to position the `container` against the `target`. */
+    attach(target: Element, container: HTMLElement): void;
+    /**
+     * Resolves when the strategy positioned the container.
+     *
+     * A synchronous strategy needs no wait. The host awaits this promise in
+     * `getUpdateComplete`.
+     */
+    whenPositioned(): Promise<unknown>;
+    /** Shows the container in the top layer. */
+    abstract show(): void;
+    /** Hides the container. */
+    hide(): void;
+    /** Positions the container again after a property of the host changes. */
+    abstract update(): void;
+    /** Stops all observers, listeners and pending updates of the strategy. */
+    abstract detach(): void;
+    /**
+     * Removes the styles and the attributes of this strategy from the
+     * container. The host calls it when it changes the strategy.
+     */
+    abstract clear(): void;
+}