@angular/material 8.0.0-beta.2 → 8.0.0

package/bundles/material-sidenav.umd.js

@@ -42,7 +42,7 @@ function __extends(d, b) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Animations used by the Material drawers.
@@ -74,7 +74,7 @@ var matDrawerAnimations = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Throws an exception when two MatDrawer are matching the same position.
@@ -116,9 +116,12 @@ var MatDrawerContent = /** @class */ (function (_super) {
      */
     function () {
         var _this = this;
-        this._container._contentMarginChanges.subscribe(function () {
+        this._container._contentMarginChanges.subscribe((/**
+         * @return {?}
+         */
+        function () {
             _this._changeDetectorRef.markForCheck();
-        });
+        }));
     };
     MatDrawerContent.decorators = [
         { type: core.Component, args: [{selector: 'mat-drawer-content',
@@ -135,7 +138,10 @@ var MatDrawerContent = /** @class */ (function (_super) {
     /** @nocollapse */
     MatDrawerContent.ctorParameters = function () { return [
         { type: core.ChangeDetectorRef },
-        { type: MatDrawerContainer, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatDrawerContainer; }),] }] },
+        { type: MatDrawerContainer, decorators: [{ type: core.Inject, args: [core.forwardRef((/**
+                         * @return {?}
+                         */
+                        function () { return MatDrawerContainer; })),] }] },
         { type: core.ElementRef },
         { type: scrolling.ScrollDispatcher },
         { type: core.NgZone }
@@ -174,6 +180,10 @@ var MatDrawer = /** @class */ (function () {
         /**
          * Current state of the sidenav animation.
          */
+        // @HostBinding is used in the class as it is expected to be extended.  Since @Component decorator
+        // metadata is not inherited by child classes, instead the host binding data is defined in a way
+        // that can be inherited.
+        // tslint:disable:no-host-decorator-in-concrete
         this._animationState = 'void';
         /**
          * Event emitted when the drawer open state is changed.
@@ -196,7 +206,11 @@ var MatDrawer = /** @class */ (function () {
          */
         this._modeChanged = new rxjs.Subject();
         this._opened = false;
-        this.openedChange.subscribe(function (opened) {
+        this.openedChange.subscribe((/**
+         * @param {?} opened
+         * @return {?}
+         */
+        function (opened) {
             if (opened) {
                 if (_this._doc) {
                     _this._elementFocusedBeforeDrawerWasOpened = (/** @type {?} */ (_this._doc.activeElement));
@@ -208,29 +222,52 @@ var MatDrawer = /** @class */ (function () {
             else {
                 _this._restoreFocus();
             }
-        });
+        }));
         /**
          * Listen to `keydown` events outside the zone so that change detection is not run every
          * time a key is pressed. Instead we re-enter the zone only if the `ESC` key is pressed
          * and we don't have close disabled.
          */
-        this._ngZone.runOutsideAngular(function () {
-            ((/** @type {?} */ (rxjs.fromEvent(_this._elementRef.nativeElement, 'keydown')))).pipe(operators.filter(function (event) { return event.keyCode === keycodes.ESCAPE && !_this.disableClose; }), operators.takeUntil(_this._destroyed)).subscribe(function (event) { return _this._ngZone.run(function () {
+        this._ngZone.runOutsideAngular((/**
+         * @return {?}
+         */
+        function () {
+            ((/** @type {?} */ (rxjs.fromEvent(_this._elementRef.nativeElement, 'keydown')))).pipe(operators.filter((/**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) { return event.keyCode === keycodes.ESCAPE && !_this.disableClose; })), operators.takeUntil(_this._destroyed)).subscribe((/**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) { return _this._ngZone.run((/**
+             * @return {?}
+             */
+            function () {
                 _this.close();
                 event.stopPropagation();
-            }); });
-        });
+            })); }));
+        }));
         // We need a Subject with distinctUntilChanged, because the `done` event
         // fires twice on some browsers. See https://github.com/angular/angular/issues/24084
-        this._animationEnd.pipe(operators.distinctUntilChanged(function (x, y) {
+        this._animationEnd.pipe(operators.distinctUntilChanged((/**
+         * @param {?} x
+         * @param {?} y
+         * @return {?}
+         */
+        function (x, y) {
             return x.fromState === y.fromState && x.toState === y.toState;
-        })).subscribe(function (event) {
+        }))).subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             var fromState = event.fromState, toState = event.toState;
             if ((toState.indexOf('open') === 0 && fromState === 'void') ||
                 (toState === 'void' && fromState.indexOf('open') === 0)) {
                 _this.openedChange.emit(_this._opened);
             }
-        });
+        }));
     }
     Object.defineProperty(MatDrawer.prototype, "position", {
         /** The side that the drawer is attached to. */
@@ -309,7 +346,14 @@ var MatDrawer = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return this.openedChange.pipe(operators.filter(function (o) { return o; }), operators.map(function () { }));
+            return this.openedChange.pipe(operators.filter((/**
+             * @param {?} o
+             * @return {?}
+             */
+            function (o) { return o; })), operators.map((/**
+             * @return {?}
+             */
+            function () { })));
         },
         enumerable: true,
         configurable: true
@@ -321,7 +365,14 @@ var MatDrawer = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return this._animationStarted.pipe(operators.filter(function (e) { return e.fromState !== e.toState && e.toState.indexOf('open') === 0; }), operators.map(function () { }));
+            return this._animationStarted.pipe(operators.filter((/**
+             * @param {?} e
+             * @return {?}
+             */
+            function (e) { return e.fromState !== e.toState && e.toState.indexOf('open') === 0; })), operators.map((/**
+             * @return {?}
+             */
+            function () { })));
         },
         enumerable: true,
         configurable: true
@@ -333,7 +384,14 @@ var MatDrawer = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return this.openedChange.pipe(operators.filter(function (o) { return !o; }), operators.map(function () { }));
+            return this.openedChange.pipe(operators.filter((/**
+             * @param {?} o
+             * @return {?}
+             */
+            function (o) { return !o; })), operators.map((/**
+             * @return {?}
+             */
+            function () { })));
         },
         enumerable: true,
         configurable: true
@@ -345,7 +403,14 @@ var MatDrawer = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return this._animationStarted.pipe(operators.filter(function (e) { return e.fromState !== e.toState && e.toState === 'void'; }), operators.map(function () { }));
+            return this._animationStarted.pipe(operators.filter((/**
+             * @param {?} e
+             * @return {?}
+             */
+            function (e) { return e.fromState !== e.toState && e.toState === 'void'; })), operators.map((/**
+             * @return {?}
+             */
+            function () { })));
         },
         enumerable: true,
         configurable: true
@@ -377,13 +442,17 @@ var MatDrawer = /** @class */ (function () {
         if (!this.autoFocus) {
             return;
         }
-        this._focusTrap.focusInitialElementWhenReady().then(function (hasMovedFocus) {
+        this._focusTrap.focusInitialElementWhenReady().then((/**
+         * @param {?} hasMovedFocus
+         * @return {?}
+         */
+        function (hasMovedFocus) {
             // If there were no focusable elements, focus the sidenav itself so the keyboard navigation
             // still works. We need to check that `focus` is a function due to Universal.
             if (!hasMovedFocus && typeof _this._elementRef.nativeElement.focus === 'function') {
                 _this._elementRef.nativeElement.focus();
             }
-        });
+        }));
     };
     /**
      * If focus is currently inside the drawer, restores it to where it was before the drawer
@@ -546,9 +615,17 @@ var MatDrawer = /** @class */ (function () {
         if (this._focusTrap) {
             this._focusTrap.enabled = this._isFocusTrapEnabled;
         }
-        return new Promise(function (resolve) {
-            _this.openedChange.pipe(operators.take(1)).subscribe(function (open) { return resolve(open ? 'open' : 'close'); });
-        });
+        return new Promise((/**
+         * @param {?} resolve
+         * @return {?}
+         */
+        function (resolve) {
+            _this.openedChange.pipe(operators.take(1)).subscribe((/**
+             * @param {?} open
+             * @return {?}
+             */
+            function (open) { return resolve(open ? 'open' : 'close'); }));
+        }));
     };
     Object.defineProperty(MatDrawer.prototype, "_width", {
         get: /**
@@ -560,6 +637,60 @@ var MatDrawer = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+    // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+    // ViewEngine they're overwritte.
+    // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+    // tslint:disable-next-line:no-host-decorator-in-concrete
+    // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+    // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+    // ViewEngine they're overwritte.
+    // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+    // tslint:disable-next-line:no-host-decorator-in-concrete
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    MatDrawer.prototype._animationStartListener = 
+    // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+    // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+    // ViewEngine they're overwritte.
+    // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+    // tslint:disable-next-line:no-host-decorator-in-concrete
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        this._animationStarted.next(event);
+    };
+    // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+    // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+    // ViewEngine they're overwritte.
+    // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+    // tslint:disable-next-line:no-host-decorator-in-concrete
+    // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+    // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+    // ViewEngine they're overwritte.
+    // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+    // tslint:disable-next-line:no-host-decorator-in-concrete
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    MatDrawer.prototype._animationDoneListener = 
+    // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+    // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+    // ViewEngine they're overwritte.
+    // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+    // tslint:disable-next-line:no-host-decorator-in-concrete
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        this._animationEnd.next(event);
+    };
     MatDrawer.decorators = [
         { type: core.Component, args: [{selector: 'mat-drawer',
                     exportAs: 'matDrawer',
@@ -567,9 +698,6 @@ var MatDrawer = /** @class */ (function () {
                     animations: [matDrawerAnimations.transformDrawer],
                     host: {
                         'class': 'mat-drawer',
-                        '[@transform]': '_animationState',
-                        '(@transform.start)': '_animationStarted.next($event)',
-                        '(@transform.done)': '_animationEnd.next($event)',
                         // must prevent the browser from aligning text based on value
                         '[attr.align]': 'null',
                         '[class.mat-drawer-end]': 'position === "end"',
@@ -596,13 +724,16 @@ var MatDrawer = /** @class */ (function () {
         mode: [{ type: core.Input }],
         disableClose: [{ type: core.Input }],
         autoFocus: [{ type: core.Input }],
+        _animationState: [{ type: core.HostBinding, args: ['@transform',] }],
         openedChange: [{ type: core.Output }],
         _openedStream: [{ type: core.Output, args: ['opened',] }],
         openedStart: [{ type: core.Output }],
         _closedStream: [{ type: core.Output, args: ['closed',] }],
         closedStart: [{ type: core.Output }],
         onPositionChanged: [{ type: core.Output, args: ['positionChanged',] }],
-        opened: [{ type: core.Input }]
+        opened: [{ type: core.Input }],
+        _animationStartListener: [{ type: core.HostListener, args: ['@transform.start', ['$event'],] }],
+        _animationDoneListener: [{ type: core.HostListener, args: ['@transform.done', ['$event'],] }]
     };
     return MatDrawer;
 }());
@@ -613,14 +744,9 @@ var MatDrawer = /** @class */ (function () {
  * and coordinates the backdrop and content styling.
  */
 var MatDrawerContainer = /** @class */ (function () {
-    function MatDrawerContainer(_dir, _element, _ngZone, _changeDetectorRef, defaultAutosize, _animationMode, 
-    /**
-     * @deprecated viewportRuler to become a required parameter.
-     * @breaking-change 8.0.0
-     */
-    viewportRuler) {
-        if (defaultAutosize === void 0) { defaultAutosize = false; }
+    function MatDrawerContainer(_dir, _element, _ngZone, _changeDetectorRef, viewportRuler, defaultAutosize, _animationMode) {
         var _this = this;
+        if (defaultAutosize === void 0) { defaultAutosize = false; }
         this._dir = _dir;
         this._element = _element;
         this._ngZone = _ngZone;
@@ -648,18 +774,22 @@ var MatDrawerContainer = /** @class */ (function () {
         // If a `Dir` directive exists up the tree, listen direction changes
         // and update the left/right properties to point to the proper start/end.
         if (_dir) {
-            _dir.change.pipe(operators.takeUntil(this._destroyed)).subscribe(function () {
+            _dir.change.pipe(operators.takeUntil(this._destroyed)).subscribe((/**
+             * @return {?}
+             */
+            function () {
                 _this._validateDrawers();
-                _this._updateContentMargins();
-            });
+                _this.updateContentMargins();
+            }));
         }
         // Since the minimum width of the sidenav depends on the viewport width,
         // we need to recompute the margins if the viewport changes.
-        if (viewportRuler) {
-            viewportRuler.change()
-                .pipe(operators.takeUntil(this._destroyed))
-                .subscribe(function () { return _this._updateContentMargins(); });
-        }
+        viewportRuler.change()
+            .pipe(operators.takeUntil(this._destroyed))
+            .subscribe((/**
+         * @return {?}
+         */
+        function () { return _this.updateContentMargins(); }));
         this._autosize = defaultAutosize;
     }
     Object.defineProperty(MatDrawerContainer.prototype, "start", {
@@ -757,22 +887,32 @@ var MatDrawerContainer = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this._drawers.changes.pipe(operators.startWith(null)).subscribe(function () {
+        this._drawers.changes.pipe(operators.startWith(null)).subscribe((/**
+         * @return {?}
+         */
+        function () {
             _this._validateDrawers();
-            _this._drawers.forEach(function (drawer) {
+            _this._drawers.forEach((/**
+             * @param {?} drawer
+             * @return {?}
+             */
+            function (drawer) {
                 _this._watchDrawerToggle(drawer);
                 _this._watchDrawerPosition(drawer);
                 _this._watchDrawerMode(drawer);
-            });
+            }));
             if (!_this._drawers.length ||
                 _this._isDrawerOpen(_this._start) ||
                 _this._isDrawerOpen(_this._end)) {
-                _this._updateContentMargins();
+                _this.updateContentMargins();
             }
             _this._changeDetectorRef.markForCheck();
-        });
+        }));
         this._doCheckSubject.pipe(operators.debounceTime(10), // Arbitrary debounce time, less than a frame at 60fps
-        operators.takeUntil(this._destroyed)).subscribe(function () { return _this._updateContentMargins(); });
+        operators.takeUntil(this._destroyed)).subscribe((/**
+         * @return {?}
+         */
+        function () { return _this.updateContentMargins(); }));
     };
     /**
      * @return {?}
@@ -796,7 +936,11 @@ var MatDrawerContainer = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        this._drawers.forEach(function (drawer) { return drawer.open(); });
+        this._drawers.forEach((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        function (drawer) { return drawer.open(); }));
     };
     /** Calls `close` of both start and end drawers */
     /**
@@ -808,7 +952,75 @@ var MatDrawerContainer = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        this._drawers.forEach(function (drawer) { return drawer.close(); });
+        this._drawers.forEach((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        function (drawer) { return drawer.close(); }));
+    };
+    /**
+     * Recalculates and updates the inline styles for the content. Note that this should be used
+     * sparingly, because it causes a reflow.
+     */
+    /**
+     * Recalculates and updates the inline styles for the content. Note that this should be used
+     * sparingly, because it causes a reflow.
+     * @return {?}
+     */
+    MatDrawerContainer.prototype.updateContentMargins = /**
+     * Recalculates and updates the inline styles for the content. Note that this should be used
+     * sparingly, because it causes a reflow.
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        // 1. For drawers in `over` mode, they don't affect the content.
+        // 2. For drawers in `side` mode they should shrink the content. We do this by adding to the
+        //    left margin (for left drawer) or right margin (for right the drawer).
+        // 3. For drawers in `push` mode the should shift the content without resizing it. We do this by
+        //    adding to the left or right margin and simultaneously subtracting the same amount of
+        //    margin from the other side.
+        /** @type {?} */
+        var left = 0;
+        /** @type {?} */
+        var right = 0;
+        if (this._left && this._left.opened) {
+            if (this._left.mode == 'side') {
+                left += this._left._width;
+            }
+            else if (this._left.mode == 'push') {
+                /** @type {?} */
+                var width = this._left._width;
+                left += width;
+                right -= width;
+            }
+        }
+        if (this._right && this._right.opened) {
+            if (this._right.mode == 'side') {
+                right += this._right._width;
+            }
+            else if (this._right.mode == 'push') {
+                /** @type {?} */
+                var width = this._right._width;
+                right += width;
+                left -= width;
+            }
+        }
+        // If either `right` or `left` is zero, don't set a style to the element. This
+        // allows users to specify a custom size via CSS class in SSR scenarios where the
+        // measured widths will always be zero. Note that we reset to `null` here, rather
+        // than below, in order to ensure that the types in the `if` below are consistent.
+        left = left || (/** @type {?} */ (null));
+        right = right || (/** @type {?} */ (null));
+        if (left !== this._contentMargins.left || right !== this._contentMargins.right) {
+            this._contentMargins = { left: left, right: right };
+            // Pull back into the NgZone since in some cases we could be outside. We need to be careful
+            // to do it only when something changed, otherwise we can end up hitting the zone too often.
+            this._ngZone.run((/**
+             * @return {?}
+             */
+            function () { return _this._contentMarginChanges.next(_this._contentMargins); }));
+        }
     };
     /**
      * @return {?}
@@ -821,7 +1033,10 @@ var MatDrawerContainer = /** @class */ (function () {
         // If users opted into autosizing, do a check every change detection cycle.
         if (this._autosize && this._isPushed()) {
             // Run outside the NgZone, otherwise the debouncer will throw us into an infinite loop.
-            this._ngZone.runOutsideAngular(function () { return _this._doCheckSubject.next(); });
+            this._ngZone.runOutsideAngular((/**
+             * @return {?}
+             */
+            function () { return _this._doCheckSubject.next(); }));
         }
     };
     /**
@@ -847,20 +1062,31 @@ var MatDrawerContainer = /** @class */ (function () {
      */
     function (drawer) {
         var _this = this;
-        drawer._animationStarted.pipe(operators.filter(function (event) { return event.fromState !== event.toState; }), operators.takeUntil(this._drawers.changes))
-            .subscribe(function (event) {
+        drawer._animationStarted.pipe(operators.filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) { return event.fromState !== event.toState; })), operators.takeUntil(this._drawers.changes))
+            .subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             // Set the transition class on the container so that the animations occur. This should not
             // be set initially because animations should only be triggered via a change in state.
             if (event.toState !== 'open-instant' && _this._animationMode !== 'NoopAnimations') {
                 _this._element.nativeElement.classList.add('mat-drawer-transition');
             }
-            _this._updateContentMargins();
+            _this.updateContentMargins();
             _this._changeDetectorRef.markForCheck();
-        });
+        }));
         if (drawer.mode !== 'side') {
-            drawer.openedChange.pipe(operators.takeUntil(this._drawers.changes)).subscribe(function () {
+            drawer.openedChange.pipe(operators.takeUntil(this._drawers.changes)).subscribe((/**
+             * @return {?}
+             */
+            function () {
                 return _this._setContainerClass(drawer.opened);
-            });
+            }));
         }
     };
     /**
@@ -888,11 +1114,17 @@ var MatDrawerContainer = /** @class */ (function () {
         }
         // NOTE: We need to wait for the microtask queue to be empty before validating,
         // since both drawers may be swapping positions at the same time.
-        drawer.onPositionChanged.pipe(operators.takeUntil(this._drawers.changes)).subscribe(function () {
-            _this._ngZone.onMicrotaskEmpty.asObservable().pipe(operators.take(1)).subscribe(function () {
+        drawer.onPositionChanged.pipe(operators.takeUntil(this._drawers.changes)).subscribe((/**
+         * @return {?}
+         */
+        function () {
+            _this._ngZone.onMicrotaskEmpty.asObservable().pipe(operators.take(1)).subscribe((/**
+             * @return {?}
+             */
+            function () {
                 _this._validateDrawers();
-            });
-        });
+            }));
+        }));
     };
     /** Subscribes to changes in drawer mode so we can run change detection. */
     /**
@@ -911,10 +1143,13 @@ var MatDrawerContainer = /** @class */ (function () {
         var _this = this;
         if (drawer) {
             drawer._modeChanged.pipe(operators.takeUntil(rxjs.merge(this._drawers.changes, this._destroyed)))
-                .subscribe(function () {
-                _this._updateContentMargins();
+                .subscribe((/**
+             * @return {?}
+             */
+            function () {
+                _this.updateContentMargins();
                 _this._changeDetectorRef.markForCheck();
-            });
+            }));
         }
     };
     /** Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. */
@@ -953,7 +1188,11 @@ var MatDrawerContainer = /** @class */ (function () {
         var _this = this;
         this._start = this._end = null;
         // Ensure that we have at most one start and one end drawer.
-        this._drawers.forEach(function (drawer) {
+        this._drawers.forEach((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        function (drawer) {
             if (drawer.position == 'end') {
                 if (_this._end != null) {
                     throwMatDuplicatedDrawerError('end');
@@ -966,7 +1205,7 @@ var MatDrawerContainer = /** @class */ (function () {
                 }
                 _this._start = drawer;
             }
-        });
+        }));
         this._right = this._left = null;
         // Detect if we're LTR or RTL.
         if (this._dir && this._dir.value === 'rtl') {
@@ -1013,8 +1252,16 @@ var MatDrawerContainer = /** @class */ (function () {
         var _this = this;
         // Close all open drawers where closing is not disabled and the mode is not `side`.
         [this._start, this._end]
-            .filter(function (drawer) { return drawer && !drawer.disableClose && _this._canHaveBackdrop(drawer); })
-            .forEach(function (drawer) { return (/** @type {?} */ (drawer)).close(); });
+            .filter((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        function (drawer) { return drawer && !drawer.disableClose && _this._canHaveBackdrop(drawer); }))
+            .forEach((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        function (drawer) { return (/** @type {?} */ (drawer)).close(); }));
     };
     /**
      * @return {?}
@@ -1052,75 +1299,6 @@ var MatDrawerContainer = /** @class */ (function () {
     function (drawer) {
         return drawer != null && drawer.opened;
     };
-    /**
-     * Recalculates and updates the inline styles for the content. Note that this should be used
-     * sparingly, because it causes a reflow.
-     */
-    /**
-     * Recalculates and updates the inline styles for the content. Note that this should be used
-     * sparingly, because it causes a reflow.
-     * @private
-     * @return {?}
-     */
-    MatDrawerContainer.prototype._updateContentMargins = /**
-     * Recalculates and updates the inline styles for the content. Note that this should be used
-     * sparingly, because it causes a reflow.
-     * @private
-     * @return {?}
-     */
-    function () {
-        // 1. For drawers in `over` mode, they don't affect the content.
-        // 2. For drawers in `side` mode they should shrink the content. We do this by adding to the
-        //    left margin (for left drawer) or right margin (for right the drawer).
-        // 3. For drawers in `push` mode the should shift the content without resizing it. We do this by
-        //    adding to the left or right margin and simultaneously subtracting the same amount of
-        //    margin from the other side.
-        var _this = this;
-        // 1. For drawers in `over` mode, they don't affect the content.
-        // 2. For drawers in `side` mode they should shrink the content. We do this by adding to the
-        //    left margin (for left drawer) or right margin (for right the drawer).
-        // 3. For drawers in `push` mode the should shift the content without resizing it. We do this by
-        //    adding to the left or right margin and simultaneously subtracting the same amount of
-        //    margin from the other side.
-        /** @type {?} */
-        var left = 0;
-        /** @type {?} */
-        var right = 0;
-        if (this._left && this._left.opened) {
-            if (this._left.mode == 'side') {
-                left += this._left._width;
-            }
-            else if (this._left.mode == 'push') {
-                /** @type {?} */
-                var width = this._left._width;
-                left += width;
-                right -= width;
-            }
-        }
-        if (this._right && this._right.opened) {
-            if (this._right.mode == 'side') {
-                right += this._right._width;
-            }
-            else if (this._right.mode == 'push') {
-                /** @type {?} */
-                var width = this._right._width;
-                right += width;
-                left -= width;
-            }
-        }
-        // If either `right` or `left` is zero, don't set a style to the element. This
-        // allows users to specify a custom size via CSS class in SSR scenarios where the
-        // measured widths will always be zero. Note that we reset to `null` here, rather
-        // than below, in order to ensure that the types in the `if` below are consistent.
-        left = left || (/** @type {?} */ (null));
-        right = right || (/** @type {?} */ (null));
-        if (left !== this._contentMargins.left || right !== this._contentMargins.right) {
-            this._contentMargins = { left: left, right: right };
-            // Pull back into the NgZone since in some cases we could be outside. We need to be careful
-            // to do it only when something changed, otherwise we can end up hitting the zone too often.
-            this._ngZone.run(function () { return _this._contentMarginChanges.next(_this._contentMargins); });
-        }
-    };
     MatDrawerContainer.decorators = [
         { type: core.Component, args: [{selector: 'mat-drawer-container',
                     exportAs: 'matDrawerContainer',
@@ -1140,9 +1318,9 @@ var MatDrawerContainer = /** @class */ (function () {
         { type: core.ElementRef },
         { type: core.NgZone },
         { type: core.ChangeDetectorRef },
+        { type: scrolling.ViewportRuler },
         { type: undefined, decorators: [{ type: core.Inject, args: [MAT_DRAWER_DEFAULT_AUTOSIZE,] }] },
-        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations$1.ANIMATION_MODULE_TYPE,] }] },
-        { type: scrolling.ViewportRuler, decorators: [{ type: core.Optional }] }
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations$1.ANIMATION_MODULE_TYPE,] }] }
     ]; };
     MatDrawerContainer.propDecorators = {
         _drawers: [{ type: core.ContentChildren, args: [MatDrawer,] }],
@@ -1157,7 +1335,7 @@ var MatDrawerContainer = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var MatSidenavContent = /** @class */ (function (_super) {
     __extends(MatSidenavContent, _super);
@@ -1179,7 +1357,10 @@ var MatSidenavContent = /** @class */ (function (_super) {
     /** @nocollapse */
     MatSidenavContent.ctorParameters = function () { return [
         { type: core.ChangeDetectorRef },
-        { type: MatSidenavContainer, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatSidenavContainer; }),] }] },
+        { type: MatSidenavContainer, decorators: [{ type: core.Inject, args: [core.forwardRef((/**
+                         * @return {?}
+                         */
+                        function () { return MatSidenavContainer; })),] }] },
         { type: core.ElementRef },
         { type: scrolling.ScrollDispatcher },
         { type: core.NgZone }
@@ -1256,9 +1437,6 @@ var MatSidenav = /** @class */ (function (_super) {
                     host: {
                         'class': 'mat-drawer mat-sidenav',
                         'tabIndex': '-1',
-                        '[@transform]': '_animationState',
-                        '(@transform.start)': '_animationStarted.next($event)',
-                        '(@transform.done)': '_animationEnd.next($event)',
                         // must prevent the browser from aligning text based on value
                         '[attr.align]': 'null',
                         '[class.mat-drawer-end]': 'position === "end"',
@@ -1307,7 +1485,7 @@ var MatSidenavContainer = /** @class */ (function (_super) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var MatSidenavModule = /** @class */ (function () {
     function MatSidenavModule() {