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

package/bundles/cdk-overlay.umd.js

@@ -6,10 +6,10 @@
  * 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('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes'), require('rxjs/Subscription')) :
-	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/cdk/portal', 'rxjs/Subject', '@angular/cdk/scrolling', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/keycodes', 'rxjs/Subscription'], 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.ng.cdk.bidi,global.ng.cdk.coercion,global.ng.cdk.keycodes,global.Rx));
-}(this, (function (exports,_angular_core,_angular_cdk_portal,rxjs_Subject,_angular_cdk_scrolling,_angular_cdk_bidi,_angular_cdk_coercion,_angular_cdk_keycodes,rxjs_Subscription) { 'use strict';
+	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';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -57,14 +57,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.
@@ -86,12 +87,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.
@@ -100,20 +102,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 rxjs_Subject.Subject();
         this._attachments = new rxjs_Subject.Subject();
         this._detachments = new rxjs_Subject.Subject();
-        if (_state.scrollStrategy) {
-            _state.scrollStrategy.attach(this);
+        if (_config.scrollStrategy) {
+            _config.scrollStrategy.attach(this);
         }
     }
     Object.defineProperty(OverlayRef.prototype, "overlayElement", {
@@ -135,29 +137,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.
@@ -166,7 +168,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();
@@ -174,8 +176,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.
@@ -187,11 +192,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();
@@ -229,19 +234,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();
         }
     };
     /**
@@ -249,30 +254,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);
         }
     };
     /**
@@ -291,8 +296,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,
@@ -342,8 +347,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.
@@ -366,6 +371,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.
@@ -423,15 +429,16 @@ var ConnectedOverlayPositionChange = (function () {
         this.connectionPair = connectionPair;
         this.scrollableViewProperties = scrollableViewProperties;
     }
+    /**
+     * @nocollapse
+     */
+    ConnectedOverlayPositionChange.ctorParameters = function () { return [
+        { type: ConnectionPositionPair, },
+        { type: ScrollingVisibility, decorators: [{ type: _angular_core.Optional },] },
+    ]; };
     return ConnectedOverlayPositionChange;
 }());
-/**
- * @nocollapse
- */
-ConnectedOverlayPositionChange.ctorParameters = function () { return [
-    { type: ConnectionPositionPair, },
-    { type: ScrollingVisibility, decorators: [{ type: _angular_core.Optional },] },
-]; };
+
 /**
  * Gets whether an element is scrolled outside of view by any of its parent scrolling containers.
  * \@docs-private
@@ -464,6 +471,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
@@ -481,6 +489,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
@@ -494,6 +505,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 = rxjs_Subscription.Subscription.EMPTY;
         /**
          * Ordered list of preferred positions, from most to least desirable.
          */
@@ -540,14 +555,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.
@@ -816,6 +843,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
@@ -984,6 +1012,7 @@ var GlobalPositionStrategy = (function () {
     };
     return GlobalPositionStrategy;
 }());
+
 /**
  * Builder for overlay position strategy.
  */
@@ -1011,17 +1040,18 @@ var OverlayPositionBuilder = (function () {
     OverlayPositionBuilder.prototype.connectedTo = function (elementRef, originPos, overlayPos) {
         return new ConnectedPositionStrategy(originPos, overlayPos, elementRef, this._viewportRuler);
     };
+    OverlayPositionBuilder.decorators = [
+        { type: _angular_core.Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    OverlayPositionBuilder.ctorParameters = function () { return [
+        { type: _angular_cdk_scrolling.ViewportRuler, },
+    ]; };
     return OverlayPositionBuilder;
 }());
-OverlayPositionBuilder.decorators = [
-    { type: _angular_core.Injectable },
-];
-/**
- * @nocollapse
- */
-OverlayPositionBuilder.ctorParameters = function () { return [
-    { type: _angular_cdk_scrolling.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.
@@ -1060,15 +1090,15 @@ var OverlayContainer = (function () {
         document.body.appendChild(container);
         this._containerElement = container;
     };
+    OverlayContainer.decorators = [
+        { type: _angular_core.Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    OverlayContainer.ctorParameters = function () { return []; };
     return OverlayContainer;
 }());
-OverlayContainer.decorators = [
-    { type: _angular_core.Injectable },
-];
-/**
- * @nocollapse
- */
-OverlayContainer.ctorParameters = function () { return []; };
 /**
  * \@docs-private
  * @param {?} parentContainer
@@ -1086,13 +1116,15 @@ var OVERLAY_CONTAINER_PROVIDER = {
     deps: [[new _angular_core.Optional(), new _angular_core.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.
  */
@@ -1110,7 +1142,7 @@ var CloseScrollStrategy = (function () {
      */
     CloseScrollStrategy.prototype.attach = function (overlayRef) {
         if (this._overlayRef) {
-            throw getMdScrollStrategyAlreadyAttachedError();
+            throw getMatScrollStrategyAlreadyAttachedError();
         }
         this._overlayRef = overlayRef;
     };
@@ -1139,6 +1171,7 @@ var CloseScrollStrategy = (function () {
     };
     return CloseScrollStrategy;
 }());
+
 /**
  * Strategy that will prevent the user from scrolling while the overlay is visible.
  */
@@ -1201,6 +1234,7 @@ var BlockScrollStrategy = (function () {
     };
     return BlockScrollStrategy;
 }());
+
 /**
  * Strategy that will update the element position as the user is scrolling.
  */
@@ -1220,7 +1254,7 @@ var RepositionScrollStrategy = (function () {
      */
     RepositionScrollStrategy.prototype.attach = function (overlayRef) {
         if (this._overlayRef) {
-            throw getMdScrollStrategyAlreadyAttachedError();
+            throw getMatScrollStrategyAlreadyAttachedError();
         }
         this._overlayRef = overlayRef;
     };
@@ -1247,6 +1281,7 @@ var RepositionScrollStrategy = (function () {
     };
     return RepositionScrollStrategy;
 }());
+
 /**
  * Options for how an overlay will handle scrolling.
  *
@@ -1279,28 +1314,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: _angular_core.Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    ScrollStrategyOptions.ctorParameters = function () { return [
+        { type: _angular_cdk_scrolling.ScrollDispatcher, },
+        { type: _angular_cdk_scrolling.ViewportRuler, },
+    ]; };
     return ScrollStrategyOptions;
 }());
-ScrollStrategyOptions.decorators = [
-    { type: _angular_core.Injectable },
-];
-/**
- * @nocollapse
- */
-ScrollStrategyOptions.ctorParameters = function () { return [
-    { type: _angular_cdk_scrolling.ScrollDispatcher, },
-    { type: _angular_cdk_scrolling.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,
@@ -1330,14 +1368,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,
@@ -1366,23 +1404,98 @@ var Overlay = (function () {
     Overlay.prototype._createPortalHost = function (pane) {
         return new _angular_cdk_portal.DomPortalHost(pane, this._componentFactoryResolver, this._appRef, this._injector);
     };
+    Overlay.decorators = [
+        { type: _angular_core.Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    Overlay.ctorParameters = function () { return [
+        { type: ScrollStrategyOptions, },
+        { type: OverlayContainer, },
+        { type: _angular_core.ComponentFactoryResolver, },
+        { type: OverlayPositionBuilder, },
+        { type: _angular_core.ApplicationRef, },
+        { type: _angular_core.Injector, },
+        { type: _angular_core.NgZone, },
+    ]; };
     return Overlay;
 }());
-Overlay.decorators = [
-    { type: _angular_core.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: _angular_core.ComponentFactoryResolver, },
-    { type: OverlayPositionBuilder, },
-    { type: _angular_core.ApplicationRef, },
-    { type: _angular_core.Injector, },
-    { type: _angular_core.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: _angular_core.Injectable },
+    ];
+    /**
+     * @nocollapse
+     */
+    FullscreenOverlayContainer.ctorParameters = function () { return []; };
+    return FullscreenOverlayContainer;
+}(OverlayContainer));
+
 /**
  * Default set of positions for the overlay. Follows the behavior of a dropdown.
  */
@@ -1393,22 +1506,22 @@ var defaultPositionList = [
 /**
  * Injection token that determines the scroll handling while the connected overlay is open.
  */
-var MD_CONNECTED_OVERLAY_SCROLL_STRATEGY = new _angular_core.InjectionToken('md-connected-overlay-scroll-strategy');
+var MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY = new _angular_core.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
@@ -1421,20 +1534,20 @@ var OverlayOrigin = (function () {
     function OverlayOrigin(elementRef) {
         this.elementRef = elementRef;
     }
+    OverlayOrigin.decorators = [
+        { type: _angular_core.Directive, args: [{
+                    selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
+                    exportAs: 'cdkOverlayOrigin',
+                },] },
+    ];
+    /**
+     * @nocollapse
+     */
+    OverlayOrigin.ctorParameters = function () { return [
+        { type: _angular_core.ElementRef, },
+    ]; };
     return OverlayOrigin;
 }());
-OverlayOrigin.decorators = [
-    { type: _angular_core.Directive, args: [{
-                selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
-                exportAs: 'cdkOverlayOrigin',
-            },] },
-];
-/**
- * @nocollapse
- */
-OverlayOrigin.ctorParameters = function () { return [
-    { type: _angular_core.ElementRef, },
-]; };
 /**
  * Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy.
  */
@@ -1818,7 +1931,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);
@@ -1866,155 +1979,81 @@ var ConnectedOverlayDirective = (function () {
             }
         });
     };
+    ConnectedOverlayDirective.decorators = [
+        { type: _angular_core.Directive, args: [{
+                    selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
+                    exportAs: 'cdkConnectedOverlay'
+                },] },
+    ];
+    /**
+     * @nocollapse
+     */
+    ConnectedOverlayDirective.ctorParameters = function () { return [
+        { type: Overlay, },
+        { type: _angular_core.Renderer2, },
+        { type: _angular_core.TemplateRef, },
+        { type: _angular_core.ViewContainerRef, },
+        { type: undefined, decorators: [{ type: _angular_core.Inject, args: [MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY,] },] },
+        { type: _angular_cdk_bidi.Directionality, decorators: [{ type: _angular_core.Optional },] },
+    ]; };
+    ConnectedOverlayDirective.propDecorators = {
+        'origin': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayOrigin',] },],
+        'positions': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayPositions',] },],
+        'offsetX': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayOffsetX',] },],
+        'offsetY': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayOffsetY',] },],
+        'width': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayWidth',] },],
+        'height': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayHeight',] },],
+        'minWidth': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayMinWidth',] },],
+        'minHeight': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayMinHeight',] },],
+        'backdropClass': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayBackdropClass',] },],
+        'scrollStrategy': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayScrollStrategy',] },],
+        'open': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayOpen',] },],
+        'hasBackdrop': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayHasBackdrop',] },],
+        '_deprecatedOrigin': [{ type: _angular_core.Input, args: ['origin',] },],
+        '_deprecatedPositions': [{ type: _angular_core.Input, args: ['positions',] },],
+        '_deprecatedOffsetX': [{ type: _angular_core.Input, args: ['offsetX',] },],
+        '_deprecatedOffsetY': [{ type: _angular_core.Input, args: ['offsetY',] },],
+        '_deprecatedWidth': [{ type: _angular_core.Input, args: ['width',] },],
+        '_deprecatedHeight': [{ type: _angular_core.Input, args: ['height',] },],
+        '_deprecatedMinWidth': [{ type: _angular_core.Input, args: ['minWidth',] },],
+        '_deprecatedMinHeight': [{ type: _angular_core.Input, args: ['minHeight',] },],
+        '_deprecatedBackdropClass': [{ type: _angular_core.Input, args: ['backdropClass',] },],
+        '_deprecatedScrollStrategy': [{ type: _angular_core.Input, args: ['scrollStrategy',] },],
+        '_deprecatedOpen': [{ type: _angular_core.Input, args: ['open',] },],
+        '_deprecatedHasBackdrop': [{ type: _angular_core.Input, args: ['hasBackdrop',] },],
+        'backdropClick': [{ type: _angular_core.Output },],
+        'positionChange': [{ type: _angular_core.Output },],
+        'attach': [{ type: _angular_core.Output },],
+        'detach': [{ type: _angular_core.Output },],
+    };
     return ConnectedOverlayDirective;
 }());
-ConnectedOverlayDirective.decorators = [
-    { type: _angular_core.Directive, args: [{
-                selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
-                exportAs: 'cdkConnectedOverlay'
-            },] },
-];
-/**
- * @nocollapse
- */
-ConnectedOverlayDirective.ctorParameters = function () { return [
-    { type: Overlay, },
-    { type: _angular_core.Renderer2, },
-    { type: _angular_core.TemplateRef, },
-    { type: _angular_core.ViewContainerRef, },
-    { type: undefined, decorators: [{ type: _angular_core.Inject, args: [MD_CONNECTED_OVERLAY_SCROLL_STRATEGY,] },] },
-    { type: _angular_cdk_bidi.Directionality, decorators: [{ type: _angular_core.Optional },] },
-]; };
-ConnectedOverlayDirective.propDecorators = {
-    'origin': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayOrigin',] },],
-    'positions': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayPositions',] },],
-    'offsetX': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayOffsetX',] },],
-    'offsetY': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayOffsetY',] },],
-    'width': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayWidth',] },],
-    'height': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayHeight',] },],
-    'minWidth': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayMinWidth',] },],
-    'minHeight': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayMinHeight',] },],
-    'backdropClass': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayBackdropClass',] },],
-    'scrollStrategy': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayScrollStrategy',] },],
-    'open': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayOpen',] },],
-    'hasBackdrop': [{ type: _angular_core.Input, args: ['cdkConnectedOverlayHasBackdrop',] },],
-    '_deprecatedOrigin': [{ type: _angular_core.Input, args: ['origin',] },],
-    '_deprecatedPositions': [{ type: _angular_core.Input, args: ['positions',] },],
-    '_deprecatedOffsetX': [{ type: _angular_core.Input, args: ['offsetX',] },],
-    '_deprecatedOffsetY': [{ type: _angular_core.Input, args: ['offsetY',] },],
-    '_deprecatedWidth': [{ type: _angular_core.Input, args: ['width',] },],
-    '_deprecatedHeight': [{ type: _angular_core.Input, args: ['height',] },],
-    '_deprecatedMinWidth': [{ type: _angular_core.Input, args: ['minWidth',] },],
-    '_deprecatedMinHeight': [{ type: _angular_core.Input, args: ['minHeight',] },],
-    '_deprecatedBackdropClass': [{ type: _angular_core.Input, args: ['backdropClass',] },],
-    '_deprecatedScrollStrategy': [{ type: _angular_core.Input, args: ['scrollStrategy',] },],
-    '_deprecatedOpen': [{ type: _angular_core.Input, args: ['open',] },],
-    '_deprecatedHasBackdrop': [{ type: _angular_core.Input, args: ['hasBackdrop',] },],
-    'backdropClick': [{ type: _angular_core.Output },],
-    'positionChange': [{ type: _angular_core.Output },],
-    'attach': [{ type: _angular_core.Output },],
-    'detach': [{ type: _angular_core.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) {
-    __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: _angular_core.Injectable },
-];
-/**
- * @nocollapse
- */
-FullscreenOverlayContainer.ctorParameters = function () { return []; };
+
 var OVERLAY_PROVIDERS = [
     Overlay,
     OverlayPositionBuilder,
     _angular_cdk_scrolling.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: _angular_core.NgModule, args: [{
+                    imports: [_angular_cdk_portal.PortalModule, _angular_cdk_scrolling.ScrollDispatchModule],
+                    exports: [ConnectedOverlayDirective, OverlayOrigin, _angular_cdk_scrolling.ScrollDispatchModule],
+                    declarations: [ConnectedOverlayDirective, OverlayOrigin],
+                    providers: [OVERLAY_PROVIDERS, ScrollStrategyOptions],
+                },] },
+    ];
+    /**
+     * @nocollapse
+     */
+    OverlayModule.ctorParameters = function () { return []; };
     return OverlayModule;
 }());
-OverlayModule.decorators = [
-    { type: _angular_core.NgModule, args: [{
-                imports: [_angular_cdk_portal.PortalModule, _angular_cdk_scrolling.ScrollDispatchModule],
-                exports: [ConnectedOverlayDirective, OverlayOrigin, _angular_cdk_scrolling.ScrollDispatchModule],
-                declarations: [ConnectedOverlayDirective, OverlayOrigin],
-                providers: [OVERLAY_PROVIDERS, ScrollStrategyOptions],
-            },] },
-];
-/**
- * @nocollapse
- */
-OverlayModule.ctorParameters = function () { return []; };
 
-exports.OVERLAY_PROVIDERS = OVERLAY_PROVIDERS;
-exports.OverlayModule = OverlayModule;
 exports.Overlay = Overlay;
 exports.OverlayContainer = OverlayContainer;
 exports.FullscreenOverlayContainer = FullscreenOverlayContainer;
@@ -2036,11 +2075,13 @@ exports.RepositionScrollStrategy = RepositionScrollStrategy;
 exports.CloseScrollStrategy = CloseScrollStrategy;
 exports.NoopScrollStrategy = NoopScrollStrategy;
 exports.BlockScrollStrategy = BlockScrollStrategy;
+exports.OVERLAY_PROVIDERS = OVERLAY_PROVIDERS;
+exports.OverlayModule = OverlayModule;
 exports.ɵb = OVERLAY_CONTAINER_PROVIDER;
 exports.ɵa = OVERLAY_CONTAINER_PROVIDER_FACTORY;
-exports.ɵc = MD_CONNECTED_OVERLAY_SCROLL_STRATEGY;
-exports.ɵe = MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER;
-exports.ɵd = MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY;
+exports.ɵc = MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY;
+exports.ɵe = MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER;
+exports.ɵd = MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY;
 exports.ɵf = OverlayPositionBuilder;
 
 Object.defineProperty(exports, '__esModule', { value: true });