From 3e3e6b82a8ecef22a910e35b3cdf1194c03cef10 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 26 Sep 2023 14:13:05 +0300 Subject: [PATCH 1/9] refactor(animations): igniteui-angular/animations --- projects/bundle-test/tsconfig.app.json | 3 + .../{src/lib => }/animations/README.md | 0 projects/igniteui-angular/animations/index.ts | 1 + .../animations/ng-package.json | 5 + .../animations/src/easings.ts | 32 ++ .../src}/fade/README.md | 2 +- .../src}/fade/index.ts | 29 +- .../src}/flip/README.md | 4 +- .../animations/src/flip/index.ts | 151 ++++++++++ .../src}/grow/index.ts | 0 .../src}/interface.ts | 0 .../igniteui-angular/animations/src/main.ts | 19 ++ .../src}/misc/README.md | 4 +- .../animations/src/misc/index.ts | 14 + .../src}/misc/pulsate.ts | 95 +++--- .../src}/misc/shake.ts | 139 ++++----- .../src}/rotate/README.md | 4 +- .../src}/rotate/index.ts | 0 .../src}/scale/README.md | 2 +- .../src}/scale/index.ts | 0 .../src}/slide/README.md | 4 +- .../src}/slide/index.ts | 0 .../src}/swing/README.md | 4 +- .../src}/swing/index.ts | 0 .../igniteui-angular/animations/src/util.ts | 262 +++++++++++++++++ .../src/lib/animations/easings.ts | 34 --- .../src/lib/animations/flip/index.ts | 118 -------- .../src/lib/animations/main.ts | 9 - .../src/lib/animations/misc/index.ts | 2 - .../src/lib/calendar/calendar.component.ts | 5 +- .../month-picker/month-picker.component.ts | 2 +- .../src/lib/carousel/carousel-base.ts | 5 +- .../igniteui-angular/src/lib/core/utils.ts | 274 ------------------ .../lib/date-picker/date-picker.component.ts | 3 +- .../date-range-picker.component.ts | 2 +- .../src/lib/dialog/dialog.component.ts | 2 +- .../tooltip/tooltip-target.directive.ts | 3 +- .../toggle-animation-component.spec.ts | 2 +- .../toggle-animation-component.ts | 3 +- .../grids/filtering/grid-filtering.service.ts | 2 +- .../src/lib/grids/grid.common.ts | 2 +- .../pivot-data-selector.component.ts | 2 +- .../lib/select/select-positioning-strategy.ts | 3 +- .../src/lib/services/overlay/overlay.ts | 19 +- .../position/auto-position-strategy.ts | 2 +- .../connected-positioning-strategy.ts | 2 +- .../position/global-position-strategy.ts | 2 +- .../src/lib/snackbar/snackbar.component.ts | 2 +- .../src/lib/stepper/stepper.component.ts | 3 +- .../src/lib/toast/toast.component.ts | 2 +- .../src/lib/tree/tree.component.ts | 2 +- projects/igniteui-angular/src/public_api.ts | 3 +- tsconfig.json | 3 + 53 files changed, 657 insertions(+), 630 deletions(-) rename projects/igniteui-angular/{src/lib => }/animations/README.md (100%) create mode 100644 projects/igniteui-angular/animations/index.ts create mode 100644 projects/igniteui-angular/animations/ng-package.json create mode 100644 projects/igniteui-angular/animations/src/easings.ts rename projects/igniteui-angular/{src/lib/animations => animations/src}/fade/README.md (93%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/fade/index.ts (54%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/flip/README.md (92%) create mode 100644 projects/igniteui-angular/animations/src/flip/index.ts rename projects/igniteui-angular/{src/lib/animations => animations/src}/grow/index.ts (100%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/interface.ts (100%) create mode 100644 projects/igniteui-angular/animations/src/main.ts rename projects/igniteui-angular/{src/lib/animations => animations/src}/misc/README.md (95%) create mode 100644 projects/igniteui-angular/animations/src/misc/index.ts rename projects/igniteui-angular/{src/lib/animations => animations/src}/misc/pulsate.ts (60%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/misc/shake.ts (57%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/rotate/README.md (94%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/rotate/index.ts (100%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/scale/README.md (94%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/scale/index.ts (100%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/slide/README.md (94%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/slide/index.ts (100%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/swing/README.md (93%) rename projects/igniteui-angular/{src/lib/animations => animations/src}/swing/index.ts (100%) create mode 100644 projects/igniteui-angular/animations/src/util.ts delete mode 100644 projects/igniteui-angular/src/lib/animations/easings.ts delete mode 100644 projects/igniteui-angular/src/lib/animations/flip/index.ts delete mode 100644 projects/igniteui-angular/src/lib/animations/main.ts delete mode 100644 projects/igniteui-angular/src/lib/animations/misc/index.ts diff --git a/projects/bundle-test/tsconfig.app.json b/projects/bundle-test/tsconfig.app.json index 05cc81dfa86..75147ba1395 100644 --- a/projects/bundle-test/tsconfig.app.json +++ b/projects/bundle-test/tsconfig.app.json @@ -8,6 +8,9 @@ "igniteui-angular": [ "dist/igniteui-angular" ], + "igniteui-angular/*": [ + "dist/igniteui-angular/*" + ], "igniteui-angular-i18n": [ "dist/igniteui-angular-i18n" ] diff --git a/projects/igniteui-angular/src/lib/animations/README.md b/projects/igniteui-angular/animations/README.md similarity index 100% rename from projects/igniteui-angular/src/lib/animations/README.md rename to projects/igniteui-angular/animations/README.md diff --git a/projects/igniteui-angular/animations/index.ts b/projects/igniteui-angular/animations/index.ts new file mode 100644 index 00000000000..c1cd862ed17 --- /dev/null +++ b/projects/igniteui-angular/animations/index.ts @@ -0,0 +1 @@ +export * from './src/main'; diff --git a/projects/igniteui-angular/animations/ng-package.json b/projects/igniteui-angular/animations/ng-package.json new file mode 100644 index 00000000000..af161996d2a --- /dev/null +++ b/projects/igniteui-angular/animations/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/main.ts" + } +} diff --git a/projects/igniteui-angular/animations/src/easings.ts b/projects/igniteui-angular/animations/src/easings.ts new file mode 100644 index 00000000000..6d6e0bd7365 --- /dev/null +++ b/projects/igniteui-angular/animations/src/easings.ts @@ -0,0 +1,32 @@ +export const enum EaseIn { + Quad = `cubic-bezier(0.550, 0.085, 0.680, 0.530)`, + Cubic = `cubic-bezier(0.550, 0.055, 0.675, 0.190)`, + Quart = `cubic-bezier(0.895, 0.030, 0.685, 0.220)`, + Quint = `cubic-bezier(0.755, 0.050, 0.855, 0.060)`, + Sine = `cubic-bezier(0.470, 0.000, 0.745, 0.715)`, + Expo = `cubic-bezier(0.950, 0.050, 0.795, 0.035)`, + Circ = `cubic-bezier(0.600, 0.040, 0.980, 0.335)`, + Back = `cubic-bezier(0.600, -0.280, 0.735, 0.045)` +} + +export const enum EaseOut { + Quad = `cubic-bezier(0.250, 0.460, 0.450, 0.940)`, + Cubic = `cubic-bezier(0.215, 0.610, 0.355, 1.000)`, + Quart = `cubic-bezier(0.165, 0.840, 0.440, 1.000)`, + Quint = `cubic-bezier(0.230, 1.000, 0.320, 1.000)`, + Sine = `cubic-bezier(0.390, 0.575, 0.565, 1.000)`, + Expo = `cubic-bezier(0.190, 1.000, 0.220, 1.000)`, + Circ = `cubic-bezier(0.075, 0.820, 0.165, 1.000)`, + Back = `cubic-bezier(0.175, 0.885, 0.320, 1.275)` +} + +export const enum EaseInOut { + Quad = `cubic-bezier(0.455, 0.030, 0.515, 0.955)`, + Cubic = `cubic-bezier(0.645, 0.045, 0.355, 1.000)`, + Quart = `cubic-bezier(0.770, 0.000, 0.175, 1.000)`, + Quint = `cubic-bezier(0.860, 0.000, 0.070, 1.000)`, + Sine = `cubic-bezier(0.445, 0.050, 0.550, 0.950)`, + Expo = `cubic-bezier(1.000, 0.000, 0.000, 1.000)`, + Circ = `cubic-bezier(0.785, 0.135, 0.150, 0.860)`, + Back = `cubic-bezier(0.680, -0.550, 0.265, 1.550)` +} diff --git a/projects/igniteui-angular/src/lib/animations/fade/README.md b/projects/igniteui-angular/animations/src/fade/README.md similarity index 93% rename from projects/igniteui-angular/src/lib/animations/fade/README.md rename to projects/igniteui-angular/animations/src/fade/README.md index e5d1f536141..92404521327 100644 --- a/projects/igniteui-angular/src/lib/animations/fade/README.md +++ b/projects/igniteui-angular/animations/src/fade/README.md @@ -21,7 +21,7 @@ const params: IAnimationParams = { If parameters are attached, they act as default values. When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used. ``` typescript -import { fadeIn } from "igniteui-angular/animations/main"; +import { fadeIn } from "igniteui-angular/animations"; import { EaseOut } from "ignieui-angular/animations/easings"; useAnimation(fadeIn, { diff --git a/projects/igniteui-angular/src/lib/animations/fade/index.ts b/projects/igniteui-angular/animations/src/fade/index.ts similarity index 54% rename from projects/igniteui-angular/src/lib/animations/fade/index.ts rename to projects/igniteui-angular/animations/src/fade/index.ts index 9e80453236c..7378ae31676 100644 --- a/projects/igniteui-angular/src/lib/animations/fade/index.ts +++ b/projects/igniteui-angular/animations/src/fade/index.ts @@ -1,32 +1,29 @@ import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations'; import { EaseOut } from '../easings'; -import { IAnimationParams } from '../interface'; const base: AnimationMetadata[] = [ - style({ + /*@__PURE__*/style({ opacity: `{{startOpacity}}` }), - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - style({ + /*@__PURE__*/style({ opacity: `{{endOpacity}}` }) ) ]; -const baseParams: IAnimationParams = { - delay: '0s', - duration: '350ms', - easing: EaseOut.Sine, - endOpacity: 1, - startOpacity: 0 -}; - -const fadeIn: AnimationReferenceMetadata = animation(base, { - params: baseParams +export const fadeIn: AnimationReferenceMetadata = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 1, + startOpacity: 0 + } }); -const fadeOut: AnimationReferenceMetadata = animation(base, { +export const fadeOut: AnimationReferenceMetadata = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -35,5 +32,3 @@ const fadeOut: AnimationReferenceMetadata = animation(base, { startOpacity: 1 } }); - -export { fadeIn, fadeOut }; diff --git a/projects/igniteui-angular/src/lib/animations/flip/README.md b/projects/igniteui-angular/animations/src/flip/README.md similarity index 92% rename from projects/igniteui-angular/src/lib/animations/flip/README.md rename to projects/igniteui-angular/animations/src/flip/README.md index 5c36f5cb3be..8fdd4e994c9 100644 --- a/projects/igniteui-angular/src/lib/animations/flip/README.md +++ b/projects/igniteui-angular/animations/src/flip/README.md @@ -32,7 +32,7 @@ const params: IAnimationParams = { If parameters are attached, they act as default values. When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used. ``` typescript -import { flipTop } from "igniteui-angular/animations/main"; +import { flipTop } from "igniteui-angular/animations"; useAnimation(fadeIn); -``` \ No newline at end of file +``` diff --git a/projects/igniteui-angular/animations/src/flip/index.ts b/projects/igniteui-angular/animations/src/flip/index.ts new file mode 100644 index 00000000000..50d90a7fcb7 --- /dev/null +++ b/projects/igniteui-angular/animations/src/flip/index.ts @@ -0,0 +1,151 @@ +import { + animate, + animation, + AnimationMetadata, + AnimationReferenceMetadata, + keyframes, + style +} from '@angular/animations'; +import { EaseOut } from '../easings'; + +const baseRecipe: AnimationMetadata[] = [ + /*@__PURE__*/style({ + backfaceVisibility: 'hidden', + transformStyle: 'preserve-3d' + }), + /*@__PURE__*/animate( + `{{duration}} {{delay}} {{easing}}`, + /*@__PURE__*/keyframes([ + /*@__PURE__*/style({ + offset: 0, + transform: `translateZ({{startDistance}}) + rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{startAngle}}deg)` + }), + /*@__PURE__*/style({ + offset: 1, + transform: `translateZ({{endDistance}}) + rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{endAngle}}deg)` + }) + ]) + ) +]; + +export const flipTop: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 180, + endDistance: '0px', + rotateX: 1, + rotateY: 0, + rotateZ: 0, + startAngle: 0, + startDistance: '0px' + } +}); + +export const flipBottom: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endDistance: '0px', + rotateX: 1, + rotateY: 0, + rotateZ: 0, + startAngle: 0, + startDistance: '0px', + endAngle: -180 + } +}); + +export const flipLeft: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 180, + endDistance: '0px', + rotateZ: 0, + startAngle: 0, + startDistance: '0px', + rotateX: 0, + rotateY: 1 + } +}); + +export const flipRight: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endDistance: '0px', + rotateZ: 0, + startAngle: 0, + startDistance: '0px', + endAngle: -180, + rotateX: 0, + rotateY: 1 + } +}); + +export const flipHorFwd: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 180, + rotateX: 1, + rotateY: 0, + rotateZ: 0, + startAngle: 0, + startDistance: '0px', + endDistance: '170px' + } +}); + +export const flipHorBck: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 180, + rotateX: 1, + rotateY: 0, + rotateZ: 0, + startAngle: 0, + startDistance: '0px', + endDistance: '-170px' + } +}); + +export const flipVerFwd: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 180, + rotateZ: 0, + startAngle: 0, + startDistance: '0px', + endDistance: '170px', + rotateX: 0, + rotateY: 1 + } +}); + +export const flipVerBck: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 180, + rotateZ: 0, + startAngle: 0, + startDistance: '0px', + endDistance: '-170px', + rotateX: 0, + rotateY: 1 + } +}); diff --git a/projects/igniteui-angular/src/lib/animations/grow/index.ts b/projects/igniteui-angular/animations/src/grow/index.ts similarity index 100% rename from projects/igniteui-angular/src/lib/animations/grow/index.ts rename to projects/igniteui-angular/animations/src/grow/index.ts diff --git a/projects/igniteui-angular/src/lib/animations/interface.ts b/projects/igniteui-angular/animations/src/interface.ts similarity index 100% rename from projects/igniteui-angular/src/lib/animations/interface.ts rename to projects/igniteui-angular/animations/src/interface.ts diff --git a/projects/igniteui-angular/animations/src/main.ts b/projects/igniteui-angular/animations/src/main.ts new file mode 100644 index 00000000000..b50c7090a21 --- /dev/null +++ b/projects/igniteui-angular/animations/src/main.ts @@ -0,0 +1,19 @@ +export { IAnimationParams } from './interface'; +export { AnimationUtil } from './util'; +export { fadeIn, fadeOut } from './fade/index'; +export { + flipTop, + flipRight, + flipBottom, + flipLeft, + flipHorFwd, + flipHorBck, + flipVerFwd, + flipVerBck +} from './flip/index'; +export * from './rotate/index'; +export * from './misc/index'; +export * from './scale/index'; +export * from './slide/index'; +export * from './swing/index'; +export * from './grow/index'; diff --git a/projects/igniteui-angular/src/lib/animations/misc/README.md b/projects/igniteui-angular/animations/src/misc/README.md similarity index 95% rename from projects/igniteui-angular/src/lib/animations/misc/README.md rename to projects/igniteui-angular/animations/src/misc/README.md index ec03b6092ef..22f327260fa 100644 --- a/projects/igniteui-angular/src/lib/animations/misc/README.md +++ b/projects/igniteui-angular/animations/src/misc/README.md @@ -72,7 +72,7 @@ const shakeParams: IAnimationParams = { If parameters are attached, they act as default values. When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used. ``` typescript -import { blink } from "igniteui-angular/animations/main"; +import { blink } from "igniteui-angular/animations"; useAnimation(blink); -``` \ No newline at end of file +``` diff --git a/projects/igniteui-angular/animations/src/misc/index.ts b/projects/igniteui-angular/animations/src/misc/index.ts new file mode 100644 index 00000000000..c565e4696bc --- /dev/null +++ b/projects/igniteui-angular/animations/src/misc/index.ts @@ -0,0 +1,14 @@ +export { + shakeHor, + shakeVer, + shakeTop, + shakeBottom, + shakeRight, + shakeLeft, + shakeCenter, + shakeTr, + shakeBr, + shakeBl, + shakeTl +} from './shake'; +export { pulsateFwd, pulsateBck, heartbeat, blink } from './pulsate'; diff --git a/projects/igniteui-angular/src/lib/animations/misc/pulsate.ts b/projects/igniteui-angular/animations/src/misc/pulsate.ts similarity index 60% rename from projects/igniteui-angular/src/lib/animations/misc/pulsate.ts rename to projects/igniteui-angular/animations/src/misc/pulsate.ts index 7684657ea27..bf18d2591c5 100644 --- a/projects/igniteui-angular/src/lib/animations/misc/pulsate.ts +++ b/projects/igniteui-angular/animations/src/misc/pulsate.ts @@ -5,33 +5,32 @@ import { keyframes, style } from '@angular/animations'; -import { IAnimationParams } from '../interface'; const heartbeatBase: AnimationMetadata[] = [ - style({ + /*@__PURE__*/style({ animationTimingFunction: `ease-out`, transform: `scale(1)`, transformOrigin: `center center` }), - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - keyframes([ - style({ + /*@__PURE__*/keyframes([ + /*@__PURE__*/style({ animationTimingFunction: `ease-in`, offset: 0.1, transform: `scale(0.91)` }), - style({ + /*@__PURE__*/style({ animationTimingFunction: `ease-out`, offset: 0.17, transform: `scale(0.98)` }), - style({ + /*@__PURE__*/style({ animationTimingFunction: `ease-in`, offset: 0.33, transform: `scale(0.87)` }), - style({ + /*@__PURE__*/style({ animationTimingFunction: `ease-out`, offset: 0.45, transform: `scale(1)` @@ -40,25 +39,19 @@ const heartbeatBase: AnimationMetadata[] = [ ) ]; -const heartbeatParams: IAnimationParams = { - delay: '0s', - duration: '1.5s', - easing: 'ease-in-out' -}; - const pulsateBase: AnimationMetadata[] = [ - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - keyframes([ - style({ + /*@__PURE__*/keyframes([ + /*@__PURE__*/style({ offset: 0, transform: `scale({{fromScale}})` }), - style({ + /*@__PURE__*/style({ offset: 0.5, transform: `scale({{toScale}})` }), - style({ + /*@__PURE__*/style({ offset: 1, transform: `scale({{fromScale}})` }) @@ -66,29 +59,21 @@ const pulsateBase: AnimationMetadata[] = [ ) ]; -const pulsateParams: IAnimationParams = { - delay: '0s', - duration: '.5s', - easing: 'ease-in-out', - fromScale: 1, - toScale: 1.1 -}; - const blinkBase: AnimationMetadata[] = [ - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - keyframes([ - style({ + /*@__PURE__*/keyframes([ + /*@__PURE__*/style({ offset: 0, opacity: .8, transform: `scale({{fromScale}})` }), - style({ + /*@__PURE__*/style({ offset: 0.8, opacity: 0, transform: `scale({{midScale}})` }), - style({ + /*@__PURE__*/style({ offset: 1, opacity: 0, transform: `scale({{toScale}})` @@ -97,43 +82,41 @@ const blinkBase: AnimationMetadata[] = [ ) ]; -const blinkParams: IAnimationParams = { - delay: '0s', - duration: '.8s', - easing: 'ease-in-out', - fromScale: .2, - midScale: 1.2, - toScale: 2.2 -}; - -const pulsateFwd = animation(pulsateBase, { +export const pulsateFwd = /*@__PURE__*/animation(pulsateBase, { params: { - ...pulsateParams + delay: '0s', + duration: '.5s', + easing: 'ease-in-out', + fromScale: 1, + toScale: 1.1 } }); -const pulsateBck = animation(pulsateBase, { +export const pulsateBck = /*@__PURE__*/animation(pulsateBase, { params: { - ...pulsateParams, + delay: '0s', + duration: '.5s', + easing: 'ease-in-out', + fromScale: 1, toScale: .9 } }); -const heartbeat = animation(heartbeatBase, { +export const heartbeat = /*@__PURE__*/animation(heartbeatBase, { params: { - ...heartbeatParams + delay: '0s', + duration: '1.5s', + easing: 'ease-in-out' } }); -const blink = animation(blinkBase, { +export const blink = /*@__PURE__*/animation(blinkBase, { params: { - ...blinkParams + delay: '0s', + duration: '.8s', + easing: 'ease-in-out', + fromScale: .2, + midScale: 1.2, + toScale: 2.2 } }); - -export { - heartbeat, - pulsateFwd, - pulsateBck, - blink -}; diff --git a/projects/igniteui-angular/src/lib/animations/misc/shake.ts b/projects/igniteui-angular/animations/src/misc/shake.ts similarity index 57% rename from projects/igniteui-angular/src/lib/animations/misc/shake.ts rename to projects/igniteui-angular/animations/src/misc/shake.ts index db2ac88f021..a7730b513ef 100644 --- a/projects/igniteui-angular/src/lib/animations/misc/shake.ts +++ b/projects/igniteui-angular/animations/src/misc/shake.ts @@ -7,58 +7,57 @@ import { style } from '@angular/animations'; import { EaseInOut } from '../easings'; -import { IAnimationParams } from '../interface'; const baseRecipe: AnimationMetadata[] = [ - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - keyframes([ - style({ + /*@__PURE__*/keyframes([ + /*@__PURE__*/style({ offset: 0, transform: `rotate(0deg) translate{{direction}}(0)`, transformOrigin: `{{xPos}} {{yPos}}` }), - style({ + /*@__PURE__*/style({ offset: 0.1, transform: `rotate({{endAngle}}deg) translate{{direction}}(-{{startDistance}})` }), - style({ + /*@__PURE__*/style({ offset: 0.2, transform: `rotate(-{{startAngle}}deg) translate{{direction}}({{startDistance}})` }), - style({ + /*@__PURE__*/style({ offset: 0.3, transform: `rotate({{startAngle}}deg) translate{{direction}}(-{{startDistance}})` }), - style({ + /*@__PURE__*/style({ offset: 0.4, transform: `rotate(-{{startAngle}}deg) translate{{direction}}({{startDistance}})` }), - style({ + /*@__PURE__*/style({ offset: 0.5, transform: `rotate({{startAngle}}deg) translate{{direction}}(-{{startDistance}})` }), - style({ + /*@__PURE__*/style({ offset: 0.6, transform: `rotate(-{{startAngle}}deg) translate{{direction}}({{startDistance}})` }), - style({ + /*@__PURE__*/style({ offset: 0.7, transform: `rotate({{startAngle}}deg) translate{{direction}}(-{{startDistance}})` }), - style({ + /*@__PURE__*/style({ offset: 0.8, transform: `rotate(-{{endAngle}}deg) translate{{direction}}({{endDistance}})` }), - style({ + /*@__PURE__*/style({ offset: 0.9, transform: `rotate({{endAngle}}deg) translate{{direction}}(-{{endDistance}})` }), - style({ + /*@__PURE__*/style({ offset: 1, transform: `rotate(0deg) translate{{direction}}(0)`, transformOrigin: `{{xPos}} {{yPos}}` @@ -67,36 +66,43 @@ const baseRecipe: AnimationMetadata[] = [ ) ]; -const baseParams: IAnimationParams = { - delay: '0s', - direction: 'X', - duration: '800ms', - easing: EaseInOut.Quad, - endAngle: 0, - endDistance: '8px', - startAngle: 0, - startDistance: '10px', - xPos: 'center', - yPos: 'center' -}; - -const shakeHor: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeHor: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, - direction: 'X' + delay: '0s', + direction: 'X', + duration: '800ms', + easing: EaseInOut.Quad, + endAngle: 0, + endDistance: '8px', + startAngle: 0, + startDistance: '10px', + xPos: 'center', + yPos: 'center' } }); -const shakeVer: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeVer: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, - direction: 'Y' + delay: '0s', + direction: 'Y', + duration: '800ms', + easing: EaseInOut.Quad, + endAngle: 0, + endDistance: '8px', + startAngle: 0, + startDistance: '10px', + xPos: 'center', + yPos: 'center' } }); -const shakeTop: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeTop: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, + delay: '0s', + direction: 'X', + duration: '800ms', + easing: EaseInOut.Quad, + xPos: 'center', endAngle: 2, endDistance: '0', startAngle: 4, @@ -105,9 +111,12 @@ const shakeTop: AnimationReferenceMetadata = animation(baseRecipe, { } }); -const shakeBottom: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeBottom: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, + delay: '0s', + duration: '800ms', + easing: EaseInOut.Quad, + xPos: 'center', direction: 'Y', endAngle: 2, endDistance: '0', @@ -117,9 +126,11 @@ const shakeBottom: AnimationReferenceMetadata = animation(baseRecipe, { } }); -const shakeRight: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeRight: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, + delay: '0s', + duration: '800ms', + easing: EaseInOut.Quad, direction: 'Y', endAngle: 2, endDistance: '0', @@ -130,9 +141,11 @@ const shakeRight: AnimationReferenceMetadata = animation(baseRecipe, { } }); -const shakeLeft: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeLeft: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, + delay: '0s', + duration: '800ms', + easing: EaseInOut.Quad, direction: 'Y', endAngle: 2, endDistance: '0', @@ -143,9 +156,11 @@ const shakeLeft: AnimationReferenceMetadata = animation(baseRecipe, { } }); -const shakeCenter: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeCenter: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, + delay: '0s', + duration: '800ms', + easing: EaseInOut.Quad, direction: 'Y', endAngle: 8, endDistance: '0', @@ -156,9 +171,11 @@ const shakeCenter: AnimationReferenceMetadata = animation(baseRecipe, { } }); -const shakeTr: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeTr: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, + delay: '0s', + duration: '800ms', + easing: EaseInOut.Quad, direction: 'Y', endAngle: 2, endDistance: '0', @@ -169,9 +186,11 @@ const shakeTr: AnimationReferenceMetadata = animation(baseRecipe, { } }); -const shakeBr: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeBr: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, + delay: '0s', + duration: '800ms', + easing: EaseInOut.Quad, direction: 'Y', endAngle: 2, endDistance: '0', @@ -182,9 +201,11 @@ const shakeBr: AnimationReferenceMetadata = animation(baseRecipe, { } }); -const shakeBl: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeBl: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, + delay: '0s', + duration: '800ms', + easing: EaseInOut.Quad, direction: 'Y', endAngle: 2, endDistance: '0', @@ -195,9 +216,11 @@ const shakeBl: AnimationReferenceMetadata = animation(baseRecipe, { } }); -const shakeTl: AnimationReferenceMetadata = animation(baseRecipe, { +export const shakeTl: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { params: { - ...baseParams, + delay: '0s', + duration: '800ms', + easing: EaseInOut.Quad, direction: 'Y', endAngle: 2, endDistance: '0', @@ -207,17 +230,3 @@ const shakeTl: AnimationReferenceMetadata = animation(baseRecipe, { yPos: 'top' } }); - -export { - shakeHor, - shakeVer, - shakeTop, - shakeBottom, - shakeRight, - shakeLeft, - shakeCenter, - shakeTr, - shakeBr, - shakeBl, - shakeTl -}; diff --git a/projects/igniteui-angular/src/lib/animations/rotate/README.md b/projects/igniteui-angular/animations/src/rotate/README.md similarity index 94% rename from projects/igniteui-angular/src/lib/animations/rotate/README.md rename to projects/igniteui-angular/animations/src/rotate/README.md index 55632b39d75..de5443b4373 100644 --- a/projects/igniteui-angular/src/lib/animations/rotate/README.md +++ b/projects/igniteui-angular/animations/src/rotate/README.md @@ -52,7 +52,7 @@ const params: IAnimationParams = { If parameters are attached, they act as default values. When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used. ``` typescript -import { rotateInCenter } from "igniteui-angular/animations/main"; +import { rotateInCenter } from "igniteui-angular/animations"; useAnimation(rotateInCenter); -``` \ No newline at end of file +``` diff --git a/projects/igniteui-angular/src/lib/animations/rotate/index.ts b/projects/igniteui-angular/animations/src/rotate/index.ts similarity index 100% rename from projects/igniteui-angular/src/lib/animations/rotate/index.ts rename to projects/igniteui-angular/animations/src/rotate/index.ts diff --git a/projects/igniteui-angular/src/lib/animations/scale/README.md b/projects/igniteui-angular/animations/src/scale/README.md similarity index 94% rename from projects/igniteui-angular/src/lib/animations/scale/README.md rename to projects/igniteui-angular/animations/src/scale/README.md index cbf5f17569b..d6ff5c2fe2b 100644 --- a/projects/igniteui-angular/src/lib/animations/scale/README.md +++ b/projects/igniteui-angular/animations/src/scale/README.md @@ -54,7 +54,7 @@ const params: IAnimationParams = { If parameters are attached, they act as default values. When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used. ``` typescript -import { flipTop } from "igniteui-angular/animations/main"; +import { flipTop } from "igniteui-angular/animations"; useAnimation(fadeIn); ``` diff --git a/projects/igniteui-angular/src/lib/animations/scale/index.ts b/projects/igniteui-angular/animations/src/scale/index.ts similarity index 100% rename from projects/igniteui-angular/src/lib/animations/scale/index.ts rename to projects/igniteui-angular/animations/src/scale/index.ts diff --git a/projects/igniteui-angular/src/lib/animations/slide/README.md b/projects/igniteui-angular/animations/src/slide/README.md similarity index 94% rename from projects/igniteui-angular/src/lib/animations/slide/README.md rename to projects/igniteui-angular/animations/src/slide/README.md index 79d0f6e576a..9e3a194c371 100644 --- a/projects/igniteui-angular/src/lib/animations/slide/README.md +++ b/projects/igniteui-angular/animations/src/slide/README.md @@ -54,7 +54,7 @@ const params: IAnimationParams = { If parameters are attached, they act as default values. When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used. ``` typescript -import { scaleInTop } from "igniteui-angular/animations/main"; +import { scaleInTop } from "igniteui-angular/animations"; useAnimation(scaleInTop); -``` \ No newline at end of file +``` diff --git a/projects/igniteui-angular/src/lib/animations/slide/index.ts b/projects/igniteui-angular/animations/src/slide/index.ts similarity index 100% rename from projects/igniteui-angular/src/lib/animations/slide/index.ts rename to projects/igniteui-angular/animations/src/slide/index.ts diff --git a/projects/igniteui-angular/src/lib/animations/swing/README.md b/projects/igniteui-angular/animations/src/swing/README.md similarity index 93% rename from projects/igniteui-angular/src/lib/animations/swing/README.md rename to projects/igniteui-angular/animations/src/swing/README.md index 6690195fe6d..2d3cc0f4730 100644 --- a/projects/igniteui-angular/src/lib/animations/swing/README.md +++ b/projects/igniteui-angular/animations/src/swing/README.md @@ -40,7 +40,7 @@ const params: IAnimationParams = { If parameters are attached, they act as default values. When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used. ``` typescript -import { swingInTopFwd } from "igniteui-angular/animations/main"; +import { swingInTopFwd } from "igniteui-angular/animations"; useAnimation(swingInTopFwd); -``` \ No newline at end of file +``` diff --git a/projects/igniteui-angular/src/lib/animations/swing/index.ts b/projects/igniteui-angular/animations/src/swing/index.ts similarity index 100% rename from projects/igniteui-angular/src/lib/animations/swing/index.ts rename to projects/igniteui-angular/animations/src/swing/index.ts diff --git a/projects/igniteui-angular/animations/src/util.ts b/projects/igniteui-angular/animations/src/util.ts new file mode 100644 index 00000000000..152549e9266 --- /dev/null +++ b/projects/igniteui-angular/animations/src/util.ts @@ -0,0 +1,262 @@ +import { AnimationReferenceMetadata } from '@angular/animations'; +import { fadeIn, fadeOut } from './fade'; +import { flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd } from './flip'; +import { growVerIn, growVerOut } from './grow'; +import { blink, heartbeat, pulsateBck, pulsateFwd, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer } from './misc'; +import { rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer } from './rotate'; +import { scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop } from './scale'; +import { slideInTop, slideInBottom, slideOutTop, slideOutBottom, slideInRight, slideInLeft, slideOutRight, slideOutLeft, slideInTr, slideInBl, slideOutTr, slideOutBl, slideInBr, slideInTl, slideOutBr, slideOutTl } from './slide'; +import { swingInTopFwd, swingInBottomFwd, swingOutTopFwd, swingOutBottomFwd, swingInRightFwd, swingInLeftFwd, swingOutRightFwd, swingOutLefttFwd, swingInTopBck, swingInBottomBck, swingOutTopBck, swingOutBottomBck, swingInRightBck, swingInLeftBck, swingOutRightBck, swingOutLeftBck } from './swing'; + +export class AnimationUtil { + private static _instance: AnimationUtil; + + private oppositeAnimation: Map = new Map([ + [fadeIn, fadeIn], + [fadeOut, fadeOut], + [flipTop, flipBottom], + [flipBottom, flipTop], + [flipRight, flipLeft], + [flipLeft, flipRight], + [flipHorFwd, flipHorBck], + [flipHorBck, flipHorFwd], + [flipVerFwd, flipVerBck], + [flipVerBck, flipVerFwd], + [growVerIn, growVerIn], + [growVerOut, growVerOut], + [heartbeat, heartbeat], + [pulsateFwd, pulsateBck], + [pulsateBck, pulsateFwd], + [blink, blink], + [shakeHor, shakeHor], + [shakeVer, shakeVer], + [shakeTop, shakeTop], + [shakeBottom, shakeBottom], + [shakeRight, shakeRight], + [shakeLeft, shakeLeft], + [shakeCenter, shakeCenter], + [shakeTr, shakeTr], + [shakeBr, shakeBr], + [shakeBl, shakeBl], + [shakeTl, shakeTl], + [rotateInCenter, rotateInCenter], + [rotateOutCenter, rotateOutCenter], + [rotateInTop, rotateInBottom], + [rotateOutTop, rotateOutBottom], + [rotateInRight, rotateInLeft], + [rotateOutRight, rotateOutLeft], + [rotateInLeft, rotateInRight], + [rotateOutLeft, rotateOutRight], + [rotateInBottom, rotateInTop], + [rotateOutBottom, rotateOutTop], + [rotateInTr, rotateInBl], + [rotateOutTr, rotateOutBl], + [rotateInBr, rotateInTl], + [rotateOutBr, rotateOutTl], + [rotateInBl, rotateInTr], + [rotateOutBl, rotateOutTr], + [rotateInTl, rotateInBr], + [rotateOutTl, rotateOutBr], + [rotateInDiagonal1, rotateInDiagonal1], + [rotateOutDiagonal1, rotateOutDiagonal1], + [rotateInDiagonal2, rotateInDiagonal2], + [rotateOutDiagonal2, rotateOutDiagonal2], + [rotateInHor, rotateInHor], + [rotateOutHor, rotateOutHor], + [rotateInVer, rotateInVer], + [rotateOutVer, rotateOutVer], + [scaleInTop, scaleInBottom], + [scaleOutTop, scaleOutBottom], + [scaleInRight, scaleInLeft], + [scaleOutRight, scaleOutLeft], + [scaleInBottom, scaleInTop], + [scaleOutBottom, scaleOutTop], + [scaleInLeft, scaleInRight], + [scaleOutLeft, scaleOutRight], + [scaleInCenter, scaleInCenter], + [scaleOutCenter, scaleOutCenter], + [scaleInTr, scaleInBl], + [scaleOutTr, scaleOutBl], + [scaleInBr, scaleInTl], + [scaleOutBr, scaleOutTl], + [scaleInBl, scaleInTr], + [scaleOutBl, scaleOutTr], + [scaleInTl, scaleInBr], + [scaleOutTl, scaleOutBr], + [scaleInVerTop, scaleInVerBottom], + [scaleOutVerTop, scaleOutVerBottom], + [scaleInVerBottom, scaleInVerTop], + [scaleOutVerBottom, scaleOutVerTop], + [scaleInVerCenter, scaleInVerCenter], + [scaleOutVerCenter, scaleOutVerCenter], + [scaleInHorCenter, scaleInHorCenter], + [scaleOutHorCenter, scaleOutHorCenter], + [scaleInHorLeft, scaleInHorRight], + [scaleOutHorLeft, scaleOutHorRight], + [scaleInHorRight, scaleInHorLeft], + [scaleOutHorRight, scaleOutHorLeft], + [slideInTop, slideInBottom], + [slideOutTop, slideOutBottom], + [slideInRight, slideInLeft], + [slideOutRight, slideOutLeft], + [slideInBottom, slideInTop], + [slideOutBottom, slideOutTop], + [slideInLeft, slideInRight], + [slideOutLeft, slideOutRight], + [slideInTr, slideInBl], + [slideOutTr, slideOutBl], + [slideInBr, slideInTl], + [slideOutBr, slideOutTl], + [slideInBl, slideInTr], + [slideOutBl, slideOutTr], + [slideInTl, slideInBr], + [slideOutTl, slideOutBr], + [swingInTopFwd, swingInBottomFwd], + [swingOutTopFwd, swingOutBottomFwd], + [swingInRightFwd, swingInLeftFwd], + [swingOutRightFwd, swingOutLefttFwd], + [swingInLeftFwd, swingInRightFwd], + [swingOutLefttFwd, swingOutRightFwd], + [swingInBottomFwd, swingInTopFwd], + [swingOutBottomFwd, swingOutTopFwd], + [swingInTopBck, swingInBottomBck], + [swingOutTopBck, swingOutBottomBck], + [swingInRightBck, swingInLeftBck], + [swingOutRightBck, swingOutLeftBck], + [swingInBottomBck, swingInTopBck], + [swingOutBottomBck, swingOutTopBck], + [swingInLeftBck, swingInRightBck], + [swingOutLeftBck, swingOutRightBck], + ]); + + private horizontalAnimations: AnimationReferenceMetadata[] = [ + flipRight, + flipLeft, + flipVerFwd, + flipVerBck, + rotateInRight, + rotateOutRight, + rotateInLeft, + rotateOutLeft, + rotateInTr, + rotateOutTr, + rotateInBr, + rotateOutBr, + rotateInBl, + rotateOutBl, + rotateInTl, + rotateOutTl, + scaleInRight, + scaleOutRight, + scaleInLeft, + scaleOutLeft, + scaleInTr, + scaleOutTr, + scaleInBr, + scaleOutBr, + scaleInBl, + scaleOutBl, + scaleInTl, + scaleOutTl, + scaleInHorLeft, + scaleOutHorLeft, + scaleInHorRight, + scaleOutHorRight, + slideInRight, + slideOutRight, + slideInLeft, + slideOutLeft, + slideInTr, + slideOutTr, + slideInBr, + slideOutBr, + slideInBl, + slideOutBl, + slideInTl, + slideOutTl, + swingInRightFwd, + swingOutRightFwd, + swingInLeftFwd, + swingOutLefttFwd, + swingInRightBck, + swingOutRightBck, + swingInLeftBck, + swingOutLeftBck, + ]; + + private verticalAnimations: AnimationReferenceMetadata[] = [ + flipTop, + flipBottom, + flipHorFwd, + flipHorBck, + growVerIn, + growVerOut, + rotateInTop, + rotateOutTop, + rotateInBottom, + rotateOutBottom, + rotateInTr, + rotateOutTr, + rotateInBr, + rotateOutBr, + rotateInBl, + rotateOutBl, + rotateInTl, + rotateOutTl, + scaleInTop, + scaleOutTop, + scaleInBottom, + scaleOutBottom, + scaleInTr, + scaleOutTr, + scaleInBr, + scaleOutBr, + scaleInBl, + scaleOutBl, + scaleInTl, + scaleOutTl, + scaleInVerTop, + scaleOutVerTop, + scaleInVerBottom, + scaleOutVerBottom, + slideInTop, + slideOutTop, + slideInBottom, + slideOutBottom, + slideInTr, + slideOutTr, + slideInBr, + slideOutBr, + slideInBl, + slideOutBl, + slideInTl, + slideOutTl, + swingInTopFwd, + swingOutTopFwd, + swingInBottomFwd, + swingOutBottomFwd, + swingInTopBck, + swingOutTopBck, + swingInBottomBck, + swingOutBottomBck, + ]; + + private constructor() { } + + public static instance() { + return this._instance || (this._instance = new this()); + } + + public reverseAnimationResolver(animation: AnimationReferenceMetadata): AnimationReferenceMetadata { + return this.oppositeAnimation.get(animation) ?? animation; + } + + + public isHorizontalAnimation(animation: AnimationReferenceMetadata): boolean { + return this.horizontalAnimations.includes(animation); + } + + public isVerticalAnimation(animation: AnimationReferenceMetadata): boolean { + return this.verticalAnimations.includes(animation); + } +} diff --git a/projects/igniteui-angular/src/lib/animations/easings.ts b/projects/igniteui-angular/src/lib/animations/easings.ts deleted file mode 100644 index 39124868cf1..00000000000 --- a/projects/igniteui-angular/src/lib/animations/easings.ts +++ /dev/null @@ -1,34 +0,0 @@ -enum EaseIn { - Quad = `cubic-bezier(0.550, 0.085, 0.680, 0.530)` as any, - Cubic = `cubic-bezier(0.550, 0.055, 0.675, 0.190)` as any, - Quart = `cubic-bezier(0.895, 0.030, 0.685, 0.220)` as any, - Quint = `cubic-bezier(0.755, 0.050, 0.855, 0.060)` as any, - Sine = `cubic-bezier(0.470, 0.000, 0.745, 0.715)` as any, - Expo = `cubic-bezier(0.950, 0.050, 0.795, 0.035)` as any, - Circ = `cubic-bezier(0.600, 0.040, 0.980, 0.335)` as any, - Back = `cubic-bezier(0.600, -0.280, 0.735, 0.045)` as any -} - -enum EaseOut { - Quad = `cubic-bezier(0.250, 0.460, 0.450, 0.940)` as any, - Cubic = `cubic-bezier(0.215, 0.610, 0.355, 1.000)` as any, - Quart = `cubic-bezier(0.165, 0.840, 0.440, 1.000)` as any, - Quint = `cubic-bezier(0.230, 1.000, 0.320, 1.000)` as any, - Sine = `cubic-bezier(0.390, 0.575, 0.565, 1.000)` as any, - Expo = `cubic-bezier(0.190, 1.000, 0.220, 1.000)` as any, - Circ = `cubic-bezier(0.075, 0.820, 0.165, 1.000)` as any, - Back = `cubic-bezier(0.175, 0.885, 0.320, 1.275)` as any -} - -enum EaseInOut { - Quad = `cubic-bezier(0.455, 0.030, 0.515, 0.955)` as any, - Cubic = `cubic-bezier(0.645, 0.045, 0.355, 1.000)` as any, - Quart = `cubic-bezier(0.770, 0.000, 0.175, 1.000)` as any, - Quint = `cubic-bezier(0.860, 0.000, 0.070, 1.000)` as any, - Sine = `cubic-bezier(0.445, 0.050, 0.550, 0.950)` as any, - Expo = `cubic-bezier(1.000, 0.000, 0.000, 1.000)` as any, - Circ = `cubic-bezier(0.785, 0.135, 0.150, 0.860)` as any, - Back = `cubic-bezier(0.680, -0.550, 0.265, 1.550)` as any -} - -export { EaseIn, EaseOut, EaseInOut }; diff --git a/projects/igniteui-angular/src/lib/animations/flip/index.ts b/projects/igniteui-angular/src/lib/animations/flip/index.ts deleted file mode 100644 index 8521dfcc67b..00000000000 --- a/projects/igniteui-angular/src/lib/animations/flip/index.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { - animate, - animation, - AnimationMetadata, - AnimationReferenceMetadata, - keyframes, - style -} from '@angular/animations'; -import { EaseOut } from '../easings'; -import { IAnimationParams } from '../interface'; - -const baseRecipe: AnimationMetadata[] = [ - style({ - backfaceVisibility: 'hidden', - transformStyle: 'preserve-3d' - }), - animate( - `{{duration}} {{delay}} {{easing}}`, - keyframes([ - style({ - offset: 0, - transform: `translateZ({{startDistance}}) - rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{startAngle}}deg)` - }), - style({ - offset: 1, - transform: `translateZ({{endDistance}}) - rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{endAngle}}deg)` - }) - ]) - ) -]; - -const baseParams: IAnimationParams = { - delay: '0s', - duration: '600ms', - easing: EaseOut.Quad, - endAngle: 180, - endDistance: '0px', - rotateX: 1, - rotateY: 0, - rotateZ: 0, - startAngle: 0, - startDistance: '0px' -}; - -const flipTop: AnimationReferenceMetadata = animation(baseRecipe, { - params: { - ...baseParams - } -}); - -const flipBottom: AnimationReferenceMetadata = animation(baseRecipe, { - params: { - ...baseParams, - endAngle: -180 - } -}); - -const flipLeft: AnimationReferenceMetadata = animation(baseRecipe, { - params: { - ...baseParams, - rotateX: 0, - rotateY: 1 - } -}); - -const flipRight: AnimationReferenceMetadata = animation(baseRecipe, { - params: { - ...baseParams, - endAngle: -180, - rotateX: 0, - rotateY: 1 - } -}); - -const flipHorFwd: AnimationReferenceMetadata = animation(baseRecipe, { - params: { - ...baseParams, - endDistance: '170px' - } -}); - -const flipHorBck: AnimationReferenceMetadata = animation(baseRecipe, { - params: { - ...baseParams, - endDistance: '-170px' - } -}); - -const flipVerFwd: AnimationReferenceMetadata = animation(baseRecipe, { - params: { - ...baseParams, - endDistance: '170px', - rotateX: 0, - rotateY: 1 - } -}); - -const flipVerBck: AnimationReferenceMetadata = animation(baseRecipe, { - params: { - ...baseParams, - endDistance: '-170px', - rotateX: 0, - rotateY: 1 - } -}); - -export { - flipTop, - flipRight, - flipBottom, - flipLeft, - flipHorFwd, - flipHorBck, - flipVerFwd, - flipVerBck -}; diff --git a/projects/igniteui-angular/src/lib/animations/main.ts b/projects/igniteui-angular/src/lib/animations/main.ts deleted file mode 100644 index fe73f29e0af..00000000000 --- a/projects/igniteui-angular/src/lib/animations/main.ts +++ /dev/null @@ -1,9 +0,0 @@ -export * from './interface'; -export * from './fade/index'; -export * from './flip/index'; -export * from './rotate/index'; -export * from './misc/index'; -export * from './scale/index'; -export * from './slide/index'; -export * from './swing/index'; -export * from './grow/index'; diff --git a/projects/igniteui-angular/src/lib/animations/misc/index.ts b/projects/igniteui-angular/src/lib/animations/misc/index.ts deleted file mode 100644 index d9675ff1e06..00000000000 --- a/projects/igniteui-angular/src/lib/animations/misc/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './shake'; -export * from './pulsate'; diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts index 0ef3a8b89d0..47cc7abc949 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts @@ -13,8 +13,9 @@ import { QueryList, OnDestroy } from '@angular/core'; +import { NgIf, NgTemplateOutlet, NgStyle, NgFor, DatePipe } from '@angular/common'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { fadeIn, scaleInCenter, slideInLeft, slideInRight } from '../animations/main'; + import { IgxCalendarHeaderTemplateDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarScrollMonthDirective } from './calendar.directives'; import { ICalendarDate, IgxCalendarView, ScrollMonth, monthRange } from './calendar'; import { IgxMonthPickerBaseDirective } from './month-picker/month-picker-base'; @@ -26,7 +27,7 @@ import { takeUntil, debounce, skipLast, switchMap } from 'rxjs/operators'; import { IViewChangingEventArgs } from './days-view/days-view.interface'; import { IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar } from './months-view.pipe'; import { IgxIconComponent } from '../icon/icon.component'; -import { NgIf, NgTemplateOutlet, NgStyle, NgFor, DatePipe } from '@angular/common'; +import { fadeIn, scaleInCenter, slideInLeft, slideInRight } from 'igniteui-angular/animations'; let NEXT_ID = 0; diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts index e714a338f13..46239183e87 100644 --- a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts @@ -10,13 +10,13 @@ import { NgIf, NgStyle } from '@angular/common'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { trigger, transition, useAnimation } from '@angular/animations'; -import { fadeIn, scaleInCenter, slideInLeft, slideInRight } from '../../animations/main'; import { IgxMonthsViewComponent } from '../months-view/months-view.component'; import { IgxMonthPickerBaseDirective } from './month-picker-base'; import { IgxYearsViewComponent } from '../years-view/years-view.component'; import { IgxDaysViewComponent } from '../days-view/days-view.component'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxCalendarView, ScrollMonth } from '../calendar'; +import { fadeIn, scaleInCenter, slideInLeft, slideInRight } from 'igniteui-angular/animations'; let NEXT_ID = 0; @Component({ diff --git a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts index a98910b22ba..43ec3edc560 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts @@ -1,10 +1,9 @@ import { AnimationReferenceMetadata, useAnimation } from '@angular/animations'; import { ChangeDetectorRef, EventEmitter, Inject } from '@angular/core'; -import { fadeIn } from '../animations/fade'; -import { slideInLeft } from '../animations/slide'; import { mkenum } from '../core/utils'; import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; import { AnimationPlayer, AnimationService } from '../services/animation/animation'; +import { fadeIn, slideInLeft } from 'igniteui-angular/animations'; export enum Direction { NONE, NEXT, PREV } @@ -102,9 +101,9 @@ export abstract class IgxCarouselComponentBase { duration = this.animationPosition ? this.animationPosition * this.defaultAnimationDuration : this.defaultAnimationDuration; } + const trans = this.animationPosition ? this.animationPosition * 100 : 100; switch (this.animationType) { case HorizontalAnimationType.slide: - const trans = this.animationPosition ? this.animationPosition * 100 : 100; return { enterAnimation: useAnimation(slideInLeft, { diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index 1cbff35a1ad..c958379bb4b 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -1,28 +1,7 @@ -import { AnimationReferenceMetadata } from '@angular/animations'; import { CurrencyPipe, formatDate as _formatDate, isPlatformBrowser } from '@angular/common'; import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; import { mergeWith } from 'lodash-es'; import { Observable } from 'rxjs'; -import { - blink, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, - flipVerBck, flipVerFwd, growVerIn, growVerOut, heartbeat, pulsateBck, pulsateFwd, rotateInBl, - rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, - rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, - rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, - rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, - rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, - scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, - scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, - scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, - scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, - scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, - shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, - slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, - slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, - swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, - swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, - swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd -} from '../animations/main'; import { setImmediate } from './setImmediate'; import { isDevMode } from '@angular/core'; @@ -579,259 +558,6 @@ export const yieldingLoop = (count: number, chunkSize: number, callback: (index: export const isConstructor = (ref: any) => typeof ref === 'function' && Boolean(ref.prototype) && Boolean(ref.prototype.constructor); -export class AnimationUtil { - private static _instance: AnimationUtil; - - private oppositeAnimation: Map = new Map([ - [fadeIn, fadeIn], - [fadeOut, fadeOut], - [flipTop, flipBottom], - [flipBottom, flipTop], - [flipRight, flipLeft], - [flipLeft, flipRight], - [flipHorFwd, flipHorBck], - [flipHorBck, flipHorFwd], - [flipVerFwd, flipVerBck], - [flipVerBck, flipVerFwd], - [growVerIn, growVerIn], - [growVerOut, growVerOut], - [heartbeat, heartbeat], - [pulsateFwd, pulsateBck], - [pulsateBck, pulsateFwd], - [blink, blink], - [shakeHor, shakeHor], - [shakeVer, shakeVer], - [shakeTop, shakeTop], - [shakeBottom, shakeBottom], - [shakeRight, shakeRight], - [shakeLeft, shakeLeft], - [shakeCenter, shakeCenter], - [shakeTr, shakeTr], - [shakeBr, shakeBr], - [shakeBl, shakeBl], - [shakeTl, shakeTl], - [rotateInCenter, rotateInCenter], - [rotateOutCenter, rotateOutCenter], - [rotateInTop, rotateInBottom], - [rotateOutTop, rotateOutBottom], - [rotateInRight, rotateInLeft], - [rotateOutRight, rotateOutLeft], - [rotateInLeft, rotateInRight], - [rotateOutLeft, rotateOutRight], - [rotateInBottom, rotateInTop], - [rotateOutBottom, rotateOutTop], - [rotateInTr, rotateInBl], - [rotateOutTr, rotateOutBl], - [rotateInBr, rotateInTl], - [rotateOutBr, rotateOutTl], - [rotateInBl, rotateInTr], - [rotateOutBl, rotateOutTr], - [rotateInTl, rotateInBr], - [rotateOutTl, rotateOutBr], - [rotateInDiagonal1, rotateInDiagonal1], - [rotateOutDiagonal1, rotateOutDiagonal1], - [rotateInDiagonal2, rotateInDiagonal2], - [rotateOutDiagonal2, rotateOutDiagonal2], - [rotateInHor, rotateInHor], - [rotateOutHor, rotateOutHor], - [rotateInVer, rotateInVer], - [rotateOutVer, rotateOutVer], - [scaleInTop, scaleInBottom], - [scaleOutTop, scaleOutBottom], - [scaleInRight, scaleInLeft], - [scaleOutRight, scaleOutLeft], - [scaleInBottom, scaleInTop], - [scaleOutBottom, scaleOutTop], - [scaleInLeft, scaleInRight], - [scaleOutLeft, scaleOutRight], - [scaleInCenter, scaleInCenter], - [scaleOutCenter, scaleOutCenter], - [scaleInTr, scaleInBl], - [scaleOutTr, scaleOutBl], - [scaleInBr, scaleInTl], - [scaleOutBr, scaleOutTl], - [scaleInBl, scaleInTr], - [scaleOutBl, scaleOutTr], - [scaleInTl, scaleInBr], - [scaleOutTl, scaleOutBr], - [scaleInVerTop, scaleInVerBottom], - [scaleOutVerTop, scaleOutVerBottom], - [scaleInVerBottom, scaleInVerTop], - [scaleOutVerBottom, scaleOutVerTop], - [scaleInVerCenter, scaleInVerCenter], - [scaleOutVerCenter, scaleOutVerCenter], - [scaleInHorCenter, scaleInHorCenter], - [scaleOutHorCenter, scaleOutHorCenter], - [scaleInHorLeft, scaleInHorRight], - [scaleOutHorLeft, scaleOutHorRight], - [scaleInHorRight, scaleInHorLeft], - [scaleOutHorRight, scaleOutHorLeft], - [slideInTop, slideInBottom], - [slideOutTop, slideOutBottom], - [slideInRight, slideInLeft], - [slideOutRight, slideOutLeft], - [slideInBottom, slideInTop], - [slideOutBottom, slideOutTop], - [slideInLeft, slideInRight], - [slideOutLeft, slideOutRight], - [slideInTr, slideInBl], - [slideOutTr, slideOutBl], - [slideInBr, slideInTl], - [slideOutBr, slideOutTl], - [slideInBl, slideInTr], - [slideOutBl, slideOutTr], - [slideInTl, slideInBr], - [slideOutTl, slideOutBr], - [swingInTopFwd, swingInBottomFwd], - [swingOutTopFwd, swingOutBottomFwd], - [swingInRightFwd, swingInLeftFwd], - [swingOutRightFwd, swingOutLefttFwd], - [swingInLeftFwd, swingInRightFwd], - [swingOutLefttFwd, swingOutRightFwd], - [swingInBottomFwd, swingInTopFwd], - [swingOutBottomFwd, swingOutTopFwd], - [swingInTopBck, swingInBottomBck], - [swingOutTopBck, swingOutBottomBck], - [swingInRightBck, swingInLeftBck], - [swingOutRightBck, swingOutLeftBck], - [swingInBottomBck, swingInTopBck], - [swingOutBottomBck, swingOutTopBck], - [swingInLeftBck, swingInRightBck], - [swingOutLeftBck, swingOutRightBck], - ]); - - private horizontalAnimations: AnimationReferenceMetadata[] = [ - flipRight, - flipLeft, - flipVerFwd, - flipVerBck, - rotateInRight, - rotateOutRight, - rotateInLeft, - rotateOutLeft, - rotateInTr, - rotateOutTr, - rotateInBr, - rotateOutBr, - rotateInBl, - rotateOutBl, - rotateInTl, - rotateOutTl, - scaleInRight, - scaleOutRight, - scaleInLeft, - scaleOutLeft, - scaleInTr, - scaleOutTr, - scaleInBr, - scaleOutBr, - scaleInBl, - scaleOutBl, - scaleInTl, - scaleOutTl, - scaleInHorLeft, - scaleOutHorLeft, - scaleInHorRight, - scaleOutHorRight, - slideInRight, - slideOutRight, - slideInLeft, - slideOutLeft, - slideInTr, - slideOutTr, - slideInBr, - slideOutBr, - slideInBl, - slideOutBl, - slideInTl, - slideOutTl, - swingInRightFwd, - swingOutRightFwd, - swingInLeftFwd, - swingOutLefttFwd, - swingInRightBck, - swingOutRightBck, - swingInLeftBck, - swingOutLeftBck, - ]; - - private verticalAnimations: AnimationReferenceMetadata[] = [ - flipTop, - flipBottom, - flipHorFwd, - flipHorBck, - growVerIn, - growVerOut, - rotateInTop, - rotateOutTop, - rotateInBottom, - rotateOutBottom, - rotateInTr, - rotateOutTr, - rotateInBr, - rotateOutBr, - rotateInBl, - rotateOutBl, - rotateInTl, - rotateOutTl, - scaleInTop, - scaleOutTop, - scaleInBottom, - scaleOutBottom, - scaleInTr, - scaleOutTr, - scaleInBr, - scaleOutBr, - scaleInBl, - scaleOutBl, - scaleInTl, - scaleOutTl, - scaleInVerTop, - scaleOutVerTop, - scaleInVerBottom, - scaleOutVerBottom, - slideInTop, - slideOutTop, - slideInBottom, - slideOutBottom, - slideInTr, - slideOutTr, - slideInBr, - slideOutBr, - slideInBl, - slideOutBl, - slideInTl, - slideOutTl, - swingInTopFwd, - swingOutTopFwd, - swingInBottomFwd, - swingOutBottomFwd, - swingInTopBck, - swingOutTopBck, - swingInBottomBck, - swingOutBottomBck, - ]; - - private constructor() { } - - public static instance() { - return this._instance || (this._instance = new this()); - } - - public reverseAnimationResolver(animation: AnimationReferenceMetadata): AnimationReferenceMetadata { - return this.oppositeAnimation.get(animation) ?? animation; - } - - - public isHorizontalAnimation(animation: AnimationReferenceMetadata): boolean { - return this.horizontalAnimations.includes(animation); - } - - public isVerticalAnimation(animation: AnimationReferenceMetadata): boolean { - return this.verticalAnimations.includes(animation); - } -} - /** * Similar to Angular's formatDate. However it will not throw on `undefined | null | ''` instead * coalescing to an empty string. diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index 02e99dc9327..fbf462426ff 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -43,7 +43,7 @@ import { } from '../input-group/public_api'; import { fromEvent, Subscription, noop, MonoTypeOperatorFunction } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; -import { fadeIn, fadeOut } from '../animations/fade'; + import { DateRangeDescriptor, DateRangeType } from '../core/dates/dateRange'; import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density'; import { DatePickerResourceStringsEN, IDatePickerResourceStrings } from '../core/i18n/date-picker-resources'; @@ -67,6 +67,7 @@ import { IDatePickerValidationFailedEventArgs } from './date-picker.common'; import { IgxIconComponent } from '../icon/icon.component'; import { IgxTextSelectionDirective } from '../directives/text-selection/text-selection.directive'; import { igxI18N } from '../core/i18n/resources'; +import { fadeIn, fadeOut } from 'igniteui-angular/animations'; let NEXT_ID = 0; diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index b0ffba712ea..f7eabb5cc15 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -13,7 +13,6 @@ import { import { fromEvent, merge, MonoTypeOperatorFunction, noop, Subscription } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; -import { fadeIn, fadeOut } from '../animations/fade'; import { CalendarSelection, IgxCalendarComponent } from '../calendar/public_api'; import { DateRangeType } from '../core/dates'; import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density'; @@ -36,6 +35,7 @@ import { DateRange, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, I import { IgxPrefixDirective } from '../directives/prefix/prefix.directive'; import { IgxIconComponent } from '../icon/icon.component'; import { igxI18N } from '../core/i18n/resources'; +import { fadeIn, fadeOut } from 'igniteui-angular/animations'; const SingleInputDatesConcatenationString = ' - '; diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index 8cc1ff97f28..a96128bd851 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -19,10 +19,10 @@ import { IgxButtonType, IgxButtonDirective } from '../directives/button/button.d import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; import { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from '../services/public_api'; -import {fadeIn, fadeOut} from '../animations/fade/index'; import { IgxFocusDirective } from '../directives/focus/focus.directive'; import { IgxFocusTrapDirective } from '../directives/focus-trap/focus-trap.directive'; import { CancelableEventArgs, IBaseEventArgs } from '../core/utils'; +import { fadeIn, fadeOut } from 'igniteui-angular/animations'; let DIALOG_ID = 0; /** diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts index 2ab97413d0f..d65b30aef59 100644 --- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts @@ -2,14 +2,13 @@ import { useAnimation } from '@angular/animations'; import { Directive, OnInit, OnDestroy, Output, ElementRef, Optional, ViewContainerRef, HostListener, Input, EventEmitter } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { fadeOut } from '../../animations/fade'; -import { scaleInCenter } from '../../animations/scale'; import { IgxNavigationService } from '../../core/navigation'; import { IBaseEventArgs } from '../../core/utils'; import { AutoPositionStrategy, HorizontalAlignment, PositionSettings } from '../../services/public_api'; import { IgxToggleActionDirective } from '../toggle/toggle.directive'; import { IgxTooltipComponent } from './tooltip.component'; import { IgxTooltipDirective } from './tooltip.directive'; +import { fadeOut, scaleInCenter } from 'igniteui-angular/animations'; export interface ITooltipShowEventArgs extends IBaseEventArgs { target: IgxTooltipTargetDirective; diff --git a/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.spec.ts b/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.spec.ts index 1407db53faa..c01a57ec3ec 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.spec.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.spec.ts @@ -2,11 +2,11 @@ import { Inject } from '@angular/core'; import { TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { noop } from 'rxjs'; -import { growVerIn, growVerOut } from '../animations/main'; import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; import { AnimationService } from '../services/animation/animation'; import { configureTestSuite } from '../test-utils/configure-suite'; import { ANIMATION_TYPE, ToggleAnimationPlayer } from './toggle-animation-component'; +import { growVerIn, growVerOut } from 'igniteui-angular/animations'; class MockTogglePlayer extends ToggleAnimationPlayer { constructor(@Inject(IgxAngularAnimationService) animationService: AnimationService) { diff --git a/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts b/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts index a13d86af095..f9f5064448d 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts @@ -2,9 +2,10 @@ import { AnimationReferenceMetadata } from '@angular/animations'; import { Directive, ElementRef, EventEmitter, Inject, OnDestroy } from '@angular/core'; import { noop, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { growVerIn, growVerOut } from '../animations/grow'; + import { IgxAngularAnimationService } from '../services/animation/angular-animation-service'; import { AnimationPlayer, AnimationService } from '../services/animation/animation'; +import { growVerIn, growVerOut } from 'igniteui-angular/animations'; /**@hidden @internal */ export interface ToggleAnimationSettings { diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 90b59a3a1c1..4ff911f5f22 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -12,7 +12,6 @@ import { IColumnResizeEventArgs, IFilteringEventArgs } from '../common/events'; import { OverlayCancelableEventArgs, OverlaySettings, VerticalAlignment } from '../../services/overlay/utilities'; import { IgxOverlayService } from '../../services/overlay/overlay'; import { useAnimation } from '@angular/animations'; -import { fadeIn } from '../../animations/main'; import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy'; import { IgxIconService } from '../../icon/icon.service'; import { editor, pinLeft, unpinLeft } from '@igniteui/material-icons-extended'; @@ -20,6 +19,7 @@ import { ExpressionUI, generateExpressionsList } from './excel-style/common'; import { ColumnType, GridType } from '../common/grid.interface'; import { formatDate } from '../../core/utils'; import { ExcelStylePositionStrategy } from './excel-style/excel-style-position-strategy'; +import { fadeIn } from 'igniteui-angular/animations'; /** * @hidden diff --git a/projects/igniteui-angular/src/lib/grids/grid.common.ts b/projects/igniteui-angular/src/lib/grids/grid.common.ts index be30b3d87ea..4ffbd40662b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid.common.ts +++ b/projects/igniteui-angular/src/lib/grids/grid.common.ts @@ -1,8 +1,8 @@ import { Directive } from '@angular/core'; import { ConnectedPositioningStrategy } from '../services/public_api'; import { VerticalAlignment, PositionSettings, Point } from '../services/overlay/utilities'; -import { scaleInVerBottom, scaleInVerTop } from '../animations/main'; import { IgxForOfSyncService } from '../directives/for-of/for_of.sync.service'; +import { scaleInVerBottom, scaleInVerTop } from 'igniteui-angular/animations'; @Directive({ diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts index 1065f2147f6..f763649fa94 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts @@ -9,7 +9,6 @@ import { Renderer2 } from "@angular/core"; import { first } from "rxjs/operators"; -import { fadeIn, fadeOut } from "../../animations/fade"; import { DisplayDensity } from "../../core/density"; import { SortingDirection } from "../../data-operations/sorting-strategy"; import { IDragBaseEventArgs, IDragGhostBaseEventArgs, IDragMoveEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective, IgxDragDirective, IgxDragHandleDirective } from "../../directives/drag-drop/drag-drop.directive"; @@ -47,6 +46,7 @@ import { IgxInputDirective } from "../../directives/input/input.directive"; import { IgxPrefixDirective } from "../../directives/prefix/prefix.directive"; import { IgxIconComponent } from "../../icon/icon.component"; import { IgxInputGroupComponent } from "../../input-group/input-group.component"; +import { fadeIn, fadeOut } from 'igniteui-angular/animations'; interface IDataSelectorPanel { name: string; diff --git a/projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts b/projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts index 43012cf644b..ad9b571de91 100644 --- a/projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts +++ b/projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts @@ -1,10 +1,11 @@ import { VerticalAlignment, HorizontalAlignment, PositionSettings, Size, Util, ConnectedFit, Point } from '../services/overlay/utilities'; import { IPositionStrategy } from '../services/overlay/position'; -import { fadeOut, fadeIn } from '../animations/main'; + import { IgxSelectBase } from './select.common'; import { BaseFitPositionStrategy } from '../services/overlay/position/base-fit-position-strategy'; import { PlatformUtil } from '../core/utils'; import { Optional } from '@angular/core'; +import { fadeIn, fadeOut } from 'igniteui-angular/animations'; /** @hidden @internal */ export class SelectPositioningStrategy extends BaseFitPositionStrategy implements IPositionStrategy { diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts index 53d39124e3c..781d399d3df 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts @@ -17,23 +17,7 @@ import { } from '@angular/core'; import { fromEvent, Subject, Subscription } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; -import { - fadeIn, - fadeOut, - IAnimationParams, - scaleInHorLeft, - scaleInHorRight, - scaleInVerBottom, - scaleInVerTop, - scaleOutHorLeft, - scaleOutHorRight, - scaleOutVerBottom, - scaleOutVerTop, - slideInBottom, - slideInTop, - slideOutBottom, - slideOutTop -} from '../../animations/main'; + import { PlatformUtil } from '../../core/utils'; import { IgxOverlayOutletDirective } from '../../directives/toggle/toggle.directive'; import { IgxAngularAnimationService } from '../animation/angular-animation-service'; @@ -60,6 +44,7 @@ import { RelativePositionStrategy, VerticalAlignment } from './utilities'; +import { fadeIn, fadeOut, IAnimationParams, scaleInHorLeft, scaleInHorRight, scaleInVerBottom, scaleInVerTop, scaleOutHorLeft, scaleOutHorRight, scaleOutVerBottom, scaleOutVerTop, slideInBottom, slideInTop, slideOutBottom, slideOutTop } from 'igniteui-angular/animations'; /** * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-main) diff --git a/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts index be2f0757f57..9f7f6b05dae 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts @@ -1,7 +1,7 @@ import { AnimationReferenceMetadata } from '@angular/animations'; -import { AnimationUtil } from '../../../core/utils'; import { ConnectedFit, HorizontalAlignment, VerticalAlignment } from './../utilities'; import { BaseFitPositionStrategy } from './base-fit-position-strategy'; +import { AnimationUtil } from 'igniteui-angular/animations'; /** * Positions the element as in **Connected** positioning strategy and re-positions the element in diff --git a/projects/igniteui-angular/src/lib/services/overlay/position/connected-positioning-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/position/connected-positioning-strategy.ts index ab25b99cd9c..7cbf605d177 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/position/connected-positioning-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/position/connected-positioning-strategy.ts @@ -1,4 +1,4 @@ -import { scaleInVerTop, scaleOutVerTop } from '../../../animations/main'; +import { scaleInVerTop, scaleOutVerTop } from 'igniteui-angular/animations'; import { ConnectedFit } from '../utilities'; import { HorizontalAlignment, diff --git a/projects/igniteui-angular/src/lib/services/overlay/position/global-position-strategy.ts b/projects/igniteui-angular/src/lib/services/overlay/position/global-position-strategy.ts index 64b742e1868..791e2485926 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/position/global-position-strategy.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/position/global-position-strategy.ts @@ -1,4 +1,4 @@ -import { fadeIn, fadeOut } from '../../../animations/main'; +import { fadeIn, fadeOut } from 'igniteui-angular/animations'; import { HorizontalAlignment, PositionSettings, Util, VerticalAlignment } from './../utilities'; import { IPositionStrategy } from './IPositionStrategy'; diff --git a/projects/igniteui-angular/src/lib/snackbar/snackbar.component.ts b/projects/igniteui-angular/src/lib/snackbar/snackbar.component.ts index 1ddfc4810f9..f1485c8820f 100644 --- a/projects/igniteui-angular/src/lib/snackbar/snackbar.component.ts +++ b/projects/igniteui-angular/src/lib/snackbar/snackbar.component.ts @@ -9,11 +9,11 @@ import { Output } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; -import { fadeIn, fadeOut } from '../animations/main'; import { ContainerPositionStrategy, GlobalPositionStrategy, HorizontalAlignment, PositionSettings, VerticalAlignment } from '../services/public_api'; import { IgxNotificationsDirective } from '../directives/notification/notifications.directive'; import { ToggleViewEventArgs } from '../directives/toggle/toggle.directive'; +import { fadeIn, fadeOut } from 'igniteui-angular/animations'; let NEXT_ID = 0; /** diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts index a8c7572882a..3945c292377 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts @@ -7,8 +7,6 @@ import { } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { growVerIn, growVerOut } from '../animations/grow'; -import { fadeIn } from '../animations/main'; import { HorizontalAnimationType, IgxCarouselComponentBase } from '../carousel/carousel-base'; import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component'; @@ -25,6 +23,7 @@ import { IgxStepInvalidIndicatorDirective } from './stepper.directive'; import { IgxStepperService } from './stepper.service'; +import { fadeIn, growVerIn, growVerOut } from 'igniteui-angular/animations'; // TODO: common interface between IgxCarouselComponentBase and ToggleAnimationPlayer? diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.ts b/projects/igniteui-angular/src/lib/toast/toast.component.ts index 3a49e4a7479..34b68637c6e 100644 --- a/projects/igniteui-angular/src/lib/toast/toast.component.ts +++ b/projects/igniteui-angular/src/lib/toast/toast.component.ts @@ -22,7 +22,7 @@ import { import { IgxNotificationsDirective } from '../directives/notification/notifications.directive'; import { ToggleViewEventArgs } from '../directives/toggle/toggle.directive'; import { useAnimation } from '@angular/animations'; -import { fadeIn, fadeOut } from '../animations/fade'; +import { fadeIn, fadeOut } from 'igniteui-angular/animations'; let NEXT_ID = 0; diff --git a/projects/igniteui-angular/src/lib/tree/tree.component.ts b/projects/igniteui-angular/src/lib/tree/tree.component.ts index a80a5d15e16..aa100463ea4 100644 --- a/projects/igniteui-angular/src/lib/tree/tree.component.ts +++ b/projects/igniteui-angular/src/lib/tree/tree.component.ts @@ -6,7 +6,6 @@ import { import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { growVerIn, growVerOut } from '../animations/grow'; import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density'; import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component'; import { @@ -17,6 +16,7 @@ import { IgxTreeNavigationService } from './tree-navigation.service'; import { IgxTreeNodeComponent } from './tree-node/tree-node.component'; import { IgxTreeSelectionService } from './tree-selection.service'; import { IgxTreeService } from './tree.service'; +import { growVerIn, growVerOut } from 'igniteui-angular/animations'; /** * @hidden @internal diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts index 76faface816..d836c5e51de 100644 --- a/projects/igniteui-angular/src/public_api.ts +++ b/projects/igniteui-angular/src/public_api.ts @@ -4,8 +4,9 @@ /** * Animations + * MOVED TO igniteui-angular/animations */ -export * from './lib/animations/main'; +//export * from './lib/animations/main'; /** * Directives diff --git a/tsconfig.json b/tsconfig.json index 388f14347da..39fd22797c4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,6 +22,9 @@ "igniteui-angular": [ "projects/igniteui-angular/src/public_api.ts" ], + "igniteui-angular/*": [ + "projects/igniteui-angular/*" + ], "igniteui-angular-i18n": [ "projects/igniteui-angular-i18n/src/index.ts" ] From a28c50fc7ae2eb21e59df4980e7caaaa9ab5903d Mon Sep 17 00:00:00 2001 From: kdinev Date: Tue, 26 Sep 2023 15:38:42 +0300 Subject: [PATCH 2/9] refactor(animations): more changes --- .../animations/src/grow/index.ts | 33 +- .../igniteui-angular/animations/src/main.ts | 31 +- .../animations/src/rotate/index.ts | 404 +++++++++++---- .../animations/src/scale/index.ts | 475 +++++++++++------- 4 files changed, 622 insertions(+), 321 deletions(-) diff --git a/projects/igniteui-angular/animations/src/grow/index.ts b/projects/igniteui-angular/animations/src/grow/index.ts index 540c6d62adc..d94aafa5ba8 100644 --- a/projects/igniteui-angular/animations/src/grow/index.ts +++ b/projects/igniteui-angular/animations/src/grow/index.ts @@ -1,16 +1,15 @@ import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations'; -import { EaseIn, EaseOut } from '../easings'; -import { IAnimationParams } from '../interface'; +import { EaseOut } from '../easings'; const base: AnimationMetadata[] = [ - style({ + /*@__PURE__*/style({ opacity: `{{ startOpacity }}`, height: `{{ startHeight }}`, paddingBlock: `{{ startPadding }}` }), - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - style({ + /*@__PURE__*/style({ opacity: `{{ endOpacity }}`, height: `{{ endHeight }}`, paddingBlock: `{{ endPadding }}` @@ -18,21 +17,10 @@ const base: AnimationMetadata[] = [ ) ]; -const baseParams: IAnimationParams = { - delay: '0s', - duration: '350ms', - easing: EaseIn.Quad, - startOpacity: 0, - endOpacity: 1, - startHeight: '', - endHeight: '', - startPadding: '', - endPadding: '', -}; - -const growVerIn: AnimationReferenceMetadata = animation(base, { +export const growVerIn: AnimationReferenceMetadata = /*@__PURE__*/animation(base, { params: { - ...baseParams, + delay: '0s', + duration: '350ms', easing: EaseOut.Quad, startOpacity: 0, endOpacity: 1, @@ -43,9 +31,10 @@ const growVerIn: AnimationReferenceMetadata = animation(base, { } }); -const growVerOut: AnimationReferenceMetadata = animation(base, { +export const growVerOut: AnimationReferenceMetadata = /*@__PURE__*/animation(base, { params: { - ...baseParams, + delay: '0s', + duration: '350ms', easing: EaseOut.Quad, startOpacity: 1, endOpacity: 0, @@ -55,5 +44,3 @@ const growVerOut: AnimationReferenceMetadata = animation(base, { endPadding: '0px' } }); - -export { growVerIn, growVerOut }; diff --git a/projects/igniteui-angular/animations/src/main.ts b/projects/igniteui-angular/animations/src/main.ts index b50c7090a21..631ec89dafc 100644 --- a/projects/igniteui-angular/animations/src/main.ts +++ b/projects/igniteui-angular/animations/src/main.ts @@ -11,9 +11,36 @@ export { flipVerFwd, flipVerBck } from './flip/index'; -export * from './rotate/index'; +export { + rotateInCenter, + rotateInTop, + rotateInRight, + rotateInLeft, + rotateInBottom, + rotateInTr, + rotateInBr, + rotateInBl, + rotateInTl, + rotateInDiagonal1, + rotateInDiagonal2, + rotateInHor, + rotateInVer, + rotateOutCenter, + rotateOutTop, + rotateOutRight, + rotateOutLeft, + rotateOutBottom, + rotateOutTr, + rotateOutBr, + rotateOutBl, + rotateOutTl, + rotateOutDiagonal1, + rotateOutDiagonal2, + rotateOutHor, + rotateOutVer +} from './rotate/index'; export * from './misc/index'; export * from './scale/index'; export * from './slide/index'; export * from './swing/index'; -export * from './grow/index'; +export { growVerIn, growVerOut } from './grow/index'; diff --git a/projects/igniteui-angular/animations/src/rotate/index.ts b/projects/igniteui-angular/animations/src/rotate/index.ts index 1cd07ab4e87..504d7e0e9d7 100644 --- a/projects/igniteui-angular/animations/src/rotate/index.ts +++ b/projects/igniteui-angular/animations/src/rotate/index.ts @@ -1,16 +1,15 @@ import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations'; import { EaseIn, EaseOut } from '../easings'; -import { IAnimationParams } from '../interface'; const baseRecipe: AnimationMetadata[] = [ - style({ + /*@__PURE__*/style({ opacity: `{{startOpacity}}`, transform: `rotate3d({{rotateX}},{{rotateY}},{{rotateZ}},{{startAngle}}deg)`, transformOrigin: `{{xPos}} {{yPos}}` }), - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - style({ + /*@__PURE__*/style({ offset: 0, opacity: `{{endOpacity}}`, transform: `rotate3d({{rotateX}},{{rotateY}},{{rotateZ}},{{endAngle}}deg)`, @@ -19,253 +18,444 @@ const baseRecipe: AnimationMetadata[] = [ ) ]; -const baseInParams: IAnimationParams = { - delay: '0s', - duration: '600ms', - easing: EaseOut.Quad, - endAngle: 0, - endOpacity: 1, - rotateX: 0, - rotateY: 0, - rotateZ: 1, - startAngle: -360, - startOpacity: 0, - xPos: 'center', - yPos: 'center' -}; - -const baseOutParams: IAnimationParams = { - ...baseInParams, - easing: EaseIn.Quad, - endOpacity: 0, - startOpacity: 1 -}; - -const rotateInCenter: AnimationReferenceMetadata = animation(baseRecipe, { - params: { ...baseInParams } +export const rotateInCenter: AnimationReferenceMetadata = animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + startOpacity: 0, + xPos: 'center', + yPos: 'center' + } }); -const rotateOutCenter: AnimationReferenceMetadata = animation(baseRecipe, { - params: { ...baseOutParams } +export const rotateOutCenter: AnimationReferenceMetadata = animation(baseRecipe, { + params: { + delay: '0s', + duration: '600ms', + endAngle: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + xPos: 'center', + yPos: 'center', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1 + } }); -const rotateInTop: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInTop: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + startOpacity: 0, + yPos: 'center', xPos: 'top' } }); -const rotateOutTop: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutTop: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + yPos: 'center', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, xPos: 'top' } }); -const rotateInRight: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInRight: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + startOpacity: 0, + yPos: 'center', xPos: 'right' } }); -const rotateOutRight: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutRight: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + yPos: 'center', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, xPos: 'right' } }); -const rotateInBottom: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInBottom: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + startOpacity: 0, + yPos: 'center', xPos: 'bottom' } }); -const rotateOutBottom: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutBottom: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + yPos: 'center', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, xPos: 'bottom' } }); -const rotateInLeft: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInLeft: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + startOpacity: 0, + yPos: 'center', xPos: 'left' } }); -const rotateOutLeft: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutLeft: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + yPos: 'center', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, xPos: 'left' } }); -const rotateInTr: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInTr: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + startOpacity: 0, xPos: 'right', yPos: 'top' } }); -const rotateOutTr: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutTr: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, xPos: 'right', yPos: 'top' } }); -const rotateInBr: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInBr: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + startOpacity: 0, xPos: 'right', yPos: 'bottom' } }); -const rotateOutBr: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutBr: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, xPos: 'right', yPos: 'bottom' } }); -const rotateInBl: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInBl: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + startOpacity: 0, xPos: 'left', yPos: 'bottom' } }); -const rotateOutBl: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutBl: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, xPos: 'left', yPos: 'bottom' } }); -const rotateInTl: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInTl: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + startOpacity: 0, xPos: 'left', yPos: 'top' } }); -const rotateOutTl: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutTl: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 1, + startAngle: -360, + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, xPos: 'left', yPos: 'top' } }); -const rotateInDiagonal1: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInDiagonal1: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + startAngle: -360, + startOpacity: 0, + xPos: 'center', + yPos: 'center', rotateX: 1, rotateY: 1, rotateZ: 0 } }); -const rotateOutDiagonal1: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutDiagonal1: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + startAngle: -360, + xPos: 'center', + yPos: 'center', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, rotateX: 1, rotateY: 1, rotateZ: 0 } }); -const rotateInDiagonal2: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInDiagonal2: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + startAngle: -360, + startOpacity: 0, + xPos: 'center', + yPos: 'center', rotateX: -1, rotateY: 1, rotateZ: 0 } }); -const rotateOutDiagonal2: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutDiagonal2: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + startAngle: -360, + xPos: 'center', + yPos: 'center', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, rotateX: -1, rotateY: 1, rotateZ: 0 } }); -const rotateInHor: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInHor: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + startAngle: -360, + startOpacity: 0, + xPos: 'center', + yPos: 'center', rotateX: 0, rotateY: 1, rotateZ: 0 } }); -const rotateOutHor: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutHor: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + startAngle: -360, + xPos: 'center', + yPos: 'center', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, rotateX: 0, rotateY: 1, rotateZ: 0 } }); -const rotateInVer: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInVer: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseInParams, + delay: '0s', + duration: '600ms', + easing: EaseOut.Quad, + endAngle: 0, + endOpacity: 1, + startAngle: -360, + startOpacity: 0, + xPos: 'center', + yPos: 'center', rotateX: 1, rotateY: 0, rotateZ: 0 } }); -const rotateOutVer: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutVer: AnimationReferenceMetadata = animation(baseRecipe, { params: { - ...baseOutParams, + delay: '0s', + duration: '600ms', + endAngle: 0, + startAngle: -360, + xPos: 'center', + yPos: 'center', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, rotateX: 1, rotateY: 0, rotateZ: 0 } }); - -export { - rotateInCenter, - rotateInTop, - rotateInRight, - rotateInLeft, - rotateInBottom, - rotateInTr, - rotateInBr, - rotateInBl, - rotateInTl, - rotateInDiagonal1, - rotateInDiagonal2, - rotateInHor, - rotateInVer, - rotateOutCenter, - rotateOutTop, - rotateOutRight, - rotateOutLeft, - rotateOutBottom, - rotateOutTr, - rotateOutBr, - rotateOutBl, - rotateOutTl, - rotateOutDiagonal1, - rotateOutDiagonal2, - rotateOutHor, - rotateOutVer -}; diff --git a/projects/igniteui-angular/animations/src/scale/index.ts b/projects/igniteui-angular/animations/src/scale/index.ts index 7856eac99f9..8bb9f352a21 100644 --- a/projects/igniteui-angular/animations/src/scale/index.ts +++ b/projects/igniteui-angular/animations/src/scale/index.ts @@ -3,14 +3,14 @@ import { EaseOut } from '../easings'; import { IAnimationParams } from '../interface'; const base: AnimationMetadata[] = [ - style({ + /*@__PURE__*/style({ opacity: `{{startOpacity}}`, transform: `scale{{direction}}({{fromScale}})`, transformOrigin: `{{xPos}} {{yPos}}` }), - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - style({ + /*@__PURE__*/style({ opacity: `{{endOpacity}}`, transform: `scale{{direction}}({{toScale}})`, transformOrigin: `{{xPos}} {{yPos}}` @@ -18,21 +18,12 @@ const base: AnimationMetadata[] = [ ) ]; -const baseInParams: IAnimationParams = { +const baseOutParams: IAnimationParams = { delay: '0s', direction: '', duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, xPos: '50%', - yPos: '50%' -}; - -const baseOutParams: IAnimationParams = { - ...baseInParams, + yPos: '50%', easing: EaseOut.Sine, endOpacity: 0, fromScale: 1, @@ -40,199 +31,305 @@ const baseOutParams: IAnimationParams = { toScale: .5 }; -const scaleInCenter: AnimationReferenceMetadata = animation(base, { params: baseInParams }); - -const scaleInBl: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - xPos: '0', - yPos: '100%' - } +const scaleInCenter: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: '50%', + yPos: '50%' } -); - -const scaleInVerCenter: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - direction: 'Y', - fromScale: .4 - } +}); + +const scaleInBl: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: '0', + yPos: '100%' } -); - -const scaleInTop: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - xPos: '50%', - yPos: '0' - } +}); + +const scaleInVerCenter: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + toScale: 1, + xPos: '50%', + yPos: '50%', + direction: 'Y', + fromScale: .4 } -); - -const scaleInLeft: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - xPos: '0', - yPos: '50%' - } +}); + +const scaleInTop: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: '50%', + yPos: '0' } -); - -const scaleInVerTop: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - direction: 'Y', - fromScale: .4, - xPos: '100%', - yPos: '0' - } +}); + +const scaleInLeft: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: '0', + yPos: '50%' } -); - -const scaleInTr = animation(base, - { - params: { - ...baseInParams, - xPos: '100%', - yPos: '0' - } +}); + +const scaleInVerTop: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + toScale: 1, + direction: 'Y', + fromScale: .4, + xPos: '100%', + yPos: '0' } -); - -const scaleInTl: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - xPos: '0', - yPos: '0' - } +}); + +const scaleInTr = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: '100%', + yPos: '0' } -); - -const scaleInVerBottom: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - direction: 'Y', - fromScale: .4, - xPos: '0', - yPos: '100%' - } +}); + +const scaleInTl: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: '0', + yPos: '0' } -); - -const scaleInRight: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - xPos: '100%', - yPos: '50%' - } +}); + +const scaleInVerBottom: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + toScale: 1, + direction: 'Y', + fromScale: .4, + xPos: '0', + yPos: '100%' } -); - -const scaleInHorCenter: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - direction: 'X', - fromScale: .4 - } +}); + +const scaleInRight: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: '100%', + yPos: '50%' } -); - -const scaleInBr: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - xPos: '100%', - yPos: '100%' - } +}); + +const scaleInHorCenter: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + toScale: 1, + xPos: '50%', + yPos: '50%', + direction: 'X', + fromScale: .4 } -); - -const scaleInHorLeft: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - direction: 'X', - fromScale: .4, - xPos: '0', - yPos: '0' - } +}); + +const scaleInBr: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: '100%', + yPos: '100%' } -); - -const scaleInBottom: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - xPos: '50%', - yPos: '100%' - } +}); + +const scaleInHorLeft: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + toScale: 1, + direction: 'X', + fromScale: .4, + xPos: '0', + yPos: '0' } -); - -const scaleInHorRight: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - direction: 'X', - fromScale: .4, - xPos: '100%', - yPos: '100%' - } +}); + +const scaleInBottom: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: '50%', + yPos: '100%' } -); - -const scaleOutCenter: AnimationReferenceMetadata = animation(base, { params: baseOutParams }); - -const scaleOutBl: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - xPos: '0', - yPos: '100%' - } +}); + +const scaleInHorRight: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + toScale: 1, + direction: 'X', + fromScale: .4, + xPos: '100%', + yPos: '100%' } -); - -const scaleOutBr: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - xPos: '100%', - yPos: '100%' - } +}); + +const scaleOutCenter: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + xPos: '50%', + yPos: '50%', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + toScale: .5 } -); - -const scaleOutVerCenter: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - direction: 'Y', - toScale: .3 - } +}); + +const scaleOutBl: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + toScale: .5, + xPos: '0', + yPos: '100%' } -); - -const scaleOutVerTop: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - direction: 'Y', - toScale: .3, - xPos: '100%', - yPos: '0' - } +}); + +const scaleOutBr: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + toScale: .5, + xPos: '100%', + yPos: '100%' } -); +}); + +const scaleOutVerCenter: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + duration: '350ms', + xPos: '50%', + yPos: '50%', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + direction: 'Y', + toScale: .3 + } +}); + +const scaleOutVerTop: AnimationReferenceMetadata = animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + direction: 'Y', + toScale: .3, + xPos: '100%', + yPos: '0' + } +}); const scaleOutVerBottom: AnimationReferenceMetadata = animation(base, { From f6581e65ab5bfc809f50d9b128ed99e2aaa1712f Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 26 Sep 2023 16:47:00 +0300 Subject: [PATCH 3/9] fix(animations): all of animations tree-shake now --- .../animations/src/fade/index.ts | 6 +- .../animations/src/flip/index.ts | 17 +- .../animations/src/grow/index.ts | 6 +- .../igniteui-angular/animations/src/main.ts | 71 +++- .../animations/src/misc/shake.ts | 23 +- .../animations/src/rotate/index.ts | 54 +-- .../animations/src/scale/index.ts | 305 +++++++------- .../animations/src/slide/index.ts | 396 +++++++++--------- .../animations/src/swing/index.ts | 211 ++++++---- 9 files changed, 598 insertions(+), 491 deletions(-) diff --git a/projects/igniteui-angular/animations/src/fade/index.ts b/projects/igniteui-angular/animations/src/fade/index.ts index 7378ae31676..c0bef20435c 100644 --- a/projects/igniteui-angular/animations/src/fade/index.ts +++ b/projects/igniteui-angular/animations/src/fade/index.ts @@ -1,4 +1,4 @@ -import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations'; +import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseOut } from '../easings'; const base: AnimationMetadata[] = [ @@ -13,7 +13,7 @@ const base: AnimationMetadata[] = [ ) ]; -export const fadeIn: AnimationReferenceMetadata = /*@__PURE__*/animation(base, { +export const fadeIn = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -23,7 +23,7 @@ export const fadeIn: AnimationReferenceMetadata = /*@__PURE__*/animation(base, { } }); -export const fadeOut: AnimationReferenceMetadata = /*@__PURE__*/animation(base, { +export const fadeOut = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', diff --git a/projects/igniteui-angular/animations/src/flip/index.ts b/projects/igniteui-angular/animations/src/flip/index.ts index 50d90a7fcb7..2fdb2c0b4ad 100644 --- a/projects/igniteui-angular/animations/src/flip/index.ts +++ b/projects/igniteui-angular/animations/src/flip/index.ts @@ -2,7 +2,6 @@ import { animate, animation, AnimationMetadata, - AnimationReferenceMetadata, keyframes, style } from '@angular/animations'; @@ -30,7 +29,7 @@ const baseRecipe: AnimationMetadata[] = [ ) ]; -export const flipTop: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const flipTop = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -45,7 +44,7 @@ export const flipTop: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRe } }); -export const flipBottom: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const flipBottom = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -60,7 +59,7 @@ export const flipBottom: AnimationReferenceMetadata = /*@__PURE__*/animation(bas } }); -export const flipLeft: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const flipLeft = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -75,7 +74,7 @@ export const flipLeft: AnimationReferenceMetadata = /*@__PURE__*/animation(baseR } }); -export const flipRight: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const flipRight = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -90,7 +89,7 @@ export const flipRight: AnimationReferenceMetadata = /*@__PURE__*/animation(base } }); -export const flipHorFwd: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const flipHorFwd = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -105,7 +104,7 @@ export const flipHorFwd: AnimationReferenceMetadata = /*@__PURE__*/animation(bas } }); -export const flipHorBck: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const flipHorBck = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -120,7 +119,7 @@ export const flipHorBck: AnimationReferenceMetadata = /*@__PURE__*/animation(bas } }); -export const flipVerFwd: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const flipVerFwd = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -135,7 +134,7 @@ export const flipVerFwd: AnimationReferenceMetadata = /*@__PURE__*/animation(bas } }); -export const flipVerBck: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const flipVerBck = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', diff --git a/projects/igniteui-angular/animations/src/grow/index.ts b/projects/igniteui-angular/animations/src/grow/index.ts index d94aafa5ba8..ec39a3f72a8 100644 --- a/projects/igniteui-angular/animations/src/grow/index.ts +++ b/projects/igniteui-angular/animations/src/grow/index.ts @@ -1,4 +1,4 @@ -import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations'; +import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseOut } from '../easings'; const base: AnimationMetadata[] = [ @@ -17,7 +17,7 @@ const base: AnimationMetadata[] = [ ) ]; -export const growVerIn: AnimationReferenceMetadata = /*@__PURE__*/animation(base, { +export const growVerIn = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -31,7 +31,7 @@ export const growVerIn: AnimationReferenceMetadata = /*@__PURE__*/animation(base } }); -export const growVerOut: AnimationReferenceMetadata = /*@__PURE__*/animation(base, { +export const growVerOut = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', diff --git a/projects/igniteui-angular/animations/src/main.ts b/projects/igniteui-angular/animations/src/main.ts index 631ec89dafc..6ef79f22440 100644 --- a/projects/igniteui-angular/animations/src/main.ts +++ b/projects/igniteui-angular/animations/src/main.ts @@ -40,7 +40,72 @@ export { rotateOutVer } from './rotate/index'; export * from './misc/index'; -export * from './scale/index'; -export * from './slide/index'; -export * from './swing/index'; +export { + scaleInTop, + scaleInRight, + scaleInBottom, + scaleInLeft, + scaleInCenter, + scaleInTr, + scaleInBr, + scaleInBl, + scaleInTl, + scaleInVerTop, + scaleInVerBottom, + scaleInVerCenter, + scaleInHorCenter, + scaleInHorLeft, + scaleInHorRight, + scaleOutTop, + scaleOutRight, + scaleOutBottom, + scaleOutLeft, + scaleOutCenter, + scaleOutTr, + scaleOutBr, + scaleOutBl, + scaleOutTl, + scaleOutVerTop, + scaleOutVerBottom, + scaleOutVerCenter, + scaleOutHorCenter, + scaleOutHorLeft, + scaleOutHorRight +} from './scale/index'; +export { + slideInTop, + slideInRight, + slideInBottom, + slideInLeft, + slideInTr, + slideInBr, + slideInBl, + slideInTl, + slideOutTop, + slideOutBottom, + slideOutRight, + slideOutLeft, + slideOutTr, + slideOutBr, + slideOutBl, + slideOutTl +} from './slide/index'; +export { + swingInTopFwd, + swingInRightFwd, + swingInLeftFwd, + swingInBottomFwd, + swingInTopBck, + swingInRightBck, + swingInBottomBck, + swingInLeftBck, + swingOutTopFwd, + swingOutRightFwd, + swingOutBottomFwd, + swingOutLefttFwd, + swingOutTopBck, + swingOutRightBck, + swingOutBottomBck, + swingOutLeftBck +} from './swing/index'; export { growVerIn, growVerOut } from './grow/index'; diff --git a/projects/igniteui-angular/animations/src/misc/shake.ts b/projects/igniteui-angular/animations/src/misc/shake.ts index a7730b513ef..5026ad78b42 100644 --- a/projects/igniteui-angular/animations/src/misc/shake.ts +++ b/projects/igniteui-angular/animations/src/misc/shake.ts @@ -2,7 +2,6 @@ import { animate, animation, AnimationMetadata, - AnimationReferenceMetadata, keyframes, style } from '@angular/animations'; @@ -66,7 +65,7 @@ const baseRecipe: AnimationMetadata[] = [ ) ]; -export const shakeHor: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeHor = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', direction: 'X', @@ -81,7 +80,7 @@ export const shakeHor: AnimationReferenceMetadata = /*@__PURE__*/animation(baseR } }); -export const shakeVer: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeVer = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', direction: 'Y', @@ -96,7 +95,7 @@ export const shakeVer: AnimationReferenceMetadata = /*@__PURE__*/animation(baseR } }); -export const shakeTop: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeTop = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', direction: 'X', @@ -111,7 +110,7 @@ export const shakeTop: AnimationReferenceMetadata = /*@__PURE__*/animation(baseR } }); -export const shakeBottom: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeBottom = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '800ms', @@ -126,7 +125,7 @@ export const shakeBottom: AnimationReferenceMetadata = /*@__PURE__*/animation(ba } }); -export const shakeRight: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeRight = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '800ms', @@ -141,7 +140,7 @@ export const shakeRight: AnimationReferenceMetadata = /*@__PURE__*/animation(bas } }); -export const shakeLeft: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeLeft = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '800ms', @@ -156,7 +155,7 @@ export const shakeLeft: AnimationReferenceMetadata = /*@__PURE__*/animation(base } }); -export const shakeCenter: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeCenter = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '800ms', @@ -171,7 +170,7 @@ export const shakeCenter: AnimationReferenceMetadata = /*@__PURE__*/animation(ba } }); -export const shakeTr: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeTr = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '800ms', @@ -186,7 +185,7 @@ export const shakeTr: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRe } }); -export const shakeBr: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeBr = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '800ms', @@ -201,7 +200,7 @@ export const shakeBr: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRe } }); -export const shakeBl: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeBl = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '800ms', @@ -216,7 +215,7 @@ export const shakeBl: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRe } }); -export const shakeTl: AnimationReferenceMetadata = /*@__PURE__*/animation(baseRecipe, { +export const shakeTl = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '800ms', diff --git a/projects/igniteui-angular/animations/src/rotate/index.ts b/projects/igniteui-angular/animations/src/rotate/index.ts index 504d7e0e9d7..aabfd613de5 100644 --- a/projects/igniteui-angular/animations/src/rotate/index.ts +++ b/projects/igniteui-angular/animations/src/rotate/index.ts @@ -1,4 +1,4 @@ -import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations'; +import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseIn, EaseOut } from '../easings'; const baseRecipe: AnimationMetadata[] = [ @@ -18,7 +18,7 @@ const baseRecipe: AnimationMetadata[] = [ ) ]; -export const rotateInCenter: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInCenter = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -35,7 +35,7 @@ export const rotateInCenter: AnimationReferenceMetadata = animation(baseRecipe, } }); -export const rotateOutCenter: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutCenter = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -52,7 +52,7 @@ export const rotateOutCenter: AnimationReferenceMetadata = animation(baseRecipe, } }); -export const rotateInTop: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInTop = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -69,7 +69,7 @@ export const rotateInTop: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateOutTop: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutTop = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -86,7 +86,7 @@ export const rotateOutTop: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateInRight: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInRight = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -103,7 +103,7 @@ export const rotateInRight: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateOutRight: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutRight = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -120,7 +120,7 @@ export const rotateOutRight: AnimationReferenceMetadata = animation(baseRecipe, } }); -export const rotateInBottom: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInBottom = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -137,7 +137,7 @@ export const rotateInBottom: AnimationReferenceMetadata = animation(baseRecipe, } }); -export const rotateOutBottom: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutBottom = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -154,7 +154,7 @@ export const rotateOutBottom: AnimationReferenceMetadata = animation(baseRecipe, } }); -export const rotateInLeft: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInLeft = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -171,7 +171,7 @@ export const rotateInLeft: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateOutLeft: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutLeft = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -188,7 +188,7 @@ export const rotateOutLeft: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateInTr: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInTr = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -205,7 +205,7 @@ export const rotateInTr: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateOutTr: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutTr = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -222,7 +222,7 @@ export const rotateOutTr: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateInBr: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInBr = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -239,7 +239,7 @@ export const rotateInBr: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateOutBr: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutBr = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -256,7 +256,7 @@ export const rotateOutBr: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateInBl: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInBl = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -273,7 +273,7 @@ export const rotateInBl: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateOutBl: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutBl = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -290,7 +290,7 @@ export const rotateOutBl: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateInTl: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInTl = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -307,7 +307,7 @@ export const rotateInTl: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateOutTl: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutTl = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -324,7 +324,7 @@ export const rotateOutTl: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateInDiagonal1: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInDiagonal1 = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -341,7 +341,7 @@ export const rotateInDiagonal1: AnimationReferenceMetadata = animation(baseRecip } }); -export const rotateOutDiagonal1: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutDiagonal1 = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -358,7 +358,7 @@ export const rotateOutDiagonal1: AnimationReferenceMetadata = animation(baseReci } }); -export const rotateInDiagonal2: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInDiagonal2 = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -375,7 +375,7 @@ export const rotateInDiagonal2: AnimationReferenceMetadata = animation(baseRecip } }); -export const rotateOutDiagonal2: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutDiagonal2 = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -392,7 +392,7 @@ export const rotateOutDiagonal2: AnimationReferenceMetadata = animation(baseReci } }); -export const rotateInHor: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInHor = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -409,7 +409,7 @@ export const rotateInHor: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateOutHor: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutHor = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -426,7 +426,7 @@ export const rotateOutHor: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateInVer: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateInVer = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', @@ -443,7 +443,7 @@ export const rotateInVer: AnimationReferenceMetadata = animation(baseRecipe, { } }); -export const rotateOutVer: AnimationReferenceMetadata = animation(baseRecipe, { +export const rotateOutVer = /*@__PURE__*/animation(baseRecipe, { params: { delay: '0s', duration: '600ms', diff --git a/projects/igniteui-angular/animations/src/scale/index.ts b/projects/igniteui-angular/animations/src/scale/index.ts index 8bb9f352a21..650c1079eb9 100644 --- a/projects/igniteui-angular/animations/src/scale/index.ts +++ b/projects/igniteui-angular/animations/src/scale/index.ts @@ -1,6 +1,5 @@ -import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations'; +import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseOut } from '../easings'; -import { IAnimationParams } from '../interface'; const base: AnimationMetadata[] = [ /*@__PURE__*/style({ @@ -18,20 +17,7 @@ const base: AnimationMetadata[] = [ ) ]; -const baseOutParams: IAnimationParams = { - delay: '0s', - direction: '', - duration: '350ms', - xPos: '50%', - yPos: '50%', - easing: EaseOut.Sine, - endOpacity: 0, - fromScale: 1, - startOpacity: 1, - toScale: .5 -}; - -const scaleInCenter: AnimationReferenceMetadata = animation(base, { +export const scaleInCenter = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -46,7 +32,7 @@ const scaleInCenter: AnimationReferenceMetadata = animation(base, { } }); -const scaleInBl: AnimationReferenceMetadata = animation(base, { +export const scaleInBl = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -61,7 +47,7 @@ const scaleInBl: AnimationReferenceMetadata = animation(base, { } }); -const scaleInVerCenter: AnimationReferenceMetadata = animation(base, { +export const scaleInVerCenter = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -76,7 +62,7 @@ const scaleInVerCenter: AnimationReferenceMetadata = animation(base, { } }); -const scaleInTop: AnimationReferenceMetadata = animation(base, { +export const scaleInTop = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -91,7 +77,7 @@ const scaleInTop: AnimationReferenceMetadata = animation(base, { } }); -const scaleInLeft: AnimationReferenceMetadata = animation(base, { +export const scaleInLeft = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -106,7 +92,7 @@ const scaleInLeft: AnimationReferenceMetadata = animation(base, { } }); -const scaleInVerTop: AnimationReferenceMetadata = animation(base, { +export const scaleInVerTop = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -121,7 +107,7 @@ const scaleInVerTop: AnimationReferenceMetadata = animation(base, { } }); -const scaleInTr = animation(base, { +export const scaleInTr = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -136,7 +122,7 @@ const scaleInTr = animation(base, { } }); -const scaleInTl: AnimationReferenceMetadata = animation(base, { +export const scaleInTl = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -151,7 +137,7 @@ const scaleInTl: AnimationReferenceMetadata = animation(base, { } }); -const scaleInVerBottom: AnimationReferenceMetadata = animation(base, { +export const scaleInVerBottom = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -166,7 +152,7 @@ const scaleInVerBottom: AnimationReferenceMetadata = animation(base, { } }); -const scaleInRight: AnimationReferenceMetadata = animation(base, { +export const scaleInRight = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -181,7 +167,7 @@ const scaleInRight: AnimationReferenceMetadata = animation(base, { } }); -const scaleInHorCenter: AnimationReferenceMetadata = animation(base, { +export const scaleInHorCenter = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -196,7 +182,7 @@ const scaleInHorCenter: AnimationReferenceMetadata = animation(base, { } }); -const scaleInBr: AnimationReferenceMetadata = animation(base, { +export const scaleInBr = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -211,7 +197,7 @@ const scaleInBr: AnimationReferenceMetadata = animation(base, { } }); -const scaleInHorLeft: AnimationReferenceMetadata = animation(base, { +export const scaleInHorLeft = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -226,7 +212,7 @@ const scaleInHorLeft: AnimationReferenceMetadata = animation(base, { } }); -const scaleInBottom: AnimationReferenceMetadata = animation(base, { +export const scaleInBottom = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -241,7 +227,7 @@ const scaleInBottom: AnimationReferenceMetadata = animation(base, { } }); -const scaleInHorRight: AnimationReferenceMetadata = animation(base, { +export const scaleInHorRight = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -256,7 +242,7 @@ const scaleInHorRight: AnimationReferenceMetadata = animation(base, { } }); -const scaleOutCenter: AnimationReferenceMetadata = animation(base, { +export const scaleOutCenter = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -271,7 +257,7 @@ const scaleOutCenter: AnimationReferenceMetadata = animation(base, { } }); -const scaleOutBl: AnimationReferenceMetadata = animation(base, { +export const scaleOutBl = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -286,7 +272,7 @@ const scaleOutBl: AnimationReferenceMetadata = animation(base, { } }); -const scaleOutBr: AnimationReferenceMetadata = animation(base, { +export const scaleOutBr = /*@__PURE__*/animation(base, { params: { delay: '0s', direction: '', @@ -301,7 +287,7 @@ const scaleOutBr: AnimationReferenceMetadata = animation(base, { } }); -const scaleOutVerCenter: AnimationReferenceMetadata = animation(base, { +export const scaleOutVerCenter = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -316,7 +302,7 @@ const scaleOutVerCenter: AnimationReferenceMetadata = animation(base, { } }); -const scaleOutVerTop: AnimationReferenceMetadata = animation(base, { +export const scaleOutVerTop = /*@__PURE__*/animation(base, { params: { delay: '0s', duration: '350ms', @@ -331,141 +317,152 @@ const scaleOutVerTop: AnimationReferenceMetadata = animation(base, { } }); -const scaleOutVerBottom: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - direction: 'Y', - toScale: .3, - xPos: '0', - yPos: '100%' - } +export const scaleOutVerBottom = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + direction: 'Y', + toScale: .3, + xPos: '0', + yPos: '100%' } -); +}); -const scaleOutTop: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - xPos: '50%', - yPos: '0' - } +export const scaleOutTop = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + toScale: .5, + xPos: '50%', + yPos: '0' } -); +}); -const scaleOutLeft: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - xPos: '0', - yPos: '50%' - } +export const scaleOutLeft = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + toScale: .5, + xPos: '0', + yPos: '50%' } -); +}); -const scaleOutTr: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - xPos: '100%', - yPos: '0' - } +export const scaleOutTr = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + toScale: .5, + xPos: '100%', + yPos: '0' } -); +}); -const scaleOutTl: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - xPos: '0', - yPos: '0' - } +export const scaleOutTl = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + toScale: .5, + xPos: '0', + yPos: '0' } -); +}); -const scaleOutRight: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - xPos: '100%', - yPos: '50%' - } +export const scaleOutRight = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + toScale: .5, + xPos: '100%', + yPos: '50%' } -); +}); -const scaleOutBottom: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - xPos: '50%', - yPos: '100%' - } +export const scaleOutBottom = /*@__PURE__*/animation(base,{ + params: { + delay: '0s', + direction: '', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + toScale: .5, + xPos: '50%', + yPos: '100%' } -); +}); -const scaleOutHorCenter: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - direction: 'X', - toScale: .3 - } +export const scaleOutHorCenter = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + xPos: '50%', + yPos: '50%', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + direction: 'X', + toScale: .3 } -); +}); -const scaleOutHorLeft: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - direction: 'X', - toScale: .3, - xPos: '0', - yPos: '0' - } +export const scaleOutHorLeft = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + direction: 'X', + toScale: .3, + xPos: '0', + yPos: '0' } -); +}); -const scaleOutHorRight: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - direction: 'X', - toScale: .3, - xPos: '100%', - yPos: '100%' - } +export const scaleOutHorRight = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Sine, + endOpacity: 0, + fromScale: 1, + startOpacity: 1, + direction: 'X', + toScale: .3, + xPos: '100%', + yPos: '100%' } -); - -export { - scaleInTop, - scaleInRight, - scaleInBottom, - scaleInLeft, - scaleInCenter, - scaleInTr, - scaleInBr, - scaleInBl, - scaleInTl, - scaleInVerTop, - scaleInVerBottom, - scaleInVerCenter, - scaleInHorCenter, - scaleInHorLeft, - scaleInHorRight, - scaleOutTop, - scaleOutRight, - scaleOutBottom, - scaleOutLeft, - scaleOutCenter, - scaleOutTr, - scaleOutBr, - scaleOutBl, - scaleOutTl, - scaleOutVerTop, - scaleOutVerBottom, - scaleOutVerCenter, - scaleOutHorCenter, - scaleOutHorLeft, - scaleOutHorRight -}; +}); diff --git a/projects/igniteui-angular/animations/src/slide/index.ts b/projects/igniteui-angular/animations/src/slide/index.ts index a11138dcd0d..457973f3397 100644 --- a/projects/igniteui-angular/animations/src/slide/index.ts +++ b/projects/igniteui-angular/animations/src/slide/index.ts @@ -1,214 +1,208 @@ -import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations'; +import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseIn, EaseOut } from '../easings'; -import { IAnimationParams } from '../interface'; const base: AnimationMetadata[] = [ - style({ + /*@__PURE__*/style({ opacity: `{{startOpacity}}`, transform: `{{fromPosition}}` }), - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - style({ + /*@__PURE__*/style({ opacity: `{{endOpacity}}`, transform: `{{toPosition}}` }) ) ]; -const baseInParams: IAnimationParams = { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromPosition: 'translateY(-500px)', - startOpacity: 0, - toPosition: 'translateY(0)' -}; - -const baseOutParams: IAnimationParams = { - delay: '0s', - duration: '350ms', - easing: EaseIn.Quad, - endOpacity: 0, - fromPosition: 'translateY(0)', - startOpacity: 1, - toPosition: 'translateY(-500px)' -}; - -const slideInTop: AnimationReferenceMetadata = animation(base, { params: baseInParams }); - -const slideInLeft: AnimationReferenceMetadata = animation(base, - { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromPosition: 'translateX(-500px)', - startOpacity: 0, - toPosition: 'translateY(0)' - } - } -); - -const slideInRight: AnimationReferenceMetadata = animation(base, - { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromPosition: 'translateX(500px)', - startOpacity: 0, - toPosition: 'translateY(0)' - } - } -); - -const slideInBottom: AnimationReferenceMetadata = animation(base, - { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromPosition: 'translateY(500px)', - startOpacity: 0, - toPosition: 'translateY(0)' - } - } -); - -const slideInTr: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - fromPosition: 'translateY(-500px) translateX(500px)', - toPosition: 'translateY(0) translateX(0)' - } - } -); - -const slideInTl: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - fromPosition: 'translateY(-500px) translateX(-500px)', - toPosition: 'translateY(0) translateX(0)' - } - } -); - -const slideInBr: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - fromPosition: 'translateY(500px) translateX(500px)', - toPosition: 'translateY(0) translateX(0)' - } - } -); - -const slideInBl: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseInParams, - fromPosition: 'translateY(500px) translateX(-500px)', - toPosition: 'translateY(0) translateX(0)' - } - } -); - -const slideOutTop: AnimationReferenceMetadata = animation(base, { params: baseOutParams }); - -const slideOutRight: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - toPosition: 'translateX(500px)' - } - } -); - -const slideOutBottom: AnimationReferenceMetadata = animation(base, - { - params: { - delay: '0s', - duration: '350ms', - easing: EaseIn.Quad, - endOpacity: 0, - fromPosition: 'translateY(0)', - startOpacity: 1, - toPosition: 'translateY(500px)' - } - } -); - -const slideOutLeft: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - toPosition: 'translateX(-500px)' - } - } -); - -const slideOutTr: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - fromPosition: 'translateY(0) translateX(0)', - toPosition: 'translateY(-500px) translateX(500px)' - } - } -); - -const slideOutBr: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - fromPosition: 'translateY(0) translateX(0)', - toPosition: 'translateY(500px) translateX(500px)' - } - } -); - -const slideOutBl: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - fromPosition: 'translateY(0) translateX(0)', - toPosition: 'translateY(500px) translateX(-500px)' - } - } -); - -const slideOutTl: AnimationReferenceMetadata = animation(base, - { - params: { - ...baseOutParams, - fromPosition: 'translateY(0) translateX(0)', - toPosition: 'translateY(-500px) translateX(-500px)' - } - } -); - -export { - slideInTop, - slideInRight, - slideInBottom, - slideInLeft, - slideInTr, - slideInBr, - slideInBl, - slideInTl, - slideOutTop, - slideOutBottom, - slideOutRight, - slideOutLeft, - slideOutTr, - slideOutBr, - slideOutBl, - slideOutTl -}; +export const slideInTop = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromPosition: 'translateY(-500px)', + startOpacity: 0, + toPosition: 'translateY(0)' + } +}); + +export const slideInLeft = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromPosition: 'translateX(-500px)', + startOpacity: 0, + toPosition: 'translateY(0)' + } +}); + +export const slideInRight = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromPosition: 'translateX(500px)', + startOpacity: 0, + toPosition: 'translateY(0)' + } +}); + +export const slideInBottom = /*@__PURE__*/animation(base,{ + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + fromPosition: 'translateY(500px)', + startOpacity: 0, + toPosition: 'translateY(0)' + } +}); + +export const slideInTr = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + fromPosition: 'translateY(-500px) translateX(500px)', + toPosition: 'translateY(0) translateX(0)' + } +}); + +export const slideInTl = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + fromPosition: 'translateY(-500px) translateX(-500px)', + toPosition: 'translateY(0) translateX(0)' + } +}); + +export const slideInBr = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + fromPosition: 'translateY(500px) translateX(500px)', + toPosition: 'translateY(0) translateX(0)' + } +}); + +export const slideInBl = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + fromPosition: 'translateY(500px) translateX(-500px)', + toPosition: 'translateY(0) translateX(0)' + } +}); + +export const slideOutTop = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseIn.Quad, + endOpacity: 0, + fromPosition: 'translateY(0)', + startOpacity: 1, + toPosition: 'translateY(-500px)' + } +}); + +export const slideOutRight = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseIn.Quad, + endOpacity: 0, + fromPosition: 'translateY(0)', + startOpacity: 1, + toPosition: 'translateX(500px)' + } +}); + +export const slideOutBottom = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseIn.Quad, + endOpacity: 0, + fromPosition: 'translateY(0)', + startOpacity: 1, + toPosition: 'translateY(500px)' + } +}); + +export const slideOutLeft = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseIn.Quad, + endOpacity: 0, + fromPosition: 'translateY(0)', + startOpacity: 1, + toPosition: 'translateX(-500px)' + } +}); + +export const slideOutTr = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, + fromPosition: 'translateY(0) translateX(0)', + toPosition: 'translateY(-500px) translateX(500px)' + } +}); + +export const slideOutBr = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, + fromPosition: 'translateY(0) translateX(0)', + toPosition: 'translateY(500px) translateX(500px)' + } +}); + +export const slideOutBl = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, + fromPosition: 'translateY(0) translateX(0)', + toPosition: 'translateY(500px) translateX(-500px)' + } +}); + +export const slideOutTl = /*@__PURE__*/animation(base, { + params: { + delay: '0s', + duration: '350ms', + easing: EaseIn.Quad, + endOpacity: 0, + startOpacity: 1, + fromPosition: 'translateY(0) translateX(0)', + toPosition: 'translateY(-500px) translateX(-500px)' + } +}); diff --git a/projects/igniteui-angular/animations/src/swing/index.ts b/projects/igniteui-angular/animations/src/swing/index.ts index a26b575da55..40b16e28658 100644 --- a/projects/igniteui-angular/animations/src/swing/index.ts +++ b/projects/igniteui-angular/animations/src/swing/index.ts @@ -1,16 +1,15 @@ -import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations'; +import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseIn, EaseOut } from '../easings'; -import { IAnimationParams } from '../interface'; const swingBase: AnimationMetadata[] = [ - style({ + /*@__PURE__*/style({ opacity: `{{startOpacity}}`, transform: `rotate{{direction}}({{startAngle}}deg)`, transformOrigin: `{{xPos}} {{yPos}}` }), - animate( + /*@__PURE__*/animate( `{{duration}} {{delay}} {{easing}}`, - style({ + /*@__PURE__*/style({ opacity: `{{endOpacity}}`, transform: `rotate{{direction}}({{endAngle}}deg)`, transformOrigin: `{{xPos}} {{yPos}}` @@ -18,55 +17,59 @@ const swingBase: AnimationMetadata[] = [ ) ]; -const swingParams: IAnimationParams = { - delay: '0s', - direction: 'X', - duration: '.5s', - easing: EaseOut.Back, - endAngle: 0, - endOpacity: 1, - startAngle: -100, - startOpacity: 0, - xPos: 'top', - yPos: 'center' -}; - -const swingOutParams: IAnimationParams = { - ...swingParams, - duration: '.55s', - easing: EaseIn.Back, - endAngle: 70, - endOpacity: 0, - startAngle: 0, - startOpacity: 1 -}; - -const swingInTopFwd: AnimationReferenceMetadata = animation(swingBase, { +export const swingInTopFwd = /*@__PURE__*/animation(swingBase, { params: { - ...swingParams + delay: '0s', + direction: 'X', + duration: '.5s', + easing: EaseOut.Back, + endAngle: 0, + endOpacity: 1, + startAngle: -100, + startOpacity: 0, + xPos: 'top', + yPos: 'center' } }); -const swingInRightFwd: AnimationReferenceMetadata = animation(swingBase, { +export const swingInRightFwd = /*@__PURE__*/animation(swingBase, { params: { - ...swingParams, + delay: '0s', + duration: '.5s', + easing: EaseOut.Back, + endAngle: 0, + endOpacity: 1, + startAngle: -100, + startOpacity: 0, direction: 'Y', xPos: 'center', yPos: 'right' } }); -const swingInBottomFwd: AnimationReferenceMetadata = animation(swingBase, { +export const swingInBottomFwd = /*@__PURE__*/animation(swingBase, { params: { - ...swingParams, + delay: '0s', + direction: 'X', + duration: '.5s', + easing: EaseOut.Back, + endAngle: 0, + endOpacity: 1, + startOpacity: 0, + yPos: 'center', startAngle: 100, xPos: 'bottom' } }); -const swingInLeftFwd: AnimationReferenceMetadata = animation(swingBase, { +export const swingInLeftFwd = /*@__PURE__*/animation(swingBase, { params: { - ...swingParams, + delay: '0s', + duration: '.5s', + easing: EaseOut.Back, + endAngle: 0, + endOpacity: 1, + startOpacity: 0, direction: 'Y', startAngle: 100, xPos: 'center', @@ -74,17 +77,28 @@ const swingInLeftFwd: AnimationReferenceMetadata = animation(swingBase, { } }); -const swingInTopBck: AnimationReferenceMetadata = animation(swingBase, { +export const swingInTopBck = /*@__PURE__*/animation(swingBase, { params: { - ...swingParams, + delay: '0s', + direction: 'X', + easing: EaseOut.Back, + endAngle: 0, + endOpacity: 1, + startOpacity: 0, + xPos: 'top', + yPos: 'center', duration: '.6s', startAngle: 70 } }); -const swingInRightBck: AnimationReferenceMetadata = animation(swingBase, { +export const swingInRightBck = /*@__PURE__*/animation(swingBase, { params: { - ...swingParams, + delay: '0s', + easing: EaseOut.Back, + endAngle: 0, + endOpacity: 1, + startOpacity: 0, direction: 'Y', duration: '.6s', startAngle: 70, @@ -93,18 +107,28 @@ const swingInRightBck: AnimationReferenceMetadata = animation(swingBase, { } }); -const swingInBottomBck: AnimationReferenceMetadata = animation(swingBase, { +export const swingInBottomBck = /*@__PURE__*/animation(swingBase, { params: { - ...swingParams, + delay: '0s', + direction: 'X', + easing: EaseOut.Back, + endAngle: 0, + endOpacity: 1, + startOpacity: 0, + yPos: 'center', duration: '.6s', startAngle: -70, xPos: 'bottom' } }); -const swingInLeftBck: AnimationReferenceMetadata = animation(swingBase, { +export const swingInLeftBck = /*@__PURE__*/animation(swingBase, { params: { - ...swingParams, + delay: '0s', + easing: EaseOut.Back, + endAngle: 0, + endOpacity: 1, + startOpacity: 0, direction: 'Y', duration: '.6s', startAngle: -70, @@ -113,32 +137,59 @@ const swingInLeftBck: AnimationReferenceMetadata = animation(swingBase, { } }); -const swingOutTopFwd: AnimationReferenceMetadata = animation(swingBase, { +export const swingOutTopFwd = /*@__PURE__*/animation(swingBase, { params: { - ...swingOutParams + delay: '0s', + direction: 'X', + xPos: 'top', + yPos: 'center', + duration: '.55s', + easing: EaseIn.Back, + endAngle: 70, + endOpacity: 0, + startAngle: 0, + startOpacity: 1 } }); -const swingOutRightFwd: AnimationReferenceMetadata = animation(swingBase, { +export const swingOutRightFwd = /*@__PURE__*/animation(swingBase, { params: { - ...swingOutParams, + delay: '0s', + duration: '.55s', + easing: EaseIn.Back, + endAngle: 70, + endOpacity: 0, + startAngle: 0, + startOpacity: 1, direction: 'Y', xPos: 'center', yPos: 'right' } }); -const swingOutBottomFwd: AnimationReferenceMetadata = animation(swingBase, { +export const swingOutBottomFwd = /*@__PURE__*/animation(swingBase, { params: { - ...swingOutParams, + delay: '0s', + direction: 'X', + yPos: 'center', + duration: '.55s', + easing: EaseIn.Back, + endOpacity: 0, + startAngle: 0, + startOpacity: 1, endAngle: -70, xPos: 'bottom' } }); -const swingOutLefttFwd: AnimationReferenceMetadata = animation(swingBase, { +export const swingOutLefttFwd = /*@__PURE__*/animation(swingBase, { params: { - ...swingOutParams, + delay: '0s', + duration: '.55s', + easing: EaseIn.Back, + endOpacity: 0, + startAngle: 0, + startOpacity: 1, direction: 'Y', endAngle: -70, xPos: 'center', @@ -146,17 +197,28 @@ const swingOutLefttFwd: AnimationReferenceMetadata = animation(swingBase, { } }); -const swingOutTopBck: AnimationReferenceMetadata = animation(swingBase, { +export const swingOutTopBck = /*@__PURE__*/animation(swingBase, { params: { - ...swingOutParams, + delay: '0s', + direction: 'X', + xPos: 'top', + yPos: 'center', + easing: EaseIn.Back, + endOpacity: 0, + startAngle: 0, + startOpacity: 1, duration: '.45s', endAngle: -100 } }); -const swingOutRightBck: AnimationReferenceMetadata = animation(swingBase, { +export const swingOutRightBck = /*@__PURE__*/animation(swingBase, { params: { - ...swingOutParams, + delay: '0s', + easing: EaseIn.Back, + endOpacity: 0, + startAngle: 0, + startOpacity: 1, direction: 'Y', duration: '.45s', endAngle: -100, @@ -165,18 +227,28 @@ const swingOutRightBck: AnimationReferenceMetadata = animation(swingBase, { } }); -const swingOutBottomBck: AnimationReferenceMetadata = animation(swingBase, { +export const swingOutBottomBck = /*@__PURE__*/animation(swingBase, { params: { - ...swingOutParams, + delay: '0s', + direction: 'X', + yPos: 'center', + easing: EaseIn.Back, + endOpacity: 0, + startAngle: 0, + startOpacity: 1, duration: '.45s', endAngle: 100, xPos: 'bottom' } }); -const swingOutLeftBck: AnimationReferenceMetadata = animation(swingBase, { +export const swingOutLeftBck = /*@__PURE__*/animation(swingBase, { params: { - ...swingOutParams, + delay: '0s', + easing: EaseIn.Back, + endOpacity: 0, + startAngle: 0, + startOpacity: 1, direction: 'Y', duration: '.45s', endAngle: 100, @@ -184,22 +256,3 @@ const swingOutLeftBck: AnimationReferenceMetadata = animation(swingBase, { yPos: 'left' } }); - -export { - swingInTopFwd, - swingInRightFwd, - swingInLeftFwd, - swingInBottomFwd, - swingInTopBck, - swingInRightBck, - swingInBottomBck, - swingInLeftBck, - swingOutTopFwd, - swingOutRightFwd, - swingOutBottomFwd, - swingOutLefttFwd, - swingOutTopBck, - swingOutRightBck, - swingOutBottomBck, - swingOutLeftBck -}; From 737bef177fb647c84eb38726e077e6f5b3f1a8f4 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 26 Sep 2023 17:19:17 +0300 Subject: [PATCH 4/9] chore(animations): exporting enums --- projects/igniteui-angular/animations/README.md | 2 +- projects/igniteui-angular/animations/src/main.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/animations/README.md b/projects/igniteui-angular/animations/README.md index 4e2c8a28b14..1fe0e1adfd4 100644 --- a/projects/igniteui-angular/animations/README.md +++ b/projects/igniteui-angular/animations/README.md @@ -64,7 +64,7 @@ There are three main timing function groups - **EaseIn**, **EaseOut**, and **Eas To use a specific timing function, import it first: ``` typescript -import { EaseOut } from "igniteui-angular/animations/easings"; +import { EaseOut } from "igniteui-angular/animations"; ``` and then use it as value for the easing param in any animation: diff --git a/projects/igniteui-angular/animations/src/main.ts b/projects/igniteui-angular/animations/src/main.ts index 6ef79f22440..6c218cada7c 100644 --- a/projects/igniteui-angular/animations/src/main.ts +++ b/projects/igniteui-angular/animations/src/main.ts @@ -1,5 +1,6 @@ export { IAnimationParams } from './interface'; export { AnimationUtil } from './util'; +export { EaseIn, EaseInOut, EaseOut } from './easings'; export { fadeIn, fadeOut } from './fade/index'; export { flipTop, From 2d2228313ce069b72eb90295515840f71cc8793e Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 26 Sep 2023 17:25:19 +0300 Subject: [PATCH 5/9] chore(*): fixing failing tests --- projects/igniteui-angular/animations/index.ts | 2 +- projects/igniteui-angular/animations/ng-package.json | 2 +- .../igniteui-angular/animations/src/{main.ts => public-api.ts} | 0 .../src/lib/accordion/accordion.component.spec.ts | 2 +- .../igniteui-angular/src/lib/dialog/dialog.component.spec.ts | 2 +- .../igniteui-angular/src/lib/services/overlay/overlay.spec.ts | 2 +- .../src/lib/snackbar/snackbar.component.spec.ts | 3 ++- 7 files changed, 7 insertions(+), 6 deletions(-) rename projects/igniteui-angular/animations/src/{main.ts => public-api.ts} (100%) diff --git a/projects/igniteui-angular/animations/index.ts b/projects/igniteui-angular/animations/index.ts index c1cd862ed17..1875d3f9bfe 100644 --- a/projects/igniteui-angular/animations/index.ts +++ b/projects/igniteui-angular/animations/index.ts @@ -1 +1 @@ -export * from './src/main'; +export * from './src/public-api'; diff --git a/projects/igniteui-angular/animations/ng-package.json b/projects/igniteui-angular/animations/ng-package.json index af161996d2a..fbafcc44488 100644 --- a/projects/igniteui-angular/animations/ng-package.json +++ b/projects/igniteui-angular/animations/ng-package.json @@ -1,5 +1,5 @@ { "lib": { - "entryFile": "src/main.ts" + "entryFile": "src/public-api.ts" } } diff --git a/projects/igniteui-angular/animations/src/main.ts b/projects/igniteui-angular/animations/src/public-api.ts similarity index 100% rename from projects/igniteui-angular/animations/src/main.ts rename to projects/igniteui-angular/animations/src/public-api.ts diff --git a/projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts b/projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts index 62325238ec6..e221f0ab7d6 100644 --- a/projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts +++ b/projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts @@ -4,11 +4,11 @@ import { Component, ViewChild } from '@angular/core'; import { waitForAsync, TestBed, fakeAsync, ComponentFixture, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { slideInLeft, slideOutRight } from '../animations/slide'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from '../expansion-panel/public_api'; import { configureTestSuite } from '../test-utils/configure-suite'; import { UIInteractions } from '../test-utils/ui-interactions.spec'; import { IAccordionCancelableEventArgs, IAccordionEventArgs, IgxAccordionComponent } from './accordion.component'; +import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; const ACCORDION_CLASS = 'igx-accordion'; const PANEL_TAG = 'IGX-EXPANSION-PANEL'; diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts index 52cee9893dc..e03d5d59b28 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts @@ -7,9 +7,9 @@ import { IDialogCancellableEventArgs, IDialogEventArgs, IgxDialogComponent } fro import { configureTestSuite } from '../test-utils/configure-suite'; import { useAnimation } from '@angular/animations'; import { PositionSettings, HorizontalAlignment, VerticalAlignment } from '../services/overlay/utilities'; -import { slideOutBottom, slideInTop } from '../animations/main'; import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; import { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives'; +import { slideInTop, slideOutBottom } from 'igniteui-angular/animations'; const OVERLAY_MAIN_CLASS = 'igx-overlay'; const OVERLAY_WRAPPER_CLASS = `${OVERLAY_MAIN_CLASS}__wrapper--flex`; diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts index 9b24798cbc2..39f0f599936 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -12,7 +12,6 @@ import { import { fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { first } from 'rxjs/operators'; -import { scaleInVerTop, scaleOutVerTop } from '../../animations/main'; import { IgxAvatarComponent } from '../../avatar/avatar.component'; import { IgxCalendarComponent } from '../../calendar/public_api'; import { IgxCalendarContainerComponent } from '../../date-common/calendar-container/calendar-container.component'; @@ -43,6 +42,7 @@ import { VerticalAlignment } from './utilities'; import { NgIf } from '@angular/common'; +import { scaleInVerTop, scaleOutVerTop } from 'igniteui-angular/animations'; const CLASS_OVERLAY_CONTENT = 'igx-overlay__content'; const CLASS_OVERLAY_CONTENT_MODAL = 'igx-overlay__content--modal'; diff --git a/projects/igniteui-angular/src/lib/snackbar/snackbar.component.spec.ts b/projects/igniteui-angular/src/lib/snackbar/snackbar.component.spec.ts index 82d6a5d5dd3..15f20ae461a 100644 --- a/projects/igniteui-angular/src/lib/snackbar/snackbar.component.spec.ts +++ b/projects/igniteui-angular/src/lib/snackbar/snackbar.component.spec.ts @@ -4,8 +4,9 @@ import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxSnackbarComponent } from './snackbar.component'; import { configureTestSuite } from '../test-utils/configure-suite'; -import { HorizontalAlignment, PositionSettings, slideInLeft, slideInRight, VerticalAlignment } from 'igniteui-angular'; import { useAnimation } from '@angular/animations'; +import { HorizontalAlignment, PositionSettings, VerticalAlignment } from '../services/public_api'; +import { slideInLeft, slideInRight } from 'igniteui-angular/animations'; describe('IgxSnackbar', () => { configureTestSuite(); From c371008704965a8ee31993b971b44925f29845b9 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Thu, 28 Sep 2023 11:48:21 +0300 Subject: [PATCH 6/9] chore(*): fixing quotes in component template --- .../src/lib/splitter/splitter-bar.component.html | 12 ++++++------ .../src/lib/splitter/splitter.component.html | 6 +++--- .../src/lib/stepper/step/step.component.html | 8 ++++---- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html index 48bff4eba09..599e4f02f2a 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html +++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html @@ -1,14 +1,14 @@
-
+
-
+
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.html b/projects/igniteui-angular/src/lib/splitter/splitter.component.html index c964cdcb87c..661ef6b1257 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.html +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.html @@ -1,11 +1,11 @@ - + (movingEnd)="onMoveEnd($event)"> diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.html b/projects/igniteui-angular/src/lib/stepper/step/step.component.html index 36761a1d5b6..c0dc9ff1041 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.html +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.html @@ -1,11 +1,11 @@ - - + +
- +
@@ -14,7 +14,7 @@ - +
Date: Thu, 28 Sep 2023 11:53:18 +0300 Subject: [PATCH 7/9] chore(*): fixing pivot grid aggregator test --- .../src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts index d7a4450dca3..1befe0c2abc 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts @@ -320,9 +320,10 @@ describe('Pivot pipes #pivotGrid', () => { expect(IgxPivotTimeAggregate.earliestTime(['01/01/2021 8:00', '01/01/2021 1:00', '01/01/2021 22:00'])).toEqual(new Date('01/01/2021 1:00')); // check string can be changed - IgxPivotTimeAggregate.aggregators().find(x => x.key === "EARLIEST").label = 'Earliest Custom Time'; + // This test no longer covers functionality that is provided. Overriding labels is done by extending the class. + // IgxPivotTimeAggregate.aggregators().find(x => x.key === 'EARLIEST').label = 'Earliest Custom Time'; - expect(IgxPivotTimeAggregate.aggregators().find(x => x.key === 'EARLIEST').label).toEqual('Earliest Custom Time'); + // expect(IgxPivotTimeAggregate.aggregators().find(x => x.key === 'EARLIEST').label).toEqual('Earliest Custom Time'); }); it('allow setting NoopPivotDimensionsStrategy for rows/columns', () => { From f65f989049e0cbeff626cfd6220bea2549280124 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 3 Oct 2023 09:44:06 +0300 Subject: [PATCH 8/9] chore(*): returning only chip in bundle test build --- projects/bundle-test/src/app/app.component.html | 3 ++- projects/bundle-test/src/app/app.component.ts | 2 ++ projects/bundle-test/src/app/app.module.ts | 6 ++++-- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/projects/bundle-test/src/app/app.component.html b/projects/bundle-test/src/app/app.component.html index 0290d232470..697a5cd7aca 100644 --- a/projects/bundle-test/src/app/app.component.html +++ b/projects/bundle-test/src/app/app.component.html @@ -1,5 +1,6 @@
- + Chip +
diff --git a/projects/bundle-test/src/app/app.component.ts b/projects/bundle-test/src/app/app.component.ts index 9a8db0f2fca..4e0f39d1749 100644 --- a/projects/bundle-test/src/app/app.component.ts +++ b/projects/bundle-test/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { ChipResourceStringsBG } from 'igniteui-angular-i18n'; @Component({ selector: 'app-root', @@ -6,4 +7,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.scss'] }) export class AppComponent { + protected chipStrings = ChipResourceStringsBG; } diff --git a/projects/bundle-test/src/app/app.module.ts b/projects/bundle-test/src/app/app.module.ts index 2df2a345667..022c4964320 100644 --- a/projects/bundle-test/src/app/app.module.ts +++ b/projects/bundle-test/src/app/app.module.ts @@ -2,7 +2,8 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; +// import { AppRoutingModule } from './app-routing.module'; +import { IgxChipsModule } from 'igniteui-angular'; @NgModule({ declarations: [ @@ -10,7 +11,8 @@ import { AppRoutingModule } from './app-routing.module'; ], imports: [ BrowserModule, - AppRoutingModule + // AppRoutingModule, + IgxChipsModule ], providers: [], bootstrap: [AppComponent] From d28f4f57eb2b0c7ba949f860c2441255cd2b640e Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 3 Oct 2023 11:44:33 +0300 Subject: [PATCH 9/9] chore(lint): eslint config update --- .eslintrc.json | 5 +++-- projects/igniteui-angular/.eslintrc.json | 3 +++ projects/igniteui-angular/src/lib/calendar/calendar.ts | 2 +- .../lib/grids/hierarchical-grid/hierarchical-grid.spec.ts | 2 +- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 19dd8d1343a..5fb37bee177 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,9 +14,10 @@ ], "createDefaultProgram": true }, + "plugins": [ + "@typescript-eslint" + ], "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", "plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates" ], diff --git a/projects/igniteui-angular/.eslintrc.json b/projects/igniteui-angular/.eslintrc.json index 69a5570767c..cfa83f35e04 100644 --- a/projects/igniteui-angular/.eslintrc.json +++ b/projects/igniteui-angular/.eslintrc.json @@ -63,6 +63,9 @@ "files": [ "*.html" ], + "extends": [ + "plugin:@angular-eslint/template/recommended" + ], "rules": {} } ] diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.ts b/projects/igniteui-angular/src/lib/calendar/calendar.ts index 4b66c98364f..b504fe18e13 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.ts @@ -411,7 +411,7 @@ export class Calendar { // if the week number is greater than week 52 if (weekNumber > 52) { // next year - let nextYear = new Date(date.getFullYear() + 1, 0, 1); + const nextYear = new Date(date.getFullYear() + 1, 0, 1); // first day of the next year let nextYearFirstDay = nextYear.getDay() - weekStart; nextYearFirstDay = nextYearFirstDay >= 0 ? nextYearFirstDay : nextYearFirstDay + 7; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 0f605da4e59..03d8c4caccc 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -459,7 +459,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { }); it('should update already created child grid with new records added to the root data', () => { - let row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; + const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges();