http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/985298bd/node_modules/@angular/cdk/bundles/cdk-overlay.umd.js ---------------------------------------------------------------------- diff --git a/node_modules/@angular/cdk/bundles/cdk-overlay.umd.js b/node_modules/@angular/cdk/bundles/cdk-overlay.umd.js index 2cb23fb..8f56f3a 100644 --- a/node_modules/@angular/cdk/bundles/cdk-overlay.umd.js +++ b/node_modules/@angular/cdk/bundles/cdk-overlay.umd.js @@ -1,15 +1,15 @@ /** * @license - * Copyright Google Inc. All Rights Reserved. + * 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 */ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/portal'), require('rxjs/Subject'), require('@angular/cdk/scrolling'), require('rxjs/Subscription'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes')) : - typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/cdk/portal', 'rxjs/Subject', '@angular/cdk/scrolling', 'rxjs/Subscription', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/keycodes'], factory) : - (factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.overlay = global.ng.cdk.overlay || {}),global.ng.core,global.ng.cdk.portal,global.Rx,global.ng.cdk.scrolling,global.Rx,global.ng.cdk.bidi,global.ng.cdk.coercion,global.ng.cdk.keycodes)); -}(this, (function (exports,_angular_core,_angular_cdk_portal,rxjs_Subject,_angular_cdk_scrolling,rxjs_Subscription,_angular_cdk_bidi,_angular_cdk_coercion,_angular_cdk_keycodes) { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/scrolling'), require('@angular/common'), require('@angular/cdk/bidi'), require('@angular/cdk/portal'), require('rxjs/operators/take'), require('rxjs/Subject'), require('rxjs/Subscription'), require('rxjs/operators/filter'), require('rxjs/observable/fromEvent'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes')) : + typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/cdk/scrolling', '@angular/common', '@angular/cdk/bidi', '@angular/cdk/portal', 'rxjs/operators/take', 'rxjs/Subject', 'rxjs/Subscription', 'rxjs/operators/filter', 'rxjs/observable/fromEvent', '@angular/cdk/coercion', '@angular/cdk/keycodes'], factory) : + (factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.overlay = global.ng.cdk.overlay || {}),global.ng.core,global.ng.cdk.scrolling,global.ng.common,global.ng.cdk.bidi,global.ng.cdk.portal,global.Rx.operators,global.Rx,global.Rx,global.Rx.operators,global.Rx.Observable,global.ng.cdk.coercion,global.ng.cdk.keycodes)); +}(this, (function (exports,_angular_core,_angular_cdk_scrolling,_angular_common,_angular_cdk_bidi,_angular_cdk_portal,rxjs_operators_take,rxjs_Subject,rxjs_Subscription,rxjs_operators_filter,rxjs_observable_fromEvent,_angular_cdk_coercion,_angular_cdk_keycodes) { 'use strict'; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. @@ -35,119 +35,670 @@ function __extends(d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); -} +} + +var __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; +}; + +/** + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc + */ /** * Scroll strategy that doesn't do anything. */ -var NoopScrollStrategy = (function () { +var 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} checked by tsc + */ + +/** + * Initial configuration used when creating an overlay. + */ +var 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'; + /** + * The direction of the text in the overlay panel. + */ + this.direction = 'ltr'; + if (config) { + Object.keys(config) + .filter(function (key) { return typeof config[key] !== 'undefined'; }) + .forEach(function (key) { return _this[key] = config[key]; }); + } + } + return OverlayConfig; +}()); + +/** + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc + */ + +/** Horizontal dimension of a connection point on the perimeter of the origin or overlay element. */ +/** + * A connection point on the origin element. + * @record + */ + +/** + * A connection point on the overlay element. + * @record + */ + +/** + * The points of the origin element and the overlay element to connect. + */ +var ConnectionPositionPair = /** @class */ (function () { + function ConnectionPositionPair(origin, overlay, offsetX, offsetY) { + this.offsetX = offsetX; + this.offsetY = offsetY; + 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 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, /** @docs-private */ + scrollableViewProperties) { + this.connectionPair = connectionPair; + this.scrollableViewProperties = scrollableViewProperties; + } + /** @nocollapse */ + ConnectedOverlayPositionChange.ctorParameters = function () { return [ + { type: ConnectionPositionPair, }, + { type: ScrollingVisibility, decorators: [{ type: _angular_core.Optional },] }, + ]; }; + return ConnectedOverlayPositionChange; +}()); + +/** + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc + */ + +/** + * Describes a strategy that will be used by an overlay to handle scroll events while it is open. + * @record + */ + +/** + * 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} checked by tsc + */ +/** + * Config options for the CloseScrollStrategy. + * @record + */ + +/** + * Strategy that will close the overlay as soon as the user starts scrolling. + */ +var 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; + } + var /** @type {?} */ 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 () { + var /** @type {?} */ 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} checked by tsc + */ + +/** + * Strategy that will prevent the user from scrolling while the overlay is visible. + */ +var 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()) { + var /** @type {?} */ 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 = -this._previousScrollPosition.left + "px"; + root.style.top = -this._previousScrollPosition.top + "px"; + 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) { + var /** @type {?} */ html = this._document.documentElement; + var /** @type {?} */ body = this._document.body; + var /** @type {?} */ previousHtmlScrollBehavior = html.style['scrollBehavior'] || ''; + var /** @type {?} */ previousBodyScrollBehavior = body.style['scrollBehavior'] || ''; + this._isEnabled = false; + html.style.left = this._previousHTMLStyles.left; + html.style.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 + html.style['scrollBehavior'] = body.style['scrollBehavior'] = 'auto'; + window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top); + html.style['scrollBehavior'] = previousHtmlScrollBehavior; + body.style['scrollBehavior'] = previousBodyScrollBehavior; + } + }; + /** + * @return {?} + */ + BlockScrollStrategy.prototype._canBeEnabled = /** + * @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. + var /** @type {?} */ html = this._document.documentElement; + if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) { + return false; + } + var /** @type {?} */ body = this._document.body; + var /** @type {?} */ viewport = this._viewportRuler.getViewportSize(); + return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width; + }; + return BlockScrollStrategy; +}()); + +/** + * @fileoverview added by tsickle + * @suppress {checkTypes} 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) { + var /** @type {?} */ outsideAbove = element.bottom < containerBounds.top; + var /** @type {?} */ outsideBelow = element.top > containerBounds.bottom; + var /** @type {?} */ outsideLeft = element.right < containerBounds.left; + var /** @type {?} */ 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) { + var /** @type {?} */ clippedAbove = element.top < scrollContainerRect.top; + var /** @type {?} */ clippedBelow = element.bottom > scrollContainerRect.bottom; + var /** @type {?} */ clippedLeft = element.left < scrollContainerRect.left; + var /** @type {?} */ clippedRight = element.right > scrollContainerRect.right; + return clippedAbove || clippedBelow || clippedLeft || clippedRight; + }); +} + +/** + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc + */ + +/** + * Config options for the RepositionScrollStrategy. + * @record + */ + +/** + * Strategy that will update the element position as the user is scrolling. + */ +var 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 {?} */ - NoopScrollStrategy.prototype.enable = function () { }; + 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 {?} */ - NoopScrollStrategy.prototype.disable = function () { }; + function () { + var _this = this; + if (!this._scrollSubscription) { + var /** @type {?} */ 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) { + var /** @type {?} */ 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. + var /** @type {?} */ 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 {?} */ - NoopScrollStrategy.prototype.attach = function () { }; - return NoopScrollStrategy; + RepositionScrollStrategy.prototype.disable = /** + * Disables repositioning of the attached overlay on scroll. + * @return {?} + */ + function () { + if (this._scrollSubscription) { + this._scrollSubscription.unsubscribe(); + this._scrollSubscription = null; + } + }; + return RepositionScrollStrategy; }()); /** - * OverlayConfig captures the initial configuration used when opening an overlay. + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc */ -var OverlayConfig = (function () { - /** - * @param {?=} config - */ - function OverlayConfig(config) { + +/** + * 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; /** - * 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. + * Do nothing on scroll. */ - this.panelClass = ''; + this.noop = function () { return new NoopScrollStrategy(); }; /** - * Whether the overlay has a backdrop. + * Close the overlay as soon as the user scrolls. + * @param config Configuration to be used inside the scroll strategy. */ - this.hasBackdrop = false; + this.close = function (config) { + return new CloseScrollStrategy(_this._scrollDispatcher, _this._ngZone, _this._viewportRuler, config); + }; /** - * Custom class to add to the backdrop + * Block scrolling. */ - this.backdropClass = 'cdk-overlay-dark-backdrop'; + this.block = function () { return new BlockScrollStrategy(_this._viewportRuler, _this._document); }; /** - * The direction of the text in the overlay panel. + * Update the overlay's position on scroll. + * @param config Configuration to be used inside the scroll strategy. + * Allows debouncing the reposition calls. */ - this.direction = 'ltr'; - if (config) { - Object.keys(config).forEach(function (key) { return _this[key] = config[key]; }); - } + this.reposition = function (config) { + return new RepositionScrollStrategy(_this._scrollDispatcher, _this._viewportRuler, _this._ngZone, config); + }; + this._document = document; } - return OverlayConfig; + ScrollStrategyOptions.decorators = [ + { type: _angular_core.Injectable }, + ]; + /** @nocollapse */ + ScrollStrategyOptions.ctorParameters = function () { return [ + { type: _angular_cdk_scrolling.ScrollDispatcher, }, + { type: _angular_cdk_scrolling.ViewportRuler, }, + { type: _angular_core.NgZone, }, + { type: undefined, decorators: [{ type: _angular_core.Inject, args: [_angular_common.DOCUMENT,] },] }, + ]; }; + return ScrollStrategyOptions; }()); /** + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc + */ + +/** + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc + */ + +/** * Reference to an overlay that has been created with the Overlay service. * Used to manipulate or dispose of said overlay. */ -var OverlayRef = (function () { - /** - * @param {?} _portalHost - * @param {?} _pane - * @param {?} _config - * @param {?} _ngZone - */ - function OverlayRef(_portalHost, _pane, _config, _ngZone) { - this._portalHost = _portalHost; +var OverlayRef = /** @class */ (function () { + function OverlayRef(_portalOutlet, _pane, _config, _ngZone, _keyboardDispatcher, _document) { + this._portalOutlet = _portalOutlet; this._pane = _pane; this._config = _config; this._ngZone = _ngZone; + this._keyboardDispatcher = _keyboardDispatcher; + this._document = _document; this._backdropElement = null; this._backdropClick = new rxjs_Subject.Subject(); this._attachments = new rxjs_Subject.Subject(); this._detachments = new rxjs_Subject.Subject(); + /** + * Stream of keydown events dispatched to this overlay. + */ + this._keydownEvents = new rxjs_Subject.Subject(); if (_config.scrollStrategy) { _config.scrollStrategy.attach(this); } } Object.defineProperty(OverlayRef.prototype, "overlayElement", { - /** + /** The overlay's HTML element */ + get: /** * The overlay's HTML element * @return {?} */ - get: function () { + 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 + }); + /** + * 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 the overlay to a portal instance and adds the backdrop. + * 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. */ - OverlayRef.prototype.attach = function (portal) { + function (portal) { var _this = this; - var /** @type {?} */ attachResult = this._portalHost.attach(portal); + var /** @type {?} */ attachResult = this._portalOutlet.attach(portal); if (this._config.positionStrategy) { this._config.positionStrategy.attach(this); } // Update the pane element with the given configuration. this._updateStackingOrder(); - this.updateSize(); - this.updateDirection(); - this.updatePosition(); + 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(rxjs_operators_take.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) { @@ -164,13 +715,26 @@ var OverlayRef = (function () { } // 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); 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. */ - OverlayRef.prototype.detach = function () { + 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 @@ -182,16 +746,24 @@ var OverlayRef = (function () { if (this._config.scrollStrategy) { this._config.scrollStrategy.disable(); } - var /** @type {?} */ detachmentResult = this._portalHost.detach(); + var /** @type {?} */ detachmentResult = this._portalOutlet.detach(); // Only emit after everything is detached. this._detachments.next(); + // Remove this overlay from keyboard dispatcher tracking + this._keyboardDispatcher.remove(this); return detachmentResult; }; + /** Cleans up the overlay from the DOM. */ /** * Cleans up the overlay from the DOM. * @return {?} */ - OverlayRef.prototype.dispose = function () { + OverlayRef.prototype.dispose = /** + * Cleans up the overlay from the DOM. + * @return {?} + */ + function () { + var /** @type {?} */ isAttached = this.hasAttached(); if (this._config.positionStrategy) { this._config.positionStrategy.dispose(); } @@ -199,68 +771,152 @@ var OverlayRef = (function () { this._config.scrollStrategy.disable(); } this.detachBackdrop(); - this._portalHost.dispose(); + this._keyboardDispatcher.remove(this); + this._portalOutlet.dispose(); this._attachments.complete(); this._backdropClick.complete(); - this._detachments.next(); + this._keydownEvents.complete(); + if (isAttached) { + this._detachments.next(); + } this._detachments.complete(); }; + /** Whether the overlay has attached content. */ /** - * Checks whether the overlay has been attached. + * Whether the overlay has attached content. * @return {?} */ - OverlayRef.prototype.hasAttached = function () { - return this._portalHost.hasAttached(); + 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. */ /** - * Returns 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 {?} */ - OverlayRef.prototype.backdropClick = function () { + function () { return this._backdropClick.asObservable(); }; + /** Gets an observable that emits when the overlay has been attached. */ /** - * Returns 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 = function () { + 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. */ /** - * Returns 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 {?} */ - OverlayRef.prototype.detachments = function () { + function () { return this._detachments.asObservable(); }; + /** Gets an observable of keydown events targeted to this overlay. */ /** - * Gets the current config of the 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._keydownEvents.asObservable(); + }; + /** Gets the the current overlay configuration, which is immutable. */ + /** + * Gets the the current overlay configuration, which is immutable. + * @return {?} + */ + OverlayRef.prototype.getConfig = /** + * Gets the the current overlay configuration, which is immutable. * @return {?} */ - OverlayRef.prototype.getConfig = function () { + 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 = function () { + OverlayRef.prototype.updatePosition = /** + * Updates the position of the overlay based on the position strategy. + * @return {?} + */ + function () { if (this._config.positionStrategy) { this._config.positionStrategy.apply(); } }; + /** 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(); + }; /** * Updates the text direction of the overlay panel. * @return {?} */ - OverlayRef.prototype.updateDirection = function () { + OverlayRef.prototype._updateElementDirection = /** + * Updates the text direction of the overlay panel. + * @return {?} + */ + function () { this._pane.setAttribute('dir', /** @type {?} */ ((this._config.direction))); }; /** - * Updates the size of the overlay based on the overlay config. + * Updates the size of the overlay element based on the overlay config. + * @return {?} + */ + OverlayRef.prototype._updateElementSize = /** + * Updates the size of the overlay element based on the overlay config. * @return {?} */ - OverlayRef.prototype.updateSize = function () { + function () { if (this._config.width || this._config.width === 0) { this._pane.style.width = formatCssUnit(this._config.width); } @@ -285,16 +941,26 @@ var OverlayRef = (function () { * @param {?} enablePointer * @return {?} */ - OverlayRef.prototype._togglePointerEvents = function (enablePointer) { + OverlayRef.prototype._togglePointerEvents = /** + * Toggles the pointer events for the overlay pane element. + * @param {?} enablePointer + * @return {?} + */ + function (enablePointer) { this._pane.style.pointerEvents = enablePointer ? 'auto' : 'none'; }; /** * Attaches a backdrop for this overlay. * @return {?} */ - OverlayRef.prototype._attachBackdrop = function () { + OverlayRef.prototype._attachBackdrop = /** + * Attaches a backdrop for this overlay. + * @return {?} + */ + function () { var _this = this; - this._backdropElement = document.createElement('div'); + var /** @type {?} */ showingClass = 'cdk-overlay-backdrop-showing'; + this._backdropElement = this._document.createElement('div'); this._backdropElement.classList.add('cdk-overlay-backdrop'); if (this._config.backdropClass) { this._backdropElement.classList.add(this._config.backdropClass); @@ -305,13 +971,20 @@ var OverlayRef = (function () { this._pane.parentElement)).insertBefore(this._backdropElement, this._pane); // 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', function () { return _this._backdropClick.next(null); }); + this._backdropElement.addEventListener('click', function (event) { return _this._backdropClick.next(event); }); // Add class to fade-in the backdrop after one frame. - requestAnimationFrame(function () { - if (_this._backdropElement) { - _this._backdropElement.classList.add('cdk-overlay-backdrop-showing'); - } - }); + if (typeof requestAnimationFrame !== 'undefined') { + this._ngZone.runOutsideAngular(function () { + requestAnimationFrame(function () { + 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. @@ -321,16 +994,29 @@ var OverlayRef = (function () { * in its original DOM position. * @return {?} */ - OverlayRef.prototype._updateStackingOrder = function () { + OverlayRef.prototype._updateStackingOrder = /** + * 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. + * @return {?} + */ + function () { if (this._pane.nextSibling) { - ((this._pane.parentNode)).appendChild(this._pane); + /** @type {?} */ ((this._pane.parentNode)).appendChild(this._pane); } }; + /** Detaches the backdrop (if any) associated with the overlay. */ /** * Detaches the backdrop (if any) associated with the overlay. * @return {?} */ - OverlayRef.prototype.detachBackdrop = function () { + OverlayRef.prototype.detachBackdrop = /** + * Detaches the backdrop (if any) associated with the overlay. + * @return {?} + */ + function () { var _this = this; var /** @type {?} */ backdropToDetach = this._backdropElement; if (backdropToDetach) { @@ -361,116 +1047,25 @@ var OverlayRef = (function () { setTimeout(finishDetach_1, 500); }); } - }; - return OverlayRef; -}()); -/** - * @param {?} value - * @return {?} - */ -function formatCssUnit(value) { - return typeof value === 'string' ? (value) : value + "px"; -} - -/** Horizontal dimension of a connection point on the perimeter of the origin or overlay element. */ -/** - * The points of the origin element and the overlay element to connect. - */ -var ConnectionPositionPair = (function () { - /** - * @param {?} origin - * @param {?} overlay - */ - function ConnectionPositionPair(origin, overlay) { - 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 | - * | | - * -------------------------- - */ -var ScrollingVisibility = (function () { - function ScrollingVisibility() { - } - return ScrollingVisibility; -}()); -/** - * The change event emitted by the strategy when a fallback position is used. - */ -var ConnectedOverlayPositionChange = (function () { - /** - * @param {?} connectionPair - * @param {?} scrollableViewProperties - */ - function ConnectedOverlayPositionChange(connectionPair, scrollableViewProperties) { - this.connectionPair = connectionPair; - this.scrollableViewProperties = scrollableViewProperties; - } - /** - * @nocollapse - */ - ConnectedOverlayPositionChange.ctorParameters = function () { return [ - { type: ConnectionPositionPair, }, - { type: ScrollingVisibility, decorators: [{ type: _angular_core.Optional },] }, - ]; }; - return ConnectedOverlayPositionChange; -}()); - -/** - * 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) { - var /** @type {?} */ outsideAbove = element.bottom < containerBounds.top; - var /** @type {?} */ outsideBelow = element.top > containerBounds.bottom; - var /** @type {?} */ outsideLeft = element.right < containerBounds.left; - var /** @type {?} */ outsideRight = element.left > containerBounds.right; - return outsideAbove || outsideBelow || outsideLeft || outsideRight; - }); -} + }; + return OverlayRef; +}()); /** - * 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 + * @param {?} value + * @return {?} */ -function isElementClippedByScrolling(element, scrollContainers) { - return scrollContainers.some(function (scrollContainerRect) { - var /** @type {?} */ clippedAbove = element.top < scrollContainerRect.top; - var /** @type {?} */ clippedBelow = element.bottom > scrollContainerRect.bottom; - var /** @type {?} */ clippedLeft = element.left < scrollContainerRect.left; - var /** @type {?} */ clippedRight = element.right > scrollContainerRect.right; - return clippedAbove || clippedBelow || clippedLeft || clippedRight; - }); +function formatCssUnit(value) { + return typeof value === 'string' ? /** @type {?} */ (value) : value + "px"; } +/** + * Size properties for an overlay. + * @record + */ + +/** + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc + */ /** * A strategy for positioning overlays. Using this strategy, an overlay is given an @@ -479,16 +1074,11 @@ function isElementClippedByScrolling(element, scrollContainers) { * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner * of the overlay. */ -var ConnectedPositionStrategy = (function () { - /** - * @param {?} originPos - * @param {?} overlayPos - * @param {?} _connectedTo - * @param {?} _viewportRuler - */ - function ConnectedPositionStrategy(originPos, overlayPos, _connectedTo, _viewportRuler) { +var ConnectedPositionStrategy = /** @class */ (function () { + function ConnectedPositionStrategy(originPos, overlayPos, _connectedTo, _viewportRuler, _document) { this._connectedTo = _connectedTo; this._viewportRuler = _viewportRuler; + this._document = _document; /** * Layout direction of the position strategy. */ @@ -513,83 +1103,132 @@ var ConnectedPositionStrategy = (function () { * Ordered list of preferred positions, from most to least desirable. */ this._preferredPositions = []; + /** + * Whether the position strategy is applied currently. + */ + this._applied = false; + /** + * Whether the overlay position is locked. + */ + this._positionLocked = false; this._onPositionChange = new rxjs_Subject.Subject(); this._origin = this._connectedTo.nativeElement; this.withFallbackPosition(originPos, overlayPos); } Object.defineProperty(ConnectedPositionStrategy.prototype, "_isRtl", { - /** + /** Whether the we're dealing with an RTL context */ + get: /** * Whether the we're dealing with an RTL context * @return {?} */ - get: function () { + function () { return this._dir === 'rtl'; }, enumerable: true, configurable: true }); Object.defineProperty(ConnectedPositionStrategy.prototype, "onPositionChange", { - /** + /** Emits an event when the connection point changes. */ + get: /** * Emits an event when the connection point changes. * @return {?} */ - get: function () { + function () { return this._onPositionChange.asObservable(); }, enumerable: true, configurable: true }); Object.defineProperty(ConnectedPositionStrategy.prototype, "positions", { - /** + /** Ordered list of preferred positions, from most to least desirable. */ + get: /** * Ordered list of preferred positions, from most to least desirable. * @return {?} */ - get: function () { + function () { return this._preferredPositions; }, enumerable: true, configurable: true }); + /** Attach this position strategy to an overlay. */ /** + * Attach this position strategy to an overlay. + * @param {?} overlayRef + * @return {?} + */ + ConnectedPositionStrategy.prototype.attach = /** + * Attach this position strategy to an overlay. * @param {?} overlayRef * @return {?} */ - ConnectedPositionStrategy.prototype.attach = function (overlayRef) { + function (overlayRef) { var _this = this; this._overlayRef = overlayRef; this._pane = overlayRef.overlayElement; this._resizeSubscription.unsubscribe(); this._resizeSubscription = this._viewportRuler.change().subscribe(function () { return _this.apply(); }); }; + /** Disposes all resources used by the position strategy. */ /** - * Performs any cleanup after the element is destroyed. + * Disposes all resources used by the position strategy. + * @return {?} + */ + ConnectedPositionStrategy.prototype.dispose = /** + * Disposes all resources used by the position strategy. * @return {?} */ - ConnectedPositionStrategy.prototype.dispose = function () { + function () { + this._applied = false; this._resizeSubscription.unsubscribe(); + this._onPositionChange.complete(); }; + /** @docs-private */ /** * \@docs-private * @return {?} */ - ConnectedPositionStrategy.prototype.detach = function () { + ConnectedPositionStrategy.prototype.detach = /** + * \@docs-private + * @return {?} + */ + function () { + this._applied = false; this._resizeSubscription.unsubscribe(); }; /** * Updates the position of the overlay element, using whichever preferred position relative * to the origin fits on-screen. + * @docs-private + */ + /** + * Updates the position of the overlay element, using whichever preferred position relative + * to the origin fits on-screen. * \@docs-private - * - * @return {?} Resolves when the styles have been applied. + * @return {?} + */ + ConnectedPositionStrategy.prototype.apply = /** + * Updates the position of the overlay element, using whichever preferred position relative + * to the origin fits on-screen. + * \@docs-private + * @return {?} */ - ConnectedPositionStrategy.prototype.apply = function () { + function () { + // 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._applied && this._positionLocked && this._lastConnectedPosition) { + this.recalculateLastPosition(); + return; + } + this._applied = true; // We need the bounding rects for the origin and the overlay to determine how to position // the overlay relative to the origin. var /** @type {?} */ element = this._pane; var /** @type {?} */ originRect = this._origin.getBoundingClientRect(); var /** @type {?} */ overlayRect = element.getBoundingClientRect(); - // We use the viewport rect to determine whether a position would go off-screen. - var /** @type {?} */ viewportRect = this._viewportRuler.getViewportRect(); + // We use the viewport size to determine whether a position would go off-screen. + var /** @type {?} */ viewportSize = this._viewportRuler.getViewportSize(); // Fallback point if none of the fallbacks fit into the viewport. var /** @type {?} */ fallbackPoint; var /** @type {?} */ fallbackPosition; @@ -600,7 +1239,7 @@ var ConnectedPositionStrategy = (function () { // Get the (x, y) point of connection on the origin, and then use that to get the // (top, left) coordinate for the overlay at `pos`. var /** @type {?} */ originPoint = this._getOriginConnectionPoint(originRect, pos); - var /** @type {?} */ overlayPoint = this._getOverlayPoint(originPoint, overlayRect, viewportRect, pos); + var /** @type {?} */ overlayPoint = this._getOverlayPoint(originPoint, overlayRect, viewportSize, pos); // If the overlay in the calculated position fits on-screen, put it there and we're done. if (overlayPoint.fitsInViewport) { this._setElementPosition(element, overlayRect, overlayPoint, pos); @@ -618,73 +1257,208 @@ var ConnectedPositionStrategy = (function () { this._setElementPosition(element, overlayRect, /** @type {?} */ ((fallbackPoint)), /** @type {?} */ ((fallbackPosition))); }; /** - * This re-aligns the overlay element with the trigger in its last calculated position, + * Re-positions 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. + */ + /** + * Re-positions 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. + * @return {?} + */ + ConnectedPositionStrategy.prototype.recalculateLastPosition = /** + * Re-positions 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. * @return {?} */ - ConnectedPositionStrategy.prototype.recalculateLastPosition = function () { + function () { + // If the overlay has never been positioned before, do nothing. + if (!this._lastConnectedPosition) { + return; + } var /** @type {?} */ originRect = this._origin.getBoundingClientRect(); var /** @type {?} */ overlayRect = this._pane.getBoundingClientRect(); - var /** @type {?} */ viewportRect = this._viewportRuler.getViewportRect(); + var /** @type {?} */ viewportSize = this._viewportRuler.getViewportSize(); var /** @type {?} */ lastPosition = this._lastConnectedPosition || this._preferredPositions[0]; var /** @type {?} */ originPoint = this._getOriginConnectionPoint(originRect, lastPosition); - var /** @type {?} */ overlayPoint = this._getOverlayPoint(originPoint, overlayRect, viewportRect, lastPosition); + var /** @type {?} */ overlayPoint = this._getOverlayPoint(originPoint, overlayRect, viewportSize, lastPosition); this._setElementPosition(this._pane, overlayRect, overlayPoint, lastPosition); }; /** * 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. + */ + /** + * 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. + * @param {?} scrollables + * @return {?} + */ + ConnectedPositionStrategy.prototype.withScrollableContainers = /** + * 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. * @param {?} scrollables * @return {?} */ - ConnectedPositionStrategy.prototype.withScrollableContainers = function (scrollables) { + function (scrollables) { this.scrollables = scrollables; }; /** * Adds a new preferred fallback position. + * @param originPos + * @param overlayPos + */ + /** + * Adds a new preferred fallback position. * @param {?} originPos * @param {?} overlayPos + * @param {?=} offsetX + * @param {?=} offsetY * @return {?} */ - ConnectedPositionStrategy.prototype.withFallbackPosition = function (originPos, overlayPos) { - this._preferredPositions.push(new ConnectionPositionPair(originPos, overlayPos)); + ConnectedPositionStrategy.prototype.withFallbackPosition = /** + * Adds a new preferred fallback position. + * @param {?} originPos + * @param {?} overlayPos + * @param {?=} offsetX + * @param {?=} offsetY + * @return {?} + */ + function (originPos, overlayPos, offsetX, offsetY) { + var /** @type {?} */ position = new ConnectionPositionPair(originPos, overlayPos, offsetX, offsetY); + this._preferredPositions.push(position); return this; }; /** * Sets the layout direction so the overlay's position can be adjusted to match. + * @param dir New layout direction. + */ + /** + * Sets the layout direction so the overlay's position can be adjusted to match. * @param {?} dir New layout direction. * @return {?} */ - ConnectedPositionStrategy.prototype.withDirection = function (dir) { + ConnectedPositionStrategy.prototype.withDirection = /** + * Sets the layout direction so the overlay's position can be adjusted to match. + * @param {?} dir New layout direction. + * @return {?} + */ + function (dir) { this._dir = dir; return this; }; /** * Sets an offset for the overlay's connection point on the x-axis + * @param offset New offset in the X axis. + */ + /** + * Sets an offset for the overlay's connection point on the x-axis + * @param {?} offset New offset in the X axis. + * @return {?} + */ + ConnectedPositionStrategy.prototype.withOffsetX = /** + * Sets an offset for the overlay's connection point on the x-axis * @param {?} offset New offset in the X axis. * @return {?} */ - ConnectedPositionStrategy.prototype.withOffsetX = function (offset) { + function (offset) { this._offsetX = offset; return this; }; /** * Sets an offset for the overlay's connection point on the y-axis + * @param offset New offset in the Y axis. + */ + /** + * Sets an offset for the overlay's connection point on the y-axis + * @param {?} offset New offset in the Y axis. + * @return {?} + */ + ConnectedPositionStrategy.prototype.withOffsetY = /** + * Sets an offset for the overlay's connection point on the y-axis * @param {?} offset New offset in the Y axis. * @return {?} */ - ConnectedPositionStrategy.prototype.withOffsetY = function (offset) { + function (offset) { this._offsetY = offset; 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. + */ + /** + * 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. + * @return {?} + */ + ConnectedPositionStrategy.prototype.withLockedPosition = /** + * 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. + * @return {?} + */ + function (isLocked) { + this._positionLocked = isLocked; + return this; + }; + /** + * Overwrites the current set of positions with an array of new ones. + * @param positions Position pairs to be set on the strategy. + */ + /** + * Overwrites the current set of positions with an array of new ones. + * @param {?} positions Position pairs to be set on the strategy. + * @return {?} + */ + ConnectedPositionStrategy.prototype.withPositions = /** + * Overwrites the current set of positions with an array of new ones. + * @param {?} positions Position pairs to be set on the strategy. + * @return {?} + */ + function (positions) { + this._preferredPositions = positions.slice(); + return this; + }; + /** + * Sets the origin element, relative to which to position the overlay. + * @param origin Reference to the new origin element. + */ + /** + * Sets the origin element, relative to which to position the overlay. + * @param {?} origin Reference to the new origin element. + * @return {?} + */ + ConnectedPositionStrategy.prototype.setOrigin = /** + * Sets the origin element, relative to which to position the overlay. + * @param {?} origin Reference to the new origin element. + * @return {?} + */ + function (origin) { + this._origin = origin.nativeElement; + return this; + }; + /** + * Gets the horizontal (x) "start" dimension based on whether the overlay is in an RTL context. + * @param {?} rect + * @return {?} + */ + ConnectedPositionStrategy.prototype._getStartX = /** * Gets the horizontal (x) "start" dimension based on whether the overlay is in an RTL context. * @param {?} rect * @return {?} */ - ConnectedPositionStrategy.prototype._getStartX = function (rect) { + function (rect) { return this._isRtl ? rect.right : rect.left; }; /** @@ -692,7 +1466,12 @@ var ConnectedPositionStrategy = (function () { * @param {?} rect * @return {?} */ - ConnectedPositionStrategy.prototype._getEndX = function (rect) { + ConnectedPositionStrategy.prototype._getEndX = /** + * Gets the horizontal (x) "end" dimension based on whether the overlay is in an RTL context. + * @param {?} rect + * @return {?} + */ + function (rect) { return this._isRtl ? rect.left : rect.right; }; /** @@ -701,7 +1480,13 @@ var ConnectedPositionStrategy = (function () { * @param {?} pos * @return {?} */ - ConnectedPositionStrategy.prototype._getOriginConnectionPoint = function (originRect, pos) { + ConnectedPositionStrategy.prototype._getOriginConnectionPoint = /** + * Gets the (x, y) coordinate of a connection point on the origin based on a relative position. + * @param {?} originRect + * @param {?} pos + * @return {?} + */ + function (originRect, pos) { var /** @type {?} */ originStartX = this._getStartX(originRect); var /** @type {?} */ originEndX = this._getEndX(originRect); var /** @type {?} */ x; @@ -726,11 +1511,21 @@ var ConnectedPositionStrategy = (function () { * would be inside the viewport at that position. * @param {?} originPoint * @param {?} overlayRect - * @param {?} viewportRect + * @param {?} viewportSize + * @param {?} pos + * @return {?} + */ + ConnectedPositionStrategy.prototype._getOverlayPoint = /** + * 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, as well as how much of the element + * would be inside the viewport at that position. + * @param {?} originPoint + * @param {?} overlayRect + * @param {?} viewportSize * @param {?} pos * @return {?} */ - ConnectedPositionStrategy.prototype._getOverlayPoint = function (originPoint, overlayRect, viewportRect, pos) { + function (originPoint, overlayRect, viewportSize, pos) { // Calculate the (overlayStartX, overlayStartY), the start of the potential overlay position // relative to the origin point. var /** @type {?} */ overlayStartX; @@ -750,14 +1545,17 @@ var ConnectedPositionStrategy = (function () { else { overlayStartY = pos.overlayY == 'top' ? 0 : -overlayRect.height; } + // The (x, y) offsets of the overlay based on the current position. + var /** @type {?} */ offsetX = typeof pos.offsetX === 'undefined' ? this._offsetX : pos.offsetX; + var /** @type {?} */ offsetY = typeof pos.offsetY === 'undefined' ? this._offsetY : pos.offsetY; // The (x, y) coordinates of the overlay. - var /** @type {?} */ x = originPoint.x + overlayStartX + this._offsetX; - var /** @type {?} */ y = originPoint.y + overlayStartY + this._offsetY; + var /** @type {?} */ x = originPoint.x + overlayStartX + offsetX; + var /** @type {?} */ y = originPoint.y + overlayStartY + offsetY; // How much the overlay would overflow at this position, on each side. var /** @type {?} */ leftOverflow = 0 - x; - var /** @type {?} */ rightOverflow = (x + overlayRect.width) - viewportRect.width; + var /** @type {?} */ rightOverflow = (x + overlayRect.width) - viewportSize.width; var /** @type {?} */ topOverflow = 0 - y; - var /** @type {?} */ bottomOverflow = (y + overlayRect.height) - viewportRect.height; + var /** @type {?} */ bottomOverflow = (y + overlayRect.height) - viewportSize.height; // Visible parts of the element on each axis. var /** @type {?} */ visibleWidth = this._subtractOverflows(overlayRect.width, leftOverflow, rightOverflow); var /** @type {?} */ visibleHeight = this._subtractOverflows(overlayRect.height, topOverflow, bottomOverflow); @@ -772,7 +1570,13 @@ var ConnectedPositionStrategy = (function () { * @param {?} overlay * @return {?} */ - ConnectedPositionStrategy.prototype._getScrollVisibility = function (overlay) { + ConnectedPositionStrategy.prototype._getScrollVisibility = /** + * 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. + * @param {?} overlay + * @return {?} + */ + function (overlay) { var /** @type {?} */ originBounds = this._origin.getBoundingClientRect(); var /** @type {?} */ overlayBounds = overlay.getBoundingClientRect(); var /** @type {?} */ scrollContainerBounds = this.scrollables.map(function (s) { return s.getElementRef().nativeElement.getBoundingClientRect(); }); @@ -791,7 +1595,15 @@ var ConnectedPositionStrategy = (function () { * @param {?} pos * @return {?} */ - ConnectedPositionStrategy.prototype._setElementPosition = function (element, overlayRect, overlayPoint, pos) { + ConnectedPositionStrategy.prototype._setElementPosition = /** + * Physically positions the overlay element to the given coordinate. + * @param {?} element + * @param {?} overlayRect + * @param {?} overlayPoint + * @param {?} pos + * @return {?} + */ + function (element, overlayRect, overlayPoint, pos) { // 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. var /** @type {?} */ verticalStyleProperty = pos.overlayY === 'bottom' ? 'bottom' : 'top'; @@ -799,7 +1611,7 @@ var ConnectedPositionStrategy = (function () { // from the bottom of the viewport rather than the top. var /** @type {?} */ y = verticalStyleProperty === 'top' ? overlayPoint.y : - document.documentElement.clientHeight - (overlayPoint.y + overlayRect.height); + this._document.documentElement.clientHeight - (overlayPoint.y + overlayRect.height); // 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 @@ -815,7 +1627,7 @@ var ConnectedPositionStrategy = (function () { // from the right edge of the viewport rather than the left edge. var /** @type {?} */ x = horizontalStyleProperty === 'left' ? overlayPoint.x : - document.documentElement.clientWidth - (overlayPoint.x + overlayRect.width); + this._document.documentElement.clientWidth - (overlayPoint.x + overlayRect.width); // Reset any existing styles. This is necessary in case the preferred position has // changed since the last `apply`. ['top', 'bottom', 'left', 'right'].forEach(function (p) { return element.style[p] = null; }); @@ -832,7 +1644,13 @@ var ConnectedPositionStrategy = (function () { * @param {...?} overflows * @return {?} */ - ConnectedPositionStrategy.prototype._subtractOverflows = function (length) { + ConnectedPositionStrategy.prototype._subtractOverflows = /** + * Subtracts the amount that an element is overflowing on an axis from it's length. + * @param {?} length + * @param {...?} overflows + * @return {?} + */ + function (length) { var overflows = []; for (var _i = 1; _i < arguments.length; _i++) { overflows[_i - 1] = arguments[_i]; @@ -845,13 +1663,19 @@ var ConnectedPositionStrategy = (function () { }()); /** + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc + */ + +/** * 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. */ -var GlobalPositionStrategy = (function () { - function GlobalPositionStrategy() { +var GlobalPositionStrategy = /** @class */ (function () { + function GlobalPositionStrategy(_document) { + this._document = _document; this._cssPosition = 'static'; this._topOffset = ''; this._bottomOffset = ''; @@ -861,21 +1685,37 @@ var GlobalPositionStrategy = (function () { this._justifyContent = ''; this._width = ''; this._height = ''; + /** + * A lazily-created wrapper for the overlay element that is used as a flex container. + */ this._wrapper = null; } /** * @param {?} overlayRef * @return {?} */ - GlobalPositionStrategy.prototype.attach = function (overlayRef) { + GlobalPositionStrategy.prototype.attach = /** + * @param {?} overlayRef + * @return {?} + */ + function (overlayRef) { this._overlayRef = overlayRef; }; /** * Sets the top position of the overlay. Clears any previously set vertical position. + * @param value New top offset. + */ + /** + * Sets the top position of the overlay. Clears any previously set vertical position. + * @param {?=} value New top offset. + * @return {?} + */ + GlobalPositionStrategy.prototype.top = /** + * Sets the top position of the overlay. Clears any previously set vertical position. * @param {?=} value New top offset. * @return {?} */ - GlobalPositionStrategy.prototype.top = function (value) { + function (value) { if (value === void 0) { value = ''; } this._bottomOffset = ''; this._topOffset = value; @@ -884,10 +1724,19 @@ var GlobalPositionStrategy = (function () { }; /** * Sets the left position of the overlay. Clears any previously set horizontal position. + * @param value New left offset. + */ + /** + * Sets the left position of the overlay. Clears any previously set horizontal position. + * @param {?=} value New left offset. + * @return {?} + */ + GlobalPositionStrategy.prototype.left = /** + * Sets the left position of the overlay. Clears any previously set horizontal position. * @param {?=} value New left offset. * @return {?} */ - GlobalPositionStrategy.prototype.left = function (value) { + function (value) { if (value === void 0) { value = ''; } this._rightOffset = ''; this._leftOffset = value; @@ -896,10 +1745,19 @@ var GlobalPositionStrategy = (function () { }; /** * Sets the bottom position of the overlay. Clears any previously set vertical position. + * @param value New bottom offset. + */ + /** + * Sets the bottom position of the overlay. Clears any previously set vertical position. + * @param {?=} value New bottom offset. + * @return {?} + */ + GlobalPositionStrategy.prototype.bottom = /** + * Sets the bottom position of the overlay. Clears any previously set vertical position. * @param {?=} value New bottom offset. * @return {?} */ - GlobalPositionStrategy.prototype.bottom = function (value) { + function (value) { if (value === void 0) { value = ''; } this._topOffset = ''; this._bottomOffset = value; @@ -908,10 +1766,19 @@ var GlobalPositionStrategy = (function () { }; /** * Sets the right position of the overlay. Clears any previously set horizontal position. + * @param value New right offset. + */ + /** + * Sets the right position of the overlay. Clears any previously set horizontal position. + * @param {?=} value New right offset. + * @return {?} + */ + GlobalPositionStrategy.prototype.right = /** + * Sets the right position of the overlay. Clears any previously set horizontal position. * @param {?=} value New right offset. * @return {?} */ - GlobalPositionStrategy.prototype.right = function (value) { + function (value) { if (value === void 0) { value = ''; } this._leftOffset = ''; this._rightOffset = value; @@ -920,10 +1787,19 @@ var GlobalPositionStrategy = (function () { }; /** * Sets the overlay width and clears any previously set width. + * @param value New width for the overlay + */ + /** + * Sets the overlay width and clears any previously set width. + * @param {?=} value New width for the overlay + * @return {?} + */ + GlobalPositionStrategy.prototype.width = /** + * Sets the overlay width and clears any previously set width. * @param {?=} value New width for the overlay * @return {?} */ - GlobalPositionStrategy.prototype.width = function (value) { + function (value) { if (value === void 0) { value = ''; } this._width = value; // When the width is 100%, we should reset the `left` and the offset, @@ -935,10 +1811,19 @@ var GlobalPositionStrategy = (function () { }; /** * Sets the overlay height and clears any previously set height. + * @param value New height for the overlay + */ + /** + * Sets the overlay height and clears any previously set height. + * @param {?=} value New height for the overlay + * @return {?} + */ + GlobalPositionStrategy.prototype.height = /** + * Sets the overlay height and clears any previously set height. * @param {?=} value New height for the overlay * @return {?} */ - GlobalPositionStrategy.prototype.height = function (value) { + function (value) { if (value === void 0) { value = ''; } this._height = value; // When the height is 100%, we should reset the `top` and the offset, @@ -952,10 +1837,23 @@ var GlobalPositionStrategy = (function () { * Centers the overlay horizontally with an optional offset. * Clears any previously set horizontal position. * + * @param offset Overlay offset from the horizontal center. + */ + /** + * Centers the overlay horizontally with an optional offset. + * Clears any previously set horizontal position. + * + * @param {?=} offset Overlay offset from the horizontal center. + * @return {?} + */ + GlobalPositionStrategy.prototype.centerHorizontally = /** + * Centers the overlay horizontally with an optional offset. + * Clears any previously set horizontal position. + * * @param {?=} offset Overlay offset from the horizontal center. * @return {?} */ - GlobalPositionStrategy.prototype.centerHorizontally = function (offset) { + function (offset) { if (offset === void 0) { offset = ''; } this.left(offset); this._justifyContent = 'center'; @@ -965,10 +1863,23 @@ var GlobalPositionStrategy = (function () { * Centers the overlay vertically with an optional offset. * Clears any previously set vertical position. * + * @param offset Overlay offset from the vertical center. + */ + /** + * Centers the overlay vertically with an optional offset. + * Clears any previously set vertical position. + * + * @param {?=} offset Overlay offset from the vertical center. + * @return {?} + */ + GlobalPositionStrategy.prototype.centerVertically = /** + * Centers the overlay vertically with an optional offset. + * Clears any previously set vertical position. + * * @param {?=} offset Overlay offset from the vertical center. * @return {?} */ - GlobalPositionStrategy.prototype.centerVertically = function (offset) { + function (offset) { if (offset === void 0) { offset = ''; } this.top(offset); this._alignItems = 'center'; @@ -976,20 +1887,38 @@ var GlobalPositionStrategy = (function () { }; /** * Apply the position to the element. + * @docs-private + * + * @returns Resolved when the styles have been applied. + */ + /** + * Apply the position to the element. + * \@docs-private + * + * @return {?} Resolved when the styles have been applied. + */ + GlobalPositionStrategy.prototype.apply = /** + * Apply the position to the element. * \@docs-private * * @return {?} Resolved when the styles have been applied. */ - GlobalPositionStrategy.prototype.apply = function () { + function () { + // 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.hasAttached()) { + return; + } var /** @type {?} */ element = this._overlayRef.overlayElement; if (!this._wrapper && element.parentNode) { - this._wrapper = document.createElement('div'); - this._wrapper.classList.add('cdk-global-overlay-wrapper'); - element.parentNode.insertBefore(this._wrapper, element); - this._wrapper.appendChild(element); + this._wrapper = this._document.createElement('div'); /** @type {?} */ + ((this._wrapper)).classList.add('cdk-global-overlay-wrapper'); + element.parentNode.insertBefore(/** @type {?} */ ((this._wrapper)), element); /** @type {?} */ + ((this._wrapper)).appendChild(element); } var /** @type {?} */ styles = element.style; - var /** @type {?} */ parentStyles = ((element.parentNode)).style; + var /** @type {?} */ parentStyles = (/** @type {?} */ (element.parentNode)).style; styles.position = this._cssPosition; styles.marginTop = this._topOffset; styles.marginLeft = this._leftOffset; @@ -1000,11 +1929,16 @@ var GlobalPositionStrategy = (function () { parentStyles.justifyContent = this._justifyContent; parentStyles.alignItems = this._alignItems; }; + /** Removes the wrapper element from the DOM. */ /** * Removes the wrapper element from the DOM. * @return {?} */ - GlobalPositionStrategy.prototype.dispose = function () { + GlobalPositionStrategy.prototype.dispose = /** + * Removes the wrapper element from the DOM. + * @return {?} + */ + function () { if (this._wrapper && this._wrapper.parentNode) { this._wrapper.parentNode.removeChild(this._wrapper); this._wrapper = null; @@ -1014,487 +1948,435 @@ var GlobalPositionStrategy = (function () { }()); /** + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc + */ + +/** * Builder for overlay position strategy. */ -var OverlayPositionBuilder = (function () { - /** - * @param {?} _viewportRuler - */ - function OverlayPositionBuilder(_viewportRuler) { +var OverlayPositionBuilder = /** @class */ (function () { + function OverlayPositionBuilder(_viewportRuler, _document) { this._viewportRuler = _viewportRuler; + this._document = _document; } /** * Creates a global position strategy. + */ + /** + * Creates a global position strategy. + * @return {?} + */ + OverlayPositionBuilder.prototype.global = /** + * Creates a global position strategy. * @return {?} */ - OverlayPositionBuilder.prototype.global = function () { - return new GlobalPositionStrategy(); + function () { + return new GlobalPositionStrategy(this._document); }; /** * Creates a relative position strategy. + * @param elementRef + * @param originPos + * @param overlayPos + */ + /** + * Creates a relative position strategy. * @param {?} elementRef * @param {?} originPos * @param {?} overlayPos * @return {?} */ - OverlayPositionBuilder.prototype.connectedTo = function (elementRef, originPos, overlayPos) { - return new ConnectedPositionStrategy(originPos, overlayPos, elementRef, this._viewportRuler); + OverlayPositionBuilder.prototype.connectedTo = /** + * Creates a relative position strategy. + * @param {?} elementRef + * @param {?} originPos + * @param {?} overlayPos + * @return {?} + */ + function (elementRef, originPos, overlayPos) { + return new ConnectedPositionStrategy(originPos, overlayPos, elementRef, this._viewportRuler, this._document); }; OverlayPositionBuilder.decorators = [ { type: _angular_core.Injectable }, ]; - /** - * @nocollapse - */ + /** @nocollapse */ OverlayPositionBuilder.ctorParameters = function () { return [ { type: _angular_cdk_scrolling.ViewportRuler, }, + { type: undefined, decorators: [{ type: _angular_core.Inject, args: [_angular_common.DOCUMENT,] },] }, ]; }; return OverlayPositionBuilder; }()); /** - * The OverlayContainer is the container in which all overlays will load. - * It should be provided in the root component to ensure it is properly shared. + * @fileoverview added by tsickle + * @suppress {checkTypes} checked by tsc */ -var OverlayContainer = (function () { - function OverlayContainer() { + +/** + * 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) { + this._document = _document; + /** + * Currently attached overlays in the order they were attached. + */ + this._attachedOverlays = []; } /** * @return {?} */ - OverlayContainer.prototype.ngOnDestroy = function () { - if (this._containerElement && this._containerElement.parentNode) { - this._containerElement.parentNode.removeChild(this._containerElement); + OverlayKeyboardDispatcher.prototype.ngOnDestroy = /** + * @return {?} + */ + function () { + this._unsubscribeFromKeydownEvents(); + }; + /** 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) { + // Lazily start dispatcher once first overlay is added + if (!this._keydownEventSubscription) { + this._subscribeToKeydownEvents(); } + this._attachedOverlays.push(overlayRef); }; + /** Remove an overlay from the list of attached overlay refs. */ /** - * 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 + * Remove an overlay from the list of attached overlay refs. + * @param {?} overlayRef + * @return {?} */ - OverlayContainer.prototype.getContainerElement = function () { - if (!this._containerElement) { - this._createContainer(); + OverlayKeyboardDispatcher.prototype.remove = /** + * Remove an overlay from the list of attached overlay refs. + * @param {?} overlayRef + * @return {?} + */ + function (overlayRef) { + var /** @type {?} */ 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._unsubscribeFromKeydownEvents(); } - return this._containerElement; }; /** - * Create the overlay container element, which is simply a div - * with the 'cdk-overlay-container' class on the document body. + * Subscribe to keydown events that land on t
<TRUNCATED>
