@angular/material 8.0.0-beta.2 → 8.0.0

package/esm2015/sidenav.js

@@ -13,7 +13,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';
@@ -21,7 +21,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.
@@ -53,7 +53,7 @@ const 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 @@ class MatDrawerContent extends CdkScrollable {
      * @return {?}
      */
     ngAfterContentInit() {
-        this._container._contentMarginChanges.subscribe(() => {
+        this._container._contentMarginChanges.subscribe((/**
+         * @return {?}
+         */
+        () => {
             this._changeDetectorRef.markForCheck();
-        });
+        }));
     }
 }
 MatDrawerContent.decorators = [
@@ -116,7 +119,10 @@ MatDrawerContent.decorators = [
 /** @nocollapse */
 MatDrawerContent.ctorParameters = () => [
     { type: ChangeDetectorRef },
-    { type: MatDrawerContainer, decorators: [{ type: Inject, args: [forwardRef(() => MatDrawerContainer),] }] },
+    { type: MatDrawerContainer, decorators: [{ type: Inject, args: [forwardRef((/**
+                     * @return {?}
+                     */
+                    () => MatDrawerContainer)),] }] },
     { type: ElementRef },
     { type: ScrollDispatcher },
     { type: NgZone }
@@ -160,6 +166,10 @@ class MatDrawer {
         /**
          * 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.
@@ -182,7 +192,11 @@ class MatDrawer {
          */
         this._modeChanged = new Subject();
         this._opened = false;
-        this.openedChange.subscribe((opened) => {
+        this.openedChange.subscribe((/**
+         * @param {?} opened
+         * @return {?}
+         */
+        (opened) => {
             if (opened) {
                 if (this._doc) {
                     this._elementFocusedBeforeDrawerWasOpened = (/** @type {?} */ (this._doc.activeElement));
@@ -194,29 +208,52 @@ class MatDrawer {
             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(() => {
-            ((/** @type {?} */ (fromEvent(this._elementRef.nativeElement, 'keydown')))).pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose), takeUntil(this._destroyed)).subscribe(event => this._ngZone.run(() => {
+        this._ngZone.runOutsideAngular((/**
+         * @return {?}
+         */
+        () => {
+            ((/** @type {?} */ (fromEvent(this._elementRef.nativeElement, 'keydown')))).pipe(filter((/**
+             * @param {?} event
+             * @return {?}
+             */
+            event => event.keyCode === ESCAPE && !this.disableClose)), takeUntil(this._destroyed)).subscribe((/**
+             * @param {?} event
+             * @return {?}
+             */
+            event => this._ngZone.run((/**
+             * @return {?}
+             */
+            () => {
                 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((x, y) => {
+        this._animationEnd.pipe(distinctUntilChanged((/**
+         * @param {?} x
+         * @param {?} y
+         * @return {?}
+         */
+        (x, y) => {
             return x.fromState === y.fromState && x.toState === y.toState;
-        })).subscribe((event) => {
+        }))).subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        (event) => {
             const { fromState, toState } = event;
             if ((toState.indexOf('open') === 0 && fromState === 'void') ||
                 (toState === 'void' && fromState.indexOf('open') === 0)) {
                 this.openedChange.emit(this._opened);
             }
-        });
+        }));
     }
     /**
      * The side that the drawer is attached to.
@@ -273,28 +310,56 @@ class MatDrawer {
      * @return {?}
      */
     get _openedStream() {
-        return this.openedChange.pipe(filter(o => o), map(() => { }));
+        return this.openedChange.pipe(filter((/**
+         * @param {?} o
+         * @return {?}
+         */
+        o => o)), map((/**
+         * @return {?}
+         */
+        () => { })));
     }
     /**
      * Event emitted when the drawer has started opening.
      * @return {?}
      */
     get openedStart() {
-        return this._animationStarted.pipe(filter(e => e.fromState !== e.toState && e.toState.indexOf('open') === 0), map(() => { }));
+        return this._animationStarted.pipe(filter((/**
+         * @param {?} e
+         * @return {?}
+         */
+        e => e.fromState !== e.toState && e.toState.indexOf('open') === 0)), map((/**
+         * @return {?}
+         */
+        () => { })));
     }
     /**
      * Event emitted when the drawer has been closed.
      * @return {?}
      */
     get _closedStream() {
-        return this.openedChange.pipe(filter(o => !o), map(() => { }));
+        return this.openedChange.pipe(filter((/**
+         * @param {?} o
+         * @return {?}
+         */
+        o => !o)), map((/**
+         * @return {?}
+         */
+        () => { })));
     }
     /**
      * Event emitted when the drawer has started closing.
      * @return {?}
      */
     get closedStart() {
-        return this._animationStarted.pipe(filter(e => e.fromState !== e.toState && e.toState === 'void'), map(() => { }));
+        return this._animationStarted.pipe(filter((/**
+         * @param {?} e
+         * @return {?}
+         */
+        e => e.fromState !== e.toState && e.toState === 'void')), map((/**
+         * @return {?}
+         */
+        () => { })));
     }
     /**
      * @return {?}
@@ -312,13 +377,17 @@ class MatDrawer {
         if (!this.autoFocus) {
             return;
         }
-        this._focusTrap.focusInitialElementWhenReady().then(hasMovedFocus => {
+        this._focusTrap.focusInitialElementWhenReady().then((/**
+         * @param {?} hasMovedFocus
+         * @return {?}
+         */
+        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
@@ -422,9 +491,17 @@ class MatDrawer {
         if (this._focusTrap) {
             this._focusTrap.enabled = this._isFocusTrapEnabled;
         }
-        return new Promise(resolve => {
-            this.openedChange.pipe(take(1)).subscribe(open => resolve(open ? 'open' : 'close'));
-        });
+        return new Promise((/**
+         * @param {?} resolve
+         * @return {?}
+         */
+        resolve => {
+            this.openedChange.pipe(take(1)).subscribe((/**
+             * @param {?} open
+             * @return {?}
+             */
+            open => resolve(open ? 'open' : 'close')));
+        }));
     }
     /**
      * @return {?}
@@ -432,6 +509,30 @@ class MatDrawer {
     get _width() {
         return this._elementRef.nativeElement ? (this._elementRef.nativeElement.offsetWidth || 0) : 0;
     }
+    // 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 {?}
+     */
+    _animationStartListener(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
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    _animationDoneListener(event) {
+        this._animationEnd.next(event);
+    }
 }
 MatDrawer.decorators = [
     { type: Component, args: [{selector: 'mat-drawer',
@@ -440,9 +541,6 @@ MatDrawer.decorators = [
                 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"',
@@ -469,13 +567,16 @@ MatDrawer.propDecorators = {
     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'],] }]
 };
 /**
  * `<mat-drawer-container>` component.
@@ -489,16 +590,11 @@ class MatDrawerContainer {
      * @param {?} _element
      * @param {?} _ngZone
      * @param {?} _changeDetectorRef
+     * @param {?} viewportRuler
      * @param {?=} defaultAutosize
      * @param {?=} _animationMode
-     * @param {?=} viewportRuler
-     */
-    constructor(_dir, _element, _ngZone, _changeDetectorRef, defaultAutosize = false, _animationMode, 
-    /**
-     * @deprecated viewportRuler to become a required parameter.
-     * @breaking-change 8.0.0
      */
-    viewportRuler) {
+    constructor(_dir, _element, _ngZone, _changeDetectorRef, viewportRuler, defaultAutosize = false, _animationMode) {
         this._dir = _dir;
         this._element = _element;
         this._ngZone = _ngZone;
@@ -526,18 +622,22 @@ class MatDrawerContainer {
         // 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(() => {
+            _dir.change.pipe(takeUntil(this._destroyed)).subscribe((/**
+             * @return {?}
+             */
+            () => {
                 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(() => this._updateContentMargins());
-        }
+        viewportRuler.change()
+            .pipe(takeUntil(this._destroyed))
+            .subscribe((/**
+         * @return {?}
+         */
+        () => this.updateContentMargins()));
         this._autosize = defaultAutosize;
     }
     /**
@@ -595,22 +695,32 @@ class MatDrawerContainer {
      * @return {?}
      */
     ngAfterContentInit() {
-        this._drawers.changes.pipe(startWith(null)).subscribe(() => {
+        this._drawers.changes.pipe(startWith(null)).subscribe((/**
+         * @return {?}
+         */
+        () => {
             this._validateDrawers();
-            this._drawers.forEach((drawer) => {
+            this._drawers.forEach((/**
+             * @param {?} drawer
+             * @return {?}
+             */
+            (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(() => this._updateContentMargins());
+        takeUntil(this._destroyed)).subscribe((/**
+         * @return {?}
+         */
+        () => this.updateContentMargins()));
     }
     /**
      * @return {?}
@@ -626,14 +736,76 @@ class MatDrawerContainer {
      * @return {?}
      */
     open() {
-        this._drawers.forEach(drawer => drawer.open());
+        this._drawers.forEach((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        drawer => drawer.open()));
     }
     /**
      * Calls `close` of both start and end drawers
      * @return {?}
      */
     close() {
-        this._drawers.forEach(drawer => drawer.close());
+        this._drawers.forEach((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        drawer => drawer.close()));
+    }
+    /**
+     * Recalculates and updates the inline styles for the content. Note that this should be used
+     * sparingly, because it causes a reflow.
+     * @return {?}
+     */
+    updateContentMargins() {
+        // 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 {?} */
+        let left = 0;
+        /** @type {?} */
+        let right = 0;
+        if (this._left && this._left.opened) {
+            if (this._left.mode == 'side') {
+                left += this._left._width;
+            }
+            else if (this._left.mode == 'push') {
+                /** @type {?} */
+                const 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 {?} */
+                const 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, 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 {?}
+             */
+            () => this._contentMarginChanges.next(this._contentMargins)));
+        }
     }
     /**
      * @return {?}
@@ -642,7 +814,10 @@ class MatDrawerContainer {
         // 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(() => this._doCheckSubject.next());
+            this._ngZone.runOutsideAngular((/**
+             * @return {?}
+             */
+            () => this._doCheckSubject.next()));
         }
     }
     /**
@@ -654,18 +829,29 @@ class MatDrawerContainer {
      * @return {?}
      */
     _watchDrawerToggle(drawer) {
-        drawer._animationStarted.pipe(filter((event) => event.fromState !== event.toState), takeUntil(this._drawers.changes))
-            .subscribe((event) => {
+        drawer._animationStarted.pipe(filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        (event) => event.fromState !== event.toState)), takeUntil(this._drawers.changes))
+            .subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        (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(() => this._setContainerClass(drawer.opened));
+            drawer.openedChange.pipe(takeUntil(this._drawers.changes)).subscribe((/**
+             * @return {?}
+             */
+            () => this._setContainerClass(drawer.opened)));
         }
     }
     /**
@@ -681,11 +867,17 @@ class MatDrawerContainer {
         }
         // 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(() => {
-            this._ngZone.onMicrotaskEmpty.asObservable().pipe(take(1)).subscribe(() => {
+        drawer.onPositionChanged.pipe(takeUntil(this._drawers.changes)).subscribe((/**
+         * @return {?}
+         */
+        () => {
+            this._ngZone.onMicrotaskEmpty.asObservable().pipe(take(1)).subscribe((/**
+             * @return {?}
+             */
+            () => {
                 this._validateDrawers();
-            });
-        });
+            }));
+        }));
     }
     /**
      * Subscribes to changes in drawer mode so we can run change detection.
@@ -696,10 +888,13 @@ class MatDrawerContainer {
     _watchDrawerMode(drawer) {
         if (drawer) {
             drawer._modeChanged.pipe(takeUntil(merge(this._drawers.changes, this._destroyed)))
-                .subscribe(() => {
-                this._updateContentMargins();
+                .subscribe((/**
+             * @return {?}
+             */
+            () => {
+                this.updateContentMargins();
                 this._changeDetectorRef.markForCheck();
-            });
+            }));
         }
     }
     /**
@@ -724,7 +919,11 @@ class MatDrawerContainer {
     _validateDrawers() {
         this._start = this._end = null;
         // Ensure that we have at most one start and one end drawer.
-        this._drawers.forEach(drawer => {
+        this._drawers.forEach((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        drawer => {
             if (drawer.position == 'end') {
                 if (this._end != null) {
                     throwMatDuplicatedDrawerError('end');
@@ -737,7 +936,7 @@ class MatDrawerContainer {
                 }
                 this._start = drawer;
             }
-        });
+        }));
         this._right = this._left = null;
         // Detect if we're LTR or RTL.
         if (this._dir && this._dir.value === 'rtl') {
@@ -771,8 +970,16 @@ class MatDrawerContainer {
     _closeModalDrawer() {
         // Close all open drawers where closing is not disabled and the mode is not `side`.
         [this._start, this._end]
-            .filter(drawer => drawer && !drawer.disableClose && this._canHaveBackdrop(drawer))
-            .forEach(drawer => (/** @type {?} */ (drawer)).close());
+            .filter((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        drawer => drawer && !drawer.disableClose && this._canHaveBackdrop(drawer)))
+            .forEach((/**
+         * @param {?} drawer
+         * @return {?}
+         */
+        drawer => (/** @type {?} */ (drawer)).close()));
     }
     /**
      * @return {?}
@@ -797,64 +1004,6 @@ class MatDrawerContainer {
     _isDrawerOpen(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.
-     * @private
-     * @return {?}
-     */
-    _updateContentMargins() {
-        // 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.
-        // 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 {?} */
-        let left = 0;
-        /** @type {?} */
-        let right = 0;
-        if (this._left && this._left.opened) {
-            if (this._left.mode == 'side') {
-                left += this._left._width;
-            }
-            else if (this._left.mode == 'push') {
-                /** @type {?} */
-                let 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 {?} */
-                let 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, 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(() => this._contentMarginChanges.next(this._contentMargins));
-        }
-    }
 }
 MatDrawerContainer.decorators = [
     { type: Component, args: [{selector: 'mat-drawer-container',
@@ -875,9 +1024,9 @@ MatDrawerContainer.ctorParameters = () => [
     { 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,] }],
@@ -890,7 +1039,7 @@ MatDrawerContainer.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class MatSidenavContent extends MatDrawerContent {
     /**
@@ -919,7 +1068,10 @@ MatSidenavContent.decorators = [
 /** @nocollapse */
 MatSidenavContent.ctorParameters = () => [
     { type: ChangeDetectorRef },
-    { type: MatSidenavContainer, decorators: [{ type: Inject, args: [forwardRef(() => MatSidenavContainer),] }] },
+    { type: MatSidenavContainer, decorators: [{ type: Inject, args: [forwardRef((/**
+                     * @return {?}
+                     */
+                    () => MatSidenavContainer)),] }] },
     { type: ElementRef },
     { type: ScrollDispatcher },
     { type: NgZone }
@@ -972,9 +1124,6 @@ MatSidenav.decorators = [
                 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"',
@@ -1016,7 +1165,7 @@ MatSidenavContainer.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class MatSidenavModule {
 }
@@ -1050,12 +1199,12 @@ MatSidenavModule.decorators = [
 
 /**
  * @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 };