@angular/cdk
Version:
Angular Material Component Development Kit
1,332 lines (1,317 loc) • 194 kB
JavaScript
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { coerceCssPixelValue, coerceArray, coerceBooleanProperty } from '@angular/cdk/coercion';
import { ScrollDispatcher, ViewportRuler, ScrollingModule, VIEWPORT_RULER_PROVIDER } from '@angular/cdk/scrolling';
export { ViewportRuler, VIEWPORT_RULER_PROVIDER, CdkScrollable, ScrollDispatcher } from '@angular/cdk/scrolling';
import { DOCUMENT, Location } from '@angular/common';
import { Inject, Injectable, NgZone, Optional, NgModule, SkipSelf, ApplicationRef, ComponentFactoryResolver, Injector, ElementRef, Directive, EventEmitter, InjectionToken, Input, Output, TemplateRef, ViewContainerRef, defineInjectable, inject } from '@angular/core';
import { __assign, __extends } from 'tslib';
import { Observable, Subject, merge, Subscription } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';
import { Platform } from '@angular/cdk/platform';
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { DomPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';
import { ESCAPE } from '@angular/cdk/keycodes';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Strategy that will prevent the user from scrolling while the overlay is visible.
*/
var /**
* Strategy that will prevent the user from scrolling while the overlay is visible.
*/
BlockScrollStrategy = /** @class */ (function () {
function BlockScrollStrategy(_viewportRuler, document) {
this._viewportRuler = _viewportRuler;
this._previousHTMLStyles = { top: '', left: '' };
this._isEnabled = false;
this._document = document;
}
/** Attaches this scroll strategy to an overlay. */
/**
* Attaches this scroll strategy to an overlay.
* @return {?}
*/
BlockScrollStrategy.prototype.attach = /**
* Attaches this scroll strategy to an overlay.
* @return {?}
*/
function () { };
/** Blocks page-level scroll while the attached overlay is open. */
/**
* Blocks page-level scroll while the attached overlay is open.
* @return {?}
*/
BlockScrollStrategy.prototype.enable = /**
* Blocks page-level scroll while the attached overlay is open.
* @return {?}
*/
function () {
if (this._canBeEnabled()) {
/** @type {?} */
var root = (/** @type {?} */ (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. */
/**
* Unblocks page-level scroll while the attached overlay is open.
* @return {?}
*/
BlockScrollStrategy.prototype.disable = /**
* Unblocks page-level scroll while the attached overlay is open.
* @return {?}
*/
function () {
if (this._isEnabled) {
/** @type {?} */
var html = (/** @type {?} */ (this._document.documentElement));
/** @type {?} */
var body = (/** @type {?} */ (this._document.body));
/** @type {?} */
var htmlStyle = (/** @type {?} */ (html.style));
/** @type {?} */
var bodyStyle = (/** @type {?} */ (body.style));
/** @type {?} */
var previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';
/** @type {?} */
var 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
htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
bodyStyle.scrollBehavior = previousBodyScrollBehavior;
}
};
/**
* @private
* @return {?}
*/
BlockScrollStrategy.prototype._canBeEnabled = /**
* @private
* @return {?}
*/
function () {
// 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.
/** @type {?} */
var html = (/** @type {?} */ (this._document.documentElement));
if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {
return false;
}
/** @type {?} */
var body = this._document.body;
/** @type {?} */
var viewport = this._viewportRuler.getViewportSize();
return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width;
};
return BlockScrollStrategy;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Returns an error to be thrown when attempting to attach an already-attached scroll strategy.
* @return {?}
*/
function getMatScrollStrategyAlreadyAttachedError() {
return Error("Scroll strategy has already been attached.");
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Strategy that will close the overlay as soon as the user starts scrolling.
*/
var /**
* Strategy that will close the overlay as soon as the user starts scrolling.
*/
CloseScrollStrategy = /** @class */ (function () {
function CloseScrollStrategy(_scrollDispatcher, _ngZone, _viewportRuler, _config) {
var _this = this;
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 = function () {
_this.disable();
if (_this._overlayRef.hasAttached()) {
_this._ngZone.run(function () { return _this._overlayRef.detach(); });
}
};
}
/** Attaches this scroll strategy to an overlay. */
/**
* Attaches this scroll strategy to an overlay.
* @param {?} overlayRef
* @return {?}
*/
CloseScrollStrategy.prototype.attach = /**
* Attaches this scroll strategy to an overlay.
* @param {?} overlayRef
* @return {?}
*/
function (overlayRef) {
if (this._overlayRef) {
throw getMatScrollStrategyAlreadyAttachedError();
}
this._overlayRef = overlayRef;
};
/** Enables the closing of the attached overlay on scroll. */
/**
* Enables the closing of the attached overlay on scroll.
* @return {?}
*/
CloseScrollStrategy.prototype.enable = /**
* Enables the closing of the attached overlay on scroll.
* @return {?}
*/
function () {
var _this = this;
if (this._scrollSubscription) {
return;
}
/** @type {?} */
var stream = this._scrollDispatcher.scrolled(0);
if (this._config && this._config.threshold && this._config.threshold > 1) {
this._initialScrollPosition = this._viewportRuler.getViewportScrollPosition().top;
this._scrollSubscription = stream.subscribe(function () {
/** @type {?} */
var scrollPosition = _this._viewportRuler.getViewportScrollPosition().top;
if (Math.abs(scrollPosition - _this._initialScrollPosition) > (/** @type {?} */ ((/** @type {?} */ (_this._config)).threshold))) {
_this._detach();
}
else {
_this._overlayRef.updatePosition();
}
});
}
else {
this._scrollSubscription = stream.subscribe(this._detach);
}
};
/** Disables the closing the attached overlay on scroll. */
/**
* Disables the closing the attached overlay on scroll.
* @return {?}
*/
CloseScrollStrategy.prototype.disable = /**
* Disables the closing the attached overlay on scroll.
* @return {?}
*/
function () {
if (this._scrollSubscription) {
this._scrollSubscription.unsubscribe();
this._scrollSubscription = null;
}
};
return CloseScrollStrategy;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Scroll strategy that doesn't do anything.
*/
var /**
* Scroll strategy that doesn't do anything.
*/
NoopScrollStrategy = /** @class */ (function () {
function NoopScrollStrategy() {
}
/** Does nothing, as this scroll strategy is a no-op. */
/**
* Does nothing, as this scroll strategy is a no-op.
* @return {?}
*/
NoopScrollStrategy.prototype.enable = /**
* Does nothing, as this scroll strategy is a no-op.
* @return {?}
*/
function () { };
/** Does nothing, as this scroll strategy is a no-op. */
/**
* Does nothing, as this scroll strategy is a no-op.
* @return {?}
*/
NoopScrollStrategy.prototype.disable = /**
* Does nothing, as this scroll strategy is a no-op.
* @return {?}
*/
function () { };
/** Does nothing, as this scroll strategy is a no-op. */
/**
* Does nothing, as this scroll strategy is a no-op.
* @return {?}
*/
NoopScrollStrategy.prototype.attach = /**
* Does nothing, as this scroll strategy is a no-op.
* @return {?}
*/
function () { };
return NoopScrollStrategy;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// TODO(jelbourn): move this to live with the rest of the scrolling code
// TODO(jelbourn): someday replace this with IntersectionObservers
/**
* Gets whether an element is scrolled outside of view by any of its parent scrolling containers.
* \@docs-private
* @param {?} element Dimensions of the element (from getBoundingClientRect)
* @param {?} scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
* @return {?} Whether the element is scrolled out of view
*/
function isElementScrolledOutsideView(element, scrollContainers) {
return scrollContainers.some(function (containerBounds) {
/** @type {?} */
var outsideAbove = element.bottom < containerBounds.top;
/** @type {?} */
var outsideBelow = element.top > containerBounds.bottom;
/** @type {?} */
var outsideLeft = element.right < containerBounds.left;
/** @type {?} */
var outsideRight = element.left > containerBounds.right;
return outsideAbove || outsideBelow || outsideLeft || outsideRight;
});
}
/**
* Gets whether an element is clipped by any of its scrolling containers.
* \@docs-private
* @param {?} element Dimensions of the element (from getBoundingClientRect)
* @param {?} scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
* @return {?} Whether the element is clipped
*/
function isElementClippedByScrolling(element, scrollContainers) {
return scrollContainers.some(function (scrollContainerRect) {
/** @type {?} */
var clippedAbove = element.top < scrollContainerRect.top;
/** @type {?} */
var clippedBelow = element.bottom > scrollContainerRect.bottom;
/** @type {?} */
var clippedLeft = element.left < scrollContainerRect.left;
/** @type {?} */
var clippedRight = element.right > scrollContainerRect.right;
return clippedAbove || clippedBelow || clippedLeft || clippedRight;
});
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Strategy that will update the element position as the user is scrolling.
*/
var /**
* Strategy that will update the element position as the user is scrolling.
*/
RepositionScrollStrategy = /** @class */ (function () {
function RepositionScrollStrategy(_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. */
/**
* Attaches this scroll strategy to an overlay.
* @param {?} overlayRef
* @return {?}
*/
RepositionScrollStrategy.prototype.attach = /**
* Attaches this scroll strategy to an overlay.
* @param {?} overlayRef
* @return {?}
*/
function (overlayRef) {
if (this._overlayRef) {
throw getMatScrollStrategyAlreadyAttachedError();
}
this._overlayRef = overlayRef;
};
/** Enables repositioning of the attached overlay on scroll. */
/**
* Enables repositioning of the attached overlay on scroll.
* @return {?}
*/
RepositionScrollStrategy.prototype.enable = /**
* Enables repositioning of the attached overlay on scroll.
* @return {?}
*/
function () {
var _this = this;
if (!this._scrollSubscription) {
/** @type {?} */
var throttle = this._config ? this._config.scrollThrottle : 0;
this._scrollSubscription = this._scrollDispatcher.scrolled(throttle).subscribe(function () {
_this._overlayRef.updatePosition();
// TODO(crisbeto): make `close` on by default once all components can handle it.
if (_this._config && _this._config.autoClose) {
/** @type {?} */
var overlayRect = _this._overlayRef.overlayElement.getBoundingClientRect();
var _a = _this._viewportRuler.getViewportSize(), width = _a.width, height = _a.height;
// TODO(crisbeto): include all ancestor scroll containers here once
// we have a way of exposing the trigger element to the scroll strategy.
/** @type {?} */
var parentRects = [{ width: width, height: height, bottom: height, right: width, top: 0, left: 0 }];
if (isElementScrolledOutsideView(overlayRect, parentRects)) {
_this.disable();
_this._ngZone.run(function () { return _this._overlayRef.detach(); });
}
}
});
}
};
/** Disables repositioning of the attached overlay on scroll. */
/**
* Disables repositioning of the attached overlay on scroll.
* @return {?}
*/
RepositionScrollStrategy.prototype.disable = /**
* Disables repositioning of the attached overlay on scroll.
* @return {?}
*/
function () {
if (this._scrollSubscription) {
this._scrollSubscription.unsubscribe();
this._scrollSubscription = null;
}
};
return RepositionScrollStrategy;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 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.
*/
var ScrollStrategyOptions = /** @class */ (function () {
function ScrollStrategyOptions(_scrollDispatcher, _viewportRuler, _ngZone, document) {
var _this = this;
this._scrollDispatcher = _scrollDispatcher;
this._viewportRuler = _viewportRuler;
this._ngZone = _ngZone;
/**
* Do nothing on scroll.
*/
this.noop = function () { return new NoopScrollStrategy(); };
/**
* Close the overlay as soon as the user scrolls.
* @param config Configuration to be used inside the scroll strategy.
*/
this.close = function (config) { return new CloseScrollStrategy(_this._scrollDispatcher, _this._ngZone, _this._viewportRuler, config); };
/**
* Block scrolling.
*/
this.block = function () { return 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 = function (config) { return new RepositionScrollStrategy(_this._scrollDispatcher, _this._viewportRuler, _this._ngZone, config); };
this._document = document;
}
ScrollStrategyOptions.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
ScrollStrategyOptions.ctorParameters = function () { return [
{ type: ScrollDispatcher },
{ type: ViewportRuler },
{ type: NgZone },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
/** @nocollapse */ ScrollStrategyOptions.ngInjectableDef = defineInjectable({ factory: function ScrollStrategyOptions_Factory() { return new ScrollStrategyOptions(inject(ScrollDispatcher), inject(ViewportRuler), inject(NgZone), inject(DOCUMENT)); }, token: ScrollStrategyOptions, providedIn: "root" });
return ScrollStrategyOptions;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Initial configuration used when creating an overlay.
*/
var /**
* Initial configuration used when creating an overlay.
*/
OverlayConfig = /** @class */ (function () {
function OverlayConfig(config) {
var _this = this;
/**
* 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) {
Object.keys(config).forEach(function (k) {
/** @type {?} */
var key = (/** @type {?} */ (k));
if (typeof config[key] !== 'undefined') {
_this[key] = config[key];
}
});
}
}
return OverlayConfig;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The points of the origin element and the overlay element to connect.
*/
var /**
* The points of the origin element and the overlay element to connect.
*/
ConnectionPositionPair = /** @class */ (function () {
function ConnectionPositionPair(origin, overlay, offsetX, offsetY, panelClass) {
this.offsetX = offsetX;
this.offsetY = offsetY;
this.panelClass = panelClass;
this.originX = origin.originX;
this.originY = origin.originY;
this.overlayX = overlay.overlayX;
this.overlayY = overlay.overlayY;
}
return ConnectionPositionPair;
}());
/**
* 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
*/
var /**
* 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
*/
ScrollingVisibility = /** @class */ (function () {
function ScrollingVisibility() {
}
return ScrollingVisibility;
}());
/**
* The change event emitted by the strategy when a fallback position is used.
*/
var ConnectedOverlayPositionChange = /** @class */ (function () {
function ConnectedOverlayPositionChange(connectionPair, scrollableViewProperties) {
this.connectionPair = connectionPair;
this.scrollableViewProperties = scrollableViewProperties;
}
/** @nocollapse */
ConnectedOverlayPositionChange.ctorParameters = function () { return [
{ type: ConnectionPositionPair },
{ type: ScrollingVisibility, decorators: [{ type: Optional }] }
]; };
return ConnectedOverlayPositionChange;
}());
/**
* Validates whether a vertical position property matches the expected values.
* \@docs-private
* @param {?} property Name of the property being validated.
* @param {?} value Value of the property being validated.
* @return {?}
*/
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.
* \@docs-private
* @param {?} property Name of the property being validated.
* @param {?} value Value of the property being validated.
* @return {?}
*/
function validateHorizontalPosition(property, value) {
if (value !== 'start' && value !== 'end' && value !== 'center') {
throw Error("ConnectedPosition: Invalid " + property + " \"" + value + "\". " +
"Expected \"start\", \"end\" or \"center\".");
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 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.
*/
var OverlayKeyboardDispatcher = /** @class */ (function () {
function OverlayKeyboardDispatcher(document) {
var _this = this;
/**
* Currently attached overlays in the order they were attached.
*/
this._attachedOverlays = [];
/**
* Keyboard event listener that will be attached to the body.
*/
this._keydownListener = function (event) {
/** @type {?} */
var overlays = _this._attachedOverlays;
for (var 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]._keydownEventSubscriptions > 0) {
overlays[i]._keydownEvents.next(event);
break;
}
}
};
this._document = document;
}
/**
* @return {?}
*/
OverlayKeyboardDispatcher.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._detach();
};
/** Add a new overlay to the list of attached overlay refs. */
/**
* Add a new overlay to the list of attached overlay refs.
* @param {?} overlayRef
* @return {?}
*/
OverlayKeyboardDispatcher.prototype.add = /**
* Add a new overlay to the list of attached overlay refs.
* @param {?} overlayRef
* @return {?}
*/
function (overlayRef) {
// Ensure that we don't get the same overlay multiple times.
this.remove(overlayRef);
// Lazily start dispatcher once first overlay is added
if (!this._isAttached) {
this._document.body.addEventListener('keydown', this._keydownListener, true);
this._isAttached = true;
}
this._attachedOverlays.push(overlayRef);
};
/** Remove an overlay from the list of attached overlay refs. */
/**
* Remove an overlay from the list of attached overlay refs.
* @param {?} overlayRef
* @return {?}
*/
OverlayKeyboardDispatcher.prototype.remove = /**
* Remove an overlay from the list of attached overlay refs.
* @param {?} overlayRef
* @return {?}
*/
function (overlayRef) {
/** @type {?} */
var 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();
}
};
/** Detaches the global keyboard event listener. */
/**
* Detaches the global keyboard event listener.
* @private
* @return {?}
*/
OverlayKeyboardDispatcher.prototype._detach = /**
* Detaches the global keyboard event listener.
* @private
* @return {?}
*/
function () {
if (this._isAttached) {
this._document.body.removeEventListener('keydown', this._keydownListener, true);
this._isAttached = false;
}
};
OverlayKeyboardDispatcher.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
OverlayKeyboardDispatcher.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
/** @nocollapse */ OverlayKeyboardDispatcher.ngInjectableDef = defineInjectable({ factory: function OverlayKeyboardDispatcher_Factory() { return new OverlayKeyboardDispatcher(inject(DOCUMENT)); }, token: OverlayKeyboardDispatcher, providedIn: "root" });
return OverlayKeyboardDispatcher;
}());
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @param {?} dispatcher
* @param {?} _document
* @return {?}
*/
function OVERLAY_KEYBOARD_DISPATCHER_PROVIDER_FACTORY(dispatcher, _document) {
return dispatcher || new OverlayKeyboardDispatcher(_document);
}
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @type {?}
*/
var OVERLAY_KEYBOARD_DISPATCHER_PROVIDER = {
// If there is already an OverlayKeyboardDispatcher available, use that.
// Otherwise, provide a new one.
provide: OverlayKeyboardDispatcher,
deps: [
[new Optional(), new SkipSelf(), OverlayKeyboardDispatcher],
(/** @type {?} */ (
// Coerce to `InjectionToken` so that the `deps` match the "shape"
// of the type expected by Angular
DOCUMENT))
],
useFactory: OVERLAY_KEYBOARD_DISPATCHER_PROVIDER_FACTORY
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Container inside which all overlays will render.
*/
var OverlayContainer = /** @class */ (function () {
function OverlayContainer(_document) {
this._document = _document;
}
/**
* @return {?}
*/
OverlayContainer.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._containerElement && this._containerElement.parentNode) {
this._containerElement.parentNode.removeChild(this._containerElement);
}
};
/**
* 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
*/
/**
* 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.
* @return {?} the container element
*/
OverlayContainer.prototype.getContainerElement = /**
* 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.
* @return {?} the container element
*/
function () {
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.
*/
/**
* Create the overlay container element, which is simply a div
* with the 'cdk-overlay-container' class on the document body.
* @protected
* @return {?}
*/
OverlayContainer.prototype._createContainer = /**
* Create the overlay container element, which is simply a div
* with the 'cdk-overlay-container' class on the document body.
* @protected
* @return {?}
*/
function () {
/** @type {?} */
var container = this._document.createElement('div');
container.classList.add('cdk-overlay-container');
this._document.body.appendChild(container);
this._containerElement = container;
};
OverlayContainer.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
OverlayContainer.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
/** @nocollapse */ OverlayContainer.ngInjectableDef = defineInjectable({ factory: function OverlayContainer_Factory() { return new OverlayContainer(inject(DOCUMENT)); }, token: OverlayContainer, providedIn: "root" });
return OverlayContainer;
}());
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @param {?} parentContainer
* @param {?} _document
* @return {?}
*/
function OVERLAY_CONTAINER_PROVIDER_FACTORY(parentContainer, _document) {
return parentContainer || new OverlayContainer(_document);
}
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @type {?}
*/
var OVERLAY_CONTAINER_PROVIDER = {
// If there is already an OverlayContainer available, use that. Otherwise, provide a new one.
provide: OverlayContainer,
deps: [
[new Optional(), new SkipSelf(), OverlayContainer],
(/** @type {?} */ (DOCUMENT))
],
useFactory: OVERLAY_CONTAINER_PROVIDER_FACTORY
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Reference to an overlay that has been created with the Overlay service.
* Used to manipulate or dispose of said overlay.
*/
var /**
* Reference to an overlay that has been created with the Overlay service.
* Used to manipulate or dispose of said overlay.
*/
OverlayRef = /** @class */ (function () {
function OverlayRef(_portalOutlet, _host, _pane, _config, _ngZone, _keyboardDispatcher, _document, _location) {
var _this = this;
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._backdropElement = null;
this._backdropClick = new Subject();
this._attachments = new Subject();
this._detachments = new Subject();
this._locationChanges = Subscription.EMPTY;
this._keydownEventsObservable = new Observable(function (observer) {
/** @type {?} */
var subscription = _this._keydownEvents.subscribe(observer);
_this._keydownEventSubscriptions++;
return function () {
subscription.unsubscribe();
_this._keydownEventSubscriptions--;
};
});
/**
* Stream of keydown events dispatched to this overlay.
*/
this._keydownEvents = new Subject();
/**
* Amount of subscriptions to the keydown events.
*/
this._keydownEventSubscriptions = 0;
if (_config.scrollStrategy) {
_config.scrollStrategy.attach(this);
}
this._positionStrategy = _config.positionStrategy;
}
Object.defineProperty(OverlayRef.prototype, "overlayElement", {
/** The overlay's HTML element */
get: /**
* The overlay's HTML element
* @return {?}
*/
function () {
return this._pane;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OverlayRef.prototype, "backdropElement", {
/** The overlay's backdrop HTML element. */
get: /**
* The overlay's backdrop HTML element.
* @return {?}
*/
function () {
return this._backdropElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OverlayRef.prototype, "hostElement", {
/**
* Wrapper around the panel element. Can be used for advanced
* positioning where a wrapper with specific styling is
* required around the overlay pane.
*/
get: /**
* Wrapper around the panel element. Can be used for advanced
* positioning where a wrapper with specific styling is
* required around the overlay pane.
* @return {?}
*/
function () {
return this._host;
},
enumerable: true,
configurable: true
});
/**
* 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.
*/
/**
* 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.
* @return {?} The portal attachment result.
*/
OverlayRef.prototype.attach = /**
* 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.
* @return {?} The portal attachment result.
*/
function (portal) {
var _this = this;
/** @type {?} */
var attachResult = this._portalOutlet.attach(portal);
if (this._positionStrategy) {
this._positionStrategy.attach(this);
}
// Update the pane element with the given configuration.
if (!this._host.parentElement && this._previousHostParent) {
this._previousHostParent.appendChild(this._host);
}
this._updateStackingOrder();
this._updateElementSize();
this._updateElementDirection();
if (this._config.scrollStrategy) {
this._config.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
.asObservable()
.pipe(take(1))
.subscribe(function () {
// 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);
// @breaking-change 8.0.0 remove the null check for `_location`
// once the constructor parameter is made required.
if (this._config.disposeOnNavigation && this._location) {
this._locationChanges = this._location.subscribe(function () { return _this.dispose(); });
}
return attachResult;
};
/**
* Detaches an overlay from a portal.
* @returns The portal detachment result.
*/
/**
* Detaches an overlay from a portal.
* @return {?} The portal detachment result.
*/
OverlayRef.prototype.detach = /**
* Detaches an overlay from a portal.
* @return {?} The portal detachment result.
*/
function () {
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._config.scrollStrategy) {
this._config.scrollStrategy.disable();
}
/** @type {?} */
var 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 DOM the can cause scroll jank, because it still gets
// rendered, even though it's transparent and unclickable which is why we remove it.
this._detachContentWhenStable();
// Stop listening for location changes.
this._locationChanges.unsubscribe();
return detachmentResult;
};
/** Cleans up the overlay from the DOM. */
/**
* Cleans up the overlay from the DOM.
* @return {?}
*/
OverlayRef.prototype.dispose = /**
* Cleans up the overlay from the DOM.
* @return {?}
*/
function () {
/** @type {?} */
var isAttached = this.hasAttached();
if (this._positionStrategy) {
this._positionStrategy.dispose();
}
if (this._config.scrollStrategy) {
this._config.scrollStrategy.disable();
}
this.detachBackdrop();
this._locationChanges.unsubscribe();
this._keyboardDispatcher.remove(this);
this._portalOutlet.dispose();
this._attachments.complete();
this._backdropClick.complete();
this._keydownEvents.complete();
if (this._host && this._host.parentNode) {
this._host.parentNode.removeChild(this._host);
this._host = (/** @type {?} */ (null));
}
this._previousHostParent = this._pane = (/** @type {?} */ (null));
if (isAttached) {
this._detachments.next();
}
this._detachments.complete();
};
/** Whether the overlay has attached content. */
/**
* Whether the overlay has attached content.
* @return {?}
*/
OverlayRef.prototype.hasAttached = /**
* Whether the overlay has attached content.
* @return {?}
*/
function () {
return this._portalOutlet.hasAttached();
};
/** Gets an observable that emits when the backdrop has been clicked. */
/**
* Gets an observable that emits when the backdrop has been clicked.
* @return {?}
*/
OverlayRef.prototype.backdropClick = /**
* Gets an observable that emits when the backdrop has been clicked.
* @return {?}
*/
function () {
return this._backdropClick.asObservable();
};
/** Gets an observable that emits when the overlay has been attached. */
/**
* Gets an observable that emits when the overlay has been attached.
* @return {?}
*/
OverlayRef.prototype.attachments = /**
* Gets an observable that emits when the overlay has been attached.
* @return {?}
*/
function () {
return this._attachments.asObservable();
};
/** Gets an observable that emits when the overlay has been detached. */
/**
* Gets an observable that emits when the overlay has been detached.
* @return {?}
*/
OverlayRef.prototype.detachments = /**
* Gets an observable that emits when the overlay has been detached.
* @return {?}
*/
function () {
return this._detachments.asObservable();
};
/** Gets an observable of keydown events targeted to this overlay. */
/**
* Gets an observable of keydown events targeted to this overlay.
* @return {?}
*/
OverlayRef.prototype.keydownEvents = /**
* Gets an observable of keydown events targeted to this overlay.
* @return {?}
*/
function () {
return this._keydownEventsObservable;
};
/** Gets the current overlay configuration, which is immutable. */
/**
* Gets the current overlay configuration, which is immutable.
* @return {?}
*/
OverlayRef.prototype.getConfig = /**
* Gets the current overlay configuration, which is immutable.
* @return {?}
*/
function () {
return this._config;
};
/** Updates the position of the overlay based on the position strategy. */
/**
* Updates the position of the overlay based on the position strategy.
* @return {?}
*/
OverlayRef.prototype.updatePosition = /**
* Updates the position of the overlay based on the position strategy.
* @return {?}
*/
function () {
if (this._positionStrategy) {
this._positionStrategy.apply();
}
};
/** Switches to a new position strategy and updates the overlay position. */
/**
* Switches to a new position strategy and updates the overlay position.
* @param {?} strategy
* @return {?}
*/
OverlayRef.prototype.updatePositionStrategy = /**
* Switches to a new position strategy and updates the overlay position.
* @param {?} strategy
* @return {?}
*/
function (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. */
/**
* Update the size properties of the overlay.
* @param {?} sizeConfig
* @return {?}
*/
OverlayRef.prototype.updateSize = /**
* Update the size properties of the overlay.
* @param {?} sizeConfig
* @return {?}
*/
function (sizeConfig) {
this._config = __assign({}, this._config, sizeConfig);
this._updateElementSize();
};
/** Sets the LTR/RTL direction for the overlay. */
/**
* Sets the LTR/RTL direction for the overlay.
* @param {?} dir
* @return {?}
*/
OverlayRef.prototype.setDirection = /**
* Sets the LTR/RTL direction for the overlay.
* @param {?} dir
* @return {?}
*/
function (dir) {
this._config = __assign({}, this._config, { direction: dir });
this._updateElementDirection();
};
/** Add a CSS class or an array of classes to the overlay pane. */
/**
* Add a CSS class or an array of classes to the overlay pane.
* @param {?} classes
* @return {?}
*/
OverlayRef.prototype.addPanelClass = /**
* Add a CSS class or an array of classes to the overlay pane.
* @param {?} classes
* @return {?}
*/
function (classes) {
if (this._pane) {
this._toggleClasses(this._pane, classes, true);
}
};
/** Remove a CSS class or an array of classes from the overlay pane. */
/**
* Remove a CSS class or an array of classes from the overlay pane.
* @param {?} classes
* @return {?}
*/
OverlayRef.prototype.removePanelClass = /**
* Remove a CSS class or an array of classes from the overlay pane.
* @param {?} classes
* @return {?}
*/
function (classes) {
if (this._pane) {
this._toggleClasses(this._pane, classes, false);
}
};
/**
* Returns the layout direction of the overlay panel.
*/
/**
* Returns the layout direction of the overlay panel.
* @return {?}
*/
OverlayRef.prototype.getDirection = /**
* Returns the layout direction of the overlay panel.
* @return {?}
*/
function () {
/** @type {?} */
var direction = this._config.direction;
if (!direction) {
return 'ltr';
}
return typeof direction === 'string' ? direction : direction.value;
};
/** Updates the text direction of the overlay panel. */
/**
* Updates the text direction of the overlay panel.
* @private
* @return {?}
*/
OverlayRef.prototype._updateElementDirection = /**
* Updates the text direction of the overlay panel.
* @private
* @return {?}
*/
function () {
this._host.setAttribute('dir', this.getDirection());
};
/** Updates the size of the overlay e