@angular/material 19.1.0-next.0 → 19.1.0-next.1

package/fesm2022/sort.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, booleanAttribute, Directive, Optional, Inject, Input, Output, Injectable, SkipSelf, inject, ChangeDetectorRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, booleanAttribute, Directive, Optional, Inject, Input, Output, Injectable, SkipSelf, inject, ChangeDetectorRef, ElementRef, ANIMATION_MODULE_TYPE, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { FocusMonitor, AriaDescriber } from '@angular/cdk/a11y';
 import { SPACE, ENTER } from '@angular/cdk/keycodes';
 import { ReplaySubject, Subject, merge } from 'rxjs';
-import { trigger, state, style, transition, animate, keyframes, query, animateChild } from '@angular/animations';
-import { AnimationDurations, AnimationCurves, _StructuralStylesLoader, MatCommonModule } from '@angular/material/core';
 import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
+import { _StructuralStylesLoader, MatCommonModule, AnimationDurations, AnimationCurves } from '@angular/material/core';
+import { trigger, state, style, transition, animate, keyframes, query, animateChild } from '@angular/animations';
 
 /** @docs-private */
 function getSortDuplicateSortableIdError(id) {
@@ -175,66 +175,6 @@ function getSortDirectionCycle(start, disableClear) {
     return sortOrder;
 }
 
-const SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' + AnimationCurves.STANDARD_CURVE;
-/**
- * Animations used by MatSort.
- * @docs-private
- */
-const matSortAnimations = {
-    /** Animation that moves the sort indicator. */
-    indicator: trigger('indicator', [
-        state('active-asc, asc', style({ transform: 'translateY(0px)' })),
-        // 10px is the height of the sort indicator, minus the width of the pointers
-        state('active-desc, desc', style({ transform: 'translateY(10px)' })),
-        transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
-    ]),
-    /** Animation that rotates the left pointer of the indicator based on the sorting direction. */
-    leftPointer: trigger('leftPointer', [
-        state('active-asc, asc', style({ transform: 'rotate(-45deg)' })),
-        state('active-desc, desc', style({ transform: 'rotate(45deg)' })),
-        transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
-    ]),
-    /** Animation that rotates the right pointer of the indicator based on the sorting direction. */
-    rightPointer: trigger('rightPointer', [
-        state('active-asc, asc', style({ transform: 'rotate(45deg)' })),
-        state('active-desc, desc', style({ transform: 'rotate(-45deg)' })),
-        transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
-    ]),
-    /** Animation that controls the arrow opacity. */
-    arrowOpacity: trigger('arrowOpacity', [
-        state('desc-to-active, asc-to-active, active', style({ opacity: 1 })),
-        state('desc-to-hint, asc-to-hint, hint', style({ opacity: 0.54 })),
-        state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void', style({ opacity: 0 })),
-        // Transition between all states except for immediate transitions
-        transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')),
-        transition('* <=> *', animate(SORT_ANIMATION_TRANSITION)),
-    ]),
-    /**
-     * Animation for the translation of the arrow as a whole. States are separated into two
-     * groups: ones with animations and others that are immediate. Immediate states are asc, desc,
-     * peek, and active. The other states define a specific animation (source-to-destination)
-     * and are determined as a function of their prev user-perceived state and what the next state
-     * should be.
-     */
-    arrowPosition: trigger('arrowPosition', [
-        // Hidden Above => Hint Center
-        transition('* => desc-to-hint, * => desc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(-25%)' }), style({ transform: 'translateY(0)' })]))),
-        // Hint Center => Hidden Below
-        transition('* => hint-to-desc, * => active-to-desc', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(0)' }), style({ transform: 'translateY(25%)' })]))),
-        // Hidden Below => Hint Center
-        transition('* => asc-to-hint, * => asc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(25%)' }), style({ transform: 'translateY(0)' })]))),
-        // Hint Center => Hidden Above
-        transition('* => hint-to-asc, * => active-to-asc', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(0)' }), style({ transform: 'translateY(-25%)' })]))),
-        state('desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active', style({ transform: 'translateY(0)' })),
-        state('hint-to-desc, active-to-desc, desc', style({ transform: 'translateY(-25%)' })),
-        state('hint-to-asc, active-to-asc, asc', style({ transform: 'translateY(25%)' })),
-    ]),
-    /** Necessary trigger that calls animate on children animations. */
-    allowChildren: trigger('allowChildren', [
-        transition('* <=> *', [query('@*', animateChild(), { optional: true })]),
-    ]),
-};
-
 /**
  * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
  * include it in a custom provider.
@@ -275,37 +215,26 @@ const MAT_SORT_HEADER_INTL_PROVIDER = {
  */
 class MatSortHeader {
     _intl = inject(MatSortHeaderIntl);
-    _changeDetectorRef = inject(ChangeDetectorRef);
     _sort = inject(MatSort, { optional: true });
     _columnDef = inject('MAT_SORT_HEADER_COLUMN_DEF', {
         optional: true,
     });
+    _changeDetectorRef = inject(ChangeDetectorRef);
     _focusMonitor = inject(FocusMonitor);
     _elementRef = inject(ElementRef);
     _ariaDescriber = inject(AriaDescriber, { optional: true });
-    _rerenderSubscription;
+    _renderChanges;
+    _animationModule = inject(ANIMATION_MODULE_TYPE, { optional: true });
+    /**
+     * Indicates which state was just cleared from the sort header.
+     * Will be reset on the next interaction. Used for coordinating animations.
+     */
+    _recentlyCleared = signal(null);
     /**
      * The element with role="button" inside this component's view. We need this
      * in order to apply a description with AriaDescriber.
      */
     _sortButton;
-    /**
-     * 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.
-     */
-    _showIndicatorHint = false;
-    /**
-     * The view transition state of the arrow (translation/ opacity) - indicates its `from` and `to`
-     * position through the animation. If animations are currently disabled, the fromState is removed
-     * so that there is no animation displayed.
-     */
-    _viewState = {};
-    /** The direction the arrow should be facing according to the current state. */
-    _arrowDirection = '';
-    /**
-     * Whether the view state animation should show the transition between the `from` and `to` states.
-     */
-    _disableViewStateAnimation = false;
     /**
      * ID of this sort header. If used within the context of a CdkColumnDef, this will default to
      * the column's name.
@@ -348,88 +277,42 @@ class MatSortHeader {
         if (defaultOptions?.arrowPosition) {
             this.arrowPosition = defaultOptions?.arrowPosition;
         }
-        this._handleStateChanges();
     }
     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);
+        this._renderChanges = merge(this._sort._stateChanges, this._sort.sortChange).subscribe(() => this._changeDetectorRef.markForCheck());
         this._sortButton = this._elementRef.nativeElement.querySelector('.mat-sort-header-container');
         this._updateSortActionDescription(this._sortActionDescription);
     }
     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 => {
-            const newState = !!origin;
-            if (newState !== this._showIndicatorHint) {
-                this._setIndicatorHintVisible(newState);
-                this._changeDetectorRef.markForCheck();
-            }
-        });
+        this._focusMonitor
+            .monitor(this._elementRef, true)
+            .subscribe(() => this._recentlyCleared.set(null));
     }
     ngOnDestroy() {
         this._focusMonitor.stopMonitoring(this._elementRef);
         this._sort.deregister(this);
-        this._rerenderSubscription.unsubscribe();
+        this._renderChanges?.unsubscribe();
         if (this._sortButton) {
             this._ariaDescriber?.removeDescription(this._sortButton, this._sortActionDescription);
         }
     }
-    /**
-     * 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;
-        }
-        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 });
-            }
-        }
-    }
-    /**
-     * 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 };
-        }
-    }
     /** 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;
-        }
-    }
-    _handleClick() {
         if (!this._isDisabled()) {
+            const wasSorted = this._isSorted();
+            const prevDirection = this._sort.direction;
             this._sort.sort(this);
+            this._recentlyCleared.set(wasSorted && !this._isSorted() ? prevDirection : null);
         }
     }
     _handleKeydown(event) {
-        if (!this._isDisabled() && (event.keyCode === SPACE || event.keyCode === ENTER)) {
+        if (event.keyCode === SPACE || event.keyCode === ENTER) {
             event.preventDefault();
             this._toggleOnInteraction();
         }
@@ -439,28 +322,6 @@ class MatSortHeader {
         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;
     }
@@ -494,54 +355,19 @@ class MatSortHeader {
         }
         this._sortActionDescription = newDescription;
     }
-    /** Handles changes in the sorting state. */
-    _handleStateChanges() {
-        this._rerenderSubscription = merge(this._sort.sortChange, this._sort._stateChanges, this._intl.changes).subscribe(() => {
-            if (this._isSorted()) {
-                this._updateArrowDirection();
-                // 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;
-                }
-                this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'active' });
-                this._showIndicatorHint = false;
-            }
-            // 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 });
-            }
-            this._changeDetectorRef.markForCheck();
-        });
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: MatSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: MatSortHeader, isStandalone: true, selector: "[mat-sort-header]", inputs: { id: ["mat-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", disabled: ["disabled", "disabled", booleanAttribute], sortActionDescription: "sortActionDescription", disableClear: ["disableClear", "disableClear", booleanAttribute] }, host: { listeners: { "click": "_handleClick()", "keydown": "_handleKeydown($event)", "mouseenter": "_setIndicatorHintVisible(true)", "mouseleave": "_setIndicatorHintVisible(false)" }, properties: { "attr.aria-sort": "_getAriaSortAttribute()", "class.mat-sort-header-disabled": "_isDisabled()" }, classAttribute: "mat-sort-header" }, exportAs: ["matSortHeader"], ngImport: i0, 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     [attr.role]=\"_isDisabled() ? null : '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  @if (_renderArrow()) {\n    <div class=\"mat-sort-header-arrow\"\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  }\n</div>\n", 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-container::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.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;color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface));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}@media(forced-colors: 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)}@media(forced-colors: 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}@media(forced-colors: active){.mat-sort-header-pointer-left,.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}"], animations: [
-            matSortAnimations.indicator,
-            matSortAnimations.leftPointer,
-            matSortAnimations.rightPointer,
-            matSortAnimations.arrowOpacity,
-            matSortAnimations.arrowPosition,
-            matSortAnimations.allowChildren,
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: MatSortHeader, isStandalone: true, selector: "[mat-sort-header]", inputs: { id: ["mat-sort-header", "id"], arrowPosition: "arrowPosition", start: "start", disabled: ["disabled", "disabled", booleanAttribute], sortActionDescription: "sortActionDescription", disableClear: ["disableClear", "disableClear", booleanAttribute] }, host: { listeners: { "click": "_toggleOnInteraction()", "keydown": "_handleKeydown($event)", "mouseleave": "_recentlyCleared.set(false)" }, properties: { "attr.aria-sort": "_getAriaSortAttribute()", "class.mat-sort-header-disabled": "_isDisabled()" }, classAttribute: "mat-sort-header" }, exportAs: ["matSortHeader"], ngImport: i0, 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     [class.mat-sort-header-descending]=\"this._sort.direction === 'desc'\"\n     [class.mat-sort-header-ascending]=\"this._sort.direction === 'asc'\"\n     [class.mat-sort-header-recently-cleared-ascending]=\"_recentlyCleared() === 'asc'\"\n     [class.mat-sort-header-recently-cleared-descending]=\"_recentlyCleared() === 'desc'\"\n     [class.mat-sort-header-animations-disabled]=\"_animationModule === 'NoopAnimations'\"\n     [attr.tabindex]=\"_isDisabled() ? null : 0\"\n     [attr.role]=\"_isDisabled() ? null : '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  @if (_renderArrow()) {\n    <div class=\"mat-sort-header-arrow\">\n      <svg viewBox=\"0 -960 960 960\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z\"/>\n      </svg>\n    </div>\n  }\n</div>\n", 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-container::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.mat-sort-header-content{text-align:center;display:flex;align-items:center}.mat-sort-header-position-before{flex-direction:row-reverse}@keyframes _mat-sort-header-recently-cleared-ascending{from{transform:translateY(0);opacity:1}to{transform:translateY(-25%);opacity:0}}@keyframes _mat-sort-header-recently-cleared-descending{from{transform:translateY(0) rotate(180deg);opacity:1}to{transform:translateY(25%) rotate(180deg);opacity:0}}.mat-sort-header-arrow{height:12px;width:12px;position:relative;transition:transform 225ms cubic-bezier(0.4, 0, 0.2, 1),opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0;overflow:visible;color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}.mat-sort-header:hover .mat-sort-header-arrow{opacity:.54}.mat-sort-header .mat-sort-header-sorted .mat-sort-header-arrow{opacity:1}.mat-sort-header-descending .mat-sort-header-arrow{transform:rotate(180deg)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transform:translateY(-25%)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-ascending 225ms cubic-bezier(0.4, 0, 0.2, 1) forwards}.mat-sort-header-recently-cleared-descending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-descending 225ms cubic-bezier(0.4, 0, 0.2, 1) forwards}.mat-sort-header-animations-disabled .mat-sort-header-arrow{transition-duration:0ms;animation-duration:0ms}.mat-sort-header-arrow svg{width:24px;height:24px;fill:currentColor;position:absolute;top:50%;left:50%;margin:-12px 0 0 -12px;transform:translateZ(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}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: MatSortHeader, decorators: [{
             type: Component,
             args: [{ selector: '[mat-sort-header]', exportAs: 'matSortHeader', host: {
                         'class': 'mat-sort-header',
-                        '(click)': '_handleClick()',
+                        '(click)': '_toggleOnInteraction()',
                         '(keydown)': '_handleKeydown($event)',
-                        '(mouseenter)': '_setIndicatorHintVisible(true)',
-                        '(mouseleave)': '_setIndicatorHintVisible(false)',
+                        '(mouseleave)': '_recentlyCleared.set(false)',
                         '[attr.aria-sort]': '_getAriaSortAttribute()',
                         '[class.mat-sort-header-disabled]': '_isDisabled()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        matSortAnimations.indicator,
-                        matSortAnimations.leftPointer,
-                        matSortAnimations.rightPointer,
-                        matSortAnimations.arrowOpacity,
-                        matSortAnimations.arrowPosition,
-                        matSortAnimations.allowChildren,
-                    ], 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     [attr.role]=\"_isDisabled() ? null : '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  @if (_renderArrow()) {\n    <div class=\"mat-sort-header-arrow\"\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  }\n</div>\n", 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-container::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.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;color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface));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}@media(forced-colors: 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)}@media(forced-colors: 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}@media(forced-colors: active){.mat-sort-header-pointer-left,.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}"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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     [class.mat-sort-header-descending]=\"this._sort.direction === 'desc'\"\n     [class.mat-sort-header-ascending]=\"this._sort.direction === 'asc'\"\n     [class.mat-sort-header-recently-cleared-ascending]=\"_recentlyCleared() === 'asc'\"\n     [class.mat-sort-header-recently-cleared-descending]=\"_recentlyCleared() === 'desc'\"\n     [class.mat-sort-header-animations-disabled]=\"_animationModule === 'NoopAnimations'\"\n     [attr.tabindex]=\"_isDisabled() ? null : 0\"\n     [attr.role]=\"_isDisabled() ? null : '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  @if (_renderArrow()) {\n    <div class=\"mat-sort-header-arrow\">\n      <svg viewBox=\"0 -960 960 960\" focusable=\"false\" aria-hidden=\"true\">\n        <path d=\"M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z\"/>\n      </svg>\n    </div>\n  }\n</div>\n", 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-container::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.mat-sort-header-content{text-align:center;display:flex;align-items:center}.mat-sort-header-position-before{flex-direction:row-reverse}@keyframes _mat-sort-header-recently-cleared-ascending{from{transform:translateY(0);opacity:1}to{transform:translateY(-25%);opacity:0}}@keyframes _mat-sort-header-recently-cleared-descending{from{transform:translateY(0) rotate(180deg);opacity:1}to{transform:translateY(25%) rotate(180deg);opacity:0}}.mat-sort-header-arrow{height:12px;width:12px;position:relative;transition:transform 225ms cubic-bezier(0.4, 0, 0.2, 1),opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0;overflow:visible;color:var(--mat-sort-arrow-color, var(--mat-sys-on-surface))}.mat-sort-header:hover .mat-sort-header-arrow{opacity:.54}.mat-sort-header .mat-sort-header-sorted .mat-sort-header-arrow{opacity:1}.mat-sort-header-descending .mat-sort-header-arrow{transform:rotate(180deg)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transform:translateY(-25%)}.mat-sort-header-recently-cleared-ascending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-ascending 225ms cubic-bezier(0.4, 0, 0.2, 1) forwards}.mat-sort-header-recently-cleared-descending .mat-sort-header-arrow{transition:none;animation:_mat-sort-header-recently-cleared-descending 225ms cubic-bezier(0.4, 0, 0.2, 1) forwards}.mat-sort-header-animations-disabled .mat-sort-header-arrow{transition-duration:0ms;animation-duration:0ms}.mat-sort-header-arrow svg{width:24px;height:24px;fill:currentColor;position:absolute;top:50%;left:50%;margin:-12px 0 0 -12px;transform:translateZ(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}"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input,
                 args: ['mat-sort-header']
@@ -573,6 +399,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }]
         }] });
 
+const SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' + AnimationCurves.STANDARD_CURVE;
+/**
+ * Animations used by MatSort.
+ * @docs-private
+ * @deprecated No longer being used, to be removed.
+ * @breaking-change 21.0.0
+ */
+const matSortAnimations = {
+    /** Animation that moves the sort indicator. */
+    indicator: trigger('indicator', [
+        state('active-asc, asc', style({ transform: 'translateY(0px)' })),
+        // 10px is the height of the sort indicator, minus the width of the pointers
+        state('active-desc, desc', style({ transform: 'translateY(10px)' })),
+        transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
+    ]),
+    /** Animation that rotates the left pointer of the indicator based on the sorting direction. */
+    leftPointer: trigger('leftPointer', [
+        state('active-asc, asc', style({ transform: 'rotate(-45deg)' })),
+        state('active-desc, desc', style({ transform: 'rotate(45deg)' })),
+        transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
+    ]),
+    /** Animation that rotates the right pointer of the indicator based on the sorting direction. */
+    rightPointer: trigger('rightPointer', [
+        state('active-asc, asc', style({ transform: 'rotate(45deg)' })),
+        state('active-desc, desc', style({ transform: 'rotate(-45deg)' })),
+        transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION)),
+    ]),
+    /** Animation that controls the arrow opacity. */
+    arrowOpacity: trigger('arrowOpacity', [
+        state('desc-to-active, asc-to-active, active', style({ opacity: 1 })),
+        state('desc-to-hint, asc-to-hint, hint', style({ opacity: 0.54 })),
+        state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void', style({ opacity: 0 })),
+        // Transition between all states except for immediate transitions
+        transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')),
+        transition('* <=> *', animate(SORT_ANIMATION_TRANSITION)),
+    ]),
+    /**
+     * Animation for the translation of the arrow as a whole. States are separated into two
+     * groups: ones with animations and others that are immediate. Immediate states are asc, desc,
+     * peek, and active. The other states define a specific animation (source-to-destination)
+     * and are determined as a function of their prev user-perceived state and what the next state
+     * should be.
+     */
+    arrowPosition: trigger('arrowPosition', [
+        // Hidden Above => Hint Center
+        transition('* => desc-to-hint, * => desc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(-25%)' }), style({ transform: 'translateY(0)' })]))),
+        // Hint Center => Hidden Below
+        transition('* => hint-to-desc, * => active-to-desc', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(0)' }), style({ transform: 'translateY(25%)' })]))),
+        // Hidden Below => Hint Center
+        transition('* => asc-to-hint, * => asc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(25%)' }), style({ transform: 'translateY(0)' })]))),
+        // Hint Center => Hidden Above
+        transition('* => hint-to-asc, * => active-to-asc', animate(SORT_ANIMATION_TRANSITION, keyframes([style({ transform: 'translateY(0)' }), style({ transform: 'translateY(-25%)' })]))),
+        state('desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active', style({ transform: 'translateY(0)' })),
+        state('hint-to-desc, active-to-desc, desc', style({ transform: 'translateY(-25%)' })),
+        state('hint-to-asc, active-to-asc, asc', style({ transform: 'translateY(25%)' })),
+    ]),
+    /** Necessary trigger that calls animate on children animations. */
+    allowChildren: trigger('allowChildren', [
+        transition('* <=> *', [query('@*', animateChild(), { optional: true })]),
+    ]),
+};
+
 /**
  * Generated bundle index. Do not edit.
  */