igniteui-webcomponents 7.3.2 → 7.4.1

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":"AAEA,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,SAAS,GACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAS9C,IAAI,gBAA8C,CAAC;AACnD,IAAI,gBAAuD,CAAC;AAE5D,SAAS,cAAc;IACrB,gBAAgB,KAAK,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;QAC9D,gBAAgB,GAAG,MAAM,CAAC;QAC1B,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AAMD,MAAM,OAAO,wBAAyB,SAAQ,uBAAuB;IAArE;;QAGU,gBAAW,GAAG,CAAC,CAAC;QAahB,cAAS,GAAG,CAAC,CAAC;QAOd,cAAS,GAAyB,UAAU,CAAC;IAkMvD,CAAC;IAhMiB,MAAM,CAAC,MAAe,EAAE,SAAsB;QAC5D,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QAEhC,MAAM,QAAQ,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC;QAElC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAK7B,MAAM,KAAK,GAAiC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;QAE/D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YAC1B,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACnB,CAAC;QAED,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAE5B,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;QAElE,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;YAC3D,OAAO;QACT,CAAC;QAID,IAAI,CAAC,YAAY,GAAG,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACnD,IAAI,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;gBAChC,OAAO,SAAS,CAAC;YACnB,CAAC;YAED,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;YACjD,OAAO,IAAI,CAAC,gBAAgB,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAMe,KAAK,CAAC,cAAc;QAClC,MAAM,IAAI,CAAC,YAAY,CAAC;QACxB,MAAM,IAAI,CAAC,gBAAgB,CAAC;IAC9B,CAAC;IAEM,IAAI;QACT,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAE7B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAC7C,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;QAClB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;IAC5B,CAAC;IAEM,KAAK;QACV,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE;gBACzB,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE;gBACR,GAAG,EAAE,EAAE;gBACP,SAAS,EAAE,EAAE;gBACb,KAAK,EAAE,EAAE;gBACT,UAAU,EAAE,EAAE;aACf,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,gBAAgB,CACtB,QAA0B,EAC1B,MAAe,EACf,SAAsB;QAEtB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,UAAU,CACjC,MAAM,EACN,SAAS,EACT,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAChC,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,QAA0B;QAClD,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtE,MAAM,UAAU,GAAiB,EAAE,CAAC;QAEpC,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;QACnC,CAAC;QAED,IAAI,SAAS,EAAE,CAAC;YACd,UAAU,CAAC,IAAI,CACb,QAAQ,CAAC,IAAI,CAAC;gBACZ,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;oBACnB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;wBACpB,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE;4BACzB,KAAK,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI;yBACpC,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC;aACF,CAAC,CACH,CAAC;QACJ,CAAC;QAED,IAAI,KAAK,EAAE,CAAC;YACV,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACtD,CAAC;QAKD,IAAI,cAAc,KAAK,QAAQ,EAAE,CAAC;YAChC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,UAAU,CAAC;IACpB,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAChD,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;QAGlC,MAAM,QAAQ,GAAG,gBAAgB,CAAC;QAElC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC;YAChD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC;YAC/B,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;QAEhC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,QAAQ,CAAC,eAAe,CACxE,IAAI,CAAC,OAAO,EACZ,SAAS,EACT;YACE,SAAS,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;YACvC,UAAU,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;YACnE,QAAQ;SACT,CACF,CAAC;QAEF,IAAI,UAAU,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACxD,OAAO;QACT,CAAC;QAED,SAAS,CAAC,SAAS,EAAE;YACnB,QAAQ,EAAE,QAAQ;YAClB,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,aAAa,UAAU,CAAC,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,CAAC,KAAK;YAC7D,UAAU,EAAE,cAAc,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;SACjE,CAAC,CAAC;QAEH,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE1C,IAAI,KAAK,IAAI,cAAc,CAAC,KAAK,EAAE,CAAC;YAClC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC;YAEtD,gBAAgB,CACd,KAAK,EACL,gBAAgB,CAAC,SAAS,CAAC,EAC3B,MAAM,IAAI,MAAM,IAAI,CAAC,EACrB,WAAW,CACZ,CAAC;QACJ,CAAC;IACH,CAAC;CACF","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;
+}

package/components/popover/position/strategy.js

@@ -0,0 +1,21 @@
+import { isPopoverOpen } from '#internals/utils/dom.js';
+export class PopoverPositionStrategy {
+    constructor(host, onAnchorRemoved) {
+        this._host = host;
+        this._onAnchorRemoved = onAnchorRemoved;
+    }
+    attach(target, container) {
+        this.detach();
+        this._target = target;
+        this._container = container;
+    }
+    whenPositioned() {
+        return Promise.resolve();
+    }
+    hide() {
+        if (this._container && isPopoverOpen(this._container)) {
+            this._container.hidePopover();
+        }
+    }
+}
+//# sourceMappingURL=strategy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"strategy.js","sourceRoot":"","sources":["../../../../src/components/popover/position/strategy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AASxD,MAAM,OAAgB,uBAAuB;IAS3C,YAAY,IAAyB,EAAE,eAA2B;QAChE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;IAC1C,CAAC;IAGM,MAAM,CAAC,MAAe,EAAE,SAAsB;QACnD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;IAC9B,CAAC;IAQM,cAAc;QACnB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC;IAMM,IAAI;QACT,IAAI,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YACtD,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;CAaF","sourcesContent":["import { isPopoverOpen } from '#internals/utils/dom.js';\nimport type { PopoverPositionHost } from './types.js';\n\n/**\n * Positions the container of a popover against an anchor.\n *\n * For each open cycle the host calls `attach`, then `show`. The host calls\n * `update` after a property changes, and `hide` to close the container.\n */\nexport abstract class PopoverPositionStrategy {\n  protected readonly _host: PopoverPositionHost;\n\n  /** The strategy calls this callback if the anchor leaves the DOM. */\n  protected readonly _onAnchorRemoved: () => void;\n\n  protected _target?: Element;\n  protected _container?: HTMLElement;\n\n  constructor(host: PopoverPositionHost, onAnchorRemoved: () => void) {\n    this._host = host;\n    this._onAnchorRemoved = onAnchorRemoved;\n  }\n\n  /** Starts to position the `container` against the `target`. */\n  public attach(target: Element, container: HTMLElement): void {\n    this.detach();\n    this._target = target;\n    this._container = container;\n  }\n\n  /**\n   * Resolves when the strategy positioned the container.\n   *\n   * A synchronous strategy needs no wait. The host awaits this promise in\n   * `getUpdateComplete`.\n   */\n  public whenPositioned(): Promise<unknown> {\n    return Promise.resolve();\n  }\n\n  /** Shows the container in the top layer. */\n  public abstract show(): void;\n\n  /** Hides the container. */\n  public hide(): void {\n    if (this._container && isPopoverOpen(this._container)) {\n      this._container.hidePopover();\n    }\n  }\n\n  /** Positions the container again after a property of the host changes. */\n  public abstract update(): void;\n\n  /** Stops all observers, listeners and pending updates of the strategy. */\n  public abstract detach(): void;\n\n  /**\n   * Removes the styles and the attributes of this strategy from the\n   * container. The host calls it when it changes the strategy.\n   */\n  public abstract clear(): void;\n}\n"]}

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

@@ -0,0 +1,26 @@
+import type { PopoverScrollStrategy } from '../../types.js';
+import type { PopoverPlacement } from '../popover.js';
+/**
+ * The capture phase catches the scroll of each ancestor element. The `scroll`
+ * event is not cancelable, so a passive listener does not delay the scroll.
+ */
+export declare const SCROLL_LISTENER_OPTIONS: AddEventListenerOptions;
+export type PopoverPositionStrategyMode = 'native' | 'floating';
+/** @internal Forces one position strategy. Only the tests call this function. */
+export declare function setPopoverPositionStrategy(mode?: PopoverPositionStrategyMode): void;
+/** @internal Returns the forced position strategy, if the tests set one. */
+export declare function getForcedPopoverPositionStrategy(): PopoverPositionStrategyMode | undefined;
+/** The inputs that a position strategy reads from the popover component. */
+export interface PopoverPositionHost {
+    /** The value is null or undefined at run time if the attribute is removed. */
+    readonly placement: PopoverPlacement | null | undefined;
+    readonly offset: number;
+    readonly flip: boolean;
+    readonly sameWidth: boolean;
+    readonly arrow: HTMLElement | null;
+    readonly arrowOffset: number;
+    readonly open: boolean;
+    readonly scrollStrategy: PopoverScrollStrategy;
+}
+/** Returns the placement, or the default if the attribute is removed. */
+export declare function resolvePlacement(host: PopoverPositionHost): PopoverPlacement;

package/components/popover/position/types.js

@@ -0,0 +1,15 @@
+export const SCROLL_LISTENER_OPTIONS = {
+    capture: true,
+    passive: true,
+};
+let forcedStrategy;
+export function setPopoverPositionStrategy(mode) {
+    forcedStrategy = mode;
+}
+export function getForcedPopoverPositionStrategy() {
+    return forcedStrategy;
+}
+export function resolvePlacement(host) {
+    return host.placement ?? 'bottom-start';
+}
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/popover/position/types.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,uBAAuB,GAA4B;IAC9D,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,IAAI;CACd,CAAC;AAIF,IAAI,cAAuD,CAAC;AAG5D,MAAM,UAAU,0BAA0B,CACxC,IAAkC;IAElC,cAAc,GAAG,IAAI,CAAC;AACxB,CAAC;AAGD,MAAM,UAAU,gCAAgC;IAG9C,OAAO,cAAc,CAAC;AACxB,CAAC;AAgBD,MAAM,UAAU,gBAAgB,CAAC,IAAyB;IACxD,OAAO,IAAI,CAAC,SAAS,IAAI,cAAc,CAAC;AAC1C,CAAC","sourcesContent":["import type { PopoverScrollStrategy } from '../../types.js';\nimport type { PopoverPlacement } from '../popover.js';\n\n/**\n * The capture phase catches the scroll of each ancestor element. The `scroll`\n * event is not cancelable, so a passive listener does not delay the scroll.\n */\nexport const SCROLL_LISTENER_OPTIONS: AddEventListenerOptions = {\n  capture: true,\n  passive: true,\n};\n\nexport type PopoverPositionStrategyMode = 'native' | 'floating';\n\nlet forcedStrategy: PopoverPositionStrategyMode | undefined;\n\n/** @internal Forces one position strategy. Only the tests call this function. */\nexport function setPopoverPositionStrategy(\n  mode?: PopoverPositionStrategyMode\n): void {\n  forcedStrategy = mode;\n}\n\n/** @internal Returns the forced position strategy, if the tests set one. */\nexport function getForcedPopoverPositionStrategy():\n  | PopoverPositionStrategyMode\n  | undefined {\n  return forcedStrategy;\n}\n\n/** The inputs that a position strategy reads from the popover component. */\nexport interface PopoverPositionHost {\n  /** The value is null or undefined at run time if the attribute is removed. */\n  readonly placement: PopoverPlacement | null | undefined;\n  readonly offset: number;\n  readonly flip: boolean;\n  readonly sameWidth: boolean;\n  readonly arrow: HTMLElement | null;\n  readonly arrowOffset: number;\n  readonly open: boolean;\n  readonly scrollStrategy: PopoverScrollStrategy;\n}\n\n/** Returns the placement, or the default if the attribute is removed. */\nexport function resolvePlacement(host: PopoverPositionHost): PopoverPlacement {\n  return host.placement ?? 'bottom-start';\n}\n"]}

package/components/popover/themes/light/popover.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,0)}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,0)}[data-anchored]{margin:0;position-visibility:anchors-visible}[data-anchored][data-placement=top]{position-area:top;justify-self:anchor-center}[data-anchored][data-placement=bottom]{position-area:bottom;justify-self:anchor-center}[data-anchored]:dir(ltr)[data-placement=top-start]{position-area:top span-right;justify-self:left}[data-anchored]:dir(ltr)[data-placement=top-end]{position-area:top span-left;justify-self:right}[data-anchored]:dir(ltr)[data-placement=bottom-start]{position-area:bottom span-right;justify-self:left}[data-anchored]:dir(ltr)[data-placement=bottom-end]{position-area:bottom span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=top-start]{position-area:top span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=top-end]{position-area:top span-right;justify-self:left}[data-anchored]:dir(rtl)[data-placement=bottom-start]{position-area:bottom span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=bottom-end]{position-area:bottom span-right;justify-self:left}[data-anchored][data-placement=left]{position-area:left;align-self:anchor-center}[data-anchored][data-placement=left-start]{position-area:left span-bottom;align-self:self-start}[data-anchored][data-placement=left-end]{position-area:left span-top;align-self:self-end}[data-anchored][data-placement=right]{position-area:right;align-self:anchor-center}[data-anchored][data-placement=right-start]{position-area:right span-bottom;align-self:self-start}[data-anchored][data-placement=right-end]{position-area:right span-top;align-self:self-end}[data-anchored][data-placement^=top],[data-anchored][data-placement^=bottom]{margin-top:var(--_igc-popover-offset, 0);margin-bottom:var(--_igc-popover-offset, 0)}[data-anchored][data-placement^=left],[data-anchored][data-placement^=right]{margin-left:var(--_igc-popover-offset, 0);margin-right:var(--_igc-popover-offset, 0)}[data-anchored][data-scroll-strategy=scroll]{position-visibility:always}:host([flip]) [data-anchored][data-placement^=top],:host([flip]) [data-anchored][data-placement^=bottom]{position-try-fallbacks:flip-block}:host([flip]) [data-anchored][data-placement^=left],:host([flip]) [data-anchored][data-placement^=right]{position-try-fallbacks:flip-inline}:host([same-width]) [data-anchored]{width:anchor-size(width)}`;
 //# sourceMappingURL=popover.base.css.js.map

package/components/popover/themes/light/popover.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.base.css.js","sourceRoot":"","sources":["../../../../../src/components/popover/themes/light/popover.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wnCAAwnC,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,0)}`;\n  "]}
+{"version":3,"file":"popover.base.css.js","sourceRoot":"","sources":["../../../../../src/components/popover/themes/light/popover.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,u3GAAu3G,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:contents}:popover-open{overflow:visible;isolation:isolate;height:-moz-fit-content;height:fit-content;inset:unset;border:none;padding:0;background:rgba(0,0,0,0)}[data-anchored]{margin:0;position-visibility:anchors-visible}[data-anchored][data-placement=top]{position-area:top;justify-self:anchor-center}[data-anchored][data-placement=bottom]{position-area:bottom;justify-self:anchor-center}[data-anchored]:dir(ltr)[data-placement=top-start]{position-area:top span-right;justify-self:left}[data-anchored]:dir(ltr)[data-placement=top-end]{position-area:top span-left;justify-self:right}[data-anchored]:dir(ltr)[data-placement=bottom-start]{position-area:bottom span-right;justify-self:left}[data-anchored]:dir(ltr)[data-placement=bottom-end]{position-area:bottom span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=top-start]{position-area:top span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=top-end]{position-area:top span-right;justify-self:left}[data-anchored]:dir(rtl)[data-placement=bottom-start]{position-area:bottom span-left;justify-self:right}[data-anchored]:dir(rtl)[data-placement=bottom-end]{position-area:bottom span-right;justify-self:left}[data-anchored][data-placement=left]{position-area:left;align-self:anchor-center}[data-anchored][data-placement=left-start]{position-area:left span-bottom;align-self:self-start}[data-anchored][data-placement=left-end]{position-area:left span-top;align-self:self-end}[data-anchored][data-placement=right]{position-area:right;align-self:anchor-center}[data-anchored][data-placement=right-start]{position-area:right span-bottom;align-self:self-start}[data-anchored][data-placement=right-end]{position-area:right span-top;align-self:self-end}[data-anchored][data-placement^=top],[data-anchored][data-placement^=bottom]{margin-top:var(--_igc-popover-offset, 0);margin-bottom:var(--_igc-popover-offset, 0)}[data-anchored][data-placement^=left],[data-anchored][data-placement^=right]{margin-left:var(--_igc-popover-offset, 0);margin-right:var(--_igc-popover-offset, 0)}[data-anchored][data-scroll-strategy=scroll]{position-visibility:always}:host([flip]) [data-anchored][data-placement^=top],:host([flip]) [data-anchored][data-placement^=bottom]{position-try-fallbacks:flip-block}:host([flip]) [data-anchored][data-placement^=left],:host([flip]) [data-anchored][data-placement^=right]{position-try-fallbacks:flip-inline}:host([same-width]) [data-anchored]{width:anchor-size(width)}`;\n  "]}