Merge branch 'dev' of https://github.com/abpframework/abp into feature/tests

npm/ng-packs/packages/theme-shared/src/lib/animations/bounce.animations.ts

@@ -0,0 +1,23 @@
+import { animation, animate, style, trigger, transition, state, useAnimation, keyframes } from '@angular/animations';
+
+export const bounceIn = animation(
+  [
+    style({ opacity: '0', display: '{{ display }}' }),
+    animate(
+      '{{ time}} {{ easing }}',
+      keyframes([
+        style({ opacity: '0', transform: '{{ transform }} scale(0.0)', offset: 0 }),
+        style({ opacity: '0', transform: '{{ transform }} scale(0.8)', offset: 0.5 }),
+        style({ opacity: '1', transform: '{{ transform }} scale(1.0)', offset: 1 })
+      ])
+    )
+  ],
+  {
+    params: {
+      time: '350ms',
+      easing: 'cubic-bezier(.7,.31,.72,1.47)',
+      display: 'block',
+      transform: 'translate(-50%, -50%)'
+    }
+  }
+);

npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts

@@ -1,19 +1,40 @@
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { animate, animation, trigger, state, style, transition, useAnimation } from '@angular/animations';
+
+export const collapseY = animation(
+  [
+    style({ height: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ height: '0', padding: '0px' }))
+  ],
+  { params: { time: '350ms', easing: 'ease' } }
+);
+
+export const collapseX = animation(
+  [
+    style({ width: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ width: '0', padding: '0px' }))
+  ],
+  { params: { time: '350ms', easing: 'ease' } }
+);
+
+export const expandY = animation(
+  [
+    style({ height: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ height: '*', padding: '*' }))
+  ],
+  { params: { time: '350ms', easing: 'ease' } }
+);
+
+export const expandX = animation(
+  [
+    style({ width: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ width: '*', padding: '*' }))
+  ],
+  { params: { time: '350ms', easing: 'ease' } }
+);
 
 export const collapse = trigger('collapse', [
-  state(
+  state('collapsed', style({ height: '0', overflow: 'hidden' })),
-    'open',
+  state('expanded', style({ height: '*', overflow: 'hidden' })),
-    style({
+  transition('expanded => collapsed', useAnimation(collapseY)),
-      height: '*',
+  transition('collapsed => expanded', useAnimation(expandY))
-      overflow: 'hidden'
-    })
-  ),
-  state(
-    'close',
-    style({
-      height: '0px',
-      overflow: 'hidden'
-    })
-  ),
-  transition('open <=> close', animate('{{duration}}ms'), { params: { duration: '350' } })
 ]);

npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts

@@ -1,19 +1,15 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { animate, animation, style } from '@angular/animations';
 
-export const fade = trigger('fade', [
+export const fadeIn = animation(
-  state('void', style({ opacity: 1 })),
+  [style({ opacity: '0', display: '{{ display }}' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))],
-  transition(':enter', [style({ opacity: 0 }), animate(250)]),
+  { params: { time: '350ms', easing: 'ease', display: 'block' } }
-  transition(':leave', animate(250, style({ opacity: 0 }))),
+);
-]);
 
-export const fadeWithStates = trigger('fadeInOut', [
+export const fadeOut = animation(
-  state('out', style({ opacity: 0 })),
+  [
-  state('in', style({ opacity: 1 })),
+    style({ opacity: '1' }),
-  transition('in <=> out', [animate(250)]),
+    animate('{{ time}} {{ easing }}', style({ opacity: '0' })),
-]);
+    style({ opacity: '0', display: 'none' })
-
+  ],
-export const fadeIn = trigger('fadeIn', [
+  { params: { time: '350ms', easing: 'ease' } }
-  state('*', style({ opacity: 1 })),
+);
-  transition('* => *', [style({ opacity: 0 }), animate(250)]),
-  transition(':enter', [style({ opacity: 0 }), animate(250)]),
-]);

npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts

@@ -1,3 +1,4 @@
 export * from './collapse.animations';
 export * from './fade.animations';
 export * from './slide.animations';
+export * from './bounce.animations';