2979 lines
136 KiB
JavaScript
2979 lines
136 KiB
JavaScript
|
import * as i1 from '@angular/cdk/scrolling';
|
||
|
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
||
|
|
export { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';
|
||
|
|
import * as i6 from '@angular/common';
|
||
|
|
import { DOCUMENT } from '@angular/common';
|
||
|
|
import * as i0 from '@angular/core';
|
||
|
|
import { Injectable, Inject, Optional, ElementRef, ApplicationRef, ANIMATION_MODULE_TYPE, InjectionToken, Directive, EventEmitter, Input, Output, NgModule } from '@angular/core';
|
||
|
|
import { coerceCssPixelValue, coerceArray, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||
|
|
import * as i1$1 from '@angular/cdk/platform';
|
||
|
|
import { supportsScrollBehavior, _getEventTarget, _isTestEnvironment } from '@angular/cdk/platform';
|
||
|
|
import { filter, take, takeUntil, takeWhile } from 'rxjs/operators';
|
||
|
|
import * as i5 from '@angular/cdk/bidi';
|
||
|
|
import { BidiModule } from '@angular/cdk/bidi';
|
||
|
|
import { DomPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
||
|
|
import { Subject, Subscription, merge } from 'rxjs';
|
||
|
|
import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
||
|
|
|
||
|
|
const scrollBehaviorSupported = supportsScrollBehavior();
|
||
|
|
/**
|
||
|
|
* Strategy that will prevent the user from scrolling while the overlay is visible.
|
||
|
|
*/
|
||
|
|
class BlockScrollStrategy {
|
||
|
|
constructor(_viewportRuler, document) {
|
||
|
|
this._viewportRuler = _viewportRuler;
|
||
|
|
this._previousHTMLStyles = { top: '', left: '' };
|
||
|
|
this._isEnabled = false;
|
||
|
|
this._document = document;
|
||
|
|
}
|
||
|
|
/** Attaches this scroll strategy to an overlay. */
|
||
|
|
attach() { }
|
||
|
|
/** Blocks page-level scroll while the attached overlay is open. */
|
||
|
|
enable() {
|
||
|
|
if (this._canBeEnabled()) {
|
||
|
|
const root = this._document.documentElement;
|
||
|
|
this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
|
||
|
|
// Cache the previous inline styles in case the user had set them.
|
||
|
|
this._previousHTMLStyles.left = root.style.left || '';
|
||
|
|
this._previousHTMLStyles.top = root.style.top || '';
|
||
|
|
// Note: we're using the `html` node, instead of the `body`, because the `body` may
|
||
|
|
// have the user agent margin, whereas the `html` is guaranteed not to have one.
|
||
|
|
root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);
|
||
|
|
root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);
|
||
|
|
root.classList.add('cdk-global-scrollblock');
|
||
|
|
this._isEnabled = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Unblocks page-level scroll while the attached overlay is open. */
|
||
|
|
disable() {
|
||
|
|
if (this._isEnabled) {
|
||
|
|
const html = this._document.documentElement;
|
||
|
|
const body = this._document.body;
|
||
|
|
const htmlStyle = html.style;
|
||
|
|
const bodyStyle = body.style;
|
||
|
|
const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';
|
||
|
|
const previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';
|
||
|
|
this._isEnabled = false;
|
||
|
|
htmlStyle.left = this._previousHTMLStyles.left;
|
||
|
|
htmlStyle.top = this._previousHTMLStyles.top;
|
||
|
|
html.classList.remove('cdk-global-scrollblock');
|
||
|
|
// Disable user-defined smooth scrolling temporarily while we restore the scroll position.
|
||
|
|
// See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
|
||
|
|
// Note that we don't mutate the property if the browser doesn't support `scroll-behavior`,
|
||
|
|
// because it can throw off feature detections in `supportsScrollBehavior` which
|
||
|
|
// checks for `'scrollBehavior' in documentElement.style`.
|
||
|
|
if (scrollBehaviorSupported) {
|
||
|
|
htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
|
||
|
|
}
|
||
|
|
window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
|
||
|
|
if (scrollBehaviorSupported) {
|
||
|
|
htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
|
||
|
|
bodyStyle.scrollBehavior = previousBodyScrollBehavior;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
_canBeEnabled() {
|
||
|
|
// Since the scroll strategies can't be singletons, we have to use a global CSS class
|
||
|
|
// (`cdk-global-scrollblock`) to make sure that we don't try to disable global
|
||
|
|
// scrolling multiple times.
|
||
|
|
const html = this._document.documentElement;
|
||
|
|
if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
const body = this._document.body;
|
||
|
|
const viewport = this._viewportRuler.getViewportSize();
|
||
|
|
return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Returns an error to be thrown when attempting to attach an already-attached scroll strategy.
|
||
|
|
*/
|
||
|
|
function getMatScrollStrategyAlreadyAttachedError() {
|
||
|
|
return Error(`Scroll strategy has already been attached.`);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Strategy that will close the overlay as soon as the user starts scrolling.
|
||
|
|
*/
|
||
|
|
class CloseScrollStrategy {
|
||
|
|
constructor(_scrollDispatcher, _ngZone, _viewportRuler, _config) {
|
||
|
|
this._scrollDispatcher = _scrollDispatcher;
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
this._viewportRuler = _viewportRuler;
|
||
|
|
this._config = _config;
|
||
|
|
this._scrollSubscription = null;
|
||
|
|
/** Detaches the overlay ref and disables the scroll strategy. */
|
||
|
|
this._detach = () => {
|
||
|
|
this.disable();
|
||
|
|
if (this._overlayRef.hasAttached()) {
|
||
|
|
this._ngZone.run(() => this._overlayRef.detach());
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/** Attaches this scroll strategy to an overlay. */
|
||
|
|
attach(overlayRef) {
|
||
|
|
if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
||
|
|
throw getMatScrollStrategyAlreadyAttachedError();
|
||
|
|
}
|
||
|
|
this._overlayRef = overlayRef;
|
||
|
|
}
|
||
|
|
/** Enables the closing of the attached overlay on scroll. */
|
||
|
|
enable() {
|
||
|
|
if (this._scrollSubscription) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const stream = this._scrollDispatcher.scrolled(0).pipe(filter(scrollable => {
|
||
|
|
return (!scrollable ||
|
||
|
|
!this._overlayRef.overlayElement.contains(scrollable.getElementRef().nativeElement));
|
||
|
|
}));
|
||
|
|
if (this._config && this._config.threshold && this._config.threshold > 1) {
|
||
|
|
this._initialScrollPosition = this._viewportRuler.getViewportScrollPosition().top;
|
||
|
|
this._scrollSubscription = stream.subscribe(() => {
|
||
|
|
const scrollPosition = this._viewportRuler.getViewportScrollPosition().top;
|
||
|
|
if (Math.abs(scrollPosition - this._initialScrollPosition) > this._config.threshold) {
|
||
|
|
this._detach();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._overlayRef.updatePosition();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._scrollSubscription = stream.subscribe(this._detach);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Disables the closing the attached overlay on scroll. */
|
||
|
|
disable() {
|
||
|
|
if (this._scrollSubscription) {
|
||
|
|
this._scrollSubscription.unsubscribe();
|
||
|
|
this._scrollSubscription = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
detach() {
|
||
|
|
this.disable();
|
||
|
|
this._overlayRef = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Scroll strategy that doesn't do anything. */
|
||
|
|
class NoopScrollStrategy {
|
||
|
|
/** Does nothing, as this scroll strategy is a no-op. */
|
||
|
|
enable() { }
|
||
|
|
/** Does nothing, as this scroll strategy is a no-op. */
|
||
|
|
disable() { }
|
||
|
|
/** Does nothing, as this scroll strategy is a no-op. */
|
||
|
|
attach() { }
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Gets whether an element is scrolled outside of view by any of its parent scrolling containers.
|
||
|
|
* @param element Dimensions of the element (from getBoundingClientRect)
|
||
|
|
* @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
|
||
|
|
* @returns Whether the element is scrolled out of view
|
||
|
|
* @docs-private
|
||
|
|
*/
|
||
|
|
function isElementScrolledOutsideView(element, scrollContainers) {
|
||
|
|
return scrollContainers.some(containerBounds => {
|
||
|
|
const outsideAbove = element.bottom < containerBounds.top;
|
||
|
|
const outsideBelow = element.top > containerBounds.bottom;
|
||
|
|
const outsideLeft = element.right < containerBounds.left;
|
||
|
|
const outsideRight = element.left > containerBounds.right;
|
||
|
|
return outsideAbove || outsideBelow || outsideLeft || outsideRight;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Gets whether an element is clipped by any of its scrolling containers.
|
||
|
|
* @param element Dimensions of the element (from getBoundingClientRect)
|
||
|
|
* @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
|
||
|
|
* @returns Whether the element is clipped
|
||
|
|
* @docs-private
|
||
|
|
*/
|
||
|
|
function isElementClippedByScrolling(element, scrollContainers) {
|
||
|
|
return scrollContainers.some(scrollContainerRect => {
|
||
|
|
const clippedAbove = element.top < scrollContainerRect.top;
|
||
|
|
const clippedBelow = element.bottom > scrollContainerRect.bottom;
|
||
|
|
const clippedLeft = element.left < scrollContainerRect.left;
|
||
|
|
const clippedRight = element.right > scrollContainerRect.right;
|
||
|
|
return clippedAbove || clippedBelow || clippedLeft || clippedRight;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Strategy that will update the element position as the user is scrolling.
|
||
|
|
*/
|
||
|
|
class RepositionScrollStrategy {
|
||
|
|
constructor(_scrollDispatcher, _viewportRuler, _ngZone, _config) {
|
||
|
|
this._scrollDispatcher = _scrollDispatcher;
|
||
|
|
this._viewportRuler = _viewportRuler;
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
this._config = _config;
|
||
|
|
this._scrollSubscription = null;
|
||
|
|
}
|
||
|
|
/** Attaches this scroll strategy to an overlay. */
|
||
|
|
attach(overlayRef) {
|
||
|
|
if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
||
|
|
throw getMatScrollStrategyAlreadyAttachedError();
|
||
|
|
}
|
||
|
|
this._overlayRef = overlayRef;
|
||
|
|
}
|
||
|
|
/** Enables repositioning of the attached overlay on scroll. */
|
||
|
|
enable() {
|
||
|
|
if (!this._scrollSubscription) {
|
||
|
|
const throttle = this._config ? this._config.scrollThrottle : 0;
|
||
|
|
this._scrollSubscription = this._scrollDispatcher.scrolled(throttle).subscribe(() => {
|
||
|
|
this._overlayRef.updatePosition();
|
||
|
|
// TODO(crisbeto): make `close` on by default once all components can handle it.
|
||
|
|
if (this._config && this._config.autoClose) {
|
||
|
|
const overlayRect = this._overlayRef.overlayElement.getBoundingClientRect();
|
||
|
|
const { width, height } = this._viewportRuler.getViewportSize();
|
||
|
|
// TODO(crisbeto): include all ancestor scroll containers here once
|
||
|
|
// we have a way of exposing the trigger element to the scroll strategy.
|
||
|
|
const parentRects = [{ width, height, bottom: height, right: width, top: 0, left: 0 }];
|
||
|
|
if (isElementScrolledOutsideView(overlayRect, parentRects)) {
|
||
|
|
this.disable();
|
||
|
|
this._ngZone.run(() => this._overlayRef.detach());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Disables repositioning of the attached overlay on scroll. */
|
||
|
|
disable() {
|
||
|
|
if (this._scrollSubscription) {
|
||
|
|
this._scrollSubscription.unsubscribe();
|
||
|
|
this._scrollSubscription = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
detach() {
|
||
|
|
this.disable();
|
||
|
|
this._overlayRef = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Options for how an overlay will handle scrolling.
|
||
|
|
*
|
||
|
|
* Users can provide a custom value for `ScrollStrategyOptions` to replace the default
|
||
|
|
* behaviors. This class primarily acts as a factory for ScrollStrategy instances.
|
||
|
|
*/
|
||
|
|
class ScrollStrategyOptions {
|
||
|
|
constructor(_scrollDispatcher, _viewportRuler, _ngZone, document) {
|
||
|
|
this._scrollDispatcher = _scrollDispatcher;
|
||
|
|
this._viewportRuler = _viewportRuler;
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
/** Do nothing on scroll. */
|
||
|
|
this.noop = () => new NoopScrollStrategy();
|
||
|
|
/**
|
||
|
|
* Close the overlay as soon as the user scrolls.
|
||
|
|
* @param config Configuration to be used inside the scroll strategy.
|
||
|
|
*/
|
||
|
|
this.close = (config) => new CloseScrollStrategy(this._scrollDispatcher, this._ngZone, this._viewportRuler, config);
|
||
|
|
/** Block scrolling. */
|
||
|
|
this.block = () => new BlockScrollStrategy(this._viewportRuler, this._document);
|
||
|
|
/**
|
||
|
|
* Update the overlay's position on scroll.
|
||
|
|
* @param config Configuration to be used inside the scroll strategy.
|
||
|
|
* Allows debouncing the reposition calls.
|
||
|
|
*/
|
||
|
|
this.reposition = (config) => new RepositionScrollStrategy(this._scrollDispatcher, this._viewportRuler, this._ngZone, config);
|
||
|
|
this._document = document;
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ScrollStrategyOptions, deps: [{ token: i1.ScrollDispatcher }, { token: i1.ViewportRuler }, { token: i0.NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
||
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ScrollStrategyOptions, providedIn: 'root' }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ScrollStrategyOptions, decorators: [{
|
||
|
|
type: Injectable,
|
||
|
|
args: [{ providedIn: 'root' }]
|
||
|
|
}], ctorParameters: function () { return [{ type: i1.ScrollDispatcher }, { type: i1.ViewportRuler }, { type: i0.NgZone }, { type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }]; } });
|
||
|
|
|
||
|
|
/** Initial configuration used when creating an overlay. */
|
||
|
|
class OverlayConfig {
|
||
|
|
constructor(config) {
|
||
|
|
/** Strategy to be used when handling scroll events while the overlay is open. */
|
||
|
|
this.scrollStrategy = new NoopScrollStrategy();
|
||
|
|
/** Custom class to add to the overlay pane. */
|
||
|
|
this.panelClass = '';
|
||
|
|
/** Whether the overlay has a backdrop. */
|
||
|
|
this.hasBackdrop = false;
|
||
|
|
/** Custom class to add to the backdrop */
|
||
|
|
this.backdropClass = 'cdk-overlay-dark-backdrop';
|
||
|
|
/**
|
||
|
|
* Whether the overlay should be disposed of when the user goes backwards/forwards in history.
|
||
|
|
* Note that this usually doesn't include clicking on links (unless the user is using
|
||
|
|
* the `HashLocationStrategy`).
|
||
|
|
*/
|
||
|
|
this.disposeOnNavigation = false;
|
||
|
|
if (config) {
|
||
|
|
// Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,
|
||
|
|
// loses the array generic type in the `for of`. But we *also* have to use `Array` because
|
||
|
|
// typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`
|
||
|
|
const configKeys = Object.keys(config);
|
||
|
|
for (const key of configKeys) {
|
||
|
|
if (config[key] !== undefined) {
|
||
|
|
// TypeScript, as of version 3.5, sees the left-hand-side of this expression
|
||
|
|
// as "I don't know *which* key this is, so the only valid value is the intersection
|
||
|
|
// of all the possible values." In this case, that happens to be `undefined`. TypeScript
|
||
|
|
// is not smart enough to see that the right-hand-side is actually an access of the same
|
||
|
|
// exact type with the same exact key, meaning that the value type must be identical.
|
||
|
|
// So we use `any` to work around this.
|
||
|
|
this[key] = config[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** The points of the origin element and the overlay element to connect. */
|
||
|
|
class ConnectionPositionPair {
|
||
|
|
constructor(origin, overlay,
|
||
|
|
/** Offset along the X axis. */
|
||
|
|
offsetX,
|
||
|
|
/** Offset along the Y axis. */
|
||
|
|
offsetY,
|
||
|
|
/** Class(es) to be applied to the panel while this position is active. */
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Set of properties regarding the position of the origin and overlay relative to the viewport
|
||
|
|
* with respect to the containing Scrollable elements.
|
||
|
|
*
|
||
|
|
* The overlay and origin are clipped if any part of their bounding client rectangle exceeds the
|
||
|
|
* bounds of any one of the strategy's Scrollable's bounding client rectangle.
|
||
|
|
*
|
||
|
|
* The overlay and origin are outside view if there is no overlap between their bounding client
|
||
|
|
* rectangle and any one of the strategy's Scrollable's bounding client rectangle.
|
||
|
|
*
|
||
|
|
* ----------- -----------
|
||
|
|
* | outside | | clipped |
|
||
|
|
* | view | --------------------------
|
||
|
|
* | | | | | |
|
||
|
|
* ---------- | ----------- |
|
||
|
|
* -------------------------- | |
|
||
|
|
* | | | Scrollable |
|
||
|
|
* | | | |
|
||
|
|
* | | --------------------------
|
||
|
|
* | Scrollable |
|
||
|
|
* | |
|
||
|
|
* --------------------------
|
||
|
|
*
|
||
|
|
* @docs-private
|
||
|
|
*/
|
||
|
|
class ScrollingVisibility {
|
||
|
|
}
|
||
|
|
/** The change event emitted by the strategy when a fallback position is used. */
|
||
|
|
class ConnectedOverlayPositionChange {
|
||
|
|
constructor(
|
||
|
|
/** The position used as a result of this change. */
|
||
|
|
connectionPair,
|
||
|
|
/** @docs-private */
|
||
|
|
scrollableViewProperties) {
|
||
|
|
this.connectionPair = connectionPair;
|
||
|
|
this.scrollableViewProperties = scrollableViewProperties;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Validates whether a vertical position property matches the expected values.
|
||
|
|
* @param property Name of the property being validated.
|
||
|
|
* @param value Value of the property being validated.
|
||
|
|
* @docs-private
|
||
|
|
*/
|
||
|
|
function validateVerticalPosition(property, value) {
|
||
|
|
if (value !== 'top' && value !== 'bottom' && value !== 'center') {
|
||
|
|
throw Error(`ConnectedPosition: Invalid ${property} "${value}". ` +
|
||
|
|
`Expected "top", "bottom" or "center".`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Validates whether a horizontal position property matches the expected values.
|
||
|
|
* @param property Name of the property being validated.
|
||
|
|
* @param value Value of the property being validated.
|
||
|
|
* @docs-private
|
||
|
|
*/
|
||
|
|
function validateHorizontalPosition(property, value) {
|
||
|
|
if (value !== 'start' && value !== 'end' && value !== 'center') {
|
||
|
|
throw Error(`ConnectedPosition: Invalid ${property} "${value}". ` +
|
||
|
|
`Expected "start", "end" or "center".`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Service for dispatching events that land on the body to appropriate overlay ref,
|
||
|
|
* if any. It maintains a list of attached overlays to determine best suited overlay based
|
||
|
|
* on event target and order of overlay opens.
|
||
|
|
*/
|
||
|
|
class BaseOverlayDispatcher {
|
||
|
|
constructor(document) {
|
||
|
|
/** Currently attached overlays in the order they were attached. */
|
||
|
|
this._attachedOverlays = [];
|
||
|
|
this._document = document;
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this.detach();
|
||
|
|
}
|
||
|
|
/** Add a new overlay to the list of attached overlay refs. */
|
||
|
|
add(overlayRef) {
|
||
|
|
// Ensure that we don't get the same overlay multiple times.
|
||
|
|
this.remove(overlayRef);
|
||
|
|
this._attachedOverlays.push(overlayRef);
|
||
|
|
}
|
||
|
|
/** Remove an overlay from the list of attached overlay refs. */
|
||
|
|
remove(overlayRef) {
|
||
|
|
const index = this._attachedOverlays.indexOf(overlayRef);
|
||
|
|
if (index > -1) {
|
||
|
|
this._attachedOverlays.splice(index, 1);
|
||
|
|
}
|
||
|
|
// Remove the global listener once there are no more overlays.
|
||
|
|
if (this._attachedOverlays.length === 0) {
|
||
|
|
this.detach();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: BaseOverlayDispatcher, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
||
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: BaseOverlayDispatcher, providedIn: 'root' }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: BaseOverlayDispatcher, decorators: [{
|
||
|
|
type: Injectable,
|
||
|
|
args: [{ providedIn: 'root' }]
|
||
|
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }]; } });
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Service for dispatching keyboard events that land on the body to appropriate overlay ref,
|
||
|
|
* if any. It maintains a list of attached overlays to determine best suited overlay based
|
||
|
|
* on event target and order of overlay opens.
|
||
|
|
*/
|
||
|
|
class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
|
||
|
|
constructor(document,
|
||
|
|
/** @breaking-change 14.0.0 _ngZone will be required. */
|
||
|
|
_ngZone) {
|
||
|
|
super(document);
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
/** Keyboard event listener that will be attached to the body. */
|
||
|
|
this._keydownListener = (event) => {
|
||
|
|
const overlays = this._attachedOverlays;
|
||
|
|
for (let i = overlays.length - 1; i > -1; i--) {
|
||
|
|
// Dispatch the keydown event to the top overlay which has subscribers to its keydown events.
|
||
|
|
// We want to target the most recent overlay, rather than trying to match where the event came
|
||
|
|
// from, because some components might open an overlay, but keep focus on a trigger element
|
||
|
|
// (e.g. for select and autocomplete). We skip overlays without keydown event subscriptions,
|
||
|
|
// because we don't want overlays that don't handle keyboard events to block the ones below
|
||
|
|
// them that do.
|
||
|
|
if (overlays[i]._keydownEvents.observers.length > 0) {
|
||
|
|
const keydownEvents = overlays[i]._keydownEvents;
|
||
|
|
/** @breaking-change 14.0.0 _ngZone will be required. */
|
||
|
|
if (this._ngZone) {
|
||
|
|
this._ngZone.run(() => keydownEvents.next(event));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
keydownEvents.next(event);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/** Add a new overlay to the list of attached overlay refs. */
|
||
|
|
add(overlayRef) {
|
||
|
|
super.add(overlayRef);
|
||
|
|
// Lazily start dispatcher once first overlay is added
|
||
|
|
if (!this._isAttached) {
|
||
|
|
/** @breaking-change 14.0.0 _ngZone will be required. */
|
||
|
|
if (this._ngZone) {
|
||
|
|
this._ngZone.runOutsideAngular(() => this._document.body.addEventListener('keydown', this._keydownListener));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._document.body.addEventListener('keydown', this._keydownListener);
|
||
|
|
}
|
||
|
|
this._isAttached = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Detaches the global keyboard event listener. */
|
||
|
|
detach() {
|
||
|
|
if (this._isAttached) {
|
||
|
|
this._document.body.removeEventListener('keydown', this._keydownListener);
|
||
|
|
this._isAttached = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayKeyboardDispatcher, deps: [{ token: DOCUMENT }, { token: i0.NgZone, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
||
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayKeyboardDispatcher, providedIn: 'root' }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayKeyboardDispatcher, decorators: [{
|
||
|
|
type: Injectable,
|
||
|
|
args: [{ providedIn: 'root' }]
|
||
|
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: i0.NgZone, decorators: [{
|
||
|
|
type: Optional
|
||
|
|
}] }]; } });
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Service for dispatching mouse click events that land on the body to appropriate overlay ref,
|
||
|
|
* if any. It maintains a list of attached overlays to determine best suited overlay based
|
||
|
|
* on event target and order of overlay opens.
|
||
|
|
*/
|
||
|
|
class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
|
||
|
|
constructor(document, _platform,
|
||
|
|
/** @breaking-change 14.0.0 _ngZone will be required. */
|
||
|
|
_ngZone) {
|
||
|
|
super(document);
|
||
|
|
this._platform = _platform;
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
this._cursorStyleIsSet = false;
|
||
|
|
/** Store pointerdown event target to track origin of click. */
|
||
|
|
this._pointerDownListener = (event) => {
|
||
|
|
this._pointerDownEventTarget = _getEventTarget(event);
|
||
|
|
};
|
||
|
|
/** Click event listener that will be attached to the body propagate phase. */
|
||
|
|
this._clickListener = (event) => {
|
||
|
|
const target = _getEventTarget(event);
|
||
|
|
// In case of a click event, we want to check the origin of the click
|
||
|
|
// (e.g. in case where a user starts a click inside the overlay and
|
||
|
|
// releases the click outside of it).
|
||
|
|
// This is done by using the event target of the preceding pointerdown event.
|
||
|
|
// Every click event caused by a pointer device has a preceding pointerdown
|
||
|
|
// event, unless the click was programmatically triggered (e.g. in a unit test).
|
||
|
|
const origin = event.type === 'click' && this._pointerDownEventTarget
|
||
|
|
? this._pointerDownEventTarget
|
||
|
|
: target;
|
||
|
|
// Reset the stored pointerdown event target, to avoid having it interfere
|
||
|
|
// in subsequent events.
|
||
|
|
this._pointerDownEventTarget = null;
|
||
|
|
// We copy the array because the original may be modified asynchronously if the
|
||
|
|
// outsidePointerEvents listener decides to detach overlays resulting in index errors inside
|
||
|
|
// the for loop.
|
||
|
|
const overlays = this._attachedOverlays.slice();
|
||
|
|
// Dispatch the mouse event to the top overlay which has subscribers to its mouse events.
|
||
|
|
// We want to target all overlays for which the click could be considered as outside click.
|
||
|
|
// As soon as we reach an overlay for which the click is not outside click we break off
|
||
|
|
// the loop.
|
||
|
|
for (let i = overlays.length - 1; i > -1; i--) {
|
||
|
|
const overlayRef = overlays[i];
|
||
|
|
if (overlayRef._outsidePointerEvents.observers.length < 1 || !overlayRef.hasAttached()) {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
// If it's a click inside the overlay, just break - we should do nothing
|
||
|
|
// If it's an outside click (both origin and target of the click) dispatch the mouse event,
|
||
|
|
// and proceed with the next overlay
|
||
|
|
if (overlayRef.overlayElement.contains(target) ||
|
||
|
|
overlayRef.overlayElement.contains(origin)) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
const outsidePointerEvents = overlayRef._outsidePointerEvents;
|
||
|
|
/** @breaking-change 14.0.0 _ngZone will be required. */
|
||
|
|
if (this._ngZone) {
|
||
|
|
this._ngZone.run(() => outsidePointerEvents.next(event));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
outsidePointerEvents.next(event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/** Add a new overlay to the list of attached overlay refs. */
|
||
|
|
add(overlayRef) {
|
||
|
|
super.add(overlayRef);
|
||
|
|
// Safari on iOS does not generate click events for non-interactive
|
||
|
|
// elements. However, we want to receive a click for any element outside
|
||
|
|
// the overlay. We can force a "clickable" state by setting
|
||
|
|
// `cursor: pointer` on the document body. See:
|
||
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
|
||
|
|
// https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
|
||
|
|
if (!this._isAttached) {
|
||
|
|
const body = this._document.body;
|
||
|
|
/** @breaking-change 14.0.0 _ngZone will be required. */
|
||
|
|
if (this._ngZone) {
|
||
|
|
this._ngZone.runOutsideAngular(() => this._addEventListeners(body));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._addEventListeners(body);
|
||
|
|
}
|
||
|
|
// click event is not fired on iOS. To make element "clickable" we are
|
||
|
|
// setting the cursor to pointer
|
||
|
|
if (this._platform.IOS && !this._cursorStyleIsSet) {
|
||
|
|
this._cursorOriginalValue = body.style.cursor;
|
||
|
|
body.style.cursor = 'pointer';
|
||
|
|
this._cursorStyleIsSet = true;
|
||
|
|
}
|
||
|
|
this._isAttached = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Detaches the global keyboard event listener. */
|
||
|
|
detach() {
|
||
|
|
if (this._isAttached) {
|
||
|
|
const body = this._document.body;
|
||
|
|
body.removeEventListener('pointerdown', this._pointerDownListener, true);
|
||
|
|
body.removeEventListener('click', this._clickListener, true);
|
||
|
|
body.removeEventListener('auxclick', this._clickListener, true);
|
||
|
|
body.removeEventListener('contextmenu', this._clickListener, true);
|
||
|
|
if (this._platform.IOS && this._cursorStyleIsSet) {
|
||
|
|
body.style.cursor = this._cursorOriginalValue;
|
||
|
|
this._cursorStyleIsSet = false;
|
||
|
|
}
|
||
|
|
this._isAttached = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
_addEventListeners(body) {
|
||
|
|
body.addEventListener('pointerdown', this._pointerDownListener, true);
|
||
|
|
body.addEventListener('click', this._clickListener, true);
|
||
|
|
body.addEventListener('auxclick', this._clickListener, true);
|
||
|
|
body.addEventListener('contextmenu', this._clickListener, true);
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayOutsideClickDispatcher, deps: [{ token: DOCUMENT }, { token: i1$1.Platform }, { token: i0.NgZone, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
||
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayOutsideClickDispatcher, providedIn: 'root' }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayOutsideClickDispatcher, decorators: [{
|
||
|
|
type: Injectable,
|
||
|
|
args: [{ providedIn: 'root' }]
|
||
|
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: i1$1.Platform }, { type: i0.NgZone, decorators: [{
|
||
|
|
type: Optional
|
||
|
|
}] }]; } });
|
||
|
|
|
||
|
|
/** Container inside which all overlays will render. */
|
||
|
|
class OverlayContainer {
|
||
|
|
constructor(document, _platform) {
|
||
|
|
this._platform = _platform;
|
||
|
|
this._document = document;
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this._containerElement?.remove();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* This method returns the overlay container element. It will lazily
|
||
|
|
* create the element the first time it is called to facilitate using
|
||
|
|
* the container in non-browser environments.
|
||
|
|
* @returns the container element
|
||
|
|
*/
|
||
|
|
getContainerElement() {
|
||
|
|
if (!this._containerElement) {
|
||
|
|
this._createContainer();
|
||
|
|
}
|
||
|
|
return this._containerElement;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Create the overlay container element, which is simply a div
|
||
|
|
* with the 'cdk-overlay-container' class on the document body.
|
||
|
|
*/
|
||
|
|
_createContainer() {
|
||
|
|
const containerClass = 'cdk-overlay-container';
|
||
|
|
// TODO(crisbeto): remove the testing check once we have an overlay testing
|
||
|
|
// module or Angular starts tearing down the testing `NgModule`. See:
|
||
|
|
// https://github.com/angular/angular/issues/18831
|
||
|
|
if (this._platform.isBrowser || _isTestEnvironment()) {
|
||
|
|
const oppositePlatformContainers = this._document.querySelectorAll(`.${containerClass}[platform="server"], ` + `.${containerClass}[platform="test"]`);
|
||
|
|
// Remove any old containers from the opposite platform.
|
||
|
|
// This can happen when transitioning from the server to the client.
|
||
|
|
for (let i = 0; i < oppositePlatformContainers.length; i++) {
|
||
|
|
oppositePlatformContainers[i].remove();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const container = this._document.createElement('div');
|
||
|
|
container.classList.add(containerClass);
|
||
|
|
// A long time ago we kept adding new overlay containers whenever a new app was instantiated,
|
||
|
|
// but at some point we added logic which clears the duplicate ones in order to avoid leaks.
|
||
|
|
// The new logic was a little too aggressive since it was breaking some legitimate use cases.
|
||
|
|
// To mitigate the problem we made it so that only containers from a different platform are
|
||
|
|
// cleared, but the side-effect was that people started depending on the overly-aggressive
|
||
|
|
// logic to clean up their tests for them. Until we can introduce an overlay-specific testing
|
||
|
|
// module which does the cleanup, we try to detect that we're in a test environment and we
|
||
|
|
// always clear the container. See #17006.
|
||
|
|
// TODO(crisbeto): remove the test environment check once we have an overlay testing module.
|
||
|
|
if (_isTestEnvironment()) {
|
||
|
|
container.setAttribute('platform', 'test');
|
||
|
|
}
|
||
|
|
else if (!this._platform.isBrowser) {
|
||
|
|
container.setAttribute('platform', 'server');
|
||
|
|
}
|
||
|
|
this._document.body.appendChild(container);
|
||
|
|
this._containerElement = container;
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayContainer, deps: [{ token: DOCUMENT }, { token: i1$1.Platform }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
||
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayContainer, providedIn: 'root' }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayContainer, decorators: [{
|
||
|
|
type: Injectable,
|
||
|
|
args: [{ providedIn: 'root' }]
|
||
|
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: i1$1.Platform }]; } });
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Reference to an overlay that has been created with the Overlay service.
|
||
|
|
* Used to manipulate or dispose of said overlay.
|
||
|
|
*/
|
||
|
|
class OverlayRef {
|
||
|
|
constructor(_portalOutlet, _host, _pane, _config, _ngZone, _keyboardDispatcher, _document, _location, _outsideClickDispatcher, _animationsDisabled = false) {
|
||
|
|
this._portalOutlet = _portalOutlet;
|
||
|
|
this._host = _host;
|
||
|
|
this._pane = _pane;
|
||
|
|
this._config = _config;
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
this._keyboardDispatcher = _keyboardDispatcher;
|
||
|
|
this._document = _document;
|
||
|
|
this._location = _location;
|
||
|
|
this._outsideClickDispatcher = _outsideClickDispatcher;
|
||
|
|
this._animationsDisabled = _animationsDisabled;
|
||
|
|
this._backdropElement = null;
|
||
|
|
this._backdropClick = new Subject();
|
||
|
|
this._attachments = new Subject();
|
||
|
|
this._detachments = new Subject();
|
||
|
|
this._locationChanges = Subscription.EMPTY;
|
||
|
|
this._backdropClickHandler = (event) => this._backdropClick.next(event);
|
||
|
|
this._backdropTransitionendHandler = (event) => {
|
||
|
|
this._disposeBackdrop(event.target);
|
||
|
|
};
|
||
|
|
/** Stream of keydown events dispatched to this overlay. */
|
||
|
|
this._keydownEvents = new Subject();
|
||
|
|
/** Stream of mouse outside events dispatched to this overlay. */
|
||
|
|
this._outsidePointerEvents = new Subject();
|
||
|
|
if (_config.scrollStrategy) {
|
||
|
|
this._scrollStrategy = _config.scrollStrategy;
|
||
|
|
this._scrollStrategy.attach(this);
|
||
|
|
}
|
||
|
|
this._positionStrategy = _config.positionStrategy;
|
||
|
|
}
|
||
|
|
/** The overlay's HTML element */
|
||
|
|
get overlayElement() {
|
||
|
|
return this._pane;
|
||
|
|
}
|
||
|
|
/** The overlay's backdrop HTML element. */
|
||
|
|
get backdropElement() {
|
||
|
|
return this._backdropElement;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Wrapper around the panel element. Can be used for advanced
|
||
|
|
* positioning where a wrapper with specific styling is
|
||
|
|
* required around the overlay pane.
|
||
|
|
*/
|
||
|
|
get hostElement() {
|
||
|
|
return this._host;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Attaches content, given via a Portal, to the overlay.
|
||
|
|
* If the overlay is configured to have a backdrop, it will be created.
|
||
|
|
*
|
||
|
|
* @param portal Portal instance to which to attach the overlay.
|
||
|
|
* @returns The portal attachment result.
|
||
|
|
*/
|
||
|
|
attach(portal) {
|
||
|
|
// Insert the host into the DOM before attaching the portal, otherwise
|
||
|
|
// the animations module will skip animations on repeat attachments.
|
||
|
|
if (!this._host.parentElement && this._previousHostParent) {
|
||
|
|
this._previousHostParent.appendChild(this._host);
|
||
|
|
}
|
||
|
|
const attachResult = this._portalOutlet.attach(portal);
|
||
|
|
if (this._positionStrategy) {
|
||
|
|
this._positionStrategy.attach(this);
|
||
|
|
}
|
||
|
|
this._updateStackingOrder();
|
||
|
|
this._updateElementSize();
|
||
|
|
this._updateElementDirection();
|
||
|
|
if (this._scrollStrategy) {
|
||
|
|
this._scrollStrategy.enable();
|
||
|
|
}
|
||
|
|
// Update the position once the zone is stable so that the overlay will be fully rendered
|
||
|
|
// before attempting to position it, as the position may depend on the size of the rendered
|
||
|
|
// content.
|
||
|
|
this._ngZone.onStable.pipe(take(1)).subscribe(() => {
|
||
|
|
// The overlay could've been detached before the zone has stabilized.
|
||
|
|
if (this.hasAttached()) {
|
||
|
|
this.updatePosition();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// Enable pointer events for the overlay pane element.
|
||
|
|
this._togglePointerEvents(true);
|
||
|
|
if (this._config.hasBackdrop) {
|
||
|
|
this._attachBackdrop();
|
||
|
|
}
|
||
|
|
if (this._config.panelClass) {
|
||
|
|
this._toggleClasses(this._pane, this._config.panelClass, true);
|
||
|
|
}
|
||
|
|
// Only emit the `attachments` event once all other setup is done.
|
||
|
|
this._attachments.next();
|
||
|
|
// Track this overlay by the keyboard dispatcher
|
||
|
|
this._keyboardDispatcher.add(this);
|
||
|
|
if (this._config.disposeOnNavigation) {
|
||
|
|
this._locationChanges = this._location.subscribe(() => this.dispose());
|
||
|
|
}
|
||
|
|
this._outsideClickDispatcher.add(this);
|
||
|
|
// TODO(crisbeto): the null check is here, because the portal outlet returns `any`.
|
||
|
|
// We should be guaranteed for the result to be `ComponentRef | EmbeddedViewRef`, but
|
||
|
|
// `instanceof EmbeddedViewRef` doesn't appear to work at the moment.
|
||
|
|
if (typeof attachResult?.onDestroy === 'function') {
|
||
|
|
// In most cases we control the portal and we know when it is being detached so that
|
||
|
|
// we can finish the disposal process. The exception is if the user passes in a custom
|
||
|
|
// `ViewContainerRef` that isn't destroyed through the overlay API. Note that we use
|
||
|
|
// `detach` here instead of `dispose`, because we don't know if the user intends to
|
||
|
|
// reattach the overlay at a later point. It also has the advantage of waiting for animations.
|
||
|
|
attachResult.onDestroy(() => {
|
||
|
|
if (this.hasAttached()) {
|
||
|
|
// We have to delay the `detach` call, because detaching immediately prevents
|
||
|
|
// other destroy hooks from running. This is likely a framework bug similar to
|
||
|
|
// https://github.com/angular/angular/issues/46119
|
||
|
|
this._ngZone.runOutsideAngular(() => Promise.resolve().then(() => this.detach()));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return attachResult;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Detaches an overlay from a portal.
|
||
|
|
* @returns The portal detachment result.
|
||
|
|
*/
|
||
|
|
detach() {
|
||
|
|
if (!this.hasAttached()) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.detachBackdrop();
|
||
|
|
// When the overlay is detached, the pane element should disable pointer events.
|
||
|
|
// This is necessary because otherwise the pane element will cover the page and disable
|
||
|
|
// pointer events therefore. Depends on the position strategy and the applied pane boundaries.
|
||
|
|
this._togglePointerEvents(false);
|
||
|
|
if (this._positionStrategy && this._positionStrategy.detach) {
|
||
|
|
this._positionStrategy.detach();
|
||
|
|
}
|
||
|
|
if (this._scrollStrategy) {
|
||
|
|
this._scrollStrategy.disable();
|
||
|
|
}
|
||
|
|
const detachmentResult = this._portalOutlet.detach();
|
||
|
|
// Only emit after everything is detached.
|
||
|
|
this._detachments.next();
|
||
|
|
// Remove this overlay from keyboard dispatcher tracking.
|
||
|
|
this._keyboardDispatcher.remove(this);
|
||
|
|
// Keeping the host element in the DOM can cause scroll jank, because it still gets
|
||
|
|
// rendered, even though it's transparent and unclickable which is why we remove it.
|
||
|
|
this._detachContentWhenStable();
|
||
|
|
this._locationChanges.unsubscribe();
|
||
|
|
this._outsideClickDispatcher.remove(this);
|
||
|
|
return detachmentResult;
|
||
|
|
}
|
||
|
|
/** Cleans up the overlay from the DOM. */
|
||
|
|
dispose() {
|
||
|
|
const isAttached = this.hasAttached();
|
||
|
|
if (this._positionStrategy) {
|
||
|
|
this._positionStrategy.dispose();
|
||
|
|
}
|
||
|
|
this._disposeScrollStrategy();
|
||
|
|
this._disposeBackdrop(this._backdropElement);
|
||
|
|
this._locationChanges.unsubscribe();
|
||
|
|
this._keyboardDispatcher.remove(this);
|
||
|
|
this._portalOutlet.dispose();
|
||
|
|
this._attachments.complete();
|
||
|
|
this._backdropClick.complete();
|
||
|
|
this._keydownEvents.complete();
|
||
|
|
this._outsidePointerEvents.complete();
|
||
|
|
this._outsideClickDispatcher.remove(this);
|
||
|
|
this._host?.remove();
|
||
|
|
this._previousHostParent = this._pane = this._host = null;
|
||
|
|
if (isAttached) {
|
||
|
|
this._detachments.next();
|
||
|
|
}
|
||
|
|
this._detachments.complete();
|
||
|
|
}
|
||
|
|
/** Whether the overlay has attached content. */
|
||
|
|
hasAttached() {
|
||
|
|
return this._portalOutlet.hasAttached();
|
||
|
|
}
|
||
|
|
/** Gets an observable that emits when the backdrop has been clicked. */
|
||
|
|
backdropClick() {
|
||
|
|
return this._backdropClick;
|
||
|
|
}
|
||
|
|
/** Gets an observable that emits when the overlay has been attached. */
|
||
|
|
attachments() {
|
||
|
|
return this._attachments;
|
||
|
|
}
|
||
|
|
/** Gets an observable that emits when the overlay has been detached. */
|
||
|
|
detachments() {
|
||
|
|
return this._detachments;
|
||
|
|
}
|
||
|
|
/** Gets an observable of keydown events targeted to this overlay. */
|
||
|
|
keydownEvents() {
|
||
|
|
return this._keydownEvents;
|
||
|
|
}
|
||
|
|
/** Gets an observable of pointer events targeted outside this overlay. */
|
||
|
|
outsidePointerEvents() {
|
||
|
|
return this._outsidePointerEvents;
|
||
|
|
}
|
||
|
|
/** Gets the current overlay configuration, which is immutable. */
|
||
|
|
getConfig() {
|
||
|
|
return this._config;
|
||
|
|
}
|
||
|
|
/** Updates the position of the overlay based on the position strategy. */
|
||
|
|
updatePosition() {
|
||
|
|
if (this._positionStrategy) {
|
||
|
|
this._positionStrategy.apply();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Switches to a new position strategy and updates the overlay position. */
|
||
|
|
updatePositionStrategy(strategy) {
|
||
|
|
if (strategy === this._positionStrategy) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this._positionStrategy) {
|
||
|
|
this._positionStrategy.dispose();
|
||
|
|
}
|
||
|
|
this._positionStrategy = strategy;
|
||
|
|
if (this.hasAttached()) {
|
||
|
|
strategy.attach(this);
|
||
|
|
this.updatePosition();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Update the size properties of the overlay. */
|
||
|
|
updateSize(sizeConfig) {
|
||
|
|
this._config = { ...this._config, ...sizeConfig };
|
||
|
|
this._updateElementSize();
|
||
|
|
}
|
||
|
|
/** Sets the LTR/RTL direction for the overlay. */
|
||
|
|
setDirection(dir) {
|
||
|
|
this._config = { ...this._config, direction: dir };
|
||
|
|
this._updateElementDirection();
|
||
|
|
}
|
||
|
|
/** Add a CSS class or an array of classes to the overlay pane. */
|
||
|
|
addPanelClass(classes) {
|
||
|
|
if (this._pane) {
|
||
|
|
this._toggleClasses(this._pane, classes, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Remove a CSS class or an array of classes from the overlay pane. */
|
||
|
|
removePanelClass(classes) {
|
||
|
|
if (this._pane) {
|
||
|
|
this._toggleClasses(this._pane, classes, false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Returns the layout direction of the overlay panel.
|
||
|
|
*/
|
||
|
|
getDirection() {
|
||
|
|
const direction = this._config.direction;
|
||
|
|
if (!direction) {
|
||
|
|
return 'ltr';
|
||
|
|
}
|
||
|
|
return typeof direction === 'string' ? direction : direction.value;
|
||
|
|
}
|
||
|
|
/** Switches to a new scroll strategy. */
|
||
|
|
updateScrollStrategy(strategy) {
|
||
|
|
if (strategy === this._scrollStrategy) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this._disposeScrollStrategy();
|
||
|
|
this._scrollStrategy = strategy;
|
||
|
|
if (this.hasAttached()) {
|
||
|
|
strategy.attach(this);
|
||
|
|
strategy.enable();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Updates the text direction of the overlay panel. */
|
||
|
|
_updateElementDirection() {
|
||
|
|
this._host.setAttribute('dir', this.getDirection());
|
||
|
|
}
|
||
|
|
/** Updates the size of the overlay element based on the overlay config. */
|
||
|
|
_updateElementSize() {
|
||
|
|
if (!this._pane) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const style = this._pane.style;
|
||
|
|
style.width = coerceCssPixelValue(this._config.width);
|
||
|
|
style.height = coerceCssPixelValue(this._config.height);
|
||
|
|
style.minWidth = coerceCssPixelValue(this._config.minWidth);
|
||
|
|
style.minHeight = coerceCssPixelValue(this._config.minHeight);
|
||
|
|
style.maxWidth = coerceCssPixelValue(this._config.maxWidth);
|
||
|
|
style.maxHeight = coerceCssPixelValue(this._config.maxHeight);
|
||
|
|
}
|
||
|
|
/** Toggles the pointer events for the overlay pane element. */
|
||
|
|
_togglePointerEvents(enablePointer) {
|
||
|
|
this._pane.style.pointerEvents = enablePointer ? '' : 'none';
|
||
|
|
}
|
||
|
|
/** Attaches a backdrop for this overlay. */
|
||
|
|
_attachBackdrop() {
|
||
|
|
const showingClass = 'cdk-overlay-backdrop-showing';
|
||
|
|
this._backdropElement = this._document.createElement('div');
|
||
|
|
this._backdropElement.classList.add('cdk-overlay-backdrop');
|
||
|
|
if (this._animationsDisabled) {
|
||
|
|
this._backdropElement.classList.add('cdk-overlay-backdrop-noop-animation');
|
||
|
|
}
|
||
|
|
if (this._config.backdropClass) {
|
||
|
|
this._toggleClasses(this._backdropElement, this._config.backdropClass, true);
|
||
|
|
}
|
||
|
|
// Insert the backdrop before the pane in the DOM order,
|
||
|
|
// in order to handle stacked overlays properly.
|
||
|
|
this._host.parentElement.insertBefore(this._backdropElement, this._host);
|
||
|
|
// Forward backdrop clicks such that the consumer of the overlay can perform whatever
|
||
|
|
// action desired when such a click occurs (usually closing the overlay).
|
||
|
|
this._backdropElement.addEventListener('click', this._backdropClickHandler);
|
||
|
|
// Add class to fade-in the backdrop after one frame.
|
||
|
|
if (!this._animationsDisabled && typeof requestAnimationFrame !== 'undefined') {
|
||
|
|
this._ngZone.runOutsideAngular(() => {
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
if (this._backdropElement) {
|
||
|
|
this._backdropElement.classList.add(showingClass);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._backdropElement.classList.add(showingClass);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Updates the stacking order of the element, moving it to the top if necessary.
|
||
|
|
* This is required in cases where one overlay was detached, while another one,
|
||
|
|
* that should be behind it, was destroyed. The next time both of them are opened,
|
||
|
|
* the stacking will be wrong, because the detached element's pane will still be
|
||
|
|
* in its original DOM position.
|
||
|
|
*/
|
||
|
|
_updateStackingOrder() {
|
||
|
|
if (this._host.nextSibling) {
|
||
|
|
this._host.parentNode.appendChild(this._host);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Detaches the backdrop (if any) associated with the overlay. */
|
||
|
|
detachBackdrop() {
|
||
|
|
const backdropToDetach = this._backdropElement;
|
||
|
|
if (!backdropToDetach) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this._animationsDisabled) {
|
||
|
|
this._disposeBackdrop(backdropToDetach);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
|
||
|
|
this._ngZone.runOutsideAngular(() => {
|
||
|
|
backdropToDetach.addEventListener('transitionend', this._backdropTransitionendHandler);
|
||
|
|
});
|
||
|
|
// If the backdrop doesn't have a transition, the `transitionend` event won't fire.
|
||
|
|
// In this case we make it unclickable and we try to remove it after a delay.
|
||
|
|
backdropToDetach.style.pointerEvents = 'none';
|
||
|
|
// Run this outside the Angular zone because there's nothing that Angular cares about.
|
||
|
|
// If it were to run inside the Angular zone, every test that used Overlay would have to be
|
||
|
|
// either async or fakeAsync.
|
||
|
|
this._backdropTimeout = this._ngZone.runOutsideAngular(() => setTimeout(() => {
|
||
|
|
this._disposeBackdrop(backdropToDetach);
|
||
|
|
}, 500));
|
||
|
|
}
|
||
|
|
/** Toggles a single CSS class or an array of classes on an element. */
|
||
|
|
_toggleClasses(element, cssClasses, isAdd) {
|
||
|
|
const classes = coerceArray(cssClasses || []).filter(c => !!c);
|
||
|
|
if (classes.length) {
|
||
|
|
isAdd ? element.classList.add(...classes) : element.classList.remove(...classes);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Detaches the overlay content next time the zone stabilizes. */
|
||
|
|
_detachContentWhenStable() {
|
||
|
|
// Normally we wouldn't have to explicitly run this outside the `NgZone`, however
|
||
|
|
// if the consumer is using `zone-patch-rxjs`, the `Subscription.unsubscribe` call will
|
||
|
|
// be patched to run inside the zone, which will throw us into an infinite loop.
|
||
|
|
this._ngZone.runOutsideAngular(() => {
|
||
|
|
// We can't remove the host here immediately, because the overlay pane's content
|
||
|
|
// might still be animating. This stream helps us avoid interrupting the animation
|
||
|
|
// by waiting for the pane to become empty.
|
||
|
|
const subscription = this._ngZone.onStable
|
||
|
|
.pipe(takeUntil(merge(this._attachments, this._detachments)))
|
||
|
|
.subscribe(() => {
|
||
|
|
// Needs a couple of checks for the pane and host, because
|
||
|
|
// they may have been removed by the time the zone stabilizes.
|
||
|
|
if (!this._pane || !this._host || this._pane.children.length === 0) {
|
||
|
|
if (this._pane && this._config.panelClass) {
|
||
|
|
this._toggleClasses(this._pane, this._config.panelClass, false);
|
||
|
|
}
|
||
|
|
if (this._host && this._host.parentElement) {
|
||
|
|
this._previousHostParent = this._host.parentElement;
|
||
|
|
this._host.remove();
|
||
|
|
}
|
||
|
|
subscription.unsubscribe();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/** Disposes of a scroll strategy. */
|
||
|
|
_disposeScrollStrategy() {
|
||
|
|
const scrollStrategy = this._scrollStrategy;
|
||
|
|
if (scrollStrategy) {
|
||
|
|
scrollStrategy.disable();
|
||
|
|
if (scrollStrategy.detach) {
|
||
|
|
scrollStrategy.detach();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Removes a backdrop element from the DOM. */
|
||
|
|
_disposeBackdrop(backdrop) {
|
||
|
|
if (backdrop) {
|
||
|
|
backdrop.removeEventListener('click', this._backdropClickHandler);
|
||
|
|
backdrop.removeEventListener('transitionend', this._backdropTransitionendHandler);
|
||
|
|
backdrop.remove();
|
||
|
|
// It is possible that a new portal has been attached to this overlay since we started
|
||
|
|
// removing the backdrop. If that is the case, only clear the backdrop reference if it
|
||
|
|
// is still the same instance that we started to remove.
|
||
|
|
if (this._backdropElement === backdrop) {
|
||
|
|
this._backdropElement = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this._backdropTimeout) {
|
||
|
|
clearTimeout(this._backdropTimeout);
|
||
|
|
this._backdropTimeout = undefined;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO: refactor clipping detection into a separate thing (part of scrolling module)
|
||
|
|
// TODO: doesn't handle both flexible width and height when it has to scroll along both axis.
|
||
|
|
/** Class to be added to the overlay bounding box. */
|
||
|
|
const boundingBoxClass = 'cdk-overlay-connected-position-bounding-box';
|
||
|
|
/** Regex used to split a string on its CSS units. */
|
||
|
|
const cssUnitPattern = /([A-Za-z%]+)$/;
|
||
|
|
/**
|
||
|
|
* A strategy for positioning overlays. Using this strategy, an overlay is given an
|
||
|
|
* implicit position relative some origin element. The relative position is defined in terms of
|
||
|
|
* a point on the origin element that is connected to a point on the overlay element. For example,
|
||
|
|
* a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
|
||
|
|
* of the overlay.
|
||
|
|
*/
|
||
|
|
class FlexibleConnectedPositionStrategy {
|
||
|
|
/** Ordered list of preferred positions, from most to least desirable. */
|
||
|
|
get positions() {
|
||
|
|
return this._preferredPositions;
|
||
|
|
}
|
||
|
|
constructor(connectedTo, _viewportRuler, _document, _platform, _overlayContainer) {
|
||
|
|
this._viewportRuler = _viewportRuler;
|
||
|
|
this._document = _document;
|
||
|
|
this._platform = _platform;
|
||
|
|
this._overlayContainer = _overlayContainer;
|
||
|
|
/** Last size used for the bounding box. Used to avoid resizing the overlay after open. */
|
||
|
|
this._lastBoundingBoxSize = { width: 0, height: 0 };
|
||
|
|
/** Whether the overlay was pushed in a previous positioning. */
|
||
|
|
this._isPushed = false;
|
||
|
|
/** Whether the overlay can be pushed on-screen on the initial open. */
|
||
|
|
this._canPush = true;
|
||
|
|
/** Whether the overlay can grow via flexible width/height after the initial open. */
|
||
|
|
this._growAfterOpen = false;
|
||
|
|
/** Whether the overlay's width and height can be constrained to fit within the viewport. */
|
||
|
|
this._hasFlexibleDimensions = true;
|
||
|
|
/** Whether the overlay position is locked. */
|
||
|
|
this._positionLocked = false;
|
||
|
|
/** Amount of space that must be maintained between the overlay and the edge of the viewport. */
|
||
|
|
this._viewportMargin = 0;
|
||
|
|
/** The Scrollable containers used to check scrollable view properties on position change. */
|
||
|
|
this._scrollables = [];
|
||
|
|
/** Ordered list of preferred positions, from most to least desirable. */
|
||
|
|
this._preferredPositions = [];
|
||
|
|
/** Subject that emits whenever the position changes. */
|
||
|
|
this._positionChanges = new Subject();
|
||
|
|
/** Subscription to viewport size changes. */
|
||
|
|
this._resizeSubscription = Subscription.EMPTY;
|
||
|
|
/** Default offset for the overlay along the x axis. */
|
||
|
|
this._offsetX = 0;
|
||
|
|
/** Default offset for the overlay along the y axis. */
|
||
|
|
this._offsetY = 0;
|
||
|
|
/** Keeps track of the CSS classes that the position strategy has applied on the overlay panel. */
|
||
|
|
this._appliedPanelClasses = [];
|
||
|
|
/** Observable sequence of position changes. */
|
||
|
|
this.positionChanges = this._positionChanges;
|
||
|
|
this.setOrigin(connectedTo);
|
||
|
|
}
|
||
|
|
/** Attaches this position strategy to an overlay. */
|
||
|
|
attach(overlayRef) {
|
||
|
|
if (this._overlayRef &&
|
||
|
|
overlayRef !== this._overlayRef &&
|
||
|
|
(typeof ngDevMode === 'undefined' || ngDevMode)) {
|
||
|
|
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(() => {
|
||
|
|
// When the window is resized, we want to trigger the next reposition as if it
|
||
|
|
// was an initial render, in order for the strategy to pick a new optimal position,
|
||
|
|
// otherwise position locking will cause it to stay at the old one.
|
||
|
|
this._isInitialRender = true;
|
||
|
|
this.apply();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Updates the position of the overlay element, using whichever preferred position relative
|
||
|
|
* to the origin best fits on-screen.
|
||
|
|
*
|
||
|
|
* The selection of a position goes as follows:
|
||
|
|
* - If any positions fit completely within the viewport as-is,
|
||
|
|
* choose the first position that does so.
|
||
|
|
* - If flexible dimensions are enabled and at least one satisfies the given minimum width/height,
|
||
|
|
* choose the position with the greatest available size modified by the positions' weight.
|
||
|
|
* - If pushing is enabled, take the position that went off-screen the least and push it
|
||
|
|
* on-screen.
|
||
|
|
* - If none of the previous criteria were met, use the position that goes off-screen the least.
|
||
|
|
* @docs-private
|
||
|
|
*/
|
||
|
|
apply() {
|
||
|
|
// We shouldn't do anything if the strategy was disposed or we're on the server.
|
||
|
|
if (this._isDisposed || !this._platform.isBrowser) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// If the position has been applied already (e.g. when the overlay was opened) and the
|
||
|
|
// consumer opted into locking in the position, re-use the old position, in order to
|
||
|
|
// prevent the overlay from jumping around.
|
||
|
|
if (!this._isInitialRender && this._positionLocked && this._lastPosition) {
|
||
|
|
this.reapplyLastPosition();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this._clearPanelClasses();
|
||
|
|
this._resetOverlayElementStyles();
|
||
|
|
this._resetBoundingBoxStyles();
|
||
|
|
// We need the bounding rects for the origin, the overlay and the container to determine how to position
|
||
|
|
// the overlay relative to the origin.
|
||
|
|
// We use the viewport rect to determine whether a position would go off-screen.
|
||
|
|
this._viewportRect = this._getNarrowedViewportRect();
|
||
|
|
this._originRect = this._getOriginRect();
|
||
|
|
this._overlayRect = this._pane.getBoundingClientRect();
|
||
|
|
this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
|
||
|
|
const originRect = this._originRect;
|
||
|
|
const overlayRect = this._overlayRect;
|
||
|
|
const viewportRect = this._viewportRect;
|
||
|
|
const containerRect = this._containerRect;
|
||
|
|
// Positions where the overlay will fit with flexible dimensions.
|
||
|
|
const flexibleFits = [];
|
||
|
|
// Fallback if none of the preferred positions fit within the viewport.
|
||
|
|
let fallback;
|
||
|
|
// Go through each of the preferred positions looking for a good fit.
|
||
|
|
// If a good fit is found, it will be applied immediately.
|
||
|
|
for (let pos of this._preferredPositions) {
|
||
|
|
// Get the exact (x, y) coordinate for the point-of-origin on the origin element.
|
||
|
|
let originPoint = this._getOriginPoint(originRect, containerRect, pos);
|
||
|
|
// From that point-of-origin, get the exact (x, y) coordinate for the top-left corner of the
|
||
|
|
// overlay in this position. We use the top-left corner for calculations and later translate
|
||
|
|
// this into an appropriate (top, left, bottom, right) style.
|
||
|
|
let overlayPoint = this._getOverlayPoint(originPoint, overlayRect, pos);
|
||
|
|
// Calculate how well the overlay would fit into the viewport with this point.
|
||
|
|
let overlayFit = this._getOverlayFit(overlayPoint, overlayRect, viewportRect, pos);
|
||
|
|
// If the overlay, without any further work, fits into the viewport, use this position.
|
||
|
|
if (overlayFit.isCompletelyWithinViewport) {
|
||
|
|
this._isPushed = false;
|
||
|
|
this._applyPosition(pos, originPoint);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// If the overlay has flexible dimensions, we can use this position
|
||
|
|
// so long as there's enough space for the minimum dimensions.
|
||
|
|
if (this._canFitWithFlexibleDimensions(overlayFit, overlayPoint, viewportRect)) {
|
||
|
|
// Save positions where the overlay will fit with flexible dimensions. We will use these
|
||
|
|
// if none of the positions fit *without* flexible dimensions.
|
||
|
|
flexibleFits.push({
|
||
|
|
position: pos,
|
||
|
|
origin: originPoint,
|
||
|
|
overlayRect,
|
||
|
|
boundingBoxRect: this._calculateBoundingBoxRect(originPoint, pos),
|
||
|
|
});
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
// If the current preferred position does not fit on the screen, remember the position
|
||
|
|
// if it has more visible area on-screen than we've seen and move onto the next preferred
|
||
|
|
// position.
|
||
|
|
if (!fallback || fallback.overlayFit.visibleArea < overlayFit.visibleArea) {
|
||
|
|
fallback = { overlayFit, overlayPoint, originPoint, position: pos, overlayRect };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// If there are any positions where the overlay would fit with flexible dimensions, choose the
|
||
|
|
// one that has the greatest area available modified by the position's weight
|
||
|
|
if (flexibleFits.length) {
|
||
|
|
let bestFit = null;
|
||
|
|
let 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;
|
||
|
|
}
|
||
|
|
// When none of the preferred positions fit within the viewport, take the position
|
||
|
|
// that went off-screen the least and attempt to push it on-screen.
|
||
|
|
if (this._canPush) {
|
||
|
|
// TODO(jelbourn): after pushing, the opening "direction" of the overlay might not make sense.
|
||
|
|
this._isPushed = true;
|
||
|
|
this._applyPosition(fallback.position, fallback.originPoint);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// All options for getting the overlay within the viewport have been exhausted, so go with the
|
||
|
|
// position that went off-screen the least.
|
||
|
|
this._applyPosition(fallback.position, fallback.originPoint);
|
||
|
|
}
|
||
|
|
detach() {
|
||
|
|
this._clearPanelClasses();
|
||
|
|
this._lastPosition = null;
|
||
|
|
this._previousPushAmount = null;
|
||
|
|
this._resizeSubscription.unsubscribe();
|
||
|
|
}
|
||
|
|
/** Cleanup after the element gets destroyed. */
|
||
|
|
dispose() {
|
||
|
|
if (this._isDisposed) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// We can't use `_resetBoundingBoxStyles` here, because it resets
|
||
|
|
// some properties to zero, rather than removing them.
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* This re-aligns the overlay element with the trigger in its last calculated position,
|
||
|
|
* even if a position higher in the "preferred positions" list would now fit. This
|
||
|
|
* allows one to re-align the panel without changing the orientation of the panel.
|
||
|
|
*/
|
||
|
|
reapplyLastPosition() {
|
||
|
|
if (this._isDisposed || !this._platform.isBrowser) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const lastPosition = this._lastPosition;
|
||
|
|
if (lastPosition) {
|
||
|
|
this._originRect = this._getOriginRect();
|
||
|
|
this._overlayRect = this._pane.getBoundingClientRect();
|
||
|
|
this._viewportRect = this._getNarrowedViewportRect();
|
||
|
|
this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
|
||
|
|
const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);
|
||
|
|
this._applyPosition(lastPosition, originPoint);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.apply();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the list of Scrollable containers that host the origin element so that
|
||
|
|
* on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
|
||
|
|
* Scrollable must be an ancestor element of the strategy's origin element.
|
||
|
|
*/
|
||
|
|
withScrollableContainers(scrollables) {
|
||
|
|
this._scrollables = scrollables;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Adds new preferred positions.
|
||
|
|
* @param positions List of positions options for this overlay.
|
||
|
|
*/
|
||
|
|
withPositions(positions) {
|
||
|
|
this._preferredPositions = positions;
|
||
|
|
// If the last calculated position object isn't part of the positions anymore, clear
|
||
|
|
// it in order to avoid it being picked up if the consumer tries to re-apply.
|
||
|
|
if (positions.indexOf(this._lastPosition) === -1) {
|
||
|
|
this._lastPosition = null;
|
||
|
|
}
|
||
|
|
this._validatePositions();
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets a minimum distance the overlay may be positioned to the edge of the viewport.
|
||
|
|
* @param margin Required margin between the overlay and the viewport edge in pixels.
|
||
|
|
*/
|
||
|
|
withViewportMargin(margin) {
|
||
|
|
this._viewportMargin = margin;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/** Sets whether the overlay's width and height can be constrained to fit within the viewport. */
|
||
|
|
withFlexibleDimensions(flexibleDimensions = true) {
|
||
|
|
this._hasFlexibleDimensions = flexibleDimensions;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/** Sets whether the overlay can grow after the initial open via flexible width/height. */
|
||
|
|
withGrowAfterOpen(growAfterOpen = true) {
|
||
|
|
this._growAfterOpen = growAfterOpen;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/** Sets whether the overlay can be pushed on-screen if none of the provided positions fit. */
|
||
|
|
withPush(canPush = true) {
|
||
|
|
this._canPush = canPush;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets whether the overlay's position should be locked in after it is positioned
|
||
|
|
* initially. When an overlay is locked in, it won't attempt to reposition itself
|
||
|
|
* when the position is re-applied (e.g. when the user scrolls away).
|
||
|
|
* @param isLocked Whether the overlay should locked in.
|
||
|
|
*/
|
||
|
|
withLockedPosition(isLocked = true) {
|
||
|
|
this._positionLocked = isLocked;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the origin, relative to which to position the overlay.
|
||
|
|
* Using an element origin is useful for building components that need to be positioned
|
||
|
|
* relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be
|
||
|
|
* used for cases like contextual menus which open relative to the user's pointer.
|
||
|
|
* @param origin Reference to the new origin.
|
||
|
|
*/
|
||
|
|
setOrigin(origin) {
|
||
|
|
this._origin = origin;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the default offset for the overlay's connection point on the x-axis.
|
||
|
|
* @param offset New offset in the X axis.
|
||
|
|
*/
|
||
|
|
withDefaultOffsetX(offset) {
|
||
|
|
this._offsetX = offset;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the default offset for the overlay's connection point on the y-axis.
|
||
|
|
* @param offset New offset in the Y axis.
|
||
|
|
*/
|
||
|
|
withDefaultOffsetY(offset) {
|
||
|
|
this._offsetY = offset;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Configures that the position strategy should set a `transform-origin` on some elements
|
||
|
|
* inside the overlay, depending on the current position that is being applied. This is
|
||
|
|
* useful for the cases where the origin of an animation can change depending on the
|
||
|
|
* alignment of the overlay.
|
||
|
|
* @param selector CSS selector that will be used to find the target
|
||
|
|
* elements onto which to set the transform origin.
|
||
|
|
*/
|
||
|
|
withTransformOriginOn(selector) {
|
||
|
|
this._transformOriginSelector = selector;
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
|
||
|
|
*/
|
||
|
|
_getOriginPoint(originRect, containerRect, pos) {
|
||
|
|
let x;
|
||
|
|
if (pos.originX == 'center') {
|
||
|
|
// Note: when centering we should always use the `left`
|
||
|
|
// offset, otherwise the position will be wrong in RTL.
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
// When zooming in Safari the container rectangle contains negative values for the position
|
||
|
|
// and we need to re-add them to the calculated coordinates.
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
// Normally the containerRect's top value would be zero, however when the overlay is attached to an input
|
||
|
|
// (e.g. in an autocomplete), mobile browsers will shift everything in order to put the input in the middle
|
||
|
|
// of the screen and to make space for the virtual keyboard. We need to account for this offset,
|
||
|
|
// otherwise our positioning will be thrown off.
|
||
|
|
// Additionally, when zooming in Safari this fixes the vertical position.
|
||
|
|
if (containerRect.top < 0) {
|
||
|
|
y -= containerRect.top;
|
||
|
|
}
|
||
|
|
return { x, y };
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and
|
||
|
|
* origin point to which the overlay should be connected.
|
||
|
|
*/
|
||
|
|
_getOverlayPoint(originPoint, overlayRect, pos) {
|
||
|
|
// Calculate the (overlayStartX, overlayStartY), the start of the
|
||
|
|
// potential overlay position relative to the origin point.
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
// The (x, y) coordinates of the overlay.
|
||
|
|
return {
|
||
|
|
x: originPoint.x + overlayStartX,
|
||
|
|
y: originPoint.y + overlayStartY,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/** Gets how well an overlay at the given point will fit within the viewport. */
|
||
|
|
_getOverlayFit(point, rawOverlayRect, viewport, position) {
|
||
|
|
// Round the overlay rect when comparing against the
|
||
|
|
// viewport, because the viewport is always rounded.
|
||
|
|
const overlay = getRoundedBoundingClientRect(rawOverlayRect);
|
||
|
|
let { x, y } = point;
|
||
|
|
let offsetX = this._getOffset(position, 'x');
|
||
|
|
let offsetY = this._getOffset(position, 'y');
|
||
|
|
// Account for the offsets since they could push the overlay out of the viewport.
|
||
|
|
if (offsetX) {
|
||
|
|
x += offsetX;
|
||
|
|
}
|
||
|
|
if (offsetY) {
|
||
|
|
y += offsetY;
|
||
|
|
}
|
||
|
|
// How much the overlay would overflow at this position, on each side.
|
||
|
|
let leftOverflow = 0 - x;
|
||
|
|
let rightOverflow = x + overlay.width - viewport.width;
|
||
|
|
let topOverflow = 0 - y;
|
||
|
|
let bottomOverflow = y + overlay.height - viewport.height;
|
||
|
|
// Visible parts of the element on each axis.
|
||
|
|
let visibleWidth = this._subtractOverflows(overlay.width, leftOverflow, rightOverflow);
|
||
|
|
let visibleHeight = this._subtractOverflows(overlay.height, topOverflow, bottomOverflow);
|
||
|
|
let visibleArea = visibleWidth * visibleHeight;
|
||
|
|
return {
|
||
|
|
visibleArea,
|
||
|
|
isCompletelyWithinViewport: overlay.width * overlay.height === visibleArea,
|
||
|
|
fitsInViewportVertically: visibleHeight === overlay.height,
|
||
|
|
fitsInViewportHorizontally: visibleWidth == overlay.width,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Whether the overlay can fit within the viewport when it may resize either its width or height.
|
||
|
|
* @param fit How well the overlay fits in the viewport at some position.
|
||
|
|
* @param point The (x, y) coordinates of the overlay at some position.
|
||
|
|
* @param viewport The geometry of the viewport.
|
||
|
|
*/
|
||
|
|
_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;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Gets the point at which the overlay can be "pushed" on-screen. If the overlay is larger than
|
||
|
|
* the viewport, the top-left corner will be pushed on-screen (with overflow occurring on the
|
||
|
|
* right and bottom).
|
||
|
|
*
|
||
|
|
* @param start Starting point from which the overlay is pushed.
|
||
|
|
* @param rawOverlayRect Dimensions of the overlay.
|
||
|
|
* @param scrollPosition Current viewport scroll position.
|
||
|
|
* @returns The point at which to position the overlay after pushing. This is effectively a new
|
||
|
|
* originPoint.
|
||
|
|
*/
|
||
|
|
_pushOverlayOnScreen(start, rawOverlayRect, scrollPosition) {
|
||
|
|
// If the position is locked and we've pushed the overlay already, reuse the previous push
|
||
|
|
// amount, rather than pushing it again. If we were to continue pushing, the element would
|
||
|
|
// remain in the viewport, which goes against the expectations when position locking is enabled.
|
||
|
|
if (this._previousPushAmount && this._positionLocked) {
|
||
|
|
return {
|
||
|
|
x: start.x + this._previousPushAmount.x,
|
||
|
|
y: start.y + this._previousPushAmount.y,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
// Round the overlay rect when comparing against the
|
||
|
|
// viewport, because the viewport is always rounded.
|
||
|
|
const overlay = getRoundedBoundingClientRect(rawOverlayRect);
|
||
|
|
const viewport = this._viewportRect;
|
||
|
|
// Determine how much the overlay goes outside the viewport on each
|
||
|
|
// side, which we'll use to decide which direction to push it.
|
||
|
|
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);
|
||
|
|
// Amount by which to push the overlay in each axis such that it remains on-screen.
|
||
|
|
let pushX = 0;
|
||
|
|
let pushY = 0;
|
||
|
|
// If the overlay fits completely within the bounds of the viewport, push it from whichever
|
||
|
|
// direction is goes off-screen. Otherwise, push the top-left corner such that its in the
|
||
|
|
// viewport and allow for the trailing end of the overlay to go out of bounds.
|
||
|
|
if (overlay.width <= viewport.width) {
|
||
|
|
pushX = overflowLeft || -overflowRight;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
pushX = start.x < this._viewportMargin ? viewport.left - scrollPosition.left - start.x : 0;
|
||
|
|
}
|
||
|
|
if (overlay.height <= viewport.height) {
|
||
|
|
pushY = overflowTop || -overflowBottom;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
pushY = start.y < this._viewportMargin ? viewport.top - scrollPosition.top - start.y : 0;
|
||
|
|
}
|
||
|
|
this._previousPushAmount = { x: pushX, y: pushY };
|
||
|
|
return {
|
||
|
|
x: start.x + pushX,
|
||
|
|
y: start.y + pushY,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Applies a computed position to the overlay and emits a position change.
|
||
|
|
* @param position The position preference
|
||
|
|
* @param originPoint The point on the origin element where the overlay is connected.
|
||
|
|
*/
|
||
|
|
_applyPosition(position, originPoint) {
|
||
|
|
this._setTransformOrigin(position);
|
||
|
|
this._setOverlayElementStyles(originPoint, position);
|
||
|
|
this._setBoundingBoxStyles(originPoint, position);
|
||
|
|
if (position.panelClass) {
|
||
|
|
this._addPanelClasses(position.panelClass);
|
||
|
|
}
|
||
|
|
// Save the last connected position in case the position needs to be re-calculated.
|
||
|
|
this._lastPosition = position;
|
||
|
|
// Notify that the position has been changed along with its change properties.
|
||
|
|
// We only emit if we've got any subscriptions, because the scroll visibility
|
||
|
|
// calculations can be somewhat expensive.
|
||
|
|
if (this._positionChanges.observers.length) {
|
||
|
|
const scrollableViewProperties = this._getScrollVisibility();
|
||
|
|
const changeEvent = new ConnectedOverlayPositionChange(position, scrollableViewProperties);
|
||
|
|
this._positionChanges.next(changeEvent);
|
||
|
|
}
|
||
|
|
this._isInitialRender = false;
|
||
|
|
}
|
||
|
|
/** Sets the transform origin based on the configured selector and the passed-in position. */
|
||
|
|
_setTransformOrigin(position) {
|
||
|
|
if (!this._transformOriginSelector) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const elements = this._boundingBox.querySelectorAll(this._transformOriginSelector);
|
||
|
|
let xOrigin;
|
||
|
|
let 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 (let i = 0; i < elements.length; i++) {
|
||
|
|
elements[i].style.transformOrigin = `${xOrigin} ${yOrigin}`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Gets the position and size of the overlay's sizing container.
|
||
|
|
*
|
||
|
|
* This method does no measuring and applies no styles so that we can cheaply compute the
|
||
|
|
* bounds for all positions and choose the best fit based on these results.
|
||
|
|
*/
|
||
|
|
_calculateBoundingBoxRect(origin, position) {
|
||
|
|
const viewport = this._viewportRect;
|
||
|
|
const isRtl = this._isRtl();
|
||
|
|
let height, top, bottom;
|
||
|
|
if (position.overlayY === 'top') {
|
||
|
|
// Overlay is opening "downward" and thus is bound by the bottom viewport edge.
|
||
|
|
top = origin.y;
|
||
|
|
height = viewport.height - top + this._viewportMargin;
|
||
|
|
}
|
||
|
|
else if (position.overlayY === 'bottom') {
|
||
|
|
// Overlay is opening "upward" and thus is bound by the top viewport edge. We need to add
|
||
|
|
// the viewport margin back in, because the viewport rect is narrowed down to remove the
|
||
|
|
// margin, whereas the `origin` position is calculated based on its `ClientRect`.
|
||
|
|
bottom = viewport.height - origin.y + this._viewportMargin * 2;
|
||
|
|
height = viewport.height - bottom + this._viewportMargin;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// If neither top nor bottom, it means that the overlay is vertically centered on the
|
||
|
|
// origin point. Note that we want the position relative to the viewport, rather than
|
||
|
|
// the page, which is why we don't use something like `viewport.bottom - origin.y` and
|
||
|
|
// `origin.y - viewport.top`.
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// The overlay is opening 'right-ward' (the content flows to the right).
|
||
|
|
const isBoundedByRightViewportEdge = (position.overlayX === 'start' && !isRtl) || (position.overlayX === 'end' && isRtl);
|
||
|
|
// The overlay is opening 'left-ward' (the content flows to the left).
|
||
|
|
const isBoundedByLeftViewportEdge = (position.overlayX === 'end' && !isRtl) || (position.overlayX === 'start' && isRtl);
|
||
|
|
let width, left, right;
|
||
|
|
if (isBoundedByLeftViewportEdge) {
|
||
|
|
right = viewport.width - origin.x + this._viewportMargin;
|
||
|
|
width = origin.x - this._viewportMargin;
|
||
|
|
}
|
||
|
|
else if (isBoundedByRightViewportEdge) {
|
||
|
|
left = origin.x;
|
||
|
|
width = viewport.right - origin.x;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// If neither start nor end, it means that the overlay is horizontally centered on the
|
||
|
|
// origin point. Note that we want the position relative to the viewport, rather than
|
||
|
|
// the page, which is why we don't use something like `viewport.right - origin.x` and
|
||
|
|
// `origin.x - viewport.left`.
|
||
|
|
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 };
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the
|
||
|
|
* origin's connection point and stretches to the bounds of the viewport.
|
||
|
|
*
|
||
|
|
* @param origin The point on the origin element where the overlay is connected.
|
||
|
|
* @param position The position preference
|
||
|
|
*/
|
||
|
|
_setBoundingBoxStyles(origin, position) {
|
||
|
|
const boundingBoxRect = this._calculateBoundingBoxRect(origin, position);
|
||
|
|
// It's weird if the overlay *grows* while scrolling, so we take the last size into account
|
||
|
|
// when applying a new size.
|
||
|
|
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 = styles.maxHeight = styles.maxWidth = '';
|
||
|
|
styles.width = styles.height = '100%';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const maxHeight = this._overlayRef.getConfig().maxHeight;
|
||
|
|
const maxWidth = this._overlayRef.getConfig().maxWidth;
|
||
|
|
styles.height = coerceCssPixelValue(boundingBoxRect.height);
|
||
|
|
styles.top = coerceCssPixelValue(boundingBoxRect.top);
|
||
|
|
styles.bottom = coerceCssPixelValue(boundingBoxRect.bottom);
|
||
|
|
styles.width = coerceCssPixelValue(boundingBoxRect.width);
|
||
|
|
styles.left = coerceCssPixelValue(boundingBoxRect.left);
|
||
|
|
styles.right = coerceCssPixelValue(boundingBoxRect.right);
|
||
|
|
// Push the pane content towards the proper direction.
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
/** Resets the styles for the bounding box so that a new positioning can be computed. */
|
||
|
|
_resetBoundingBoxStyles() {
|
||
|
|
extendStyles(this._boundingBox.style, {
|
||
|
|
top: '0',
|
||
|
|
left: '0',
|
||
|
|
right: '0',
|
||
|
|
bottom: '0',
|
||
|
|
height: '',
|
||
|
|
width: '',
|
||
|
|
alignItems: '',
|
||
|
|
justifyContent: '',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/** Resets the styles for the overlay pane so that a new positioning can be computed. */
|
||
|
|
_resetOverlayElementStyles() {
|
||
|
|
extendStyles(this._pane.style, {
|
||
|
|
top: '',
|
||
|
|
left: '',
|
||
|
|
bottom: '',
|
||
|
|
right: '',
|
||
|
|
position: '',
|
||
|
|
transform: '',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/** Sets positioning styles to the overlay element. */
|
||
|
|
_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';
|
||
|
|
}
|
||
|
|
// Use a transform to apply the offsets. We do this because the `center` positions rely on
|
||
|
|
// being in the normal flex flow and setting a `top` / `left` at all will completely throw
|
||
|
|
// off the position. We also can't use margins, because they won't have an effect in some
|
||
|
|
// cases where the element doesn't have anything to "push off of". Finally, this works
|
||
|
|
// better both with flexible and non-flexible positioning.
|
||
|
|
let transformString = '';
|
||
|
|
let offsetX = this._getOffset(position, 'x');
|
||
|
|
let offsetY = this._getOffset(position, 'y');
|
||
|
|
if (offsetX) {
|
||
|
|
transformString += `translateX(${offsetX}px) `;
|
||
|
|
}
|
||
|
|
if (offsetY) {
|
||
|
|
transformString += `translateY(${offsetY}px)`;
|
||
|
|
}
|
||
|
|
styles.transform = transformString.trim();
|
||
|
|
// If a maxWidth or maxHeight is specified on the overlay, we remove them. We do this because
|
||
|
|
// we need these values to both be set to "100%" for the automatic flexible sizing to work.
|
||
|
|
// The maxHeight and maxWidth are set on the boundingBox in order to enforce the constraint.
|
||
|
|
// Note that this doesn't apply when we have an exact position, in which case we do want to
|
||
|
|
// apply them because they'll be cleared from the bounding box.
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
/** Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing. */
|
||
|
|
_getExactOverlayY(position, originPoint, scrollPosition) {
|
||
|
|
// Reset any existing styles. This is necessary in case the
|
||
|
|
// preferred position has changed since the last `apply`.
|
||
|
|
let styles = { top: '', bottom: '' };
|
||
|
|
let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
|
||
|
|
if (this._isPushed) {
|
||
|
|
overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
|
||
|
|
}
|
||
|
|
// We want to set either `top` or `bottom` based on whether the overlay wants to appear
|
||
|
|
// above or below the origin and the direction in which the element will expand.
|
||
|
|
if (position.overlayY === 'bottom') {
|
||
|
|
// When using `bottom`, we adjust the y position such that it is the distance
|
||
|
|
// from the bottom of the viewport rather than the top.
|
||
|
|
const documentHeight = this._document.documentElement.clientHeight;
|
||
|
|
styles.bottom = `${documentHeight - (overlayPoint.y + this._overlayRect.height)}px`;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
styles.top = coerceCssPixelValue(overlayPoint.y);
|
||
|
|
}
|
||
|
|
return styles;
|
||
|
|
}
|
||
|
|
/** Gets the exact left/right for the overlay when not using flexible sizing or when pushing. */
|
||
|
|
_getExactOverlayX(position, originPoint, scrollPosition) {
|
||
|
|
// Reset any existing styles. This is necessary in case the preferred position has
|
||
|
|
// changed since the last `apply`.
|
||
|
|
let styles = { left: '', right: '' };
|
||
|
|
let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
|
||
|
|
if (this._isPushed) {
|
||
|
|
overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
|
||
|
|
}
|
||
|
|
// We want to set either `left` or `right` based on whether the overlay wants to appear "before"
|
||
|
|
// or "after" the origin, which determines the direction in which the element will expand.
|
||
|
|
// For the horizontal axis, the meaning of "before" and "after" change based on whether the
|
||
|
|
// page is in RTL or LTR.
|
||
|
|
let horizontalStyleProperty;
|
||
|
|
if (this._isRtl()) {
|
||
|
|
horizontalStyleProperty = position.overlayX === 'end' ? 'left' : 'right';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
horizontalStyleProperty = position.overlayX === 'end' ? 'right' : 'left';
|
||
|
|
}
|
||
|
|
// When we're setting `right`, we adjust the x position such that it is the distance
|
||
|
|
// from the right edge of the viewport rather than the left edge.
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Gets the view properties of the trigger and overlay, including whether they are clipped
|
||
|
|
* or completely outside the view of any of the strategy's scrollables.
|
||
|
|
*/
|
||
|
|
_getScrollVisibility() {
|
||
|
|
// Note: needs fresh rects since the position could've changed.
|
||
|
|
const originBounds = this._getOriginRect();
|
||
|
|
const overlayBounds = this._pane.getBoundingClientRect();
|
||
|
|
// TODO(jelbourn): instead of needing all of the client rects for these scrolling containers
|
||
|
|
// every time, we should be able to use the scrollTop of the containers if the size of those
|
||
|
|
// containers hasn't changed.
|
||
|
|
const scrollContainerBounds = this._scrollables.map(scrollable => {
|
||
|
|
return scrollable.getElementRef().nativeElement.getBoundingClientRect();
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
isOriginClipped: isElementClippedByScrolling(originBounds, scrollContainerBounds),
|
||
|
|
isOriginOutsideView: isElementScrolledOutsideView(originBounds, scrollContainerBounds),
|
||
|
|
isOverlayClipped: isElementClippedByScrolling(overlayBounds, scrollContainerBounds),
|
||
|
|
isOverlayOutsideView: isElementScrolledOutsideView(overlayBounds, scrollContainerBounds),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/** Subtracts the amount that an element is overflowing on an axis from its length. */
|
||
|
|
_subtractOverflows(length, ...overflows) {
|
||
|
|
return overflows.reduce((currentValue, currentOverflow) => {
|
||
|
|
return currentValue - Math.max(currentOverflow, 0);
|
||
|
|
}, length);
|
||
|
|
}
|
||
|
|
/** Narrows the given viewport rect by the current _viewportMargin. */
|
||
|
|
_getNarrowedViewportRect() {
|
||
|
|
// We recalculate the viewport rect here ourselves, rather than using the ViewportRuler,
|
||
|
|
// because we want to use the `clientWidth` and `clientHeight` as the base. The difference
|
||
|
|
// being that the client properties don't include the scrollbar, as opposed to `innerWidth`
|
||
|
|
// and `innerHeight` that do. This is necessary, because the overlay container uses
|
||
|
|
// 100% `width` and `height` which don't include the scrollbar either.
|
||
|
|
const width = this._document.documentElement.clientWidth;
|
||
|
|
const height = this._document.documentElement.clientHeight;
|
||
|
|
const scrollPosition = this._viewportRuler.getViewportScrollPosition();
|
||
|
|
return {
|
||
|
|
top: scrollPosition.top + this._viewportMargin,
|
||
|
|
left: scrollPosition.left + this._viewportMargin,
|
||
|
|
right: scrollPosition.left + width - this._viewportMargin,
|
||
|
|
bottom: scrollPosition.top + height - this._viewportMargin,
|
||
|
|
width: width - 2 * this._viewportMargin,
|
||
|
|
height: height - 2 * this._viewportMargin,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/** Whether the we're dealing with an RTL context */
|
||
|
|
_isRtl() {
|
||
|
|
return this._overlayRef.getDirection() === 'rtl';
|
||
|
|
}
|
||
|
|
/** Determines whether the overlay uses exact or flexible positioning. */
|
||
|
|
_hasExactPosition() {
|
||
|
|
return !this._hasFlexibleDimensions || this._isPushed;
|
||
|
|
}
|
||
|
|
/** Retrieves the offset of a position along the x or y axis. */
|
||
|
|
_getOffset(position, axis) {
|
||
|
|
if (axis === 'x') {
|
||
|
|
// We don't do something like `position['offset' + axis]` in
|
||
|
|
// order to avoid breaking minifiers that rename properties.
|
||
|
|
return position.offsetX == null ? this._offsetX : position.offsetX;
|
||
|
|
}
|
||
|
|
return position.offsetY == null ? this._offsetY : position.offsetY;
|
||
|
|
}
|
||
|
|
/** Validates that the current position match the expected values. */
|
||
|
|
_validatePositions() {
|
||
|
|
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
||
|
|
if (!this._preferredPositions.length) {
|
||
|
|
throw Error('FlexibleConnectedPositionStrategy: At least one position is required.');
|
||
|
|
}
|
||
|
|
// TODO(crisbeto): remove these once Angular's template type
|
||
|
|
// checking is advanced enough to catch these cases.
|
||
|
|
this._preferredPositions.forEach(pair => {
|
||
|
|
validateHorizontalPosition('originX', pair.originX);
|
||
|
|
validateVerticalPosition('originY', pair.originY);
|
||
|
|
validateHorizontalPosition('overlayX', pair.overlayX);
|
||
|
|
validateVerticalPosition('overlayY', pair.overlayY);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Adds a single CSS class or an array of classes on the overlay panel. */
|
||
|
|
_addPanelClasses(cssClasses) {
|
||
|
|
if (this._pane) {
|
||
|
|
coerceArray(cssClasses).forEach(cssClass => {
|
||
|
|
if (cssClass !== '' && this._appliedPanelClasses.indexOf(cssClass) === -1) {
|
||
|
|
this._appliedPanelClasses.push(cssClass);
|
||
|
|
this._pane.classList.add(cssClass);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Clears the classes that the position strategy has applied from the overlay panel. */
|
||
|
|
_clearPanelClasses() {
|
||
|
|
if (this._pane) {
|
||
|
|
this._appliedPanelClasses.forEach(cssClass => {
|
||
|
|
this._pane.classList.remove(cssClass);
|
||
|
|
});
|
||
|
|
this._appliedPanelClasses = [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Returns the ClientRect of the current origin. */
|
||
|
|
_getOriginRect() {
|
||
|
|
const origin = this._origin;
|
||
|
|
if (origin instanceof ElementRef) {
|
||
|
|
return origin.nativeElement.getBoundingClientRect();
|
||
|
|
}
|
||
|
|
// Check for Element so SVG elements are also supported.
|
||
|
|
if (origin instanceof Element) {
|
||
|
|
return origin.getBoundingClientRect();
|
||
|
|
}
|
||
|
|
const width = origin.width || 0;
|
||
|
|
const height = origin.height || 0;
|
||
|
|
// If the origin is a point, return a client rect as if it was a 0x0 element at the point.
|
||
|
|
return {
|
||
|
|
top: origin.y,
|
||
|
|
bottom: origin.y + height,
|
||
|
|
left: origin.x,
|
||
|
|
right: origin.x + width,
|
||
|
|
height,
|
||
|
|
width,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Shallow-extends a stylesheet object with another stylesheet object. */
|
||
|
|
function extendStyles(destination, source) {
|
||
|
|
for (let key in source) {
|
||
|
|
if (source.hasOwnProperty(key)) {
|
||
|
|
destination[key] = source[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return destination;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Extracts the pixel value as a number from a value, if it's a number
|
||
|
|
* or a CSS pixel string (e.g. `1337px`). Otherwise returns null.
|
||
|
|
*/
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Gets a version of an element's bounding `ClientRect` where all the values are rounded down to
|
||
|
|
* the nearest pixel. This allows us to account for the cases where there may be sub-pixel
|
||
|
|
* deviations in the `ClientRect` returned by the browser (e.g. when zoomed in with a percentage
|
||
|
|
* size, see #21350).
|
||
|
|
*/
|
||
|
|
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),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
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' },
|
||
|
|
];
|
||
|
|
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' },
|
||
|
|
];
|
||
|
|
|
||
|
|
/** Class to be added to the overlay pane wrapper. */
|
||
|
|
const wrapperClass = 'cdk-global-overlay-wrapper';
|
||
|
|
/**
|
||
|
|
* A strategy for positioning overlays. Using this strategy, an overlay is given an
|
||
|
|
* explicit position relative to the browser's viewport. We use flexbox, instead of
|
||
|
|
* transforms, in order to avoid issues with subpixel rendering which can cause the
|
||
|
|
* element to become blurry.
|
||
|
|
*/
|
||
|
|
class GlobalPositionStrategy {
|
||
|
|
constructor() {
|
||
|
|
this._cssPosition = 'static';
|
||
|
|
this._topOffset = '';
|
||
|
|
this._bottomOffset = '';
|
||
|
|
this._alignItems = '';
|
||
|
|
this._xPosition = '';
|
||
|
|
this._xOffset = '';
|
||
|
|
this._width = '';
|
||
|
|
this._height = '';
|
||
|
|
this._isDisposed = false;
|
||
|
|
}
|
||
|
|
attach(overlayRef) {
|
||
|
|
const config = overlayRef.getConfig();
|
||
|
|
this._overlayRef = overlayRef;
|
||
|
|
if (this._width && !config.width) {
|
||
|
|
overlayRef.updateSize({ width: this._width });
|
||
|
|
}
|
||
|
|
if (this._height && !config.height) {
|
||
|
|
overlayRef.updateSize({ height: this._height });
|
||
|
|
}
|
||
|
|
overlayRef.hostElement.classList.add(wrapperClass);
|
||
|
|
this._isDisposed = false;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the top position of the overlay. Clears any previously set vertical position.
|
||
|
|
* @param value New top offset.
|
||
|
|
*/
|
||
|
|
top(value = '') {
|
||
|
|
this._bottomOffset = '';
|
||
|
|
this._topOffset = value;
|
||
|
|
this._alignItems = 'flex-start';
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the left position of the overlay. Clears any previously set horizontal position.
|
||
|
|
* @param value New left offset.
|
||
|
|
*/
|
||
|
|
left(value = '') {
|
||
|
|
this._xOffset = value;
|
||
|
|
this._xPosition = 'left';
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the bottom position of the overlay. Clears any previously set vertical position.
|
||
|
|
* @param value New bottom offset.
|
||
|
|
*/
|
||
|
|
bottom(value = '') {
|
||
|
|
this._topOffset = '';
|
||
|
|
this._bottomOffset = value;
|
||
|
|
this._alignItems = 'flex-end';
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the right position of the overlay. Clears any previously set horizontal position.
|
||
|
|
* @param value New right offset.
|
||
|
|
*/
|
||
|
|
right(value = '') {
|
||
|
|
this._xOffset = value;
|
||
|
|
this._xPosition = 'right';
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the overlay to the start of the viewport, depending on the overlay direction.
|
||
|
|
* This will be to the left in LTR layouts and to the right in RTL.
|
||
|
|
* @param offset Offset from the edge of the screen.
|
||
|
|
*/
|
||
|
|
start(value = '') {
|
||
|
|
this._xOffset = value;
|
||
|
|
this._xPosition = 'start';
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the overlay to the end of the viewport, depending on the overlay direction.
|
||
|
|
* This will be to the right in LTR layouts and to the left in RTL.
|
||
|
|
* @param offset Offset from the edge of the screen.
|
||
|
|
*/
|
||
|
|
end(value = '') {
|
||
|
|
this._xOffset = value;
|
||
|
|
this._xPosition = 'end';
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the overlay width and clears any previously set width.
|
||
|
|
* @param value New width for the overlay
|
||
|
|
* @deprecated Pass the `width` through the `OverlayConfig`.
|
||
|
|
* @breaking-change 8.0.0
|
||
|
|
*/
|
||
|
|
width(value = '') {
|
||
|
|
if (this._overlayRef) {
|
||
|
|
this._overlayRef.updateSize({ width: value });
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._width = value;
|
||
|
|
}
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the overlay height and clears any previously set height.
|
||
|
|
* @param value New height for the overlay
|
||
|
|
* @deprecated Pass the `height` through the `OverlayConfig`.
|
||
|
|
* @breaking-change 8.0.0
|
||
|
|
*/
|
||
|
|
height(value = '') {
|
||
|
|
if (this._overlayRef) {
|
||
|
|
this._overlayRef.updateSize({ height: value });
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._height = value;
|
||
|
|
}
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Centers the overlay horizontally with an optional offset.
|
||
|
|
* Clears any previously set horizontal position.
|
||
|
|
*
|
||
|
|
* @param offset Overlay offset from the horizontal center.
|
||
|
|
*/
|
||
|
|
centerHorizontally(offset = '') {
|
||
|
|
this.left(offset);
|
||
|
|
this._xPosition = 'center';
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Centers the overlay vertically with an optional offset.
|
||
|
|
* Clears any previously set vertical position.
|
||
|
|
*
|
||
|
|
* @param offset Overlay offset from the vertical center.
|
||
|
|
*/
|
||
|
|
centerVertically(offset = '') {
|
||
|
|
this.top(offset);
|
||
|
|
this._alignItems = 'center';
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Apply the position to the element.
|
||
|
|
* @docs-private
|
||
|
|
*/
|
||
|
|
apply() {
|
||
|
|
// Since the overlay ref applies the strategy asynchronously, it could
|
||
|
|
// have been disposed before it ends up being applied. If that is the
|
||
|
|
// case, we shouldn't do anything.
|
||
|
|
if (!this._overlayRef || !this._overlayRef.hasAttached()) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const styles = this._overlayRef.overlayElement.style;
|
||
|
|
const parentStyles = this._overlayRef.hostElement.style;
|
||
|
|
const config = this._overlayRef.getConfig();
|
||
|
|
const { width, height, maxWidth, maxHeight } = config;
|
||
|
|
const shouldBeFlushHorizontally = (width === '100%' || width === '100vw') &&
|
||
|
|
(!maxWidth || maxWidth === '100%' || maxWidth === '100vw');
|
||
|
|
const shouldBeFlushVertically = (height === '100%' || height === '100vh') &&
|
||
|
|
(!maxHeight || maxHeight === '100%' || maxHeight === '100vh');
|
||
|
|
const xPosition = this._xPosition;
|
||
|
|
const xOffset = this._xOffset;
|
||
|
|
const isRtl = this._overlayRef.getConfig().direction === 'rtl';
|
||
|
|
let marginLeft = '';
|
||
|
|
let marginRight = '';
|
||
|
|
let justifyContent = '';
|
||
|
|
if (shouldBeFlushHorizontally) {
|
||
|
|
justifyContent = 'flex-start';
|
||
|
|
}
|
||
|
|
else if (xPosition === 'center') {
|
||
|
|
justifyContent = 'center';
|
||
|
|
if (isRtl) {
|
||
|
|
marginRight = xOffset;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
marginLeft = xOffset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (isRtl) {
|
||
|
|
if (xPosition === 'left' || xPosition === 'end') {
|
||
|
|
justifyContent = 'flex-end';
|
||
|
|
marginLeft = xOffset;
|
||
|
|
}
|
||
|
|
else if (xPosition === 'right' || xPosition === 'start') {
|
||
|
|
justifyContent = 'flex-start';
|
||
|
|
marginRight = xOffset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (xPosition === 'left' || xPosition === 'start') {
|
||
|
|
justifyContent = 'flex-start';
|
||
|
|
marginLeft = xOffset;
|
||
|
|
}
|
||
|
|
else if (xPosition === 'right' || xPosition === 'end') {
|
||
|
|
justifyContent = 'flex-end';
|
||
|
|
marginRight = xOffset;
|
||
|
|
}
|
||
|
|
styles.position = this._cssPosition;
|
||
|
|
styles.marginLeft = shouldBeFlushHorizontally ? '0' : marginLeft;
|
||
|
|
styles.marginTop = shouldBeFlushVertically ? '0' : this._topOffset;
|
||
|
|
styles.marginBottom = this._bottomOffset;
|
||
|
|
styles.marginRight = shouldBeFlushHorizontally ? '0' : marginRight;
|
||
|
|
parentStyles.justifyContent = justifyContent;
|
||
|
|
parentStyles.alignItems = shouldBeFlushVertically ? 'flex-start' : this._alignItems;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Cleans up the DOM changes from the position strategy.
|
||
|
|
* @docs-private
|
||
|
|
*/
|
||
|
|
dispose() {
|
||
|
|
if (this._isDisposed || !this._overlayRef) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const styles = this._overlayRef.overlayElement.style;
|
||
|
|
const parent = this._overlayRef.hostElement;
|
||
|
|
const parentStyles = parent.style;
|
||
|
|
parent.classList.remove(wrapperClass);
|
||
|
|
parentStyles.justifyContent =
|
||
|
|
parentStyles.alignItems =
|
||
|
|
styles.marginTop =
|
||
|
|
styles.marginBottom =
|
||
|
|
styles.marginLeft =
|
||
|
|
styles.marginRight =
|
||
|
|
styles.position =
|
||
|
|
'';
|
||
|
|
this._overlayRef = null;
|
||
|
|
this._isDisposed = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Builder for overlay position strategy. */
|
||
|
|
class OverlayPositionBuilder {
|
||
|
|
constructor(_viewportRuler, _document, _platform, _overlayContainer) {
|
||
|
|
this._viewportRuler = _viewportRuler;
|
||
|
|
this._document = _document;
|
||
|
|
this._platform = _platform;
|
||
|
|
this._overlayContainer = _overlayContainer;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Creates a global position strategy.
|
||
|
|
*/
|
||
|
|
global() {
|
||
|
|
return new GlobalPositionStrategy();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Creates a flexible position strategy.
|
||
|
|
* @param origin Origin relative to which to position the overlay.
|
||
|
|
*/
|
||
|
|
flexibleConnectedTo(origin) {
|
||
|
|
return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document, this._platform, this._overlayContainer);
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayPositionBuilder, deps: [{ token: i1.ViewportRuler }, { token: DOCUMENT }, { token: i1$1.Platform }, { token: OverlayContainer }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
||
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayPositionBuilder, providedIn: 'root' }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayPositionBuilder, decorators: [{
|
||
|
|
type: Injectable,
|
||
|
|
args: [{ providedIn: 'root' }]
|
||
|
|
}], ctorParameters: function () { return [{ type: i1.ViewportRuler }, { type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: i1$1.Platform }, { type: OverlayContainer }]; } });
|
||
|
|
|
||
|
|
/** Next overlay unique ID. */
|
||
|
|
let nextUniqueId = 0;
|
||
|
|
// Note that Overlay is *not* scoped to the app root because of the ComponentFactoryResolver
|
||
|
|
// which needs to be different depending on where OverlayModule is imported.
|
||
|
|
/**
|
||
|
|
* Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be
|
||
|
|
* used as a low-level building block for other components. Dialogs, tooltips, menus,
|
||
|
|
* selects, etc. can all be built using overlays. The service should primarily be used by authors
|
||
|
|
* of re-usable components rather than developers building end-user applications.
|
||
|
|
*
|
||
|
|
* An overlay *is* a PortalOutlet, so any kind of Portal can be loaded into one.
|
||
|
|
*/
|
||
|
|
class Overlay {
|
||
|
|
constructor(
|
||
|
|
/** Scrolling strategies that can be used when creating an overlay. */
|
||
|
|
scrollStrategies, _overlayContainer, _componentFactoryResolver, _positionBuilder, _keyboardDispatcher, _injector, _ngZone, _document, _directionality, _location, _outsideClickDispatcher, _animationsModuleType) {
|
||
|
|
this.scrollStrategies = scrollStrategies;
|
||
|
|
this._overlayContainer = _overlayContainer;
|
||
|
|
this._componentFactoryResolver = _componentFactoryResolver;
|
||
|
|
this._positionBuilder = _positionBuilder;
|
||
|
|
this._keyboardDispatcher = _keyboardDispatcher;
|
||
|
|
this._injector = _injector;
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
this._document = _document;
|
||
|
|
this._directionality = _directionality;
|
||
|
|
this._location = _location;
|
||
|
|
this._outsideClickDispatcher = _outsideClickDispatcher;
|
||
|
|
this._animationsModuleType = _animationsModuleType;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Creates an overlay.
|
||
|
|
* @param config Configuration applied to the overlay.
|
||
|
|
* @returns Reference to the created overlay.
|
||
|
|
*/
|
||
|
|
create(config) {
|
||
|
|
const host = this._createHostElement();
|
||
|
|
const pane = this._createPaneElement(host);
|
||
|
|
const portalOutlet = this._createPortalOutlet(pane);
|
||
|
|
const overlayConfig = new OverlayConfig(config);
|
||
|
|
overlayConfig.direction = overlayConfig.direction || this._directionality.value;
|
||
|
|
return new OverlayRef(portalOutlet, host, pane, overlayConfig, this._ngZone, this._keyboardDispatcher, this._document, this._location, this._outsideClickDispatcher, this._animationsModuleType === 'NoopAnimations');
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Gets a position builder that can be used, via fluent API,
|
||
|
|
* to construct and configure a position strategy.
|
||
|
|
* @returns An overlay position builder.
|
||
|
|
*/
|
||
|
|
position() {
|
||
|
|
return this._positionBuilder;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Creates the DOM element for an overlay and appends it to the overlay container.
|
||
|
|
* @returns Newly-created pane element
|
||
|
|
*/
|
||
|
|
_createPaneElement(host) {
|
||
|
|
const pane = this._document.createElement('div');
|
||
|
|
pane.id = `cdk-overlay-${nextUniqueId++}`;
|
||
|
|
pane.classList.add('cdk-overlay-pane');
|
||
|
|
host.appendChild(pane);
|
||
|
|
return pane;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Creates the host element that wraps around an overlay
|
||
|
|
* and can be used for advanced positioning.
|
||
|
|
* @returns Newly-create host element.
|
||
|
|
*/
|
||
|
|
_createHostElement() {
|
||
|
|
const host = this._document.createElement('div');
|
||
|
|
this._overlayContainer.getContainerElement().appendChild(host);
|
||
|
|
return host;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Create a DomPortalOutlet into which the overlay content can be loaded.
|
||
|
|
* @param pane The DOM element to turn into a portal outlet.
|
||
|
|
* @returns A portal outlet for the given DOM element.
|
||
|
|
*/
|
||
|
|
_createPortalOutlet(pane) {
|
||
|
|
// We have to resolve the ApplicationRef later in order to allow people
|
||
|
|
// to use overlay-based providers during app initialization.
|
||
|
|
if (!this._appRef) {
|
||
|
|
this._appRef = this._injector.get(ApplicationRef);
|
||
|
|
}
|
||
|
|
return new DomPortalOutlet(pane, this._componentFactoryResolver, this._appRef, this._injector, this._document);
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: Overlay, deps: [{ token: ScrollStrategyOptions }, { token: OverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: OverlayPositionBuilder }, { token: OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i5.Directionality }, { token: i6.Location }, { token: OverlayOutsideClickDispatcher }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
||
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: Overlay, providedIn: 'root' }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: Overlay, decorators: [{
|
||
|
|
type: Injectable,
|
||
|
|
args: [{ providedIn: 'root' }]
|
||
|
|
}], ctorParameters: function () { return [{ type: ScrollStrategyOptions }, { type: OverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: OverlayPositionBuilder }, { type: OverlayKeyboardDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: i5.Directionality }, { type: i6.Location }, { type: OverlayOutsideClickDispatcher }, { type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [ANIMATION_MODULE_TYPE]
|
||
|
|
}, {
|
||
|
|
type: Optional
|
||
|
|
}] }]; } });
|
||
|
|
|
||
|
|
/** Default set of positions for the overlay. Follows the behavior of a dropdown. */
|
||
|
|
const defaultPositionList = [
|
||
|
|
{
|
||
|
|
originX: 'start',
|
||
|
|
originY: 'bottom',
|
||
|
|
overlayX: 'start',
|
||
|
|
overlayY: 'top',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
originX: 'start',
|
||
|
|
originY: 'top',
|
||
|
|
overlayX: 'start',
|
||
|
|
overlayY: 'bottom',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
originX: 'end',
|
||
|
|
originY: 'top',
|
||
|
|
overlayX: 'end',
|
||
|
|
overlayY: 'bottom',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
originX: 'end',
|
||
|
|
originY: 'bottom',
|
||
|
|
overlayX: 'end',
|
||
|
|
overlayY: 'top',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
/** Injection token that determines the scroll handling while the connected overlay is open. */
|
||
|
|
const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY = new InjectionToken('cdk-connected-overlay-scroll-strategy');
|
||
|
|
/**
|
||
|
|
* Directive applied to an element to make it usable as an origin for an Overlay using a
|
||
|
|
* ConnectedPositionStrategy.
|
||
|
|
*/
|
||
|
|
class CdkOverlayOrigin {
|
||
|
|
constructor(
|
||
|
|
/** Reference to the element on which the directive is applied. */
|
||
|
|
elementRef) {
|
||
|
|
this.elementRef = elementRef;
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkOverlayOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
||
|
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkOverlayOrigin, isStandalone: true, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"], ngImport: i0 }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkOverlayOrigin, decorators: [{
|
||
|
|
type: Directive,
|
||
|
|
args: [{
|
||
|
|
selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
|
||
|
|
exportAs: 'cdkOverlayOrigin',
|
||
|
|
standalone: true,
|
||
|
|
}]
|
||
|
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
|
||
|
|
/**
|
||
|
|
* Directive to facilitate declarative creation of an
|
||
|
|
* Overlay using a FlexibleConnectedPositionStrategy.
|
||
|
|
*/
|
||
|
|
class CdkConnectedOverlay {
|
||
|
|
/** The offset in pixels for the overlay connection point on the x-axis */
|
||
|
|
get offsetX() {
|
||
|
|
return this._offsetX;
|
||
|
|
}
|
||
|
|
set offsetX(offsetX) {
|
||
|
|
this._offsetX = offsetX;
|
||
|
|
if (this._position) {
|
||
|
|
this._updatePositionStrategy(this._position);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** The offset in pixels for the overlay connection point on the y-axis */
|
||
|
|
get offsetY() {
|
||
|
|
return this._offsetY;
|
||
|
|
}
|
||
|
|
set offsetY(offsetY) {
|
||
|
|
this._offsetY = offsetY;
|
||
|
|
if (this._position) {
|
||
|
|
this._updatePositionStrategy(this._position);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Whether or not the overlay should attach a backdrop. */
|
||
|
|
get hasBackdrop() {
|
||
|
|
return this._hasBackdrop;
|
||
|
|
}
|
||
|
|
set hasBackdrop(value) {
|
||
|
|
this._hasBackdrop = coerceBooleanProperty(value);
|
||
|
|
}
|
||
|
|
/** Whether or not the overlay should be locked when scrolling. */
|
||
|
|
get lockPosition() {
|
||
|
|
return this._lockPosition;
|
||
|
|
}
|
||
|
|
set lockPosition(value) {
|
||
|
|
this._lockPosition = coerceBooleanProperty(value);
|
||
|
|
}
|
||
|
|
/** Whether the overlay's width and height can be constrained to fit within the viewport. */
|
||
|
|
get flexibleDimensions() {
|
||
|
|
return this._flexibleDimensions;
|
||
|
|
}
|
||
|
|
set flexibleDimensions(value) {
|
||
|
|
this._flexibleDimensions = coerceBooleanProperty(value);
|
||
|
|
}
|
||
|
|
/** Whether the overlay can grow after the initial open when flexible positioning is turned on. */
|
||
|
|
get growAfterOpen() {
|
||
|
|
return this._growAfterOpen;
|
||
|
|
}
|
||
|
|
set growAfterOpen(value) {
|
||
|
|
this._growAfterOpen = coerceBooleanProperty(value);
|
||
|
|
}
|
||
|
|
/** Whether the overlay can be pushed on-screen if none of the provided positions fit. */
|
||
|
|
get push() {
|
||
|
|
return this._push;
|
||
|
|
}
|
||
|
|
set push(value) {
|
||
|
|
this._push = coerceBooleanProperty(value);
|
||
|
|
}
|
||
|
|
// TODO(jelbourn): inputs for size, scroll behavior, animation, etc.
|
||
|
|
constructor(_overlay, templateRef, viewContainerRef, scrollStrategyFactory, _dir) {
|
||
|
|
this._overlay = _overlay;
|
||
|
|
this._dir = _dir;
|
||
|
|
this._hasBackdrop = false;
|
||
|
|
this._lockPosition = false;
|
||
|
|
this._growAfterOpen = false;
|
||
|
|
this._flexibleDimensions = false;
|
||
|
|
this._push = false;
|
||
|
|
this._backdropSubscription = Subscription.EMPTY;
|
||
|
|
this._attachSubscription = Subscription.EMPTY;
|
||
|
|
this._detachSubscription = Subscription.EMPTY;
|
||
|
|
this._positionSubscription = Subscription.EMPTY;
|
||
|
|
/** Margin between the overlay and the viewport edges. */
|
||
|
|
this.viewportMargin = 0;
|
||
|
|
/** Whether the overlay is open. */
|
||
|
|
this.open = false;
|
||
|
|
/** Whether the overlay can be closed by user interaction. */
|
||
|
|
this.disableClose = false;
|
||
|
|
/** Event emitted when the backdrop is clicked. */
|
||
|
|
this.backdropClick = new EventEmitter();
|
||
|
|
/** Event emitted when the position has changed. */
|
||
|
|
this.positionChange = new EventEmitter();
|
||
|
|
/** Event emitted when the overlay has been attached. */
|
||
|
|
this.attach = new EventEmitter();
|
||
|
|
/** Event emitted when the overlay has been detached. */
|
||
|
|
this.detach = new EventEmitter();
|
||
|
|
/** Emits when there are keyboard events that are targeted at the overlay. */
|
||
|
|
this.overlayKeydown = new EventEmitter();
|
||
|
|
/** Emits when there are mouse outside click events that are targeted at the overlay. */
|
||
|
|
this.overlayOutsideClick = new EventEmitter();
|
||
|
|
this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
|
||
|
|
this._scrollStrategyFactory = scrollStrategyFactory;
|
||
|
|
this.scrollStrategy = this._scrollStrategyFactory();
|
||
|
|
}
|
||
|
|
/** The associated overlay reference. */
|
||
|
|
get overlayRef() {
|
||
|
|
return this._overlayRef;
|
||
|
|
}
|
||
|
|
/** The element's layout direction. */
|
||
|
|
get dir() {
|
||
|
|
return this._dir ? this._dir.value : 'ltr';
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this._attachSubscription.unsubscribe();
|
||
|
|
this._detachSubscription.unsubscribe();
|
||
|
|
this._backdropSubscription.unsubscribe();
|
||
|
|
this._positionSubscription.unsubscribe();
|
||
|
|
if (this._overlayRef) {
|
||
|
|
this._overlayRef.dispose();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnChanges(changes) {
|
||
|
|
if (this._position) {
|
||
|
|
this._updatePositionStrategy(this._position);
|
||
|
|
this._overlayRef.updateSize({
|
||
|
|
width: this.width,
|
||
|
|
minWidth: this.minWidth,
|
||
|
|
height: this.height,
|
||
|
|
minHeight: this.minHeight,
|
||
|
|
});
|
||
|
|
if (changes['origin'] && this.open) {
|
||
|
|
this._position.apply();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (changes['open']) {
|
||
|
|
this.open ? this._attachOverlay() : this._detachOverlay();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Creates an overlay */
|
||
|
|
_createOverlay() {
|
||
|
|
if (!this.positions || !this.positions.length) {
|
||
|
|
this.positions = defaultPositionList;
|
||
|
|
}
|
||
|
|
const overlayRef = (this._overlayRef = this._overlay.create(this._buildConfig()));
|
||
|
|
this._attachSubscription = overlayRef.attachments().subscribe(() => this.attach.emit());
|
||
|
|
this._detachSubscription = overlayRef.detachments().subscribe(() => this.detach.emit());
|
||
|
|
overlayRef.keydownEvents().subscribe((event) => {
|
||
|
|
this.overlayKeydown.next(event);
|
||
|
|
if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {
|
||
|
|
event.preventDefault();
|
||
|
|
this._detachOverlay();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this._overlayRef.outsidePointerEvents().subscribe((event) => {
|
||
|
|
this.overlayOutsideClick.next(event);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/** Builds the overlay config based on the directive's inputs */
|
||
|
|
_buildConfig() {
|
||
|
|
const positionStrategy = (this._position =
|
||
|
|
this.positionStrategy || this._createPositionStrategy());
|
||
|
|
const overlayConfig = new OverlayConfig({
|
||
|
|
direction: this._dir,
|
||
|
|
positionStrategy,
|
||
|
|
scrollStrategy: this.scrollStrategy,
|
||
|
|
hasBackdrop: this.hasBackdrop,
|
||
|
|
});
|
||
|
|
if (this.width || this.width === 0) {
|
||
|
|
overlayConfig.width = this.width;
|
||
|
|
}
|
||
|
|
if (this.height || this.height === 0) {
|
||
|
|
overlayConfig.height = this.height;
|
||
|
|
}
|
||
|
|
if (this.minWidth || this.minWidth === 0) {
|
||
|
|
overlayConfig.minWidth = this.minWidth;
|
||
|
|
}
|
||
|
|
if (this.minHeight || this.minHeight === 0) {
|
||
|
|
overlayConfig.minHeight = this.minHeight;
|
||
|
|
}
|
||
|
|
if (this.backdropClass) {
|
||
|
|
overlayConfig.backdropClass = this.backdropClass;
|
||
|
|
}
|
||
|
|
if (this.panelClass) {
|
||
|
|
overlayConfig.panelClass = this.panelClass;
|
||
|
|
}
|
||
|
|
return overlayConfig;
|
||
|
|
}
|
||
|
|
/** Updates the state of a position strategy, based on the values of the directive inputs. */
|
||
|
|
_updatePositionStrategy(positionStrategy) {
|
||
|
|
const positions = this.positions.map(currentPosition => ({
|
||
|
|
originX: currentPosition.originX,
|
||
|
|
originY: currentPosition.originY,
|
||
|
|
overlayX: currentPosition.overlayX,
|
||
|
|
overlayY: currentPosition.overlayY,
|
||
|
|
offsetX: currentPosition.offsetX || this.offsetX,
|
||
|
|
offsetY: currentPosition.offsetY || this.offsetY,
|
||
|
|
panelClass: currentPosition.panelClass || undefined,
|
||
|
|
}));
|
||
|
|
return positionStrategy
|
||
|
|
.setOrigin(this._getFlexibleConnectedPositionStrategyOrigin())
|
||
|
|
.withPositions(positions)
|
||
|
|
.withFlexibleDimensions(this.flexibleDimensions)
|
||
|
|
.withPush(this.push)
|
||
|
|
.withGrowAfterOpen(this.growAfterOpen)
|
||
|
|
.withViewportMargin(this.viewportMargin)
|
||
|
|
.withLockedPosition(this.lockPosition)
|
||
|
|
.withTransformOriginOn(this.transformOriginSelector);
|
||
|
|
}
|
||
|
|
/** Returns the position strategy of the overlay to be set on the overlay config */
|
||
|
|
_createPositionStrategy() {
|
||
|
|
const strategy = this._overlay
|
||
|
|
.position()
|
||
|
|
.flexibleConnectedTo(this._getFlexibleConnectedPositionStrategyOrigin());
|
||
|
|
this._updatePositionStrategy(strategy);
|
||
|
|
return strategy;
|
||
|
|
}
|
||
|
|
_getFlexibleConnectedPositionStrategyOrigin() {
|
||
|
|
if (this.origin instanceof CdkOverlayOrigin) {
|
||
|
|
return this.origin.elementRef;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return this.origin;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */
|
||
|
|
_attachOverlay() {
|
||
|
|
if (!this._overlayRef) {
|
||
|
|
this._createOverlay();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// Update the overlay size, in case the directive's inputs have changed
|
||
|
|
this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;
|
||
|
|
}
|
||
|
|
if (!this._overlayRef.hasAttached()) {
|
||
|
|
this._overlayRef.attach(this._templatePortal);
|
||
|
|
}
|
||
|
|
if (this.hasBackdrop) {
|
||
|
|
this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {
|
||
|
|
this.backdropClick.emit(event);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._backdropSubscription.unsubscribe();
|
||
|
|
}
|
||
|
|
this._positionSubscription.unsubscribe();
|
||
|
|
// Only subscribe to `positionChanges` if requested, because putting
|
||
|
|
// together all the information for it can be expensive.
|
||
|
|
if (this.positionChange.observers.length > 0) {
|
||
|
|
this._positionSubscription = this._position.positionChanges
|
||
|
|
.pipe(takeWhile(() => this.positionChange.observers.length > 0))
|
||
|
|
.subscribe(position => {
|
||
|
|
this.positionChange.emit(position);
|
||
|
|
if (this.positionChange.observers.length === 0) {
|
||
|
|
this._positionSubscription.unsubscribe();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */
|
||
|
|
_detachOverlay() {
|
||
|
|
if (this._overlayRef) {
|
||
|
|
this._overlayRef.detach();
|
||
|
|
}
|
||
|
|
this._backdropSubscription.unsubscribe();
|
||
|
|
this._positionSubscription.unsubscribe();
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkConnectedOverlay, deps: [{ token: Overlay }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY }, { token: i5.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
||
|
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkConnectedOverlay, isStandalone: true, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: { origin: ["cdkConnectedOverlayOrigin", "origin"], positions: ["cdkConnectedOverlayPositions", "positions"], positionStrategy: ["cdkConnectedOverlayPositionStrategy", "positionStrategy"], offsetX: ["cdkConnectedOverlayOffsetX", "offsetX"], offsetY: ["cdkConnectedOverlayOffsetY", "offsetY"], width: ["cdkConnectedOverlayWidth", "width"], height: ["cdkConnectedOverlayHeight", "height"], minWidth: ["cdkConnectedOverlayMinWidth", "minWidth"], minHeight: ["cdkConnectedOverlayMinHeight", "minHeight"], backdropClass: ["cdkConnectedOverlayBackdropClass", "backdropClass"], panelClass: ["cdkConnectedOverlayPanelClass", "panelClass"], viewportMargin: ["cdkConnectedOverlayViewportMargin", "viewportMargin"], scrollStrategy: ["cdkConnectedOverlayScrollStrategy", "scrollStrategy"], open: ["cdkConnectedOverlayOpen", "open"], disableClose: ["cdkConnectedOverlayDisableClose", "disableClose"], transformOriginSelector: ["cdkConnectedOverlayTransformOriginOn", "transformOriginSelector"], hasBackdrop: ["cdkConnectedOverlayHasBackdrop", "hasBackdrop"], lockPosition: ["cdkConnectedOverlayLockPosition", "lockPosition"], flexibleDimensions: ["cdkConnectedOverlayFlexibleDimensions", "flexibleDimensions"], growAfterOpen: ["cdkConnectedOverlayGrowAfterOpen", "growAfterOpen"], push: ["cdkConnectedOverlayPush", "push"] }, outputs: { backdropClick: "backdropClick", positionChange: "positionChange", attach: "attach", detach: "detach", overlayKeydown: "overlayKeydown", overlayOutsideClick: "overlayOutsideClick" }, exportAs: ["cdkConnectedOverlay"], usesOnChanges: true, ngImport: i0 }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkConnectedOverlay, decorators: [{
|
||
|
|
type: Directive,
|
||
|
|
args: [{
|
||
|
|
selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
|
||
|
|
exportAs: 'cdkConnectedOverlay',
|
||
|
|
standalone: true,
|
||
|
|
}]
|
||
|
|
}], ctorParameters: function () { return [{ type: Overlay }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY]
|
||
|
|
}] }, { type: i5.Directionality, decorators: [{
|
||
|
|
type: Optional
|
||
|
|
}] }]; }, propDecorators: { origin: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayOrigin']
|
||
|
|
}], positions: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayPositions']
|
||
|
|
}], positionStrategy: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayPositionStrategy']
|
||
|
|
}], offsetX: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayOffsetX']
|
||
|
|
}], offsetY: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayOffsetY']
|
||
|
|
}], width: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayWidth']
|
||
|
|
}], height: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayHeight']
|
||
|
|
}], minWidth: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayMinWidth']
|
||
|
|
}], minHeight: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayMinHeight']
|
||
|
|
}], backdropClass: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayBackdropClass']
|
||
|
|
}], panelClass: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayPanelClass']
|
||
|
|
}], viewportMargin: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayViewportMargin']
|
||
|
|
}], scrollStrategy: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayScrollStrategy']
|
||
|
|
}], open: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayOpen']
|
||
|
|
}], disableClose: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayDisableClose']
|
||
|
|
}], transformOriginSelector: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayTransformOriginOn']
|
||
|
|
}], hasBackdrop: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayHasBackdrop']
|
||
|
|
}], lockPosition: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayLockPosition']
|
||
|
|
}], flexibleDimensions: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayFlexibleDimensions']
|
||
|
|
}], growAfterOpen: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayGrowAfterOpen']
|
||
|
|
}], push: [{
|
||
|
|
type: Input,
|
||
|
|
args: ['cdkConnectedOverlayPush']
|
||
|
|
}], backdropClick: [{
|
||
|
|
type: Output
|
||
|
|
}], positionChange: [{
|
||
|
|
type: Output
|
||
|
|
}], attach: [{
|
||
|
|
type: Output
|
||
|
|
}], detach: [{
|
||
|
|
type: Output
|
||
|
|
}], overlayKeydown: [{
|
||
|
|
type: Output
|
||
|
|
}], overlayOutsideClick: [{
|
||
|
|
type: Output
|
||
|
|
}] } });
|
||
|
|
/** @docs-private */
|
||
|
|
function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
|
||
|
|
return () => overlay.scrollStrategies.reposition();
|
||
|
|
}
|
||
|
|
/** @docs-private */
|
||
|
|
const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
|
||
|
|
provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,
|
||
|
|
deps: [Overlay],
|
||
|
|
useFactory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
|
||
|
|
};
|
||
|
|
|
||
|
|
class OverlayModule {
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
||
|
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: OverlayModule, imports: [BidiModule, PortalModule, ScrollingModule, CdkConnectedOverlay, CdkOverlayOrigin], exports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollingModule] }); }
|
||
|
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayModule, providers: [Overlay, CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER], imports: [BidiModule, PortalModule, ScrollingModule, ScrollingModule] }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: OverlayModule, decorators: [{
|
||
|
|
type: NgModule,
|
||
|
|
args: [{
|
||
|
|
imports: [BidiModule, PortalModule, ScrollingModule, CdkConnectedOverlay, CdkOverlayOrigin],
|
||
|
|
exports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollingModule],
|
||
|
|
providers: [Overlay, CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER],
|
||
|
|
}]
|
||
|
|
}] });
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Alternative to OverlayContainer that supports correct displaying of overlay elements in
|
||
|
|
* Fullscreen mode
|
||
|
|
* https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
|
||
|
|
*
|
||
|
|
* Should be provided in the root component.
|
||
|
|
*/
|
||
|
|
class FullscreenOverlayContainer extends OverlayContainer {
|
||
|
|
constructor(_document, platform) {
|
||
|
|
super(_document, platform);
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
super.ngOnDestroy();
|
||
|
|
if (this._fullScreenEventName && this._fullScreenListener) {
|
||
|
|
this._document.removeEventListener(this._fullScreenEventName, this._fullScreenListener);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
_createContainer() {
|
||
|
|
super._createContainer();
|
||
|
|
this._adjustParentForFullscreenChange();
|
||
|
|
this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());
|
||
|
|
}
|
||
|
|
_adjustParentForFullscreenChange() {
|
||
|
|
if (!this._containerElement) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const fullscreenElement = this.getFullscreenElement();
|
||
|
|
const parent = fullscreenElement || this._document.body;
|
||
|
|
parent.appendChild(this._containerElement);
|
||
|
|
}
|
||
|
|
_addFullscreenChangeListener(fn) {
|
||
|
|
const eventName = this._getEventName();
|
||
|
|
if (eventName) {
|
||
|
|
if (this._fullScreenListener) {
|
||
|
|
this._document.removeEventListener(eventName, this._fullScreenListener);
|
||
|
|
}
|
||
|
|
this._document.addEventListener(eventName, fn);
|
||
|
|
this._fullScreenListener = fn;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
_getEventName() {
|
||
|
|
if (!this._fullScreenEventName) {
|
||
|
|
const _document = this._document;
|
||
|
|
if (_document.fullscreenEnabled) {
|
||
|
|
this._fullScreenEventName = 'fullscreenchange';
|
||
|
|
}
|
||
|
|
else if (_document.webkitFullscreenEnabled) {
|
||
|
|
this._fullScreenEventName = 'webkitfullscreenchange';
|
||
|
|
}
|
||
|
|
else if (_document.mozFullScreenEnabled) {
|
||
|
|
this._fullScreenEventName = 'mozfullscreenchange';
|
||
|
|
}
|
||
|
|
else if (_document.msFullscreenEnabled) {
|
||
|
|
this._fullScreenEventName = 'MSFullscreenChange';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return this._fullScreenEventName;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* When the page is put into fullscreen mode, a specific element is specified.
|
||
|
|
* Only that element and its children are visible when in fullscreen mode.
|
||
|
|
*/
|
||
|
|
getFullscreenElement() {
|
||
|
|
const _document = this._document;
|
||
|
|
return (_document.fullscreenElement ||
|
||
|
|
_document.webkitFullscreenElement ||
|
||
|
|
_document.mozFullScreenElement ||
|
||
|
|
_document.msFullscreenElement ||
|
||
|
|
null);
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FullscreenOverlayContainer, deps: [{ token: DOCUMENT }, { token: i1$1.Platform }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
||
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FullscreenOverlayContainer, providedIn: 'root' }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: FullscreenOverlayContainer, decorators: [{
|
||
|
|
type: Injectable,
|
||
|
|
args: [{ providedIn: 'root' }]
|
||
|
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: i1$1.Platform }]; } });
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Generated bundle index. Do not edit.
|
||
|
|
*/
|
||
|
|
|
||
|
|
export { BlockScrollStrategy, CdkConnectedOverlay, CdkOverlayOrigin, CloseScrollStrategy, ConnectedOverlayPositionChange, ConnectionPositionPair, FlexibleConnectedPositionStrategy, FullscreenOverlayContainer, GlobalPositionStrategy, NoopScrollStrategy, Overlay, OverlayConfig, OverlayContainer, OverlayKeyboardDispatcher, OverlayModule, OverlayOutsideClickDispatcher, OverlayPositionBuilder, OverlayRef, RepositionScrollStrategy, STANDARD_DROPDOWN_ADJACENT_POSITIONS, STANDARD_DROPDOWN_BELOW_POSITIONS, ScrollStrategyOptions, ScrollingVisibility, validateHorizontalPosition, validateVerticalPosition };
|
||
|
|
//# sourceMappingURL=overlay.mjs.map
|