license import { animate , state , style , transition , trigger , keyframes , AnimationTriggerMetadata , query , animateChild , } from '@angular/animations' ; import { AnimationCurves , AnimationDurations } from '@angular/material/core' ; const SORT_ANIMATION_TRANSITION = AnimationDurations . ENTERING + ' ' + AnimationCurves . STANDARD_CURVE ; docs-private export const matSortAnimations = { /** Animation that moves the sort indicator. */ indicator : trigger ( 'indicator' , [ state ( 'active-asc, asc' , style ( { transform : 'translateY(0px)' } ) ) , 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 : .54 } ) ) , state ( 'hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void' , style ( { opacity : 0 } ) ) , 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' , [ transition ( '* => desc-to-hint, * => desc-to-active' , animate ( SORT_ANIMATION_TRANSITION , keyframes ( [ style ( { transform : 'translateY(-25%)' } ) , style ( { transform : 'translateY(0)' } ) ] ) ) ) , transition ( '* => hint-to-desc, * => active-to-desc' , animate ( SORT_ANIMATION_TRANSITION , keyframes ( [ style ( { transform : 'translateY(0)' } ) , style ( { transform : 'translateY(25%)' } ) ] ) ) ) , transition ( '* => asc-to-hint, * => asc-to-active' , animate ( SORT_ANIMATION_TRANSITION , keyframes ( [ style ( { transform : 'translateY(25%)' } ) , style ( { transform : 'translateY(0)' } ) ] ) ) ) , 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 } ) ] ) ] ) , } ;