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 {};
|
---|