[6a3a178] | 1 | /**
|
---|
| 2 | * @license
|
---|
| 3 | * Copyright Google LLC All Rights Reserved.
|
---|
| 4 | *
|
---|
| 5 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 6 | * found in the LICENSE file at https://angular.io/license
|
---|
| 7 | */
|
---|
| 8 | import { PositionStrategy } from './position-strategy';
|
---|
| 9 | import { ElementRef } from '@angular/core';
|
---|
| 10 | import { ViewportRuler, CdkScrollable } from '@angular/cdk/scrolling';
|
---|
| 11 | import { ConnectedOverlayPositionChange, ConnectionPositionPair } from './connected-position';
|
---|
| 12 | import { Observable } from 'rxjs';
|
---|
| 13 | import { OverlayReference } from '../overlay-reference';
|
---|
| 14 | import { Platform } from '@angular/cdk/platform';
|
---|
| 15 | import { OverlayContainer } from '../overlay-container';
|
---|
| 16 | /** Possible values that can be set as the origin of a FlexibleConnectedPositionStrategy. */
|
---|
| 17 | export declare type FlexibleConnectedPositionStrategyOrigin = ElementRef | Element | Point & {
|
---|
| 18 | width?: number;
|
---|
| 19 | height?: number;
|
---|
| 20 | };
|
---|
| 21 | /**
|
---|
| 22 | * A strategy for positioning overlays. Using this strategy, an overlay is given an
|
---|
| 23 | * implicit position relative some origin element. The relative position is defined in terms of
|
---|
| 24 | * a point on the origin element that is connected to a point on the overlay element. For example,
|
---|
| 25 | * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
|
---|
| 26 | * of the overlay.
|
---|
| 27 | */
|
---|
| 28 | export declare class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
---|
| 29 | private _viewportRuler;
|
---|
| 30 | private _document;
|
---|
| 31 | private _platform;
|
---|
| 32 | private _overlayContainer;
|
---|
| 33 | /** The overlay to which this strategy is attached. */
|
---|
| 34 | private _overlayRef;
|
---|
| 35 | /** Whether we're performing the very first positioning of the overlay. */
|
---|
| 36 | private _isInitialRender;
|
---|
| 37 | /** Last size used for the bounding box. Used to avoid resizing the overlay after open. */
|
---|
| 38 | private _lastBoundingBoxSize;
|
---|
| 39 | /** Whether the overlay was pushed in a previous positioning. */
|
---|
| 40 | private _isPushed;
|
---|
| 41 | /** Whether the overlay can be pushed on-screen on the initial open. */
|
---|
| 42 | private _canPush;
|
---|
| 43 | /** Whether the overlay can grow via flexible width/height after the initial open. */
|
---|
| 44 | private _growAfterOpen;
|
---|
| 45 | /** Whether the overlay's width and height can be constrained to fit within the viewport. */
|
---|
| 46 | private _hasFlexibleDimensions;
|
---|
| 47 | /** Whether the overlay position is locked. */
|
---|
| 48 | private _positionLocked;
|
---|
| 49 | /** Cached origin dimensions */
|
---|
| 50 | private _originRect;
|
---|
| 51 | /** Cached overlay dimensions */
|
---|
| 52 | private _overlayRect;
|
---|
| 53 | /** Cached viewport dimensions */
|
---|
| 54 | private _viewportRect;
|
---|
| 55 | /** Amount of space that must be maintained between the overlay and the edge of the viewport. */
|
---|
| 56 | private _viewportMargin;
|
---|
| 57 | /** The Scrollable containers used to check scrollable view properties on position change. */
|
---|
| 58 | private _scrollables;
|
---|
| 59 | /** Ordered list of preferred positions, from most to least desirable. */
|
---|
| 60 | _preferredPositions: ConnectionPositionPair[];
|
---|
| 61 | /** The origin element against which the overlay will be positioned. */
|
---|
| 62 | private _origin;
|
---|
| 63 | /** The overlay pane element. */
|
---|
| 64 | private _pane;
|
---|
| 65 | /** Whether the strategy has been disposed of already. */
|
---|
| 66 | private _isDisposed;
|
---|
| 67 | /**
|
---|
| 68 | * Parent element for the overlay panel used to constrain the overlay panel's size to fit
|
---|
| 69 | * within the viewport.
|
---|
| 70 | */
|
---|
| 71 | private _boundingBox;
|
---|
| 72 | /** The last position to have been calculated as the best fit position. */
|
---|
| 73 | private _lastPosition;
|
---|
| 74 | /** Subject that emits whenever the position changes. */
|
---|
| 75 | private readonly _positionChanges;
|
---|
| 76 | /** Subscription to viewport size changes. */
|
---|
| 77 | private _resizeSubscription;
|
---|
| 78 | /** Default offset for the overlay along the x axis. */
|
---|
| 79 | private _offsetX;
|
---|
| 80 | /** Default offset for the overlay along the y axis. */
|
---|
| 81 | private _offsetY;
|
---|
| 82 | /** Selector to be used when finding the elements on which to set the transform origin. */
|
---|
| 83 | private _transformOriginSelector;
|
---|
| 84 | /** Keeps track of the CSS classes that the position strategy has applied on the overlay panel. */
|
---|
| 85 | private _appliedPanelClasses;
|
---|
| 86 | /** Amount by which the overlay was pushed in each axis during the last time it was positioned. */
|
---|
| 87 | private _previousPushAmount;
|
---|
| 88 | /** Observable sequence of position changes. */
|
---|
| 89 | positionChanges: Observable<ConnectedOverlayPositionChange>;
|
---|
| 90 | /** Ordered list of preferred positions, from most to least desirable. */
|
---|
| 91 | get positions(): ConnectionPositionPair[];
|
---|
| 92 | constructor(connectedTo: FlexibleConnectedPositionStrategyOrigin, _viewportRuler: ViewportRuler, _document: Document, _platform: Platform, _overlayContainer: OverlayContainer);
|
---|
| 93 | /** Attaches this position strategy to an overlay. */
|
---|
| 94 | attach(overlayRef: OverlayReference): void;
|
---|
| 95 | /**
|
---|
| 96 | * Updates the position of the overlay element, using whichever preferred position relative
|
---|
| 97 | * to the origin best fits on-screen.
|
---|
| 98 | *
|
---|
| 99 | * The selection of a position goes as follows:
|
---|
| 100 | * - If any positions fit completely within the viewport as-is,
|
---|
| 101 | * choose the first position that does so.
|
---|
| 102 | * - If flexible dimensions are enabled and at least one satifies the given minimum width/height,
|
---|
| 103 | * choose the position with the greatest available size modified by the positions' weight.
|
---|
| 104 | * - If pushing is enabled, take the position that went off-screen the least and push it
|
---|
| 105 | * on-screen.
|
---|
| 106 | * - If none of the previous criteria were met, use the position that goes off-screen the least.
|
---|
| 107 | * @docs-private
|
---|
| 108 | */
|
---|
| 109 | apply(): void;
|
---|
| 110 | detach(): void;
|
---|
| 111 | /** Cleanup after the element gets destroyed. */
|
---|
| 112 | dispose(): void;
|
---|
| 113 | /**
|
---|
| 114 | * This re-aligns the overlay element with the trigger in its last calculated position,
|
---|
| 115 | * even if a position higher in the "preferred positions" list would now fit. This
|
---|
| 116 | * allows one to re-align the panel without changing the orientation of the panel.
|
---|
| 117 | */
|
---|
| 118 | reapplyLastPosition(): void;
|
---|
| 119 | /**
|
---|
| 120 | * Sets the list of Scrollable containers that host the origin element so that
|
---|
| 121 | * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
|
---|
| 122 | * Scrollable must be an ancestor element of the strategy's origin element.
|
---|
| 123 | */
|
---|
| 124 | withScrollableContainers(scrollables: CdkScrollable[]): this;
|
---|
| 125 | /**
|
---|
| 126 | * Adds new preferred positions.
|
---|
| 127 | * @param positions List of positions options for this overlay.
|
---|
| 128 | */
|
---|
| 129 | withPositions(positions: ConnectedPosition[]): this;
|
---|
| 130 | /**
|
---|
| 131 | * Sets a minimum distance the overlay may be positioned to the edge of the viewport.
|
---|
| 132 | * @param margin Required margin between the overlay and the viewport edge in pixels.
|
---|
| 133 | */
|
---|
| 134 | withViewportMargin(margin: number): this;
|
---|
| 135 | /** Sets whether the overlay's width and height can be constrained to fit within the viewport. */
|
---|
| 136 | withFlexibleDimensions(flexibleDimensions?: boolean): this;
|
---|
| 137 | /** Sets whether the overlay can grow after the initial open via flexible width/height. */
|
---|
| 138 | withGrowAfterOpen(growAfterOpen?: boolean): this;
|
---|
| 139 | /** Sets whether the overlay can be pushed on-screen if none of the provided positions fit. */
|
---|
| 140 | withPush(canPush?: boolean): this;
|
---|
| 141 | /**
|
---|
| 142 | * Sets whether the overlay's position should be locked in after it is positioned
|
---|
| 143 | * initially. When an overlay is locked in, it won't attempt to reposition itself
|
---|
| 144 | * when the position is re-applied (e.g. when the user scrolls away).
|
---|
| 145 | * @param isLocked Whether the overlay should locked in.
|
---|
| 146 | */
|
---|
| 147 | withLockedPosition(isLocked?: boolean): this;
|
---|
| 148 | /**
|
---|
| 149 | * Sets the origin, relative to which to position the overlay.
|
---|
| 150 | * Using an element origin is useful for building components that need to be positioned
|
---|
| 151 | * relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be
|
---|
| 152 | * used for cases like contextual menus which open relative to the user's pointer.
|
---|
| 153 | * @param origin Reference to the new origin.
|
---|
| 154 | */
|
---|
| 155 | setOrigin(origin: FlexibleConnectedPositionStrategyOrigin): this;
|
---|
| 156 | /**
|
---|
| 157 | * Sets the default offset for the overlay's connection point on the x-axis.
|
---|
| 158 | * @param offset New offset in the X axis.
|
---|
| 159 | */
|
---|
| 160 | withDefaultOffsetX(offset: number): this;
|
---|
| 161 | /**
|
---|
| 162 | * Sets the default offset for the overlay's connection point on the y-axis.
|
---|
| 163 | * @param offset New offset in the Y axis.
|
---|
| 164 | */
|
---|
| 165 | withDefaultOffsetY(offset: number): this;
|
---|
| 166 | /**
|
---|
| 167 | * Configures that the position strategy should set a `transform-origin` on some elements
|
---|
| 168 | * inside the overlay, depending on the current position that is being applied. This is
|
---|
| 169 | * useful for the cases where the origin of an animation can change depending on the
|
---|
| 170 | * alignment of the overlay.
|
---|
| 171 | * @param selector CSS selector that will be used to find the target
|
---|
| 172 | * elements onto which to set the transform origin.
|
---|
| 173 | */
|
---|
| 174 | withTransformOriginOn(selector: string): this;
|
---|
| 175 | /**
|
---|
| 176 | * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
|
---|
| 177 | */
|
---|
| 178 | private _getOriginPoint;
|
---|
| 179 | /**
|
---|
| 180 | * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and
|
---|
| 181 | * origin point to which the overlay should be connected.
|
---|
| 182 | */
|
---|
| 183 | private _getOverlayPoint;
|
---|
| 184 | /** Gets how well an overlay at the given point will fit within the viewport. */
|
---|
| 185 | private _getOverlayFit;
|
---|
| 186 | /**
|
---|
| 187 | * Whether the overlay can fit within the viewport when it may resize either its width or height.
|
---|
| 188 | * @param fit How well the overlay fits in the viewport at some position.
|
---|
| 189 | * @param point The (x, y) coordinates of the overlat at some position.
|
---|
| 190 | * @param viewport The geometry of the viewport.
|
---|
| 191 | */
|
---|
| 192 | private _canFitWithFlexibleDimensions;
|
---|
| 193 | /**
|
---|
| 194 | * Gets the point at which the overlay can be "pushed" on-screen. If the overlay is larger than
|
---|
| 195 | * the viewport, the top-left corner will be pushed on-screen (with overflow occuring on the
|
---|
| 196 | * right and bottom).
|
---|
| 197 | *
|
---|
| 198 | * @param start Starting point from which the overlay is pushed.
|
---|
| 199 | * @param overlay Dimensions of the overlay.
|
---|
| 200 | * @param scrollPosition Current viewport scroll position.
|
---|
| 201 | * @returns The point at which to position the overlay after pushing. This is effectively a new
|
---|
| 202 | * originPoint.
|
---|
| 203 | */
|
---|
| 204 | private _pushOverlayOnScreen;
|
---|
| 205 | /**
|
---|
| 206 | * Applies a computed position to the overlay and emits a position change.
|
---|
| 207 | * @param position The position preference
|
---|
| 208 | * @param originPoint The point on the origin element where the overlay is connected.
|
---|
| 209 | */
|
---|
| 210 | private _applyPosition;
|
---|
| 211 | /** Sets the transform origin based on the configured selector and the passed-in position. */
|
---|
| 212 | private _setTransformOrigin;
|
---|
| 213 | /**
|
---|
| 214 | * Gets the position and size of the overlay's sizing container.
|
---|
| 215 | *
|
---|
| 216 | * This method does no measuring and applies no styles so that we can cheaply compute the
|
---|
| 217 | * bounds for all positions and choose the best fit based on these results.
|
---|
| 218 | */
|
---|
| 219 | private _calculateBoundingBoxRect;
|
---|
| 220 | /**
|
---|
| 221 | * Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the
|
---|
| 222 | * origin's connection point and stetches to the bounds of the viewport.
|
---|
| 223 | *
|
---|
| 224 | * @param origin The point on the origin element where the overlay is connected.
|
---|
| 225 | * @param position The position preference
|
---|
| 226 | */
|
---|
| 227 | private _setBoundingBoxStyles;
|
---|
| 228 | /** Resets the styles for the bounding box so that a new positioning can be computed. */
|
---|
| 229 | private _resetBoundingBoxStyles;
|
---|
| 230 | /** Resets the styles for the overlay pane so that a new positioning can be computed. */
|
---|
| 231 | private _resetOverlayElementStyles;
|
---|
| 232 | /** Sets positioning styles to the overlay element. */
|
---|
| 233 | private _setOverlayElementStyles;
|
---|
| 234 | /** Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing. */
|
---|
| 235 | private _getExactOverlayY;
|
---|
| 236 | /** Gets the exact left/right for the overlay when not using flexible sizing or when pushing. */
|
---|
| 237 | private _getExactOverlayX;
|
---|
| 238 | /**
|
---|
| 239 | * Gets the view properties of the trigger and overlay, including whether they are clipped
|
---|
| 240 | * or completely outside the view of any of the strategy's scrollables.
|
---|
| 241 | */
|
---|
| 242 | private _getScrollVisibility;
|
---|
| 243 | /** Subtracts the amount that an element is overflowing on an axis from its length. */
|
---|
| 244 | private _subtractOverflows;
|
---|
| 245 | /** Narrows the given viewport rect by the current _viewportMargin. */
|
---|
| 246 | private _getNarrowedViewportRect;
|
---|
| 247 | /** Whether the we're dealing with an RTL context */
|
---|
| 248 | private _isRtl;
|
---|
| 249 | /** Determines whether the overlay uses exact or flexible positioning. */
|
---|
| 250 | private _hasExactPosition;
|
---|
| 251 | /** Retrieves the offset of a position along the x or y axis. */
|
---|
| 252 | private _getOffset;
|
---|
| 253 | /** Validates that the current position match the expected values. */
|
---|
| 254 | private _validatePositions;
|
---|
| 255 | /** Adds a single CSS class or an array of classes on the overlay panel. */
|
---|
| 256 | private _addPanelClasses;
|
---|
| 257 | /** Clears the classes that the position strategy has applied from the overlay panel. */
|
---|
| 258 | private _clearPanelClasses;
|
---|
| 259 | /** Returns the ClientRect of the current origin. */
|
---|
| 260 | private _getOriginRect;
|
---|
| 261 | }
|
---|
| 262 | /** A simple (x, y) coordinate. */
|
---|
| 263 | interface Point {
|
---|
| 264 | x: number;
|
---|
| 265 | y: number;
|
---|
| 266 | }
|
---|
| 267 | /** A connected position as specified by the user. */
|
---|
| 268 | export interface ConnectedPosition {
|
---|
| 269 | originX: 'start' | 'center' | 'end';
|
---|
| 270 | originY: 'top' | 'center' | 'bottom';
|
---|
| 271 | overlayX: 'start' | 'center' | 'end';
|
---|
| 272 | overlayY: 'top' | 'center' | 'bottom';
|
---|
| 273 | weight?: number;
|
---|
| 274 | offsetX?: number;
|
---|
| 275 | offsetY?: number;
|
---|
| 276 | panelClass?: string | string[];
|
---|
| 277 | }
|
---|
| 278 | export {};
|
---|