@angular/material 8.0.1 → 8.1.2

package/bundles/material.umd.js

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('rxjs'), require('@angular/cdk/platform'), require('rxjs/operators'), require('@angular/cdk/a11y'), require('@angular/platform-browser/animations'), require('@angular/cdk/keycodes'), require('@angular/common'), require('@angular/animations'), require('@angular/cdk/observers'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/forms'), require('@angular/cdk/layout'), require('@angular/cdk/collections'), require('@angular/cdk/text-field'), require('@angular/cdk/accordion'), require('@angular/common/http'), require('@angular/cdk/stepper'), require('@angular/cdk/table'), require('@angular/cdk/tree')) :
-	typeof define === 'function' && define.amd ? define('@angular/material', ['exports', '@angular/core', '@angular/platform-browser', '@angular/cdk/bidi', '@angular/cdk/coercion', 'rxjs', '@angular/cdk/platform', 'rxjs/operators', '@angular/cdk/a11y', '@angular/platform-browser/animations', '@angular/cdk/keycodes', '@angular/common', '@angular/animations', '@angular/cdk/observers', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/forms', '@angular/cdk/layout', '@angular/cdk/collections', '@angular/cdk/text-field', '@angular/cdk/accordion', '@angular/common/http', '@angular/cdk/stepper', '@angular/cdk/table', '@angular/cdk/tree'], factory) :
-	(factory((global.ng = global.ng || {}, global.ng.material = {}),global.ng.core,global.ng.platformBrowser,global.ng.cdk.bidi,global.ng.cdk.coercion,global.rxjs,global.ng.cdk.platform,global.rxjs.operators,global.ng.cdk.a11y,global.ng.platformBrowser.animations,global.ng.cdk.keycodes,global.ng.common,global.ng.animations,global.ng.cdk.observers,global.ng.cdk.overlay,global.ng.cdk.portal,global.ng.cdk.scrolling,global.ng.forms,global.ng.cdk.layout,global.ng.cdk.collections,global.ng.cdk.textField,global.ng.cdk.accordion,global.ng.common.http,global.ng.cdk.stepper,global.ng.cdk.table,global.ng.cdk.tree));
-}(this, (function (exports,core,platformBrowser,bidi,coercion,rxjs,platform,operators,a11y,animations,keycodes,common,animations$1,observers,overlay,portal,scrolling,forms,layout,collections,textField,accordion,http,stepper,table,tree) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@angular/cdk/bidi'), require('@angular/cdk'), require('@angular/cdk/coercion'), require('rxjs'), require('@angular/cdk/platform'), require('rxjs/operators'), require('@angular/cdk/a11y'), require('@angular/platform-browser/animations'), require('@angular/cdk/keycodes'), require('@angular/common'), require('@angular/animations'), require('@angular/cdk/observers'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/forms'), require('@angular/cdk/layout'), require('@angular/cdk/collections'), require('@angular/cdk/text-field'), require('@angular/cdk/accordion'), require('@angular/common/http'), require('@angular/cdk/stepper'), require('@angular/cdk/table'), require('@angular/cdk/tree')) :
+	typeof define === 'function' && define.amd ? define('@angular/material', ['exports', '@angular/core', '@angular/platform-browser', '@angular/cdk/bidi', '@angular/cdk', '@angular/cdk/coercion', 'rxjs', '@angular/cdk/platform', 'rxjs/operators', '@angular/cdk/a11y', '@angular/platform-browser/animations', '@angular/cdk/keycodes', '@angular/common', '@angular/animations', '@angular/cdk/observers', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/forms', '@angular/cdk/layout', '@angular/cdk/collections', '@angular/cdk/text-field', '@angular/cdk/accordion', '@angular/common/http', '@angular/cdk/stepper', '@angular/cdk/table', '@angular/cdk/tree'], factory) :
+	(factory((global.ng = global.ng || {}, global.ng.material = {}),global.ng.core,global.ng.platformBrowser,global.ng.cdk.bidi,global.ng.cdk,global.ng.cdk.coercion,global.rxjs,global.ng.cdk.platform,global.rxjs.operators,global.ng.cdk.a11y,global.ng.platformBrowser.animations,global.ng.cdk.keycodes,global.ng.common,global.ng.animations,global.ng.cdk.observers,global.ng.cdk.overlay,global.ng.cdk.portal,global.ng.cdk.scrolling,global.ng.forms,global.ng.cdk.layout,global.ng.cdk.collections,global.ng.cdk.textField,global.ng.cdk.accordion,global.ng.common.http,global.ng.cdk.stepper,global.ng.cdk.table,global.ng.cdk.tree));
+}(this, (function (exports,core,platformBrowser,bidi,cdk,coercion,rxjs,platform,operators,a11y,animations,keycodes,common,animations$1,observers,overlay,portal,scrolling,forms,layout,collections,textField,accordion,http,stepper,table,tree) { 'use strict';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -59,7 +59,7 @@ var __assign = function() {
  * Current version of Angular Material.
  * @type {?}
  */
-var VERSION = new core.Version('8.0.1');
+var VERSION$1 = new core.Version('8.1.2');
 
 /**
  * @fileoverview added by tsickle
@@ -94,6 +94,12 @@ var AnimationDurations = /** @class */ (function () {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+// Private version constant to circumvent test/build issues,
+// i.e. avoid core to depend on the @angular/material primary entry-point
+// Can be removed once the Material primary entry-point no longer
+// re-exports all secondary entry-points
+/** @type {?} */
+var VERSION$2 = new core.Version('8.1.2');
 /**
  * Injection token that configures whether the Material sanity checks are enabled.
  * @type {?}
@@ -138,6 +144,7 @@ var MatCommonModule = /** @class */ (function () {
         if (this._areChecksEnabled() && !this._hasDoneGlobalChecks) {
             this._checkDoctypeIsDefined();
             this._checkThemeIsPresent();
+            this._checkCdkVersionMatch();
             this._hasDoneGlobalChecks = true;
         }
     }
@@ -215,6 +222,24 @@ var MatCommonModule = /** @class */ (function () {
         }
         this._document.body.removeChild(testElement);
     };
+    /** Checks whether the material version matches the cdk version */
+    /**
+     * Checks whether the material version matches the cdk version
+     * @private
+     * @return {?}
+     */
+    MatCommonModule.prototype._checkCdkVersionMatch = /**
+     * Checks whether the material version matches the cdk version
+     * @private
+     * @return {?}
+     */
+    function () {
+        if (VERSION$2.full !== cdk.VERSION.full) {
+            console.warn('The Angular Material version (' + VERSION$2.full + ') does not match ' +
+                'the Angular CDK version (' + cdk.VERSION.full + ').\n' +
+                'Please ensure the versions of these two packages exactly match.');
+        }
+    };
     /** Checks whether HammerJS is available. */
     /**
      * Checks whether HammerJS is available.
@@ -3982,7 +4007,7 @@ var MatFormField = /** @class */ (function (_super) {
     MatFormField.decorators = [
         { type: core.Component, args: [{selector: 'mat-form-field',
                     exportAs: 'matFormField',
-                    template: "<div class=\"mat-form-field-wrapper\"><div class=\"mat-form-field-flex\" #connectionContainer (click)=\"_control.onContainerClick && _control.onContainerClick($event)\"><ng-container *ngIf=\"appearance == 'outline'\"><div class=\"mat-form-field-outline\"><div class=\"mat-form-field-outline-start\"></div><div class=\"mat-form-field-outline-gap\"></div><div class=\"mat-form-field-outline-end\"></div></div><div class=\"mat-form-field-outline mat-form-field-outline-thick\"><div class=\"mat-form-field-outline-start\"></div><div class=\"mat-form-field-outline-gap\"></div><div class=\"mat-form-field-outline-end\"></div></div></ng-container><div class=\"mat-form-field-prefix\" *ngIf=\"_prefixChildren.length\"><ng-content select=\"[matPrefix]\"></ng-content></div><div class=\"mat-form-field-infix\" #inputContainer><ng-content></ng-content><span class=\"mat-form-field-label-wrapper\"><label class=\"mat-form-field-label\" (cdkObserveContent)=\"updateOutlineGap()\" [cdkObserveContentDisabled]=\"appearance != 'outline'\" [id]=\"_labelId\" [attr.for]=\"_control.id\" [attr.aria-owns]=\"_control.id\" [class.mat-empty]=\"_control.empty && !_shouldAlwaysFloat\" [class.mat-form-field-empty]=\"_control.empty && !_shouldAlwaysFloat\" [class.mat-accent]=\"color == 'accent'\" [class.mat-warn]=\"color == 'warn'\" #label *ngIf=\"_hasFloatingLabel()\" [ngSwitch]=\"_hasLabel()\"><ng-container *ngSwitchCase=\"false\"><ng-content select=\"mat-placeholder\"></ng-content>{{_control.placeholder}}</ng-container><ng-content select=\"mat-label\" *ngSwitchCase=\"true\"></ng-content><span class=\"mat-placeholder-required mat-form-field-required-marker\" aria-hidden=\"true\" *ngIf=\"!hideRequiredMarker && _control.required && !_control.disabled\">&#32;*</span></label></span></div><div class=\"mat-form-field-suffix\" *ngIf=\"_suffixChildren.length\"><ng-content select=\"[matSuffix]\"></ng-content></div></div><div class=\"mat-form-field-underline\" #underline *ngIf=\"appearance != 'outline'\"><span class=\"mat-form-field-ripple\" [class.mat-accent]=\"color == 'accent'\" [class.mat-warn]=\"color == 'warn'\"></span></div><div class=\"mat-form-field-subscript-wrapper\" [ngSwitch]=\"_getDisplayedMessages()\"><div *ngSwitchCase=\"'error'\" [@transitionMessages]=\"_subscriptAnimationState\"><ng-content select=\"mat-error\"></ng-content></div><div class=\"mat-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\" [@transitionMessages]=\"_subscriptAnimationState\"><div *ngIf=\"hintLabel\" [id]=\"_hintLabelId\" class=\"mat-hint\">{{hintLabel}}</div><ng-content select=\"mat-hint:not([align='end'])\"></ng-content><div class=\"mat-form-field-hint-spacer\"></div><ng-content select=\"mat-hint[align='end']\"></ng-content></div></div></div>",
+                    template: "<div class=\"mat-form-field-wrapper\"><div class=\"mat-form-field-flex\" #connectionContainer (click)=\"_control.onContainerClick && _control.onContainerClick($event)\"><ng-container *ngIf=\"appearance == 'outline'\"><div class=\"mat-form-field-outline\"><div class=\"mat-form-field-outline-start\"></div><div class=\"mat-form-field-outline-gap\"></div><div class=\"mat-form-field-outline-end\"></div></div><div class=\"mat-form-field-outline mat-form-field-outline-thick\"><div class=\"mat-form-field-outline-start\"></div><div class=\"mat-form-field-outline-gap\"></div><div class=\"mat-form-field-outline-end\"></div></div></ng-container><div class=\"mat-form-field-prefix\" *ngIf=\"_prefixChildren.length\"><ng-content select=\"[matPrefix]\"></ng-content></div><div class=\"mat-form-field-infix\" #inputContainer><ng-content></ng-content><span class=\"mat-form-field-label-wrapper\"><label class=\"mat-form-field-label\" (cdkObserveContent)=\"updateOutlineGap()\" [cdkObserveContentDisabled]=\"appearance != 'outline'\" [id]=\"_labelId\" [attr.for]=\"_control.id\" [attr.aria-owns]=\"_control.id\" [class.mat-empty]=\"_control.empty && !_shouldAlwaysFloat\" [class.mat-form-field-empty]=\"_control.empty && !_shouldAlwaysFloat\" [class.mat-accent]=\"color == 'accent'\" [class.mat-warn]=\"color == 'warn'\" #label *ngIf=\"_hasFloatingLabel()\" [ngSwitch]=\"_hasLabel()\"><ng-container *ngSwitchCase=\"false\"><ng-content select=\"mat-placeholder\"></ng-content><span>{{_control.placeholder}}</span></ng-container><ng-content select=\"mat-label\" *ngSwitchCase=\"true\"></ng-content><span class=\"mat-placeholder-required mat-form-field-required-marker\" aria-hidden=\"true\" *ngIf=\"!hideRequiredMarker && _control.required && !_control.disabled\">&#32;*</span></label></span></div><div class=\"mat-form-field-suffix\" *ngIf=\"_suffixChildren.length\"><ng-content select=\"[matSuffix]\"></ng-content></div></div><div class=\"mat-form-field-underline\" #underline *ngIf=\"appearance != 'outline'\"><span class=\"mat-form-field-ripple\" [class.mat-accent]=\"color == 'accent'\" [class.mat-warn]=\"color == 'warn'\"></span></div><div class=\"mat-form-field-subscript-wrapper\" [ngSwitch]=\"_getDisplayedMessages()\"><div *ngSwitchCase=\"'error'\" [@transitionMessages]=\"_subscriptAnimationState\"><ng-content select=\"mat-error\"></ng-content></div><div class=\"mat-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\" [@transitionMessages]=\"_subscriptAnimationState\"><div *ngIf=\"hintLabel\" [id]=\"_hintLabelId\" class=\"mat-hint\">{{hintLabel}}</div><ng-content select=\"mat-hint:not([align='end'])\"></ng-content><div class=\"mat-form-field-hint-spacer\"></div><ng-content select=\"mat-hint[align='end']\"></ng-content></div></div></div>",
                     // MatInput is a directive and can't have styles, so we need to include its styles here
                     // in form-field-input.css. The MatInput styles are fairly minimal so it shouldn't be a
                     // big deal for people who aren't using MatInput.
@@ -5204,6 +5229,10 @@ var MatAutocompleteTrigger = /** @class */ (function () {
                 if (event.keyCode === keycodes.ESCAPE || (event.keyCode === keycodes.UP_ARROW && event.altKey)) {
                     _this._resetActiveItem();
                     _this._closeKeyEventStream.next();
+                    // We need to stop propagation, otherwise the event will eventually
+                    // reach the input itself and cause the overlay to be reopened.
+                    event.stopPropagation();
+                    event.preventDefault();
                 }
             }));
             if (this._viewportRuler) {
@@ -6173,12 +6202,26 @@ var MatBottomSheetContainer = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
+        /** @type {?} */
+        var element = this._elementRef.nativeElement;
         if (!this._focusTrap) {
-            this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+            this._focusTrap = this._focusTrapFactory.create(element);
         }
         if (this.bottomSheetConfig.autoFocus) {
             this._focusTrap.focusInitialElementWhenReady();
         }
+        else {
+            /** @type {?} */
+            var activeElement = this._document.activeElement;
+            // Otherwise ensure that focus is on the container. It's possible that a different
+            // component tried to move focus while the open animation was running. See:
+            // https://github.com/angular/components/issues/16215. Note that we only want to do this
+            // if the focus isn't inside the bottom sheet already, because it's possible that the
+            // consumer turned off `autoFocus` in order to move focus themselves.
+            if (activeElement !== element && !element.contains(activeElement)) {
+                element.focus();
+            }
+        }
     };
     /** Restores focus to the element that was focused before the bottom sheet was opened. */
     /**
@@ -6333,6 +6376,7 @@ MatBottomSheetRef = /** @class */ (function () {
          * @return {?}
          */
         function () {
+            clearTimeout(_this._closeFallbackTimeout);
             _overlayRef.dispose();
         }));
         _overlayRef.detachments().pipe(operators.take(1)).subscribe((/**
@@ -6381,9 +6425,23 @@ MatBottomSheetRef = /** @class */ (function () {
              * @return {?}
              */
             function (event) { return event.phaseName === 'start'; })), operators.take(1)).subscribe((/**
+             * @param {?} event
              * @return {?}
              */
-            function () { return _this._overlayRef.detachBackdrop(); }));
+            function (event) {
+                // The logic that disposes of the overlay depends on the exit animation completing, however
+                // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
+                // timeout which will clean everything up if the animation hasn't fired within the specified
+                // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
+                // vast majority of cases the timeout will have been cleared before it has fired.
+                _this._closeFallbackTimeout = setTimeout((/**
+                 * @return {?}
+                 */
+                function () {
+                    _this._overlayRef.dispose();
+                }), event.totalTime + 100);
+                _this._overlayRef.detachBackdrop();
+            }));
             this._result = result;
             this.containerInstance.exit();
         }
@@ -6763,7 +6821,7 @@ var MatButton = /** @class */ (function (_super) {
         for (var _i = 0, BUTTON_HOST_ATTRIBUTES_1 = BUTTON_HOST_ATTRIBUTES; _i < BUTTON_HOST_ATTRIBUTES_1.length; _i++) {
             var attr = BUTTON_HOST_ATTRIBUTES_1[_i];
             if (_this._hasHostAttributes(attr)) {
-                ((/** @type {?} */ (elementRef.nativeElement))).classList.add(attr);
+                ((/** @type {?} */ (_this._getHostElement()))).classList.add(attr);
             }
         }
         _this._focusMonitor.monitor(_this._elementRef, true);
@@ -7114,7 +7172,7 @@ var MatButtonToggleGroup = /** @class */ (function () {
          */
         function () {
             /** @type {?} */
-            var selected = this._selectionModel.selected;
+            var selected = this._selectionModel ? this._selectionModel.selected : [];
             return this.multiple ? selected : (selected[0] || null);
         },
         enumerable: true,
@@ -7297,11 +7355,16 @@ var MatButtonToggleGroup = /** @class */ (function () {
         if (!this.multiple && this.selected && !toggle.checked) {
             ((/** @type {?} */ (this.selected))).checked = false;
         }
-        if (select) {
-            this._selectionModel.select(toggle);
+        if (this._selectionModel) {
+            if (select) {
+                this._selectionModel.select(toggle);
+            }
+            else {
+                this._selectionModel.deselect(toggle);
+            }
         }
         else {
-            this._selectionModel.deselect(toggle);
+            deferEvents = true;
         }
         // We need to defer in some cases in order to avoid "changed after checked errors", however
         // the side-effect is that we may end up updating the model value out of sequence in others
@@ -7324,7 +7387,7 @@ var MatButtonToggleGroup = /** @class */ (function () {
      * @return {?}
      */
     function (toggle) {
-        return this._selectionModel.isSelected(toggle);
+        return this._selectionModel && this._selectionModel.isSelected(toggle);
     };
     /** Determines whether a button toggle should be checked on init. */
     /**
@@ -7962,18 +8025,27 @@ var MatCardAvatar = /** @class */ (function () {
  * - mat-card-footer
  */
 var MatCard = /** @class */ (function () {
-    function MatCard() {
+    // @breaking-change 9.0.0 `_animationMode` parameter to be made required.
+    function MatCard(_animationMode) {
+        this._animationMode = _animationMode;
     }
     MatCard.decorators = [
         { type: core.Component, args: [{selector: 'mat-card',
                     exportAs: 'matCard',
                     template: "<ng-content></ng-content><ng-content select=\"mat-card-footer\"></ng-content>",
-                    styles: [".mat-card{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:16px;border-radius:4px}.mat-card .mat-divider-horizontal{position:absolute;left:0;width:100%}[dir=rtl] .mat-card .mat-divider-horizontal{left:auto;right:0}.mat-card .mat-divider-horizontal.mat-divider-inset{position:static;margin:0}[dir=rtl] .mat-card .mat-divider-horizontal.mat-divider-inset{margin-right:0}@media (-ms-high-contrast:active){.mat-card{outline:solid 1px}}.mat-card-actions,.mat-card-content,.mat-card-subtitle{display:block;margin-bottom:16px}.mat-card-title{display:block;margin-bottom:8px}.mat-card-actions{margin-left:-8px;margin-right:-8px;padding:8px 0}.mat-card-actions-align-end{display:flex;justify-content:flex-end}.mat-card-image{width:calc(100% + 32px);margin:0 -16px 16px -16px}.mat-card-footer{display:block;margin:0 -16px -16px -16px}.mat-card-actions .mat-button,.mat-card-actions .mat-raised-button{margin:0 8px}.mat-card-header{display:flex;flex-direction:row}.mat-card-header .mat-card-title{margin-bottom:12px}.mat-card-header-text{margin:0 16px}.mat-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0;object-fit:cover}.mat-card-title-group{display:flex;justify-content:space-between}.mat-card-sm-image{width:80px;height:80px}.mat-card-md-image{width:112px;height:112px}.mat-card-lg-image{width:152px;height:152px}.mat-card-xl-image{width:240px;height:240px;margin:-8px}.mat-card-title-group>.mat-card-xl-image{margin:-8px 0 8px}@media (max-width:599px){.mat-card-title-group{margin:0}.mat-card-xl-image{margin-left:0;margin-right:0}}.mat-card-content>:first-child,.mat-card>:first-child{margin-top:0}.mat-card-content>:last-child:not(.mat-card-footer),.mat-card>:last-child:not(.mat-card-footer){margin-bottom:0}.mat-card-image:first-child{margin-top:-16px;border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-card>.mat-card-actions:last-child{margin-bottom:-8px;padding-bottom:0}.mat-card-actions .mat-button:first-child,.mat-card-actions .mat-raised-button:first-child{margin-left:0;margin-right:0}.mat-card-subtitle:not(:first-child),.mat-card-title:not(:first-child){margin-top:-4px}.mat-card-header .mat-card-subtitle:not(:first-child){margin-top:-8px}.mat-card>.mat-card-xl-image:first-child{margin-top:-8px}.mat-card>.mat-card-xl-image:last-child{margin-bottom:-8px}"],
+                    styles: [".mat-card{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:16px;border-radius:4px}._mat-animation-noopable.mat-card{transition:none;animation:none}.mat-card .mat-divider-horizontal{position:absolute;left:0;width:100%}[dir=rtl] .mat-card .mat-divider-horizontal{left:auto;right:0}.mat-card .mat-divider-horizontal.mat-divider-inset{position:static;margin:0}[dir=rtl] .mat-card .mat-divider-horizontal.mat-divider-inset{margin-right:0}@media (-ms-high-contrast:active){.mat-card{outline:solid 1px}}.mat-card-actions,.mat-card-content,.mat-card-subtitle{display:block;margin-bottom:16px}.mat-card-title{display:block;margin-bottom:8px}.mat-card-actions{margin-left:-8px;margin-right:-8px;padding:8px 0}.mat-card-actions-align-end{display:flex;justify-content:flex-end}.mat-card-image{width:calc(100% + 32px);margin:0 -16px 16px -16px}.mat-card-footer{display:block;margin:0 -16px -16px -16px}.mat-card-actions .mat-button,.mat-card-actions .mat-raised-button{margin:0 8px}.mat-card-header{display:flex;flex-direction:row}.mat-card-header .mat-card-title{margin-bottom:12px}.mat-card-header-text{margin:0 16px}.mat-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0;object-fit:cover}.mat-card-title-group{display:flex;justify-content:space-between}.mat-card-sm-image{width:80px;height:80px}.mat-card-md-image{width:112px;height:112px}.mat-card-lg-image{width:152px;height:152px}.mat-card-xl-image{width:240px;height:240px;margin:-8px}.mat-card-title-group>.mat-card-xl-image{margin:-8px 0 8px}@media (max-width:599px){.mat-card-title-group{margin:0}.mat-card-xl-image{margin-left:0;margin-right:0}}.mat-card-content>:first-child,.mat-card>:first-child{margin-top:0}.mat-card-content>:last-child:not(.mat-card-footer),.mat-card>:last-child:not(.mat-card-footer){margin-bottom:0}.mat-card-image:first-child{margin-top:-16px;border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-card>.mat-card-actions:last-child{margin-bottom:-8px;padding-bottom:0}.mat-card-actions .mat-button:first-child,.mat-card-actions .mat-raised-button:first-child{margin-left:0;margin-right:0}.mat-card-subtitle:not(:first-child),.mat-card-title:not(:first-child){margin-top:-4px}.mat-card-header .mat-card-subtitle:not(:first-child){margin-top:-8px}.mat-card>.mat-card-xl-image:first-child{margin-top:-8px}.mat-card>.mat-card-xl-image:last-child{margin-bottom:-8px}"],
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    host: { 'class': 'mat-card' }
+                    host: {
+                        'class': 'mat-card',
+                        '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+                    }
                 },] },
     ];
+    /** @nocollapse */
+    MatCard.ctorParameters = function () { return [
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
+    ]; };
     return MatCard;
 }());
 /**
@@ -8142,7 +8214,7 @@ var MatCheckbox = /** @class */ (function (_super) {
         _this._clickAction = _clickAction;
         _this._animationMode = _animationMode;
         /**
-         * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
+         * Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will
          * take precedence so this may be omitted.
          */
         _this.ariaLabel = '';
@@ -8640,7 +8712,7 @@ var MatCheckbox = /** @class */ (function (_super) {
     MatCheckbox.decorators = [
         { type: core.Component, args: [{selector: 'mat-checkbox',
                     template: "<label [attr.for]=\"inputId\" class=\"mat-checkbox-layout\" #label><div class=\"mat-checkbox-inner-container\" [class.mat-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\"><input #input class=\"mat-checkbox-input cdk-visually-hidden\" type=\"checkbox\" [id]=\"inputId\" [required]=\"required\" [checked]=\"checked\" [attr.value]=\"value\" [disabled]=\"disabled\" [attr.name]=\"name\" [tabIndex]=\"tabIndex\" [indeterminate]=\"indeterminate\" [attr.aria-label]=\"ariaLabel || null\" [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-checked]=\"_getAriaChecked()\" (change)=\"_onInteractionEvent($event)\" (click)=\"_onInputClick($event)\"><div matRipple class=\"mat-checkbox-ripple\" [matRippleTrigger]=\"label\" [matRippleDisabled]=\"_isRippleDisabled()\" [matRippleRadius]=\"20\" [matRippleCentered]=\"true\" [matRippleAnimation]=\"{enterDuration: 150}\"><div class=\"mat-ripple-element mat-checkbox-persistent-ripple\"></div></div><div class=\"mat-checkbox-frame\"></div><div class=\"mat-checkbox-background\"><svg version=\"1.1\" focusable=\"false\" class=\"mat-checkbox-checkmark\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"><path class=\"mat-checkbox-checkmark-path\" fill=\"none\" stroke=\"white\" d=\"M4.1,12.7 9,17.6 20.3,6.3\"/></svg><div class=\"mat-checkbox-mixedmark\"></div></div></div><span class=\"mat-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"_onLabelTextChange()\"><span style=\"display:none\">&nbsp;</span><ng-content></ng-content></span></label>",
-                    styles: ["@keyframes mat-checkbox-fade-in-background{0%{opacity:0}50%{opacity:1}}@keyframes mat-checkbox-fade-out-background{0%,50%{opacity:1}100%{opacity:0}}@keyframes mat-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:22.91026}50%{animation-timing-function:cubic-bezier(0,0,.2,.1)}100%{stroke-dashoffset:0}}@keyframes mat-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{transform:scaleX(0)}68.2%{animation-timing-function:cubic-bezier(0,0,0,1)}100%{transform:scaleX(1)}}@keyframes mat-checkbox-checked-unchecked-checkmark-path{from{animation-timing-function:cubic-bezier(.4,0,1,1);stroke-dashoffset:0}to{stroke-dashoffset:-22.91026}}@keyframes mat-checkbox-checked-indeterminate-checkmark{from{animation-timing-function:cubic-bezier(0,0,.2,.1);opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(45deg)}}@keyframes mat-checkbox-indeterminate-checked-checkmark{from{animation-timing-function:cubic-bezier(.14,0,0,1);opacity:0;transform:rotate(45deg)}to{opacity:1;transform:rotate(360deg)}}@keyframes mat-checkbox-checked-indeterminate-mixedmark{from{animation-timing-function:cubic-bezier(0,0,.2,.1);opacity:0;transform:rotate(-45deg)}to{opacity:1;transform:rotate(0)}}@keyframes mat-checkbox-indeterminate-checked-mixedmark{from{animation-timing-function:cubic-bezier(.14,0,0,1);opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(315deg)}}@keyframes mat-checkbox-indeterminate-unchecked-mixedmark{0%{animation-timing-function:linear;opacity:1;transform:scaleX(1)}100%,32.8%{opacity:0;transform:scaleX(0)}}.mat-checkbox-background,.mat-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:2px;box-sizing:border-box;pointer-events:none}.mat-checkbox{transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);cursor:pointer;-webkit-tap-highlight-color:transparent}._mat-animation-noopable.mat-checkbox{transition:none;animation:none}.mat-checkbox .mat-ripple-element:not(.mat-checkbox-persistent-ripple){opacity:.16}.mat-checkbox-layout{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap}.mat-checkbox-label{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.mat-checkbox-inner-container{display:inline-block;height:16px;line-height:0;margin:auto;margin-right:8px;order:0;position:relative;vertical-align:middle;white-space:nowrap;width:16px;flex-shrink:0}[dir=rtl] .mat-checkbox-inner-container{margin-left:8px;margin-right:auto}.mat-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mat-checkbox-frame{background-color:transparent;transition:border-color 90ms cubic-bezier(0,0,.2,.1);border-width:2px;border-style:solid}._mat-animation-noopable .mat-checkbox-frame{transition:none}@media (-ms-high-contrast:active){.mat-checkbox.cdk-keyboard-focused .mat-checkbox-frame{border-style:dotted}}.mat-checkbox-background{align-items:center;display:inline-flex;justify-content:center;transition:background-color 90ms cubic-bezier(0,0,.2,.1),opacity 90ms cubic-bezier(0,0,.2,.1)}._mat-animation-noopable .mat-checkbox-background{transition:none}.mat-checkbox-persistent-ripple{width:100%;height:100%;transform:none}.mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple{opacity:.04}.mat-checkbox.cdk-keyboard-focused .mat-checkbox-persistent-ripple{opacity:.12}.mat-checkbox-persistent-ripple,.mat-checkbox.mat-disabled .mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple{opacity:0}@media (hover:none){.mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple{display:none}}.mat-checkbox-checkmark{top:0;left:0;right:0;bottom:0;position:absolute;width:100%}.mat-checkbox-checkmark-path{stroke-dashoffset:22.91026;stroke-dasharray:22.91026;stroke-width:2.13333px}.mat-checkbox-mixedmark{width:calc(100% - 6px);height:2px;opacity:0;transform:scaleX(0) rotate(0);border-radius:2px}@media (-ms-high-contrast:active){.mat-checkbox-mixedmark{height:0;border-top:solid 2px;margin-top:2px}}.mat-checkbox-label-before .mat-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mat-checkbox-label-before .mat-checkbox-inner-container{margin-left:auto;margin-right:8px}.mat-checkbox-checked .mat-checkbox-checkmark{opacity:1}.mat-checkbox-checked .mat-checkbox-checkmark-path{stroke-dashoffset:0}.mat-checkbox-checked .mat-checkbox-mixedmark{transform:scaleX(1) rotate(-45deg)}.mat-checkbox-indeterminate .mat-checkbox-checkmark{opacity:0;transform:rotate(45deg)}.mat-checkbox-indeterminate .mat-checkbox-checkmark-path{stroke-dashoffset:0}.mat-checkbox-indeterminate .mat-checkbox-mixedmark{opacity:1;transform:scaleX(1) rotate(0)}.mat-checkbox-unchecked .mat-checkbox-background{background-color:transparent}.mat-checkbox-disabled{cursor:default}.mat-checkbox-anim-unchecked-checked .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-in-background}.mat-checkbox-anim-unchecked-checked .mat-checkbox-checkmark-path{animation:180ms linear 0s mat-checkbox-unchecked-checked-checkmark-path}.mat-checkbox-anim-unchecked-indeterminate .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-in-background}.mat-checkbox-anim-unchecked-indeterminate .mat-checkbox-mixedmark{animation:90ms linear 0s mat-checkbox-unchecked-indeterminate-mixedmark}.mat-checkbox-anim-checked-unchecked .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-out-background}.mat-checkbox-anim-checked-unchecked .mat-checkbox-checkmark-path{animation:90ms linear 0s mat-checkbox-checked-unchecked-checkmark-path}.mat-checkbox-anim-checked-indeterminate .mat-checkbox-checkmark{animation:90ms linear 0s mat-checkbox-checked-indeterminate-checkmark}.mat-checkbox-anim-checked-indeterminate .mat-checkbox-mixedmark{animation:90ms linear 0s mat-checkbox-checked-indeterminate-mixedmark}.mat-checkbox-anim-indeterminate-checked .mat-checkbox-checkmark{animation:.5s linear 0s mat-checkbox-indeterminate-checked-checkmark}.mat-checkbox-anim-indeterminate-checked .mat-checkbox-mixedmark{animation:.5s linear 0s mat-checkbox-indeterminate-checked-mixedmark}.mat-checkbox-anim-indeterminate-unchecked .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-out-background}.mat-checkbox-anim-indeterminate-unchecked .mat-checkbox-mixedmark{animation:.3s linear 0s mat-checkbox-indeterminate-unchecked-mixedmark}.mat-checkbox-input{bottom:0;left:50%}.mat-checkbox .mat-checkbox-ripple{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}"],
+                    styles: ["@keyframes mat-checkbox-fade-in-background{0%{opacity:0}50%{opacity:1}}@keyframes mat-checkbox-fade-out-background{0%,50%{opacity:1}100%{opacity:0}}@keyframes mat-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:22.91026}50%{animation-timing-function:cubic-bezier(0,0,.2,.1)}100%{stroke-dashoffset:0}}@keyframes mat-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{transform:scaleX(0)}68.2%{animation-timing-function:cubic-bezier(0,0,0,1)}100%{transform:scaleX(1)}}@keyframes mat-checkbox-checked-unchecked-checkmark-path{from{animation-timing-function:cubic-bezier(.4,0,1,1);stroke-dashoffset:0}to{stroke-dashoffset:-22.91026}}@keyframes mat-checkbox-checked-indeterminate-checkmark{from{animation-timing-function:cubic-bezier(0,0,.2,.1);opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(45deg)}}@keyframes mat-checkbox-indeterminate-checked-checkmark{from{animation-timing-function:cubic-bezier(.14,0,0,1);opacity:0;transform:rotate(45deg)}to{opacity:1;transform:rotate(360deg)}}@keyframes mat-checkbox-checked-indeterminate-mixedmark{from{animation-timing-function:cubic-bezier(0,0,.2,.1);opacity:0;transform:rotate(-45deg)}to{opacity:1;transform:rotate(0)}}@keyframes mat-checkbox-indeterminate-checked-mixedmark{from{animation-timing-function:cubic-bezier(.14,0,0,1);opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(315deg)}}@keyframes mat-checkbox-indeterminate-unchecked-mixedmark{0%{animation-timing-function:linear;opacity:1;transform:scaleX(1)}100%,32.8%{opacity:0;transform:scaleX(0)}}.mat-checkbox-background,.mat-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:2px;box-sizing:border-box;pointer-events:none}.mat-checkbox{transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);cursor:pointer;-webkit-tap-highlight-color:transparent}._mat-animation-noopable.mat-checkbox{transition:none;animation:none}.mat-checkbox .mat-ripple-element:not(.mat-checkbox-persistent-ripple){opacity:.16}.mat-checkbox-layout{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap}.mat-checkbox-label{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.mat-checkbox-inner-container{display:inline-block;height:16px;line-height:0;margin:auto;margin-right:8px;order:0;position:relative;vertical-align:middle;white-space:nowrap;width:16px;flex-shrink:0}[dir=rtl] .mat-checkbox-inner-container{margin-left:8px;margin-right:auto}.mat-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mat-checkbox-frame{background-color:transparent;transition:border-color 90ms cubic-bezier(0,0,.2,.1);border-width:2px;border-style:solid}._mat-animation-noopable .mat-checkbox-frame{transition:none}@media (-ms-high-contrast:active){.mat-checkbox.cdk-keyboard-focused .mat-checkbox-frame{border-style:dotted}}.mat-checkbox-background{align-items:center;display:inline-flex;justify-content:center;transition:background-color 90ms cubic-bezier(0,0,.2,.1),opacity 90ms cubic-bezier(0,0,.2,.1)}._mat-animation-noopable .mat-checkbox-background{transition:none}.mat-checkbox-persistent-ripple{width:100%;height:100%;transform:none}.mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple{opacity:.04}.mat-checkbox.cdk-keyboard-focused .mat-checkbox-persistent-ripple{opacity:.12}.mat-checkbox-persistent-ripple,.mat-checkbox.mat-checkbox-disabled .mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple{opacity:0}@media (hover:none){.mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple{display:none}}.mat-checkbox-checkmark{top:0;left:0;right:0;bottom:0;position:absolute;width:100%}.mat-checkbox-checkmark-path{stroke-dashoffset:22.91026;stroke-dasharray:22.91026;stroke-width:2.13333px}.mat-checkbox-mixedmark{width:calc(100% - 6px);height:2px;opacity:0;transform:scaleX(0) rotate(0);border-radius:2px}@media (-ms-high-contrast:active){.mat-checkbox-mixedmark{height:0;border-top:solid 2px;margin-top:2px}}.mat-checkbox-label-before .mat-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mat-checkbox-label-before .mat-checkbox-inner-container{margin-left:auto;margin-right:8px}.mat-checkbox-checked .mat-checkbox-checkmark{opacity:1}.mat-checkbox-checked .mat-checkbox-checkmark-path{stroke-dashoffset:0}.mat-checkbox-checked .mat-checkbox-mixedmark{transform:scaleX(1) rotate(-45deg)}.mat-checkbox-indeterminate .mat-checkbox-checkmark{opacity:0;transform:rotate(45deg)}.mat-checkbox-indeterminate .mat-checkbox-checkmark-path{stroke-dashoffset:0}.mat-checkbox-indeterminate .mat-checkbox-mixedmark{opacity:1;transform:scaleX(1) rotate(0)}.mat-checkbox-unchecked .mat-checkbox-background{background-color:transparent}.mat-checkbox-disabled{cursor:default}.mat-checkbox-anim-unchecked-checked .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-in-background}.mat-checkbox-anim-unchecked-checked .mat-checkbox-checkmark-path{animation:180ms linear 0s mat-checkbox-unchecked-checked-checkmark-path}.mat-checkbox-anim-unchecked-indeterminate .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-in-background}.mat-checkbox-anim-unchecked-indeterminate .mat-checkbox-mixedmark{animation:90ms linear 0s mat-checkbox-unchecked-indeterminate-mixedmark}.mat-checkbox-anim-checked-unchecked .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-out-background}.mat-checkbox-anim-checked-unchecked .mat-checkbox-checkmark-path{animation:90ms linear 0s mat-checkbox-checked-unchecked-checkmark-path}.mat-checkbox-anim-checked-indeterminate .mat-checkbox-checkmark{animation:90ms linear 0s mat-checkbox-checked-indeterminate-checkmark}.mat-checkbox-anim-checked-indeterminate .mat-checkbox-mixedmark{animation:90ms linear 0s mat-checkbox-checked-indeterminate-mixedmark}.mat-checkbox-anim-indeterminate-checked .mat-checkbox-checkmark{animation:.5s linear 0s mat-checkbox-indeterminate-checked-checkmark}.mat-checkbox-anim-indeterminate-checked .mat-checkbox-mixedmark{animation:.5s linear 0s mat-checkbox-indeterminate-checked-mixedmark}.mat-checkbox-anim-indeterminate-unchecked .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-out-background}.mat-checkbox-anim-indeterminate-unchecked .mat-checkbox-mixedmark{animation:.3s linear 0s mat-checkbox-indeterminate-unchecked-mixedmark}.mat-checkbox-input{bottom:0;left:50%}.mat-checkbox .mat-checkbox-ripple{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}"],
                     exportAs: 'matCheckbox',
                     host: {
                         'class': 'mat-checkbox',
@@ -8714,7 +8786,6 @@ var MatCheckboxRequiredValidator = /** @class */ (function (_super) {
         { type: core.Directive, args: [{
                     selector: "mat-checkbox[required][formControlName],\n             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]",
                     providers: [MAT_CHECKBOX_REQUIRED_VALIDATOR],
-                    host: { '[attr.required]': 'required ? "" : null' }
                 },] },
     ];
     return MatCheckboxRequiredValidator;
@@ -8825,7 +8896,9 @@ var MatChipTrailingIcon = /** @class */ (function () {
  */
 var MatChip = /** @class */ (function (_super) {
     __extends(MatChip, _super);
-    function MatChip(_elementRef, _ngZone, platform$$1, globalRippleOptions) {
+    function MatChip(_elementRef, _ngZone, platform$$1, globalRippleOptions, 
+    // @breaking-change 8.0.0 `animationMode` parameter to become required.
+    animationMode) {
         var _this = _super.call(this, _elementRef) || this;
         _this._elementRef = _elementRef;
         _this._ngZone = _ngZone;
@@ -8868,6 +8941,7 @@ var MatChip = /** @class */ (function (_super) {
         _this._chipRipple = new RippleRenderer(_this, _ngZone, _elementRef, platform$$1);
         _this._chipRipple.setupTriggerEvents(_elementRef.nativeElement);
         _this.rippleConfig = globalRippleOptions || {};
+        _this._animationsDisabled = animationMode === 'NoopAnimations';
         return _this;
     }
     Object.defineProperty(MatChip.prototype, "rippleDisabled", {
@@ -9230,6 +9304,7 @@ var MatChip = /** @class */ (function (_super) {
                         '[class.mat-chip-with-avatar]': 'avatar',
                         '[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
                         '[class.mat-chip-disabled]': 'disabled',
+                        '[class._mat-animation-noopable]': '_animationsDisabled',
                         '[attr.disabled]': 'disabled || null',
                         '[attr.aria-disabled]': 'disabled.toString()',
                         '[attr.aria-selected]': 'ariaSelected',
@@ -9245,7 +9320,8 @@ var MatChip = /** @class */ (function (_super) {
         { type: core.ElementRef },
         { type: core.NgZone },
         { type: platform.Platform },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_RIPPLE_GLOBAL_OPTIONS,] }] }
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_RIPPLE_GLOBAL_OPTIONS,] }] },
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
     ]; };
     MatChip.propDecorators = {
         avatar: [{ type: core.ContentChild, args: [MatChipAvatar, { static: false },] }],
@@ -10641,7 +10717,7 @@ var MatChipList = /** @class */ (function (_super) {
                         '[id]': '_uid',
                     },
                     providers: [{ provide: MatFormFieldControl, useExisting: MatChipList }],
-                    styles: [".mat-chip{position:relative;overflow:hidden;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}.mat-standard-chip{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:inline-flex;padding:7px 12px;border-radius:16px;align-items:center;cursor:default;min-height:32px;height:1px}.mat-standard-chip .mat-chip-remove.mat-icon{width:18px;height:18px}.mat-standard-chip::after{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:inherit;opacity:0;content:'';pointer-events:none;transition:opacity .2s cubic-bezier(.35,0,.25,1)}.mat-standard-chip:hover::after{opacity:.12}.mat-standard-chip:focus{outline:0}.mat-standard-chip:focus::after{opacity:.16}@media (-ms-high-contrast:active){.mat-standard-chip{outline:solid 1px}.mat-standard-chip:focus{outline:dotted 2px}}.mat-standard-chip.mat-chip-disabled::after{opacity:0}.mat-standard-chip.mat-chip-disabled .mat-chip-remove,.mat-standard-chip.mat-chip-disabled .mat-chip-trailing-icon{cursor:default}.mat-standard-chip.mat-chip-with-avatar,.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-top:0;padding-bottom:0}.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-right:8px;padding-left:0}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-left:8px;padding-right:0}.mat-standard-chip.mat-chip-with-trailing-icon{padding-top:7px;padding-bottom:7px;padding-right:8px;padding-left:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon{padding-left:8px;padding-right:12px}.mat-standard-chip.mat-chip-with-avatar{padding-left:0;padding-right:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-avatar{padding-right:0;padding-left:12px}.mat-standard-chip .mat-chip-avatar{width:24px;height:24px;margin-right:8px;margin-left:4px}[dir=rtl] .mat-standard-chip .mat-chip-avatar{margin-left:8px;margin-right:4px}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{width:18px;height:18px;cursor:pointer}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{margin-left:8px;margin-right:0}[dir=rtl] .mat-standard-chip .mat-chip-remove,[dir=rtl] .mat-standard-chip .mat-chip-trailing-icon{margin-right:8px;margin-left:0}.mat-chip-list-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;margin:-4px}.mat-chip-list-wrapper .mat-standard-chip,.mat-chip-list-wrapper input.mat-input-element{margin:4px}.mat-chip-list-stacked .mat-chip-list-wrapper{flex-direction:column;align-items:flex-start}.mat-chip-list-stacked .mat-chip-list-wrapper .mat-standard-chip{width:100%}.mat-chip-avatar{border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden;object-fit:cover}input.mat-chip-input{width:150px;margin:4px;flex:1 0 150px}"],
+                    styles: [".mat-chip{position:relative;overflow:hidden;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}.mat-standard-chip{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:inline-flex;padding:7px 12px;border-radius:16px;align-items:center;cursor:default;min-height:32px;height:1px}._mat-animation-noopable.mat-standard-chip{transition:none;animation:none}.mat-standard-chip .mat-chip-remove.mat-icon{width:18px;height:18px}.mat-standard-chip::after{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:inherit;opacity:0;content:'';pointer-events:none;transition:opacity .2s cubic-bezier(.35,0,.25,1)}.mat-standard-chip:hover::after{opacity:.12}.mat-standard-chip:focus{outline:0}.mat-standard-chip:focus::after{opacity:.16}@media (-ms-high-contrast:active){.mat-standard-chip{outline:solid 1px}.mat-standard-chip:focus{outline:dotted 2px}}.mat-standard-chip.mat-chip-disabled::after{opacity:0}.mat-standard-chip.mat-chip-disabled .mat-chip-remove,.mat-standard-chip.mat-chip-disabled .mat-chip-trailing-icon{cursor:default}.mat-standard-chip.mat-chip-with-avatar,.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-top:0;padding-bottom:0}.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-right:8px;padding-left:0}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-left:8px;padding-right:0}.mat-standard-chip.mat-chip-with-trailing-icon{padding-top:7px;padding-bottom:7px;padding-right:8px;padding-left:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon{padding-left:8px;padding-right:12px}.mat-standard-chip.mat-chip-with-avatar{padding-left:0;padding-right:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-avatar{padding-right:0;padding-left:12px}.mat-standard-chip .mat-chip-avatar{width:24px;height:24px;margin-right:8px;margin-left:4px}[dir=rtl] .mat-standard-chip .mat-chip-avatar{margin-left:8px;margin-right:4px}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{width:18px;height:18px;cursor:pointer}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{margin-left:8px;margin-right:0}[dir=rtl] .mat-standard-chip .mat-chip-remove,[dir=rtl] .mat-standard-chip .mat-chip-trailing-icon{margin-right:8px;margin-left:0}.mat-chip-list-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;margin:-4px}.mat-chip-list-wrapper .mat-standard-chip,.mat-chip-list-wrapper input.mat-input-element{margin:4px}.mat-chip-list-stacked .mat-chip-list-wrapper{flex-direction:column;align-items:flex-start}.mat-chip-list-stacked .mat-chip-list-wrapper .mat-standard-chip{width:100%}.mat-chip-avatar{border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden;object-fit:cover}input.mat-chip-input{width:150px;margin:4px;flex:1 0 150px}"],
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] },
@@ -11183,15 +11259,29 @@ var MatDialogContainer = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
+        /** @type {?} */
+        var element = this._elementRef.nativeElement;
         if (!this._focusTrap) {
-            this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+            this._focusTrap = this._focusTrapFactory.create(element);
         }
-        // If were to attempt to focus immediately, then the content of the dialog would not yet be
+        // If we were to attempt to focus immediately, then the content of the dialog would not yet be
         // ready in instances where change detection has to run first. To deal with this, we simply
         // wait for the microtask queue to be empty.
         if (this._config.autoFocus) {
             this._focusTrap.focusInitialElementWhenReady();
         }
+        else {
+            /** @type {?} */
+            var activeElement = this._document.activeElement;
+            // Otherwise ensure that focus is on the dialog container. It's possible that a different
+            // component tried to move focus while the open animation was running. See:
+            // https://github.com/angular/components/issues/16215. Note that we only want to do this
+            // if the focus isn't inside the dialog already, because it's possible that the consumer
+            // turned off `autoFocus` in order to move focus themselves.
+            if (activeElement !== element && !element.contains(activeElement)) {
+                element.focus();
+            }
+        }
     };
     /** Restores focus to the element that was focused before the dialog opened. */
     /**
@@ -11393,7 +11483,10 @@ MatDialogRef = /** @class */ (function () {
         function (event) { return event.phaseName === 'done' && event.toState === 'exit'; })), operators.take(1)).subscribe((/**
          * @return {?}
          */
-        function () { return _this._overlayRef.dispose(); }));
+        function () {
+            clearTimeout(_this._closeFallbackTimeout);
+            _this._overlayRef.dispose();
+        }));
         _overlayRef.detachments().subscribe((/**
          * @return {?}
          */
@@ -11446,12 +11539,24 @@ MatDialogRef = /** @class */ (function () {
          */
         function (event) { return event.phaseName === 'start'; })), operators.take(1))
             .subscribe((/**
+         * @param {?} event
          * @return {?}
          */
-        function () {
+        function (event) {
             _this._beforeClosed.next(dialogResult);
             _this._beforeClosed.complete();
             _this._overlayRef.detachBackdrop();
+            // The logic that disposes of the overlay depends on the exit animation completing, however
+            // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
+            // timeout which will clean everything up if the animation hasn't fired within the specified
+            // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
+            // vast majority of cases the timeout will have been cleared before it has the chance to fire.
+            _this._closeFallbackTimeout = setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                _this._overlayRef.dispose();
+            }), event.totalTime + 100);
         }));
         this._containerInstance._startExitAnimation();
     };
@@ -13402,7 +13507,7 @@ var MatCalendarBody = /** @class */ (function () {
     };
     MatCalendarBody.decorators = [
         { type: core.Component, args: [{selector: '[mat-calendar-body]',
-                    template: "<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\"><td class=\"mat-calendar-body-label\" [attr.colspan]=\"numCols\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{label}}</td></tr><tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\"><td *ngIf=\"rowIndex === 0 && _firstRowOffset\" aria-hidden=\"true\" class=\"mat-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [ngClass]=\"item.cssClasses\" [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\" [class.mat-calendar-body-disabled]=\"!item.enabled\" [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\" [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.enabled || null\" [attr.aria-selected]=\"selectedValue === item.value\" (click)=\"_cellClicked(item)\" [style.width]=\"_cellWidth\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\"><div class=\"mat-calendar-body-cell-content\" [class.mat-calendar-body-selected]=\"selectedValue === item.value\" [class.mat-calendar-body-today]=\"todayValue === item.value\">{{item.displayValue}}</div></td></tr>",
+                    template: "<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\"><td class=\"mat-calendar-body-label\" [attr.colspan]=\"numCols\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{label}}</td></tr><tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\"><td *ngIf=\"rowIndex === 0 && _firstRowOffset\" aria-hidden=\"true\" class=\"mat-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [ngClass]=\"item.cssClasses\" [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\" [class.mat-calendar-body-disabled]=\"!item.enabled\" [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\" [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.enabled || null\" [attr.aria-selected]=\"selectedValue === item.value\" (click)=\"_cellClicked(item)\" [style.width]=\"_cellWidth\" [style.paddingTop]=\"_cellPadding\" role=\"button\" [style.paddingBottom]=\"_cellPadding\"><div class=\"mat-calendar-body-cell-content\" [class.mat-calendar-body-selected]=\"selectedValue === item.value\" [class.mat-calendar-body-today]=\"todayValue === item.value\">{{item.displayValue}}</div></td></tr>",
                     styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.71429%;padding-right:4.71429%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;cursor:pointer}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px}@media (-ms-high-contrast:active){.mat-calendar-body-cell-content{border:none}}@media (-ms-high-contrast:active){.mat-calendar-body-selected,.mat-datepicker-popup:not(:empty){outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){outline:dotted 2px}}[dir=rtl] .mat-calendar-body-label{text-align:right}"],
                     host: {
                         'class': 'mat-calendar-body',
@@ -13911,8 +14016,7 @@ var MatMultiYearView = /** @class */ (function () {
             /** @type {?} */
             var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
             this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
-            if (Math.floor(this._dateAdapter.getYear(oldActiveDate) / yearsPerPage) !=
-                Math.floor(this._dateAdapter.getYear(this._activeDate) / yearsPerPage)) {
+            if (!isSameMultiYearView(this._dateAdapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {
                 this._init();
             }
         },
@@ -13992,13 +14096,18 @@ var MatMultiYearView = /** @class */ (function () {
     function () {
         var _this = this;
         this._todayYear = this._dateAdapter.getYear(this._dateAdapter.today());
+        // We want a range years such that we maximize the number of
+        // enabled dates visible at once. This prevents issues where the minimum year
+        // is the last item of a page OR the maximum year is the first item of a page.
+        // The offset from the active year to the "slot" for the starting year is the
+        // *actual* first rendered year in the multi-year view.
         /** @type {?} */
         var activeYear = this._dateAdapter.getYear(this._activeDate);
         /** @type {?} */
-        var activeOffset = activeYear % yearsPerPage;
+        var minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);
         this._years = [];
         for (var i = 0, row = []; i < yearsPerPage; i++) {
-            row.push(activeYear - activeOffset + i);
+            row.push(minYearOfPage + i);
             if (row.length == yearsPerRow) {
                 this._years.push(row.map((/**
                  * @param {?} year
@@ -14041,12 +14150,6 @@ var MatMultiYearView = /** @class */ (function () {
      * @return {?}
      */
     function (event) {
-        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
-        // disabled ones from being selected. This may not be ideal, we should look into whether
-        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
-        // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
-        // disabled ones from being selected. This may not be ideal, we should look into whether
-        // navigation should skip over disabled dates, and if so, how to implement that efficiently.
         /** @type {?} */
         var oldActiveDate = this._activeDate;
         /** @type {?} */
@@ -14065,10 +14168,10 @@ var MatMultiYearView = /** @class */ (function () {
                 this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);
                 break;
             case keycodes.HOME:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -this._dateAdapter.getYear(this._activeDate) % yearsPerPage);
+                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate));
                 break;
             case keycodes.END:
-                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - this._dateAdapter.getYear(this._activeDate) % yearsPerPage - 1);
+                this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) - 1);
                 break;
             case keycodes.PAGE_UP:
                 this.activeDate =
@@ -14100,7 +14203,7 @@ var MatMultiYearView = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        return this._dateAdapter.getYear(this.activeDate) % yearsPerPage;
+        return getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);
     };
     /** Focuses the active cell after the microtask queue is empty. */
     /**
@@ -14224,6 +14327,72 @@ var MatMultiYearView = /** @class */ (function () {
     };
     return MatMultiYearView;
 }());
+/**
+ * @template D
+ * @param {?} dateAdapter
+ * @param {?} date1
+ * @param {?} date2
+ * @param {?} minDate
+ * @param {?} maxDate
+ * @return {?}
+ */
+function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {
+    /** @type {?} */
+    var year1 = dateAdapter.getYear(date1);
+    /** @type {?} */
+    var year2 = dateAdapter.getYear(date2);
+    /** @type {?} */
+    var startingYear = getStartingYear(dateAdapter, minDate, maxDate);
+    return Math.floor((year1 - startingYear) / yearsPerPage) ===
+        Math.floor((year2 - startingYear) / yearsPerPage);
+}
+/**
+ * When the multi-year view is first opened, the active year will be in view.
+ * So we compute how many years are between the active year and the *slot* where our
+ * "startingYear" will render when paged into view.
+ * @template D
+ * @param {?} dateAdapter
+ * @param {?} activeDate
+ * @param {?} minDate
+ * @param {?} maxDate
+ * @return {?}
+ */
+function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {
+    /** @type {?} */
+    var activeYear = dateAdapter.getYear(activeDate);
+    return euclideanModulo((activeYear - getStartingYear(dateAdapter, minDate, maxDate)), yearsPerPage);
+}
+/**
+ * We pick a "starting" year such that either the maximum year would be at the end
+ * or the minimum year would be at the beginning of a page.
+ * @template D
+ * @param {?} dateAdapter
+ * @param {?} minDate
+ * @param {?} maxDate
+ * @return {?}
+ */
+function getStartingYear(dateAdapter, minDate, maxDate) {
+    /** @type {?} */
+    var startingYear = 0;
+    if (maxDate) {
+        /** @type {?} */
+        var maxYear = dateAdapter.getYear(maxDate);
+        startingYear = maxYear - yearsPerPage + 1;
+    }
+    else if (minDate) {
+        startingYear = dateAdapter.getYear(minDate);
+    }
+    return startingYear;
+}
+/**
+ * Gets remainder that is non-negative, even if first number is negative
+ * @param {?} a
+ * @param {?} b
+ * @return {?}
+ */
+function euclideanModulo(a, b) {
+    return (a % b + b) % b;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -14698,13 +14867,16 @@ var MatCalendarHeader = /** @class */ (function () {
             if (this.calendar.currentView == 'year') {
                 return this._dateAdapter.getYearName(this.calendar.activeDate);
             }
+            // The offset from the active year to the "slot" for the starting year is the
+            // *actual* first rendered year in the multi-year view, and the last year is
+            // just yearsPerPage - 1 away.
             /** @type {?} */
             var activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
             /** @type {?} */
-            var firstYearInView = this._dateAdapter.getYearName(this._dateAdapter.createDate(activeYear - activeYear % 24, 0, 1));
+            var minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.calendar.activeDate, this.calendar.minDate, this.calendar.maxDate);
             /** @type {?} */
-            var lastYearInView = this._dateAdapter.getYearName(this._dateAdapter.createDate(activeYear + yearsPerPage - 1 - activeYear % 24, 0, 1));
-            return firstYearInView + " \u2013 " + lastYearInView;
+            var maxYearOfPage = minYearOfPage + yearsPerPage - 1;
+            return minYearOfPage + " \u2013 " + maxYearOfPage;
         },
         enumerable: true,
         configurable: true
@@ -14845,8 +15017,7 @@ var MatCalendarHeader = /** @class */ (function () {
             return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2);
         }
         // Otherwise we are in 'multi-year' view.
-        return Math.floor(this._dateAdapter.getYear(date1) / yearsPerPage) ==
-            Math.floor(this._dateAdapter.getYear(date2) / yearsPerPage);
+        return isSameMultiYearView(this._dateAdapter, date1, date2, this.calendar.minDate, this.calendar.maxDate);
     };
     MatCalendarHeader.decorators = [
         { type: core.Component, args: [{selector: 'mat-calendar-header',
@@ -17079,6 +17250,25 @@ var MatExpansionPanel = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MatExpansionPanel.prototype, "togglePosition", {
+        /** The position of the expansion indicator. */
+        get: /**
+         * The position of the expansion indicator.
+         * @return {?}
+         */
+        function () {
+            return this._togglePosition || (this.accordion && this.accordion.togglePosition);
+        },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            this._togglePosition = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /** Determines whether the expansion panel should have spacing between it and its siblings. */
     /**
      * Determines whether the expansion panel should have spacing between it and its siblings.
@@ -17206,6 +17396,7 @@ var MatExpansionPanel = /** @class */ (function (_super) {
     ]; };
     MatExpansionPanel.propDecorators = {
         hideToggle: [{ type: core.Input }],
+        togglePosition: [{ type: core.Input }],
         afterExpand: [{ type: core.Output }],
         afterCollapse: [{ type: core.Output }],
         _lazyContent: [{ type: core.ContentChild, args: [MatExpansionPanelContent, { static: false },] }],
@@ -17244,13 +17435,17 @@ var MatExpansionPanelHeader = /** @class */ (function () {
         this._focusMonitor = _focusMonitor;
         this._changeDetectorRef = _changeDetectorRef;
         this._parentChangeSubscription = rxjs.Subscription.EMPTY;
+        /**
+         * Whether Angular animations in the panel header should be disabled.
+         */
+        this._animationsDisabled = true;
         /** @type {?} */
         var accordionHideToggleChange = panel.accordion ?
             panel.accordion._stateChanges.pipe(operators.filter((/**
              * @param {?} changes
              * @return {?}
              */
-            function (changes) { return !!changes['hideToggle']; }))) :
+            function (changes) { return !!(changes['hideToggle'] || changes['togglePosition']); }))) :
             rxjs.EMPTY;
         // Since the toggle state depends on an @Input on the panel, we
         // need to subscribe and trigger change detection manually.
@@ -17259,7 +17454,11 @@ var MatExpansionPanelHeader = /** @class */ (function () {
              * @param {?} changes
              * @return {?}
              */
-            function (changes) { return !!(changes['hideToggle'] || changes['disabled']); }))))
+            function (changes) {
+                return !!(changes['hideToggle'] ||
+                    changes['disabled'] ||
+                    changes['togglePosition']);
+            }))))
                 .subscribe((/**
              * @return {?}
              */
@@ -17288,6 +17487,23 @@ var MatExpansionPanelHeader = /** @class */ (function () {
             this.collapsedHeight = defaultOptions.collapsedHeight;
         }
     }
+    /**
+     * @return {?}
+     */
+    MatExpansionPanelHeader.prototype._animationStarted = /**
+     * @return {?}
+     */
+    function () {
+        // Currently the `expansionHeight` animation has a `void => collapsed` transition which is
+        // there to work around a bug in Angular (see #13088), however this introduces a different
+        // issue. The new transition will cause the header to animate in on init (see #16067), if the
+        // consumer has set a header height that is different from the default one. We work around it
+        // by disabling animations on the header and re-enabling them after the first animation has run.
+        // Note that Angular dispatches animation events even if animations are disabled. Ideally this
+        // wouldn't be necessary if we remove the `void => collapsed` transition, but we have to wait
+        // for https://github.com/angular/angular/issues/18847 to be resolved.
+        this._animationsDisabled = false;
+    };
     Object.defineProperty(MatExpansionPanelHeader.prototype, "disabled", {
         /**
          * Whether the associated panel is disabled. Implemented as a part of `FocusableOption`.
@@ -17352,6 +17568,18 @@ var MatExpansionPanelHeader = /** @class */ (function () {
     function () {
         return this.panel.id;
     };
+    /** Gets the toggle position for the header. */
+    /**
+     * Gets the toggle position for the header.
+     * @return {?}
+     */
+    MatExpansionPanelHeader.prototype._getTogglePosition = /**
+     * Gets the toggle position for the header.
+     * @return {?}
+     */
+    function () {
+        return this.panel.togglePosition;
+    };
     /** Gets whether the expand indicator should be shown. */
     /**
      * Gets whether the expand indicator should be shown.
@@ -17425,7 +17653,7 @@ var MatExpansionPanelHeader = /** @class */ (function () {
     };
     MatExpansionPanelHeader.decorators = [
         { type: core.Component, args: [{selector: 'mat-expansion-panel-header',
-                    styles: [".mat-expansion-panel-header{display:flex;flex-direction:row;align-items:center;padding:0 24px;border-radius:inherit}.mat-expansion-panel-header:focus,.mat-expansion-panel-header:hover{outline:0}.mat-expansion-panel-header.mat-expanded:focus,.mat-expansion-panel-header.mat-expanded:hover{background:inherit}.mat-expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.mat-content{display:flex;flex:1;flex-direction:row;overflow:hidden}.mat-expansion-panel-header-description,.mat-expansion-panel-header-title{display:flex;flex-grow:1;margin-right:16px}[dir=rtl] .mat-expansion-panel-header-description,[dir=rtl] .mat-expansion-panel-header-title{margin-right:0;margin-left:16px}.mat-expansion-panel-header-description{flex-grow:2}.mat-expansion-indicator::after{border-style:solid;border-width:0 2px 2px 0;content:'';display:inline-block;padding:3px;transform:rotate(45deg);vertical-align:middle}"],
+                    styles: [".mat-expansion-panel-header{display:flex;flex-direction:row;align-items:center;padding:0 24px;border-radius:inherit}.mat-expansion-panel-header:focus,.mat-expansion-panel-header:hover{outline:0}.mat-expansion-panel-header.mat-expanded:focus,.mat-expansion-panel-header.mat-expanded:hover{background:inherit}.mat-expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.mat-expansion-panel-header.mat-expansion-toggle-indicator-before{flex-direction:row-reverse}.mat-expansion-panel-header.mat-expansion-toggle-indicator-before .mat-expansion-indicator{margin:0 16px 0 0}[dir=rtl] .mat-expansion-panel-header.mat-expansion-toggle-indicator-before .mat-expansion-indicator{margin:0 0 0 16px}.mat-content{display:flex;flex:1;flex-direction:row;overflow:hidden}.mat-expansion-panel-header-description,.mat-expansion-panel-header-title{display:flex;flex-grow:1;margin-right:16px}[dir=rtl] .mat-expansion-panel-header-description,[dir=rtl] .mat-expansion-panel-header-title{margin-right:0;margin-left:16px}.mat-expansion-panel-header-description{flex-grow:2}.mat-expansion-indicator::after{border-style:solid;border-width:0 2px 2px 0;content:'';display:inline-block;padding:3px;transform:rotate(45deg);vertical-align:middle}"],
                     template: "<span class=\"mat-content\"><ng-content select=\"mat-panel-title\"></ng-content><ng-content select=\"mat-panel-description\"></ng-content><ng-content></ng-content></span><span [@indicatorRotate]=\"_getExpandedState()\" *ngIf=\"_showToggle()\" class=\"mat-expansion-indicator\"></span>",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
@@ -17442,8 +17670,12 @@ var MatExpansionPanelHeader = /** @class */ (function () {
                         '[attr.aria-expanded]': '_isExpanded()',
                         '[attr.aria-disabled]': 'panel.disabled',
                         '[class.mat-expanded]': '_isExpanded()',
+                        '[class.mat-expansion-toggle-indicator-after]': "_getTogglePosition() === 'after'",
+                        '[class.mat-expansion-toggle-indicator-before]': "_getTogglePosition() === 'before'",
                         '(click)': '_toggle()',
                         '(keydown)': '_keydown($event)',
+                        '[@.disabled]': '_animationsDisabled',
+                        '(@expansionHeight.start)': '_animationStarted()',
                         '[@expansionHeight]': "{\n        value: _getExpandedState(),\n        params: {\n          collapsedHeight: collapsedHeight,\n          expandedHeight: expandedHeight\n        }\n    }",
                     },
                 },] },
@@ -17520,6 +17752,10 @@ var MatAccordion = /** @class */ (function (_super) {
          *     elevation.
          */
         _this.displayMode = 'default';
+        /**
+         * The position of the expansion indicator.
+         */
+        _this.togglePosition = 'after';
         return _this;
     }
     Object.defineProperty(MatAccordion.prototype, "hideToggle", {
@@ -17605,7 +17841,8 @@ var MatAccordion = /** @class */ (function (_super) {
     MatAccordion.propDecorators = {
         _headers: [{ type: core.ContentChildren, args: [MatExpansionPanelHeader, { descendants: true },] }],
         hideToggle: [{ type: core.Input }],
-        displayMode: [{ type: core.Input }]
+        displayMode: [{ type: core.Input }],
+        togglePosition: [{ type: core.Input }]
     };
     return MatAccordion;
 }(accordion.CdkAccordion));
@@ -20972,13 +21209,22 @@ var MatListOption = /** @class */ (function (_super) {
      */
     function () {
         var _this = this;
+        /** @type {?} */
+        var list = this.selectionList;
+        if (list._value && list._value.some((/**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) { return list.compareWith(value, _this._value); }))) {
+            this._setSelected(true);
+        }
+        /** @type {?} */
+        var wasSelected = this._selected;
         // List options that are selected at initialization can't be reported properly to the form
         // control. This is because it takes some time until the selection-list knows about all
         // available options. Also it can happen that the ControlValueAccessor has an initial value
         // that should be used instead. Deferring the value change report to the next tick ensures
         // that the form control value is not being overwritten.
-        /** @type {?} */
-        var wasSelected = this._selected;
         Promise.resolve().then((/**
          * @return {?}
          */
@@ -21186,8 +21432,8 @@ var MatListOption = /** @class */ (function (_super) {
                         // its theme. The accent theme palette is the default and doesn't need to be set.
                         '[class.mat-primary]': 'color === "primary"',
                         '[class.mat-warn]': 'color === "warn"',
-                        '[attr.aria-selected]': 'selected.toString()',
-                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.aria-selected]': 'selected',
+                        '[attr.aria-disabled]': 'disabled',
                     },
                     template: "<div class=\"mat-list-item-content\" [class.mat-list-item-content-reverse]=\"checkboxPosition == 'after'\"><div mat-ripple class=\"mat-list-item-ripple\" [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"_isRippleDisabled()\"></div><mat-pseudo-checkbox [state]=\"selected ? 'checked' : 'unchecked'\" [disabled]=\"disabled\"></mat-pseudo-checkbox><div class=\"mat-list-text\" #text><ng-content></ng-content></div><ng-content select=\"[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]\"></ng-content></div>",
                     encapsulation: core.ViewEncapsulation.None,
@@ -21236,6 +21482,17 @@ var MatSelectionList = /** @class */ (function (_super) {
          * Theme color of the selection list. This sets the checkbox color for all list options.
          */
         _this.color = 'accent';
+        /**
+         * Function used for comparing an option against the selected value when determining which
+         * options should appear as selected. The first argument is the value of an options. The second
+         * one is a value from the selected value. A boolean must be returned.
+         */
+        _this.compareWith = (/**
+         * @param {?} a1
+         * @param {?} a2
+         * @return {?}
+         */
+        function (a1, a2) { return a1 === a2; });
         _this._disabled = false;
         /**
          * The currently selected options.
@@ -21250,9 +21507,9 @@ var MatSelectionList = /** @class */ (function (_super) {
          */
         function (_) { });
         /**
-         * Subscription to sync value changes in the SelectionModel back to the SelectionList.
+         * Emits when the list has been destroyed.
          */
-        _this._modelChanges = rxjs.Subscription.EMPTY;
+        _this._destroyed = new rxjs.Subject();
         /**
          * View to model callback that should be called if the list or its options lost focus.
          */
@@ -21302,12 +21559,11 @@ var MatSelectionList = /** @class */ (function (_super) {
          */
         function () { return false; }))
             .withAllowedModifierKeys(['shiftKey']);
-        if (this._tempValues) {
-            this._setOptionsFromValues(this._tempValues);
-            this._tempValues = null;
+        if (this._value) {
+            this._setOptionsFromValues(this._value);
         }
         // Sync external changes to the model back to the options.
-        this._modelChanges = this.selectedOptions.onChange.subscribe((/**
+        this.selectedOptions.onChange.pipe(operators.takeUntil(this._destroyed)).subscribe((/**
          * @param {?} event
          * @return {?}
          */
@@ -21351,8 +21607,9 @@ var MatSelectionList = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        this._destroyed = true;
-        this._modelChanges.unsubscribe();
+        this._destroyed.next();
+        this._destroyed.complete();
+        this._isDestroyed = true;
     };
     /** Focuses the selection list. */
     /**
@@ -21499,8 +21756,11 @@ var MatSelectionList = /** @class */ (function (_super) {
         // Stop reporting value changes after the list has been destroyed. This avoids
         // cases where the list might wrongly reset its value once it is removed, but
         // the form control is still live.
-        if (this.options && !this._destroyed) {
-            this._onChange(this._getSelectedOptionValues());
+        if (this.options && !this._isDestroyed) {
+            /** @type {?} */
+            var value = this._getSelectedOptionValues();
+            this._onChange(value);
+            this._value = value;
         }
     };
     /** Emits a change event if the selected state of an option changed. */
@@ -21529,12 +21789,10 @@ var MatSelectionList = /** @class */ (function (_super) {
      * @return {?}
      */
     function (values) {
+        this._value = values;
         if (this.options) {
             this._setOptionsFromValues(values || []);
         }
-        else {
-            this._tempValues = values;
-        }
     };
     /** Implemented as a part of ControlValueAccessor. */
     /**
@@ -21611,10 +21869,7 @@ var MatSelectionList = /** @class */ (function (_super) {
             function (option) {
                 // Skip options that are already in the model. This allows us to handle cases
                 // where the same primitive value is selected multiple times.
-                if (option.selected) {
-                    return false;
-                }
-                return _this.compareWith ? _this.compareWith(option.value, value) : option.value === value;
+                return option.selected ? false : _this.compareWith(option.value, value);
             }));
             if (correspondingOption) {
                 correspondingOption._setSelected(true);
@@ -22325,13 +22580,9 @@ var _MatMenuBase = /** @class */ (function () {
         this._xPosition = this._defaultOptions.xPosition;
         this._yPosition = this._defaultOptions.yPosition;
         /**
-         * Menu items inside the current menu.
+         * Only the direct descendant menu items.
          */
-        this._items = [];
-        /**
-         * Emits whenever the amount of menu items changes.
-         */
-        this._itemChanges = new rxjs.Subject();
+        this._directDescendantItems = new core.QueryList();
         /**
          * Subscription to tab events on the menu panel
          */
@@ -22525,7 +22776,8 @@ var _MatMenuBase = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this._keyManager = new a11y.FocusKeyManager(this._items).withWrap().withTypeAhead();
+        this._updateDirectDescendants();
+        this._keyManager = new a11y.FocusKeyManager(this._directDescendantItems).withWrap().withTypeAhead();
         this._tabSubscription = this._keyManager.tabOut.subscribe((/**
          * @return {?}
          */
@@ -22538,6 +22790,7 @@ var _MatMenuBase = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this._directDescendantItems.destroy();
         this._tabSubscription.unsubscribe();
         this.closed.complete();
     };
@@ -22551,7 +22804,7 @@ var _MatMenuBase = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        return this._itemChanges.pipe(operators.startWith(this._items), operators.switchMap((/**
+        return this._directDescendantItems.changes.pipe(operators.startWith(this._directDescendantItems), operators.switchMap((/**
          * @param {?} items
          * @return {?}
          */
@@ -22561,6 +22814,56 @@ var _MatMenuBase = /** @class */ (function () {
          */
         function (item) { return item._hovered; }))); })));
     };
+    /*
+     * Registers a menu item with the menu.
+     * @docs-private
+     * @deprecated No longer being used. To be removed.
+     * @breaking-change 9.0.0
+     */
+    /*
+       * Registers a menu item with the menu.
+       * @docs-private
+       * @deprecated No longer being used. To be removed.
+       * @breaking-change 9.0.0
+       */
+    /**
+     * @param {?} _item
+     * @return {?}
+     */
+    _MatMenuBase.prototype.addItem = /*
+       * Registers a menu item with the menu.
+       * @docs-private
+       * @deprecated No longer being used. To be removed.
+       * @breaking-change 9.0.0
+       */
+    /**
+     * @param {?} _item
+     * @return {?}
+     */
+    function (_item) { };
+    /**
+     * Removes an item from the menu.
+     * @docs-private
+     * @deprecated No longer being used. To be removed.
+     * @breaking-change 9.0.0
+     */
+    /**
+     * Removes an item from the menu.
+     * \@docs-private
+     * @deprecated No longer being used. To be removed.
+     * \@breaking-change 9.0.0
+     * @param {?} _item
+     * @return {?}
+     */
+    _MatMenuBase.prototype.removeItem = /**
+     * Removes an item from the menu.
+     * \@docs-private
+     * @deprecated No longer being used. To be removed.
+     * \@breaking-change 9.0.0
+     * @param {?} _item
+     * @return {?}
+     */
+    function (_item) { };
     /** Handle a keyboard event from the menu, delegating to the appropriate action. */
     /**
      * Handle a keyboard event from the menu, delegating to the appropriate action.
@@ -22687,57 +22990,6 @@ var _MatMenuBase = /** @class */ (function () {
             this._previousElevation = newElevation;
         }
     };
-    /**
-     * Registers a menu item with the menu.
-     * @docs-private
-     */
-    /**
-     * Registers a menu item with the menu.
-     * \@docs-private
-     * @param {?} item
-     * @return {?}
-     */
-    _MatMenuBase.prototype.addItem = /**
-     * Registers a menu item with the menu.
-     * \@docs-private
-     * @param {?} item
-     * @return {?}
-     */
-    function (item) {
-        // We register the items through this method, rather than picking them up through
-        // `ContentChildren`, because we need the items to be picked up by their closest
-        // `mat-menu` ancestor. If we used `@ContentChildren(MatMenuItem, {descendants: true})`,
-        // all descendant items will bleed into the top-level menu in the case where the consumer
-        // has `mat-menu` instances nested inside each other.
-        if (this._items.indexOf(item) === -1) {
-            this._items.push(item);
-            this._itemChanges.next(this._items);
-        }
-    };
-    /**
-     * Removes an item from the menu.
-     * @docs-private
-     */
-    /**
-     * Removes an item from the menu.
-     * \@docs-private
-     * @param {?} item
-     * @return {?}
-     */
-    _MatMenuBase.prototype.removeItem = /**
-     * Removes an item from the menu.
-     * \@docs-private
-     * @param {?} item
-     * @return {?}
-     */
-    function (item) {
-        /** @type {?} */
-        var index = this._items.indexOf(item);
-        if (this._items.indexOf(item) > -1) {
-            this._items.splice(index, 1);
-            this._itemChanges.next(this._items);
-        }
-    };
     /**
      * Adds classes to the menu panel based on its position. Can be used by
      * consumers to add specific styling based on the position.
@@ -22832,6 +23084,45 @@ var _MatMenuBase = /** @class */ (function () {
             event.element.scrollTop = 0;
         }
     };
+    /**
+     * Sets up a stream that will keep track of any newly-added menu items and will update the list
+     * of direct descendants. We collect the descendants this way, because `_allItems` can include
+     * items that are part of child menus, and using a custom way of registering items is unreliable
+     * when it comes to maintaining the item order.
+     */
+    /**
+     * Sets up a stream that will keep track of any newly-added menu items and will update the list
+     * of direct descendants. We collect the descendants this way, because `_allItems` can include
+     * items that are part of child menus, and using a custom way of registering items is unreliable
+     * when it comes to maintaining the item order.
+     * @private
+     * @return {?}
+     */
+    _MatMenuBase.prototype._updateDirectDescendants = /**
+     * Sets up a stream that will keep track of any newly-added menu items and will update the list
+     * of direct descendants. We collect the descendants this way, because `_allItems` can include
+     * items that are part of child menus, and using a custom way of registering items is unreliable
+     * when it comes to maintaining the item order.
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this._allItems.changes
+            .pipe(operators.startWith(this._allItems))
+            .subscribe((/**
+         * @param {?} items
+         * @return {?}
+         */
+        function (items) {
+            _this._directDescendantItems.reset(items.filter((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) { return item._parentMenu === _this; })));
+            _this._directDescendantItems.notifyOnChanges();
+        }));
+    };
     /** @nocollapse */
     _MatMenuBase.ctorParameters = function () { return [
         { type: core.ElementRef },
@@ -22839,6 +23130,7 @@ var _MatMenuBase = /** @class */ (function () {
         { type: undefined, decorators: [{ type: core.Inject, args: [MAT_MENU_DEFAULT_OPTIONS,] }] }
     ]; };
     _MatMenuBase.propDecorators = {
+        _allItems: [{ type: core.ContentChildren, args: [MatMenuItem, { descendants: true },] }],
         backdropClass: [{ type: core.Input }],
         xPosition: [{ type: core.Input }],
         yPosition: [{ type: core.Input }],
@@ -27831,9 +28123,9 @@ var MatProgressSpinner = /** @class */ (function (_super) {
         var _this = _super.call(this, _elementRef) || this;
         _this._elementRef = _elementRef;
         _this._document = _document;
+        _this._diameter = BASE_SIZE;
         _this._value = 0;
         _this._fallbackAnimation = false;
-        _this._diameter = BASE_SIZE;
         /**
          * Mode of the progress circle
          */
@@ -28184,6 +28476,19 @@ var MatProgressSpinnerModule = /** @class */ (function () {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+var MAT_RADIO_DEFAULT_OPTIONS = new core.InjectionToken('mat-radio-default-options', {
+    providedIn: 'root',
+    factory: MAT_RADIO_DEFAULT_OPTIONS_FACTORY
+});
+/**
+ * @return {?}
+ */
+function MAT_RADIO_DEFAULT_OPTIONS_FACTORY() {
+    return {
+        color: 'accent'
+    };
+}
 // Increasing integer for generating unique ids for radio components.
 /** @type {?} */
 var nextUniqueId$7 = 0;
@@ -28658,12 +28963,13 @@ var _MatRadioButtonMixinBase = mixinDisableRipple(mixinTabIndex(MatRadioButtonBa
  */
 var MatRadioButton = /** @class */ (function (_super) {
     __extends(MatRadioButton, _super);
-    function MatRadioButton(radioGroup, elementRef, _changeDetector, _focusMonitor, _radioDispatcher, _animationMode) {
+    function MatRadioButton(radioGroup, elementRef, _changeDetector, _focusMonitor, _radioDispatcher, _animationMode, _providerOverride) {
         var _this = _super.call(this, elementRef) || this;
         _this._changeDetector = _changeDetector;
         _this._focusMonitor = _focusMonitor;
         _this._radioDispatcher = _radioDispatcher;
         _this._animationMode = _animationMode;
+        _this._providerOverride = _providerOverride;
         _this._uniqueId = "mat-radio-" + ++nextUniqueId$7;
         /**
          * The unique ID for the radio button.
@@ -28837,7 +29143,9 @@ var MatRadioButton = /** @class */ (function (_super) {
          * @return {?}
          */
         function () {
-            return this._color || (this.radioGroup && this.radioGroup.color) || 'accent';
+            return this._color ||
+                (this.radioGroup && this.radioGroup.color) ||
+                this._providerOverride && this._providerOverride.color || 'accent';
         },
         set: /**
          * @param {?} newValue
@@ -29041,7 +29349,8 @@ var MatRadioButton = /** @class */ (function (_super) {
         { type: core.ChangeDetectorRef },
         { type: a11y.FocusMonitor },
         { type: collections.UniqueSelectionDispatcher },
-        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] },
+        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_RADIO_DEFAULT_OPTIONS,] }] }
     ]; };
     MatRadioButton.propDecorators = {
         id: [{ type: core.Input }],
@@ -31096,13 +31405,71 @@ var MatSlideToggle = /** @class */ (function (_super) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+var MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR = {
+    provide: forms.NG_VALIDATORS,
+    useExisting: core.forwardRef((/**
+     * @return {?}
+     */
+    function () { return MatSlideToggleRequiredValidator; })),
+    multi: true
+};
+/**
+ * Validator for Material slide-toggle components with the required attribute in a
+ * template-driven form. The default validator for required form controls asserts
+ * that the control value is not undefined but that is not appropriate for a slide-toggle
+ * where the value is always defined.
+ *
+ * Required slide-toggle form controls are valid when checked.
+ */
+var MatSlideToggleRequiredValidator = /** @class */ (function (_super) {
+    __extends(MatSlideToggleRequiredValidator, _super);
+    function MatSlideToggleRequiredValidator() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    MatSlideToggleRequiredValidator.decorators = [
+        { type: core.Directive, args: [{
+                    selector: "mat-slide-toggle[required][formControlName],\n             mat-slide-toggle[required][formControl], mat-slide-toggle[required][ngModel]",
+                    providers: [MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR],
+                },] },
+    ];
+    return MatSlideToggleRequiredValidator;
+}(forms.CheckboxRequiredValidator));
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * This module is used by both original and MDC-based slide-toggle implementations.
+ */
+var _MatSlideToggleRequiredValidatorModule = /** @class */ (function () {
+    function _MatSlideToggleRequiredValidatorModule() {
+    }
+    _MatSlideToggleRequiredValidatorModule.decorators = [
+        { type: core.NgModule, args: [{
+                    exports: [MatSlideToggleRequiredValidator],
+                    declarations: [MatSlideToggleRequiredValidator],
+                },] },
+    ];
+    return _MatSlideToggleRequiredValidatorModule;
+}());
 var MatSlideToggleModule = /** @class */ (function () {
     function MatSlideToggleModule() {
     }
     MatSlideToggleModule.decorators = [
         { type: core.NgModule, args: [{
-                    imports: [MatRippleModule, MatCommonModule, observers.ObserversModule],
-                    exports: [MatSlideToggle, MatCommonModule],
+                    imports: [
+                        _MatSlideToggleRequiredValidatorModule,
+                        MatRippleModule,
+                        MatCommonModule,
+                        observers.ObserversModule,
+                    ],
+                    exports: [
+                        _MatSlideToggleRequiredValidatorModule,
+                        MatSlideToggle,
+                        MatCommonModule
+                    ],
                     declarations: [MatSlideToggle],
                     providers: [
                         { provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: GestureConfig }
@@ -35538,17 +35905,17 @@ MatTableDataSource = /** @class */ (function (_super) {
         return this.sortData(data.slice(), this.sort);
     };
     /**
-     * Returns a paged splice of the provided data array according to the provided MatPaginator's page
+     * Returns a paged slice of the provided data array according to the provided MatPaginator's page
      * index and length. If there is no paginator provided, returns the data array as provided.
      */
     /**
-     * Returns a paged splice of the provided data array according to the provided MatPaginator's page
+     * Returns a paged slice of the provided data array according to the provided MatPaginator's page
      * index and length. If there is no paginator provided, returns the data array as provided.
      * @param {?} data
      * @return {?}
      */
     MatTableDataSource.prototype._pageData = /**
-     * Returns a paged splice of the provided data array according to the provided MatPaginator's page
+     * Returns a paged slice of the provided data array according to the provided MatPaginator's page
      * index and length. If there is no paginator provided, returns the data array as provided.
      * @param {?} data
      * @return {?}
@@ -35559,7 +35926,7 @@ MatTableDataSource = /** @class */ (function (_super) {
         }
         /** @type {?} */
         var startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-        return data.slice().splice(startIndex, this.paginator.pageSize);
+        return data.slice(startIndex, startIndex + this.paginator.pageSize);
     };
     /**
      * Updates the paginator to reflect the length of the filtered data, and makes sure that the page
@@ -35674,10 +36041,11 @@ function _MAT_INK_BAR_POSITIONER_FACTORY() {
  * \@docs-private
  */
 var MatInkBar = /** @class */ (function () {
-    function MatInkBar(_elementRef, _ngZone, _inkBarPositioner) {
+    function MatInkBar(_elementRef, _ngZone, _inkBarPositioner, _animationMode) {
         this._elementRef = _elementRef;
         this._ngZone = _ngZone;
         this._inkBarPositioner = _inkBarPositioner;
+        this._animationMode = _animationMode;
     }
     /**
      * Calculates the styles from the provided element in order to align the ink-bar to that element.
@@ -35767,6 +36135,7 @@ var MatInkBar = /** @class */ (function () {
                     selector: 'mat-ink-bar',
                     host: {
                         'class': 'mat-ink-bar',
+                        '[class._mat-animation-noopable]': "_animationMode === 'NoopAnimations'",
                     },
                 },] },
     ];
@@ -35774,7 +36143,8 @@ var MatInkBar = /** @class */ (function () {
     MatInkBar.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: core.NgZone },
-        { type: undefined, decorators: [{ type: core.Inject, args: [_MAT_INK_BAR_POSITIONER,] }] }
+        { type: undefined, decorators: [{ type: core.Inject, args: [_MAT_INK_BAR_POSITIONER,] }] },
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
     ]; };
     return MatInkBar;
 }());
@@ -36402,76 +36772,57 @@ var HEADER_SCROLL_DELAY = 650;
  * @type {?}
  */
 var HEADER_SCROLL_INTERVAL = 100;
-// Boilerplate for applying mixins to MatTabHeader.
-/**
- * \@docs-private
- */
-var 
-// Boilerplate for applying mixins to MatTabHeader.
 /**
- * \@docs-private
- */
-MatTabHeaderBase = /** @class */ (function () {
-    function MatTabHeaderBase() {
-    }
-    return MatTabHeaderBase;
-}());
-/** @type {?} */
-var _MatTabHeaderMixinBase = mixinDisableRipple(MatTabHeaderBase);
-/**
- * The header of the tab group which displays a list of all the tabs in the tab group. Includes
- * an ink bar that follows the currently selected tab. When the tabs list's width exceeds the
- * width of the header container, then arrows will be displayed to allow the user to scroll
- * left and right across the header.
- * \@docs-private
+ * Base class for a tab header that supported pagination.
+ * @abstract
  */
-var MatTabHeader = /** @class */ (function (_super) {
-    __extends(MatTabHeader, _super);
-    function MatTabHeader(_elementRef, _changeDetectorRef, _viewportRuler, _dir, _ngZone, _platform) {
-        var _this = _super.call(this) || this;
-        _this._elementRef = _elementRef;
-        _this._changeDetectorRef = _changeDetectorRef;
-        _this._viewportRuler = _viewportRuler;
-        _this._dir = _dir;
-        _this._ngZone = _ngZone;
-        _this._platform = _platform;
+var MatPaginatedTabHeader = /** @class */ (function () {
+    function MatPaginatedTabHeader(_elementRef, _changeDetectorRef, _viewportRuler, _dir, _ngZone, _platform, _animationMode) {
+        var _this = this;
+        this._elementRef = _elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._viewportRuler = _viewportRuler;
+        this._dir = _dir;
+        this._ngZone = _ngZone;
+        this._platform = _platform;
+        this._animationMode = _animationMode;
         /**
          * The distance in pixels that the tab labels should be translated to the left.
          */
-        _this._scrollDistance = 0;
+        this._scrollDistance = 0;
         /**
          * Whether the header should scroll to the selected index after the view has been checked.
          */
-        _this._selectedIndexChanged = false;
+        this._selectedIndexChanged = false;
         /**
          * Emits when the component is destroyed.
          */
-        _this._destroyed = new rxjs.Subject();
+        this._destroyed = new rxjs.Subject();
         /**
          * Whether the controls for pagination should be displayed
          */
-        _this._showPaginationControls = false;
+        this._showPaginationControls = false;
         /**
          * Whether the tab list can be scrolled more towards the end of the tab label list.
          */
-        _this._disableScrollAfter = true;
+        this._disableScrollAfter = true;
         /**
          * Whether the tab list can be scrolled more towards the beginning of the tab label list.
          */
-        _this._disableScrollBefore = true;
+        this._disableScrollBefore = true;
         /**
          * Stream that will stop the automated scrolling.
          */
-        _this._stopScrolling = new rxjs.Subject();
-        _this._selectedIndex = 0;
+        this._stopScrolling = new rxjs.Subject();
+        this._selectedIndex = 0;
         /**
          * Event emitted when the option is selected.
          */
-        _this.selectFocusedIndex = new core.EventEmitter();
+        this.selectFocusedIndex = new core.EventEmitter();
         /**
          * Event emitted when a label is focused.
          */
-        _this.indexFocused = new core.EventEmitter();
+        this.indexFocused = new core.EventEmitter();
         // Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
         _ngZone.runOutsideAngular((/**
          * @return {?}
@@ -36486,9 +36837,8 @@ var MatTabHeader = /** @class */ (function (_super) {
                 _this._stopInterval();
             }));
         }));
-        return _this;
     }
-    Object.defineProperty(MatTabHeader.prototype, "selectedIndex", {
+    Object.defineProperty(MatPaginatedTabHeader.prototype, "selectedIndex", {
         /** The index of the active tab. */
         get: /**
          * The index of the active tab.
@@ -36501,10 +36851,12 @@ var MatTabHeader = /** @class */ (function (_super) {
          */
         function (value) {
             value = coercion.coerceNumberProperty(value);
-            this._selectedIndexChanged = this._selectedIndex != value;
-            this._selectedIndex = value;
-            if (this._keyManager) {
-                this._keyManager.updateActiveItemIndex(value);
+            if (this._selectedIndex != value) {
+                this._selectedIndexChanged = true;
+                this._selectedIndex = value;
+                if (this._keyManager) {
+                    this._keyManager.updateActiveItemIndex(value);
+                }
             }
         },
         enumerable: true,
@@ -36513,76 +36865,33 @@ var MatTabHeader = /** @class */ (function (_super) {
     /**
      * @return {?}
      */
-    MatTabHeader.prototype.ngAfterContentChecked = /**
+    MatPaginatedTabHeader.prototype.ngAfterViewInit = /**
      * @return {?}
      */
     function () {
-        // If the number of tab labels have changed, check if scrolling should be enabled
-        if (this._tabLabelCount != this._labelWrappers.length) {
-            this.updatePagination();
-            this._tabLabelCount = this._labelWrappers.length;
-            this._changeDetectorRef.markForCheck();
-        }
-        // If the selected index has changed, scroll to the label and check if the scrolling controls
-        // should be disabled.
-        if (this._selectedIndexChanged) {
-            this._scrollToLabel(this._selectedIndex);
-            this._checkScrollingControls();
-            this._alignInkBarToSelectedTab();
-            this._selectedIndexChanged = false;
-            this._changeDetectorRef.markForCheck();
-        }
-        // If the scroll distance has been changed (tab selected, focused, scroll controls activated),
-        // then translate the header to reflect this.
-        if (this._scrollDistanceChanged) {
-            this._updateTabScrollPosition();
-            this._scrollDistanceChanged = false;
-            this._changeDetectorRef.markForCheck();
-        }
-    };
-    /** Handles keyboard events on the header. */
-    /**
-     * Handles keyboard events on the header.
-     * @param {?} event
-     * @return {?}
-     */
-    MatTabHeader.prototype._handleKeydown = /**
-     * Handles keyboard events on the header.
-     * @param {?} event
-     * @return {?}
-     */
-    function (event) {
-        // We don't handle any key bindings with a modifier key.
-        if (keycodes.hasModifierKey(event)) {
-            return;
-        }
-        switch (event.keyCode) {
-            case keycodes.HOME:
-                this._keyManager.setFirstItemActive();
-                event.preventDefault();
-                break;
-            case keycodes.END:
-                this._keyManager.setLastItemActive();
-                event.preventDefault();
-                break;
-            case keycodes.ENTER:
-            case keycodes.SPACE:
-                this.selectFocusedIndex.emit(this.focusIndex);
-                event.preventDefault();
-                break;
-            default:
-                this._keyManager.onKeydown(event);
-        }
+        var _this = this;
+        // We need to handle these events manually, because we want to bind passive event listeners.
+        rxjs.fromEvent(this._previousPaginator.nativeElement, 'touchstart', passiveEventListenerOptions$1)
+            .pipe(operators.takeUntil(this._destroyed))
+            .subscribe((/**
+         * @return {?}
+         */
+        function () {
+            _this._handlePaginatorPress('before');
+        }));
+        rxjs.fromEvent(this._nextPaginator.nativeElement, 'touchstart', passiveEventListenerOptions$1)
+            .pipe(operators.takeUntil(this._destroyed))
+            .subscribe((/**
+         * @return {?}
+         */
+        function () {
+            _this._handlePaginatorPress('after');
+        }));
     };
     /**
-     * Aligns the ink bar to the selected tab on load.
-     */
-    /**
-     * Aligns the ink bar to the selected tab on load.
      * @return {?}
      */
-    MatTabHeader.prototype.ngAfterContentInit = /**
-     * Aligns the ink bar to the selected tab on load.
+    MatPaginatedTabHeader.prototype.ngAfterContentInit = /**
      * @return {?}
      */
     function () {
@@ -36599,7 +36908,7 @@ var MatTabHeader = /** @class */ (function (_super) {
             _this.updatePagination();
             _this._alignInkBarToSelectedTab();
         });
-        this._keyManager = new a11y.FocusKeyManager(this._labelWrappers)
+        this._keyManager = new a11y.FocusKeyManager(this._items)
             .withHorizontalOrientation(this._getLayoutDirection())
             .withWrap();
         this._keyManager.updateActiveItem(0);
@@ -36608,7 +36917,7 @@ var MatTabHeader = /** @class */ (function (_super) {
         typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame(realign) : realign();
         // On dir change or window resize, realign the ink bar and update the orientation of
         // the key manager if the direction has changed.
-        rxjs.merge(dirChange, resize).pipe(operators.takeUntil(this._destroyed)).subscribe((/**
+        rxjs.merge(dirChange, resize, this._items.changes).pipe(operators.takeUntil(this._destroyed)).subscribe((/**
          * @return {?}
          */
         function () {
@@ -36630,33 +36939,37 @@ var MatTabHeader = /** @class */ (function (_super) {
     /**
      * @return {?}
      */
-    MatTabHeader.prototype.ngAfterViewInit = /**
+    MatPaginatedTabHeader.prototype.ngAfterContentChecked = /**
      * @return {?}
      */
     function () {
-        var _this = this;
-        // We need to handle these events manually, because we want to bind passive event listeners.
-        rxjs.fromEvent(this._previousPaginator.nativeElement, 'touchstart', passiveEventListenerOptions$1)
-            .pipe(operators.takeUntil(this._destroyed))
-            .subscribe((/**
-         * @return {?}
-         */
-        function () {
-            _this._handlePaginatorPress('before');
-        }));
-        rxjs.fromEvent(this._nextPaginator.nativeElement, 'touchstart', passiveEventListenerOptions$1)
-            .pipe(operators.takeUntil(this._destroyed))
-            .subscribe((/**
-         * @return {?}
-         */
-        function () {
-            _this._handlePaginatorPress('after');
-        }));
+        // If the number of tab labels have changed, check if scrolling should be enabled
+        if (this._tabLabelCount != this._items.length) {
+            this.updatePagination();
+            this._tabLabelCount = this._items.length;
+            this._changeDetectorRef.markForCheck();
+        }
+        // If the selected index has changed, scroll to the label and check if the scrolling controls
+        // should be disabled.
+        if (this._selectedIndexChanged) {
+            this._scrollToLabel(this._selectedIndex);
+            this._checkScrollingControls();
+            this._alignInkBarToSelectedTab();
+            this._selectedIndexChanged = false;
+            this._changeDetectorRef.markForCheck();
+        }
+        // If the scroll distance has been changed (tab selected, focused, scroll controls activated),
+        // then translate the header to reflect this.
+        if (this._scrollDistanceChanged) {
+            this._updateTabScrollPosition();
+            this._scrollDistanceChanged = false;
+            this._changeDetectorRef.markForCheck();
+        }
     };
     /**
      * @return {?}
      */
-    MatTabHeader.prototype.ngOnDestroy = /**
+    MatPaginatedTabHeader.prototype.ngOnDestroy = /**
      * @return {?}
      */
     function () {
@@ -36664,6 +36977,40 @@ var MatTabHeader = /** @class */ (function (_super) {
         this._destroyed.complete();
         this._stopScrolling.complete();
     };
+    /** Handles keyboard events on the header. */
+    /**
+     * Handles keyboard events on the header.
+     * @param {?} event
+     * @return {?}
+     */
+    MatPaginatedTabHeader.prototype._handleKeydown = /**
+     * Handles keyboard events on the header.
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        // We don't handle any key bindings with a modifier key.
+        if (keycodes.hasModifierKey(event)) {
+            return;
+        }
+        switch (event.keyCode) {
+            case keycodes.HOME:
+                this._keyManager.setFirstItemActive();
+                event.preventDefault();
+                break;
+            case keycodes.END:
+                this._keyManager.setLastItemActive();
+                event.preventDefault();
+                break;
+            case keycodes.ENTER:
+            case keycodes.SPACE:
+                this.selectFocusedIndex.emit(this.focusIndex);
+                this._itemSelected(event);
+                break;
+            default:
+                this._keyManager.onKeydown(event);
+        }
+    };
     /**
      * Callback for when the MutationObserver detects that the content has changed.
      */
@@ -36671,7 +37018,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * Callback for when the MutationObserver detects that the content has changed.
      * @return {?}
      */
-    MatTabHeader.prototype._onContentChanges = /**
+    MatPaginatedTabHeader.prototype._onContentChanges = /**
      * Callback for when the MutationObserver detects that the content has changed.
      * @return {?}
      */
@@ -36683,7 +37030,7 @@ var MatTabHeader = /** @class */ (function (_super) {
         // will fire even if the text content didn't change which is inefficient and is prone
         // to infinite loops if a poorly constructed expression is passed in (see #14249).
         if (textContent !== this._currentTextContent) {
-            this._currentTextContent = textContent;
+            this._currentTextContent = textContent || '';
             // The content observer runs outside the `NgZone` by default, which
             // means that we need to bring the callback back in ourselves.
             this._ngZone.run((/**
@@ -36699,22 +37046,22 @@ var MatTabHeader = /** @class */ (function (_super) {
     /**
      * Updates the view whether pagination should be enabled or not.
      *
-     * WARNING: Calling this method can be very costly in terms of performance.  It should be called
+     * WARNING: Calling this method can be very costly in terms of performance. It should be called
      * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
      * page.
      */
     /**
      * Updates the view whether pagination should be enabled or not.
      *
-     * WARNING: Calling this method can be very costly in terms of performance.  It should be called
+     * WARNING: Calling this method can be very costly in terms of performance. It should be called
      * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
      * page.
      * @return {?}
      */
-    MatTabHeader.prototype.updatePagination = /**
+    MatPaginatedTabHeader.prototype.updatePagination = /**
      * Updates the view whether pagination should be enabled or not.
      *
-     * WARNING: Calling this method can be very costly in terms of performance.  It should be called
+     * WARNING: Calling this method can be very costly in terms of performance. It should be called
      * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
      * page.
      * @return {?}
@@ -36724,7 +37071,7 @@ var MatTabHeader = /** @class */ (function (_super) {
         this._checkScrollingControls();
         this._updateTabScrollPosition();
     };
-    Object.defineProperty(MatTabHeader.prototype, "focusIndex", {
+    Object.defineProperty(MatPaginatedTabHeader.prototype, "focusIndex", {
         /** Tracks which element has focus; used for keyboard navigation */
         get: /**
          * Tracks which element has focus; used for keyboard navigation
@@ -36758,18 +37105,18 @@ var MatTabHeader = /** @class */ (function (_super) {
      * @param {?} index
      * @return {?}
      */
-    MatTabHeader.prototype._isValidIndex = /**
+    MatPaginatedTabHeader.prototype._isValidIndex = /**
      * Determines if an index is valid.  If the tabs are not ready yet, we assume that the user is
      * providing a valid index and return true.
      * @param {?} index
      * @return {?}
      */
     function (index) {
-        if (!this._labelWrappers) {
+        if (!this._items) {
             return true;
         }
         /** @type {?} */
-        var tab = this._labelWrappers ? this._labelWrappers.toArray()[index] : null;
+        var tab = this._items ? this._items.toArray()[index] : null;
         return !!tab && !tab.disabled;
     };
     /**
@@ -36782,7 +37129,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * @param {?} tabIndex
      * @return {?}
      */
-    MatTabHeader.prototype._setTabFocus = /**
+    MatPaginatedTabHeader.prototype._setTabFocus = /**
      * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
      * scrolling is enabled.
      * @param {?} tabIndex
@@ -36792,8 +37139,8 @@ var MatTabHeader = /** @class */ (function (_super) {
         if (this._showPaginationControls) {
             this._scrollToLabel(tabIndex);
         }
-        if (this._labelWrappers && this._labelWrappers.length) {
-            this._labelWrappers.toArray()[tabIndex].focus();
+        if (this._items && this._items.length) {
+            this._items.toArray()[tabIndex].focus();
             // Do not let the browser manage scrolling to focus the element, this will be handled
             // by using translation. In LTR, the scroll left should be 0. In RTL, the scroll width
             // should be the full width minus the offset width.
@@ -36814,7 +37161,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * The layout direction of the containing app.
      * @return {?}
      */
-    MatTabHeader.prototype._getLayoutDirection = /**
+    MatPaginatedTabHeader.prototype._getLayoutDirection = /**
      * The layout direction of the containing app.
      * @return {?}
      */
@@ -36826,7 +37173,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * Performs the CSS transformation on the tab list that will cause the list to scroll.
      * @return {?}
      */
-    MatTabHeader.prototype._updateTabScrollPosition = /**
+    MatPaginatedTabHeader.prototype._updateTabScrollPosition = /**
      * Performs the CSS transformation on the tab list that will cause the list to scroll.
      * @return {?}
      */
@@ -36848,11 +37195,12 @@ var MatTabHeader = /** @class */ (function (_super) {
         // position to be thrown off in some cases. We have to reset it ourselves to ensure that
         // it doesn't get thrown off. Note that we scope it only to IE and Edge, because messing
         // with the scroll position throws off Chrome 71+ in RTL mode (see #14689).
-        if (platform$$1.TRIDENT || platform$$1.EDGE) {
+        // @breaking-change 9.0.0 Remove null check for `platform` after it can no longer be undefined.
+        if (platform$$1 && (platform$$1.TRIDENT || platform$$1.EDGE)) {
             this._tabListContainer.nativeElement.scrollLeft = 0;
         }
     };
-    Object.defineProperty(MatTabHeader.prototype, "scrollDistance", {
+    Object.defineProperty(MatPaginatedTabHeader.prototype, "scrollDistance", {
         /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
         get: /**
          * Sets the distance in pixels that the tab header should be transformed in the X-axis.
@@ -36887,7 +37235,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * @param {?} direction
      * @return {?}
      */
-    MatTabHeader.prototype._scrollHeader = /**
+    MatPaginatedTabHeader.prototype._scrollHeader = /**
      * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
      * the end of the list, respectively). The distance to scroll is computed to be a third of the
      * length of the tab list view window.
@@ -36911,7 +37259,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * @param {?} direction
      * @return {?}
      */
-    MatTabHeader.prototype._handlePaginatorClick = /**
+    MatPaginatedTabHeader.prototype._handlePaginatorClick = /**
      * Handles click events on the pagination arrows.
      * @param {?} direction
      * @return {?}
@@ -36934,7 +37282,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * @param {?} labelIndex
      * @return {?}
      */
-    MatTabHeader.prototype._scrollToLabel = /**
+    MatPaginatedTabHeader.prototype._scrollToLabel = /**
      * Moves the tab list such that the desired tab label (marked by index) is moved into view.
      *
      * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
@@ -36944,24 +37292,25 @@ var MatTabHeader = /** @class */ (function (_super) {
      */
     function (labelIndex) {
         /** @type {?} */
-        var selectedLabel = this._labelWrappers ? this._labelWrappers.toArray()[labelIndex] : null;
+        var selectedLabel = this._items ? this._items.toArray()[labelIndex] : null;
         if (!selectedLabel) {
             return;
         }
         // The view length is the visible width of the tab labels.
         /** @type {?} */
         var viewLength = this._tabListContainer.nativeElement.offsetWidth;
+        var _a = selectedLabel.elementRef.nativeElement, offsetLeft = _a.offsetLeft, offsetWidth = _a.offsetWidth;
         /** @type {?} */
         var labelBeforePos;
         /** @type {?} */
         var labelAfterPos;
         if (this._getLayoutDirection() == 'ltr') {
-            labelBeforePos = selectedLabel.getOffsetLeft();
-            labelAfterPos = labelBeforePos + selectedLabel.getOffsetWidth();
+            labelBeforePos = offsetLeft;
+            labelAfterPos = labelBeforePos + offsetWidth;
         }
         else {
-            labelAfterPos = this._tabList.nativeElement.offsetWidth - selectedLabel.getOffsetLeft();
-            labelBeforePos = labelAfterPos - selectedLabel.getOffsetWidth();
+            labelAfterPos = this._tabList.nativeElement.offsetWidth - offsetLeft;
+            labelBeforePos = labelAfterPos - offsetWidth;
         }
         /** @type {?} */
         var beforeVisiblePos = this.scrollDistance;
@@ -36993,7 +37342,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * should be called sparingly.
      * @return {?}
      */
-    MatTabHeader.prototype._checkPaginationEnabled = /**
+    MatPaginatedTabHeader.prototype._checkPaginationEnabled = /**
      * Evaluate whether the pagination controls should be displayed. If the scroll width of the
      * tab list is wider than the size of the header container, then the pagination controls should
      * be shown.
@@ -37032,7 +37381,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * should be called sparingly.
      * @return {?}
      */
-    MatTabHeader.prototype._checkScrollingControls = /**
+    MatPaginatedTabHeader.prototype._checkScrollingControls = /**
      * Evaluate whether the before and after controls should be enabled or disabled.
      * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
      * before button. If the header is at the end of the list (scroll distance is equal to the
@@ -37063,7 +37412,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * should be called sparingly.
      * @return {?}
      */
-    MatTabHeader.prototype._getMaxScrollDistance = /**
+    MatPaginatedTabHeader.prototype._getMaxScrollDistance = /**
      * Determines what is the maximum length in pixels that can be set for the scroll distance. This
      * is equal to the difference in width between the tab list container and tab header container.
      *
@@ -37083,23 +37432,29 @@ var MatTabHeader = /** @class */ (function (_super) {
      * Tells the ink-bar to align itself to the current label wrapper
      * @return {?}
      */
-    MatTabHeader.prototype._alignInkBarToSelectedTab = /**
+    MatPaginatedTabHeader.prototype._alignInkBarToSelectedTab = /**
      * Tells the ink-bar to align itself to the current label wrapper
      * @return {?}
      */
     function () {
         /** @type {?} */
-        var selectedLabelWrapper = this._labelWrappers && this._labelWrappers.length ?
-            this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement :
-            null;
-        this._inkBar.alignToElement((/** @type {?} */ (selectedLabelWrapper)));
+        var selectedItem = this._items && this._items.length ?
+            this._items.toArray()[this.selectedIndex] : null;
+        /** @type {?} */
+        var selectedLabelWrapper = selectedItem ? selectedItem.elementRef.nativeElement : null;
+        if (selectedLabelWrapper) {
+            this._inkBar.alignToElement(selectedLabelWrapper);
+        }
+        else {
+            this._inkBar.hide();
+        }
     };
     /** Stops the currently-running paginator interval.  */
     /**
      * Stops the currently-running paginator interval.
      * @return {?}
      */
-    MatTabHeader.prototype._stopInterval = /**
+    MatPaginatedTabHeader.prototype._stopInterval = /**
      * Stops the currently-running paginator interval.
      * @return {?}
      */
@@ -37117,7 +37472,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * @param {?} direction In which direction the paginator should be scrolled.
      * @return {?}
      */
-    MatTabHeader.prototype._handlePaginatorPress = /**
+    MatPaginatedTabHeader.prototype._handlePaginatorPress = /**
      * Handles the user pressing down on one of the paginators.
      * Starts scrolling the header after a certain amount of time.
      * @param {?} direction In which direction the paginator should be scrolled.
@@ -37153,7 +37508,7 @@ var MatTabHeader = /** @class */ (function (_super) {
      * @param {?} position Position to which to scroll.
      * @return {?} Information on the current scroll distance and the maximum.
      */
-    MatTabHeader.prototype._scrollTo = /**
+    MatPaginatedTabHeader.prototype._scrollTo = /**
      * Scrolls the header to a given position.
      * @private
      * @param {?} position Position to which to scroll.
@@ -37169,11 +37524,73 @@ var MatTabHeader = /** @class */ (function (_super) {
         this._checkScrollingControls();
         return { maxScrollDistance: maxScrollDistance, distance: this._scrollDistance };
     };
+    /** @nocollapse */
+    MatPaginatedTabHeader.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: core.ChangeDetectorRef },
+        { type: scrolling.ViewportRuler },
+        { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
+        { type: core.NgZone },
+        { type: platform.Platform },
+        { type: String }
+    ]; };
+    return MatPaginatedTabHeader;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * The header of the tab group which displays a list of all the tabs in the tab group. Includes
+ * an ink bar that follows the currently selected tab. When the tabs list's width exceeds the
+ * width of the header container, then arrows will be displayed to allow the user to scroll
+ * left and right across the header.
+ * \@docs-private
+ */
+var MatTabHeader = /** @class */ (function (_super) {
+    __extends(MatTabHeader, _super);
+    function MatTabHeader(elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform$$1, 
+    // @breaking-change 9.0.0 `_animationMode` parameter to be made required.
+    animationMode) {
+        var _this = _super.call(this, elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform$$1, animationMode) || this;
+        _this._disableRipple = false;
+        return _this;
+    }
+    Object.defineProperty(MatTabHeader.prototype, "disableRipple", {
+        /** Whether the ripple effect is disabled or not. */
+        get: /**
+         * Whether the ripple effect is disabled or not.
+         * @return {?}
+         */
+        function () { return this._disableRipple; },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) { this._disableRipple = coercion.coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @protected
+     * @param {?} event
+     * @return {?}
+     */
+    MatTabHeader.prototype._itemSelected = /**
+     * @protected
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        event.preventDefault();
+    };
     MatTabHeader.decorators = [
         { type: core.Component, args: [{selector: 'mat-tab-header',
-                    template: "<div class=\"mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4\" #previousPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollBefore || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollBefore\" (click)=\"_handlePaginatorClick('before')\" (mousedown)=\"_handlePaginatorPress('before')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div><div class=\"mat-tab-label-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\"><div class=\"mat-tab-list\" #tabList role=\"tablist\" (cdkObserveContent)=\"_onContentChanges()\"><div class=\"mat-tab-labels\"><ng-content></ng-content></div><mat-ink-bar></mat-ink-bar></div></div><div class=\"mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4\" #nextPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollAfter || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollAfter\" (mousedown)=\"_handlePaginatorPress('after')\" (click)=\"_handlePaginatorClick('after')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div>",
-                    styles: [".mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}@media (-ms-high-contrast:active){.mat-tab-label:focus{outline:dotted 2px}}.mat-tab-label.mat-tab-disabled{cursor:default}@media (-ms-high-contrast:active){.mat-tab-label.mat-tab-disabled{opacity:.5}}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (-ms-high-contrast:active){.mat-tab-label{opacity:1}}@media (max-width:599px){.mat-tab-label{min-width:72px}}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}@media (-ms-high-contrast:active){.mat-ink-bar{outline:solid 2px;height:0}}.mat-tab-header-pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none}.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination{display:flex}.mat-tab-header-pagination-before,.mat-tab-header-rtl .mat-tab-header-pagination-after{padding-left:4px}.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-tab-header-pagination-after,.mat-tab-header-rtl .mat-tab-header-pagination-before{padding-right:4px}.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-before .mat-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:'';height:8px;width:8px}.mat-tab-header-pagination-disabled{box-shadow:none;cursor:default}.mat-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}.mat-tab-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mat-tab-labels{display:flex}[mat-align-tabs=center] .mat-tab-labels{justify-content:center}[mat-align-tabs=end] .mat-tab-labels{justify-content:flex-end}"],
-                    inputs: ['disableRipple'],
+                    template: "<div class=\"mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4\" #previousPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollBefore || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollBefore\" (click)=\"_handlePaginatorClick('before')\" (mousedown)=\"_handlePaginatorPress('before')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div><div class=\"mat-tab-label-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\"><div #tabList class=\"mat-tab-list\" [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\" role=\"tablist\" (cdkObserveContent)=\"_onContentChanges()\"><div class=\"mat-tab-labels\"><ng-content></ng-content></div><mat-ink-bar></mat-ink-bar></div></div><div class=\"mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4\" #nextPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollAfter || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollAfter\" (mousedown)=\"_handlePaginatorPress('after')\" (click)=\"_handlePaginatorClick('after')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div>",
+                    styles: [".mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mat-tab-header-pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none}.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination{display:flex}.mat-tab-header-pagination-before,.mat-tab-header-rtl .mat-tab-header-pagination-after{padding-left:4px}.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-tab-header-pagination-after,.mat-tab-header-rtl .mat-tab-header-pagination-before{padding-right:4px}.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-before .mat-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:'';height:8px;width:8px}.mat-tab-header-pagination-disabled{box-shadow:none;cursor:default}.mat-tab-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable.mat-ink-bar{transition:none;animation:none}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}@media (-ms-high-contrast:active){.mat-ink-bar{outline:solid 2px;height:0}}.mat-tab-labels{display:flex}[mat-align-tabs=center] .mat-tab-labels{justify-content:center}[mat-align-tabs=end] .mat-tab-labels{justify-content:flex-end}.mat-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}._mat-animation-noopable.mat-tab-list{transition:none;animation:none}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}@media (-ms-high-contrast:active){.mat-tab-label:focus{outline:dotted 2px}}.mat-tab-label.mat-tab-disabled{cursor:default}@media (-ms-high-contrast:active){.mat-tab-label.mat-tab-disabled{opacity:.5}}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (-ms-high-contrast:active){.mat-tab-label{opacity:1}}@media (max-width:599px){.mat-tab-label{min-width:72px}}"],
+                    inputs: ['selectedIndex'],
+                    outputs: ['selectFocusedIndex', 'indexFocused'],
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     host: {
@@ -37190,21 +37607,20 @@ var MatTabHeader = /** @class */ (function (_super) {
         { type: scrolling.ViewportRuler },
         { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
         { type: core.NgZone },
-        { type: platform.Platform }
+        { type: platform.Platform },
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
     ]; };
     MatTabHeader.propDecorators = {
-        _labelWrappers: [{ type: core.ContentChildren, args: [MatTabLabelWrapper,] }],
+        _items: [{ type: core.ContentChildren, args: [MatTabLabelWrapper,] }],
         _inkBar: [{ type: core.ViewChild, args: [MatInkBar, { static: true },] }],
         _tabListContainer: [{ type: core.ViewChild, args: ['tabListContainer', { static: true },] }],
         _tabList: [{ type: core.ViewChild, args: ['tabList', { static: true },] }],
         _nextPaginator: [{ type: core.ViewChild, args: ['nextPaginator', { static: false },] }],
         _previousPaginator: [{ type: core.ViewChild, args: ['previousPaginator', { static: false },] }],
-        selectedIndex: [{ type: core.Input }],
-        selectFocusedIndex: [{ type: core.Output }],
-        indexFocused: [{ type: core.Output }]
+        disableRipple: [{ type: core.Input }]
     };
     return MatTabHeader;
-}(_MatTabHeaderMixinBase));
+}(MatPaginatedTabHeader));
 
 /**
  * @fileoverview added by tsickle
@@ -37255,9 +37671,10 @@ var _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(MatTabGroupBase), 'pri
  */
 var MatTabGroup = /** @class */ (function (_super) {
     __extends(MatTabGroup, _super);
-    function MatTabGroup(elementRef, _changeDetectorRef, defaultConfig) {
+    function MatTabGroup(elementRef, _changeDetectorRef, defaultConfig, _animationMode) {
         var _this = _super.call(this, elementRef) || this;
         _this._changeDetectorRef = _changeDetectorRef;
+        _this._animationMode = _animationMode;
         /**
          * The tab index that should be selected after the content has been checked.
          */
@@ -37703,8 +38120,8 @@ var MatTabGroup = /** @class */ (function (_super) {
     MatTabGroup.decorators = [
         { type: core.Component, args: [{selector: 'mat-tab-group',
                     exportAs: 'matTabGroup',
-                    template: "<mat-tab-header #tabHeader [selectedIndex]=\"selectedIndex\" [disableRipple]=\"disableRipple\" (indexFocused)=\"_focusChanged($event)\" (selectFocusedIndex)=\"selectedIndex = $event\"><div class=\"mat-tab-label\" role=\"tab\" matTabLabelWrapper mat-ripple cdkMonitorElementFocus *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabLabelId(i)\" [attr.tabIndex]=\"_getTabIndex(tab, i)\" [attr.aria-posinset]=\"i + 1\" [attr.aria-setsize]=\"_tabs.length\" [attr.aria-controls]=\"_getTabContentId(i)\" [attr.aria-selected]=\"selectedIndex == i\" [attr.aria-label]=\"tab.ariaLabel || null\" [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\" [class.mat-tab-label-active]=\"selectedIndex == i\" [disabled]=\"tab.disabled\" [matRippleDisabled]=\"tab.disabled || disableRipple\" (click)=\"_handleClick(tab, tabHeader, i)\"><div class=\"mat-tab-label-content\"><ng-template [ngIf]=\"tab.templateLabel\"><ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template></ng-template><ng-template [ngIf]=\"!tab.templateLabel\">{{tab.textLabel}}</ng-template></div></div></mat-tab-header><div class=\"mat-tab-body-wrapper\" #tabBodyWrapper><mat-tab-body role=\"tabpanel\" *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabContentId(i)\" [attr.aria-labelledby]=\"_getTabLabelId(i)\" [class.mat-tab-body-active]=\"selectedIndex == i\" [content]=\"tab.content\" [position]=\"tab.position\" [origin]=\"tab.origin\" [animationDuration]=\"animationDuration\" (_onCentered)=\"_removeTabBodyWrapperHeight()\" (_onCentering)=\"_setTabBodyWrapperHeight($event)\"></mat-tab-body></div>",
-                    styles: [".mat-tab-group{display:flex;flex-direction:column}.mat-tab-group.mat-tab-group-inverted-header{flex-direction:column-reverse}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}@media (-ms-high-contrast:active){.mat-tab-label:focus{outline:dotted 2px}}.mat-tab-label.mat-tab-disabled{cursor:default}@media (-ms-high-contrast:active){.mat-tab-label.mat-tab-disabled{opacity:.5}}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (-ms-high-contrast:active){.mat-tab-label{opacity:1}}@media (max-width:599px){.mat-tab-label{padding:0 12px}}@media (max-width:959px){.mat-tab-label{padding:0 12px}}.mat-tab-group[mat-stretch-tabs]>.mat-tab-header .mat-tab-label{flex-basis:0;flex-grow:1}.mat-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height .5s cubic-bezier(.35,0,.25,1)}.mat-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.mat-tab-body.mat-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-tab-group.mat-tab-group-dynamic-height .mat-tab-body.mat-tab-body-active{overflow-y:hidden}"],
+                    template: "<mat-tab-header #tabHeader [selectedIndex]=\"selectedIndex\" [disableRipple]=\"disableRipple\" (indexFocused)=\"_focusChanged($event)\" (selectFocusedIndex)=\"selectedIndex = $event\"><div class=\"mat-tab-label\" role=\"tab\" matTabLabelWrapper mat-ripple cdkMonitorElementFocus *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabLabelId(i)\" [attr.tabIndex]=\"_getTabIndex(tab, i)\" [attr.aria-posinset]=\"i + 1\" [attr.aria-setsize]=\"_tabs.length\" [attr.aria-controls]=\"_getTabContentId(i)\" [attr.aria-selected]=\"selectedIndex == i\" [attr.aria-label]=\"tab.ariaLabel || null\" [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\" [class.mat-tab-label-active]=\"selectedIndex == i\" [disabled]=\"tab.disabled\" [matRippleDisabled]=\"tab.disabled || disableRipple\" (click)=\"_handleClick(tab, tabHeader, i)\"><div class=\"mat-tab-label-content\"><ng-template [ngIf]=\"tab.templateLabel\"><ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template></ng-template><ng-template [ngIf]=\"!tab.templateLabel\">{{tab.textLabel}}</ng-template></div></div></mat-tab-header><div class=\"mat-tab-body-wrapper\" [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\" #tabBodyWrapper><mat-tab-body role=\"tabpanel\" *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabContentId(i)\" [attr.aria-labelledby]=\"_getTabLabelId(i)\" [class.mat-tab-body-active]=\"selectedIndex == i\" [content]=\"tab.content\" [position]=\"tab.position\" [origin]=\"tab.origin\" [animationDuration]=\"animationDuration\" (_onCentered)=\"_removeTabBodyWrapperHeight()\" (_onCentering)=\"_setTabBodyWrapperHeight($event)\"></mat-tab-body></div>",
+                    styles: [".mat-tab-group{display:flex;flex-direction:column}.mat-tab-group.mat-tab-group-inverted-header{flex-direction:column-reverse}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}@media (-ms-high-contrast:active){.mat-tab-label:focus{outline:dotted 2px}}.mat-tab-label.mat-tab-disabled{cursor:default}@media (-ms-high-contrast:active){.mat-tab-label.mat-tab-disabled{opacity:.5}}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (-ms-high-contrast:active){.mat-tab-label{opacity:1}}@media (max-width:599px){.mat-tab-label{padding:0 12px}}@media (max-width:959px){.mat-tab-label{padding:0 12px}}.mat-tab-group[mat-stretch-tabs]>.mat-tab-header .mat-tab-label{flex-basis:0;flex-grow:1}.mat-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height .5s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable.mat-tab-body-wrapper{transition:none;animation:none}.mat-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.mat-tab-body.mat-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-tab-group.mat-tab-group-dynamic-height .mat-tab-body.mat-tab-body-active{overflow-y:hidden}"],
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     inputs: ['color', 'disableRipple'],
@@ -37719,7 +38136,8 @@ var MatTabGroup = /** @class */ (function (_super) {
     MatTabGroup.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: core.ChangeDetectorRef },
-        { type: undefined, decorators: [{ type: core.Inject, args: [MAT_TABS_CONFIG,] }, { type: core.Optional }] }
+        { type: undefined, decorators: [{ type: core.Inject, args: [MAT_TABS_CONFIG,] }, { type: core.Optional }] },
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
     ]; };
     MatTabGroup.propDecorators = {
         _tabs: [{ type: core.ContentChildren, args: [MatTab,] }],
@@ -37742,39 +38160,23 @@ var MatTabGroup = /** @class */ (function (_super) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-// Boilerplate for applying mixins to MatTabNav.
-/**
- * \@docs-private
- */
-var 
-// Boilerplate for applying mixins to MatTabNav.
-/**
- * \@docs-private
- */
-MatTabNavBase = /** @class */ (function () {
-    function MatTabNavBase(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-    return MatTabNavBase;
-}());
-/** @type {?} */
-var _MatTabNavMixinBase = mixinDisableRipple(mixinColor(MatTabNavBase, 'primary'));
 /**
  * Navigation component matching the styles of the tab group header.
  * Provides anchored navigation with animated ink bar.
  */
 var MatTabNav = /** @class */ (function (_super) {
     __extends(MatTabNav, _super);
-    function MatTabNav(elementRef, _dir, _ngZone, _changeDetectorRef, _viewportRuler) {
-        var _this = _super.call(this, elementRef) || this;
-        _this._dir = _dir;
-        _this._ngZone = _ngZone;
-        _this._changeDetectorRef = _changeDetectorRef;
-        _this._viewportRuler = _viewportRuler;
+    function MatTabNav(elementRef, dir, ngZone, changeDetectorRef, viewportRuler, 
+    /**
+     * @deprecated @breaking-change 9.0.0 `platform` parameter to become required.
+     */
+    platform$$1, animationMode) {
+        var _this = _super.call(this, elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform$$1, animationMode) || this;
+        _this._disableRipple = false;
         /**
-         * Subject that emits when the component has been destroyed.
+         * Theme color of the nav bar.
          */
-        _this._onDestroy = new rxjs.Subject();
+        _this.color = 'primary';
         return _this;
     }
     Object.defineProperty(MatTabNav.prototype, "backgroundColor", {
@@ -37790,117 +38192,99 @@ var MatTabNav = /** @class */ (function (_super) {
          */
         function (value) {
             /** @type {?} */
-            var nativeElement = this._elementRef.nativeElement;
-            nativeElement.classList.remove("mat-background-" + this.backgroundColor);
+            var classList = this._elementRef.nativeElement.classList;
+            classList.remove("mat-background-" + this.backgroundColor);
             if (value) {
-                nativeElement.classList.add("mat-background-" + value);
+                classList.add("mat-background-" + value);
             }
             this._backgroundColor = value;
         },
         enumerable: true,
         configurable: true
     });
-    /**
-     * Notifies the component that the active link has been changed.
-     * @breaking-change 8.0.0 `element` parameter to be removed.
-     */
-    /**
-     * Notifies the component that the active link has been changed.
-     * \@breaking-change 8.0.0 `element` parameter to be removed.
-     * @param {?} element
-     * @return {?}
-     */
-    MatTabNav.prototype.updateActiveLink = /**
-     * Notifies the component that the active link has been changed.
-     * \@breaking-change 8.0.0 `element` parameter to be removed.
-     * @param {?} element
-     * @return {?}
-     */
-    function (element) {
-        // Note: keeping the `element` for backwards-compat, but isn't being used for anything.
-        // @breaking-change 8.0.0
-        this._activeLinkChanged = !!element;
-        this._changeDetectorRef.markForCheck();
-    };
-    /**
-     * @return {?}
-     */
-    MatTabNav.prototype.ngAfterContentInit = /**
-     * @return {?}
-     */
-    function () {
-        var _this = this;
-        this._ngZone.runOutsideAngular((/**
+    Object.defineProperty(MatTabNav.prototype, "disableRipple", {
+        /** Whether the ripple effect is disabled or not. */
+        get: /**
+         * Whether the ripple effect is disabled or not.
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var dirChange = _this._dir ? _this._dir.change : rxjs.of(null);
-            return rxjs.merge(dirChange, _this._viewportRuler.change(10))
-                .pipe(operators.takeUntil(_this._onDestroy))
-                .subscribe((/**
-             * @return {?}
-             */
-            function () { return _this._alignInkBar(); }));
-        }));
-    };
-    /** Checks if the active link has been changed and, if so, will update the ink bar. */
+        function () { return this._disableRipple; },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) { this._disableRipple = coercion.coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
     /**
-     * Checks if the active link has been changed and, if so, will update the ink bar.
+     * @protected
      * @return {?}
      */
-    MatTabNav.prototype.ngAfterContentChecked = /**
-     * Checks if the active link has been changed and, if so, will update the ink bar.
+    MatTabNav.prototype._itemSelected = /**
+     * @protected
      * @return {?}
      */
     function () {
-        if (this._activeLinkChanged) {
-            /** @type {?} */
-            var activeTab = this._tabLinks.find((/**
-             * @param {?} tab
-             * @return {?}
-             */
-            function (tab) { return tab.active; }));
-            this._activeLinkElement = activeTab ? activeTab._elementRef : null;
-            this._alignInkBar();
-            this._activeLinkChanged = false;
-        }
+        // noop
     };
     /**
      * @return {?}
      */
-    MatTabNav.prototype.ngOnDestroy = /**
+    MatTabNav.prototype.ngAfterContentInit = /**
      * @return {?}
      */
     function () {
-        this._onDestroy.next();
-        this._onDestroy.complete();
+        this.updateActiveLink();
+        _super.prototype.ngAfterContentInit.call(this);
     };
-    /** Aligns the ink bar to the active link. */
     /**
-     * Aligns the ink bar to the active link.
+     * Notifies the component that the active link has been changed.
+     * @breaking-change 8.0.0 `element` parameter to be removed.
+     */
+    /**
+     * Notifies the component that the active link has been changed.
+     * \@breaking-change 8.0.0 `element` parameter to be removed.
+     * @param {?=} _element
      * @return {?}
      */
-    MatTabNav.prototype._alignInkBar = /**
-     * Aligns the ink bar to the active link.
+    MatTabNav.prototype.updateActiveLink = /**
+     * Notifies the component that the active link has been changed.
+     * \@breaking-change 8.0.0 `element` parameter to be removed.
+     * @param {?=} _element
      * @return {?}
      */
-    function () {
-        if (this._activeLinkElement) {
-            this._inkBar.show();
-            this._inkBar.alignToElement(this._activeLinkElement.nativeElement);
+    function (_element) {
+        if (!this._items) {
+            return;
         }
-        else {
-            this._inkBar.hide();
+        /** @type {?} */
+        var items = this._items.toArray();
+        for (var i = 0; i < items.length; i++) {
+            if (items[i].active) {
+                this.selectedIndex = i;
+                this._changeDetectorRef.markForCheck();
+                return;
+            }
         }
+        // The ink bar should hide itself if no items are active.
+        this.selectedIndex = -1;
+        this._inkBar.hide();
     };
     MatTabNav.decorators = [
         { type: core.Component, args: [{selector: '[mat-tab-nav-bar]',
                     exportAs: 'matTabNavBar, matTabNav',
-                    inputs: ['color', 'disableRipple'],
-                    template: "<div class=\"mat-tab-links\" (cdkObserveContent)=\"_alignInkBar()\"><ng-content></ng-content><mat-ink-bar></mat-ink-bar></div>",
-                    styles: [".mat-tab-nav-bar{overflow:hidden;position:relative;flex-shrink:0}.mat-tab-links{position:relative;display:flex}[mat-align-tabs=center] .mat-tab-links{justify-content:center}[mat-align-tabs=end] .mat-tab-links{justify-content:flex-end}.mat-tab-link{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;vertical-align:top;text-decoration:none;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}.mat-tab-link:focus{outline:0}.mat-tab-link:focus:not(.mat-tab-disabled){opacity:1}@media (-ms-high-contrast:active){.mat-tab-link:focus{outline:dotted 2px}}.mat-tab-link.mat-tab-disabled{cursor:default}@media (-ms-high-contrast:active){.mat-tab-link.mat-tab-disabled{opacity:.5}}.mat-tab-link .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (-ms-high-contrast:active){.mat-tab-link{opacity:1}}[mat-stretch-tabs] .mat-tab-link{flex-basis:0;flex-grow:1}.mat-tab-link.mat-tab-disabled{pointer-events:none}@media (max-width:599px){.mat-tab-link{min-width:72px}}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}@media (-ms-high-contrast:active){.mat-ink-bar{outline:solid 2px;height:0}}"],
-                    host: { 'class': 'mat-tab-nav-bar' },
+                    inputs: ['color'],
+                    template: "<div class=\"mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4\" #previousPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollBefore || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollBefore\" (click)=\"_handlePaginatorClick('before')\" (mousedown)=\"_handlePaginatorPress('before')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div><div class=\"mat-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\"><div class=\"mat-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\"><div class=\"mat-tab-links\"><ng-content></ng-content></div><mat-ink-bar></mat-ink-bar></div></div><div class=\"mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4\" #nextPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollAfter || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollAfter\" (mousedown)=\"_handlePaginatorPress('after')\" (click)=\"_handlePaginatorClick('after')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div>",
+                    styles: [".mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mat-tab-header-pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none}.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination{display:flex}.mat-tab-header-pagination-before,.mat-tab-header-rtl .mat-tab-header-pagination-after{padding-left:4px}.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-tab-header-pagination-after,.mat-tab-header-rtl .mat-tab-header-pagination-before{padding-right:4px}.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-before .mat-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:'';height:8px;width:8px}.mat-tab-header-pagination-disabled{box-shadow:none;cursor:default}.mat-tab-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mat-tab-links{display:flex}[mat-align-tabs=center] .mat-tab-links{justify-content:center}[mat-align-tabs=end] .mat-tab-links{justify-content:flex-end}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable.mat-ink-bar{transition:none;animation:none}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}@media (-ms-high-contrast:active){.mat-ink-bar{outline:solid 2px;height:0}}.mat-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}.mat-tab-link{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;vertical-align:top;text-decoration:none;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}.mat-tab-link:focus{outline:0}.mat-tab-link:focus:not(.mat-tab-disabled){opacity:1}@media (-ms-high-contrast:active){.mat-tab-link:focus{outline:dotted 2px}}.mat-tab-link.mat-tab-disabled{cursor:default}@media (-ms-high-contrast:active){.mat-tab-link.mat-tab-disabled{opacity:.5}}.mat-tab-link .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (-ms-high-contrast:active){.mat-tab-link{opacity:1}}[mat-stretch-tabs] .mat-tab-link{flex-basis:0;flex-grow:1}.mat-tab-link.mat-tab-disabled{pointer-events:none}@media (max-width:599px){.mat-tab-link{min-width:72px}}"],
+                    host: {
+                        'class': 'mat-tab-nav-bar mat-tab-header',
+                        '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls',
+                        '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
+                        '[class.mat-primary]': 'color !== "warn" && color !== "accent"',
+                        '[class.mat-accent]': 'color === "accent"',
+                        '[class.mat-warn]': 'color === "warn"',
+                    },
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                 },] },
@@ -37911,18 +38295,26 @@ var MatTabNav = /** @class */ (function (_super) {
         { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
         { type: core.NgZone },
         { type: core.ChangeDetectorRef },
-        { type: scrolling.ViewportRuler }
+        { type: scrolling.ViewportRuler },
+        { type: platform.Platform, decorators: [{ type: core.Optional }] },
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
     ]; };
     MatTabNav.propDecorators = {
-        _inkBar: [{ type: core.ViewChild, args: [MatInkBar, { static: true },] }],
-        _tabLinks: [{ type: core.ContentChildren, args: [core.forwardRef((/**
+        _items: [{ type: core.ContentChildren, args: [core.forwardRef((/**
                      * @return {?}
                      */
                     function () { return MatTabLink; })), { descendants: true },] }],
-        backgroundColor: [{ type: core.Input }]
+        _inkBar: [{ type: core.ViewChild, args: [MatInkBar, { static: true },] }],
+        _tabListContainer: [{ type: core.ViewChild, args: ['tabListContainer', { static: true },] }],
+        _tabList: [{ type: core.ViewChild, args: ['tabList', { static: true },] }],
+        _nextPaginator: [{ type: core.ViewChild, args: ['nextPaginator', { static: false },] }],
+        _previousPaginator: [{ type: core.ViewChild, args: ['previousPaginator', { static: false },] }],
+        backgroundColor: [{ type: core.Input }],
+        disableRipple: [{ type: core.Input }],
+        color: [{ type: core.Input }]
     };
     return MatTabNav;
-}(_MatTabNavMixinBase));
+}(MatPaginatedTabHeader));
 // Boilerplate for applying mixins to MatTabLink.
 var 
 // Boilerplate for applying mixins to MatTabLink.
@@ -37938,20 +38330,23 @@ var _MatTabLinkMixinBase = mixinTabIndex(mixinDisableRipple(mixinDisabled(MatTab
  */
 var MatTabLink = /** @class */ (function (_super) {
     __extends(MatTabLink, _super);
-    function MatTabLink(_tabNavBar, _elementRef, ngZone, platform$$1, globalRippleOptions, tabIndex, _focusMonitor) {
+    function MatTabLink(_tabNavBar, elementRef, ngZone, platform$$1, globalRippleOptions, tabIndex, _focusMonitor, animationMode) {
         var _this = _super.call(this) || this;
         _this._tabNavBar = _tabNavBar;
-        _this._elementRef = _elementRef;
+        _this.elementRef = elementRef;
         _this._focusMonitor = _focusMonitor;
         /**
          * Whether the tab link is active or not.
          */
         _this._isActive = false;
-        _this._tabLinkRipple = new RippleRenderer(_this, ngZone, _elementRef, platform$$1);
-        _this._tabLinkRipple.setupTriggerEvents(_elementRef.nativeElement);
+        _this._tabLinkRipple = new RippleRenderer(_this, ngZone, elementRef, platform$$1);
+        _this._tabLinkRipple.setupTriggerEvents(elementRef.nativeElement);
         _this.rippleConfig = globalRippleOptions || {};
         _this.tabIndex = parseInt(tabIndex) || 0;
-        _focusMonitor.monitor(_elementRef);
+        if (animationMode === 'NoopAnimations') {
+            _this.rippleConfig.animation = { enterDuration: 0, exitDuration: 0 };
+        }
+        _focusMonitor.monitor(elementRef);
         return _this;
     }
     Object.defineProperty(MatTabLink.prototype, "active", {
@@ -37968,7 +38363,7 @@ var MatTabLink = /** @class */ (function (_super) {
         function (value) {
             if (value !== this._isActive) {
                 this._isActive = value;
-                this._tabNavBar.updateActiveLink(this._elementRef);
+                this._tabNavBar.updateActiveLink(this.elementRef);
             }
         },
         enumerable: true,
@@ -37991,6 +38386,15 @@ var MatTabLink = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    /**
+     * @return {?}
+     */
+    MatTabLink.prototype.focus = /**
+     * @return {?}
+     */
+    function () {
+        this.elementRef.nativeElement.focus();
+    };
     /**
      * @return {?}
      */
@@ -37999,7 +38403,7 @@ var MatTabLink = /** @class */ (function (_super) {
      */
     function () {
         this._tabLinkRipple._removeTriggerEvents();
-        this._focusMonitor.stopMonitoring(this._elementRef);
+        this._focusMonitor.stopMonitoring(this.elementRef);
     };
     MatTabLink.decorators = [
         { type: core.Directive, args: [{
@@ -38008,8 +38412,8 @@ var MatTabLink = /** @class */ (function (_super) {
                     inputs: ['disabled', 'disableRipple', 'tabIndex'],
                     host: {
                         'class': 'mat-tab-link',
-                        '[attr.aria-current]': 'active',
-                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.aria-current]': 'active ? "page" : null',
+                        '[attr.aria-disabled]': 'disabled',
                         '[attr.tabIndex]': 'tabIndex',
                         '[class.mat-tab-disabled]': 'disabled',
                         '[class.mat-tab-label-active]': 'active',
@@ -38024,7 +38428,8 @@ var MatTabLink = /** @class */ (function (_super) {
         { type: platform.Platform },
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_RIPPLE_GLOBAL_OPTIONS,] }] },
         { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] },
-        { type: a11y.FocusMonitor }
+        { type: a11y.FocusMonitor },
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
     ]; };
     MatTabLink.propDecorators = {
         active: [{ type: core.Input }]
@@ -38231,40 +38636,12 @@ var MatToolbarModule = /** @class */ (function () {
     return MatToolbarModule;
 }());
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * Outlet for nested CdkNode. Put `[matTreeNodeOutlet]` on a tag to place children dataNodes
- * inside the outlet.
- */
-var MatTreeNodeOutlet = /** @class */ (function () {
-    function MatTreeNodeOutlet(viewContainer, _node) {
-        this.viewContainer = viewContainer;
-        this._node = _node;
-    }
-    MatTreeNodeOutlet.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[matTreeNodeOutlet]'
-                },] },
-    ];
-    /** @nocollapse */
-    MatTreeNodeOutlet.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: undefined, decorators: [{ type: core.Inject, args: [tree.CDK_TREE_NODE_OUTLET_NODE,] }, { type: core.Optional }] }
-    ]; };
-    return MatTreeNodeOutlet;
-}());
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 var _MatTreeNodeMixinBase = mixinTabIndex(mixinDisabled(tree.CdkTreeNode));
-/** @type {?} */
-var _MatNestedTreeNodeMixinBase = mixinTabIndex(mixinDisabled(tree.CdkNestedTreeNode));
 /**
  * Wrapper for the CdkTree node with Material design styles.
  * @template T
@@ -38338,9 +38715,43 @@ var MatNestedTreeNode = /** @class */ (function (_super) {
         _this._elementRef = _elementRef;
         _this._tree = _tree;
         _this._differs = _differs;
+        _this._disabled = false;
         _this.tabIndex = Number(tabIndex) || 0;
         return _this;
     }
+    Object.defineProperty(MatNestedTreeNode.prototype, "disabled", {
+        /** Whether the node is disabled. */
+        get: /**
+         * Whether the node is disabled.
+         * @return {?}
+         */
+        function () { return this._disabled; },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) { this._disabled = coercion.coerceBooleanProperty(value); },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MatNestedTreeNode.prototype, "tabIndex", {
+        /** Tabindex for the node. */
+        get: /**
+         * Tabindex for the node.
+         * @return {?}
+         */
+        function () { return this.disabled ? -1 : this._tabIndex; },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            // If the specified tabIndex value is null or undefined, fall back to the default value.
+            this._tabIndex = value != null ? value : 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
     // This is a workaround for https://github.com/angular/angular/issues/23091
     // In aot mode, the lifecycle hooks from parent class are not called.
     // TODO(tinayuangao): Remove when the angular issue #23091 is fixed
@@ -38378,7 +38789,6 @@ var MatNestedTreeNode = /** @class */ (function (_super) {
                         '[attr.role]': 'role',
                         'class': 'mat-nested-tree-node',
                     },
-                    inputs: ['disabled', 'tabIndex'],
                     providers: [
                         { provide: tree.CdkNestedTreeNode, useExisting: MatNestedTreeNode },
                         { provide: tree.CdkTreeNode, useExisting: MatNestedTreeNode },
@@ -38395,14 +38805,11 @@ var MatNestedTreeNode = /** @class */ (function (_super) {
     ]; };
     MatNestedTreeNode.propDecorators = {
         node: [{ type: core.Input, args: ['matNestedTreeNode',] }],
-        nodeOutlet: [{ type: core.ContentChildren, args: [MatTreeNodeOutlet, {
-                        // We need to use `descendants: true`, because Ivy will no longer match
-                        // indirect descendants if it's left as false.
-                        descendants: true
-                    },] }]
+        disabled: [{ type: core.Input }],
+        tabIndex: [{ type: core.Input }]
     };
     return MatNestedTreeNode;
-}(_MatNestedTreeNodeMixinBase));
+}(tree.CdkNestedTreeNode));
 
 /**
  * @fileoverview added by tsickle
@@ -38430,6 +38837,36 @@ var MatTreeNodePadding = /** @class */ (function (_super) {
     return MatTreeNodePadding;
 }(tree.CdkTreeNodePadding));
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * Outlet for nested CdkNode. Put `[matTreeNodeOutlet]` on a tag to place children dataNodes
+ * inside the outlet.
+ */
+var MatTreeNodeOutlet = /** @class */ (function () {
+    function MatTreeNodeOutlet(viewContainer, _node) {
+        this.viewContainer = viewContainer;
+        this._node = _node;
+    }
+    MatTreeNodeOutlet.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[matTreeNodeOutlet]',
+                    providers: [{
+                            provide: tree.CdkTreeNodeOutlet,
+                            useExisting: MatTreeNodeOutlet
+                        }]
+                },] },
+    ];
+    /** @nocollapse */
+    MatTreeNodeOutlet.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: undefined, decorators: [{ type: core.Inject, args: [tree.CDK_TREE_NODE_OUTLET_NODE,] }, { type: core.Optional }] }
+    ]; };
+    return MatTreeNodeOutlet;
+}());
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -38974,7 +39411,7 @@ exports.MatChipRemove = MatChipRemove;
 exports.MatChipInput = MatChipInput;
 exports.MAT_CHIPS_DEFAULT_OPTIONS = MAT_CHIPS_DEFAULT_OPTIONS;
 exports.ɵa1 = MATERIAL_SANITY_CHECKS_FACTORY;
-exports.VERSION = VERSION;
+exports.VERSION = VERSION$1;
 exports.AnimationCurves = AnimationCurves;
 exports.AnimationDurations = AnimationDurations;
 exports.MatCommonModule = MatCommonModule;
@@ -39031,6 +39468,9 @@ exports.SEP = SEP;
 exports.OCT = OCT;
 exports.NOV = NOV;
 exports.DEC = DEC;
+exports.MatMultiYearView = MatMultiYearView;
+exports.yearsPerPage = yearsPerPage;
+exports.yearsPerRow = yearsPerRow;
 exports.MatDatepickerModule = MatDatepickerModule;
 exports.MatCalendarHeader = MatCalendarHeader;
 exports.MatCalendar = MatCalendar;
@@ -39051,9 +39491,6 @@ exports.MatDatepickerToggleIcon = MatDatepickerToggleIcon;
 exports.MatDatepickerToggle = MatDatepickerToggle;
 exports.MatMonthView = MatMonthView;
 exports.MatYearView = MatYearView;
-exports.yearsPerPage = yearsPerPage;
-exports.yearsPerRow = yearsPerRow;
-exports.MatMultiYearView = MatMultiYearView;
 exports.MatDialogModule = MatDialogModule;
 exports.MAT_DIALOG_SCROLL_STRATEGY_FACTORY = MAT_DIALOG_SCROLL_STRATEGY_FACTORY;
 exports.MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY = MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY;
@@ -39099,7 +39536,7 @@ exports.MatPrefix = MatPrefix;
 exports.MatSuffix = MatSuffix;
 exports.MatLabel = MatLabel;
 exports.matFormFieldAnimations = matFormFieldAnimations;
-exports.ɵa5 = MAT_GRID_LIST;
+exports.ɵa3 = MAT_GRID_LIST;
 exports.MatGridListModule = MatGridListModule;
 exports.MatGridList = MatGridList;
 exports.MatGridTile = MatGridTile;
@@ -39134,9 +39571,9 @@ exports.MAT_SELECTION_LIST_VALUE_ACCESSOR = MAT_SELECTION_LIST_VALUE_ACCESSOR;
 exports.MatSelectionListChange = MatSelectionListChange;
 exports.MatListOption = MatListOption;
 exports.MatSelectionList = MatSelectionList;
-exports.ɵa24 = MAT_MENU_DEFAULT_OPTIONS_FACTORY;
-exports.ɵb24 = MAT_MENU_SCROLL_STRATEGY_FACTORY;
-exports.ɵc24 = MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER;
+exports.ɵa23 = MAT_MENU_DEFAULT_OPTIONS_FACTORY;
+exports.ɵb23 = MAT_MENU_SCROLL_STRATEGY_FACTORY;
+exports.ɵc23 = MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER;
 exports.MatMenu = MatMenu;
 exports.MAT_MENU_DEFAULT_OPTIONS = MAT_MENU_DEFAULT_OPTIONS;
 exports._MatMenu = _MatMenu;
@@ -39167,6 +39604,8 @@ exports.MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS = MAT_PROGRESS_SPINNER_DEFAULT_OPTI
 exports.MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY = MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY;
 exports.MatProgressSpinnerModule = MatProgressSpinnerModule;
 exports.MatRadioModule = MatRadioModule;
+exports.MAT_RADIO_DEFAULT_OPTIONS_FACTORY = MAT_RADIO_DEFAULT_OPTIONS_FACTORY;
+exports.MAT_RADIO_DEFAULT_OPTIONS = MAT_RADIO_DEFAULT_OPTIONS;
 exports.MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR;
 exports.MatRadioChange = MatRadioChange;
 exports.MatRadioGroup = MatRadioGroup;
@@ -39197,11 +39636,14 @@ exports.MatSidenavContent = MatSidenavContent;
 exports.MatSidenav = MatSidenav;
 exports.MatSidenavContainer = MatSidenavContainer;
 exports.matDrawerAnimations = matDrawerAnimations;
+exports._MatSlideToggleRequiredValidatorModule = _MatSlideToggleRequiredValidatorModule;
 exports.MatSlideToggleModule = MatSlideToggleModule;
 exports.MAT_SLIDE_TOGGLE_VALUE_ACCESSOR = MAT_SLIDE_TOGGLE_VALUE_ACCESSOR;
 exports.MatSlideToggleChange = MatSlideToggleChange;
 exports.MatSlideToggle = MatSlideToggle;
 exports.MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS = MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS;
+exports.MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR = MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR;
+exports.MatSlideToggleRequiredValidator = MatSlideToggleRequiredValidator;
 exports.MatSliderModule = MatSliderModule;
 exports.MAT_SLIDER_VALUE_ACCESSOR = MAT_SLIDER_VALUE_ACCESSOR;
 exports.MatSliderChange = MatSliderChange;
@@ -39254,7 +39696,8 @@ exports.MatFooterRow = MatFooterRow;
 exports.MatRow = MatRow;
 exports.MatTableDataSource = MatTableDataSource;
 exports.MatTextColumn = MatTextColumn;
-exports.ɵa23 = _MAT_INK_BAR_POSITIONER_FACTORY;
+exports.ɵa24 = _MAT_INK_BAR_POSITIONER_FACTORY;
+exports.ɵb24 = MatPaginatedTabHeader;
 exports.MatInkBar = MatInkBar;
 exports._MAT_INK_BAR_POSITIONER = _MAT_INK_BAR_POSITIONER;
 exports.MatTabBody = MatTabBody;