@angular/material 19.2.0-next.1 → 19.2.0-next.3

package/fesm2022/sort.mjs

@@ -4,8 +4,7 @@ import { FocusMonitor, AriaDescriber } from '@angular/cdk/a11y';
 import { SPACE, ENTER } from '@angular/cdk/keycodes';
 import { ReplaySubject, Subject, merge } from 'rxjs';
 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';
+import { _StructuralStylesLoader, MatCommonModule } from '@angular/material/core';
 
 /** @docs-private */
 function getSortDuplicateSortableIdError(id) {
@@ -127,10 +126,10 @@ class MatSort {
         this._stateChanges.complete();
         this._initializedStream.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSort, deps: [{ token: MAT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.0-rc.0", type: MatSort, isStandalone: true, selector: "[matSort]", inputs: { active: ["matSortActive", "active"], start: ["matSortStart", "start"], direction: ["matSortDirection", "direction"], disableClear: ["matSortDisableClear", "disableClear", booleanAttribute], disabled: ["matSortDisabled", "disabled", booleanAttribute] }, outputs: { sortChange: "matSortChange" }, host: { classAttribute: "mat-sort" }, exportAs: ["matSort"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSort, deps: [{ token: MAT_SORT_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.3", type: MatSort, isStandalone: true, selector: "[matSort]", inputs: { active: ["matSortActive", "active"], start: ["matSortStart", "start"], direction: ["matSortDirection", "direction"], disableClear: ["matSortDisableClear", "disableClear", booleanAttribute], disabled: ["matSortDisabled", "disabled", booleanAttribute] }, outputs: { sortChange: "matSortChange" }, host: { classAttribute: "mat-sort" }, exportAs: ["matSort"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSort, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matSort]',
@@ -185,10 +184,10 @@ class MatSortHeaderIntl {
      * components if the labels have changed after initialization.
      */
     changes = new Subject();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSortHeaderIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSortHeaderIntl, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSortHeaderIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSortHeaderIntl, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSortHeaderIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSortHeaderIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -355,10 +354,10 @@ class MatSortHeader {
         }
         this._sortActionDescription = newDescription;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-rc.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{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.cdk-keyboard-focused .mat-sort-header-arrow,.mat-sort-header.cdk-program-focused .mat-sort-header-arrow,.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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", 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{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.cdk-keyboard-focused .mat-sort-header-arrow,.mat-sort-header.cdk-program-focused .mat-sort-header-arrow,.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.1.0-rc.0", ngImport: i0, type: MatSortHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSortHeader, decorators: [{
             type: Component,
             args: [{ selector: '[mat-sort-header]', exportAs: 'matSortHeader', host: {
                         'class': 'mat-sort-header',
@@ -386,11 +385,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
             }] } });
 
 class MatSortModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSortModule, imports: [MatCommonModule, MatSort, MatSortHeader], exports: [MatSort, MatSortHeader] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSortModule, providers: [MAT_SORT_HEADER_INTL_PROVIDER], imports: [MatCommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: MatSortModule, imports: [MatCommonModule, MatSort, MatSortHeader], exports: [MatSort, MatSortHeader] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSortModule, providers: [MAT_SORT_HEADER_INTL_PROVIDER], imports: [MatCommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatSortModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatSortModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MatCommonModule, MatSort, MatSortHeader],
@@ -399,7 +398,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
                 }]
         }] });
 
-const SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' + AnimationCurves.STANDARD_CURVE;
 /**
  * Animations used by MatSort.
  * @docs-private
@@ -407,34 +405,185 @@ const SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' + AnimationC
  * @breaking-change 21.0.0
  */
 const matSortAnimations = {
+    // Represents:
+    // 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 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)),
-    ]),
+    indicator: {
+        type: 7,
+        name: 'indicator',
+        definitions: [
+            {
+                type: 0,
+                name: 'active-asc, asc',
+                styles: { type: 6, styles: { transform: 'translateY(0px)' }, offset: null },
+            },
+            {
+                type: 0,
+                name: 'active-desc, desc',
+                styles: { type: 6, styles: { transform: 'translateY(10px)' }, offset: null },
+            },
+            {
+                type: 1,
+                expr: 'active-asc <=> active-desc',
+                animation: { type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)' },
+                options: null,
+            },
+        ],
+        options: {},
+    },
+    // Represents:
+    // 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 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)),
-    ]),
+    leftPointer: {
+        type: 7,
+        name: 'leftPointer',
+        definitions: [
+            {
+                type: 0,
+                name: 'active-asc, asc',
+                styles: { type: 6, styles: { transform: 'rotate(-45deg)' }, offset: null },
+            },
+            {
+                type: 0,
+                name: 'active-desc, desc',
+                styles: { type: 6, styles: { transform: 'rotate(45deg)' }, offset: null },
+            },
+            {
+                type: 1,
+                expr: 'active-asc <=> active-desc',
+                animation: { type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)' },
+                options: null,
+            },
+        ],
+        options: {},
+    },
+    // Represents:
+    // 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 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)),
-    ]),
+    rightPointer: {
+        type: 7,
+        name: 'rightPointer',
+        definitions: [
+            {
+                type: 0,
+                name: 'active-asc, asc',
+                styles: { type: 6, styles: { transform: 'rotate(45deg)' }, offset: null },
+            },
+            {
+                type: 0,
+                name: 'active-desc, desc',
+                styles: { type: 6, styles: { transform: 'rotate(-45deg)' }, offset: null },
+            },
+            {
+                type: 1,
+                expr: 'active-asc <=> active-desc',
+                animation: { type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)' },
+                options: null,
+            },
+        ],
+        options: {},
+    },
+    // Represents:
+    // 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 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)),
-    ]),
+    arrowOpacity: {
+        type: 7,
+        name: 'arrowOpacity',
+        definitions: [
+            {
+                type: 0,
+                name: 'desc-to-active, asc-to-active, active',
+                styles: { type: 6, styles: { 'opacity': 1 }, offset: null },
+            },
+            {
+                type: 0,
+                name: 'desc-to-hint, asc-to-hint, hint',
+                styles: { type: 6, styles: { 'opacity': 0.54 }, offset: null },
+            },
+            {
+                type: 0,
+                name: 'hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void',
+                styles: { type: 6, styles: { 'opacity': 0 }, offset: null },
+            },
+            {
+                type: 1,
+                expr: '* => asc, * => desc, * => active, * => hint, * => void',
+                animation: { type: 4, styles: null, timings: '0ms' },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: '* <=> *',
+                animation: { type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)' },
+                options: null,
+            },
+        ],
+        options: {},
+    },
+    // Represents:
+    // 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%)'})),
+    // ])
     /**
      * 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,
@@ -442,23 +591,117 @@ const matSortAnimations = {
      * 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%)' })),
-    ]),
+    arrowPosition: {
+        type: 7,
+        name: 'arrowPosition',
+        definitions: [
+            {
+                type: 1,
+                expr: '* => desc-to-hint, * => desc-to-active',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 5,
+                        'steps': [
+                            { type: 6, styles: { transform: 'translateY(-25%)' }, offset: null },
+                            { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
+                        ],
+                    },
+                    timings: '225ms cubic-bezier(0.4,0.0,0.2,1)',
+                },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: '* => hint-to-desc, * => active-to-desc',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 5,
+                        'steps': [
+                            { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
+                            { type: 6, styles: { transform: 'translateY(25%)' }, offset: null },
+                        ],
+                    },
+                    timings: '225ms cubic-bezier(0.4,0.0,0.2,1)',
+                },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: '* => asc-to-hint, * => asc-to-active',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 5,
+                        'steps': [
+                            { type: 6, styles: { transform: 'translateY(25%)' }, offset: null },
+                            { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
+                        ],
+                    },
+                    timings: '225ms cubic-bezier(0.4,0.0,0.2,1)',
+                },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: '* => hint-to-asc, * => active-to-asc',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 5,
+                        'steps': [
+                            { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
+                            { type: 6, styles: { transform: 'translateY(-25%)' }, offset: null },
+                        ],
+                    },
+                    timings: '225ms cubic-bezier(0.4,0.0,0.2,1)',
+                },
+                options: null,
+            },
+            {
+                type: 0,
+                name: 'desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active',
+                styles: { type: 6, styles: { transform: 'translateY(0)' }, offset: null },
+            },
+            {
+                type: 0,
+                name: 'hint-to-desc, active-to-desc, desc',
+                styles: { type: 6, styles: { transform: 'translateY(-25%)' }, offset: null },
+            },
+            {
+                type: 0,
+                name: 'hint-to-asc, active-to-asc, asc',
+                styles: { type: 6, styles: { transform: 'translateY(25%)' }, offset: null },
+            },
+        ],
+        options: {},
+    },
+    // Represents:
+    // trigger('allowChildren', [
+    //   transition('* <=> *', [query('@*', animateChild(), {optional: true})]),
+    // ])
     /** Necessary trigger that calls animate on children animations. */
-    allowChildren: trigger('allowChildren', [
-        transition('* <=> *', [query('@*', animateChild(), { optional: true })]),
-    ]),
+    allowChildren: {
+        type: 7,
+        name: 'allowChildren',
+        definitions: [
+            {
+                type: 1,
+                expr: '* <=> *',
+                animation: [
+                    {
+                        type: 11,
+                        selector: '@*',
+                        animation: { type: 9, options: null },
+                        options: { optional: true },
+                    },
+                ],
+                options: null,
+            },
+        ],
+        options: {},
+    },
 };
 
 /**