@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/overlay-service/connected-position.js

@@ -0,0 +1,661 @@
+import { EventStream, coerceArray, coerceCssPixelValue, isElementClippedByScrolling, isElementScrolledOutsideView, viewportRuler, } from "./overlay-viewport.js";
+import { overlayContainer } from "./overlay-container.js";
+/** The points of the origin element and the overlay element to connect. */
+export class ConnectionPositionPair {
+    originX;
+    originY;
+    overlayX;
+    overlayY;
+    offsetX;
+    offsetY;
+    panelClass;
+    constructor(origin, overlay, offsetX, offsetY, panelClass) {
+        this.offsetX = offsetX;
+        this.offsetY = offsetY;
+        this.panelClass = panelClass;
+        this.originX = origin.originX;
+        this.originY = origin.originY;
+        this.overlayX = overlay.overlayX;
+        this.overlayY = overlay.overlayY;
+    }
+}
+/** Whether the origin / overlay are clipped by or outside the strategy's scroll containers. */
+export class ScrollingVisibility {
+    isOriginClipped = false;
+    isOriginOutsideView = false;
+    isOverlayClipped = false;
+    isOverlayOutsideView = false;
+}
+/** Emitted when the applied position (or scroll visibility) changes. */
+export class ConnectedOverlayPositionChange {
+    connectionPair;
+    scrollableViewProperties;
+    constructor(connectionPair, scrollableViewProperties) {
+        this.connectionPair = connectionPair;
+        this.scrollableViewProperties = scrollableViewProperties;
+    }
+}
+export function validateVerticalPosition(property, value) {
+    if (value !== "top" && value !== "bottom" && value !== "center")
+        throw Error(`ConnectedPosition: Invalid ${property} "${value}". Expected "top", "bottom" or "center".`);
+}
+export function validateHorizontalPosition(property, value) {
+    if (value !== "start" && value !== "end" && value !== "center")
+        throw Error(`ConnectedPosition: Invalid ${property} "${value}". Expected "start", "end" or "center".`);
+}
+export const STANDARD_DROPDOWN_BELOW_POSITIONS = [
+    { originX: "start", originY: "bottom", overlayX: "start", overlayY: "top" },
+    { originX: "start", originY: "top", overlayX: "start", overlayY: "bottom" },
+    { originX: "end", originY: "bottom", overlayX: "end", overlayY: "top" },
+    { originX: "end", originY: "top", overlayX: "end", overlayY: "bottom" },
+];
+export const STANDARD_DROPDOWN_ADJACENT_POSITIONS = [
+    { originX: "end", originY: "top", overlayX: "start", overlayY: "top" },
+    { originX: "end", originY: "bottom", overlayX: "start", overlayY: "bottom" },
+    { originX: "start", originY: "top", overlayX: "end", overlayY: "top" },
+    { originX: "start", originY: "bottom", overlayX: "end", overlayY: "bottom" },
+];
+const boundingBoxClass = "cdk-overlay-connected-position-bounding-box";
+const cssUnitPattern = /([A-Za-z%]+)$/;
+function extendStyles(destination, source) {
+    for (const key in source)
+        if (Object.hasOwn(source, key))
+            destination[key] = source[key];
+}
+function getPixelValue(input) {
+    if (typeof input !== "number" && input != null) {
+        const [value, units] = input.split(cssUnitPattern);
+        return !units || units === "px" ? parseFloat(value) : null;
+    }
+    return input || null;
+}
+function getRoundedBoundingClientRect(clientRect) {
+    return {
+        top: Math.floor(clientRect.top),
+        right: Math.floor(clientRect.right),
+        bottom: Math.floor(clientRect.bottom),
+        left: Math.floor(clientRect.left),
+        width: Math.floor(clientRect.width),
+        height: Math.floor(clientRect.height),
+    };
+}
+function compareScrollVisibility(a, b) {
+    if (a === b)
+        return true;
+    return (a.isOriginClipped === b.isOriginClipped &&
+        a.isOriginOutsideView === b.isOriginOutsideView &&
+        a.isOverlayClipped === b.isOverlayClipped &&
+        a.isOverlayOutsideView === b.isOverlayOutsideView);
+}
+export class FlexibleConnectedPositionStrategy {
+    _overlayRef;
+    _isInitialRender = false;
+    _lastBoundingBoxSize = { width: 0, height: 0 };
+    _isPushed = false;
+    _canPush = true;
+    _growAfterOpen = false;
+    _hasFlexibleDimensions = true;
+    _positionLocked = false;
+    _originRect;
+    _overlayRect;
+    _viewportRect;
+    _containerRect;
+    _viewportMargin = 0;
+    _scrollables = [];
+    _preferredPositions = [];
+    _origin;
+    _pane;
+    _isDisposed = false;
+    _boundingBox = null;
+    _lastPosition = null;
+    _lastScrollVisibility = null;
+    _positionChanges = new EventStream();
+    _resizeSubscription = { unsubscribe() { } };
+    _offsetX = 0;
+    _offsetY = 0;
+    _transformOriginSelector;
+    _appliedPanelClasses = [];
+    _previousPushAmount = null;
+    /** Position changes (only computed while subscribed). */
+    positionChanges = this._positionChanges;
+    get positions() {
+        return this._preferredPositions;
+    }
+    _viewportRuler;
+    _document;
+    _overlayContainer;
+    constructor(connectedTo, ruler = viewportRuler(), doc = document, container = overlayContainer()) {
+        this._viewportRuler = ruler;
+        this._document = doc;
+        this._overlayContainer = container;
+        this.setOrigin(connectedTo);
+    }
+    attach(overlayRef) {
+        if (this._overlayRef && overlayRef !== this._overlayRef)
+            throw Error("This position strategy is already attached to an overlay");
+        this._validatePositions();
+        overlayRef.hostElement.classList.add(boundingBoxClass);
+        this._overlayRef = overlayRef;
+        this._boundingBox = overlayRef.hostElement;
+        this._pane = overlayRef.overlayElement;
+        this._isDisposed = false;
+        this._isInitialRender = true;
+        this._lastPosition = null;
+        this._resizeSubscription.unsubscribe();
+        this._resizeSubscription = this._viewportRuler.change().subscribe(() => {
+            // Re-measure from scratch after a resize, as on open.
+            this._isInitialRender = true;
+            this.apply();
+        });
+    }
+    /**
+     * Position the overlay: the first preferred position fully inside the viewport; else (flexible
+     * dimensions) the flexible fit with the largest weighted area; else (push) the fallback with the
+     * largest visible area, pushed on-screen; else that fallback as is.
+     */
+    apply() {
+        if (this._isDisposed || typeof window === "undefined")
+            return;
+        // Locked: keep the last position after the initial render.
+        if (!this._isInitialRender && this._positionLocked && this._lastPosition) {
+            this.reapplyLastPosition();
+            return;
+        }
+        this._clearPanelClasses();
+        this._resetOverlayElementStyles();
+        this._resetBoundingBoxStyles();
+        // Measure once (reflow); everything below uses these.
+        this._viewportRect = this._getNarrowedViewportRect();
+        this._originRect = this._getOriginRect();
+        this._overlayRect = this._pane.getBoundingClientRect();
+        this._containerRect = this._getContainerRect();
+        const originRect = this._originRect, overlayRect = this._overlayRect, viewportRect = this._viewportRect, containerRect = this._containerRect;
+        const flexibleFits = [];
+        let fallback;
+        for (const pos of this._preferredPositions) {
+            const originPoint = this._getOriginPoint(originRect, containerRect, pos);
+            const overlayPoint = this._getOverlayPoint(originPoint, overlayRect, pos);
+            const overlayFit = this._getOverlayFit(overlayPoint, overlayRect, viewportRect, pos);
+            if (overlayFit.isCompletelyWithinViewport) {
+                this._isPushed = false;
+                this._applyPosition(pos, originPoint);
+                return;
+            }
+            if (this._canFitWithFlexibleDimensions(overlayFit, overlayPoint, viewportRect)) {
+                flexibleFits.push({ position: pos, origin: originPoint, overlayRect, boundingBoxRect: this._calculateBoundingBoxRect(originPoint, pos) });
+                continue;
+            }
+            if (!fallback || fallback.overlayFit.visibleArea < overlayFit.visibleArea)
+                fallback = { overlayFit, overlayPoint, originPoint, position: pos, overlayRect };
+        }
+        if (flexibleFits.length) {
+            let bestFit = null, bestScore = -1;
+            for (const fit of flexibleFits) {
+                const score = fit.boundingBoxRect.width * fit.boundingBoxRect.height * (fit.position.weight || 1);
+                if (score > bestScore) {
+                    bestScore = score;
+                    bestFit = fit;
+                }
+            }
+            this._isPushed = false;
+            this._applyPosition(bestFit.position, bestFit.origin);
+            return;
+        }
+        if (this._canPush) {
+            this._isPushed = true;
+            this._applyPosition(fallback.position, fallback.originPoint);
+            return;
+        }
+        this._applyPosition(fallback.position, fallback.originPoint);
+    }
+    detach() {
+        this._clearPanelClasses();
+        this._lastPosition = null;
+        this._previousPushAmount = null;
+        this._resizeSubscription.unsubscribe();
+    }
+    dispose() {
+        if (this._isDisposed)
+            return;
+        if (this._boundingBox)
+            extendStyles(this._boundingBox.style, { top: "", left: "", right: "", bottom: "", height: "", width: "", alignItems: "", justifyContent: "" });
+        if (this._pane)
+            this._resetOverlayElementStyles();
+        if (this._overlayRef)
+            this._overlayRef.hostElement.classList.remove(boundingBoxClass);
+        this.detach();
+        this._positionChanges.complete();
+        this._overlayRef = this._boundingBox = null;
+        this._isDisposed = true;
+    }
+    /** Re-align in the last applied position even if a preferred one fits now. */
+    reapplyLastPosition() {
+        if (this._isDisposed || typeof window === "undefined")
+            return;
+        const lastPosition = this._lastPosition;
+        if (lastPosition) {
+            this._originRect = this._getOriginRect();
+            this._overlayRect = this._pane.getBoundingClientRect();
+            this._viewportRect = this._getNarrowedViewportRect();
+            this._containerRect = this._getContainerRect();
+            this._applyPosition(lastPosition, this._getOriginPoint(this._originRect, this._containerRect, lastPosition));
+        }
+        else
+            this.apply();
+    }
+    /** Scroll containers of the origin, for `positionChanges` clipping info. Deviation: elements. */
+    withScrollableContainers(scrollables) {
+        this._scrollables = scrollables;
+        return this;
+    }
+    withPositions(positions) {
+        this._preferredPositions = positions;
+        if (positions.indexOf(this._lastPosition) === -1)
+            this._lastPosition = null;
+        this._validatePositions();
+        return this;
+    }
+    withViewportMargin(margin) {
+        this._viewportMargin = margin;
+        return this;
+    }
+    withFlexibleDimensions(flexibleDimensions = true) {
+        this._hasFlexibleDimensions = flexibleDimensions;
+        return this;
+    }
+    withGrowAfterOpen(growAfterOpen = true) {
+        this._growAfterOpen = growAfterOpen;
+        return this;
+    }
+    withPush(canPush = true) {
+        this._canPush = canPush;
+        return this;
+    }
+    withLockedPosition(isLocked = true) {
+        this._positionLocked = isLocked;
+        return this;
+    }
+    setOrigin(origin) {
+        this._origin = origin;
+        return this;
+    }
+    withDefaultOffsetX(offset) {
+        this._offsetX = offset;
+        return this;
+    }
+    withDefaultOffsetY(offset) {
+        this._offsetY = offset;
+        return this;
+    }
+    /** Set `transform-origin` (matching the applied position) on elements matching `selector`. */
+    withTransformOriginOn(selector) {
+        this._transformOriginSelector = selector;
+        return this;
+    }
+    _getOriginPoint(originRect, containerRect, pos) {
+        let x;
+        if (pos.originX == "center")
+            x = originRect.left + originRect.width / 2;
+        else {
+            const startX = this._isRtl() ? originRect.right : originRect.left;
+            const endX = this._isRtl() ? originRect.left : originRect.right;
+            x = pos.originX == "start" ? startX : endX;
+        }
+        // A container pushed off-screen (e.g. by a scrolled-to-top body with negative offset).
+        if (containerRect.left < 0)
+            x -= containerRect.left;
+        let y;
+        if (pos.originY == "center")
+            y = originRect.top + originRect.height / 2;
+        else
+            y = pos.originY == "top" ? originRect.top : originRect.bottom;
+        if (containerRect.top < 0)
+            y -= containerRect.top;
+        return { x, y };
+    }
+    _getOverlayPoint(originPoint, overlayRect, pos) {
+        let overlayStartX;
+        if (pos.overlayX == "center")
+            overlayStartX = -overlayRect.width / 2;
+        else if (pos.overlayX === "start")
+            overlayStartX = this._isRtl() ? -overlayRect.width : 0;
+        else
+            overlayStartX = this._isRtl() ? 0 : -overlayRect.width;
+        let overlayStartY;
+        if (pos.overlayY == "center")
+            overlayStartY = -overlayRect.height / 2;
+        else
+            overlayStartY = pos.overlayY == "top" ? 0 : -overlayRect.height;
+        return { x: originPoint.x + overlayStartX, y: originPoint.y + overlayStartY };
+    }
+    _getOverlayFit(point, rawOverlayRect, viewport, position) {
+        // Rounded down: sub-pixel sizes must not fail an otherwise fitting position.
+        const overlay = getRoundedBoundingClientRect(rawOverlayRect);
+        let { x, y } = point;
+        const offsetX = this._getOffset(position, "x"), offsetY = this._getOffset(position, "y");
+        if (offsetX)
+            x += offsetX;
+        if (offsetY)
+            y += offsetY;
+        const leftOverflow = 0 - x, rightOverflow = x + overlay.width - viewport.width, topOverflow = 0 - y, bottomOverflow = y + overlay.height - viewport.height;
+        const visibleWidth = this._subtractOverflows(overlay.width, leftOverflow, rightOverflow);
+        const visibleHeight = this._subtractOverflows(overlay.height, topOverflow, bottomOverflow);
+        const visibleArea = visibleWidth * visibleHeight;
+        return {
+            visibleArea,
+            isCompletelyWithinViewport: overlay.width * overlay.height === visibleArea,
+            fitsInViewportVertically: visibleHeight === overlay.height,
+            fitsInViewportHorizontally: visibleWidth == overlay.width,
+        };
+    }
+    _canFitWithFlexibleDimensions(fit, point, viewport) {
+        if (this._hasFlexibleDimensions) {
+            const availableHeight = viewport.bottom - point.y;
+            const availableWidth = viewport.right - point.x;
+            const minHeight = getPixelValue(this._overlayRef.getConfig().minHeight);
+            const minWidth = getPixelValue(this._overlayRef.getConfig().minWidth);
+            const verticalFit = fit.fitsInViewportVertically || (minHeight != null && minHeight <= availableHeight);
+            const horizontalFit = fit.fitsInViewportHorizontally || (minWidth != null && minWidth <= availableWidth);
+            return verticalFit && horizontalFit;
+        }
+        return false;
+    }
+    _pushOverlayOnScreen(start, rawOverlayRect, scrollPosition) {
+        // Locked: reuse the previous push so the overlay doesn't jump while scrolling.
+        if (this._previousPushAmount && this._positionLocked)
+            return { x: start.x + this._previousPushAmount.x, y: start.y + this._previousPushAmount.y };
+        const overlay = getRoundedBoundingClientRect(rawOverlayRect);
+        const viewport = this._viewportRect;
+        const overflowRight = Math.max(start.x + overlay.width - viewport.width, 0);
+        const overflowBottom = Math.max(start.y + overlay.height - viewport.height, 0);
+        const overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0);
+        const overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0);
+        let pushX = 0, pushY = 0;
+        // Larger than the viewport: push the top-left corner on-screen, overflow right / bottom.
+        if (overlay.width <= viewport.width)
+            pushX = overflowLeft || -overflowRight;
+        else
+            pushX = start.x < this._getViewportMarginStart() ? viewport.left - scrollPosition.left - start.x : 0;
+        if (overlay.height <= viewport.height)
+            pushY = overflowTop || -overflowBottom;
+        else
+            pushY = start.y < this._getViewportMarginTop() ? viewport.top - scrollPosition.top - start.y : 0;
+        this._previousPushAmount = { x: pushX, y: pushY };
+        return { x: start.x + pushX, y: start.y + pushY };
+    }
+    _applyPosition(position, originPoint) {
+        this._setTransformOrigin(position);
+        this._setOverlayElementStyles(originPoint, position);
+        this._setBoundingBoxStyles(originPoint, position);
+        if (position.panelClass)
+            this._addPanelClasses(position.panelClass);
+        // Scroll visibility costs layout reads: only while someone listens.
+        if (this._positionChanges.observed) {
+            const scrollVisibility = this._getScrollVisibility();
+            if (position !== this._lastPosition || !this._lastScrollVisibility || !compareScrollVisibility(this._lastScrollVisibility, scrollVisibility))
+                this._positionChanges.next(new ConnectedOverlayPositionChange(position, scrollVisibility));
+            this._lastScrollVisibility = scrollVisibility;
+        }
+        this._lastPosition = position;
+        this._isInitialRender = false;
+    }
+    _setTransformOrigin(position) {
+        if (!this._transformOriginSelector)
+            return;
+        const elements = this._boundingBox.querySelectorAll(this._transformOriginSelector);
+        let xOrigin;
+        const yOrigin = position.overlayY;
+        if (position.overlayX === "center")
+            xOrigin = "center";
+        else if (this._isRtl())
+            xOrigin = position.overlayX === "start" ? "right" : "left";
+        else
+            xOrigin = position.overlayX === "start" ? "left" : "right";
+        for (const element of elements)
+            element.style.transformOrigin = `${xOrigin} ${yOrigin}`;
+    }
+    /** Bounding box (sizing wrapper) for a position: no measuring, no styles. */
+    _calculateBoundingBoxRect(origin, position) {
+        const viewport = this._viewportRect;
+        const isRtl = this._isRtl();
+        let height, top, bottom;
+        if (position.overlayY === "top") {
+            top = origin.y;
+            height = viewport.height - top + this._getViewportMarginBottom();
+        }
+        else if (position.overlayY === "bottom") {
+            // Bottom-anchored: measured from the viewport bottom (margins counted twice to cancel the top one).
+            bottom = viewport.height - origin.y + this._getViewportMarginTop() + this._getViewportMarginBottom();
+            height = viewport.height - bottom + this._getViewportMarginTop();
+        }
+        else {
+            // Centered: twice the smaller distance to a viewport edge.
+            const smallestDistanceToViewportEdge = Math.min(viewport.bottom - origin.y + viewport.top, origin.y);
+            const previousHeight = this._lastBoundingBoxSize.height;
+            height = smallestDistanceToViewportEdge * 2;
+            top = origin.y - smallestDistanceToViewportEdge;
+            if (height > previousHeight && !this._isInitialRender && !this._growAfterOpen)
+                top = origin.y - previousHeight / 2;
+        }
+        const isBoundedByRightViewportEdge = (position.overlayX === "start" && !isRtl) || (position.overlayX === "end" && isRtl);
+        const isBoundedByLeftViewportEdge = (position.overlayX === "end" && !isRtl) || (position.overlayX === "start" && isRtl);
+        let width, left, right;
+        if (isBoundedByLeftViewportEdge) {
+            right = viewport.width - origin.x + this._getViewportMarginStart() + this._getViewportMarginEnd();
+            width = origin.x - this._getViewportMarginStart();
+        }
+        else if (isBoundedByRightViewportEdge) {
+            left = origin.x;
+            width = viewport.right - origin.x - this._getViewportMarginEnd();
+        }
+        else {
+            const smallestDistanceToViewportEdge = Math.min(viewport.right - origin.x + viewport.left, origin.x);
+            const previousWidth = this._lastBoundingBoxSize.width;
+            width = smallestDistanceToViewportEdge * 2;
+            left = origin.x - smallestDistanceToViewportEdge;
+            if (width > previousWidth && !this._isInitialRender && !this._growAfterOpen)
+                left = origin.x - previousWidth / 2;
+        }
+        return { top: top, left: left, bottom: bottom, right: right, width, height };
+    }
+    _setBoundingBoxStyles(origin, position) {
+        const boundingBoxRect = this._calculateBoundingBoxRect(origin, position);
+        // After open the box never grows (unless withGrowAfterOpen): no resize jumps while scrolling.
+        if (!this._isInitialRender && !this._growAfterOpen) {
+            boundingBoxRect.height = Math.min(boundingBoxRect.height, this._lastBoundingBoxSize.height);
+            boundingBoxRect.width = Math.min(boundingBoxRect.width, this._lastBoundingBoxSize.width);
+        }
+        const styles = {};
+        if (this._hasExactPosition()) {
+            styles.top = styles.left = "0";
+            styles.bottom = styles.right = "auto";
+            styles.maxHeight = styles.maxWidth = "";
+            styles.width = styles.height = "100%";
+        }
+        else {
+            const { maxHeight, maxWidth } = this._overlayRef.getConfig();
+            styles.width = coerceCssPixelValue(boundingBoxRect.width);
+            styles.height = coerceCssPixelValue(boundingBoxRect.height);
+            styles.top = coerceCssPixelValue(boundingBoxRect.top) || "auto";
+            styles.bottom = coerceCssPixelValue(boundingBoxRect.bottom) || "auto";
+            styles.left = coerceCssPixelValue(boundingBoxRect.left) || "auto";
+            styles.right = coerceCssPixelValue(boundingBoxRect.right) || "auto";
+            if (position.overlayX === "center")
+                styles.alignItems = "center";
+            else
+                styles.alignItems = position.overlayX === "end" ? "flex-end" : "flex-start";
+            if (position.overlayY === "center")
+                styles.justifyContent = "center";
+            else
+                styles.justifyContent = position.overlayY === "bottom" ? "flex-end" : "flex-start";
+            if (maxHeight)
+                styles.maxHeight = coerceCssPixelValue(maxHeight);
+            if (maxWidth)
+                styles.maxWidth = coerceCssPixelValue(maxWidth);
+        }
+        this._lastBoundingBoxSize = boundingBoxRect;
+        extendStyles(this._boundingBox.style, styles);
+    }
+    _resetBoundingBoxStyles() {
+        extendStyles(this._boundingBox.style, { top: "0", left: "0", right: "0", bottom: "0", height: "", width: "", alignItems: "", justifyContent: "" });
+    }
+    _resetOverlayElementStyles() {
+        extendStyles(this._pane.style, { top: "", left: "", bottom: "", right: "", position: "", transform: "" });
+    }
+    _setOverlayElementStyles(originPoint, position) {
+        const styles = {};
+        const hasExactPosition = this._hasExactPosition();
+        const hasFlexibleDimensions = this._hasFlexibleDimensions;
+        const config = this._overlayRef.getConfig();
+        if (hasExactPosition) {
+            const scrollPosition = this._viewportRuler.getViewportScrollPosition();
+            extendStyles(styles, this._getExactOverlayY(position, originPoint, scrollPosition));
+            extendStyles(styles, this._getExactOverlayX(position, originPoint, scrollPosition));
+        }
+        else
+            styles.position = "static";
+        // Offsets as a transform: they must not change the bounding box (flexible size) math.
+        let transformString = "";
+        const offsetX = this._getOffset(position, "x"), offsetY = this._getOffset(position, "y");
+        if (offsetX)
+            transformString += `translateX(${offsetX}px) `;
+        if (offsetY)
+            transformString += `translateY(${offsetY}px)`;
+        styles.transform = transformString.trim();
+        // Flexible: max sizes live on the bounding box; exact: on the pane.
+        if (config.maxHeight) {
+            if (hasExactPosition)
+                styles.maxHeight = coerceCssPixelValue(config.maxHeight);
+            else if (hasFlexibleDimensions)
+                styles.maxHeight = "";
+        }
+        if (config.maxWidth) {
+            if (hasExactPosition)
+                styles.maxWidth = coerceCssPixelValue(config.maxWidth);
+            else if (hasFlexibleDimensions)
+                styles.maxWidth = "";
+        }
+        extendStyles(this._pane.style, styles);
+    }
+    _getExactOverlayY(position, originPoint, scrollPosition) {
+        const styles = { top: "", bottom: "" };
+        let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
+        if (this._isPushed)
+            overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
+        // Bottom-anchored overlays keep their bottom edge when their height changes.
+        if (position.overlayY === "bottom") {
+            const documentHeight = this._document.documentElement.clientHeight;
+            styles.bottom = `${documentHeight - (overlayPoint.y + this._overlayRect.height)}px`;
+        }
+        else
+            styles.top = coerceCssPixelValue(overlayPoint.y);
+        return styles;
+    }
+    _getExactOverlayX(position, originPoint, scrollPosition) {
+        const styles = { left: "", right: "" };
+        let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
+        if (this._isPushed)
+            overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
+        let horizontalStyleProperty;
+        if (this._isRtl())
+            horizontalStyleProperty = position.overlayX === "end" ? "left" : "right";
+        else
+            horizontalStyleProperty = position.overlayX === "end" ? "right" : "left";
+        if (horizontalStyleProperty === "right") {
+            const documentWidth = this._document.documentElement.clientWidth;
+            styles.right = `${documentWidth - (overlayPoint.x + this._overlayRect.width)}px`;
+        }
+        else
+            styles.left = coerceCssPixelValue(overlayPoint.x);
+        return styles;
+    }
+    _getScrollVisibility() {
+        const originBounds = this._getOriginRect();
+        const overlayBounds = this._pane.getBoundingClientRect();
+        const scrollContainerBounds = this._scrollables.map((scrollable) => scrollable.getBoundingClientRect());
+        return {
+            isOriginClipped: isElementClippedByScrolling(originBounds, scrollContainerBounds),
+            isOriginOutsideView: isElementScrolledOutsideView(originBounds, scrollContainerBounds),
+            isOverlayClipped: isElementClippedByScrolling(overlayBounds, scrollContainerBounds),
+            isOverlayOutsideView: isElementScrolledOutsideView(overlayBounds, scrollContainerBounds),
+        };
+    }
+    _subtractOverflows(length, ...overflows) {
+        return overflows.reduce((currentValue, currentOverflow) => currentValue - Math.max(currentOverflow, 0), length);
+    }
+    _getNarrowedViewportRect() {
+        // documentElement client size, not the ruler: excludes the scrollbar.
+        const width = this._document.documentElement.clientWidth;
+        const height = this._document.documentElement.clientHeight;
+        const scrollPosition = this._viewportRuler.getViewportScrollPosition();
+        return {
+            top: scrollPosition.top + this._getViewportMarginTop(),
+            left: scrollPosition.left + this._getViewportMarginStart(),
+            right: scrollPosition.left + width - this._getViewportMarginEnd(),
+            bottom: scrollPosition.top + height - this._getViewportMarginBottom(),
+            width: width - this._getViewportMarginStart() - this._getViewportMarginEnd(),
+            height: height - this._getViewportMarginTop() - this._getViewportMarginBottom(),
+        };
+    }
+    _isRtl() {
+        return this._overlayRef.getDirection() === "rtl";
+    }
+    _hasExactPosition() {
+        return !this._hasFlexibleDimensions || this._isPushed;
+    }
+    _getOffset(position, axis) {
+        if (axis === "x")
+            return position.offsetX == null ? this._offsetX : position.offsetX;
+        return position.offsetY == null ? this._offsetY : position.offsetY;
+    }
+    _validatePositions() {
+        if (!this._preferredPositions.length)
+            throw Error("FlexibleConnectedPositionStrategy: At least one position is required.");
+        for (const pair of this._preferredPositions) {
+            validateHorizontalPosition("originX", pair.originX);
+            validateVerticalPosition("originY", pair.originY);
+            validateHorizontalPosition("overlayX", pair.overlayX);
+            validateVerticalPosition("overlayY", pair.overlayY);
+        }
+    }
+    _addPanelClasses(cssClasses) {
+        if (!this._pane)
+            return;
+        for (const cssClass of coerceArray(cssClasses))
+            if (cssClass !== "" && this._appliedPanelClasses.indexOf(cssClass) === -1) {
+                this._appliedPanelClasses.push(cssClass);
+                this._pane.classList.add(cssClass);
+            }
+    }
+    _clearPanelClasses() {
+        if (!this._pane)
+            return;
+        for (const cssClass of this._appliedPanelClasses)
+            this._pane.classList.remove(cssClass);
+        this._appliedPanelClasses = [];
+    }
+    _margin(side) {
+        if (typeof this._viewportMargin === "number")
+            return this._viewportMargin;
+        return this._viewportMargin?.[side] ?? 0;
+    }
+    _getViewportMarginStart = () => this._margin("start");
+    _getViewportMarginEnd = () => this._margin("end");
+    _getViewportMarginTop = () => this._margin("top");
+    _getViewportMarginBottom = () => this._margin("bottom");
+    _getOriginRect() {
+        const origin = this._origin;
+        if (origin instanceof Element)
+            return origin.getBoundingClientRect();
+        // Point origin (e.g. a context menu at the pointer).
+        const width = origin.width || 0, height = origin.height || 0;
+        return { top: origin.y, bottom: origin.y + height, left: origin.x, right: origin.x + width, height, width };
+    }
+    _getContainerRect() {
+        return this._overlayContainer.getContainerElement().getBoundingClientRect();
+    }
+}
+/** A flexible connected position strategy for `origin`. */
+export function createFlexibleConnectedPositionStrategy(origin) {
+    return new FlexibleConnectedPositionStrategy(origin);
+}