ms-data-grid 0.0.59 → 0.0.61

package/src/lib/data-grid/animations.ts

@@ -1,267 +0,0 @@
-import {
-  trigger,
-  transition,
-  style,
-  animate,
-  stagger,
-  query,
-  state,
-  keyframes
-} from '@angular/animations';
-
-/** Animation names available for rows */
-export enum RowAnimationType {
-  SlideDown = 'slideDown',
-  FadeSlideUp = 'fadeSlideUp',
-  ZoomIn = 'zoomIn',
-  SpreadHorizontal = 'spreadHorizontal',
-  MergeIn = 'mergeIn',
-  BounceIn = 'bounceIn',
-  RotateIn = 'rotateIn',
-  SlideInLeft = 'slideInLeft',
-  FloatIn = 'floatIn',
-  CollapseSpread = 'collapseSpread',
-  CurtainDrop = 'curtainDrop',
-}
-
-/**
- * All animations must be a FLAT ARRAY,
- * not an object and not nested arrays.
- */
-export const DATA_GRID_ANIMATIONS = [
-  trigger('accordionToggle', [
-    state('collapsed', style({ height: '0px', overflow: 'unset' })),
-    state('expanded', style({ height: '*', overflow: 'unset' })),
-    transition('collapsed <=> expanded', animate('300ms ease-in'))
-  ]),
-
-  trigger('slideToggle', [
-    transition(':enter', [
-      style({ height: '0px', opacity: 0 }),
-      animate('300ms ease-out', style({ height: '*', opacity: 1 }))
-    ]),
-    transition(':leave', [
-      style({ height: '*', opacity: 1 }),
-      animate('300ms ease-in', style({ height: '0px', opacity: 0 }))
-    ])
-  ]),
-
-  trigger('slideUp', [
-    state('void', style({ transform: 'translateY(100%)', opacity: 0 })),
-    state('*', style({ transform: 'translateY(0)', opacity: 1 })),
-    transition('void => *', animate('300ms ease-out')),
-    transition('* => void', animate('300ms ease-in'))
-  ]),
-
-  /** 🔽 SlideDown */
-  trigger(RowAnimationType.SlideDown, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'translateY(20px)' }),
-        stagger(60, [
-          animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({
-            opacity: 1,
-            transform: 'translateY(0)'
-          }))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(40, [
-          animate('300ms ease', style({
-            opacity: 0,
-            transform: 'translateY(-20px)'
-          }))
-        ])
-      ], { optional: true })
-    ])
-  ]),
-
-  /** 🔼 Fade + Slide Up */
-  trigger(RowAnimationType.FadeSlideUp, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'translateY(15px)' }),
-        stagger(40, [
-          animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(30, [
-          animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(-10px)' }))
-        ])
-      ], { optional: true })
-    ])
-  ]),
-
-  /** 🔍 Zoom In */
-  trigger(RowAnimationType.ZoomIn, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'scale(0.9)' }),
-        stagger(50, [
-          animate('350ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({
-            opacity: 1,
-            transform: 'scale(1)'
-          }))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(30, [
-          animate('250ms ease-in', style({ opacity: 0, transform: 'scale(0.9)' }))
-        ])
-      ], { optional: true })
-    ])
-  ]),
-
-  /** ↔ Spread From Center */
-  trigger(RowAnimationType.SpreadHorizontal, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'scaleX(0.5)' }),
-        stagger(60, [
-          animate('400ms ease-out', style({ opacity: 1, transform: 'scaleX(1)' }))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(40, [
-          animate('250ms ease-in', style({ opacity: 0, transform: 'scaleX(0.5)' }))
-        ])
-      ], { optional: true })
-    ])
-  ]),
-
-  /** ⬅➡ Merge Toward Center */
-  trigger(RowAnimationType.MergeIn, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'translateX(-50%) scale(0.95)' }),
-        stagger(50, [
-          animate('400ms cubic-bezier(0.23, 1, 0.32, 1)', style({
-            opacity: 1,
-            transform: 'translateX(0) scale(1)'
-          }))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(40, [
-          animate('300ms ease', style({ opacity: 0, transform: 'translateX(50%) scale(0.9)' }))
-        ])
-      ], { optional: true })
-    ])
-  ]),
-
-  /** 🟢 Bounce */
-  trigger(RowAnimationType.BounceIn, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'translateY(-15px)' }),
-        stagger(40, [
-          animate('600ms cubic-bezier(.68,-0.55,.27,1.55)', style({
-            opacity: 1,
-            transform: 'translateY(0)'
-          }))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(30, [
-          animate('200ms ease-in', style({
-            opacity: 0,
-            transform: 'translateY(15px)'
-          }))
-        ])
-      ], { optional: true })
-    ])
-  ]),
-
-  /** 🔄 Rotate */
-  trigger(RowAnimationType.RotateIn, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'rotateX(-90deg)' }),
-        stagger(60, [
-          animate('500ms ease-out', style({
-            opacity: 1,
-            transform: 'rotateX(0)'
-          }))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(40, [
-          animate('300ms ease-in', style({
-            opacity: 0,
-            transform: 'rotateX(90deg)'
-          }))
-        ])
-      ], { optional: true })
-    ])
-  ]),
-
-  /** ◀ Slide In Left */
-  trigger(RowAnimationType.SlideInLeft, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'translateX(-30px)' }),
-        stagger(50, [
-          animate('350ms ease-out', style({
-            opacity: 1,
-            transform: 'translateX(0)'
-          }))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(40, [
-          animate('200ms ease-in', style({
-            opacity: 0,
-            transform: 'translateX(30px)'
-          }))
-        ])
-      ], { optional: true })
-    ])
-  ]),
-
-  /** 🌊 Float w/ Wave */
-  trigger(RowAnimationType.FloatIn, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'translateY(10px)' }),
-        stagger(70, [
-          animate('600ms cubic-bezier(.25,.46,.45,.94)', keyframes([
-            style({ opacity: 0.5, transform: 'translateY(-4px)', offset: 0.3 }),
-            style({ opacity: 1, transform: 'translateY(0)', offset: 1 }),
-          ]))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(40, [
-          animate('200ms ease', style({
-            opacity: 0,
-            transform: 'translateY(5px)'
-          }))
-        ])
-      ], { optional: true })
-    ])
-  ]),
-
-  /** ⬇ Curtain Drop */
-  trigger(RowAnimationType.CurtainDrop, [
-    transition('* => *', [
-      query(':enter', [
-        style({ opacity: 0, transform: 'translateY(-50%) rotateX(90deg)' }),
-        stagger(70, [
-          animate('600ms cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({
-            opacity: 1,
-            transform: 'translateY(0) rotateX(0)'
-          }))
-        ])
-      ], { optional: true }),
-      query(':leave', [
-        stagger(50, [
-          animate('300ms ease-in', style({
-            opacity: 0,
-            transform: 'translateY(50%) rotateX(-90deg)'
-          }))
-        ])
-      ], { optional: true })
-    ])
-  ])
-];