@angular/material 10.0.0-rc.3 → 10.1.0

package/fesm2015/sort.js

@@ -2,6 +2,7 @@ import { EventEmitter, isDevMode, Directive, Input, Output, ɵɵdefineInjectable
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { mixinInitialized, mixinDisabled, AnimationDurations, AnimationCurves } from '@angular/material/core';
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { SPACE, ENTER } from '@angular/cdk/keycodes';
 import { Subject, merge } from 'rxjs';
 import { trigger, state, style, transition, animate, keyframes, query, animateChild } from '@angular/animations';
 import { CommonModule } from '@angular/common';
@@ -43,110 +44,107 @@ class MatSortBase {
 }
 const _MatSortMixinBase = mixinInitialized(mixinDisabled(MatSortBase));
 /** Container for MatSortables to manage the sort state and provide default sort parameters. */
-let MatSort = /** @class */ (() => {
-    class MatSort extends _MatSortMixinBase {
-        constructor() {
-            super(...arguments);
-            /** Collection of all registered sortables that this directive manages. */
-            this.sortables = new Map();
-            /** Used to notify any child components listening to state changes. */
-            this._stateChanges = new Subject();
-            /**
-             * The direction to set when an MatSortable is initially sorted.
-             * May be overriden by the MatSortable's sort start.
-             */
-            this.start = 'asc';
-            this._direction = '';
-            /** Event emitted when the user changes either the active sort or sort direction. */
-            this.sortChange = new EventEmitter();
-        }
-        /** The sort direction of the currently active MatSortable. */
-        get direction() { return this._direction; }
-        set direction(direction) {
-            if (isDevMode() && direction && direction !== 'asc' && direction !== 'desc') {
-                throw getSortInvalidDirectionError(direction);
-            }
-            this._direction = direction;
-        }
+class MatSort extends _MatSortMixinBase {
+    constructor() {
+        super(...arguments);
+        /** Collection of all registered sortables that this directive manages. */
+        this.sortables = new Map();
+        /** Used to notify any child components listening to state changes. */
+        this._stateChanges = new Subject();
         /**
-         * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
-         * May be overriden by the MatSortable's disable clear input.
+         * The direction to set when an MatSortable is initially sorted.
+         * May be overriden by the MatSortable's sort start.
          */
-        get disableClear() { return this._disableClear; }
-        set disableClear(v) { this._disableClear = coerceBooleanProperty(v); }
-        /**
-         * Register function to be used by the contained MatSortables. Adds the MatSortable to the
-         * collection of MatSortables.
-         */
-        register(sortable) {
-            if (!sortable.id) {
-                throw getSortHeaderMissingIdError();
-            }
-            if (this.sortables.has(sortable.id)) {
-                throw getSortDuplicateSortableIdError(sortable.id);
-            }
-            this.sortables.set(sortable.id, sortable);
+        this.start = 'asc';
+        this._direction = '';
+        /** Event emitted when the user changes either the active sort or sort direction. */
+        this.sortChange = new EventEmitter();
+    }
+    /** The sort direction of the currently active MatSortable. */
+    get direction() { return this._direction; }
+    set direction(direction) {
+        if (isDevMode() && direction && direction !== 'asc' && direction !== 'desc') {
+            throw getSortInvalidDirectionError(direction);
         }
-        /**
-         * Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
-         * collection of contained MatSortables.
-         */
-        deregister(sortable) {
-            this.sortables.delete(sortable.id);
+        this._direction = direction;
+    }
+    /**
+     * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
+     * May be overriden by the MatSortable's disable clear input.
+     */
+    get disableClear() { return this._disableClear; }
+    set disableClear(v) { this._disableClear = coerceBooleanProperty(v); }
+    /**
+     * Register function to be used by the contained MatSortables. Adds the MatSortable to the
+     * collection of MatSortables.
+     */
+    register(sortable) {
+        if (!sortable.id) {
+            throw getSortHeaderMissingIdError();
         }
-        /** Sets the active sort id and determines the new sort direction. */
-        sort(sortable) {
-            if (this.active != sortable.id) {
-                this.active = sortable.id;
-                this.direction = sortable.start ? sortable.start : this.start;
-            }
-            else {
-                this.direction = this.getNextSortDirection(sortable);
-            }
-            this.sortChange.emit({ active: this.active, direction: this.direction });
+        if (this.sortables.has(sortable.id)) {
+            throw getSortDuplicateSortableIdError(sortable.id);
         }
-        /** Returns the next sort direction of the active sortable, checking for potential overrides. */
-        getNextSortDirection(sortable) {
-            if (!sortable) {
-                return '';
-            }
-            // Get the sort direction cycle with the potential sortable overrides.
-            const disableClear = sortable.disableClear != null ? sortable.disableClear : this.disableClear;
-            let sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
-            // Get and return the next direction in the cycle
-            let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
-            if (nextDirectionIndex >= sortDirectionCycle.length) {
-                nextDirectionIndex = 0;
-            }
-            return sortDirectionCycle[nextDirectionIndex];
+        this.sortables.set(sortable.id, sortable);
+    }
+    /**
+     * Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
+     * collection of contained MatSortables.
+     */
+    deregister(sortable) {
+        this.sortables.delete(sortable.id);
+    }
+    /** Sets the active sort id and determines the new sort direction. */
+    sort(sortable) {
+        if (this.active != sortable.id) {
+            this.active = sortable.id;
+            this.direction = sortable.start ? sortable.start : this.start;
         }
-        ngOnInit() {
-            this._markInitialized();
+        else {
+            this.direction = this.getNextSortDirection(sortable);
         }
-        ngOnChanges() {
-            this._stateChanges.next();
+        this.sortChange.emit({ active: this.active, direction: this.direction });
+    }
+    /** Returns the next sort direction of the active sortable, checking for potential overrides. */
+    getNextSortDirection(sortable) {
+        if (!sortable) {
+            return '';
         }
-        ngOnDestroy() {
-            this._stateChanges.complete();
+        // Get the sort direction cycle with the potential sortable overrides.
+        const disableClear = sortable.disableClear != null ? sortable.disableClear : this.disableClear;
+        let sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
+        // Get and return the next direction in the cycle
+        let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
+        if (nextDirectionIndex >= sortDirectionCycle.length) {
+            nextDirectionIndex = 0;
         }
+        return sortDirectionCycle[nextDirectionIndex];
+    }
+    ngOnInit() {
+        this._markInitialized();
+    }
+    ngOnChanges() {
+        this._stateChanges.next();
+    }
+    ngOnDestroy() {
+        this._stateChanges.complete();
     }
-    MatSort.decorators = [
-        { type: Directive, args: [{
-                    selector: '[matSort]',
-                    exportAs: 'matSort',
-                    host: { 'class': 'mat-sort' },
-                    inputs: ['disabled: matSortDisabled']
-                },] }
-    ];
-    MatSort.propDecorators = {
-        active: [{ type: Input, args: ['matSortActive',] }],
-        start: [{ type: Input, args: ['matSortStart',] }],
-        direction: [{ type: Input, args: ['matSortDirection',] }],
-        disableClear: [{ type: Input, args: ['matSortDisableClear',] }],
-        sortChange: [{ type: Output, args: ['matSortChange',] }]
-    };
-    return MatSort;
-})();
+}
+MatSort.decorators = [
+    { type: Directive, args: [{
+                selector: '[matSort]',
+                exportAs: 'matSort',
+                host: { 'class': 'mat-sort' },
+                inputs: ['disabled: matSortDisabled']
+            },] }
+];
+MatSort.propDecorators = {
+    active: [{ type: Input, args: ['matSortActive',] }],
+    start: [{ type: Input, args: ['matSortStart',] }],
+    direction: [{ type: Input, args: ['matSortDirection',] }],
+    disableClear: [{ type: Input, args: ['matSortDisableClear',] }],
+    sortChange: [{ type: Output, args: ['matSortChange',] }]
+};
 /** Returns the sort direction cycle to use given the provided parameters of order and clear. */
 function getSortDirectionCycle(start, disableClear) {
     let sortOrder = ['asc', 'desc'];
@@ -252,26 +250,27 @@ const matSortAnimations = {
  * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
  * include it in a custom provider.
  */
-let MatSortHeaderIntl = /** @class */ (() => {
-    class MatSortHeaderIntl {
-        constructor() {
-            /**
-             * Stream that emits whenever the labels here are changed. Use this to notify
-             * components if the labels have changed after initialization.
-             */
-            this.changes = new Subject();
-            /** ARIA label for the sorting button. */
-            this.sortButtonLabel = (id) => {
-                return `Change sorting for ${id}`;
-            };
-        }
+class MatSortHeaderIntl {
+    constructor() {
+        /**
+         * Stream that emits whenever the labels here are changed. Use this to notify
+         * components if the labels have changed after initialization.
+         */
+        this.changes = new Subject();
+        /**
+         * ARIA label for the sorting button.
+         * @deprecated Not used anymore. To be removed.
+         * @breaking-change 8.0.0
+         */
+        this.sortButtonLabel = (id) => {
+            return `Change sorting for ${id}`;
+        };
     }
-    MatSortHeaderIntl.ɵprov = ɵɵdefineInjectable({ factory: function MatSortHeaderIntl_Factory() { return new MatSortHeaderIntl(); }, token: MatSortHeaderIntl, providedIn: "root" });
-    MatSortHeaderIntl.decorators = [
-        { type: Injectable, args: [{ providedIn: 'root' },] }
-    ];
-    return MatSortHeaderIntl;
-})();
+}
+MatSortHeaderIntl.ɵprov = ɵɵdefineInjectable({ factory: function MatSortHeaderIntl_Factory() { return new MatSortHeaderIntl(); }, token: MatSortHeaderIntl, providedIn: "root" });
+MatSortHeaderIntl.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
 /** @docs-private */
 function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl) {
     return parentIntl || new MatSortHeaderIntl();
@@ -305,214 +304,220 @@ const _MatSortHeaderMixinBase = mixinDisabled(MatSortHeaderBase);
  * If used on header cells in a CdkTable, it will automatically default its id from its containing
  * column definition.
  */
-let MatSortHeader = /** @class */ (() => {
-    class MatSortHeader extends _MatSortHeaderMixinBase {
-        constructor(_intl, changeDetectorRef, _sort, _columnDef, _focusMonitor, _elementRef) {
-            // Note that we use a string token for the `_columnDef`, because the value is provided both by
-            // `material/table` and `cdk/table` and we can't have the CDK depending on Material,
-            // and we want to avoid having the sort header depending on the CDK table because
-            // of this single reference.
-            super();
-            this._intl = _intl;
-            this._sort = _sort;
-            this._columnDef = _columnDef;
-            this._focusMonitor = _focusMonitor;
-            this._elementRef = _elementRef;
-            /**
-             * Flag set to true when the indicator should be displayed while the sort is not active. Used to
-             * provide an affordance that the header is sortable by showing on focus and hover.
-             */
-            this._showIndicatorHint = false;
-            /** The direction the arrow should be facing according to the current state. */
-            this._arrowDirection = '';
-            /**
-             * Whether the view state animation should show the transition between the `from` and `to` states.
-             */
-            this._disableViewStateAnimation = false;
-            /** Sets the position of the arrow that displays when sorted. */
-            this.arrowPosition = 'after';
-            if (!_sort) {
-                throw getSortHeaderNotContainedWithinSortError();
-            }
-            this._rerenderSubscription = merge(_sort.sortChange, _sort._stateChanges, _intl.changes)
-                .subscribe(() => {
-                if (this._isSorted()) {
-                    this._updateArrowDirection();
-                }
-                // If this header was recently active and now no longer sorted, animate away the arrow.
-                if (!this._isSorted() && this._viewState && this._viewState.toState === 'active') {
-                    this._disableViewStateAnimation = false;
-                    this._setAnimationTransitionState({ fromState: 'active', toState: this._arrowDirection });
-                }
-                changeDetectorRef.markForCheck();
-            });
-        }
-        /** Overrides the disable clear value of the containing MatSort for this MatSortable. */
-        get disableClear() { return this._disableClear; }
-        set disableClear(v) { this._disableClear = coerceBooleanProperty(v); }
-        ngOnInit() {
-            if (!this.id && this._columnDef) {
-                this.id = this._columnDef.name;
-            }
-            // Initialize the direction of the arrow and set the view state to be immediately that state.
-            this._updateArrowDirection();
-            this._setAnimationTransitionState({ toState: this._isSorted() ? 'active' : this._arrowDirection });
-            this._sort.register(this);
-        }
-        ngAfterViewInit() {
-            // We use the focus monitor because we also want to style
-            // things differently based on the focus origin.
-            this._focusMonitor.monitor(this._elementRef, true)
-                .subscribe(origin => this._setIndicatorHintVisible(!!origin));
-        }
-        ngOnDestroy() {
-            this._focusMonitor.stopMonitoring(this._elementRef);
-            this._sort.deregister(this);
-            this._rerenderSubscription.unsubscribe();
-        }
+class MatSortHeader extends _MatSortHeaderMixinBase {
+    constructor(_intl, changeDetectorRef, _sort, _columnDef, _focusMonitor, _elementRef) {
+        // Note that we use a string token for the `_columnDef`, because the value is provided both by
+        // `material/table` and `cdk/table` and we can't have the CDK depending on Material,
+        // and we want to avoid having the sort header depending on the CDK table because
+        // of this single reference.
+        super();
+        this._intl = _intl;
+        this._sort = _sort;
+        this._columnDef = _columnDef;
+        this._focusMonitor = _focusMonitor;
+        this._elementRef = _elementRef;
         /**
-         * Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the
-         * user showing what the active sort will become. If set to false, the arrow will fade away.
+         * Flag set to true when the indicator should be displayed while the sort is not active. Used to
+         * provide an affordance that the header is sortable by showing on focus and hover.
          */
-        _setIndicatorHintVisible(visible) {
-            // No-op if the sort header is disabled - should not make the hint visible.
-            if (this._isDisabled() && visible) {
-                return;
-            }
-            this._showIndicatorHint = visible;
-            if (!this._isSorted()) {
-                this._updateArrowDirection();
-                if (this._showIndicatorHint) {
-                    this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'hint' });
-                }
-                else {
-                    this._setAnimationTransitionState({ fromState: 'hint', toState: this._arrowDirection });
-                }
-            }
-        }
+        this._showIndicatorHint = false;
+        /** The direction the arrow should be facing according to the current state. */
+        this._arrowDirection = '';
         /**
-         * Sets the animation transition view state for the arrow's position and opacity. If the
-         * `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that
-         * no animation appears.
+         * Whether the view state animation should show the transition between the `from` and `to` states.
          */
-        _setAnimationTransitionState(viewState) {
-            this._viewState = viewState;
-            // If the animation for arrow position state (opacity/translation) should be disabled,
-            // remove the fromState so that it jumps right to the toState.
-            if (this._disableViewStateAnimation) {
-                this._viewState = { toState: viewState.toState };
-            }
+        this._disableViewStateAnimation = false;
+        /** Sets the position of the arrow that displays when sorted. */
+        this.arrowPosition = 'after';
+        if (!_sort) {
+            throw getSortHeaderNotContainedWithinSortError();
         }
-        /** Triggers the sort on this sort header and removes the indicator hint. */
-        _handleClick() {
-            if (this._isDisabled()) {
-                return;
+        this._rerenderSubscription = merge(_sort.sortChange, _sort._stateChanges, _intl.changes)
+            .subscribe(() => {
+            if (this._isSorted()) {
+                this._updateArrowDirection();
             }
-            this._sort.sort(this);
-            // Do not show the animation if the header was already shown in the right position.
-            if (this._viewState.toState === 'hint' || this._viewState.toState === 'active') {
-                this._disableViewStateAnimation = true;
+            // If this header was recently active and now no longer sorted, animate away the arrow.
+            if (!this._isSorted() && this._viewState && this._viewState.toState === 'active') {
+                this._disableViewStateAnimation = false;
+                this._setAnimationTransitionState({ fromState: 'active', toState: this._arrowDirection });
             }
-            // If the arrow is now sorted, animate the arrow into place. Otherwise, animate it away into
-            // the direction it is facing.
-            const viewState = this._isSorted() ?
-                { fromState: this._arrowDirection, toState: 'active' } :
-                { fromState: 'active', toState: this._arrowDirection };
-            this._setAnimationTransitionState(viewState);
-            this._showIndicatorHint = false;
+            changeDetectorRef.markForCheck();
+        });
+    }
+    /** Overrides the disable clear value of the containing MatSort for this MatSortable. */
+    get disableClear() { return this._disableClear; }
+    set disableClear(v) { this._disableClear = coerceBooleanProperty(v); }
+    ngOnInit() {
+        if (!this.id && this._columnDef) {
+            this.id = this._columnDef.name;
         }
-        /** Whether this MatSortHeader is currently sorted in either ascending or descending order. */
-        _isSorted() {
-            return this._sort.active == this.id &&
-                (this._sort.direction === 'asc' || this._sort.direction === 'desc');
+        // Initialize the direction of the arrow and set the view state to be immediately that state.
+        this._updateArrowDirection();
+        this._setAnimationTransitionState({ toState: this._isSorted() ? 'active' : this._arrowDirection });
+        this._sort.register(this);
+    }
+    ngAfterViewInit() {
+        // We use the focus monitor because we also want to style
+        // things differently based on the focus origin.
+        this._focusMonitor.monitor(this._elementRef, true)
+            .subscribe(origin => this._setIndicatorHintVisible(!!origin));
+    }
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this._elementRef);
+        this._sort.deregister(this);
+        this._rerenderSubscription.unsubscribe();
+    }
+    /**
+     * Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the
+     * user showing what the active sort will become. If set to false, the arrow will fade away.
+     */
+    _setIndicatorHintVisible(visible) {
+        // No-op if the sort header is disabled - should not make the hint visible.
+        if (this._isDisabled() && visible) {
+            return;
         }
-        /** Returns the animation state for the arrow direction (indicator and pointers). */
-        _getArrowDirectionState() {
-            return `${this._isSorted() ? 'active-' : ''}${this._arrowDirection}`;
+        this._showIndicatorHint = visible;
+        if (!this._isSorted()) {
+            this._updateArrowDirection();
+            if (this._showIndicatorHint) {
+                this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'hint' });
+            }
+            else {
+                this._setAnimationTransitionState({ fromState: 'hint', toState: this._arrowDirection });
+            }
         }
-        /** Returns the arrow position state (opacity, translation). */
-        _getArrowViewState() {
-            const fromState = this._viewState.fromState;
-            return (fromState ? `${fromState}-to-` : '') + this._viewState.toState;
+    }
+    /**
+     * Sets the animation transition view state for the arrow's position and opacity. If the
+     * `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that
+     * no animation appears.
+     */
+    _setAnimationTransitionState(viewState) {
+        this._viewState = viewState;
+        // If the animation for arrow position state (opacity/translation) should be disabled,
+        // remove the fromState so that it jumps right to the toState.
+        if (this._disableViewStateAnimation) {
+            this._viewState = { toState: viewState.toState };
         }
-        /**
-         * Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be
-         * facing the start direction. Otherwise if it is sorted, the arrow should point in the currently
-         * active sorted direction. The reason this is updated through a function is because the direction
-         * should only be changed at specific times - when deactivated but the hint is displayed and when
-         * the sort is active and the direction changes. Otherwise the arrow's direction should linger
-         * in cases such as the sort becoming deactivated but we want to animate the arrow away while
-         * preserving its direction, even though the next sort direction is actually different and should
-         * only be changed once the arrow displays again (hint or activation).
-         */
-        _updateArrowDirection() {
-            this._arrowDirection = this._isSorted() ?
-                this._sort.direction :
-                (this.start || this._sort.start);
+    }
+    /** Triggers the sort on this sort header and removes the indicator hint. */
+    _toggleOnInteraction() {
+        this._sort.sort(this);
+        // Do not show the animation if the header was already shown in the right position.
+        if (this._viewState.toState === 'hint' || this._viewState.toState === 'active') {
+            this._disableViewStateAnimation = true;
         }
-        _isDisabled() {
-            return this._sort.disabled || this.disabled;
+        // If the arrow is now sorted, animate the arrow into place. Otherwise, animate it away into
+        // the direction it is facing.
+        const viewState = this._isSorted() ?
+            { fromState: this._arrowDirection, toState: 'active' } :
+            { fromState: 'active', toState: this._arrowDirection };
+        this._setAnimationTransitionState(viewState);
+        this._showIndicatorHint = false;
+    }
+    _handleClick() {
+        if (!this._isDisabled()) {
+            this._toggleOnInteraction();
         }
-        /**
-         * Gets the aria-sort attribute that should be applied to this sort header. If this header
-         * is not sorted, returns null so that the attribute is removed from the host element. Aria spec
-         * says that the aria-sort property should only be present on one header at a time, so removing
-         * ensures this is true.
-         */
-        _getAriaSortAttribute() {
-            if (!this._isSorted()) {
-                return null;
-            }
-            return this._sort.direction == 'asc' ? 'ascending' : 'descending';
+    }
+    _handleKeydown(event) {
+        if (!this._isDisabled() && (event.keyCode === SPACE || event.keyCode === ENTER)) {
+            event.preventDefault();
+            this._toggleOnInteraction();
         }
-        /** Whether the arrow inside the sort header should be rendered. */
-        _renderArrow() {
-            return !this._isDisabled() || this._isSorted();
+    }
+    /** Whether this MatSortHeader is currently sorted in either ascending or descending order. */
+    _isSorted() {
+        return this._sort.active == this.id &&
+            (this._sort.direction === 'asc' || this._sort.direction === 'desc');
+    }
+    /** Returns the animation state for the arrow direction (indicator and pointers). */
+    _getArrowDirectionState() {
+        return `${this._isSorted() ? 'active-' : ''}${this._arrowDirection}`;
+    }
+    /** Returns the arrow position state (opacity, translation). */
+    _getArrowViewState() {
+        const fromState = this._viewState.fromState;
+        return (fromState ? `${fromState}-to-` : '') + this._viewState.toState;
+    }
+    /**
+     * Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be
+     * facing the start direction. Otherwise if it is sorted, the arrow should point in the currently
+     * active sorted direction. The reason this is updated through a function is because the direction
+     * should only be changed at specific times - when deactivated but the hint is displayed and when
+     * the sort is active and the direction changes. Otherwise the arrow's direction should linger
+     * in cases such as the sort becoming deactivated but we want to animate the arrow away while
+     * preserving its direction, even though the next sort direction is actually different and should
+     * only be changed once the arrow displays again (hint or activation).
+     */
+    _updateArrowDirection() {
+        this._arrowDirection = this._isSorted() ?
+            this._sort.direction :
+            (this.start || this._sort.start);
+    }
+    _isDisabled() {
+        return this._sort.disabled || this.disabled;
+    }
+    /**
+     * Gets the aria-sort attribute that should be applied to this sort header. If this header
+     * is not sorted, returns null so that the attribute is removed from the host element. Aria spec
+     * says that the aria-sort property should only be present on one header at a time, so removing
+     * ensures this is true.
+     */
+    _getAriaSortAttribute() {
+        if (!this._isSorted()) {
+            return 'none';
         }
+        return this._sort.direction == 'asc' ? 'ascending' : 'descending';
     }
-    MatSortHeader.decorators = [
-        { type: Component, args: [{
-                    selector: '[mat-sort-header]',
-                    exportAs: 'matSortHeader',
-                    template: "<div class=\"mat-sort-header-container\"\n     [class.mat-sort-header-sorted]=\"_isSorted()\"\n     [class.mat-sort-header-position-before]=\"arrowPosition == 'before'\">\n  <button class=\"mat-sort-header-button mat-focus-indicator\" type=\"button\"\n          [attr.disabled]=\"_isDisabled() || null\"\n          [attr.aria-label]=\"_intl.sortButtonLabel(id)\">\n    <ng-content></ng-content>\n  </button>\n\n  <!-- Disable animations while a current animation is running -->\n  <div class=\"mat-sort-header-arrow\"\n       *ngIf=\"_renderArrow()\"\n       [@arrowOpacity]=\"_getArrowViewState()\"\n       [@arrowPosition]=\"_getArrowViewState()\"\n       [@allowChildren]=\"_getArrowDirectionState()\"\n       (@arrowPosition.start)=\"_disableViewStateAnimation = true\"\n       (@arrowPosition.done)=\"_disableViewStateAnimation = false\">\n    <div class=\"mat-sort-header-stem\"></div>\n    <div class=\"mat-sort-header-indicator\" [@indicator]=\"_getArrowDirectionState()\">\n      <div class=\"mat-sort-header-pointer-left\" [@leftPointer]=\"_getArrowDirectionState()\"></div>\n      <div class=\"mat-sort-header-pointer-right\" [@rightPointer]=\"_getArrowDirectionState()\"></div>\n      <div class=\"mat-sort-header-pointer-middle\"></div>\n    </div>\n  </div>\n</div>\n",
-                    host: {
-                        'class': 'mat-sort-header',
-                        '(click)': '_handleClick()',
-                        '(mouseenter)': '_setIndicatorHintVisible(true)',
-                        '(mouseleave)': '_setIndicatorHintVisible(false)',
-                        '[attr.aria-sort]': '_getAriaSortAttribute()',
-                        '[class.mat-sort-header-disabled]': '_isDisabled()',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    inputs: ['disabled'],
-                    animations: [
-                        matSortAnimations.indicator,
-                        matSortAnimations.leftPointer,
-                        matSortAnimations.rightPointer,
-                        matSortAnimations.arrowOpacity,
-                        matSortAnimations.arrowPosition,
-                        matSortAnimations.allowChildren,
-                    ],
-                    styles: [".mat-sort-header-container{display:flex;cursor:pointer;align-items:center}.mat-sort-header-disabled .mat-sort-header-container{cursor:default}.mat-sort-header-position-before{flex-direction:row-reverse}.mat-sort-header-button{border:none;background:0 0;display:flex;align-items:center;padding:0;cursor:inherit;outline:0;font:inherit;color:currentColor}[mat-sort-header].cdk-keyboard-focused .mat-sort-header-button,[mat-sort-header].cdk-program-focused .mat-sort-header-button{border-bottom:solid 1px currentColor}.mat-sort-header-button::-moz-focus-inner{border:0}.mat-sort-header-arrow{height:12px;width:12px;min-width:12px;position:relative;display:flex;opacity:0}.mat-sort-header-arrow,[dir=rtl] .mat-sort-header-position-before .mat-sort-header-arrow{margin:0 0 0 6px}.mat-sort-header-position-before .mat-sort-header-arrow,[dir=rtl] .mat-sort-header-arrow{margin:0 6px 0 0}.mat-sort-header-stem{background:currentColor;height:10px;width:2px;margin:auto;display:flex;align-items:center}.cdk-high-contrast-active .mat-sort-header-stem{width:0;border-left:solid 2px}.mat-sort-header-indicator{width:100%;height:2px;display:flex;align-items:center;position:absolute;top:0;left:0}.mat-sort-header-pointer-middle{margin:auto;height:2px;width:2px;background:currentColor;transform:rotate(45deg)}.cdk-high-contrast-active .mat-sort-header-pointer-middle{width:0;height:0;border-top:solid 2px;border-left:solid 2px}.mat-sort-header-pointer-left,.mat-sort-header-pointer-right{background:currentColor;width:6px;height:2px;position:absolute;top:0}.cdk-high-contrast-active .mat-sort-header-pointer-left,.cdk-high-contrast-active .mat-sort-header-pointer-right{width:0;height:0;border-left:solid 6px;border-top:solid 2px}.mat-sort-header-pointer-left{transform-origin:right;left:0}.mat-sort-header-pointer-right{transform-origin:left;right:0}\n"]
-                },] }
-    ];
-    MatSortHeader.ctorParameters = () => [
-        { type: MatSortHeaderIntl },
-        { type: ChangeDetectorRef },
-        { type: MatSort, decorators: [{ type: Optional }] },
-        { type: undefined, decorators: [{ type: Inject, args: ['MAT_SORT_HEADER_COLUMN_DEF',] }, { type: Optional }] },
-        { type: FocusMonitor },
-        { type: ElementRef }
-    ];
-    MatSortHeader.propDecorators = {
-        id: [{ type: Input, args: ['mat-sort-header',] }],
-        arrowPosition: [{ type: Input }],
-        start: [{ type: Input }],
-        disableClear: [{ type: Input }]
-    };
-    return MatSortHeader;
-})();
+    /** Whether the arrow inside the sort header should be rendered. */
+    _renderArrow() {
+        return !this._isDisabled() || this._isSorted();
+    }
+}
+MatSortHeader.decorators = [
+    { type: Component, args: [{
+                selector: '[mat-sort-header]',
+                exportAs: 'matSortHeader',
+                template: "<!--\n  We set the `tabindex` on an element inside the table header, rather than the header itself,\n  because of a bug in NVDA where having a `tabindex` on a `th` breaks keyboard navigation in the\n  table (see https://github.com/nvaccess/nvda/issues/7718). This allows for the header to both\n  be focusable, and have screen readers read out its `aria-sort` state. We prefer this approach\n  over having a button with an `aria-label` inside the header, because the button's `aria-label`\n  will be read out as the user is navigating the table's cell (see #13012).\n\n  The approach is based off of: https://dequeuniversity.com/library/aria/tables/sf-sortable-grid\n-->\n<div class=\"mat-sort-header-container mat-focus-indicator\"\n     [class.mat-sort-header-sorted]=\"_isSorted()\"\n     [class.mat-sort-header-position-before]=\"arrowPosition == 'before'\"\n     [attr.tabindex]=\"_isDisabled() ? null : 0\"\n     role=\"button\">\n\n  <!--\n    TODO(crisbeto): this div isn't strictly necessary, but we have to keep it due to a large\n    number of screenshot diff failures. It should be removed eventually. Note that the difference\n    isn't visible with a shorter header, but once it breaks up into multiple lines, this element\n    causes it to be center-aligned, whereas removing it will keep the text to the left.\n  -->\n  <div class=\"mat-sort-header-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Disable animations while a current animation is running -->\n  <div class=\"mat-sort-header-arrow\"\n       *ngIf=\"_renderArrow()\"\n       [@arrowOpacity]=\"_getArrowViewState()\"\n       [@arrowPosition]=\"_getArrowViewState()\"\n       [@allowChildren]=\"_getArrowDirectionState()\"\n       (@arrowPosition.start)=\"_disableViewStateAnimation = true\"\n       (@arrowPosition.done)=\"_disableViewStateAnimation = false\">\n    <div class=\"mat-sort-header-stem\"></div>\n    <div class=\"mat-sort-header-indicator\" [@indicator]=\"_getArrowDirectionState()\">\n      <div class=\"mat-sort-header-pointer-left\" [@leftPointer]=\"_getArrowDirectionState()\"></div>\n      <div class=\"mat-sort-header-pointer-right\" [@rightPointer]=\"_getArrowDirectionState()\"></div>\n      <div class=\"mat-sort-header-pointer-middle\"></div>\n    </div>\n  </div>\n</div>\n",
+                host: {
+                    'class': 'mat-sort-header',
+                    '(click)': '_handleClick()',
+                    '(keydown)': '_handleKeydown($event)',
+                    '(mouseenter)': '_setIndicatorHintVisible(true)',
+                    '(mouseleave)': '_setIndicatorHintVisible(false)',
+                    '[attr.aria-sort]': '_getAriaSortAttribute()',
+                    '[class.mat-sort-header-disabled]': '_isDisabled()',
+                },
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                inputs: ['disabled'],
+                animations: [
+                    matSortAnimations.indicator,
+                    matSortAnimations.leftPointer,
+                    matSortAnimations.rightPointer,
+                    matSortAnimations.arrowOpacity,
+                    matSortAnimations.arrowPosition,
+                    matSortAnimations.allowChildren,
+                ],
+                styles: [".mat-sort-header-container{display:flex;cursor:pointer;align-items:center;letter-spacing:normal;outline:0}[mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,[mat-sort-header].cdk-program-focused .mat-sort-header-container{border-bottom:solid 1px currentColor}.mat-sort-header-disabled .mat-sort-header-container{cursor:default}.mat-sort-header-content{text-align:center;display:flex;align-items:center}.mat-sort-header-position-before{flex-direction:row-reverse}.mat-sort-header-arrow{height:12px;width:12px;min-width:12px;position:relative;display:flex;opacity:0}.mat-sort-header-arrow,[dir=rtl] .mat-sort-header-position-before .mat-sort-header-arrow{margin:0 0 0 6px}.mat-sort-header-position-before .mat-sort-header-arrow,[dir=rtl] .mat-sort-header-arrow{margin:0 6px 0 0}.mat-sort-header-stem{background:currentColor;height:10px;width:2px;margin:auto;display:flex;align-items:center}.cdk-high-contrast-active .mat-sort-header-stem{width:0;border-left:solid 2px}.mat-sort-header-indicator{width:100%;height:2px;display:flex;align-items:center;position:absolute;top:0;left:0}.mat-sort-header-pointer-middle{margin:auto;height:2px;width:2px;background:currentColor;transform:rotate(45deg)}.cdk-high-contrast-active .mat-sort-header-pointer-middle{width:0;height:0;border-top:solid 2px;border-left:solid 2px}.mat-sort-header-pointer-left,.mat-sort-header-pointer-right{background:currentColor;width:6px;height:2px;position:absolute;top:0}.cdk-high-contrast-active .mat-sort-header-pointer-left,.cdk-high-contrast-active .mat-sort-header-pointer-right{width:0;height:0;border-left:solid 6px;border-top:solid 2px}.mat-sort-header-pointer-left{transform-origin:right;left:0}.mat-sort-header-pointer-right{transform-origin:left;right:0}\n"]
+            },] }
+];
+MatSortHeader.ctorParameters = () => [
+    { type: MatSortHeaderIntl },
+    { type: ChangeDetectorRef },
+    { type: MatSort, decorators: [{ type: Optional }] },
+    { type: undefined, decorators: [{ type: Inject, args: ['MAT_SORT_HEADER_COLUMN_DEF',] }, { type: Optional }] },
+    { type: FocusMonitor },
+    { type: ElementRef }
+];
+MatSortHeader.propDecorators = {
+    id: [{ type: Input, args: ['mat-sort-header',] }],
+    arrowPosition: [{ type: Input }],
+    start: [{ type: Input }],
+    disableClear: [{ type: Input }]
+};
 
 /**
  * @license
@@ -521,19 +526,16 @@ let MatSortHeader = /** @class */ (() => {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-let MatSortModule = /** @class */ (() => {
-    class MatSortModule {
-    }
-    MatSortModule.decorators = [
-        { type: NgModule, args: [{
-                    imports: [CommonModule],
-                    exports: [MatSort, MatSortHeader],
-                    declarations: [MatSort, MatSortHeader],
-                    providers: [MAT_SORT_HEADER_INTL_PROVIDER]
-                },] }
-    ];
-    return MatSortModule;
-})();
+class MatSortModule {
+}
+MatSortModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                exports: [MatSort, MatSortHeader],
+                declarations: [MatSort, MatSortHeader],
+                providers: [MAT_SORT_HEADER_INTL_PROVIDER]
+            },] }
+];
 
 /**
  * @license