@angular/cdk 2.0.0-beta.11 → 2.0.0-beta.12

package/esm5/overlay.es5.js

@@ -1,4 +1,3 @@
-import * as tslib_1 from "tslib";
 /**
  * @license
  * Copyright Google Inc. All Rights Reserved.
@@ -10,10 +9,13 @@ import { ApplicationRef, ComponentFactoryResolver, Directive, ElementRef, EventE
 import { DomPortalHost, PortalModule, TemplatePortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs/Subject';
 import { ScrollDispatchModule, ScrollDispatcher, Scrollable, VIEWPORT_RULER_PROVIDER, ViewportRuler } from '@angular/cdk/scrolling';
+import { Subscription } from 'rxjs/Subscription';
+import { __extends } from 'tslib';
+import * as tslib_1 from 'tslib';
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ESCAPE } from '@angular/cdk/keycodes';
-import { Subscription } from 'rxjs/Subscription';
+
 /**
  * Scroll strategy that doesn't do anything.
  */
@@ -34,14 +36,15 @@ var NoopScrollStrategy = (function () {
     NoopScrollStrategy.prototype.attach = function () { };
     return NoopScrollStrategy;
 }());
+
 /**
  * OverlayConfig captures the initial configuration used when opening an overlay.
  */
 var OverlayConfig = (function () {
     /**
-     * @param {?=} state
+     * @param {?=} config
      */
-    function OverlayConfig(state) {
+    function OverlayConfig(config) {
         var _this = this;
         /**
          * Strategy to be used when handling scroll events while the overlay is open.
@@ -63,12 +66,13 @@ var OverlayConfig = (function () {
          * The direction of the text in the overlay panel.
          */
         this.direction = 'ltr';
-        if (state) {
-            Object.keys(state).forEach(function (key) { return _this[key] = state[key]; });
+        if (config) {
+            Object.keys(config).forEach(function (key) { return _this[key] = config[key]; });
         }
     }
     return OverlayConfig;
 }());
+
 /**
  * Reference to an overlay that has been created with the Overlay service.
  * Used to manipulate or dispose of said overlay.
@@ -77,20 +81,20 @@ var OverlayRef = (function () {
     /**
      * @param {?} _portalHost
      * @param {?} _pane
-     * @param {?} _state
+     * @param {?} _config
      * @param {?} _ngZone
      */
-    function OverlayRef(_portalHost, _pane, _state, _ngZone) {
+    function OverlayRef(_portalHost, _pane, _config, _ngZone) {
         this._portalHost = _portalHost;
         this._pane = _pane;
-        this._state = _state;
+        this._config = _config;
         this._ngZone = _ngZone;
         this._backdropElement = null;
         this._backdropClick = new Subject();
         this._attachments = new Subject();
         this._detachments = new Subject();
-        if (_state.scrollStrategy) {
-            _state.scrollStrategy.attach(this);
+        if (_config.scrollStrategy) {
+            _config.scrollStrategy.attach(this);
         }
     }
     Object.defineProperty(OverlayRef.prototype, "overlayElement", {
@@ -112,29 +116,29 @@ var OverlayRef = (function () {
     OverlayRef.prototype.attach = function (portal) {
         var _this = this;
         var /** @type {?} */ attachResult = this._portalHost.attach(portal);
-        if (this._state.positionStrategy) {
-            this._state.positionStrategy.attach(this);
+        if (this._config.positionStrategy) {
+            this._config.positionStrategy.attach(this);
         }
-        // Update the pane element with the given state configuration.
+        // Update the pane element with the given configuration.
         this._updateStackingOrder();
         this.updateSize();
         this.updateDirection();
         this.updatePosition();
-        if (this._state.scrollStrategy) {
-            this._state.scrollStrategy.enable();
+        if (this._config.scrollStrategy) {
+            this._config.scrollStrategy.enable();
         }
         // Enable pointer events for the overlay pane element.
         this._togglePointerEvents(true);
-        if (this._state.hasBackdrop) {
+        if (this._config.hasBackdrop) {
             this._attachBackdrop();
         }
-        if (this._state.panelClass) {
+        if (this._config.panelClass) {
             // We can't do a spread here, because IE doesn't support setting multiple classes.
-            if (Array.isArray(this._state.panelClass)) {
-                this._state.panelClass.forEach(function (cls) { return _this._pane.classList.add(cls); });
+            if (Array.isArray(this._config.panelClass)) {
+                this._config.panelClass.forEach(function (cls) { return _this._pane.classList.add(cls); });
             }
             else {
-                this._pane.classList.add(this._state.panelClass);
+                this._pane.classList.add(this._config.panelClass);
             }
         }
         // Only emit the `attachments` event once all other setup is done.
@@ -143,7 +147,7 @@ var OverlayRef = (function () {
     };
     /**
      * Detaches an overlay from a portal.
-     * @return {?} Resolves when the overlay has been detached.
+     * @return {?} The portal detachment result.
      */
     OverlayRef.prototype.detach = function () {
         this.detachBackdrop();
@@ -151,8 +155,11 @@ var OverlayRef = (function () {
         // 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._state.scrollStrategy) {
-            this._state.scrollStrategy.disable();
+        if (this._config.positionStrategy && this._config.positionStrategy.detach) {
+            this._config.positionStrategy.detach();
+        }
+        if (this._config.scrollStrategy) {
+            this._config.scrollStrategy.disable();
         }
         var /** @type {?} */ detachmentResult = this._portalHost.detach();
         // Only emit after everything is detached.
@@ -164,11 +171,11 @@ var OverlayRef = (function () {
      * @return {?}
      */
     OverlayRef.prototype.dispose = function () {
-        if (this._state.positionStrategy) {
-            this._state.positionStrategy.dispose();
+        if (this._config.positionStrategy) {
+            this._config.positionStrategy.dispose();
         }
-        if (this._state.scrollStrategy) {
-            this._state.scrollStrategy.disable();
+        if (this._config.scrollStrategy) {
+            this._config.scrollStrategy.disable();
         }
         this.detachBackdrop();
         this._portalHost.dispose();
@@ -206,19 +213,19 @@ var OverlayRef = (function () {
         return this._detachments.asObservable();
     };
     /**
-     * Gets the current state config of the overlay.
+     * Gets the current config of the overlay.
      * @return {?}
      */
-    OverlayRef.prototype.getState = function () {
-        return this._state;
+    OverlayRef.prototype.getConfig = function () {
+        return this._config;
     };
     /**
      * Updates the position of the overlay based on the position strategy.
      * @return {?}
      */
     OverlayRef.prototype.updatePosition = function () {
-        if (this._state.positionStrategy) {
-            this._state.positionStrategy.apply();
+        if (this._config.positionStrategy) {
+            this._config.positionStrategy.apply();
         }
     };
     /**
@@ -226,30 +233,30 @@ var OverlayRef = (function () {
      * @return {?}
      */
     OverlayRef.prototype.updateDirection = function () {
-        this._pane.setAttribute('dir', /** @type {?} */ ((this._state.direction)));
+        this._pane.setAttribute('dir', /** @type {?} */ ((this._config.direction)));
     };
     /**
      * Updates the size of the overlay based on the overlay config.
      * @return {?}
      */
     OverlayRef.prototype.updateSize = function () {
-        if (this._state.width || this._state.width === 0) {
-            this._pane.style.width = formatCssUnit(this._state.width);
+        if (this._config.width || this._config.width === 0) {
+            this._pane.style.width = formatCssUnit(this._config.width);
         }
-        if (this._state.height || this._state.height === 0) {
-            this._pane.style.height = formatCssUnit(this._state.height);
+        if (this._config.height || this._config.height === 0) {
+            this._pane.style.height = formatCssUnit(this._config.height);
         }
-        if (this._state.minWidth || this._state.minWidth === 0) {
-            this._pane.style.minWidth = formatCssUnit(this._state.minWidth);
+        if (this._config.minWidth || this._config.minWidth === 0) {
+            this._pane.style.minWidth = formatCssUnit(this._config.minWidth);
         }
-        if (this._state.minHeight || this._state.minHeight === 0) {
-            this._pane.style.minHeight = formatCssUnit(this._state.minHeight);
+        if (this._config.minHeight || this._config.minHeight === 0) {
+            this._pane.style.minHeight = formatCssUnit(this._config.minHeight);
         }
-        if (this._state.maxWidth || this._state.maxWidth === 0) {
-            this._pane.style.maxWidth = formatCssUnit(this._state.maxWidth);
+        if (this._config.maxWidth || this._config.maxWidth === 0) {
+            this._pane.style.maxWidth = formatCssUnit(this._config.maxWidth);
         }
-        if (this._state.maxHeight || this._state.maxHeight === 0) {
-            this._pane.style.maxHeight = formatCssUnit(this._state.maxHeight);
+        if (this._config.maxHeight || this._config.maxHeight === 0) {
+            this._pane.style.maxHeight = formatCssUnit(this._config.maxHeight);
         }
     };
     /**
@@ -268,8 +275,8 @@ var OverlayRef = (function () {
         var _this = this;
         this._backdropElement = document.createElement('div');
         this._backdropElement.classList.add('cdk-overlay-backdrop');
-        if (this._state.backdropClass) {
-            this._backdropElement.classList.add(this._state.backdropClass);
+        if (this._config.backdropClass) {
+            this._backdropElement.classList.add(this._config.backdropClass);
         } /** @type {?} */
         ((
         // Insert the backdrop before the pane in the DOM order,
@@ -319,8 +326,8 @@ var OverlayRef = (function () {
                 }
             };
             backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
-            if (this._state.backdropClass) {
-                backdropToDetach.classList.remove(this._state.backdropClass);
+            if (this._config.backdropClass) {
+                backdropToDetach.classList.remove(this._config.backdropClass);
             }
             backdropToDetach.addEventListener('transitionend', finishDetach_1);
             // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
@@ -343,6 +350,7 @@ var OverlayRef = (function () {
 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.
@@ -400,15 +408,16 @@ var ConnectedOverlayPositionChange = (function () {
         this.connectionPair = connectionPair;
         this.scrollableViewProperties = scrollableViewProperties;
     }
+    /**
+     * @nocollapse
+     */
+    ConnectedOverlayPositionChange.ctorParameters = function () { return [
+        { type: ConnectionPositionPair, },
+        { type: ScrollingVisibility, decorators: [{ type: Optional },] },
+    ]; };
     return ConnectedOverlayPositionChange;
 }());
-/**
- * @nocollapse
- */
-ConnectedOverlayPositionChange.ctorParameters = function () { return [
-    { type: ConnectionPositionPair, },
-    { type: ScrollingVisibility, decorators: [{ type: Optional },] },
-]; };
+
 /**
  * Gets whether an element is scrolled outside of view by any of its parent scrolling containers.
  * \@docs-private
@@ -441,6 +450,7 @@ function isElementClippedByScrolling(element, scrollContainers) {
         return clippedAbove || clippedBelow || clippedLeft || clippedRight;
     });
 }
+
 /**
  * A strategy for positioning overlays. Using this strategy, an overlay is given an
  * implicit position relative some origin element. The relative position is defined in terms of
@@ -458,6 +468,9 @@ var ConnectedPositionStrategy = (function () {
     function ConnectedPositionStrategy(originPos, overlayPos, _connectedTo, _viewportRuler) {
         this._connectedTo = _connectedTo;
         this._viewportRuler = _viewportRuler;
+        /**
+         * Layout direction of the position strategy.
+         */
         this._dir = 'ltr';
         /**
          * The offset in pixels for the overlay connection point on the x-axis
@@ -471,6 +484,10 @@ var ConnectedPositionStrategy = (function () {
          * The Scrollable containers used to check scrollable view properties on position change.
          */
         this.scrollables = [];
+        /**
+         * Subscription to viewport resize events.
+         */
+        this._resizeSubscription = Subscription.EMPTY;
         /**
          * Ordered list of preferred positions, from most to least desirable.
          */
@@ -517,14 +534,26 @@ var ConnectedPositionStrategy = (function () {
      * @return {?}
      */
     ConnectedPositionStrategy.prototype.attach = 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(); });
     };
     /**
      * Performs any cleanup after the element is destroyed.
      * @return {?}
      */
-    ConnectedPositionStrategy.prototype.dispose = function () { };
+    ConnectedPositionStrategy.prototype.dispose = function () {
+        this._resizeSubscription.unsubscribe();
+    };
+    /**
+     * \@docs-private
+     * @return {?}
+     */
+    ConnectedPositionStrategy.prototype.detach = function () {
+        this._resizeSubscription.unsubscribe();
+    };
     /**
      * Updates the position of the overlay element, using whichever preferred position relative
      * to the origin fits on-screen.
@@ -793,6 +822,7 @@ var ConnectedPositionStrategy = (function () {
     };
     return ConnectedPositionStrategy;
 }());
+
 /**
  * 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
@@ -961,6 +991,7 @@ var GlobalPositionStrategy = (function () {
     };
     return GlobalPositionStrategy;
 }());
+
 /**
  * Builder for overlay position strategy.
  */
@@ -988,17 +1019,18 @@ var OverlayPositionBuilder = (function () {
     OverlayPositionBuilder.prototype.connectedTo = function (elementRef, originPos, overlayPos) {
         return new ConnectedPositionStrategy(originPos, overlayPos, elementRef, this._viewportRuler);
     };
+    OverlayPositionBuilder.decorators = [
+        { type: Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    OverlayPositionBuilder.ctorParameters = function () { return [
+        { type: ViewportRuler, },
+    ]; };
     return OverlayPositionBuilder;
 }());
-OverlayPositionBuilder.decorators = [
-    { type: Injectable },
-];
-/**
- * @nocollapse
- */
-OverlayPositionBuilder.ctorParameters = function () { return [
-    { type: ViewportRuler, },
-]; };
+
 /**
  * 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.
@@ -1037,15 +1069,15 @@ var OverlayContainer = (function () {
         document.body.appendChild(container);
         this._containerElement = container;
     };
+    OverlayContainer.decorators = [
+        { type: Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    OverlayContainer.ctorParameters = function () { return []; };
     return OverlayContainer;
 }());
-OverlayContainer.decorators = [
-    { type: Injectable },
-];
-/**
- * @nocollapse
- */
-OverlayContainer.ctorParameters = function () { return []; };
 /**
  * \@docs-private
  * @param {?} parentContainer
@@ -1063,13 +1095,15 @@ var OVERLAY_CONTAINER_PROVIDER = {
     deps: [[new Optional(), new SkipSelf(), OverlayContainer]],
     useFactory: OVERLAY_CONTAINER_PROVIDER_FACTORY
 };
+
 /**
  * Returns an error to be thrown when attempting to attach an already-attached scroll strategy.
  * @return {?}
  */
-function getMdScrollStrategyAlreadyAttachedError() {
+function getMatScrollStrategyAlreadyAttachedError() {
     return Error("Scroll strategy has already been attached.");
 }
+
 /**
  * Strategy that will close the overlay as soon as the user starts scrolling.
  */
@@ -1087,7 +1121,7 @@ var CloseScrollStrategy = (function () {
      */
     CloseScrollStrategy.prototype.attach = function (overlayRef) {
         if (this._overlayRef) {
-            throw getMdScrollStrategyAlreadyAttachedError();
+            throw getMatScrollStrategyAlreadyAttachedError();
         }
         this._overlayRef = overlayRef;
     };
@@ -1116,6 +1150,7 @@ var CloseScrollStrategy = (function () {
     };
     return CloseScrollStrategy;
 }());
+
 /**
  * Strategy that will prevent the user from scrolling while the overlay is visible.
  */
@@ -1178,6 +1213,7 @@ var BlockScrollStrategy = (function () {
     };
     return BlockScrollStrategy;
 }());
+
 /**
  * Strategy that will update the element position as the user is scrolling.
  */
@@ -1197,7 +1233,7 @@ var RepositionScrollStrategy = (function () {
      */
     RepositionScrollStrategy.prototype.attach = function (overlayRef) {
         if (this._overlayRef) {
-            throw getMdScrollStrategyAlreadyAttachedError();
+            throw getMatScrollStrategyAlreadyAttachedError();
         }
         this._overlayRef = overlayRef;
     };
@@ -1224,6 +1260,7 @@ var RepositionScrollStrategy = (function () {
     };
     return RepositionScrollStrategy;
 }());
+
 /**
  * Options for how an overlay will handle scrolling.
  *
@@ -1256,28 +1293,31 @@ var ScrollStrategyOptions = (function () {
          * @param config Configuration to be used inside the scroll strategy.
          * Allows debouncing the reposition calls.
          */
-        this.reposition = function (config) { return new RepositionScrollStrategy(_this._scrollDispatcher, config); };
+        this.reposition = function (config) {
+            return new RepositionScrollStrategy(_this._scrollDispatcher, config);
+        };
     }
+    ScrollStrategyOptions.decorators = [
+        { type: Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    ScrollStrategyOptions.ctorParameters = function () { return [
+        { type: ScrollDispatcher, },
+        { type: ViewportRuler, },
+    ]; };
     return ScrollStrategyOptions;
 }());
-ScrollStrategyOptions.decorators = [
-    { type: Injectable },
-];
-/**
- * @nocollapse
- */
-ScrollStrategyOptions.ctorParameters = function () { return [
-    { type: ScrollDispatcher, },
-    { type: ViewportRuler, },
-]; };
+
 /**
  * Next overlay unique ID.
  */
 var nextUniqueId = 0;
 /**
- * The default state for newly created overlays.
+ * The default config for newly created overlays.
  */
-var defaultState = new OverlayConfig();
+var defaultConfig = new OverlayConfig();
 /**
  * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be
  * used as a low-level building building block for other components. Dialogs, tooltips, menus,
@@ -1307,14 +1347,14 @@ var Overlay = (function () {
     }
     /**
      * Creates an overlay.
-     * @param {?=} state State to apply to the overlay.
+     * @param {?=} config Config to apply to the overlay.
      * @return {?} Reference to the created overlay.
      */
-    Overlay.prototype.create = function (state) {
-        if (state === void 0) { state = defaultState; }
+    Overlay.prototype.create = function (config) {
+        if (config === void 0) { config = defaultConfig; }
         var /** @type {?} */ pane = this._createPaneElement();
         var /** @type {?} */ portalHost = this._createPortalHost(pane);
-        return new OverlayRef(portalHost, pane, state, this._ngZone);
+        return new OverlayRef(portalHost, pane, config, this._ngZone);
     };
     /**
      * Returns a position builder that can be used, via fluent API,
@@ -1343,23 +1383,98 @@ var Overlay = (function () {
     Overlay.prototype._createPortalHost = function (pane) {
         return new DomPortalHost(pane, this._componentFactoryResolver, this._appRef, this._injector);
     };
+    Overlay.decorators = [
+        { type: Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    Overlay.ctorParameters = function () { return [
+        { type: ScrollStrategyOptions, },
+        { type: OverlayContainer, },
+        { type: ComponentFactoryResolver, },
+        { type: OverlayPositionBuilder, },
+        { type: ApplicationRef, },
+        { type: Injector, },
+        { type: NgZone, },
+    ]; };
     return Overlay;
 }());
-Overlay.decorators = [
-    { type: Injectable },
-];
+
 /**
- * @nocollapse
+ * The FullscreenOverlayContainer is the alternative to OverlayContainer
+ * that supports correct displaying of overlay elements in Fullscreen mode
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
+ * It should be provided in the root component that way:
+ * providers: [
+ *   {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
+ * ],
  */
-Overlay.ctorParameters = function () { return [
-    { type: ScrollStrategyOptions, },
-    { type: OverlayContainer, },
-    { type: ComponentFactoryResolver, },
-    { type: OverlayPositionBuilder, },
-    { type: ApplicationRef, },
-    { type: Injector, },
-    { type: NgZone, },
-]; };
+var FullscreenOverlayContainer = (function (_super) {
+    __extends(FullscreenOverlayContainer, _super);
+    function FullscreenOverlayContainer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @return {?}
+     */
+    FullscreenOverlayContainer.prototype._createContainer = function () {
+        var _this = this;
+        _super.prototype._createContainer.call(this);
+        this._adjustParentForFullscreenChange();
+        this._addFullscreenChangeListener(function () { return _this._adjustParentForFullscreenChange(); });
+    };
+    /**
+     * @return {?}
+     */
+    FullscreenOverlayContainer.prototype._adjustParentForFullscreenChange = function () {
+        if (!this._containerElement) {
+            return;
+        }
+        var /** @type {?} */ fullscreenElement = this.getFullscreenElement();
+        var /** @type {?} */ parent = fullscreenElement || document.body;
+        parent.appendChild(this._containerElement);
+    };
+    /**
+     * @param {?} fn
+     * @return {?}
+     */
+    FullscreenOverlayContainer.prototype._addFullscreenChangeListener = function (fn) {
+        if (document.fullscreenEnabled) {
+            document.addEventListener('fullscreenchange', fn);
+        }
+        else if (document.webkitFullscreenEnabled) {
+            document.addEventListener('webkitfullscreenchange', fn);
+        }
+        else if (((document)).mozFullScreenEnabled) {
+            document.addEventListener('mozfullscreenchange', fn);
+        }
+        else if (((document)).msFullscreenEnabled) {
+            document.addEventListener('MSFullscreenChange', fn);
+        }
+    };
+    /**
+     * When the page is put into fullscreen mode, a specific element is specified.
+     * Only that element and its children are visible when in fullscreen mode.
+     * @return {?}
+     */
+    FullscreenOverlayContainer.prototype.getFullscreenElement = function () {
+        return document.fullscreenElement ||
+            document.webkitFullscreenElement ||
+            ((document)).mozFullScreenElement ||
+            ((document)).msFullscreenElement ||
+            null;
+    };
+    FullscreenOverlayContainer.decorators = [
+        { type: Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    FullscreenOverlayContainer.ctorParameters = function () { return []; };
+    return FullscreenOverlayContainer;
+}(OverlayContainer));
+
 /**
  * Default set of positions for the overlay. Follows the behavior of a dropdown.
  */
@@ -1370,22 +1485,22 @@ var defaultPositionList = [
 /**
  * Injection token that determines the scroll handling while the connected overlay is open.
  */
-var MD_CONNECTED_OVERLAY_SCROLL_STRATEGY = new InjectionToken('md-connected-overlay-scroll-strategy');
+var MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY = new InjectionToken('mat-connected-overlay-scroll-strategy');
 /**
  * \@docs-private
  * @param {?} overlay
  * @return {?}
  */
-function MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
+function MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
     return function () { return overlay.scrollStrategies.reposition(); };
 }
 /**
  * \@docs-private
  */
-var MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
-    provide: MD_CONNECTED_OVERLAY_SCROLL_STRATEGY,
+var MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
+    provide: MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY,
     deps: [Overlay],
-    useFactory: MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
+    useFactory: MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
 };
 /**
  * Directive applied to an element to make it usable as an origin for an Overlay using a
@@ -1398,20 +1513,20 @@ var OverlayOrigin = (function () {
     function OverlayOrigin(elementRef) {
         this.elementRef = elementRef;
     }
+    OverlayOrigin.decorators = [
+        { type: Directive, args: [{
+                    selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
+                    exportAs: 'cdkOverlayOrigin',
+                },] },
+    ];
+    /**
+     * @nocollapse
+     */
+    OverlayOrigin.ctorParameters = function () { return [
+        { type: ElementRef, },
+    ]; };
     return OverlayOrigin;
 }());
-OverlayOrigin.decorators = [
-    { type: Directive, args: [{
-                selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
-                exportAs: 'cdkOverlayOrigin',
-            },] },
-];
-/**
- * @nocollapse
- */
-OverlayOrigin.ctorParameters = function () { return [
-    { type: ElementRef, },
-]; };
 /**
  * Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy.
  */
@@ -1795,7 +1910,7 @@ var ConnectedOverlayDirective = (function () {
             this._createOverlay();
         }
         this._position.withDirection(this.dir);
-        this._overlayRef.getState().direction = this.dir;
+        this._overlayRef.getConfig().direction = this.dir;
         this._initEscapeListener();
         if (!this._overlayRef.hasAttached()) {
             this._overlayRef.attach(this._templatePortal);
@@ -1843,154 +1958,84 @@ var ConnectedOverlayDirective = (function () {
             }
         });
     };
+    ConnectedOverlayDirective.decorators = [
+        { type: Directive, args: [{
+                    selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
+                    exportAs: 'cdkConnectedOverlay'
+                },] },
+    ];
+    /**
+     * @nocollapse
+     */
+    ConnectedOverlayDirective.ctorParameters = function () { return [
+        { type: Overlay, },
+        { type: Renderer2, },
+        { type: TemplateRef, },
+        { type: ViewContainerRef, },
+        { type: undefined, decorators: [{ type: Inject, args: [MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY,] },] },
+        { type: Directionality, decorators: [{ type: Optional },] },
+    ]; };
+    ConnectedOverlayDirective.propDecorators = {
+        'origin': [{ type: Input, args: ['cdkConnectedOverlayOrigin',] },],
+        'positions': [{ type: Input, args: ['cdkConnectedOverlayPositions',] },],
+        'offsetX': [{ type: Input, args: ['cdkConnectedOverlayOffsetX',] },],
+        'offsetY': [{ type: Input, args: ['cdkConnectedOverlayOffsetY',] },],
+        'width': [{ type: Input, args: ['cdkConnectedOverlayWidth',] },],
+        'height': [{ type: Input, args: ['cdkConnectedOverlayHeight',] },],
+        'minWidth': [{ type: Input, args: ['cdkConnectedOverlayMinWidth',] },],
+        'minHeight': [{ type: Input, args: ['cdkConnectedOverlayMinHeight',] },],
+        'backdropClass': [{ type: Input, args: ['cdkConnectedOverlayBackdropClass',] },],
+        'scrollStrategy': [{ type: Input, args: ['cdkConnectedOverlayScrollStrategy',] },],
+        'open': [{ type: Input, args: ['cdkConnectedOverlayOpen',] },],
+        'hasBackdrop': [{ type: Input, args: ['cdkConnectedOverlayHasBackdrop',] },],
+        '_deprecatedOrigin': [{ type: Input, args: ['origin',] },],
+        '_deprecatedPositions': [{ type: Input, args: ['positions',] },],
+        '_deprecatedOffsetX': [{ type: Input, args: ['offsetX',] },],
+        '_deprecatedOffsetY': [{ type: Input, args: ['offsetY',] },],
+        '_deprecatedWidth': [{ type: Input, args: ['width',] },],
+        '_deprecatedHeight': [{ type: Input, args: ['height',] },],
+        '_deprecatedMinWidth': [{ type: Input, args: ['minWidth',] },],
+        '_deprecatedMinHeight': [{ type: Input, args: ['minHeight',] },],
+        '_deprecatedBackdropClass': [{ type: Input, args: ['backdropClass',] },],
+        '_deprecatedScrollStrategy': [{ type: Input, args: ['scrollStrategy',] },],
+        '_deprecatedOpen': [{ type: Input, args: ['open',] },],
+        '_deprecatedHasBackdrop': [{ type: Input, args: ['hasBackdrop',] },],
+        'backdropClick': [{ type: Output },],
+        'positionChange': [{ type: Output },],
+        'attach': [{ type: Output },],
+        'detach': [{ type: Output },],
+    };
     return ConnectedOverlayDirective;
 }());
-ConnectedOverlayDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
-                exportAs: 'cdkConnectedOverlay'
-            },] },
-];
-/**
- * @nocollapse
- */
-ConnectedOverlayDirective.ctorParameters = function () { return [
-    { type: Overlay, },
-    { type: Renderer2, },
-    { type: TemplateRef, },
-    { type: ViewContainerRef, },
-    { type: undefined, decorators: [{ type: Inject, args: [MD_CONNECTED_OVERLAY_SCROLL_STRATEGY,] },] },
-    { type: Directionality, decorators: [{ type: Optional },] },
-]; };
-ConnectedOverlayDirective.propDecorators = {
-    'origin': [{ type: Input, args: ['cdkConnectedOverlayOrigin',] },],
-    'positions': [{ type: Input, args: ['cdkConnectedOverlayPositions',] },],
-    'offsetX': [{ type: Input, args: ['cdkConnectedOverlayOffsetX',] },],
-    'offsetY': [{ type: Input, args: ['cdkConnectedOverlayOffsetY',] },],
-    'width': [{ type: Input, args: ['cdkConnectedOverlayWidth',] },],
-    'height': [{ type: Input, args: ['cdkConnectedOverlayHeight',] },],
-    'minWidth': [{ type: Input, args: ['cdkConnectedOverlayMinWidth',] },],
-    'minHeight': [{ type: Input, args: ['cdkConnectedOverlayMinHeight',] },],
-    'backdropClass': [{ type: Input, args: ['cdkConnectedOverlayBackdropClass',] },],
-    'scrollStrategy': [{ type: Input, args: ['cdkConnectedOverlayScrollStrategy',] },],
-    'open': [{ type: Input, args: ['cdkConnectedOverlayOpen',] },],
-    'hasBackdrop': [{ type: Input, args: ['cdkConnectedOverlayHasBackdrop',] },],
-    '_deprecatedOrigin': [{ type: Input, args: ['origin',] },],
-    '_deprecatedPositions': [{ type: Input, args: ['positions',] },],
-    '_deprecatedOffsetX': [{ type: Input, args: ['offsetX',] },],
-    '_deprecatedOffsetY': [{ type: Input, args: ['offsetY',] },],
-    '_deprecatedWidth': [{ type: Input, args: ['width',] },],
-    '_deprecatedHeight': [{ type: Input, args: ['height',] },],
-    '_deprecatedMinWidth': [{ type: Input, args: ['minWidth',] },],
-    '_deprecatedMinHeight': [{ type: Input, args: ['minHeight',] },],
-    '_deprecatedBackdropClass': [{ type: Input, args: ['backdropClass',] },],
-    '_deprecatedScrollStrategy': [{ type: Input, args: ['scrollStrategy',] },],
-    '_deprecatedOpen': [{ type: Input, args: ['open',] },],
-    '_deprecatedHasBackdrop': [{ type: Input, args: ['hasBackdrop',] },],
-    'backdropClick': [{ type: Output },],
-    'positionChange': [{ type: Output },],
-    'attach': [{ type: Output },],
-    'detach': [{ type: Output },],
-};
-/**
- * The FullscreenOverlayContainer is the alternative to OverlayContainer
- * that supports correct displaying of overlay elements in Fullscreen mode
- * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
- * It should be provided in the root component that way:
- * providers: [
- *   {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
- * ],
- */
-var FullscreenOverlayContainer = (function (_super) {
-    tslib_1.__extends(FullscreenOverlayContainer, _super);
-    function FullscreenOverlayContainer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /**
-     * @return {?}
-     */
-    FullscreenOverlayContainer.prototype._createContainer = function () {
-        var _this = this;
-        _super.prototype._createContainer.call(this);
-        this._adjustParentForFullscreenChange();
-        this._addFullscreenChangeListener(function () { return _this._adjustParentForFullscreenChange(); });
-    };
-    /**
-     * @return {?}
-     */
-    FullscreenOverlayContainer.prototype._adjustParentForFullscreenChange = function () {
-        if (!this._containerElement) {
-            return;
-        }
-        var /** @type {?} */ fullscreenElement = this.getFullscreenElement();
-        var /** @type {?} */ parent = fullscreenElement || document.body;
-        parent.appendChild(this._containerElement);
-    };
-    /**
-     * @param {?} fn
-     * @return {?}
-     */
-    FullscreenOverlayContainer.prototype._addFullscreenChangeListener = function (fn) {
-        if (document.fullscreenEnabled) {
-            document.addEventListener('fullscreenchange', fn);
-        }
-        else if (document.webkitFullscreenEnabled) {
-            document.addEventListener('webkitfullscreenchange', fn);
-        }
-        else if (((document)).mozFullScreenEnabled) {
-            document.addEventListener('mozfullscreenchange', fn);
-        }
-        else if (((document)).msFullscreenEnabled) {
-            document.addEventListener('MSFullscreenChange', fn);
-        }
-    };
-    /**
-     * When the page is put into fullscreen mode, a specific element is specified.
-     * Only that element and its children are visible when in fullscreen mode.
-     * @return {?}
-     */
-    FullscreenOverlayContainer.prototype.getFullscreenElement = function () {
-        return document.fullscreenElement ||
-            document.webkitFullscreenElement ||
-            ((document)).mozFullScreenElement ||
-            ((document)).msFullscreenElement ||
-            null;
-    };
-    return FullscreenOverlayContainer;
-}(OverlayContainer));
-FullscreenOverlayContainer.decorators = [
-    { type: Injectable },
-];
-/**
- * @nocollapse
- */
-FullscreenOverlayContainer.ctorParameters = function () { return []; };
+
 var OVERLAY_PROVIDERS = [
     Overlay,
     OverlayPositionBuilder,
     VIEWPORT_RULER_PROVIDER,
     OVERLAY_CONTAINER_PROVIDER,
-    MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
+    MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
 ];
 var OverlayModule = (function () {
     function OverlayModule() {
     }
+    OverlayModule.decorators = [
+        { type: NgModule, args: [{
+                    imports: [PortalModule, ScrollDispatchModule],
+                    exports: [ConnectedOverlayDirective, OverlayOrigin, ScrollDispatchModule],
+                    declarations: [ConnectedOverlayDirective, OverlayOrigin],
+                    providers: [OVERLAY_PROVIDERS, ScrollStrategyOptions],
+                },] },
+    ];
+    /**
+     * @nocollapse
+     */
+    OverlayModule.ctorParameters = function () { return []; };
     return OverlayModule;
 }());
-OverlayModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [PortalModule, ScrollDispatchModule],
-                exports: [ConnectedOverlayDirective, OverlayOrigin, ScrollDispatchModule],
-                declarations: [ConnectedOverlayDirective, OverlayOrigin],
-                providers: [OVERLAY_PROVIDERS, ScrollStrategyOptions],
-            },] },
-];
-/**
- * @nocollapse
- */
-OverlayModule.ctorParameters = function () { return []; };
+
 /**
  * Generated bundle index. Do not edit.
  */
-export { OVERLAY_PROVIDERS, OverlayModule, Overlay, OverlayContainer, FullscreenOverlayContainer, OverlayRef, ConnectedOverlayDirective, OverlayOrigin, ViewportRuler, GlobalPositionStrategy, ConnectedPositionStrategy, VIEWPORT_RULER_PROVIDER, OverlayConfig, ConnectionPositionPair, ScrollingVisibility, ConnectedOverlayPositionChange, Scrollable, ScrollDispatcher, ScrollStrategyOptions, RepositionScrollStrategy, CloseScrollStrategy, NoopScrollStrategy, BlockScrollStrategy, OVERLAY_CONTAINER_PROVIDER as ɵb, OVERLAY_CONTAINER_PROVIDER_FACTORY as ɵa, MD_CONNECTED_OVERLAY_SCROLL_STRATEGY as ɵc, MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER as ɵe, MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY as ɵd, OverlayPositionBuilder as ɵf };
+
+export { Overlay, OverlayContainer, FullscreenOverlayContainer, OverlayRef, ConnectedOverlayDirective, OverlayOrigin, ViewportRuler, GlobalPositionStrategy, ConnectedPositionStrategy, VIEWPORT_RULER_PROVIDER, OverlayConfig, ConnectionPositionPair, ScrollingVisibility, ConnectedOverlayPositionChange, Scrollable, ScrollDispatcher, ScrollStrategyOptions, RepositionScrollStrategy, CloseScrollStrategy, NoopScrollStrategy, BlockScrollStrategy, OVERLAY_PROVIDERS, OverlayModule, OVERLAY_CONTAINER_PROVIDER as ɵb, OVERLAY_CONTAINER_PROVIDER_FACTORY as ɵa, MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY as ɵc, MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER as ɵe, MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY as ɵd, OverlayPositionBuilder as ɵf };
 //# sourceMappingURL=overlay.es5.js.map