@angular/material 8.0.0-beta.2 → 8.0.0

package/esm5/sidenav.es5.js

@@ -14,7 +14,7 @@ import { ESCAPE } from '@angular/cdk/keycodes';
 import { Platform, PlatformModule } from '@angular/cdk/platform';
 import { CdkScrollable, ScrollDispatcher, ViewportRuler, ScrollingModule } from '@angular/cdk/scrolling';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, forwardRef, Inject, InjectionToken, Input, NgZone, Optional, Output, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, forwardRef, Inject, InjectionToken, Input, NgZone, Optional, Output, ViewChild, ViewEncapsulation, HostListener, HostBinding, NgModule } from '@angular/core';
 import { fromEvent, merge, Subject } from 'rxjs';
 import { debounceTime, filter, map, startWith, take, takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
@@ -22,7 +22,7 @@ import { MatCommonModule } from '@angular/material/core';
 
 /**
  * @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.
@@ -54,7 +54,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.
@@ -96,9 +96,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: Component, args: [{selector: 'mat-drawer-content',
@@ -115,7 +118,10 @@ var MatDrawerContent = /** @class */ (function (_super) {
     /** @nocollapse */
     MatDrawerContent.ctorParameters = function () { return [
         { type: ChangeDetectorRef },
-        { type: MatDrawerContainer, decorators: [{ type: Inject, args: [forwardRef(function () { return MatDrawerContainer; }),] }] },
+        { type: MatDrawerContainer, decorators: [{ type: Inject, args: [forwardRef((/**
+                         * @return {?}
+                         */
+                        function () { return MatDrawerContainer; })),] }] },
         { type: ElementRef },
         { type: ScrollDispatcher },
         { type: NgZone }
@@ -154,6 +160,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.
@@ -176,7 +186,11 @@ var MatDrawer = /** @class */ (function () {
          */
         this._modeChanged = new 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));
@@ -188,29 +202,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 {?} */ (fromEvent(_this._elementRef.nativeElement, 'keydown')))).pipe(filter(function (event) { return event.keyCode === ESCAPE && !_this.disableClose; }), takeUntil(_this._destroyed)).subscribe(function (event) { return _this._ngZone.run(function () {
+        this._ngZone.runOutsideAngular((/**
+         * @return {?}
+         */
+        function () {
+            ((/** @type {?} */ (fromEvent(_this._elementRef.nativeElement, 'keydown')))).pipe(filter((/**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) { return event.keyCode === ESCAPE && !_this.disableClose; })), 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(distinctUntilChanged(function (x, y) {
+        this._animationEnd.pipe(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. */
@@ -289,7 +326,14 @@ var MatDrawer = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return this.openedChange.pipe(filter(function (o) { return o; }), map(function () { }));
+            return this.openedChange.pipe(filter((/**
+             * @param {?} o
+             * @return {?}
+             */
+            function (o) { return o; })), map((/**
+             * @return {?}
+             */
+            function () { })));
         },
         enumerable: true,
         configurable: true
@@ -301,7 +345,14 @@ var MatDrawer = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return this._animationStarted.pipe(filter(function (e) { return e.fromState !== e.toState && e.toState.indexOf('open') === 0; }), map(function () { }));
+            return this._animationStarted.pipe(filter((/**
+             * @param {?} e
+             * @return {?}
+             */
+            function (e) { return e.fromState !== e.toState && e.toState.indexOf('open') === 0; })), map((/**
+             * @return {?}
+             */
+            function () { })));
         },
         enumerable: true,
         configurable: true
@@ -313,7 +364,14 @@ var MatDrawer = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return this.openedChange.pipe(filter(function (o) { return !o; }), map(function () { }));
+            return this.openedChange.pipe(filter((/**
+             * @param {?} o
+             * @return {?}
+             */
+            function (o) { return !o; })), map((/**
+             * @return {?}
+             */
+            function () { })));
         },
         enumerable: true,
         configurable: true
@@ -325,7 +383,14 @@ var MatDrawer = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return this._animationStarted.pipe(filter(function (e) { return e.fromState !== e.toState && e.toState === 'void'; }), map(function () { }));
+            return this._animationStarted.pipe(filter((/**
+             * @param {?} e
+             * @return {?}
+             */
+            function (e) { return e.fromState !== e.toState && e.toState === 'void'; })), map((/**
+             * @return {?}
+             */
+            function () { })));
         },
         enumerable: true,
         configurable: true
@@ -357,13 +422,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
@@ -526,9 +595,17 @@ var MatDrawer = /** @class */ (function () {
         if (this._focusTrap) {
             this._focusTrap.enabled = this._isFocusTrapEnabled;
         }
-        return new Promise(function (resolve) {
-            _this.openedChange.pipe(take(1)).subscribe(function (open) { return resolve(open ? 'open' : 'close'); });
-        });
+        return new Promise((/**
+         * @param {?} resolve
+         * @return {?}
+         */
+        function (resolve) {
+            _this.openedChange.pipe(take(1)).subscribe((/**
+             * @param {?} open
+             * @return {?}
+             */
+            function (open) { return resolve(open ? 'open' : 'close'); }));
+        }));
     };
     Object.defineProperty(MatDrawer.prototype, "_width", {
         get: /**
@@ -540,6 +617,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: Component, args: [{selector: 'mat-drawer',
                     exportAs: 'matDrawer',
@@ -547,9 +678,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"',
@@ -576,13 +704,16 @@ var MatDrawer = /** @class */ (function () {
         mode: [{ type: Input }],
         disableClose: [{ type: Input }],
         autoFocus: [{ type: Input }],
+        _animationState: [{ type: HostBinding, args: ['@transform',] }],
         openedChange: [{ type: Output }],
         _openedStream: [{ type: Output, args: ['opened',] }],
         openedStart: [{ type: Output }],
         _closedStream: [{ type: Output, args: ['closed',] }],
         closedStart: [{ type: Output }],
         onPositionChanged: [{ type: Output, args: ['positionChanged',] }],
-        opened: [{ type: Input }]
+        opened: [{ type: Input }],
+        _animationStartListener: [{ type: HostListener, args: ['@transform.start', ['$event'],] }],
+        _animationDoneListener: [{ type: HostListener, args: ['@transform.done', ['$event'],] }]
     };
     return MatDrawer;
 }());
@@ -593,14 +724,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;
@@ -628,18 +754,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(takeUntil(this._destroyed)).subscribe(function () {
+            _dir.change.pipe(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(takeUntil(this._destroyed))
-                .subscribe(function () { return _this._updateContentMargins(); });
-        }
+        viewportRuler.change()
+            .pipe(takeUntil(this._destroyed))
+            .subscribe((/**
+         * @return {?}
+         */
+        function () { return _this.updateContentMargins(); }));
         this._autosize = defaultAutosize;
     }
     Object.defineProperty(MatDrawerContainer.prototype, "start", {
@@ -737,22 +867,32 @@ var MatDrawerContainer = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this._drawers.changes.pipe(startWith(null)).subscribe(function () {
+        this._drawers.changes.pipe(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(debounceTime(10), // Arbitrary debounce time, less than a frame at 60fps
-        takeUntil(this._destroyed)).subscribe(function () { return _this._updateContentMargins(); });
+        takeUntil(this._destroyed)).subscribe((/**
+         * @return {?}
+         */
+        function () { return _this.updateContentMargins(); }));
     };
     /**
      * @return {?}
@@ -776,7 +916,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 */
     /**
@@ -788,7 +932,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 {?}
@@ -801,7 +1013,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(); }));
         }
     };
     /**
@@ -827,20 +1042,31 @@ var MatDrawerContainer = /** @class */ (function () {
      */
     function (drawer) {
         var _this = this;
-        drawer._animationStarted.pipe(filter(function (event) { return event.fromState !== event.toState; }), takeUntil(this._drawers.changes))
-            .subscribe(function (event) {
+        drawer._animationStarted.pipe(filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) { return event.fromState !== event.toState; })), 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(takeUntil(this._drawers.changes)).subscribe(function () {
+            drawer.openedChange.pipe(takeUntil(this._drawers.changes)).subscribe((/**
+             * @return {?}
+             */
+            function () {
                 return _this._setContainerClass(drawer.opened);
-            });
+            }));
         }
     };
     /**
@@ -868,11 +1094,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(takeUntil(this._drawers.changes)).subscribe(function () {
-            _this._ngZone.onMicrotaskEmpty.asObservable().pipe(take(1)).subscribe(function () {
+        drawer.onPositionChanged.pipe(takeUntil(this._drawers.changes)).subscribe((/**
+         * @return {?}
+         */
+        function () {
+            _this._ngZone.onMicrotaskEmpty.asObservable().pipe(take(1)).subscribe((/**
+             * @return {?}
+             */
+            function () {
                 _this._validateDrawers();
-            });
-        });
+            }));
+        }));
     };
     /** Subscribes to changes in drawer mode so we can run change detection. */
     /**
@@ -891,10 +1123,13 @@ var MatDrawerContainer = /** @class */ (function () {
         var _this = this;
         if (drawer) {
             drawer._modeChanged.pipe(takeUntil(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. */
@@ -933,7 +1168,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');
@@ -946,7 +1185,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') {
@@ -993,8 +1232,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 {?}
@@ -1032,75 +1279,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: Component, args: [{selector: 'mat-drawer-container',
                     exportAs: 'matDrawerContainer',
@@ -1120,9 +1298,9 @@ var MatDrawerContainer = /** @class */ (function () {
         { type: ElementRef },
         { type: NgZone },
         { type: ChangeDetectorRef },
+        { type: ViewportRuler },
         { type: undefined, decorators: [{ type: Inject, args: [MAT_DRAWER_DEFAULT_AUTOSIZE,] }] },
-        { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] },
-        { type: ViewportRuler, decorators: [{ type: Optional }] }
+        { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] }
     ]; };
     MatDrawerContainer.propDecorators = {
         _drawers: [{ type: ContentChildren, args: [MatDrawer,] }],
@@ -1137,7 +1315,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);
@@ -1159,7 +1337,10 @@ var MatSidenavContent = /** @class */ (function (_super) {
     /** @nocollapse */
     MatSidenavContent.ctorParameters = function () { return [
         { type: ChangeDetectorRef },
-        { type: MatSidenavContainer, decorators: [{ type: Inject, args: [forwardRef(function () { return MatSidenavContainer; }),] }] },
+        { type: MatSidenavContainer, decorators: [{ type: Inject, args: [forwardRef((/**
+                         * @return {?}
+                         */
+                        function () { return MatSidenavContainer; })),] }] },
         { type: ElementRef },
         { type: ScrollDispatcher },
         { type: NgZone }
@@ -1236,9 +1417,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"',
@@ -1287,7 +1465,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() {
@@ -1324,12 +1502,12 @@ var MatSidenavModule = /** @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
  */
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 export { MatSidenavModule, throwMatDuplicatedDrawerError, MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY, MAT_DRAWER_DEFAULT_AUTOSIZE, MatDrawerContent, MatDrawer, MatDrawerContainer, MatSidenavContent, MatSidenav, MatSidenavContainer, matDrawerAnimations };