diff --git a/CHANGELOG.md b/CHANGELOG.md index 928db2f64f7..e94e8dceb52 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,37 @@ All notable changes for each version of this project will be documented in this file. +## Unreleased + +### New Features + +- **Animations** + - The animation service and the `igniteui-angular/animations` presets run on the native Web Animations API. `@angular/animations` is no longer a peer dependency and `provideAnimations()` is not required for Ignite UI components. + - Presets are callable. Pass overrides directly: `slideInTop({ duration: 1000, fromPosition: 'translateY(100%)' })`. A bare preset (`openAnimation: slideInTop`) keeps its defaults. Every family exports its params interface (`SlideParams`, `ScaleParams`, ...). + - `animation(keyframes, options)` builds a custom `AnimationReferenceMetadata` from Web Animations API keyframes. + - `provideIgxAnimations('auto' | 'always' | 'none')` controls motion globally. `'auto'` (default) honors `prefers-reduced-motion`. `provideIgxNoopAnimations()` disables animations, e.g. in tests. + - `IGX_ANIMATION_SERVICE` is the injection token for the `AnimationService`. Players expose `state` and `started` signals and a `finished$` observable. + +### Breaking Changes + +- **Animations** + - `useAnimation(preset, { params })` from `@angular/animations` is no longer accepted by `openAnimation`/`closeAnimation` (overlay `PositionSettings`, `ToggleAnimationSettings`, carousel). Use `preset({ ...params })`. The `ng update` migration rewrites these calls, converting `'350ms'`/`'.35s'` durations to milliseconds and `AnimationReferenceMetadata` type annotations to `AnimationInput`. + - `duration` and `delay` are numbers in milliseconds. `easing` stays a CSS easing string. + - `AnimationReferenceMetadata` now means the Web Animations API shape `{ steps: Keyframe[]; options?: KeyframeAnimationOptions }` exported from `igniteui-angular/animations`. Custom animations authored with Angular's `animation()`/`style()`/`animate()` must be rewritten as keyframes. + - `IAnimationParams` is replaced by `AnimationParams` plus the per-family params interfaces. `AnimationUtil` is replaced by `reverseAnimation()`, `isHorizontalAnimation()` and `isVerticalAnimation()`, which also work on parameterized presets. + - `IgxAngularAnimationService` and `IgxAngularAnimationPlayer` are removed. Inject `IGX_ANIMATION_SERVICE` instead. `AnimationService.buildAnimation()` is now `build()`. + - `AnimationPlayer`: `hasStarted()` is the `started` signal, `animationEnd` is `finished$`, `init()` and `animationStart` are removed, `pause()` is added. `finished$` is delivered asynchronously and never fires on `reset()` or `destroy()`. + - `NoopAnimationsModule`/`provideNoopAnimations()` no longer disable Ignite UI animations in tests. Use `provideIgxNoopAnimations()`. + +### Behavioral Changes + +- **Animations** - `prefers-reduced-motion: reduce` disables Ignite UI animations by default. Opt out with `provideIgxAnimations('always')`. + +### Bug Fixes + +- `IgxGridComponent` + - Pressing Tab on the filtering row's condition icon closes the conditions dropdown instead of reopening it. + ## 22.2.0 ### New Features diff --git a/package-lock.json b/package-lock.json index aa299acf3e3..f8a50520995 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "0.0.0", "hasInstallScript": true, "dependencies": { - "@angular/animations": "^22.0.0", "@angular/common": "^22.0.0", "@angular/compiler": "^22.0.0", "@angular/core": "^22.0.0", @@ -311,22 +310,6 @@ "typescript": "*" } }, - "node_modules/@angular/animations": { - "version": "22.1.1", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-22.1.1.tgz", - "integrity": "sha512-97+EXulzVZ7+5pFqS7mooiZxNKu7eh/vv4BIWaatjLBg2Ctpv2nHotXcWMMfD4gpX6skCdJWluSnmDP1iPc2ig==", - "deprecated": "@angular/animations is deprecated. Use `animate.enter` and `animate.leave` instead. For more information see: https://v22.angular.dev/guide/animations.", - "license": "MIT", - "dependencies": { - "tslib": "^2.3.0" - }, - "engines": { - "node": "^22.22.3 || ^24.15.0 || >=26.0.0" - }, - "peerDependencies": { - "@angular/core": "22.1.1" - } - }, "node_modules/@angular/build": { "version": "22.1.3", "resolved": "https://registry.npmjs.org/@angular/build/-/build-22.1.3.tgz", diff --git a/package.json b/package.json index 6521f30c0c8..7535c4732da 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,6 @@ }, "private": true, "dependencies": { - "@angular/animations": "^22.0.0", "@angular/common": "^22.0.0", "@angular/compiler": "^22.0.0", "@angular/core": "^22.0.0", diff --git a/projects/bundle-test/src/app/app.config.ts b/projects/bundle-test/src/app/app.config.ts index 2ce4ad2af63..d7f1591bbe2 100644 --- a/projects/bundle-test/src/app/app.config.ts +++ b/projects/bundle-test/src/app/app.config.ts @@ -3,7 +3,6 @@ import { NavigationError, provideRouter, withNavigationErrorHandler } from '@ang import { routes } from './app.routes'; import { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser'; -import { provideAnimations } from '@angular/platform-browser/animations'; export const appConfig: ApplicationConfig = { providers: [ @@ -12,7 +11,6 @@ export const appConfig: ApplicationConfig = { // force failed routes to throw & fail the SSG part of the build withNavigationErrorHandler((e: NavigationError) => { throw e; }) ), - provideAnimations(), provideClientHydration(withNoIncrementalHydration()) ] }; diff --git a/projects/igniteui-angular-elements/src/utils/injector-ref.ts b/projects/igniteui-angular-elements/src/utils/injector-ref.ts index a2b3ea07bf1..8cdb557a8db 100644 --- a/projects/igniteui-angular-elements/src/utils/injector-ref.ts +++ b/projects/igniteui-angular-elements/src/utils/injector-ref.ts @@ -1,6 +1,5 @@ import { createEnvironmentInjector, EnvironmentInjector, getPlatform, importProvidersFrom, provideZonelessChangeDetection } from '@angular/core'; import { BrowserModule, platformBrowser } from '@angular/platform-browser'; -import { provideAnimations } from '@angular/platform-browser/animations'; import { IgxIconBroadcastService } from '../lib/icon.broadcast.service'; import { ELEMENTS_TOKEN , provideIgniteIntl} from 'igniteui-angular/core'; @@ -27,7 +26,6 @@ const injector = createEnvironmentInjector([ provideZonelessChangeDetection(), importProvidersFrom(BrowserModule), // Elements specific: - provideAnimations(), { provide: ELEMENTS_TOKEN, useValue: true }, IgxIconBroadcastService, provideIgniteIntl() diff --git a/projects/igniteui-angular-performance/src/app/app.config.ts b/projects/igniteui-angular-performance/src/app/app.config.ts index 68c90364260..d953f4c41b3 100644 --- a/projects/igniteui-angular-performance/src/app/app.config.ts +++ b/projects/igniteui-angular-performance/src/app/app.config.ts @@ -1,6 +1,5 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; -import { provideAnimations } from '@angular/platform-browser/animations'; import { routes } from './app.routes'; @@ -8,7 +7,6 @@ export const appConfig: ApplicationConfig = { providers: [ provideBrowserGlobalErrorListeners(), provideZoneChangeDetection({ eventCoalescing: true }), - provideRouter(routes), - provideAnimations() + provideRouter(routes) ] }; diff --git a/projects/igniteui-angular/accordion/src/accordion/accordion.component.spec.ts b/projects/igniteui-angular/accordion/src/accordion/accordion.component.spec.ts index 3c0e4e32816..9508f776970 100644 --- a/projects/igniteui-angular/accordion/src/accordion/accordion.component.spec.ts +++ b/projects/igniteui-angular/accordion/src/accordion/accordion.component.spec.ts @@ -1,11 +1,10 @@ -import { useAnimation } from '@angular/animations'; import { Component, ViewChild, ChangeDetectionStrategy } 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 { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from '../../../expansion-panel/src/public_api'; import { IAccordionCancelableEventArgs, IAccordionEventArgs, IgxAccordionComponent } from './accordion.component'; -import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; +import { resolveAnimation, slideInLeft, slideOutRight } from 'igniteui-angular/animations'; import { UIInteractions } from 'igniteui-angular/test-utils/ui-interactions.spec'; const ACCORDION_CLASS = 'igx-accordion'; @@ -19,9 +18,9 @@ describe('Rendering Tests', () => { waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxAccordionSampleTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); }) ); @@ -44,13 +43,13 @@ describe('Rendering Tests', () => { it('Should allow overriding animationSettings that are used for expansion panels toggle', () => { const animationSettingsCustom = { - closeAnimation: useAnimation(slideOutRight, { params: { duration: '100ms', toPosition: 'translateX(25px)' } }), - openAnimation: useAnimation(slideInLeft, { params: { duration: '500ms', fromPosition: 'translateX(-15px)' } }) + closeAnimation: slideOutRight({ duration: 100, toPosition: 'translateX(25px)' }), + openAnimation: slideInLeft({ duration: 500, fromPosition: 'translateX(-15px)' }) }; const animationSettingsCustomPanel = { - closeAnimation: useAnimation(slideOutRight, { params: { duration: '200ms', toPosition: 'translateX(25px)' } }), - openAnimation: useAnimation(slideInLeft, { params: { duration: '500ms', fromPosition: 'translateX(-15px)' } }) + closeAnimation: slideOutRight({ duration: 200, toPosition: 'translateX(25px)' }), + openAnimation: slideInLeft({ duration: 500, fromPosition: 'translateX(-15px)' }) }; accordion.panels[0].animationSettings = animationSettingsCustomPanel; @@ -58,7 +57,7 @@ describe('Rendering Tests', () => { accordion.animationSettings = animationSettingsCustom; for (let i = 0; i < 3; i++) { - expect(accordion.panels[i].animationSettings.closeAnimation.options.params.duration).toEqual('100ms'); + expect(resolveAnimation(accordion.panels[i].animationSettings.closeAnimation).options.duration).toEqual(100); } }); diff --git a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.spec.ts b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.spec.ts index 52db4b966c7..bd21d40ef58 100644 --- a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.spec.ts +++ b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.spec.ts @@ -2,9 +2,8 @@ import { IgxActionStripComponent, IgxActionStripMenuItemDirective } from './acti import { Component, ViewChild, ElementRef, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxIconComponent } from 'igniteui-angular/icon'; -import { ActionStripResourceStringsEN, changei18n } from 'igniteui-angular/core'; +import { ActionStripResourceStringsEN, changei18n, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { wait } from '../../../test-utils/ui-interactions.spec'; const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions'; @@ -20,12 +19,12 @@ describe('igxActionStrip', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxActionStripComponent, IgxActionStripTestingComponent, IgxActionStripMenuTestingComponent, IgxActionStripCombinedMenuTestingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/animations/README.md b/projects/igniteui-angular/animations/README.md index 3ff7b75154c..9344f28611c 100644 --- a/projects/igniteui-angular/animations/README.md +++ b/projects/igniteui-angular/animations/README.md @@ -1,9 +1,10 @@ # Animations -Ignite UI for Angular includes over 100+ pre-built animations. They are split in 7 groups: +Ignite UI for Angular includes over 100+ pre-built animations. They are split in 8 groups: - [Fade](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/animations/src/fade/README.md) - [Flip](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/animations/src/flip/README.md) + - [Grow](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/animations/src/grow/README.md) - [Miscellaneous](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/animations/src/misc/README.md) - Blink - Heartbeat @@ -14,37 +15,76 @@ Ignite UI for Angular includes over 100+ pre-built animations. They are split in - [Slide](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/animations/src/slide/README.md) - [Swing](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/animations/src/swing/README.md) -Each group accepts a different set of parameters, allowing you to modify the behavior of any of the included animations. Each animation is an [`AnimationReferenceMetadata`](https://angular.io/api/animations/AnimationReferenceMetadata) object as produced by the [`animation`](https://angular.io/api/animations/animation) function provided by Angular. +Animations are built on the [Web Animations API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API). `@angular/animations` is not required. -Reusable animations are designed to make use of animations parameters and the produced animation can be used via the [`useAnimation`](https://angular.io/api/animations/useAnimation) function. +Each animation is an `AnimationPreset`: a callable with defaults. Use it bare, or call it with a partial set of params to override the defaults: -Below is a sample implementation of the fadeIn animation: +``` typescript +import { fadeIn } from "igniteui-angular/animations"; + +fadeIn +fadeIn({ duration: 1000, startOpacity: 0.2 }) +``` + +Each group exports a params interface (`FadeParams`, `SlideParams`, ...). All extend `AnimationParams`: + +``` typescript +interface AnimationParams { + duration: number; // ms + delay: number; // ms + easing: string; // CSS easing +} +``` + +Calling a preset produces an `AnimationReferenceMetadata`, plain WAAPI keyframes plus timing options: + +``` typescript +interface AnimationReferenceMetadata { + steps: Keyframe[]; + options?: KeyframeAnimationOptions; +} +``` + +Below is the implementation of the fadeIn animation: ``` typescript -const base: AnimationMetadata[] = [ - style({ - opacity: `{{startOpacity}}` - }), - animate( - `{{duration}} {{delay}} {{easing}}`, - style({ - opacity: `{{endOpacity}}` - }) - ) +export interface FadeParams extends AnimationParams { + startOpacity: number; + endOpacity: number; +} + +const steps = (p: FadeParams): Keyframe[] => [ + { opacity: p.startOpacity }, + { opacity: p.endOpacity } ]; -const baseParams: IAnimationParams = { - delay: "0s", - duration: "350ms", - easing: EaseOut.sine, +export const fadeIn = definePreset('fadeIn', { + delay: 0, + duration: 350, + easing: EaseOut.Sine, endOpacity: 1, startOpacity: 0 -}; +}, steps); +``` + +## Custom animations + +Wrap raw keyframes with `animation`: + +``` typescript +import { animation } from "igniteui-angular/animations"; -const fadeIn: AnimationReferenceMetadata = animation(base, { - params: { ...baseParams } -}); +const custom = animation( + [{ opacity: 0 }, { opacity: 1 }], + { duration: 300, easing: "ease-out" } +); ``` + +## Utilities + + - `reverseAnimation(input)` - mirrored counterpart with the same overrides, e.g. `slideInLeft({ duration: 1000 })` becomes `slideInRight({ duration: 1000 })`. Unknown inputs come back unchanged. + - `isHorizontalAnimation(input)` / `isVerticalAnimation(input)` - axis the preset moves along. + N.B.: Some of the animations from the Flip, Rotate, and Swing groups require the parent, containing the elements being animated, to have [`perspective`](https://developer.mozilla.org/en/docs/Web/CSS/perspective) as part of its CSS properties. @@ -53,25 +93,23 @@ Some of the animations from the Flip, Rotate, and Swing groups require the paren Ignite UI for Angular includes a set of timing functions that can be used to ease in or out an animation. There are three main timing function groups - **EaseIn**, **EaseOut**, and **EaseInOut**; each containing the following timings: - - quad - - cubic - - quart - - quint - - sine - - expo - - circ - - back + - Quad + - Cubic + - Quart + - Quint + - Sine + - Expo + - Circ + - Back + +Each is a CSS `cubic-bezier()` string. Any CSS easing string works as well. To use a specific timing function, import it first: -``` typescript +``` typescript import { EaseOut } from "igniteui-angular/animations"; ``` and then use it as value for the easing param in any animation: ``` typescript -useAnimation(fadeIn, { - params: { - easing: EaseOut.back - } -}); +fadeIn({ easing: EaseOut.Back }); ``` diff --git a/projects/igniteui-angular/animations/src/fade/README.md b/projects/igniteui-angular/animations/src/fade/README.md index 92404521327..a34a07e1014 100644 --- a/projects/igniteui-angular/animations/src/fade/README.md +++ b/projects/igniteui-angular/animations/src/fade/README.md @@ -1,36 +1,34 @@ # Fade Includes: - + - fadeIn - fadeOut Default Params: ``` typescript -const params: IAnimationParams = { - delay: "0s", - duration: "350ms", - easing: EaseOut.sine, +const params: FadeParams = { + delay: 0, + duration: 350, + easing: EaseOut.Sine, endOpacity: 1, startOpacity: 0 }; ``` +fadeOut swaps `startOpacity` and `endOpacity`. + ## Sample Usage -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. +Presets are callable. Bare, they use their defaults. Passed params override them; omitted ones keep the default. ``` typescript -import { fadeIn } from "igniteui-angular/animations"; -import { EaseOut } from "ignieui-angular/animations/easings"; - -useAnimation(fadeIn, { - params: { - delay: "0.6s", - duration: "0.25s", - easing: EaseOut.quad, - endOpacity: 1, - startOpacity: 0 - } +import { fadeIn, EaseOut } from "igniteui-angular/animations"; + +fadeIn({ + delay: 600, + duration: 250, + easing: EaseOut.Quad, + startOpacity: 0.2 }); ``` diff --git a/projects/igniteui-angular/animations/src/fade/index.ts b/projects/igniteui-angular/animations/src/fade/index.ts index c0bef20435c..44d783ca7ac 100644 --- a/projects/igniteui-angular/animations/src/fade/index.ts +++ b/projects/igniteui-angular/animations/src/fade/index.ts @@ -1,34 +1,28 @@ -import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseOut } from '../easings'; +import { AnimationParams, definePreset } from '../types'; -const base: AnimationMetadata[] = [ - /*@__PURE__*/style({ - opacity: `{{startOpacity}}` - }), - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/style({ - opacity: `{{endOpacity}}` - }) - ) +export interface FadeParams extends AnimationParams { + startOpacity: number; + endOpacity: number; +} + +const steps = (p: FadeParams): Keyframe[] => [ + { opacity: p.startOpacity }, + { opacity: p.endOpacity } ]; -export const fadeIn = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Sine, - endOpacity: 1, - startOpacity: 0 - } -}); +export const fadeIn = /*@__PURE__*/definePreset('fadeIn', { + delay: 0, + duration: 350, + easing: EaseOut.Sine, + endOpacity: 1, + startOpacity: 0 +}, steps); -export const fadeOut = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Sine, - endOpacity: 0, - startOpacity: 1 - } -}); +export const fadeOut = /*@__PURE__*/definePreset('fadeOut', { + delay: 0, + duration: 350, + easing: EaseOut.Sine, + endOpacity: 0, + startOpacity: 1 +}, steps); diff --git a/projects/igniteui-angular/animations/src/flip/README.md b/projects/igniteui-angular/animations/src/flip/README.md index 8fdd4e994c9..84e41552292 100644 --- a/projects/igniteui-angular/animations/src/flip/README.md +++ b/projects/igniteui-angular/animations/src/flip/README.md @@ -14,10 +14,10 @@ Includes: Default Params: ``` typescript -const params: IAnimationParams = { - delay: "0s", - duration: "600ms", - easing: EaseOut.quad, +const params: FlipParams = { + delay: 0, + duration: 600, + easing: EaseOut.Quad, endAngle: 180, endDistance: "0px", rotateX: 1, @@ -28,11 +28,14 @@ const params: IAnimationParams = { }; ``` +Per preset: `rotateX`/`rotateY` pick the axis, `endAngle` is `180` or `-180`, `endDistance` is `170px`/`-170px` for the Fwd/Bck variants. + ## Sample Usage -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. +Presets are callable. Bare, they use their defaults. Passed params override them; omitted ones keep the default. ``` typescript import { flipTop } from "igniteui-angular/animations"; -useAnimation(fadeIn); +flipTop +flipTop({ duration: 1000 }) ``` diff --git a/projects/igniteui-angular/animations/src/flip/index.ts b/projects/igniteui-angular/animations/src/flip/index.ts index 2fdb2c0b4ad..acce0dae3fe 100644 --- a/projects/igniteui-angular/animations/src/flip/index.ts +++ b/projects/igniteui-angular/animations/src/flip/index.ts @@ -1,150 +1,59 @@ -import { - animate, - animation, - AnimationMetadata, - 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 = /*@__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 = /*@__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 = /*@__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 = /*@__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 +import { AnimationParams, AnimationPreset, definePreset } from '../types'; + +export interface FlipParams extends AnimationParams { + startAngle: number; + endAngle: number; + /** CSS length, e.g. `170px` */ + startDistance: string; + endDistance: string; + /** rotate3d axis vector */ + rotateX: number; + rotateY: number; + rotateZ: number; +} + +// WAAPI has no separate initial style, so the 3D setup rides on every keyframe. +const flipStyle = { backfaceVisibility: 'hidden', transformStyle: 'preserve-3d' }; + +const steps = (p: FlipParams): Keyframe[] => [ + { + ...flipStyle, + offset: 0, + transform: `translateZ(${p.startDistance}) rotate3d(${p.rotateX}, ${p.rotateY}, ${p.rotateZ}, ${p.startAngle}deg)` + }, + { + ...flipStyle, + offset: 1, + transform: `translateZ(${p.endDistance}) rotate3d(${p.rotateX}, ${p.rotateY}, ${p.rotateZ}, ${p.endAngle}deg)` } -}); - -export const flipHorFwd = /*@__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 = /*@__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 = /*@__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 = /*@__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 - } -}); +const NO_DISTANCE = '0px'; +const FWD_DISTANCE = '170px'; +const BCK_DISTANCE = '-170px'; +const HALF_TURN = 180; + +const flip = (name: string, rotateX: number, rotateY: number, endAngle: number, endDistance: string): AnimationPreset => + definePreset(name, { + delay: 0, + duration: 600, + easing: EaseOut.Quad, + startAngle: 0, + endAngle, + startDistance: NO_DISTANCE, + endDistance, + rotateX, + rotateY, + rotateZ: 0 + }, steps); + +export const flipTop = /*@__PURE__*/flip('flipTop', 1, 0, HALF_TURN, NO_DISTANCE); +export const flipBottom = /*@__PURE__*/flip('flipBottom', 1, 0, -HALF_TURN, NO_DISTANCE); +export const flipLeft = /*@__PURE__*/flip('flipLeft', 0, 1, HALF_TURN, NO_DISTANCE); +export const flipRight = /*@__PURE__*/flip('flipRight', 0, 1, -HALF_TURN, NO_DISTANCE); + +export const flipHorFwd = /*@__PURE__*/flip('flipHorFwd', 1, 0, HALF_TURN, FWD_DISTANCE); +export const flipHorBck = /*@__PURE__*/flip('flipHorBck', 1, 0, HALF_TURN, BCK_DISTANCE); +export const flipVerFwd = /*@__PURE__*/flip('flipVerFwd', 0, 1, HALF_TURN, FWD_DISTANCE); +export const flipVerBck = /*@__PURE__*/flip('flipVerBck', 0, 1, HALF_TURN, BCK_DISTANCE); diff --git a/projects/igniteui-angular/animations/src/grow/README.md b/projects/igniteui-angular/animations/src/grow/README.md new file mode 100644 index 00000000000..0d502d7e21f --- /dev/null +++ b/projects/igniteui-angular/animations/src/grow/README.md @@ -0,0 +1,35 @@ +# Grow + +Includes: + + - growVerIn + - growVerOut + +Default Params: + +``` typescript +const params: GrowParams = { + delay: 0, + duration: 350, + easing: EaseOut.Quad, + endOpacity: 1, + startOpacity: 0, + startHeight: "0px", + endHeight: "auto", + startPadding: "0px" +}; +``` + +growVerOut swaps the start/end values and sets `endPadding: "0px"` instead of `startPadding`. + +`'auto'` height is measured on the element by the player. `startPadding` and `endPadding` are optional; an omitted one is taken from the computed style. + +## Sample Usage +Presets are callable. Bare, they use their defaults. Passed params override them; omitted ones keep the default. + +``` typescript +import { growVerIn } from "igniteui-angular/animations"; + +growVerIn +growVerIn({ duration: 500 }) +``` diff --git a/projects/igniteui-angular/animations/src/grow/index.ts b/projects/igniteui-angular/animations/src/grow/index.ts index ec39a3f72a8..f2ed515a111 100644 --- a/projects/igniteui-angular/animations/src/grow/index.ts +++ b/projects/igniteui-angular/animations/src/grow/index.ts @@ -1,46 +1,42 @@ -import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseOut } from '../easings'; +import { AnimationParams, definePreset } from '../types'; -const base: AnimationMetadata[] = [ - /*@__PURE__*/style({ - opacity: `{{ startOpacity }}`, - height: `{{ startHeight }}`, - paddingBlock: `{{ startPadding }}` - }), - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/style({ - opacity: `{{ endOpacity }}`, - height: `{{ endHeight }}`, - paddingBlock: `{{ endPadding }}` - }) - ) +/** + * `'auto'` height is measured on the element when the animation is created. + * An omitted padding is filled in by the browser from the computed style. + */ +export interface GrowParams extends AnimationParams { + startOpacity: number; + endOpacity: number; + startHeight: string; + endHeight: string; + startPadding?: string; + endPadding?: string; +} + +const steps = (p: GrowParams): Keyframe[] => [ + { opacity: p.startOpacity, height: p.startHeight, paddingBlock: p.startPadding }, + { opacity: p.endOpacity, height: p.endHeight, paddingBlock: p.endPadding } ]; -export const growVerIn = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - startOpacity: 0, - endOpacity: 1, - startHeight: '0px', - endHeight: '*', - startPadding: '0px', - endPadding: '*' - } -}); +export const growVerIn = /*@__PURE__*/definePreset('growVerIn', { + delay: 0, + duration: 350, + easing: EaseOut.Quad, + startOpacity: 0, + endOpacity: 1, + startHeight: '0px', + endHeight: 'auto', + startPadding: '0px' +}, steps); -export const growVerOut = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - startOpacity: 1, - endOpacity: 0, - startHeight: '*', - endHeight: '0px', - startPadding: '*', - endPadding: '0px' - } -}); +export const growVerOut = /*@__PURE__*/definePreset('growVerOut', { + delay: 0, + duration: 350, + easing: EaseOut.Quad, + startOpacity: 1, + endOpacity: 0, + startHeight: 'auto', + endHeight: '0px', + endPadding: '0px' +}, steps); diff --git a/projects/igniteui-angular/animations/src/interface.ts b/projects/igniteui-angular/animations/src/interface.ts deleted file mode 100644 index 6a79071478d..00000000000 --- a/projects/igniteui-angular/animations/src/interface.ts +++ /dev/null @@ -1,26 +0,0 @@ -export interface IAnimationParams { - delay: string; - duration: string; - easing: any; - startOpacity?: number; - endOpacity?: number; - startAngle?: number; - endAngle?: number; - startDistance?: string; - endDistance?: string; - fromPosition?: string; - toPosition?: string; - fromScale?: number; - midScale?: number; - toScale?: number; - xPos?: string; - yPos?: string; - direction?: string; - rotateX?: number; - rotateY?: number; - rotateZ?: number; - startHeight?: string; - endHeight?: string; - startPadding?: string; - endPadding?: string; -} diff --git a/projects/igniteui-angular/animations/src/misc/README.md b/projects/igniteui-angular/animations/src/misc/README.md index 22f327260fa..d04a354f830 100644 --- a/projects/igniteui-angular/animations/src/misc/README.md +++ b/projects/igniteui-angular/animations/src/misc/README.md @@ -2,7 +2,7 @@ Includes: - blink - - hearbeat + - heartbeat - pulsateFwd - pulsateBck - shakeHor @@ -20,9 +20,9 @@ Includes: Default Blink Params: ``` typescript -const blinkParams: IAnimationParams = { - delay: "0s", - duration: ".8s", +const blinkParams: BlinkParams = { + delay: 0, + duration: 800, easing: "ease-in-out", fromScale: .2, midScale: 1.2, @@ -30,12 +30,12 @@ const blinkParams: IAnimationParams = { }; ``` -Default Hearbeat Params: +Default Heartbeat Params: ``` typescript -const heartbeatParams: IAnimationParams = { - delay: "0s", - duration: "1.5s", +const heartbeatParams: AnimationParams = { + delay: 0, + duration: 1500, easing: "ease-in-out" }; ``` @@ -43,23 +43,25 @@ const heartbeatParams: IAnimationParams = { Default Pulsate Params: ``` typescript -const pulsateParams: IAnimationParams = { - delay: "0s", - duration: ".5s", +const pulsateParams: PulsateParams = { + delay: 0, + duration: 500, easing: "ease-in-out", fromScale: 1, toScale: 1.1 }; ``` - + +pulsateBck uses `toScale: .9`. + Default Shake Params: ``` typescript -const shakeParams: IAnimationParams = { - delay: "0s", +const shakeParams: ShakeParams = { + delay: 0, direction: "X", - duration: "800ms", - easing: EaseInOut.quad, + duration: 800, + easing: EaseInOut.Quad, endAngle: 0, endDistance: "8px", startAngle: 0, @@ -68,11 +70,15 @@ const shakeParams: IAnimationParams = { yPos: "center" }; ``` + +shakeHor/shakeVer translate only. The other shakes rotate around `xPos`/`yPos` with `startAngle: 4`, `endAngle: 2` (shakeCenter: `10`/`8`) and zero distance. + ## Sample Usage -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. +Presets are callable. Bare, they use their defaults. Passed params override them; omitted ones keep the default. ``` typescript import { blink } from "igniteui-angular/animations"; -useAnimation(blink); +blink +blink({ duration: 400 }) ``` diff --git a/projects/igniteui-angular/animations/src/misc/index.ts b/projects/igniteui-angular/animations/src/misc/index.ts index c565e4696bc..0951d9c517f 100644 --- a/projects/igniteui-angular/animations/src/misc/index.ts +++ b/projects/igniteui-angular/animations/src/misc/index.ts @@ -1,4 +1,5 @@ export { + ShakeParams, shakeHor, shakeVer, shakeTop, @@ -11,4 +12,4 @@ export { shakeBl, shakeTl } from './shake'; -export { pulsateFwd, pulsateBck, heartbeat, blink } from './pulsate'; +export { PulsateParams, BlinkParams, pulsateFwd, pulsateBck, heartbeat, blink } from './pulsate'; diff --git a/projects/igniteui-angular/animations/src/misc/pulsate.ts b/projects/igniteui-angular/animations/src/misc/pulsate.ts index bf18d2591c5..93ac4936dd5 100644 --- a/projects/igniteui-angular/animations/src/misc/pulsate.ts +++ b/projects/igniteui-angular/animations/src/misc/pulsate.ts @@ -1,122 +1,69 @@ -import { - animate, - animation, - AnimationMetadata, - keyframes, - style -} from '@angular/animations'; +import { AnimationParams, definePreset } from '../types'; -const heartbeatBase: AnimationMetadata[] = [ - /*@__PURE__*/style({ - animationTimingFunction: `ease-out`, - transform: `scale(1)`, - transformOrigin: `center center` - }), - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/keyframes([ - /*@__PURE__*/style({ - animationTimingFunction: `ease-in`, - offset: 0.1, - transform: `scale(0.91)` - }), - /*@__PURE__*/style({ - animationTimingFunction: `ease-out`, - offset: 0.17, - transform: `scale(0.98)` - }), - /*@__PURE__*/style({ - animationTimingFunction: `ease-in`, - offset: 0.33, - transform: `scale(0.87)` - }), - /*@__PURE__*/style({ - animationTimingFunction: `ease-out`, - offset: 0.45, - transform: `scale(1)` - }) - ]) - ) +export interface PulsateParams extends AnimationParams { + fromScale: number; + toScale: number; +} + +export interface BlinkParams extends AnimationParams { + fromScale: number; + midScale: number; + toScale: number; +} + +const EASING = 'ease-in-out'; +const CENTER = 'center center'; + +const pulsateSteps = (p: PulsateParams): Keyframe[] => [ + { offset: 0, transform: `scale(${p.fromScale})` }, + { offset: 0.5, transform: `scale(${p.toScale})` }, + { offset: 1, transform: `scale(${p.fromScale})` } ]; -const pulsateBase: AnimationMetadata[] = [ - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/keyframes([ - /*@__PURE__*/style({ - offset: 0, - transform: `scale({{fromScale}})` - }), - /*@__PURE__*/style({ - offset: 0.5, - transform: `scale({{toScale}})` - }), - /*@__PURE__*/style({ - offset: 1, - transform: `scale({{fromScale}})` - }) - ]) - ) +// Each keyframe eases on its own. +// The final keyframe holds scale(1) until the end; WAAPI does not do that implicitly. +const heartbeatSteps = (): Keyframe[] => [ + { offset: 0, transform: 'scale(1)', transformOrigin: CENTER, easing: 'ease-out' }, + { offset: 0.1, transform: 'scale(0.91)', easing: 'ease-in' }, + { offset: 0.17, transform: 'scale(0.98)', easing: 'ease-out' }, + { offset: 0.33, transform: 'scale(0.87)', easing: 'ease-in' }, + { offset: 0.45, transform: 'scale(1)', easing: 'ease-out' }, + { offset: 1, transform: 'scale(1)', transformOrigin: CENTER } ]; -const blinkBase: AnimationMetadata[] = [ - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/keyframes([ - /*@__PURE__*/style({ - offset: 0, - opacity: .8, - transform: `scale({{fromScale}})` - }), - /*@__PURE__*/style({ - offset: 0.8, - opacity: 0, - transform: `scale({{midScale}})` - }), - /*@__PURE__*/style({ - offset: 1, - opacity: 0, - transform: `scale({{toScale}})` - }) - ]) - ) +const blinkSteps = (p: BlinkParams): Keyframe[] => [ + { offset: 0, opacity: .8, transform: `scale(${p.fromScale})` }, + { offset: 0.8, opacity: 0, transform: `scale(${p.midScale})` }, + { offset: 1, opacity: 0, transform: `scale(${p.toScale})` } ]; -export const pulsateFwd = /*@__PURE__*/animation(pulsateBase, { - params: { - delay: '0s', - duration: '.5s', - easing: 'ease-in-out', - fromScale: 1, - toScale: 1.1 - } -}); +export const pulsateFwd = /*@__PURE__*/definePreset('pulsateFwd', { + delay: 0, + duration: 500, + easing: EASING, + fromScale: 1, + toScale: 1.1 +}, pulsateSteps); -export const pulsateBck = /*@__PURE__*/animation(pulsateBase, { - params: { - delay: '0s', - duration: '.5s', - easing: 'ease-in-out', - fromScale: 1, - toScale: .9 - } -}); +export const pulsateBck = /*@__PURE__*/definePreset('pulsateBck', { + delay: 0, + duration: 500, + easing: EASING, + fromScale: 1, + toScale: .9 +}, pulsateSteps); -export const heartbeat = /*@__PURE__*/animation(heartbeatBase, { - params: { - delay: '0s', - duration: '1.5s', - easing: 'ease-in-out' - } -}); +export const heartbeat = /*@__PURE__*/definePreset('heartbeat', { + delay: 0, + duration: 1500, + easing: EASING +}, heartbeatSteps); -export const blink = /*@__PURE__*/animation(blinkBase, { - params: { - delay: '0s', - duration: '.8s', - easing: 'ease-in-out', - fromScale: .2, - midScale: 1.2, - toScale: 2.2 - } -}); +export const blink = /*@__PURE__*/definePreset('blink', { + delay: 0, + duration: 800, + easing: EASING, + fromScale: .2, + midScale: 1.2, + toScale: 2.2 +}, blinkSteps); diff --git a/projects/igniteui-angular/animations/src/misc/shake.ts b/projects/igniteui-angular/animations/src/misc/shake.ts index 5026ad78b42..5db50a7655f 100644 --- a/projects/igniteui-angular/animations/src/misc/shake.ts +++ b/projects/igniteui-angular/animations/src/misc/shake.ts @@ -1,231 +1,82 @@ -import { - animate, - animation, - AnimationMetadata, - keyframes, - style -} from '@angular/animations'; import { EaseInOut } from '../easings'; - -const baseRecipe: AnimationMetadata[] = [ - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/keyframes([ - /*@__PURE__*/style({ - offset: 0, - transform: `rotate(0deg) translate{{direction}}(0)`, - transformOrigin: `{{xPos}} {{yPos}}` - }), - /*@__PURE__*/style({ - offset: 0.1, - transform: `rotate({{endAngle}}deg) translate{{direction}}(-{{startDistance}})` - }), - /*@__PURE__*/style({ - offset: 0.2, - transform: `rotate(-{{startAngle}}deg) translate{{direction}}({{startDistance}})` - }), - /*@__PURE__*/style({ - offset: 0.3, - transform: `rotate({{startAngle}}deg) translate{{direction}}(-{{startDistance}})` - }), - /*@__PURE__*/style({ - offset: 0.4, - transform: `rotate(-{{startAngle}}deg) translate{{direction}}({{startDistance}})` - - }), - /*@__PURE__*/style({ - offset: 0.5, - transform: `rotate({{startAngle}}deg) translate{{direction}}(-{{startDistance}})` - }), - /*@__PURE__*/style({ - offset: 0.6, - transform: `rotate(-{{startAngle}}deg) translate{{direction}}({{startDistance}})` - - }), - /*@__PURE__*/style({ - offset: 0.7, - transform: `rotate({{startAngle}}deg) translate{{direction}}(-{{startDistance}})` - }), - /*@__PURE__*/style({ - offset: 0.8, - transform: `rotate(-{{endAngle}}deg) translate{{direction}}({{endDistance}})` - - }), - /*@__PURE__*/style({ - offset: 0.9, - transform: `rotate({{endAngle}}deg) translate{{direction}}(-{{endDistance}})` - - }), - /*@__PURE__*/style({ - offset: 1, - transform: `rotate(0deg) translate{{direction}}(0)`, - transformOrigin: `{{xPos}} {{yPos}}` - }) - ]) - ) -]; - -export const shakeHor = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - direction: 'X', - duration: '800ms', - easing: EaseInOut.Quad, - endAngle: 0, - endDistance: '8px', - startAngle: 0, - startDistance: '10px', - xPos: 'center', - yPos: 'center' - } -}); - -export const shakeVer = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - direction: 'Y', - duration: '800ms', - easing: EaseInOut.Quad, - endAngle: 0, - endDistance: '8px', - startAngle: 0, - startDistance: '10px', - xPos: 'center', - yPos: 'center' - } -}); - -export const shakeTop = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - direction: 'X', - duration: '800ms', - easing: EaseInOut.Quad, - xPos: 'center', - endAngle: 2, - endDistance: '0', - startAngle: 4, - startDistance: '0', - yPos: 'top' - } -}); - -export const shakeBottom = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '800ms', - easing: EaseInOut.Quad, - xPos: 'center', - direction: 'Y', - endAngle: 2, - endDistance: '0', - startAngle: 4, - startDistance: '0', - yPos: 'bottom' - } -}); - -export const shakeRight = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '800ms', - easing: EaseInOut.Quad, - direction: 'Y', - endAngle: 2, - endDistance: '0', - startAngle: 4, - startDistance: '0', - xPos: 'right', - yPos: 'center' - } -}); - -export const shakeLeft = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '800ms', - easing: EaseInOut.Quad, - direction: 'Y', - endAngle: 2, - endDistance: '0', - startAngle: 4, - startDistance: '0', - xPos: 'left', - yPos: 'center' - } -}); - -export const shakeCenter = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '800ms', - easing: EaseInOut.Quad, - direction: 'Y', - endAngle: 8, - endDistance: '0', - startAngle: 10, - startDistance: '0', - xPos: 'center', - yPos: 'center' - } -}); - -export const shakeTr = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '800ms', - easing: EaseInOut.Quad, - direction: 'Y', - endAngle: 2, - endDistance: '0', - startAngle: 4, - startDistance: '0', - xPos: 'right', - yPos: 'top' - } -}); - -export const shakeBr = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '800ms', - easing: EaseInOut.Quad, - direction: 'Y', - endAngle: 2, - endDistance: '0', - startAngle: 4, - startDistance: '0', - xPos: 'right', - yPos: 'bottom' - } -}); - -export const shakeBl = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '800ms', - easing: EaseInOut.Quad, - direction: 'Y', - endAngle: 2, - endDistance: '0', - startAngle: 4, - startDistance: '0', - xPos: 'left', - yPos: 'bottom' - } -}); - -export const shakeTl = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '800ms', +import { AnimationParams, AnimationPreset, definePreset } from '../types'; + +export interface ShakeParams extends AnimationParams { + startAngle: number; + endAngle: number; + /** CSS length, e.g. `10px` */ + startDistance: string; + endDistance: string; + /** Translate axis: `X` or `Y` */ + direction: string; + /** transform-origin parts */ + xPos: string; + yPos: string; +} + +const steps = (p: ShakeParams): Keyframe[] => { + const rest = `rotate(0deg) translate${p.direction}(0)`; + const origin = `${p.xPos} ${p.yPos}`; + + // Alternating swings: rotate one way while translating the other. + const fwd = (angle: number, distance: string): string => + `rotate(${angle}deg) translate${p.direction}(-${distance})`; + const back = (angle: number, distance: string): string => + `rotate(-${angle}deg) translate${p.direction}(${distance})`; + + return [ + { offset: 0, transform: rest, transformOrigin: origin }, + { offset: 0.1, transform: fwd(p.endAngle, p.startDistance) }, + { offset: 0.2, transform: back(p.startAngle, p.startDistance) }, + { offset: 0.3, transform: fwd(p.startAngle, p.startDistance) }, + { offset: 0.4, transform: back(p.startAngle, p.startDistance) }, + { offset: 0.5, transform: fwd(p.startAngle, p.startDistance) }, + { offset: 0.6, transform: back(p.startAngle, p.startDistance) }, + { offset: 0.7, transform: fwd(p.startAngle, p.startDistance) }, + { offset: 0.8, transform: back(p.endAngle, p.endDistance) }, + { offset: 0.9, transform: fwd(p.endAngle, p.endDistance) }, + { offset: 1, transform: rest, transformOrigin: origin } + ]; +}; + +type ShakeShape = Omit; + +const shake = (name: string, shape: ShakeShape): AnimationPreset => + definePreset(name, { + delay: 0, + duration: 800, easing: EaseInOut.Quad, - direction: 'Y', - endAngle: 2, - endDistance: '0', - startAngle: 4, - startDistance: '0', - xPos: 'left', - yPos: 'top' - } -}); + ...shape + }, steps); + +// Translation only, no rotation. +const SLIDE = { + endAngle: 0, + endDistance: '8px', + startAngle: 0, + startDistance: '10px', + xPos: 'center', + yPos: 'center' +}; + +// Rotation around an anchor, no translation. +const TILT = { + direction: 'Y', + endAngle: 2, + endDistance: '0', + startAngle: 4, + startDistance: '0' +}; + +export const shakeHor = /*@__PURE__*/shake('shakeHor', { ...SLIDE, direction: 'X' }); +export const shakeVer = /*@__PURE__*/shake('shakeVer', { ...SLIDE, direction: 'Y' }); + +export const shakeTop = /*@__PURE__*/shake('shakeTop', { ...TILT, direction: 'X', xPos: 'center', yPos: 'top' }); +export const shakeBottom = /*@__PURE__*/shake('shakeBottom', { ...TILT, xPos: 'center', yPos: 'bottom' }); +export const shakeRight = /*@__PURE__*/shake('shakeRight', { ...TILT, xPos: 'right', yPos: 'center' }); +export const shakeLeft = /*@__PURE__*/shake('shakeLeft', { ...TILT, xPos: 'left', yPos: 'center' }); +export const shakeCenter = /*@__PURE__*/shake('shakeCenter', { ...TILT, endAngle: 8, startAngle: 10, xPos: 'center', yPos: 'center' }); +export const shakeTr = /*@__PURE__*/shake('shakeTr', { ...TILT, xPos: 'right', yPos: 'top' }); +export const shakeBr = /*@__PURE__*/shake('shakeBr', { ...TILT, xPos: 'right', yPos: 'bottom' }); +export const shakeBl = /*@__PURE__*/shake('shakeBl', { ...TILT, xPos: 'left', yPos: 'bottom' }); +export const shakeTl = /*@__PURE__*/shake('shakeTl', { ...TILT, xPos: 'left', yPos: 'top' }); diff --git a/projects/igniteui-angular/animations/src/public_api.ts b/projects/igniteui-angular/animations/src/public_api.ts index 6c218cada7c..0fc36d274b0 100644 --- a/projects/igniteui-angular/animations/src/public_api.ts +++ b/projects/igniteui-angular/animations/src/public_api.ts @@ -1,8 +1,9 @@ -export { IAnimationParams } from './interface'; -export { AnimationUtil } from './util'; +export * from './types'; +export { reverseAnimation, isHorizontalAnimation, isVerticalAnimation } from './util'; export { EaseIn, EaseInOut, EaseOut } from './easings'; -export { fadeIn, fadeOut } from './fade/index'; +export { FadeParams, fadeIn, fadeOut } from './fade/index'; export { + FlipParams, flipTop, flipRight, flipBottom, @@ -13,6 +14,7 @@ export { flipVerBck } from './flip/index'; export { + RotateParams, rotateInCenter, rotateInTop, rotateInRight, @@ -42,6 +44,8 @@ export { } from './rotate/index'; export * from './misc/index'; export { + ScaleDirection, + ScaleParams, scaleInTop, scaleInRight, scaleInBottom, @@ -74,6 +78,7 @@ export { scaleOutHorRight } from './scale/index'; export { + SlideParams, slideInTop, slideInRight, slideInBottom, @@ -92,6 +97,7 @@ export { slideOutTl } from './slide/index'; export { + SwingParams, swingInTopFwd, swingInRightFwd, swingInLeftFwd, @@ -109,4 +115,4 @@ export { swingOutBottomBck, swingOutLeftBck } from './swing/index'; -export { growVerIn, growVerOut } from './grow/index'; +export { GrowParams, growVerIn, growVerOut } from './grow/index'; diff --git a/projects/igniteui-angular/animations/src/rotate/README.md b/projects/igniteui-angular/animations/src/rotate/README.md index de5443b4373..b55b47abe1c 100644 --- a/projects/igniteui-angular/animations/src/rotate/README.md +++ b/projects/igniteui-angular/animations/src/rotate/README.md @@ -32,10 +32,10 @@ Includes: Default Params: ``` typescript -const params: IAnimationParams = { - delay: "0s", - duration: "600ms", - easing: EaseOut.quad, +const params: RotateParams = { + delay: 0, + duration: 600, + easing: EaseOut.Quad, endAngle: 0, endOpacity: 1, rotateX: 0, @@ -48,11 +48,14 @@ const params: IAnimationParams = { }; ``` +Out presets use `EaseIn.Quad` and swap the opacities. `xPos`/`yPos` are the transform origin; Diagonal/Hor/Ver presets change the rotate axis. + ## Sample Usage -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. +Presets are callable. Bare, they use their defaults. Passed params override them; omitted ones keep the default. ``` typescript import { rotateInCenter } from "igniteui-angular/animations"; -useAnimation(rotateInCenter); +rotateInCenter +rotateInCenter({ startAngle: -180 }) ``` diff --git a/projects/igniteui-angular/animations/src/rotate/index.ts b/projects/igniteui-angular/animations/src/rotate/index.ts index aabfd613de5..cb5cb04f566 100644 --- a/projects/igniteui-angular/animations/src/rotate/index.ts +++ b/projects/igniteui-angular/animations/src/rotate/index.ts @@ -1,461 +1,97 @@ -import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseIn, EaseOut } from '../easings'; - -const baseRecipe: AnimationMetadata[] = [ - /*@__PURE__*/style({ - opacity: `{{startOpacity}}`, - transform: `rotate3d({{rotateX}},{{rotateY}},{{rotateZ}},{{startAngle}}deg)`, - transformOrigin: `{{xPos}} {{yPos}}` - }), - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/style({ - offset: 0, - opacity: `{{endOpacity}}`, - transform: `rotate3d({{rotateX}},{{rotateY}},{{rotateZ}},{{endAngle}}deg)`, - transformOrigin: `{{xPos}} {{yPos}}` - }) - ) -]; - -export const rotateInCenter = /*@__PURE__*/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' - } -}); - -export const rotateOutCenter = /*@__PURE__*/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 - } -}); - -export const rotateInTop = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateOutTop = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateInRight = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateOutRight = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateInBottom = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateOutBottom = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateInLeft = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateOutLeft = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateInTr = /*@__PURE__*/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: 'right', - yPos: 'top' - } -}); - -export const rotateOutTr = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateInBr = /*@__PURE__*/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: 'right', - yPos: 'bottom' +import { AnimationParams, AnimationPreset, definePreset } from '../types'; + +export interface RotateParams extends AnimationParams { + startOpacity: number; + endOpacity: number; + /** Degrees */ + startAngle: number; + endAngle: number; + /** rotate3d axis vector */ + rotateX: number; + rotateY: number; + rotateZ: number; + /** CSS transform-origin, e.g. `center`, `left`, `50%` */ + xPos: string; + yPos: string; +} + +type Axis = [rotateX: number, rotateY: number, rotateZ: number]; + +const steps = (p: RotateParams): Keyframe[] => [ + { + opacity: p.startOpacity, + transform: `rotate3d(${p.rotateX},${p.rotateY},${p.rotateZ},${p.startAngle}deg)`, + transformOrigin: `${p.xPos} ${p.yPos}` + }, + { + opacity: p.endOpacity, + transform: `rotate3d(${p.rotateX},${p.rotateY},${p.rotateZ},${p.endAngle}deg)`, + transformOrigin: `${p.xPos} ${p.yPos}` } -}); +]; -export const rotateOutBr = /*@__PURE__*/animation(baseRecipe, { - params: { - 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 Z_AXIS: Axis = [0, 0, 1]; +const CENTER = 'center'; -export const rotateInBl = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '600ms', +const rotateIn = (name: string, xPos: string, yPos: string, [rotateX, rotateY, rotateZ]: Axis = Z_AXIS): AnimationPreset => + definePreset(name, { + delay: 0, + duration: 600, easing: EaseOut.Quad, - endAngle: 0, - endOpacity: 1, - rotateX: 0, - rotateY: 0, - rotateZ: 1, - startAngle: -360, startOpacity: 0, - xPos: 'left', - yPos: 'bottom' - } -}); - -export const rotateOutBl = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateInTl = /*@__PURE__*/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: 'left', - yPos: 'top' - } -}); - -export const rotateOutTl = /*@__PURE__*/animation(baseRecipe, { - params: { - 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' - } -}); - -export const rotateInDiagonal1 = /*@__PURE__*/animation(baseRecipe, { - params: { - 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 - } -}); + rotateX, + rotateY, + rotateZ, + xPos, + yPos + }, steps); -export const rotateOutDiagonal1 = /*@__PURE__*/animation(baseRecipe, { - params: { - delay: '0s', - duration: '600ms', - endAngle: 0, - startAngle: -360, - xPos: 'center', - yPos: 'center', +const rotateOut = (name: string, xPos: string, yPos: string, [rotateX, rotateY, rotateZ]: Axis = Z_AXIS): AnimationPreset => + definePreset(name, { + delay: 0, + duration: 600, easing: EaseIn.Quad, - endOpacity: 0, startOpacity: 1, - rotateX: 1, - rotateY: 1, - rotateZ: 0 - } -}); - -export const rotateInDiagonal2 = /*@__PURE__*/animation(baseRecipe, { - params: { - 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 - } -}); - -export const rotateOutDiagonal2 = /*@__PURE__*/animation(baseRecipe, { - params: { - 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 - } -}); - -export const rotateInHor = /*@__PURE__*/animation(baseRecipe, { - params: { - 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 - } -}); - -export const rotateOutHor = /*@__PURE__*/animation(baseRecipe, { - params: { - 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 - } -}); - -export const rotateInVer = /*@__PURE__*/animation(baseRecipe, { - params: { - 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 - } -}); - -export const rotateOutVer = /*@__PURE__*/animation(baseRecipe, { - params: { - 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 - } -}); + rotateX, + rotateY, + rotateZ, + xPos, + yPos + }, steps); + +// Edge presets carry the edge in xPos. +export const rotateInCenter = /*@__PURE__*/rotateIn('rotateInCenter', CENTER, CENTER); +export const rotateOutCenter = /*@__PURE__*/rotateOut('rotateOutCenter', CENTER, CENTER); +export const rotateInTop = /*@__PURE__*/rotateIn('rotateInTop', 'top', CENTER); +export const rotateOutTop = /*@__PURE__*/rotateOut('rotateOutTop', 'top', CENTER); +export const rotateInRight = /*@__PURE__*/rotateIn('rotateInRight', 'right', CENTER); +export const rotateOutRight = /*@__PURE__*/rotateOut('rotateOutRight', 'right', CENTER); +export const rotateInBottom = /*@__PURE__*/rotateIn('rotateInBottom', 'bottom', CENTER); +export const rotateOutBottom = /*@__PURE__*/rotateOut('rotateOutBottom', 'bottom', CENTER); +export const rotateInLeft = /*@__PURE__*/rotateIn('rotateInLeft', 'left', CENTER); +export const rotateOutLeft = /*@__PURE__*/rotateOut('rotateOutLeft', 'left', CENTER); + +export const rotateInTr = /*@__PURE__*/rotateIn('rotateInTr', 'right', 'top'); +export const rotateOutTr = /*@__PURE__*/rotateOut('rotateOutTr', 'right', 'top'); +export const rotateInBr = /*@__PURE__*/rotateIn('rotateInBr', 'right', 'bottom'); +export const rotateOutBr = /*@__PURE__*/rotateOut('rotateOutBr', 'right', 'bottom'); +export const rotateInBl = /*@__PURE__*/rotateIn('rotateInBl', 'left', 'bottom'); +export const rotateOutBl = /*@__PURE__*/rotateOut('rotateOutBl', 'left', 'bottom'); +export const rotateInTl = /*@__PURE__*/rotateIn('rotateInTl', 'left', 'top'); +export const rotateOutTl = /*@__PURE__*/rotateOut('rotateOutTl', 'left', 'top'); + +export const rotateInDiagonal1 = /*@__PURE__*/rotateIn('rotateInDiagonal1', CENTER, CENTER, [1, 1, 0]); +export const rotateOutDiagonal1 = /*@__PURE__*/rotateOut('rotateOutDiagonal1', CENTER, CENTER, [1, 1, 0]); +export const rotateInDiagonal2 = /*@__PURE__*/rotateIn('rotateInDiagonal2', CENTER, CENTER, [-1, 1, 0]); +export const rotateOutDiagonal2 = /*@__PURE__*/rotateOut('rotateOutDiagonal2', CENTER, CENTER, [-1, 1, 0]); +export const rotateInHor = /*@__PURE__*/rotateIn('rotateInHor', CENTER, CENTER, [0, 1, 0]); +export const rotateOutHor = /*@__PURE__*/rotateOut('rotateOutHor', CENTER, CENTER, [0, 1, 0]); +export const rotateInVer = /*@__PURE__*/rotateIn('rotateInVer', CENTER, CENTER, [1, 0, 0]); +export const rotateOutVer = /*@__PURE__*/rotateOut('rotateOutVer', CENTER, CENTER, [1, 0, 0]); diff --git a/projects/igniteui-angular/animations/src/scale/README.md b/projects/igniteui-angular/animations/src/scale/README.md index d6ff5c2fe2b..d475cbd229e 100644 --- a/projects/igniteui-angular/animations/src/scale/README.md +++ b/projects/igniteui-angular/animations/src/scale/README.md @@ -36,25 +36,28 @@ Includes: Default Params: ``` typescript -const params: IAnimationParams = { - delay: "0s", - duration: "600ms", - easing: EaseOut.quad, - endAngle: 180, - endDistance: "0px", - rotateX: 1, - rotateY: 0, - rotateZ: 0, - startAngle: 0, - startDistance: "0px" +const params: ScaleParams = { + delay: 0, + direction: "", + duration: 350, + easing: EaseOut.Quad, + endOpacity: 1, + fromScale: .5, + startOpacity: 0, + toScale: 1, + xPos: "50%", + yPos: "50%" }; ``` +`direction` is `""`, `"X"` or `"Y"` (`scale`, `scaleX`, `scaleY`). Ver/Hor presets scale from `.4`. Out presets use `EaseOut.Sine`, swap the opacities and scale to `.5` (`.3` for Ver/Hor). `xPos`/`yPos` are the transform origin. + ## Sample Usage -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. +Presets are callable. Bare, they use their defaults. Passed params override them; omitted ones keep the default. ``` typescript -import { flipTop } from "igniteui-angular/animations"; +import { scaleInTop } from "igniteui-angular/animations"; -useAnimation(fadeIn); +scaleInTop +scaleInTop({ fromScale: 0 }) ``` diff --git a/projects/igniteui-angular/animations/src/scale/index.ts b/projects/igniteui-angular/animations/src/scale/index.ts index 650c1079eb9..9f1d14c4e45 100644 --- a/projects/igniteui-angular/animations/src/scale/index.ts +++ b/projects/igniteui-angular/animations/src/scale/index.ts @@ -1,468 +1,97 @@ -import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseOut } from '../easings'; - -const base: AnimationMetadata[] = [ - /*@__PURE__*/style({ - opacity: `{{startOpacity}}`, - transform: `scale{{direction}}({{fromScale}})`, - transformOrigin: `{{xPos}} {{yPos}}` - }), - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/style({ - opacity: `{{endOpacity}}`, - transform: `scale{{direction}}({{toScale}})`, - transformOrigin: `{{xPos}} {{yPos}}` - }) - ) -]; - -export const scaleInCenter = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, - xPos: '50%', - yPos: '50%' - } -}); - -export const scaleInBl = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, - xPos: '0', - yPos: '100%' - } -}); - -export const scaleInVerCenter = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - startOpacity: 0, - toScale: 1, - xPos: '50%', - yPos: '50%', - direction: 'Y', - fromScale: .4 - } -}); - -export const scaleInTop = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, - xPos: '50%', - yPos: '0' - } -}); - -export const scaleInLeft = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, - xPos: '0', - yPos: '50%' - } -}); - -export const scaleInVerTop = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - startOpacity: 0, - toScale: 1, - direction: 'Y', - fromScale: .4, - xPos: '100%', - yPos: '0' - } -}); - -export const scaleInTr = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, - xPos: '100%', - yPos: '0' +import { AnimationParams, AnimationPreset, definePreset } from '../types'; + +export type ScaleDirection = '' | 'X' | 'Y'; + +export interface ScaleParams extends AnimationParams { + startOpacity: number; + endOpacity: number; + fromScale: number; + toScale: number; + /** Suffix of the scale function: `scale`, `scaleX`, `scaleY` */ + direction: ScaleDirection; + /** CSS transform-origin, e.g. `50%`, `0`, `100%` */ + xPos: string; + yPos: string; +} + +const steps = (p: ScaleParams): Keyframe[] => [ + { + opacity: p.startOpacity, + transform: `scale${p.direction}(${p.fromScale})`, + transformOrigin: `${p.xPos} ${p.yPos}` + }, + { + opacity: p.endOpacity, + transform: `scale${p.direction}(${p.toScale})`, + transformOrigin: `${p.xPos} ${p.yPos}` } -}); - -export const scaleInTl = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, - xPos: '0', - yPos: '0' - } -}); - -export const scaleInVerBottom = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - startOpacity: 0, - toScale: 1, - direction: 'Y', - fromScale: .4, - xPos: '0', - yPos: '100%' - } -}); - -export const scaleInRight = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, - xPos: '100%', - yPos: '50%' - } -}); - -export const scaleInHorCenter = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - startOpacity: 0, - toScale: 1, - xPos: '50%', - yPos: '50%', - direction: 'X', - fromScale: .4 - } -}); +]; -export const scaleInBr = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, - xPos: '100%', - yPos: '100%' - } -}); +// Single-axis presets collapse further than uniform ones. +const IN_FROM = { uniform: .5, axis: .4 }; +const OUT_TO = { uniform: .5, axis: .3 }; -export const scaleInHorLeft = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', +const scaleIn = (name: string, xPos: string, yPos: string, direction: ScaleDirection = ''): AnimationPreset => + definePreset(name, { + delay: 0, + duration: 350, easing: EaseOut.Quad, - endOpacity: 1, startOpacity: 0, - toScale: 1, - direction: 'X', - fromScale: .4, - xPos: '0', - yPos: '0' - } -}); - -export const scaleInBottom = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Quad, - endOpacity: 1, - fromScale: .5, - startOpacity: 0, - toScale: 1, - xPos: '50%', - yPos: '100%' - } -}); - -export const scaleInHorRight = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Quad, endOpacity: 1, - startOpacity: 0, + fromScale: direction ? IN_FROM.axis : IN_FROM.uniform, toScale: 1, - direction: 'X', - fromScale: .4, - xPos: '100%', - yPos: '100%' - } -}); - -export const scaleOutCenter = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - xPos: '50%', - yPos: '50%', - easing: EaseOut.Sine, - endOpacity: 0, - fromScale: 1, - startOpacity: 1, - toScale: .5 - } -}); - -export const scaleOutBl = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Sine, - endOpacity: 0, - fromScale: 1, - startOpacity: 1, - toScale: .5, - xPos: '0', - yPos: '100%' - } -}); - -export const scaleOutBr = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', - easing: EaseOut.Sine, - endOpacity: 0, - fromScale: 1, - startOpacity: 1, - toScale: .5, - xPos: '100%', - yPos: '100%' - } -}); - -export const scaleOutVerCenter = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - xPos: '50%', - yPos: '50%', - easing: EaseOut.Sine, - endOpacity: 0, - fromScale: 1, - startOpacity: 1, - direction: 'Y', - toScale: .3 - } -}); - -export const scaleOutVerTop = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseOut.Sine, - endOpacity: 0, - fromScale: 1, - startOpacity: 1, - direction: 'Y', - toScale: .3, - xPos: '100%', - yPos: '0' - } -}); - -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%' - } -}); - -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' - } -}); - -export const scaleOutLeft = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - direction: '', - duration: '350ms', + direction, + xPos, + yPos + }, steps); + +const scaleOut = (name: string, xPos: string, yPos: string, direction: ScaleDirection = ''): AnimationPreset => + definePreset(name, { + delay: 0, + duration: 350, easing: EaseOut.Sine, - endOpacity: 0, - fromScale: 1, - startOpacity: 1, - toScale: .5, - xPos: '0', - yPos: '50%' - } -}); - -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' - } -}); - -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' - } -}); - -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%' - } -}); - -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%' - } -}); - -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 - } -}); - -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' - } -}); - -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%' - } -}); + toScale: direction ? OUT_TO.axis : OUT_TO.uniform, + direction, + xPos, + yPos + }, steps); + +const START = '0'; +const MID = '50%'; +const END = '100%'; + +export const scaleInCenter = /*@__PURE__*/scaleIn('scaleInCenter', MID, MID); +export const scaleInBl = /*@__PURE__*/scaleIn('scaleInBl', START, END); +export const scaleInVerCenter = /*@__PURE__*/scaleIn('scaleInVerCenter', MID, MID, 'Y'); +export const scaleInTop = /*@__PURE__*/scaleIn('scaleInTop', MID, START); +export const scaleInLeft = /*@__PURE__*/scaleIn('scaleInLeft', START, MID); +export const scaleInVerTop = /*@__PURE__*/scaleIn('scaleInVerTop', END, START, 'Y'); +export const scaleInTr = /*@__PURE__*/scaleIn('scaleInTr', END, START); +export const scaleInTl = /*@__PURE__*/scaleIn('scaleInTl', START, START); +export const scaleInVerBottom = /*@__PURE__*/scaleIn('scaleInVerBottom', START, END, 'Y'); +export const scaleInRight = /*@__PURE__*/scaleIn('scaleInRight', END, MID); +export const scaleInHorCenter = /*@__PURE__*/scaleIn('scaleInHorCenter', MID, MID, 'X'); +export const scaleInBr = /*@__PURE__*/scaleIn('scaleInBr', END, END); +export const scaleInHorLeft = /*@__PURE__*/scaleIn('scaleInHorLeft', START, START, 'X'); +export const scaleInBottom = /*@__PURE__*/scaleIn('scaleInBottom', MID, END); +export const scaleInHorRight = /*@__PURE__*/scaleIn('scaleInHorRight', END, END, 'X'); + +export const scaleOutCenter = /*@__PURE__*/scaleOut('scaleOutCenter', MID, MID); +export const scaleOutBl = /*@__PURE__*/scaleOut('scaleOutBl', START, END); +export const scaleOutBr = /*@__PURE__*/scaleOut('scaleOutBr', END, END); +export const scaleOutVerCenter = /*@__PURE__*/scaleOut('scaleOutVerCenter', MID, MID, 'Y'); +export const scaleOutVerTop = /*@__PURE__*/scaleOut('scaleOutVerTop', END, START, 'Y'); +export const scaleOutVerBottom = /*@__PURE__*/scaleOut('scaleOutVerBottom', START, END, 'Y'); +export const scaleOutTop = /*@__PURE__*/scaleOut('scaleOutTop', MID, START); +export const scaleOutLeft = /*@__PURE__*/scaleOut('scaleOutLeft', START, MID); +export const scaleOutTr = /*@__PURE__*/scaleOut('scaleOutTr', END, START); +export const scaleOutTl = /*@__PURE__*/scaleOut('scaleOutTl', START, START); +export const scaleOutRight = /*@__PURE__*/scaleOut('scaleOutRight', END, MID); +export const scaleOutBottom = /*@__PURE__*/scaleOut('scaleOutBottom', MID, END); +export const scaleOutHorCenter = /*@__PURE__*/scaleOut('scaleOutHorCenter', MID, MID, 'X'); +export const scaleOutHorLeft = /*@__PURE__*/scaleOut('scaleOutHorLeft', START, START, 'X'); +export const scaleOutHorRight = /*@__PURE__*/scaleOut('scaleOutHorRight', END, END, 'X'); diff --git a/projects/igniteui-angular/animations/src/slide/README.md b/projects/igniteui-angular/animations/src/slide/README.md index 9e3a194c371..a12fc54ef79 100644 --- a/projects/igniteui-angular/animations/src/slide/README.md +++ b/projects/igniteui-angular/animations/src/slide/README.md @@ -2,59 +2,45 @@ Includes: - - 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 + - slideInTop + - slideInRight + - slideInBottom + - slideInLeft + - slideInTr + - slideInBr + - slideInBl + - slideInTl + - slideOutTop + - slideOutRight + - slideOutBottom + - slideOutLeft + - slideOutTr + - slideOutBr + - slideOutBl + - slideOutTl Default Params: ``` typescript -const params: IAnimationParams = { - delay: "0s", - direction: "", - duration: "350ms", - easing: EaseOut.quad, +const params: SlideParams = { + delay: 0, + duration: 350, + easing: EaseOut.Quad, endOpacity: 1, - fromScale: .5, startOpacity: 0, - toScale: 1, - xPos: "50%", - yPos: "50%" + fromPosition: "translateY(-500px)", + toPosition: "translateY(0)" }; ``` +`fromPosition`/`toPosition` are CSS transforms; each preset sets its own direction. Out presets use `EaseIn.Quad` and swap the opacities. + ## Sample Usage -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. +Presets are callable. Bare, they use their defaults. Passed params override them; omitted ones keep the default. ``` typescript -import { scaleInTop } from "igniteui-angular/animations"; +import { slideInTop } from "igniteui-angular/animations"; -useAnimation(scaleInTop); +slideInTop +slideInTop({ fromPosition: "translateY(-100px)" }) ``` diff --git a/projects/igniteui-angular/animations/src/slide/index.ts b/projects/igniteui-angular/animations/src/slide/index.ts index 457973f3397..caedfe96d87 100644 --- a/projects/igniteui-angular/animations/src/slide/index.ts +++ b/projects/igniteui-angular/animations/src/slide/index.ts @@ -1,208 +1,58 @@ -import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseIn, EaseOut } from '../easings'; - -const base: AnimationMetadata[] = [ - /*@__PURE__*/style({ - opacity: `{{startOpacity}}`, - transform: `{{fromPosition}}` - }), - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/style({ - opacity: `{{endOpacity}}`, - transform: `{{toPosition}}` - }) - ) +import { AnimationParams, AnimationPreset, definePreset } from '../types'; + +export interface SlideParams extends AnimationParams { + startOpacity: number; + endOpacity: number; + /** CSS transform, e.g. `translateY(-500px)` */ + fromPosition: string; + toPosition: string; +} + +const steps = (p: SlideParams): Keyframe[] => [ + { opacity: p.startOpacity, transform: p.fromPosition }, + { opacity: p.endOpacity, transform: p.toPosition } ]; -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', +const slideIn = (name: string, fromPosition: string, toPosition: string): AnimationPreset => + definePreset(name, { + delay: 0, + duration: 350, 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)' - } -}); + fromPosition, + toPosition + }, steps); -export const slideOutTop = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', +const slideOut = (name: string, fromPosition: string, toPosition: string): AnimationPreset => + definePreset(name, { + delay: 0, + duration: 350, 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)' - } -}); + fromPosition, + toPosition + }, steps); -export const slideOutBottom = /*@__PURE__*/animation(base, { - params: { - delay: '0s', - duration: '350ms', - easing: EaseIn.Quad, - endOpacity: 0, - fromPosition: 'translateY(0)', - startOpacity: 1, - toPosition: 'translateY(500px)' - } -}); +const ORIGIN = 'translateY(0)'; +const ORIGIN_2D = 'translateY(0) translateX(0)'; -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 slideInTop = /*@__PURE__*/slideIn('slideInTop', 'translateY(-500px)', ORIGIN); +export const slideInLeft = /*@__PURE__*/slideIn('slideInLeft', 'translateX(-500px)', ORIGIN); +export const slideInRight = /*@__PURE__*/slideIn('slideInRight', 'translateX(500px)', ORIGIN); +export const slideInBottom = /*@__PURE__*/slideIn('slideInBottom', 'translateY(500px)', ORIGIN); +export const slideInTr = /*@__PURE__*/slideIn('slideInTr', 'translateY(-500px) translateX(500px)', ORIGIN_2D); +export const slideInTl = /*@__PURE__*/slideIn('slideInTl', 'translateY(-500px) translateX(-500px)', ORIGIN_2D); +export const slideInBr = /*@__PURE__*/slideIn('slideInBr', 'translateY(500px) translateX(500px)', ORIGIN_2D); +export const slideInBl = /*@__PURE__*/slideIn('slideInBl', 'translateY(500px) translateX(-500px)', ORIGIN_2D); -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)' - } -}); +export const slideOutTop = /*@__PURE__*/slideOut('slideOutTop', ORIGIN, 'translateY(-500px)'); +export const slideOutRight = /*@__PURE__*/slideOut('slideOutRight', ORIGIN, 'translateX(500px)'); +export const slideOutBottom = /*@__PURE__*/slideOut('slideOutBottom', ORIGIN, 'translateY(500px)'); +export const slideOutLeft = /*@__PURE__*/slideOut('slideOutLeft', ORIGIN, 'translateX(-500px)'); +export const slideOutTr = /*@__PURE__*/slideOut('slideOutTr', ORIGIN_2D, 'translateY(-500px) translateX(500px)'); +export const slideOutBr = /*@__PURE__*/slideOut('slideOutBr', ORIGIN_2D, 'translateY(500px) translateX(500px)'); +export const slideOutBl = /*@__PURE__*/slideOut('slideOutBl', ORIGIN_2D, 'translateY(500px) translateX(-500px)'); +export const slideOutTl = /*@__PURE__*/slideOut('slideOutTl', ORIGIN_2D, 'translateY(-500px) translateX(-500px)'); diff --git a/projects/igniteui-angular/animations/src/swing/README.md b/projects/igniteui-angular/animations/src/swing/README.md index 2d3cc0f4730..1360bc1f9bf 100644 --- a/projects/igniteui-angular/animations/src/swing/README.md +++ b/projects/igniteui-angular/animations/src/swing/README.md @@ -22,11 +22,11 @@ Includes: Default Params: ``` typescript -const params: IAnimationParams = { - delay: "0s", +const params: SwingParams = { + delay: 0, direction: "X", - duration: ".5s", - easing: EaseOut.back, + duration: 500, + easing: EaseOut.Back, endAngle: 0, endOpacity: 1, startAngle: -100, @@ -36,11 +36,14 @@ const params: IAnimationParams = { }; ``` +`direction` is the rotate axis, `X` or `Y`; `xPos`/`yPos` the hinge edge. Durations: In Fwd `500`, In Bck `600`, Out Fwd `550`, Out Bck `450`. Out presets use `EaseIn.Back` and swap the opacities. + ## Sample Usage -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. +Presets are callable. Bare, they use their defaults. Passed params override them; omitted ones keep the default. ``` typescript import { swingInTopFwd } from "igniteui-angular/animations"; -useAnimation(swingInTopFwd); +swingInTopFwd +swingInTopFwd({ startAngle: -60 }) ``` diff --git a/projects/igniteui-angular/animations/src/swing/index.ts b/projects/igniteui-angular/animations/src/swing/index.ts index 40b16e28658..f95c24c2ee2 100644 --- a/projects/igniteui-angular/animations/src/swing/index.ts +++ b/projects/igniteui-angular/animations/src/swing/index.ts @@ -1,258 +1,88 @@ -import { animate, animation, AnimationMetadata, style } from '@angular/animations'; import { EaseIn, EaseOut } from '../easings'; - -const swingBase: AnimationMetadata[] = [ - /*@__PURE__*/style({ - opacity: `{{startOpacity}}`, - transform: `rotate{{direction}}({{startAngle}}deg)`, - transformOrigin: `{{xPos}} {{yPos}}` - }), - /*@__PURE__*/animate( - `{{duration}} {{delay}} {{easing}}`, - /*@__PURE__*/style({ - opacity: `{{endOpacity}}`, - transform: `rotate{{direction}}({{endAngle}}deg)`, - transformOrigin: `{{xPos}} {{yPos}}` - }) - ) -]; - -export const swingInTopFwd = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - direction: 'X', - duration: '.5s', - easing: EaseOut.Back, - endAngle: 0, - endOpacity: 1, - startAngle: -100, - startOpacity: 0, - xPos: 'top', - yPos: 'center' - } -}); - -export const swingInRightFwd = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - duration: '.5s', - easing: EaseOut.Back, - endAngle: 0, - endOpacity: 1, - startAngle: -100, - startOpacity: 0, - direction: 'Y', - xPos: 'center', - yPos: 'right' - } -}); - -export const swingInBottomFwd = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - direction: 'X', - duration: '.5s', - easing: EaseOut.Back, - endAngle: 0, - endOpacity: 1, - startOpacity: 0, - yPos: 'center', - startAngle: 100, - xPos: 'bottom' - } -}); - -export const swingInLeftFwd = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - duration: '.5s', - easing: EaseOut.Back, - endAngle: 0, - endOpacity: 1, - startOpacity: 0, - direction: 'Y', - startAngle: 100, - xPos: 'center', - yPos: 'left' +import { AnimationParams, AnimationPreset, definePreset } from '../types'; + +export interface SwingParams extends AnimationParams { + startOpacity: number; + endOpacity: number; + startAngle: number; + endAngle: number; + /** Rotation axis, `X` or `Y` */ + direction: string; + /** transform-origin keywords */ + xPos: string; + yPos: string; +} + +const steps = (p: SwingParams): Keyframe[] => [ + { + opacity: p.startOpacity, + transform: `rotate${p.direction}(${p.startAngle}deg)`, + transformOrigin: `${p.xPos} ${p.yPos}` + }, + { + opacity: p.endOpacity, + transform: `rotate${p.direction}(${p.endAngle}deg)`, + transformOrigin: `${p.xPos} ${p.yPos}` } -}); +]; -export const swingInTopBck = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - direction: 'X', +type Edge = 'top' | 'right' | 'bottom' | 'left'; +type Hinge = Pick; + +// Rotation axis and transform origin for a swing hinged on an edge. +const HINGE: Record = { + top: { direction: 'X', xPos: 'top', yPos: 'center' }, + right: { direction: 'Y', xPos: 'center', yPos: 'right' }, + bottom: { direction: 'X', xPos: 'bottom', yPos: 'center' }, + left: { direction: 'Y', xPos: 'center', yPos: 'left' } +}; + +const swingIn = (name: string, edge: Edge, duration: number, startAngle: number): AnimationPreset => + definePreset(name, { + delay: 0, + duration, easing: EaseOut.Back, - endAngle: 0, - endOpacity: 1, startOpacity: 0, - xPos: 'top', - yPos: 'center', - duration: '.6s', - startAngle: 70 - } -}); - -export const swingInRightBck = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - easing: EaseOut.Back, - endAngle: 0, endOpacity: 1, - startOpacity: 0, - direction: 'Y', - duration: '.6s', - startAngle: 70, - xPos: 'center', - yPos: 'right' - } -}); - -export const swingInBottomBck = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - direction: 'X', - easing: EaseOut.Back, + startAngle, endAngle: 0, - endOpacity: 1, - startOpacity: 0, - yPos: 'center', - duration: '.6s', - startAngle: -70, - xPos: 'bottom' - } -}); + ...HINGE[edge] + }, steps); -export const swingInLeftBck = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - easing: EaseOut.Back, - endAngle: 0, - endOpacity: 1, - startOpacity: 0, - direction: 'Y', - duration: '.6s', - startAngle: -70, - xPos: 'center', - yPos: 'left' - } -}); - -export const swingOutTopFwd = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - direction: 'X', - xPos: 'top', - yPos: 'center', - duration: '.55s', - easing: EaseIn.Back, - endAngle: 70, - endOpacity: 0, - startAngle: 0, - startOpacity: 1 - } -}); - -export const swingOutRightFwd = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - duration: '.55s', - easing: EaseIn.Back, - endAngle: 70, - endOpacity: 0, - startAngle: 0, - startOpacity: 1, - direction: 'Y', - xPos: 'center', - yPos: 'right' - } -}); - -export const swingOutBottomFwd = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - direction: 'X', - yPos: 'center', - duration: '.55s', +const swingOut = (name: string, edge: Edge, duration: number, endAngle: number): AnimationPreset => + definePreset(name, { + delay: 0, + duration, easing: EaseIn.Back, - endOpacity: 0, - startAngle: 0, startOpacity: 1, - endAngle: -70, - xPos: 'bottom' - } -}); - -export const swingOutLefttFwd = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - duration: '.55s', - easing: EaseIn.Back, endOpacity: 0, startAngle: 0, - startOpacity: 1, - direction: 'Y', - endAngle: -70, - xPos: 'center', - yPos: 'left' - } -}); - -export const swingOutTopBck = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - direction: 'X', - xPos: 'top', - yPos: 'center', - easing: EaseIn.Back, - endOpacity: 0, - startAngle: 0, - startOpacity: 1, - duration: '.45s', - endAngle: -100 - } -}); - -export const swingOutRightBck = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - easing: EaseIn.Back, - endOpacity: 0, - startAngle: 0, - startOpacity: 1, - direction: 'Y', - duration: '.45s', - endAngle: -100, - xPos: 'center', - yPos: 'right' - } -}); - -export const swingOutBottomBck = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - direction: 'X', - yPos: 'center', - easing: EaseIn.Back, - endOpacity: 0, - startAngle: 0, - startOpacity: 1, - duration: '.45s', - endAngle: 100, - xPos: 'bottom' - } -}); - -export const swingOutLeftBck = /*@__PURE__*/animation(swingBase, { - params: { - delay: '0s', - easing: EaseIn.Back, - endOpacity: 0, - startAngle: 0, - startOpacity: 1, - direction: 'Y', - duration: '.45s', - endAngle: 100, - xPos: 'center', - yPos: 'left' - } -}); + endAngle, + ...HINGE[edge] + }, steps); + +const IN_FWD = 500; +const IN_BCK = 600; +const OUT_FWD = 550; +const OUT_BCK = 450; + +export const swingInTopFwd = /*@__PURE__*/swingIn('swingInTopFwd', 'top', IN_FWD, -100); +export const swingInRightFwd = /*@__PURE__*/swingIn('swingInRightFwd', 'right', IN_FWD, -100); +export const swingInBottomFwd = /*@__PURE__*/swingIn('swingInBottomFwd', 'bottom', IN_FWD, 100); +export const swingInLeftFwd = /*@__PURE__*/swingIn('swingInLeftFwd', 'left', IN_FWD, 100); + +export const swingInTopBck = /*@__PURE__*/swingIn('swingInTopBck', 'top', IN_BCK, 70); +export const swingInRightBck = /*@__PURE__*/swingIn('swingInRightBck', 'right', IN_BCK, 70); +export const swingInBottomBck = /*@__PURE__*/swingIn('swingInBottomBck', 'bottom', IN_BCK, -70); +export const swingInLeftBck = /*@__PURE__*/swingIn('swingInLeftBck', 'left', IN_BCK, -70); + +export const swingOutTopFwd = /*@__PURE__*/swingOut('swingOutTopFwd', 'top', OUT_FWD, 70); +export const swingOutRightFwd = /*@__PURE__*/swingOut('swingOutRightFwd', 'right', OUT_FWD, 70); +export const swingOutBottomFwd = /*@__PURE__*/swingOut('swingOutBottomFwd', 'bottom', OUT_FWD, -70); +// Name keeps the historical typo, consumers look it up by it. +export const swingOutLefttFwd = /*@__PURE__*/swingOut('swingOutLefttFwd', 'left', OUT_FWD, -70); + +export const swingOutTopBck = /*@__PURE__*/swingOut('swingOutTopBck', 'top', OUT_BCK, -100); +export const swingOutRightBck = /*@__PURE__*/swingOut('swingOutRightBck', 'right', OUT_BCK, -100); +export const swingOutBottomBck = /*@__PURE__*/swingOut('swingOutBottomBck', 'bottom', OUT_BCK, 100); +export const swingOutLeftBck = /*@__PURE__*/swingOut('swingOutLeftBck', 'left', OUT_BCK, 100); diff --git a/projects/igniteui-angular/animations/src/types.ts b/projects/igniteui-angular/animations/src/types.ts new file mode 100644 index 00000000000..08174c12bd4 --- /dev/null +++ b/projects/igniteui-angular/animations/src/types.ts @@ -0,0 +1,104 @@ +/** + * Web Animations API keyframes plus timing options. + * Same shape as the igniteui-webcomponents type of the same name. + */ +export interface AnimationReferenceMetadata { + steps: Keyframe[]; + options?: KeyframeAnimationOptions; +} + +/** Timing every preset accepts. Durations are milliseconds. */ +export interface AnimationParams { + duration: number; + delay: number; + easing: string; +} + +/** + * A named, parameterized animation. Callable with overrides, usable bare: + * + * openAnimation: slideInTop + * openAnimation: slideInTop({ duration: 1000 }) + */ +export interface AnimationPreset

{ + (params?: Partial

): PresetAnimation

; + readonly name: string; + readonly defaults: Readonly

; +} + +/** Output of a preset call. Remembers its origin so it can be reversed with the same overrides. */ +export interface PresetAnimation

extends AnimationReferenceMetadata { + readonly preset: AnimationPreset

; + readonly params: Partial

; +} + +/** Anything the animation service accepts. */ +export type AnimationInput = AnimationReferenceMetadata | AnimationPreset; + +/** Wraps raw keyframes into metadata. For custom animations. */ +export function animation(steps: Keyframe[], options?: KeyframeAnimationOptions): AnimationReferenceMetadata { + return { steps, options }; +} + +/** Builds a preset from defaults and a keyframe recipe. `name` is the exported identifier. */ +export function definePreset

( + name: string, + defaults: P, + steps: (params: P) => Keyframe[] +): AnimationPreset

{ + const preset = ((params: Partial

= {}) => { + const resolved = { ...defaults, ...definedOnly(params) }; + const { duration, delay, easing } = resolved; + + return { preset, params, steps: steps(resolved), options: { duration, delay, easing } }; + }) as AnimationPreset

; + + // Function.name is read-only but configurable. + Object.defineProperties(preset, { + name: { value: name }, + defaults: { value: Object.freeze({ ...defaults }) } + }); + + return preset; +} + +export function isPreset(input: AnimationInput): input is AnimationPreset { + return typeof input === 'function'; +} + +export function isPresetAnimation(input: AnimationInput): input is PresetAnimation { + return !isPreset(input) && 'preset' in input; +} + +/** + * Normalizes an input into plain metadata, optionally overriding timing. + * Preset-based inputs are rebuilt through their preset so reversal keeps working. + */ +export function resolveAnimation(input: AnimationInput, overrides?: Partial): AnimationReferenceMetadata { + if (isPreset(input)) { + return input(overrides); + } + + if (!overrides) { + return input; + } + + if (isPresetAnimation(input)) { + return input.preset({ ...input.params, ...overrides }); + } + + return { ...input, options: { ...input.options, ...definedOnly(overrides) } }; +} + +/** Drops `undefined` values so they never shadow a default. */ +function definedOnly(source: T): Partial { + const result: Partial = {}; + + for (const key of Object.keys(source) as (keyof T)[]) { + if (source[key] !== undefined) { + result[key] = source[key]; + } + } + + return result; +} diff --git a/projects/igniteui-angular/animations/src/util.ts b/projects/igniteui-angular/animations/src/util.ts index 152549e9266..cdd37be7b4c 100644 --- a/projects/igniteui-angular/animations/src/util.ts +++ b/projects/igniteui-angular/animations/src/util.ts @@ -1,262 +1,144 @@ -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 { pulsateBck, pulsateFwd } from './misc'; +import { rotateInBl, rotateInBottom, rotateInBr, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr } from './rotate'; +import { scaleInBl, scaleInBottom, scaleInBr, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, 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'; +import { AnimationInput, AnimationPreset, isPreset, isPresetAnimation } from './types'; -export class AnimationUtil { - private static _instance: AnimationUtil; +type Pair = [AnimationPreset, AnimationPreset]; - 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], - ]); +/** Mirror pairs, listed once per direction; `bothWays` adds the reverse entries. */ +const MIRRORS: Pair[] = [ + [flipTop, flipBottom], + [flipRight, flipLeft], + [flipHorFwd, flipHorBck], + [flipVerFwd, flipVerBck], + [pulsateFwd, pulsateBck], + [rotateInTop, rotateInBottom], + [rotateOutTop, rotateOutBottom], + [rotateInRight, rotateInLeft], + [rotateOutRight, rotateOutLeft], + [rotateInTr, rotateInBl], + [rotateOutTr, rotateOutBl], + [rotateInBr, rotateInTl], + [rotateOutBr, rotateOutTl], + [scaleInTop, scaleInBottom], + [scaleOutTop, scaleOutBottom], + [scaleInRight, scaleInLeft], + [scaleOutRight, scaleOutLeft], + [scaleInTr, scaleInBl], + [scaleOutTr, scaleOutBl], + [scaleInBr, scaleInTl], + [scaleOutBr, scaleOutTl], + [scaleInVerTop, scaleInVerBottom], + [scaleOutVerTop, scaleOutVerBottom], + [scaleInHorLeft, scaleInHorRight], + [scaleOutHorLeft, scaleOutHorRight], + [slideInTop, slideInBottom], + [slideOutTop, slideOutBottom], + [slideInRight, slideInLeft], + [slideOutRight, slideOutLeft], + [slideInTr, slideInBl], + [slideOutTr, slideOutBl], + [slideInBr, slideInTl], + [slideOutBr, slideOutTl], + [swingInTopFwd, swingInBottomFwd], + [swingOutTopFwd, swingOutBottomFwd], + [swingInRightFwd, swingInLeftFwd], + [swingOutRightFwd, swingOutLefttFwd], + [swingInTopBck, swingInBottomBck], + [swingOutTopBck, swingOutBottomBck], + [swingInRightBck, swingInLeftBck], + [swingOutRightBck, swingOutLeftBck], +]; - 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, - ]; +/** Corner presets move along both axes. */ +const CORNERS: AnimationPreset[] = [ + rotateInTr, rotateOutTr, rotateInBr, rotateOutBr, rotateInBl, rotateOutBl, rotateInTl, rotateOutTl, + scaleInTr, scaleOutTr, scaleInBr, scaleOutBr, scaleInBl, scaleOutBl, scaleInTl, scaleOutTl, + slideInTr, slideOutTr, slideInBr, slideOutBr, slideInBl, slideOutBl, slideInTl, slideOutTl, +]; - 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, - ]; +const HORIZONTAL: AnimationPreset[] = [ + ...CORNERS, + flipRight, flipLeft, flipVerFwd, flipVerBck, + rotateInRight, rotateOutRight, rotateInLeft, rotateOutLeft, + scaleInRight, scaleOutRight, scaleInLeft, scaleOutLeft, + scaleInHorLeft, scaleOutHorLeft, scaleInHorRight, scaleOutHorRight, + slideInRight, slideOutRight, slideInLeft, slideOutLeft, + swingInRightFwd, swingOutRightFwd, swingInLeftFwd, swingOutLefttFwd, + swingInRightBck, swingOutRightBck, swingInLeftBck, swingOutLeftBck, +]; - private constructor() { } +const VERTICAL: AnimationPreset[] = [ + ...CORNERS, + flipTop, flipBottom, flipHorFwd, flipHorBck, + growVerIn, growVerOut, + rotateInTop, rotateOutTop, rotateInBottom, rotateOutBottom, + scaleInTop, scaleOutTop, scaleInBottom, scaleOutBottom, + scaleInVerTop, scaleOutVerTop, scaleInVerBottom, scaleOutVerBottom, + slideInTop, slideOutTop, slideInBottom, slideOutBottom, + swingInTopFwd, swingOutTopFwd, swingInBottomFwd, swingOutBottomFwd, + swingInTopBck, swingOutTopBck, swingInBottomBck, swingOutBottomBck, +]; - public static instance() { - return this._instance || (this._instance = new this()); +const bothWays = (pairs: Pair[]): Map => { + const map = new Map(); + + for (const [a, b] of pairs) { + map.set(a, b); + map.set(b, a); } - public reverseAnimationResolver(animation: AnimationReferenceMetadata): AnimationReferenceMetadata { - return this.oppositeAnimation.get(animation) ?? animation; + return map; +}; + +const mirrors = /*@__PURE__*/bothWays(MIRRORS); +const horizontal = /*@__PURE__*/new Set(HORIZONTAL); +const vertical = /*@__PURE__*/new Set(VERTICAL); + +/** Preset behind an input, if any. Custom metadata has none. */ +function presetOf(input: AnimationInput): AnimationPreset | undefined { + if (isPreset(input)) { + return input; } + if (isPresetAnimation(input)) { + return input.preset; + } + + return undefined; +} + +/** + * Mirrored counterpart with the same overrides, e.g. slideInLeft({ duration: 1000 }) + * becomes slideInRight({ duration: 1000 }). Unknown inputs come back unchanged. + */ +export function reverseAnimation(input: AnimationInput): AnimationInput { + const preset = presetOf(input); + const mirror = preset && mirrors.get(preset); - public isHorizontalAnimation(animation: AnimationReferenceMetadata): boolean { - return this.horizontalAnimations.includes(animation); + if (!mirror) { + return input; } - public isVerticalAnimation(animation: AnimationReferenceMetadata): boolean { - return this.verticalAnimations.includes(animation); + if (isPreset(input)) { + return mirror; } + + return mirror(isPresetAnimation(input) ? input.params : undefined); +} + +export function isHorizontalAnimation(input: AnimationInput): boolean { + const preset = presetOf(input); + + return !!preset && horizontal.has(preset); +} + +export function isVerticalAnimation(input: AnimationInput): boolean { + const preset = presetOf(input); + + return !!preset && vertical.has(preset); } diff --git a/projects/igniteui-angular/banner/src/banner/banner.component.spec.ts b/projects/igniteui-angular/banner/src/banner/banner.component.spec.ts index b441f07ab78..ea4e4578282 100644 --- a/projects/igniteui-angular/banner/src/banner/banner.component.spec.ts +++ b/projects/igniteui-angular/banner/src/banner/banner.component.spec.ts @@ -2,8 +2,7 @@ import { Component, ViewChild, DebugElement, ChangeDetectionStrategy } from '@an import { TestBed, ComponentFixture, tick, fakeAsync, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxBannerComponent } from './banner.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { BannerResourceStringsEN, changei18n } from 'igniteui-angular/core'; +import { BannerResourceStringsEN, changei18n, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxBannerActionsDirective } from './banner.directives'; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; @@ -27,14 +26,14 @@ describe('igxBanner', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxBannerEmptyComponent, IgxBannerOneButtonComponent, IgxBannerSampleComponent, IgxBannerCustomTemplateComponent, SimpleBannerEventsComponent, IgxBannerInitializedOpenComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.spec.ts b/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.spec.ts index d60446d833b..ae4c0fa22a8 100644 --- a/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.spec.ts +++ b/projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.spec.ts @@ -3,13 +3,13 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { Router } from '@angular/router'; import { Location } from '@angular/common'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { BottomTabBarTestComponent, TabBarRoutingTestComponent, TabBarTabsOnlyModeTestComponent, TabBarTestComponent, BottomNavRoutingGuardTestComponent, BottomNavTestHtmlAttributesComponent } from '../../../test-utils/bottom-nav-components.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxBottomNavContentComponent } from './bottom-nav-content.component'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { RoutingTestGuard } from '../../../test-utils/routing-test-guard.spec'; @@ -32,7 +32,6 @@ describe('IgxBottomNav', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, RouterTestingModule.withRoutes(testRoutes), TabBarTestComponent, BottomTabBarTestComponent, @@ -46,7 +45,7 @@ describe('IgxBottomNav', () => { RoutingView4Component, RoutingView5Component ], - providers: [RoutingTestGuard] + providers: [provideIgxNoopAnimations(), RoutingTestGuard] }).compileComponents(); })); diff --git a/projects/igniteui-angular/button-group/src/button-group/button-group.component.spec.ts b/projects/igniteui-angular/button-group/src/button-group/button-group.component.spec.ts index 13ec640d54b..65e3b4bf28a 100644 --- a/projects/igniteui-angular/button-group/src/button-group/button-group.component.spec.ts +++ b/projects/igniteui-angular/button-group/src/button-group/button-group.component.spec.ts @@ -1,7 +1,7 @@ import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, fakeAsync, flushMicrotasks, waitForAsync } from '@angular/core/testing'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent } from './button-group.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxButtonDirective } from '../../../directives/src/directives/button/button.directive'; import { IgxRadioComponent } from '../../../radio/src/radio/radio.component'; import { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interactions.spec'; @@ -48,14 +48,14 @@ describe('IgxButtonGroup', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, InitButtonGroupComponent, InitButtonGroupWithValuesComponent, TemplatedButtonGroupComponent, TemplatedButtonGroupDesplayDensityComponent, ButtonGroupWithSelectedButtonComponent, ButtonGroupButtonWithBoundSelectedOutputComponent, - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/calendar/src/calendar/calendar-multi-view.component.spec.ts b/projects/igniteui-angular/calendar/src/calendar/calendar-multi-view.component.spec.ts index d1376c41439..d80ab6a2c11 100644 --- a/projects/igniteui-angular/calendar/src/calendar/calendar-multi-view.component.spec.ts +++ b/projects/igniteui-angular/calendar/src/calendar/calendar-multi-view.component.spec.ts @@ -1,9 +1,8 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { DateRangeType } from 'igniteui-angular/core'; +import { DateRangeType, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { HelperTestFunctions } from '../../../test-utils/calendar-helper-utils'; import { ymd } from '../../../test-utils/helper-utils.spec'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; @@ -17,11 +16,11 @@ describe('Multi-View Calendar - ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, MultiViewCalendarSampleComponent, MultiViewDatePickerSampleComponent, MultiViewNgModelSampleComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/calendar/src/calendar/calendar.component.spec.ts b/projects/igniteui-angular/calendar/src/calendar/calendar.component.spec.ts index 5418e3d4f49..8b4368136f5 100644 --- a/projects/igniteui-angular/calendar/src/calendar/calendar.component.spec.ts +++ b/projects/igniteui-angular/calendar/src/calendar/calendar.component.spec.ts @@ -1,3 +1,4 @@ +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { Component, DebugElement, LOCALE_ID, ViewChild, ChangeDetectionStrategy } from "@angular/core"; import { TestBed, @@ -9,7 +10,6 @@ import { } from "@angular/core/testing"; import { FormsModule } from "@angular/forms"; import { By } from "@angular/platform-browser"; -import { NoopAnimationsModule } from "@angular/platform-browser/animations"; import { registerLocaleData } from "@angular/common"; import localeFr from "@angular/common/locales/fr"; @@ -131,12 +131,12 @@ describe("IgxCalendar - ", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxCalendarSampleComponent, IgxCalendarRangeComponent, IgxCalendarDisabledSpecialDatesComponent, IgxCalendarValueComponent, ], + providers: [provideIgxNoopAnimations()], }).compileComponents(); })); diff --git a/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.spec.ts b/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.spec.ts index 91fd9f86292..d8a24dba471 100644 --- a/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.spec.ts +++ b/projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.spec.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, provideZonelessChangeDetection, Vie import { TestBed } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { UIInteractions } from '../../../../test-utils/ui-interactions.spec'; import { IgxMonthPickerComponent } from './month-picker.component'; import { IFormattingOptions, IgxCalendarView } from '../calendar'; @@ -11,7 +11,8 @@ describe('IgxMonthPicker', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxMonthPickerSampleComponent] + imports: [IgxMonthPickerSampleComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); }); @@ -759,8 +760,8 @@ export class IgxMonthPickerSampleComponent { describe('IgxMonthPicker in zoneless change detection', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxMonthPickerSampleComponent], - providers: [provideZonelessChangeDetection()] + imports: [IgxMonthPickerSampleComponent], + providers: [provideIgxNoopAnimations(), provideZonelessChangeDetection()] }).compileComponents(); }); diff --git a/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts b/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts index e6538fca1ba..763a15fe223 100644 --- a/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts +++ b/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts @@ -1,15 +1,13 @@ -import { AnimationReferenceMetadata, useAnimation } from '@angular/animations'; import { ChangeDetectorRef, Directive, EventEmitter, inject, OnDestroy } from '@angular/core'; -import { IgxAngularAnimationService } from 'igniteui-angular/core'; -import { AnimationPlayer, AnimationService } from 'igniteui-angular/core'; -import { fadeIn, slideInLeft } from 'igniteui-angular/animations'; +import { AnimationPlayer, IGX_ANIMATION_SERVICE } from 'igniteui-angular/core'; +import { AnimationInput, fadeIn, slideInLeft } from 'igniteui-angular/animations'; import { CarouselAnimationType } from './enums'; export enum CarouselAnimationDirection { NONE, NEXT, PREV } export interface CarouselAnimationSettings { - enterAnimation: AnimationReferenceMetadata; - leaveAnimation: AnimationReferenceMetadata; + enterAnimation: AnimationInput; + leaveAnimation: AnimationInput; } /** @hidden */ @@ -21,7 +19,7 @@ export interface IgxSlideComponentBase { /** @hidden */ @Directive() export abstract class IgxCarouselComponentBase implements OnDestroy { - private animationService = inject(IgxAngularAnimationService); + private animationService = inject(IGX_ANIMATION_SERVICE); protected cdr = inject(ChangeDetectorRef); /** @hidden */ @@ -76,7 +74,7 @@ export abstract class IgxCarouselComponentBase implements OnDestroy { /** @hidden */ protected animationStarted(animation: AnimationPlayer): boolean { - return animation && animation.hasStarted(); + return animation && animation.started(); } /** @hidden */ @@ -107,36 +105,30 @@ export abstract class IgxCarouselComponentBase implements OnDestroy { } const trans = this.animationPosition ? this.animationPosition * 100 : 100; + const axis = this.vertical ? 'translateY' : 'translateX'; + const forward = this.currentItem.direction === 1; + switch (this.animationType) { case CarouselAnimationType.slide: return { - enterAnimation: useAnimation(slideInLeft, - { - params: { - delay: '0s', - duration: `${duration}ms`, - endOpacity: 1, - startOpacity: 1, - fromPosition: `${this.vertical ? 'translateY' : 'translateX'}(${this.currentItem.direction === 1 ? trans : -trans}%)`, - toPosition: `${this.vertical ? 'translateY(0%)' : 'translateX(0%)'}` - } - }), - leaveAnimation: useAnimation(slideInLeft, - { - params: { - delay: '0s', - duration: `${duration}ms`, - endOpacity: 1, - startOpacity: 1, - fromPosition: `${this.vertical ? 'translateY(0%)' : 'translateX(0%)'}`, - toPosition: `${this.vertical ? 'translateY' : 'translateX'}(${this.currentItem.direction === 1 ? -trans : trans}%)`, - } - }) + enterAnimation: slideInLeft({ + duration, + startOpacity: 1, + endOpacity: 1, + fromPosition: `${axis}(${forward ? trans : -trans}%)`, + toPosition: `${axis}(0%)` + }), + leaveAnimation: slideInLeft({ + duration, + startOpacity: 1, + endOpacity: 1, + fromPosition: `${axis}(0%)`, + toPosition: `${axis}(${forward ? -trans : trans}%)` + }) }; case CarouselAnimationType.fade: return { - enterAnimation: useAnimation(fadeIn, - { params: { duration: `${duration}ms`, startOpacity: `${this.animationPosition}` } }), + enterAnimation: fadeIn({ duration, startOpacity: this.animationPosition }), leaveAnimation: null! }; } @@ -152,8 +144,8 @@ export abstract class IgxCarouselComponentBase implements OnDestroy { return; } - this.enterAnimationPlayer = this.animationService.buildAnimation(animation, this.getCurrentElement()); - this.enterAnimationPlayer.animationEnd.subscribe(() => { + this.enterAnimationPlayer = this.animationService.build(animation, this.getCurrentElement()); + this.enterAnimationPlayer.finished$.subscribe(() => { // TODO: animation may never end. Find better way to clean up the player if (this.enterAnimationPlayer) { this.enterAnimationPlayer.destroy(); @@ -175,8 +167,8 @@ export abstract class IgxCarouselComponentBase implements OnDestroy { return; } - this.leaveAnimationPlayer = this.animationService.buildAnimation(animation, this.getPreviousElement()); - this.leaveAnimationPlayer.animationEnd.subscribe(() => { + this.leaveAnimationPlayer = this.animationService.build(animation, this.getPreviousElement()); + this.leaveAnimationPlayer.finished$.subscribe(() => { // TODO: animation may never end. Find better way to clean up the player if (this.leaveAnimationPlayer) { this.leaveAnimationPlayer.destroy(); diff --git a/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts b/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts index 25cd43b3ee8..d516b6217d4 100644 --- a/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts @@ -5,12 +5,11 @@ import { IgxCarouselComponent, ISlideEventArgs } from './carousel.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxSlideComponent } from './slide.component'; import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives'; import { CarouselIndicatorsOrientation, CarouselAnimationType } from './enums'; import { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interactions.spec'; -import { CarouselResourceStringsEN, changei18n } from 'igniteui-angular/core'; +import { CarouselResourceStringsEN, changei18n, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('Carousel', () => { let fixture; @@ -23,7 +22,6 @@ describe('Carousel', () => { mockElementRef = new ElementRef(mockElement); TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, CarouselTestComponent, CarouselTemplateSetInMarkupTestComponent, CarouselTemplateSetInTypescriptTestComponent, @@ -31,6 +29,7 @@ describe('Carousel', () => { CarouselDynamicSlidesComponent ], providers: [ + provideIgxNoopAnimations(), { provide: ElementRef, useValue: mockElementRef }, IgxSlideComponent ] @@ -1076,7 +1075,8 @@ describe('Carousel', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, CarouselTestComponent] + imports: [CarouselTestComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -1125,10 +1125,10 @@ describe('Carousel Zoneless Tests:', () => { mockElementRef = new ElementRef(mockElement); await TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, CarouselDynamicSlidesWithNoActiveComponent, ], providers: [ + provideIgxNoopAnimations(), { provide: ElementRef, useValue: mockElementRef }, IgxSlideComponent, provideZonelessChangeDetection() diff --git a/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.spec.ts b/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.spec.ts index 87c8e7d894b..e83d0b3e941 100644 --- a/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.spec.ts +++ b/projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.spec.ts @@ -2,15 +2,14 @@ import { Component, ViewChild, ElementRef, inject, ChangeDetectionStrategy } fro import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { UntypedFormBuilder, FormsModule, ReactiveFormsModule, Validators, NgForm } from '@angular/forms'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxCheckboxComponent } from './checkbox.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxCheckbox', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, InitCheckboxComponent, CheckboxSimpleComponent, CheckboxReadonlyComponent, @@ -23,7 +22,8 @@ describe('IgxCheckbox', () => { CheckboxFormGroupComponent, CheckboxNestedThemeScopeComponent, IgxCheckboxComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts b/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts index 20ed6074bab..7bdb88bb085 100644 --- a/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/combo/src/combo/combo.component.spec.ts @@ -5,7 +5,6 @@ import { FormsModule, NgForm, NgModel, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { BehaviorSubject, Observable, firstValueFrom } from 'rxjs'; import { IgxSelectionAPIService } from 'igniteui-angular/core'; import { IBaseCancelableBrowserEventArgs } from 'igniteui-angular/core'; @@ -14,7 +13,7 @@ import { IForOfState } from '../../../directives/src/directives/for-of/for_of.di import { IgxInputState } from '../../../input-group/src/public_api'; import { IGX_INPUT_GROUP_TYPE, IgxLabelDirective } from '../../../input-group/src/public_api'; import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from 'igniteui-angular/core'; -import { ComboResourceStringsEN, changei18n } from 'igniteui-angular/core'; +import { ComboResourceStringsEN, changei18n, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxComboAddItemComponent } from './combo-add-item.component'; import { IgxComboDropDownComponent } from './combo-dropdown.component'; import { IgxComboItemComponent } from './combo-item.component'; @@ -88,8 +87,9 @@ describe('igxCombo', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [IgxComboComponent, NoopAnimationsModule], + imports: [IgxComboComponent], providers: [ + provideIgxNoopAnimations(), { provide: ElementRef, useValue: elementRef }, { provide: ChangeDetectorRef, useValue: mockCdr }, { provide: IgxSelectionAPIService, useValue: mockSelection }, @@ -386,8 +386,9 @@ describe('igxCombo', () => { TestBed.resetTestingModule(); TestBed.configureTestingModule({ - imports: [IgxComboComponent, NoopAnimationsModule], + imports: [IgxComboComponent], providers: [ + provideIgxNoopAnimations(), { provide: ElementRef, useValue: elementRef }, { provide: ChangeDetectorRef, useValue: mockCdr }, { provide: IgxSelectionAPIService, useValue: selectionService }, @@ -906,7 +907,6 @@ describe('igxCombo', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxComboSampleComponent, IgxComboInContainerTestComponent, IgxComboRemoteDataComponent, @@ -914,7 +914,8 @@ describe('igxCombo', () => { IgxComboBindingDataAfterInitComponent, IgxComboFormComponent, IgxComboInTemplatedFormComponent, - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -1909,7 +1910,7 @@ describe('igxCombo', () => { tick(); fixture.detectChanges(); expect(combo.collapsed).toBeTruthy(); - expect(document.activeElement).not.toEqual(combo.comboInput.nativeElement); + expect(document.activeElement).toEqual(combo.comboInput.nativeElement); combo.toggle(); fixture.detectChanges(); @@ -1929,7 +1930,7 @@ describe('igxCombo', () => { tick(); fixture.detectChanges(); expect(combo.collapsed).toBeTruthy(); - expect(document.activeElement).not.toEqual(combo.comboInput.nativeElement); + expect(document.activeElement).toEqual(combo.comboInput.nativeElement); })); it('should clear the selection and preserve the focus when the combo is collapsed and Escape key is pressed', fakeAsync(() => { combo.comboInput.nativeElement.focus(); @@ -3716,10 +3717,10 @@ describe('igxCombo', () => { TestBed.resetTestingModule(); await TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxComboSampleComponent, ], providers: [ + provideIgxNoopAnimations(), provideZonelessChangeDetection(), ] }).compileComponents(); @@ -3779,7 +3780,8 @@ describe('igxCombo', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxComboSampleComponent] + imports: [IgxComboSampleComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts b/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts deleted file mode 100644 index 6a568814688..00000000000 --- a/projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { AnimationPlayer as AngularAnimationPlayer } from '@angular/animations'; -import { EventEmitter } from '@angular/core'; -import { IBaseEventArgs } from '../../core/utils'; -import { AnimationPlayer } from './animation'; - -export class IgxAngularAnimationPlayer implements AnimationPlayer { - private _innerPlayer: AngularAnimationPlayer; - public animationStart: EventEmitter = new EventEmitter(); - public animationEnd: EventEmitter = new EventEmitter(); - - public get position(): number { - return this._innerPlayer.getPosition(); - } - - public set position(value: number) { - this.internalPlayer.setPosition(value); - } - - constructor(private internalPlayer: AngularAnimationPlayer) { - this.internalPlayer.onDone(() => this.onDone()); - const innerRenderer = (this.internalPlayer as any)._renderer; - // We need inner player as Angular.AnimationPlayer.getPosition returns always 0. - // To workaround this we are getting the positions from the inner player. - // This is logged in Angular here - https://github.com/angular/angular/issues/18891 - // As soon as this is resolved we can remove this hack - const rendererEngine = innerRenderer.engine || innerRenderer.delegate.engine; - // A workaround because of Angular SSR is using some delegation. - this._innerPlayer = rendererEngine.players[rendererEngine.players.length - 1]; - } - - public init(): void { - this.internalPlayer.init(); - } - - public play(): void { - this.animationStart.emit({ owner: this }); - this.internalPlayer.play(); - } - - public finish(): void { - this.internalPlayer.finish(); - // TODO: when animation finish angular deletes all onDone handlers. Add handlers again if needed - } - - public reset(): void { - this.internalPlayer.reset(); - // calling reset does not change hasStarted to false. This is why we are doing it here via internal field - (this.internalPlayer as any)._started = false; - } - - public destroy(): void { - this.internalPlayer.destroy(); - } - - public hasStarted(): boolean { - return this.internalPlayer.hasStarted(); - } - - private onDone(): void { - this.animationEnd.emit({ owner: this }); - } -} diff --git a/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts b/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts deleted file mode 100644 index 96bcac76a20..00000000000 --- a/projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { AnimationBuilder, AnimationReferenceMetadata } from '@angular/animations'; -import { Injectable, inject } from '@angular/core'; -import { IgxAngularAnimationPlayer } from './angular-animation-player'; -import { AnimationService, AnimationPlayer } from './animation'; - -@Injectable({providedIn: 'root'}) -export class IgxAngularAnimationService implements AnimationService { - private builder = inject(AnimationBuilder); - - public buildAnimation(animationMetaData: AnimationReferenceMetadata, element: HTMLElement): AnimationPlayer { - if (!animationMetaData) { - return null!; - } - const animationBuilder = this.builder.build(animationMetaData); - const player = new IgxAngularAnimationPlayer(animationBuilder.create(element)); - return player; - } -} diff --git a/projects/igniteui-angular/core/src/services/animation/animation.ts b/projects/igniteui-angular/core/src/services/animation/animation.ts index b03e507d7c8..f298034e92b 100644 --- a/projects/igniteui-angular/core/src/services/animation/animation.ts +++ b/projects/igniteui-angular/core/src/services/animation/animation.ts @@ -1,52 +1,62 @@ -import { AnimationReferenceMetadata } from '@angular/animations'; -import { EventEmitter } from '@angular/core'; -import { IBaseEventArgs } from '../../core/utils'; +import { InjectionToken, Provider, Signal, inject } from '@angular/core'; +import { Observable } from 'rxjs'; +import type { AnimationInput } from 'igniteui-angular/animations'; +import { IgxWebAnimationService } from './web-animation-service'; -export interface AnimationService { - /** - * Creates an `AnimationPlayer` instance - * @param animation A set of options describing the animation - * @param element The DOM element on which animation will be applied - * @returns AnimationPlayer - */ - buildAnimation: (animationMetaData: AnimationReferenceMetadata, element: HTMLElement) => AnimationPlayer -} +export type AnimationPlayState = 'idle' | 'running' | 'paused' | 'finished'; +/** + * Controls one animation on one element. + * + * idle ──play()──▶ running ──▶ finished + * ▲ │ ▲ │ + * │ pause() play() │ + * │ ▼ │ │ + * └── reset() ──── paused ◀───────┘ + */ export interface AnimationPlayer { - /** - * Emits when the animation starts - */ - animationStart: EventEmitter; - /** - * Emits when the animation ends - */ - animationEnd: EventEmitter; - /** - * Current position of the animation. - */ + readonly state: Signal; + /** True from `play()` until `reset()` or `destroy()`. Stays true once finished. */ + readonly started: Signal; + /** Emits on natural end and on `finish()`. Silent on `reset()` and `destroy()`. */ + readonly finished$: Observable; + /** Progress in [0, 1] over delay plus duration. Settable at any time, also before `play()`. */ position: number; - /** - * Initialize the animation - */ - init(): void; - /** - * Runs the animation - */ play(): void; - /** - * Ends the animation - */ + pause(): void; + /** Jumps to the end and emits `finished$`. */ finish(): void; - /** - * Resets the animation to its initial state - */ + /** Removes the animation's effect and returns to `idle`. */ reset(): void; - /** - * Destroys the animation. - */ destroy(): void; - /** - * Reports whether the animation has started. - */ - hasStarted(): boolean; +} + +export interface AnimationService { + build(animation: AnimationInput, element: HTMLElement): AnimationPlayer; +} + +/** + * `auto` honors `prefers-reduced-motion` (default) + * `always` ignores it + * `none` disables every animation; players finish in a microtask + */ +export type AnimationMotion = 'auto' | 'always' | 'none'; + +export const IGX_ANIMATION_MOTION = new InjectionToken('IgxAnimationMotion', { + providedIn: 'root', + factory: () => 'auto' +}); + +export const IGX_ANIMATION_SERVICE = new InjectionToken('IgxAnimationService', { + providedIn: 'root', + factory: () => inject(IgxWebAnimationService) +}); + +export function provideIgxAnimations(motion: AnimationMotion): Provider { + return { provide: IGX_ANIMATION_MOTION, useValue: motion }; +} + +/** For tests and SSR. Equivalent to `provideIgxAnimations('none')`. */ +export function provideIgxNoopAnimations(): Provider { + return provideIgxAnimations('none'); } diff --git a/projects/igniteui-angular/core/src/services/animation/web-animation-player.spec.ts b/projects/igniteui-angular/core/src/services/animation/web-animation-player.spec.ts new file mode 100644 index 00000000000..511ee99fa2b --- /dev/null +++ b/projects/igniteui-angular/core/src/services/animation/web-animation-player.spec.ts @@ -0,0 +1,222 @@ +import { TestBed } from '@angular/core/testing'; +import { firstValueFrom } from 'rxjs'; +import { animation, fadeIn, growVerIn } from 'igniteui-angular/animations'; +import { IGX_ANIMATION_SERVICE, provideIgxAnimations, provideIgxNoopAnimations } from './animation'; +import { IgxWebAnimationPlayer } from './web-animation-player'; + +const DURATION = 100; +const HEIGHT = 120; + +describe('IgxWebAnimationPlayer', () => { + let element: HTMLElement; + + beforeEach(() => { + element = document.createElement('div'); + element.style.height = `${HEIGHT}px`; + document.body.appendChild(element); + }); + + afterEach(() => element.remove()); + + describe('animate mode', () => { + const build = (steps: Keyframe[] = [{ opacity: 0 }, { opacity: 1 }], options: KeyframeAnimationOptions = { duration: DURATION }) => + new IgxWebAnimationPlayer(element, animation(steps, options), 'animate'); + + it('walks idle -> running -> finished and emits finished$ once', async () => { + const player = build(); + const finished = jasmine.createSpy('finished'); + player.finished$.subscribe(finished); + + expect(player.state()).toBe('idle'); + expect(player.started()).toBeFalse(); + + player.play(); + expect(player.state()).toBe('running'); + expect(player.started()).toBeTrue(); + + await firstValueFrom(player.finished$); + expect(player.state()).toBe('finished'); + expect(player.started()).toBeTrue(); + expect(finished).toHaveBeenCalledTimes(1); + }); + + it('finish() jumps to the end at once and notifies in a microtask', async () => { + const player = build(); + const finished = jasmine.createSpy('finished'); + player.finished$.subscribe(finished); + + player.play(); + player.finish(); + + expect(player.state()).toBe('finished'); + expect(element.getAnimations()[0].playState).toBe('finished'); + expect(finished).not.toHaveBeenCalled(); + + await Promise.resolve(); + expect(finished).toHaveBeenCalledTimes(1); + }); + + it('finish() works on a player that never played', async () => { + const player = build(); + const finished = jasmine.createSpy('finished'); + player.finished$.subscribe(finished); + + player.finish(); + await Promise.resolve(); + + expect(finished).toHaveBeenCalledTimes(1); + }); + + it('reset() right after finish() does not swallow the notification', async () => { + const player = build(); + const finished = jasmine.createSpy('finished'); + player.finished$.subscribe(finished); + + player.play(); + player.finish(); + player.reset(); + await Promise.resolve(); + + expect(player.state()).toBe('idle'); + expect(finished).toHaveBeenCalledTimes(1); + }); + + it('reset() and destroy() return to idle without emitting', async () => { + const player = build(); + const finished = jasmine.createSpy('finished'); + player.finished$.subscribe(finished); + + player.play(); + player.reset(); + expect(player.state()).toBe('idle'); + expect(element.getAnimations().length).toBe(0); + + player.play(); + player.destroy(); + expect(player.state()).toBe('idle'); + + player.finish(); + await Promise.resolve(); + expect(finished).not.toHaveBeenCalled(); + }); + + it('position maps to currentTime over delay plus duration and can be set before play()', () => { + const player = build(undefined, { duration: DURATION, delay: DURATION }); + + expect(player.position).toBe(0); + + player.position = 0.5; + expect(player.position).toBeCloseTo(0.5); + expect(player.state()).toBe('idle'); + expect(element.getAnimations()[0].currentTime).toBe(DURATION); + + player.play(); + expect(player.state()).toBe('running'); + }); + + it('pause() holds the running animation', () => { + const player = build(); + + player.play(); + player.pause(); + + expect(player.state()).toBe('paused'); + expect(element.getAnimations()[0].playState).toBe('paused'); + }); + + it('measures auto sizes and drops undefined keyframe values', () => { + const player = new IgxWebAnimationPlayer(element, growVerIn(), 'animate'); + + player.play(); + + const [from, to] = (element.getAnimations()[0].effect as KeyframeEffect).getKeyframes(); + expect(from['height']).toBe('0px'); + expect(to['height']).toBe(`${HEIGHT}px`); + expect('paddingBlock' in to).toBeFalse(); + player.destroy(); + }); + }); + + describe('skip mode', () => { + const build = () => new IgxWebAnimationPlayer(element, fadeIn(), 'skip'); + + it('never touches the DOM and finishes in a microtask', async () => { + const player = build(); + const finished = jasmine.createSpy('finished'); + player.finished$.subscribe(finished); + + player.play(); + expect(player.state()).toBe('running'); + expect(element.getAnimations().length).toBe(0); + expect(finished).not.toHaveBeenCalled(); + + await Promise.resolve(); + expect(player.state()).toBe('finished'); + expect(finished).toHaveBeenCalledTimes(1); + }); + + it('reset() before the microtask cancels the pending finish', async () => { + const player = build(); + const finished = jasmine.createSpy('finished'); + player.finished$.subscribe(finished); + + player.play(); + player.reset(); + await Promise.resolve(); + + expect(player.state()).toBe('idle'); + expect(finished).not.toHaveBeenCalled(); + }); + + it('finish() after play() emits once', async () => { + const player = build(); + const finished = jasmine.createSpy('finished'); + player.finished$.subscribe(finished); + + player.play(); + player.finish(); + await Promise.resolve(); + + expect(finished).toHaveBeenCalledTimes(1); + }); + }); +}); + +describe('IgxWebAnimationService', () => { + let element: HTMLElement; + + beforeEach(() => { + element = document.createElement('div'); + document.body.appendChild(element); + }); + + afterEach(() => element.remove()); + + it('animates by default', () => { + TestBed.configureTestingModule({ providers: [provideIgxAnimations('always')] }); + const player = TestBed.inject(IGX_ANIMATION_SERVICE).build(fadeIn, element); + + player.play(); + expect(element.getAnimations().length).toBe(1); + player.destroy(); + }); + + it('skips when animations are disabled', async () => { + TestBed.configureTestingModule({ providers: [provideIgxNoopAnimations()] }); + const player = TestBed.inject(IGX_ANIMATION_SERVICE).build(fadeIn({ duration: 1000 }), element); + + player.play(); + await Promise.resolve(); + + expect(element.getAnimations().length).toBe(0); + expect(player.state()).toBe('finished'); + }); + + it('skips when the element has no animate()', () => { + TestBed.configureTestingModule({ providers: [provideIgxAnimations('always')] }); + const bare = {} as HTMLElement; + const player = TestBed.inject(IGX_ANIMATION_SERVICE).build(fadeIn, bare); + + expect(() => player.play()).not.toThrow(); + }); +}); diff --git a/projects/igniteui-angular/core/src/services/animation/web-animation-player.ts b/projects/igniteui-angular/core/src/services/animation/web-animation-player.ts new file mode 100644 index 00000000000..492543b1288 --- /dev/null +++ b/projects/igniteui-angular/core/src/services/animation/web-animation-player.ts @@ -0,0 +1,139 @@ +import { computed, signal } from '@angular/core'; +import { Subject } from 'rxjs'; +import type { AnimationReferenceMetadata } from 'igniteui-angular/animations'; +import { clamp } from '../../core/utils'; +import type { AnimationPlayState, AnimationPlayer } from './animation'; + +/** `skip` never touches the DOM, used for reduced motion, disabled animations and SSR. */ +export type PlayerMode = 'animate' | 'skip'; + +/** WAAPI cannot interpolate `auto`; the computed value is used instead. */ +const AUTO = 'auto'; + +/** Keeps the first and last keyframe applied outside the active interval, so `position` can be set before `play()`. */ +const DEFAULT_TIMING: KeyframeAnimationOptions = { fill: 'both' }; + +/** + * `finished$` is always delivered asynchronously, also after `finish()`. Consumers react to it by + * tearing overlays down, so a synchronous emission would re-enter the caller of `finish()`. + * A skip-mode `play()` completes in the same microtask hop. + */ +export class IgxWebAnimationPlayer implements AnimationPlayer { + private readonly _state = signal('idle'); + private readonly _finished = new Subject(); + private animation?: Animation; + + public readonly state = this._state.asReadonly(); + public readonly started = computed(() => this._state() !== 'idle'); + public readonly finished$ = this._finished.asObservable(); + + constructor( + private readonly element: HTMLElement, + private readonly metadata: AnimationReferenceMetadata, + private readonly mode: PlayerMode + ) { } + + public get position(): number { + const total = this.totalTime(); + + if (!this.animation || total === 0) { + return 0; + } + + return clamp(Number(this.animation.currentTime ?? 0) / total, 0, 1); + } + + public set position(value: number) { + if (this.mode === 'skip') { + return; + } + + this.ensure().currentTime = clamp(value, 0, 1) * this.totalTime(); + } + + public play(): void { + this._state.set('running'); + + if (this.mode === 'skip') { + queueMicrotask(() => this.complete()); + return; + } + + this.ensure().play(); + } + + public pause(): void { + if (this._state() !== 'running') { + return; + } + + this.animation?.pause(); + this._state.set('paused'); + } + + /** Also works on a player that never played; the end state is reported once. */ + public finish(): void { + this.animation?.finish(); + this._state.set('finished'); + queueMicrotask(() => this._finished.next()); + } + + public reset(): void { + this.animation?.cancel(); + this._state.set('idle'); + } + + public destroy(): void { + this.reset(); + this.animation = undefined; + this._finished.complete(); + } + + private ensure(): Animation { + if (this.animation) { + return this.animation; + } + + const effect = new KeyframeEffect(this.element, this.resolveSteps(), { ...DEFAULT_TIMING, ...this.metadata.options }); + const animation = new Animation(effect, this.element.ownerDocument.timeline); + animation.addEventListener('finish', () => this.complete()); + this.animation = animation; + + return animation; + } + + /** Drops `undefined` values and measures `auto`, e.g. `{ height: 'auto' }` becomes `{ height: '120px' }`. */ + private resolveSteps(): Keyframe[] { + const style = getComputedStyle(this.element); + + return this.metadata.steps.map(step => { + const frame: Keyframe = {}; + + for (const [prop, value] of Object.entries(step)) { + if (value === undefined || value === null) { + continue; + } + + frame[prop] = value === AUTO ? style[prop as keyof CSSStyleDeclaration] as string : value; + } + + return frame; + }); + } + + private totalTime(): number { + const { delay = 0, duration = 0 } = this.metadata.options ?? {}; + + return delay + (typeof duration === 'number' ? duration : 0); + } + + /** Both the browser `finish` event and the skip-mode microtask arrive late, so a run ended by `reset()` or `finish()` stays silent. */ + private complete(): void { + if (this._state() !== 'running') { + return; + } + + this._state.set('finished'); + this._finished.next(); + } +} diff --git a/projects/igniteui-angular/core/src/services/animation/web-animation-service.ts b/projects/igniteui-angular/core/src/services/animation/web-animation-service.ts new file mode 100644 index 00000000000..a102de315f0 --- /dev/null +++ b/projects/igniteui-angular/core/src/services/animation/web-animation-service.ts @@ -0,0 +1,41 @@ +import { DOCUMENT } from '@angular/common'; +import { Injectable, inject } from '@angular/core'; +import { AnimationInput, resolveAnimation } from 'igniteui-angular/animations'; +import { AnimationPlayer, AnimationService, IGX_ANIMATION_MOTION } from './animation'; +import { IgxWebAnimationPlayer, PlayerMode } from './web-animation-player'; + +const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'; + +/** Runs animations through the Web Animations API. Provided via `IGX_ANIMATION_SERVICE`. */ +@Injectable({ providedIn: 'root' }) +export class IgxWebAnimationService implements AnimationService { + private readonly motion = inject(IGX_ANIMATION_MOTION); + private readonly document = inject(DOCUMENT); + private reducedMotion?: MediaQueryList; + + public build(animation: AnimationInput, element: HTMLElement): AnimationPlayer { + return new IgxWebAnimationPlayer(element, resolveAnimation(animation), this.mode(element)); + } + + private mode(element: HTMLElement): PlayerMode { + // No WAAPI on the server or in bare DOM shims. + if (typeof element.animate !== 'function') { + return 'skip'; + } + + switch (this.motion) { + case 'none': + return 'skip'; + case 'always': + return 'animate'; + default: + return this.prefersReducedMotion() ? 'skip' : 'animate'; + } + } + + private prefersReducedMotion(): boolean { + this.reducedMotion ??= this.document.defaultView?.matchMedia?.(REDUCED_MOTION_QUERY); + + return this.reducedMotion?.matches ?? false; + } +} diff --git a/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts b/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts index 30dfb1eed2c..98df6f971cb 100644 --- a/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts @@ -1,6 +1,6 @@ import { Component, ComponentRef, ElementRef, HostBinding, inject, Injector, ViewChild, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { PlatformUtil } from 'igniteui-angular'; import { scaleInVerTop, scaleOutVerTop } from 'igniteui-angular/animations'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -9,7 +9,6 @@ import { IgxCalendarContainerComponent } from 'igniteui-angular/date-picker'; import { IgxToggleDirective } from 'igniteui-angular/directives'; import { first } from 'rxjs/operators'; import { UIInteractions, wait } from '../../../../test-utils/ui-interactions.spec'; -import { IgxAngularAnimationService } from '../animation/angular-animation-service'; import { IgxOverlayService } from './overlay'; import { ContainerPositionStrategy } from './position'; import { AutoPositionStrategy } from './position/auto-position-strategy'; @@ -220,10 +219,9 @@ describe('igxOverlay', () => { mockPlatformUtil = { isIOS: false }; TestBed.configureTestingModule({ - imports: [NoopAnimationsModule], providers: [ + provideIgxNoopAnimations(), { provide: PlatformUtil, useValue: mockPlatformUtil }, - IgxAngularAnimationService, IgxOverlayService, ] }); @@ -520,8 +518,9 @@ describe('igxOverlay', () => { outlet = document.createElement('div'); outletRef = new ElementRef(outlet); TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, SimpleDynamicWithDirectiveComponent], + imports: [SimpleDynamicWithDirectiveComponent], providers: [ + provideIgxNoopAnimations(), { provide: ElementRef, useValue: outletRef }, IgxOverlayOutletDirective ] @@ -1601,7 +1600,8 @@ describe('igxOverlay', () => { describe('Unit Tests - Scroll Strategies: ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, SimpleDynamicWithDirectiveComponent] + imports: [SimpleDynamicWithDirectiveComponent], + providers: [provideIgxNoopAnimations()] }); })); it('Should properly initialize Scroll Strategy - Block.', fakeAsync(async () => { @@ -1797,7 +1797,8 @@ describe('igxOverlay', () => { describe('Integration tests: ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, SimpleDynamicWithDirectiveComponent] + imports: [SimpleDynamicWithDirectiveComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -3908,7 +3909,8 @@ describe('igxOverlay', () => { describe('Integration tests - Scroll Strategies: ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, SimpleDynamicWithDirectiveComponent] + imports: [SimpleDynamicWithDirectiveComponent], + providers: [provideIgxNoopAnimations()] }); })); // If adding a component near the visible window borders(left,right,up,down) @@ -4772,7 +4774,8 @@ describe('igxOverlay', () => { describe('Integration tests p3 (IgniteUI components): ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, SimpleDynamicWithDirectiveComponent] + imports: [SimpleDynamicWithDirectiveComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); it(`Should properly be able to render components that have no initial content(IgxCalendar, IgxAvatar)`, fakeAsync(() => { diff --git a/projects/igniteui-angular/core/src/services/overlay/overlay.ts b/projects/igniteui-angular/core/src/services/overlay/overlay.ts index 0c982bdeb5d..c044b10b9ac 100644 --- a/projects/igniteui-angular/core/src/services/overlay/overlay.ts +++ b/projects/igniteui-angular/core/src/services/overlay/overlay.ts @@ -1,13 +1,11 @@ -import { AnimationReferenceMetadata } from '@angular/animations'; import { ApplicationRef, ComponentRef, createComponent, ElementRef, EventEmitter, Injectable, Injector, NgZone, OnDestroy, Type, ViewContainerRef, DOCUMENT, inject } 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 'igniteui-angular/animations'; +import { AnimationInput, fadeIn, fadeOut, isPreset, scaleInHorLeft, scaleInHorRight, scaleInVerBottom, scaleInVerTop, scaleOutHorLeft, scaleOutHorRight, scaleOutVerBottom, scaleOutVerTop, slideInBottom, slideInTop, slideOutBottom, slideOutTop } from 'igniteui-angular/animations'; import { PlatformUtil } from '../../core/utils'; import { IgxOverlayOutletDirective } from './utilities'; -import { IgxAngularAnimationService } from '../animation/angular-animation-service'; -import { AnimationService } from '../animation/animation'; +import { IGX_ANIMATION_SERVICE } from '../animation/animation'; import { AutoPositionStrategy } from './position/auto-position-strategy'; import { ConnectedPositioningStrategy } from './position/connected-positioning-strategy'; import { ContainerPositionStrategy } from './position/container-position-strategy'; @@ -43,7 +41,7 @@ export class IgxOverlayService implements OnDestroy { private document = inject(DOCUMENT); private _zone = inject(NgZone); protected platformUtil = inject(PlatformUtil); - private animationService = inject(IgxAngularAnimationService); + private animationService = inject(IGX_ANIMATION_SERVICE); /** * Emitted just before the overlay content starts to open. @@ -783,9 +781,7 @@ export class IgxOverlayService implements OnDestroy { } } } - if (!info.closeAnimationDetaching) { - this.closed.emit({ id: info.id!, componentRef: info.componentRef, event: info.event }); - } + this.closed.emit({ id: info.id!, componentRef: info.componentRef, event: info.event }); delete info.event; } @@ -870,10 +866,8 @@ export class IgxOverlayService implements OnDestroy { delete info.elementRef; delete info.settings; delete info.initialSize; - info.openAnimationDetaching = true; info.openAnimationPlayer?.destroy(); delete info.openAnimationPlayer; - info.closeAnimationDetaching = true; info.closeAnimationPlayer?.destroy(); delete info.closeAnimationPlayer; delete (info as any).ngZone; @@ -882,13 +876,12 @@ export class IgxOverlayService implements OnDestroy { private playOpenAnimation(info: OverlayInfo) { // if there is opening animation already started do nothing - if (info.openAnimationPlayer?.hasStarted()) { + if (info.openAnimationPlayer?.started()) { return; } - if (info.closeAnimationPlayer?.hasStarted()) { + if (info.closeAnimationPlayer?.started()) { const position = info.closeAnimationPlayer.position; info.closeAnimationPlayer.reset(); - info.openAnimationPlayer!.init(); info.openAnimationPlayer!.position = 1 - position; } this.animationStarting.emit({ id: info.id!, animationPlayer: info.openAnimationPlayer!, animationType: 'open' }); @@ -901,13 +894,12 @@ export class IgxOverlayService implements OnDestroy { private playCloseAnimation(info: OverlayInfo, event?: Event) { // if there is closing animation already started do nothing - if (info.closeAnimationPlayer?.hasStarted()) { + if (info.closeAnimationPlayer?.started()) { return; } - if (info.openAnimationPlayer?.hasStarted()) { + if (info.openAnimationPlayer?.started()) { const position = info.openAnimationPlayer.position; info.openAnimationPlayer.reset(); - info.closeAnimationPlayer!.init(); info.closeAnimationPlayer!.position = 1 - position; } this.animationStarting.emit({ id: info.id!, animationPlayer: info.closeAnimationPlayer!, animationType: 'close' }); @@ -915,21 +907,20 @@ export class IgxOverlayService implements OnDestroy { info.closeAnimationPlayer!.play(); } - // TODO: check if applyAnimationParams will work with complex animations - private applyAnimationParams(wrapperElement: HTMLElement, animationOptions: AnimationReferenceMetadata | undefined) { - if (!animationOptions) { + /** Syncs the wrapper's CSS transition with the content animation timing. */ + private applyAnimationParams(wrapperElement: HTMLElement, animation: AnimationInput | undefined) { + if (!animation) { wrapperElement.style.transitionDuration = '0ms'; return; } - if (!animationOptions.options || !animationOptions.options.params) { - return; - } - const params = animationOptions.options.params as IAnimationParams; - if (params.duration) { - wrapperElement.style.transitionDuration = params.duration; + + const { duration, easing } = (isPreset(animation) ? animation.defaults : animation.options) ?? {}; + + if (typeof duration === 'number') { + wrapperElement.style.transitionDuration = `${duration}ms`; } - if (params.easing) { - wrapperElement.style.transitionTimingFunction = params.easing; + if (easing) { + wrapperElement.style.transitionTimingFunction = easing; } } @@ -955,7 +946,7 @@ export class IgxOverlayService implements OnDestroy { if (isInsideClick) { return; // if the click is outside click, but close animation has started do nothing - } else if (!(info.closeAnimationPlayer?.hasStarted())) { + } else if (!(info.closeAnimationPlayer?.started())) { this._hide(info.id!, ev); } } @@ -972,7 +963,7 @@ export class IgxOverlayService implements OnDestroy { // if all overlays minus closing overlays equals one add the handler this._overlayInfos.filter(x => x.settings!.closeOnOutsideClick && !x.settings!.modal).length - this._overlayInfos.filter(x => x.settings!.closeOnOutsideClick && !x.settings!.modal && - x.closeAnimationPlayer?.hasStarted()).length === 1) { + x.closeAnimationPlayer?.started()).length === 1) { // click event is not fired on iOS. To make element "clickable" we are // setting the cursor to pointer @@ -1008,7 +999,7 @@ export class IgxOverlayService implements OnDestroy { private addResizeHandler() { const closingOverlaysCount = this._overlayInfos - .filter(o => o.closeAnimationPlayer?.hasStarted()) + .filter(o => o.closeAnimationPlayer?.started()) .length; if (this._overlayInfos.length - closingOverlaysCount === 1) { this._document.defaultView!.addEventListener('resize', this.repositionAll); @@ -1018,7 +1009,7 @@ export class IgxOverlayService implements OnDestroy { private removeResizeHandler() { const closingOverlaysCount = this._overlayInfos - .filter(o => o.closeAnimationPlayer?.hasStarted()) + .filter(o => o.closeAnimationPlayer?.started()) .length; if (this._overlayInfos.length - closingOverlaysCount === 1) { this._document.defaultView!.removeEventListener('resize', this.repositionAll); @@ -1072,28 +1063,26 @@ export class IgxOverlayService implements OnDestroy { private buildAnimationPlayers(info: OverlayInfo) { if (info.settings!.positionStrategy!.settings.openAnimation) { info.openAnimationPlayer = this.animationService - .buildAnimation(info.settings!.positionStrategy!.settings.openAnimation, info.elementRef!.nativeElement); - info.openAnimationPlayer.animationEnd + .build(info.settings!.positionStrategy!.settings.openAnimation, info.elementRef!.nativeElement); + info.openAnimationPlayer.finished$ .pipe(takeUntil(this.destroy$)) .subscribe(() => this.openAnimationDone(info)); } if (info.settings!.positionStrategy!.settings.closeAnimation) { info.closeAnimationPlayer = this.animationService - .buildAnimation(info.settings!.positionStrategy!.settings.closeAnimation, info.elementRef!.nativeElement); - info.closeAnimationPlayer.animationEnd + .build(info.settings!.positionStrategy!.settings.closeAnimation, info.elementRef!.nativeElement); + info.closeAnimationPlayer.finished$ .pipe(takeUntil(this.destroy$)) .subscribe(() => this.closeAnimationDone(info)); } } private openAnimationDone(info: OverlayInfo) { - if (!info.openAnimationDetaching) { - this.opened.emit({ id: info.id!, componentRef: info.componentRef }); - } + this.opened.emit({ id: info.id!, componentRef: info.componentRef }); if (info.openAnimationPlayer) { info.openAnimationPlayer.reset(); } - if (info.closeAnimationPlayer?.hasStarted()) { + if (info.closeAnimationPlayer?.started()) { info.closeAnimationPlayer.reset(); } } @@ -1102,7 +1091,7 @@ export class IgxOverlayService implements OnDestroy { if (info.closeAnimationPlayer) { info.closeAnimationPlayer.reset(); } - if (info.openAnimationPlayer?.hasStarted()) { + if (info.openAnimationPlayer?.started()) { info.openAnimationPlayer.reset(); } this.closeDone(info); @@ -1110,10 +1099,10 @@ export class IgxOverlayService implements OnDestroy { private finishAnimations(info: OverlayInfo) { // // TODO: should we emit here opened or closed events - if (info.openAnimationPlayer?.hasStarted()) { + if (info.openAnimationPlayer?.started()) { info.openAnimationPlayer.finish(); } - if (info.closeAnimationPlayer?.hasStarted()) { + if (info.closeAnimationPlayer?.started()) { info.closeAnimationPlayer.finish(); } } diff --git a/projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts b/projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts index a4c831b76be..7a411724c1e 100644 --- a/projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts +++ b/projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts @@ -1,7 +1,6 @@ -import { AnimationReferenceMetadata } from '@angular/animations'; import { ConnectedFit, HorizontalAlignment, VerticalAlignment } from './../utilities'; import { BaseFitPositionStrategy } from './base-fit-position-strategy'; -import { AnimationUtil } from 'igniteui-angular/animations'; +import { AnimationInput, isHorizontalAnimation, isVerticalAnimation, reverseAnimation } from 'igniteui-angular/animations'; /** * Positions the element as in **Connected** positioning strategy and re-positions the element in @@ -185,16 +184,16 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy { * @param direction required animation direction * @returns reverse animation in given direction if one exists */ - private updateAnimation(animation: AnimationReferenceMetadata, direction: FlipDirection): AnimationReferenceMetadata { + private updateAnimation(animation: AnimationInput, direction: FlipDirection): AnimationInput { switch (direction) { case FlipDirection.Horizontal: - if (AnimationUtil.instance().isHorizontalAnimation(animation)) { - return AnimationUtil.instance().reverseAnimationResolver(animation); + if (isHorizontalAnimation(animation)) { + return reverseAnimation(animation); } break; case FlipDirection.Vertical: - if (AnimationUtil.instance().isVerticalAnimation(animation)) { - return AnimationUtil.instance().reverseAnimationResolver(animation); + if (isVerticalAnimation(animation)) { + return reverseAnimation(animation); } break; } diff --git a/projects/igniteui-angular/core/src/services/overlay/utilities.ts b/projects/igniteui-angular/core/src/services/overlay/utilities.ts index 0f0fb554788..0bf28897314 100644 --- a/projects/igniteui-angular/core/src/services/overlay/utilities.ts +++ b/projects/igniteui-angular/core/src/services/overlay/utilities.ts @@ -1,6 +1,6 @@ -import { AnimationReferenceMetadata } from '@angular/animations'; import { ComponentRef, Directive, ElementRef, inject, Injector, NgZone } from '@angular/core'; import { CancelableBrowserEventArgs, CancelableEventArgs, cloneValue, IBaseEventArgs } from '../../core/utils'; +import type { AnimationInput } from 'igniteui-angular/animations'; import { AnimationPlayer } from '../animation/animation'; import { IPositionStrategy } from './position/IPositionStrategy'; import { IScrollStrategy } from './scroll'; @@ -111,10 +111,10 @@ export interface PositionSettings { verticalStartPoint?: VerticalAlignment; /* blazorSuppress */ /** Animation applied while overlay opens */ - openAnimation?: AnimationReferenceMetadata; + openAnimation?: AnimationInput; /* blazorSuppress */ /** Animation applied while overlay closes */ - closeAnimation?: AnimationReferenceMetadata; + closeAnimation?: AnimationInput; /** The size up to which element may shrink when shown in elastic position strategy */ minSize?: Size; /** The offset of the element from the target in pixels */ @@ -198,13 +198,7 @@ export interface OverlayInfo { initialSize?: Size; hook?: HTMLElement; openAnimationPlayer?: AnimationPlayer; - // calling animation.destroy in detach fires animation.done. This should not happen - // this is why we should trace if animation ever started - openAnimationDetaching?: boolean; closeAnimationPlayer?: AnimationPlayer; - // calling animation.destroy in detach fires animation.done. This should not happen - // this is why we should trace if animation ever started - closeAnimationDetaching?: boolean; ngZone: NgZone; transformX?: number; transformY?: number; diff --git a/projects/igniteui-angular/core/src/services/public_api.ts b/projects/igniteui-angular/core/src/services/public_api.ts index f5d80dac755..e874e7017f7 100644 --- a/projects/igniteui-angular/core/src/services/public_api.ts +++ b/projects/igniteui-angular/core/src/services/public_api.ts @@ -1,7 +1,6 @@ // Export services -export * from './animation/angular-animation-player'; -export * from './animation/angular-animation-service'; export * from './animation/animation'; +export * from './animation/web-animation-service'; export * from './overlay/overlay'; export * from './overlay/position'; export * from './overlay/scroll'; diff --git a/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.spec.ts index 40cee7de9e2..180a6d5f5c8 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.spec.ts +++ b/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.spec.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxCalendarComponent } from '../../../../calendar/src/public_api'; import { IgxButtonDirective } from '../../../../directives/src/directives/button/button.directive'; import { IgxPickerActionsDirective } from '../../../../core/src/date-common/picker-icons.common'; @@ -13,7 +13,8 @@ describe('Calendar Container', () => { let container: IgxCalendarContainerComponent; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxDatePickerTestComponent] + imports: [IgxDatePickerTestComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts index a1bc7a5dfc5..6b1d11693a3 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts @@ -1,6 +1,5 @@ import { ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { UntypedFormControl, UntypedFormGroup, FormsModule, NgForm, ReactiveFormsModule, Validators } from '@angular/forms'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { IgxHintDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective @@ -17,7 +16,7 @@ import { ChangeDetectorRef, Component, DebugElement, ElementRef, EventEmitter, I import { By } from '@angular/platform-browser'; import { PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../../../core/src/date-common/types'; import { DatePart } from '../../../core/src/date-common/public_api'; -import { DateRangeDescriptor, DateRangeType } from 'igniteui-angular/core'; +import { DateRangeDescriptor, DateRangeType, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../../../core/src/date-common/public_api'; import { DateTimeUtil } from '../../../core/src/date-common/util/date-time.util'; import { registerLocaleData } from "@angular/common"; @@ -40,7 +39,6 @@ describe('IgxDatePicker', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxDatePickerTestKbrdComponent, IgxDatePickerTestComponent, IgxDatePickerNgModelComponent, @@ -48,7 +46,8 @@ describe('IgxDatePicker', () => { IgxDatePickerWithTemplatesComponent, IgxDatePickerInFormComponent, IgxDatePickerReactiveFormComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -1673,10 +1672,10 @@ describe('IgxDatePicker', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxDatePickerNgModelComponent, ], providers: [ + provideIgxNoopAnimations(), provideZonelessChangeDetection() ] }).compileComponents(); diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts index 3efc986a445..851ab800a26 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts @@ -2,7 +2,6 @@ import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy, inject, ChangeDetectorRef, ElementRef } from '@angular/core'; import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../../../input-group/src/public_api'; import { CustomDateRange, DateRange, PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../../../core/src/date-common/types'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { ControlsFunction } from '../../../test-utils/controls-functions.spec'; @@ -16,13 +15,12 @@ import { IgxDateRangePickerComponent, IgxDateRangeEndComponent } from './public_ import { AutoPositionStrategy, IgxOverlayService } from 'igniteui-angular/core'; import { Subject } from 'rxjs'; import { AsyncPipe } from '@angular/common'; -import { IgxAngularAnimationService } from 'igniteui-angular/core'; import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../../../core/src/date-common/picker-icons.common'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { registerLocaleData } from "@angular/common"; import localeJa from "@angular/common/locales/ja"; import localeBg from "@angular/common/locales/bg"; -import { CalendarDay } from 'igniteui-angular/core'; +import { CalendarDay, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from 'igniteui-angular/calendar'; import { KeyboardNavigationService } from 'igniteui-angular/calendar/src/calendar/calendar.services'; @@ -84,10 +82,9 @@ describe('IgxDateRangePicker', () => { }); TestBed.configureTestingModule({ - imports: [NoopAnimationsModule], providers: [ + provideIgxNoopAnimations(), { provide: ElementRef, useValue: elementRef }, - IgxAngularAnimationService, IgxOverlayService, IgxCalendarComponent, KeyboardNavigationService, @@ -317,12 +314,12 @@ describe('IgxDateRangePicker', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReactiveFormsModule, DateRangeDefaultComponent, DateRangeDisabledComponent, DateRangeReactiveFormComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(fakeAsync(() => { @@ -971,14 +968,14 @@ describe('IgxDateRangePicker', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReactiveFormsModule, DateRangeTwoInputsTestComponent, DateRangeTwoInputsNgModelTestComponent, DateRangeDisabledComponent, DateRangeTwoInputsDisabledComponent, DateRangeReactiveFormComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(async () => { @@ -1816,12 +1813,12 @@ describe('IgxDateRangePicker', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, DateRangeDefaultComponent, DateRangeCustomComponent, DateRangeTemplatesComponent, DateRangeTwoInputsTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -2275,7 +2272,8 @@ describe('IgxDateRangePicker', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, DateRangeDefaultComponent] + imports: [DateRangeDefaultComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/dialog/README.md b/projects/igniteui-angular/dialog/README.md index 1d03c8b46f9..9261fcd3da4 100644 --- a/projects/igniteui-angular/dialog/README.md +++ b/projects/igniteui-angular/dialog/README.md @@ -101,8 +101,8 @@ import { slideInLeft, slideOutRight } from 'igniteui-angular'; ... @ViewChild('alert', { static: true }) public alert: IgxDialogComponent; public newPositionSettings: PositionSettings = { - openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }), - closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }), + openAnimation: slideInTop({ duration: 2000 }), + closeAnimation: slideOutBottom({ duration: 2000 }), horizontalDirection: HorizontalAlignment.Left, verticalDirection: VerticalAlignment.Middle, horizontalStartPoint: HorizontalAlignment.Left, diff --git a/projects/igniteui-angular/dialog/src/dialog/dialog.component.spec.ts b/projects/igniteui-angular/dialog/src/dialog/dialog.component.spec.ts index 81acbb65d1b..19024710062 100644 --- a/projects/igniteui-angular/dialog/src/dialog/dialog.component.spec.ts +++ b/projects/igniteui-angular/dialog/src/dialog/dialog.component.spec.ts @@ -1,14 +1,12 @@ import { Component, ViewChild, ChangeDetectionStrategy, provideZonelessChangeDetection, signal } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { IDialogCancellableEventArgs, IDialogEventArgs, IgxDialogComponent } from './dialog.component'; -import { useAnimation } from '@angular/animations'; -import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular/core'; +import { PositionSettings, HorizontalAlignment, VerticalAlignment, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxToggleDirective } from '../../../directives/src/directives/toggle/toggle.directive'; import { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives'; -import { slideInTop, slideOutBottom } from 'igniteui-angular/animations'; +import { resolveAnimation, slideInTop, slideOutBottom } from 'igniteui-angular/animations'; const OVERLAY_MAIN_CLASS = 'igx-overlay'; const OVERLAY_WRAPPER_CLASS = `${OVERLAY_MAIN_CLASS}__wrapper--flex`; @@ -19,7 +17,6 @@ describe('Dialog', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, AlertComponent, DialogComponent, CustomDialogComponent, @@ -29,7 +26,8 @@ describe('Dialog', () => { DialogSampleComponent, PositionSettingsDialogComponent, DialogTwoWayDataBindingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -489,18 +487,15 @@ describe('Dialog', () => { const currentElement = fix.componentInstance; // Check initial animation settings - expect(dialog.positionSettings.openAnimation.animation.type).toEqual(8, 'Animation type is set'); - expect(dialog.positionSettings.openAnimation.options.params.duration).toEqual('200ms', 'Animation duration is set to 200ms'); - - expect(dialog.positionSettings.closeAnimation.animation.type).toEqual(8, 'Animation type is set'); - expect(dialog.positionSettings.closeAnimation.options.params.duration).toEqual('200ms', 'Animation duration is set to 200ms'); + expect(resolveAnimation(dialog.positionSettings.openAnimation).options.duration).toEqual(200, 'Animation duration is set to 200ms'); + expect(resolveAnimation(dialog.positionSettings.closeAnimation).options.duration).toEqual(200, 'Animation duration is set to 200ms'); dialog.positionSettings = currentElement.animationSettings; fix.detectChanges(); // Check the new animation settings - expect(dialog.positionSettings.openAnimation.options.params.duration).toEqual('800ms', 'Animation duration is set to 800ms'); - expect(dialog.positionSettings.closeAnimation.options.params.duration).toEqual('700ms', 'Animation duration is set to 700ms'); + expect(resolveAnimation(dialog.positionSettings.openAnimation).options.duration).toEqual(800, 'Animation duration is set to 800ms'); + expect(resolveAnimation(dialog.positionSettings.closeAnimation).options.duration).toEqual(700, 'Animation duration is set to 700ms'); }); }); @@ -676,8 +671,8 @@ class PositionSettingsDialogComponent { verticalDirection: VerticalAlignment.Middle, horizontalStartPoint: HorizontalAlignment.Left, verticalStartPoint: VerticalAlignment.Middle, - openAnimation: useAnimation(slideInTop, { params: { duration: '200ms' } }), - closeAnimation: useAnimation(slideOutBottom, { params: { duration: '200ms' } }) + openAnimation: slideInTop({ duration: 200 }), + closeAnimation: slideOutBottom({ duration: 200 }) }; public newPositionSettings: PositionSettings = { @@ -686,8 +681,8 @@ class PositionSettingsDialogComponent { }; public animationSettings: PositionSettings = { - openAnimation: useAnimation(slideInTop, { params: { duration: '800ms' } }), - closeAnimation: useAnimation(slideOutBottom, { params: { duration: '700ms' } }) + openAnimation: slideInTop({ duration: 800 }), + closeAnimation: slideOutBottom({ duration: 700 }) }; } @@ -710,8 +705,8 @@ describe('Dialog - zoneless change detection', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, ZonelessDialogHostComponent], - providers: [provideZonelessChangeDetection()] + imports: [ZonelessDialogHostComponent], + providers: [provideIgxNoopAnimations(), provideZonelessChangeDetection()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts b/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts index f3139520094..2136b8c3a41 100644 --- a/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts +++ b/projects/igniteui-angular/dialog/src/dialog/dialog.component.ts @@ -248,8 +248,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After * ... * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent; * public newPositionSettings: PositionSettings = { - * openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }), - * closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }), + * openAnimation: slideInTop({ duration: 2000 }), + * closeAnimation: slideOutBottom({ duration: 2000 }), * horizontalDirection: HorizontalAlignment.Left, * verticalDirection: VerticalAlignment.Middle, * horizontalStartPoint: HorizontalAlignment.Left, diff --git a/projects/igniteui-angular/directives/src/directives/button/button.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/button/button.directive.spec.ts index 9036bf1c89e..cf12706f532 100644 --- a/projects/igniteui-angular/directives/src/directives/button/button.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/button/button.directive.spec.ts @@ -1,10 +1,10 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxButtonDirective } from './button.directive'; import { IgxRippleDirective } from '../ripple/ripple.directive'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; const BUTTON_COMFORTABLE = 'igx-button'; @@ -21,10 +21,10 @@ describe('IgxButton', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, InitButtonComponent, ButtonWithAttribsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.spec.ts index 93fbad53d11..b99d9188029 100644 --- a/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/button/icon-button.directive.spec.ts @@ -1,9 +1,9 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxIconButtonDirective } from './icon-button.directive'; import { IgxRippleDirective } from '../ripple/ripple.directive'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxIconComponent } from '../../../../icon/src/icon/icon.component'; describe('IgxIconButton', () => { @@ -18,9 +18,9 @@ describe('IgxIconButton', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IconButtonComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.spec.ts index 85ae8628f00..49776a7784a 100644 --- a/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.spec.ts @@ -4,14 +4,13 @@ import { Component, ViewChild, DebugElement, EventEmitter, Output, SimpleChange, import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule, UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule, Validators, NgControl } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxInputGroupComponent, IgxInputDirective } from '../../../../input-group/src/public_api'; import { ControlsFunction } from '../../../../test-utils/controls-functions.spec'; import { UIInteractions } from '../../../../test-utils/ui-interactions.spec'; import { ViewEncapsulation } from '@angular/core'; import localeJa from "@angular/common/locales/ja"; import localeBg from "@angular/common/locales/bg"; -import { DatePart } from 'igniteui-angular/core'; +import { DatePart, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { MaskParsingService } from '../mask/mask-parsing.service'; import { removeUnicodeSpaces } from 'igniteui-angular/test-utils/helper-utils.spec'; @@ -515,11 +514,11 @@ describe('IgxDateTimeEditor', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxDateTimeEditorSampleComponent, IgxDateTimeEditorBaseTestComponent, IgxDateTimeEditorShadowDomComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(async () => { @@ -1307,9 +1306,9 @@ describe('IgxDateTimeEditor', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxDateTimeEditorFormComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { diff --git a/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.spec.ts index f926db8c3f7..02e8789575d 100644 --- a/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.spec.ts @@ -1,16 +1,17 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxFocusTrapDirective } from './focus-trap.directive'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions } from '../../../../test-utils/ui-interactions.spec'; import { IgxTimePickerComponent } from '../../../../time-picker/src/time-picker/time-picker.component'; describe('igxFocusTrap', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, TrapFocusTestComponent] + imports: [TrapFocusTestComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/directives/src/directives/focus/focus.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/focus/focus.directive.spec.ts index 9e255bcc249..eb95bfd2f10 100644 --- a/projects/igniteui-angular/directives/src/directives/focus/focus.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/focus/focus.directive.spec.ts @@ -1,12 +1,12 @@ import { Component, DebugElement, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxFocusDirective } from './focus.directive'; import { EDITOR_PROVIDER, EditorProvider } from '../../../../core/src/core/edit-provider'; import { IgxCheckboxComponent } from '../../../../checkbox/src/checkbox/checkbox.component'; import { IgxDatePickerComponent } from '../../../../date-picker/src/public_api'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxRadioComponent } from '../../../../radio/src/radio/radio.component'; import { IgxSwitchComponent } from '../../../../switch/src/switch/switch.component'; @@ -14,12 +14,12 @@ describe('igxFocus', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, SetFocusComponent, NoFocusComponent, TriggerFocusOnClickComponent, CheckboxPickerComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts index c5f69f39fea..3875366dca6 100644 --- a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts @@ -1,11 +1,10 @@ import { ChangeDetectionStrategy, Component, DebugElement, ViewChild, ElementRef, OnInit, inject } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxToggleActionDirective, IgxToggleDirective } from './toggle.directive'; import { first } from 'rxjs/operators'; -import { AbsoluteScrollStrategy, AutoPositionStrategy, CancelableEventArgs, ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayService, OffsetMode, OverlaySettings } from 'igniteui-angular/core'; +import { AbsoluteScrollStrategy, AutoPositionStrategy, CancelableEventArgs, ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayService, OffsetMode, OverlaySettings, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxToggle', () => { const HIDDEN_TOGGLER_CLASS = 'igx-toggle--hidden'; @@ -13,14 +12,14 @@ describe('IgxToggle', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxToggleActionTestComponent, IgxToggleServiceInjectComponent, IgxOverlayServiceComponent, IgxToggleTestComponent, TestWithOnPushComponent, TestWithThreeToggleActionsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts index f1b9426da16..e0032d5216f 100644 --- a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts @@ -214,8 +214,8 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { // if there is open animation do nothing // if toggle is not collapsed and there is no close animation do nothing const info = this.overlayService.getOverlayById(this._overlayId); - const openAnimationStarted = info?.openAnimationPlayer?.hasStarted() ?? false; - const closeAnimationStarted = info?.closeAnimationPlayer?.hasStarted() ?? false; + const openAnimationStarted = info?.openAnimationPlayer?.started() ?? false; + const closeAnimationStarted = info?.closeAnimationPlayer?.started() ?? false; if (openAnimationStarted || !(this._collapsed || closeAnimationStarted)) { return; } @@ -263,7 +263,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { // if toggle is collapsed do nothing // if there is close animation do nothing, toggle will close anyway const info = this.overlayService.getOverlayById(this._overlayId); - const closeAnimationStarted = info?.closeAnimationPlayer?.hasStarted() || false; + const closeAnimationStarted = info?.closeAnimationPlayer?.started() || false; if (this._collapsed || closeAnimationStarted) { return; } @@ -291,7 +291,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { /** @hidden @internal */ public get isClosing() { const info = this.overlayService.getOverlayById(this._overlayId); - return info ? info.closeAnimationPlayer?.hasStarted() : false; + return info ? info.closeAnimationPlayer?.started() : false; } /** diff --git a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts index 761b06485ef..921a1fea9b3 100644 --- a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts +++ b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts @@ -1,7 +1,6 @@ import { first } from 'igniteui-angular/core'; import { AutoPositionStrategy } from 'igniteui-angular/core'; import { ConnectedFit, HorizontalAlignment, Point, PositionSettings, Size, VerticalAlignment } from 'igniteui-angular/core'; -import { useAnimation } from '@angular/animations'; import { fadeOut, scaleInCenter } from 'igniteui-angular/animations'; export const TooltipRegexes = Object.freeze({ @@ -66,8 +65,8 @@ export const TooltipPositionSettings: PositionSettings = { horizontalStartPoint: HorizontalAlignment.Center, verticalDirection: VerticalAlignment.Bottom, verticalStartPoint: VerticalAlignment.Bottom, - openAnimation: useAnimation(scaleInCenter, { params: { duration: '150ms' } }), - closeAnimation: useAnimation(fadeOut, { params: { duration: '75ms' } }), + openAnimation: scaleInCenter({ duration: 150 }), + closeAnimation: fadeOut({ duration: 75 }), offset: 6 }; diff --git a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.spec.ts index d4df2525117..33bf6f1a172 100644 --- a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.spec.ts @@ -1,7 +1,7 @@ import { DebugElement, ErrorHandler, provideZonelessChangeDetection } from '@angular/core'; import { fakeAsync, TestBed, tick, flush, waitForAsync, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipWithCloseButtonComponent, IgxTooltipWithNestedContentComponent, IgxTooltipNestedTooltipsComponent } from '../../../../test-utils/tooltip-components.spec'; import { UIInteractions, wait } from '../../../../test-utils/ui-interactions.spec'; import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../../../core/src/services/public_api'; @@ -31,7 +31,6 @@ describe('IgxTooltip', () => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, @@ -39,7 +38,8 @@ describe('IgxTooltip', () => { IgxTooltipWithCloseButtonComponent, IgxTooltipWithNestedContentComponent, IgxTooltipNestedTooltipsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); UIInteractions.clearOverlay(); })); @@ -1129,10 +1129,9 @@ describe('IgxTooltip', () => { TestBed.resetTestingModule(); await TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTooltipWithCloseButtonComponent ], - providers: [provideZonelessChangeDetection()] + providers: [provideIgxNoopAnimations(), provideZonelessChangeDetection()] }).compileComponents(); }); diff --git a/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.spec.ts index 603478d0fc0..efcd0c8bb76 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.spec.ts +++ b/projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.spec.ts @@ -1,11 +1,11 @@ import { Component, ViewChild, Pipe, PipeTransform, ElementRef, inject, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, tick, fakeAsync, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxAutocompleteDirective, AutocompleteOverlaySettings } from './autocomplete.directive'; import { UIInteractions } from '../../../../test-utils/ui-interactions.spec'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from '../../drop-down/public_api'; import { FormsModule, ReactiveFormsModule, UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment } from '../../../../core/src/services/public_api'; import { IgxRippleDirective } from '../../../../directives/src/directives/ripple/ripple.directive'; import { IgxIconComponent } from '../../../../icon/src/icon/icon.component'; @@ -27,11 +27,11 @@ describe('IgxAutocomplete', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, AutocompleteComponent, AutocompleteInputComponent, AutocompleteFormComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); describe('General tests: ', () => { diff --git a/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.spec.ts index a69f9d8c339..cabfbf2764e 100644 --- a/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/drop-down/src/drop-down/drop-down.component.spec.ts @@ -1,7 +1,6 @@ import { Component, ViewChild, OnInit, ElementRef, ViewChildren, QueryList, ChangeDetectorRef, DOCUMENT, ChangeDetectionStrategy, provideZonelessChangeDetection } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxToggleActionDirective, IgxToggleDirective } from '../../../directives/src/directives/toggle/toggle.directive'; import { IgxDropDownItemComponent } from './drop-down-item.component'; import { IgxDropDownComponent, IgxDropDownItemNavigationDirective } from './public_api'; @@ -15,7 +14,7 @@ import { IgxForOfDirective } from '../../../directives/src/directives/for-of/for import { IgxDropDownItemBaseDirective } from './drop-down-item.base'; import { IgxSelectionAPIService } from 'igniteui-angular/core'; import { IgxButtonDirective } from '../../../directives/src/directives/button/button.directive'; -import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core'; +import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment, provideIgxNoopAnimations } from 'igniteui-angular/core'; const CSS_CLASS_LIST = 'igx-drop-down'; const CSS_CLASS_SCROLL = 'igx-drop-down__list-scroll'; @@ -182,9 +181,9 @@ describe('IgxDropDown ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxDropDownTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -835,10 +834,10 @@ describe('IgxDropDown ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, DoubleIgxDropDownComponent, InputWithDropDownDirectiveComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); it('should call preventDefault on a mousedown event when allowItemsFocus is disabled', () => { @@ -927,9 +926,9 @@ describe('IgxDropDown ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, VirtualizedDropDownComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); TestBed.inject(THEME_TOKEN); })); @@ -1035,10 +1034,9 @@ describe('IgxDropDown ', () => { TestBed.resetTestingModule(); await TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, VirtualizedDropDownComponent ], - providers: [provideZonelessChangeDetection()] + providers: [provideIgxNoopAnimations(), provideZonelessChangeDetection()] }).compileComponents(); fixture = TestBed.createComponent(VirtualizedDropDownComponent); fixture.detectChanges(); @@ -1126,9 +1124,9 @@ describe('IgxDropDown ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxDropDownTestComponent, - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -1201,9 +1199,9 @@ describe('IgxDropDown ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, GroupDropDownComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -1263,9 +1261,9 @@ describe('IgxDropDown ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxDropDownTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -1296,9 +1294,9 @@ describe('IgxDropDown ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxDropDownTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -1373,9 +1371,9 @@ describe('IgxDropDown ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxDropDownAnchorTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts index a6c60b4ca5f..f6c0577ad0a 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts +++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts @@ -1,5 +1,5 @@ import { Directive, ElementRef, EventEmitter, inject, InjectionToken } from '@angular/core'; -import { AnimationReferenceMetadata } from '@angular/animations'; +import type { AnimationInput } from 'igniteui-angular/animations'; import { CancelableEventArgs, IBaseEventArgs } from 'igniteui-angular/core'; export interface IgxExpansionPanelBase { @@ -8,7 +8,7 @@ export interface IgxExpansionPanelBase { /** @hidden @internal */ headerId: string; collapsed: boolean; - animationSettings: { openAnimation: AnimationReferenceMetadata; closeAnimation: AnimationReferenceMetadata }; + animationSettings: { openAnimation: AnimationInput; closeAnimation: AnimationInput }; contentCollapsed: EventEmitter; contentCollapsing: EventEmitter; contentExpanded: EventEmitter; diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts index 8ee1d898091..7964c2f5e43 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts +++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts @@ -1,7 +1,7 @@ +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { Component, DebugElement, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, ComponentFixture, tick, fakeAsync, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxExpansionPanelComponent } from './expansion-panel.component'; import { ExpansionPanelHeaderIconPosition, IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component'; import { IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective, IgxExpansionPanelTitleDirective } from './expansion-panel.directives'; @@ -35,13 +35,13 @@ describe('igxExpansionPanel', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxExpansionPanelGridComponent, IgxExpansionPanelListComponent, IgxExpansionPanelSampleComponent, IgxExpansionPanelImageComponent, IgxExpansionPanelTooltipComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.spec.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.spec.ts index f4905be4d77..709c7cb6c63 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.spec.ts +++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.spec.ts @@ -1,7 +1,6 @@ import { TestBed } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { noop } from 'rxjs'; -import { IgxAngularAnimationService } from 'igniteui-angular/core'; +import { IGX_ANIMATION_SERVICE } from 'igniteui-angular/core'; import { ANIMATION_TYPE, ToggleAnimationPlayer } from './toggle-animation-component'; import { growVerIn, growVerOut } from 'igniteui-angular/animations'; @@ -12,11 +11,8 @@ describe('Toggle animation component', () => { const mockBuilder = jasmine.createSpyObj('mockBuilder', ['build'], {}); beforeEach(() => { TestBed.configureTestingModule({ - imports: [ - NoopAnimationsModule - ], providers: [ - { provide: IgxAngularAnimationService, useValue: mockBuilder }, + { provide: IGX_ANIMATION_SERVICE, useValue: mockBuilder }, MockTogglePlayer ] }).compileComponents(); diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts index 42799d29269..fb0768d0c96 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts +++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts @@ -1,16 +1,14 @@ -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 { IgxAngularAnimationService } from 'igniteui-angular/core'; -import { AnimationPlayer, AnimationService } from 'igniteui-angular/core'; -import { growVerIn, growVerOut } from 'igniteui-angular/animations'; +import { AnimationPlayer, IGX_ANIMATION_SERVICE } from 'igniteui-angular/core'; +import { AnimationInput, growVerIn, growVerOut } from 'igniteui-angular/animations'; /**@hidden @internal */ export interface ToggleAnimationSettings { - openAnimation: AnimationReferenceMetadata; - closeAnimation: AnimationReferenceMetadata; + openAnimation: AnimationInput; + closeAnimation: AnimationInput; } export interface ToggleAnimationOwner { @@ -34,7 +32,7 @@ export enum ANIMATION_TYPE { /**@hidden @internal */ @Directive() export abstract class ToggleAnimationPlayer implements ToggleAnimationOwner, OnDestroy { - protected animationService = inject(IgxAngularAnimationService); + protected animationService = inject(IGX_ANIMATION_SERVICE); /** @hidden @internal */ public openAnimationDone: EventEmitter = new EventEmitter(); @@ -99,7 +97,7 @@ export abstract class ToggleAnimationPlayer implements ToggleAnimationOwner, OnD } // V.S. Jun 28th, 2021 #9783: player will NOT be initialized w/ null settings // events will already be emitted - if (!target || target.hasStarted()) { + if (!target || target.started()) { return; } const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationStart : this.closeAnimationStart; @@ -130,15 +128,14 @@ export abstract class ToggleAnimationPlayer implements ToggleAnimationOwner, OnD this.cleanUpPlayer(oppositeType); } if (type === ANIMATION_TYPE.OPEN) { - this.openAnimationPlayer = this.animationService.buildAnimation(animationSettings, targetElement.nativeElement); + this.openAnimationPlayer = this.animationService.build(animationSettings, targetElement.nativeElement); } else if (type === ANIMATION_TYPE.CLOSE) { - this.closeAnimationPlayer = this.animationService.buildAnimation(animationSettings, targetElement.nativeElement); + this.closeAnimationPlayer = this.animationService.build(animationSettings, targetElement.nativeElement); } const target = this.getPlayer(type); - target.init(); - this.getPlayer(type).position = 1 - oppositePosition; + target.position = 1 - oppositePosition; this.setCallback(type, callback); - target.animationEnd.pipe(takeUntil(this.destroy$)).subscribe(() => { + target.finished$.pipe(takeUntil(this.destroy$)).subscribe(() => { this.onDoneHandler(type); }); return target; diff --git a/projects/igniteui-angular/grids/core/src/cell.component.ts b/projects/igniteui-angular/grids/core/src/cell.component.ts index a63b1f3706c..f8580a79af2 100644 --- a/projects/igniteui-angular/grids/core/src/cell.component.ts +++ b/projects/igniteui-angular/grids/core/src/cell.component.ts @@ -1,5 +1,4 @@ -import { useAnimation } from '@angular/animations'; -import { +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -911,8 +910,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT positionStrategy: new AutoPositionStrategy({ horizontalStartPoint: HorizontalAlignment.Center, horizontalDirection: HorizontalAlignment.Center, - openAnimation: useAnimation(scaleInCenter, { params: { duration: '150ms' } }), - closeAnimation: useAnimation(fadeOut, { params: { duration: '75ms' } }) + openAnimation: scaleInCenter({ duration: 150 }), + closeAnimation: fadeOut({ duration: 75 }) }) } ); diff --git a/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts index e3ba994642c..f971fa634ec 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts @@ -321,7 +321,8 @@ export class IgxGridFilteringRowComponent implements OnInit, AfterViewInit, OnDe this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement); event.stopImmediatePropagation(); } else if (event.key === this.platform.KEYMAP.TAB && !this.dropDownConditions.collapsed) { - this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement); + // The item navigation directive on the prefix already started closing; toggling would reopen. + this.dropDownConditions.close(); } } diff --git a/projects/igniteui-angular/grids/core/src/filtering/grid-filtering.service.ts b/projects/igniteui-angular/grids/core/src/filtering/grid-filtering.service.ts index 06b640d4bac..00079fef47a 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/grid-filtering.service.ts @@ -2,7 +2,6 @@ import { Injectable, OnDestroy, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil, first } from 'rxjs/operators'; import { IColumnResizeEventArgs, IFilteringEventArgs } from '../common/events'; -import { useAnimation } from '@angular/animations'; import { editor, pinLeft, unpinLeft } from '@igniteui/material-icons-extended'; import { ExpressionUI, generateExpressionsList } from './excel-style/common'; import { GridType } from '../common/grid.interface'; @@ -40,7 +39,7 @@ export class IgxFilteringService implements OnDestroy { modal: false, positionStrategy: new ExcelStylePositionStrategy({ verticalStartPoint: VerticalAlignment.Bottom, - openAnimation: useAnimation(fadeIn, { params: { duration: '250ms' } }), + openAnimation: fadeIn({ duration: 250 }), closeAnimation: null! }), scrollStrategy: new AbsoluteScrollStrategy() diff --git a/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.spec.ts b/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.spec.ts index d0b51a5bad9..9a1d7022566 100644 --- a/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.spec.ts +++ b/projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.spec.ts @@ -1,7 +1,6 @@ import { Component, ViewChild, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions } from '../../../../test-utils/ui-interactions.spec'; import { IgxHierarchicalGridActionStripComponent } from '../../../../test-utils/hierarchical-grid-components.spec'; @@ -11,7 +10,7 @@ import { IgxGridPinningActionsComponent } from './grid-pinning-actions.component import { SampleTestData } from '../../../../test-utils/sample-test-data.spec'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { SortingDirection } from 'igniteui-angular/core'; +import { SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxHierarchicalRowComponent } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-row.component'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; @@ -26,7 +25,6 @@ describe('igxGridEditingActions #grid ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridActionStripComponent, IgxTreeGridEditActionsComponent, IgxActionStripTestingComponent, @@ -36,6 +34,7 @@ describe('igxGridEditingActions #grid ', () => { IgxActionStripMenuOneRowComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts b/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts index b0bfcccc2ee..ce9922a9c2e 100644 --- a/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts +++ b/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { wait } from '../../../../test-utils/ui-interactions.spec'; import { IgxGridPinningActionsComponent } from './grid-pinning-actions.component'; import { IgxColumnComponent } from '../public_api'; @@ -17,10 +17,10 @@ describe('igxGridPinningActions #grid ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxActionStripTestingComponent, IgxActionStripPinMenuComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-grid.spec.ts b/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-grid.spec.ts index 86cbf3b58b4..13163c512e0 100644 --- a/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-grid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-grid.spec.ts @@ -13,14 +13,13 @@ import { ReorderedColumnsComponent, GridCustomSummaryComponent } from '../../../../../test-utils/grid-samples.spec'; import { SampleTestData } from '../../../../../test-utils/sample-test-data.spec'; import { first } from 'rxjs/operators'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { wait } from '../../../../../test-utils/ui-interactions.spec'; import { IgxPivotGridTestBaseComponent } from '../../../../../test-utils/pivot-grid-samples.spec'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; import { IgxGridNavigationService, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core'; -import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { CSVWrapper } from './csv-verification-wrapper.spec'; import { OneGroupThreeColsGridComponent } from '../../../../../test-utils/grid-mch-sample.spec'; @@ -32,7 +31,6 @@ describe('CSV Grid Exporter', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReorderedColumnsComponent, GridIDNameJobTitleComponent, IgxTreeGridPrimaryForeignKeyComponent, @@ -40,7 +38,8 @@ describe('CSV Grid Exporter', () => { ColumnsAddedOnInitComponent, EmptyGridComponent, GridCustomSummaryComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-grid.spec.ts index 5de07a5d302..94113089f59 100644 --- a/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-grid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-grid.spec.ts @@ -29,7 +29,6 @@ import { first } from 'rxjs/operators'; import { IgxTreeGridPrimaryForeignKeyComponent, IgxTreeGridSummariesKeyComponent } from '../../../../../test-utils/tree-grid-components.spec'; import { UIInteractions, wait } from '../../../../../test-utils/ui-interactions.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxHierarchicalGridExportComponent, IgxHierarchicalGridMCHCollapsibleComponent, IgxHierarchicalGridMultiColumnHeaderIslandsExportComponent, @@ -48,7 +47,7 @@ import { IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchica import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { FileContentData } from './test-data.service.spec'; import { ZipWrapper } from './zip-verification-wrapper.spec'; -import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('Excel Exporter', () => { let exporter: IgxExcelExporterService; @@ -58,7 +57,6 @@ describe('Excel Exporter', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReorderedColumnsComponent, GridIDNameJobTitleComponent, IgxTreeGridPrimaryForeignKeyComponent, @@ -89,6 +87,7 @@ describe('Excel Exporter', () => { GridCustomSummaryWithDateComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-grid.spec.ts b/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-grid.spec.ts index 64b931716c4..604193dfc4b 100644 --- a/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-grid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-grid.spec.ts @@ -1,10 +1,10 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { ExportUtilities } from '../exporter-common/export-utilities'; import { IgxPdfExporterService } from './pdf-exporter'; import { IgxPdfExporterOptions } from './pdf-exporter-options'; import { GridIDNameJobTitleComponent } from '../../../../../test-utils/grid-samples.spec'; import { first } from 'rxjs/operators'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { NestedColumnGroupsGridComponent, ColumnGroupTestComponent, BlueWhaleGridComponent } from '../../../../../test-utils/grid-mch-sample.spec'; import { IgxHierarchicalGridExportComponent, IgxHierarchicalGridTestBaseComponent } from '../../../../../test-utils/hierarchical-grid-components.spec'; import { IgxTreeGridSortingComponent, IgxTreeGridPrimaryForeignKeyComponent } from '../../../../../test-utils/tree-grid-components.spec'; @@ -23,11 +23,11 @@ describe('PDF Grid Exporter', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, GridIDNameJobTitleComponent, IgxPivotGridMultipleRowComponent, IgxPivotGridTestComplexHierarchyComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -254,9 +254,9 @@ describe('PDF Grid Exporter', () => { it('should export grid with multi-column headers', (done) => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ColumnGroupTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); const fix = TestBed.createComponent(ColumnGroupTestComponent); @@ -275,9 +275,9 @@ describe('PDF Grid Exporter', () => { it('should export grid with nested multi-column headers', (done) => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, NestedColumnGroupsGridComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); const fix = TestBed.createComponent(NestedColumnGroupsGridComponent); @@ -296,9 +296,9 @@ describe('PDF Grid Exporter', () => { it('should export grid with summaries', (done) => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, CustomSummariesComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); const fix = TestBed.createComponent(CustomSummariesComponent); @@ -317,9 +317,9 @@ describe('PDF Grid Exporter', () => { it('should export hierarchical grid', (done) => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); const fix = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent); @@ -427,9 +427,9 @@ describe('PDF Grid Exporter', () => { it('should export tree grid with hierarchical data', (done) => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridSortingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); const fix = TestBed.createComponent(IgxTreeGridSortingComponent); @@ -448,9 +448,9 @@ describe('PDF Grid Exporter', () => { it('should export tree grid with flat self-referencing data', (done) => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridPrimaryForeignKeyComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); const fix = TestBed.createComponent(IgxTreeGridPrimaryForeignKeyComponent); @@ -469,9 +469,9 @@ describe('PDF Grid Exporter', () => { it('should truncate long header text with ellipsis in multi-column headers', (done) => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, BlueWhaleGridComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); const fix = TestBed.createComponent(BlueWhaleGridComponent); diff --git a/projects/igniteui-angular/grids/core/src/state.directive.spec.ts b/projects/igniteui-angular/grids/core/src/state.directive.spec.ts index db34abe1361..b65dbf5af07 100644 --- a/projects/igniteui-angular/grids/core/src/state.directive.spec.ts +++ b/projects/igniteui-angular/grids/core/src/state.directive.spec.ts @@ -1,8 +1,8 @@ import { TestBed, waitForAsync, fakeAsync, tick } from '@angular/core/testing'; import { Component, TemplateRef, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { IgxGridStateDirective } from './state.directive'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IGroupingExpression } from '../../../core/src/data-operations/grouping-expression.interface'; import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../../core/src/data-operations/filtering-expressions-tree'; import { IPagingState } from '../../../core/src/data-operations/paging-state.interface'; @@ -23,12 +23,12 @@ describe('IgxGridState - input properties #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridStateComponent, IgxGridStateWithOptionsComponent, IgxGridStateWithDetailsComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/core/src/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/grids/core/src/state.hierarchicalgrid.spec.ts index d3d2dcd875c..ff49f3d7f88 100644 --- a/projects/igniteui-angular/grids/core/src/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/state.hierarchicalgrid.spec.ts @@ -1,13 +1,12 @@ import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxGridStateDirective } from './state.directive'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { GridSelectionMode } from './common/enums'; import { GridSelectionRange } from '../../../core/src/data-operations/grid-types'; import { IgxColumnComponent } from './public_api'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IColumnState, IGridState } from './state-base.directive'; -import { FilteringExpressionsTree, FilteringLogic, IFilteringExpressionsTree, IGroupingExpression, IgxStringFilteringOperand, IPagingState, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; +import { FilteringExpressionsTree, FilteringLogic, IFilteringExpressionsTree, IGroupingExpression, IgxStringFilteringOperand, IPagingState, ISortingExpression, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxGridNavigationService } from './grid-navigation.service'; @@ -17,8 +16,9 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxHierarchicalGridTestExpandedBaseComponent], + imports: [IgxHierarchicalGridTestExpandedBaseComponent], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/core/src/state.pivotgrid.spec.ts b/projects/igniteui-angular/grids/core/src/state.pivotgrid.spec.ts index 76c65c19f45..5bea2ec9575 100644 --- a/projects/igniteui-angular/grids/core/src/state.pivotgrid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/state.pivotgrid.spec.ts @@ -1,6 +1,6 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { first, take } from 'rxjs/operators'; import { IgxPivotGridPersistanceComponent } from '../../../test-utils/pivot-grid-samples.spec'; import { NoopPivotDimensionsStrategy } from './common/pivot-strategy'; @@ -16,8 +16,9 @@ describe('IgxPivotGridState #pivotGrid :', () => { let pivotGrid: PivotGridType; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxPivotGridPersistanceComponent], + imports: [IgxPivotGridPersistanceComponent], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/core/src/state.treegrid.spec.ts b/projects/igniteui-angular/grids/core/src/state.treegrid.spec.ts index eb6bd13edc2..26d3740ff91 100644 --- a/projects/igniteui-angular/grids/core/src/state.treegrid.spec.ts +++ b/projects/igniteui-angular/grids/core/src/state.treegrid.spec.ts @@ -1,8 +1,8 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { IgxGridStateDirective } from './state.directive'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IGroupingExpression } from '../../../core/src/data-operations/grouping-expression.interface'; import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../../core/src/data-operations/filtering-expressions-tree'; import { IPagingState } from '../../../core/src/data-operations/paging-state.interface'; @@ -23,7 +23,8 @@ describe('IgxTreeGridState - input properties #tGrid', () => { let grid; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxTreeGridTreeDataTestComponent] + imports: [IgxTreeGridTreeDataTestComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts b/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts index 125d8abff34..1a668b47dcb 100644 --- a/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts @@ -1,7 +1,6 @@ import { Component, TemplateRef, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { ByLevelTreeGridMergeStrategy, DefaultMergeStrategy, DefaultSortingStrategy, GridColumnDataType, GridTypeBase, IgxStringFilteringOperand, ɵSize, SortingDirection } from 'igniteui-angular/core'; +import { ByLevelTreeGridMergeStrategy, DefaultMergeStrategy, DefaultSortingStrategy, GridColumnDataType, GridTypeBase, IgxStringFilteringOperand, ɵSize, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { DataParent } from '../../../test-utils/sample-test-data.spec'; import { GridFunctions, GridSelectionFunctions } from '../../../test-utils/grid-functions.spec'; @@ -26,10 +25,11 @@ describe('IgxGrid - Cell merging #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, DefaultCellMergeGridComponent, ColumnLayoutTestComponent, + DefaultCellMergeGridComponent, ColumnLayoutTestComponent, IgxHierarchicalGridTestBaseComponent, IgxTreeGridSelectionComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService, IgxGridNavigationService ] diff --git a/projects/igniteui-angular/grids/grid/src/cell.spec.ts b/projects/igniteui-angular/grids/grid/src/cell.spec.ts index 1f9a84e7446..bd720949f2b 100644 --- a/projects/igniteui-angular/grids/grid/src/cell.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/cell.spec.ts @@ -1,6 +1,6 @@ import { Component, ViewChild, OnInit, DebugElement, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, fakeAsync, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxGridComponent } from './public_api'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; @@ -20,8 +20,9 @@ describe('IgxGrid - Cell component #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, NoScrollsComponent - ] + NoScrollsComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -153,7 +154,8 @@ describe('IgxGrid - Cell component #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, VirtualGridComponent], + imports: [VirtualGridComponent], + providers: [provideIgxNoopAnimations()], }).compileComponents(); })); @@ -268,8 +270,9 @@ describe('IgxGrid - Cell component #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, NoColumnWidthGridComponent - ] + NoColumnWidthGridComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -288,8 +291,9 @@ describe('IgxGrid - Cell component #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ConditionalCellStyleTestComponent - ] + ConditionalCellStyleTestComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -320,8 +324,9 @@ describe('IgxGrid - Cell component #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridDateTimeColumnComponent - ] + IgxGridDateTimeColumnComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/column-group.spec.ts b/projects/igniteui-angular/grids/grid/src/column-group.spec.ts index f7201373853..7b4dcf5a6a4 100644 --- a/projects/igniteui-angular/grids/grid/src/column-group.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column-group.spec.ts @@ -1,7 +1,6 @@ import { TestBed, ComponentFixture, waitForAsync, fakeAsync, tick } from '@angular/core/testing'; import { IgxGridComponent } from './grid.component'; import { DebugElement, QueryList } from '@angular/core'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { By } from '@angular/platform-browser'; @@ -18,7 +17,7 @@ import { OneGroupOneColGridComponent, OneGroupThreeColsGridComponent, DynamicColGroupsGridComponent, ColumnGroupHiddenInTemplateComponent} from '../../../test-utils/grid-mch-sample.spec'; import { CellType } from 'igniteui-angular/grids/core'; -import { DefaultSortingStrategy, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid-th__title'; const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid-thead__title'; @@ -33,7 +32,6 @@ describe('IgxGrid - multi-column headers #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, OneGroupOneColGridComponent, OneGroupThreeColsGridComponent, BlueWhaleGridComponent, @@ -48,7 +46,8 @@ describe('IgxGrid - multi-column headers #grid', () => { NestedColGroupsWithTemplatesGridComponent, DynamicColGroupsGridComponent, ColumnGroupHiddenInTemplateComponent - ] + ], + providers: [provideIgxNoopAnimations()] }) .compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/column-hiding.spec.ts b/projects/igniteui-angular/grids/grid/src/column-hiding.spec.ts index 1709273cb43..7ad0383f9ac 100644 --- a/projects/igniteui-angular/grids/grid/src/column-hiding.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column-hiding.spec.ts @@ -1,14 +1,13 @@ import { DebugElement } from '@angular/core'; import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { ColumnHidingTestComponent, ColumnGroupsHidingTestComponent } from '../../../test-utils/grid-base-components.spec'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { GridSelectionMode, ColumnDisplayOrder, IgxColumnActionsComponent } from 'igniteui-angular/grids/core'; import { ControlsFunction } from '../../../test-utils/controls-functions.spec'; -import { SortingDirection } from 'igniteui-angular/core'; +import { SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('Column Hiding UI #grid', () => { @@ -24,10 +23,10 @@ describe('Column Hiding UI #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ColumnHidingTestComponent, ColumnGroupsHidingTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/column-moving.spec.ts b/projects/igniteui-angular/grids/grid/src/column-moving.spec.ts index 7c928783665..673c2590ee2 100644 --- a/projects/igniteui-angular/grids/grid/src/column-moving.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column-moving.spec.ts @@ -2,7 +2,6 @@ import { DebugElement } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxInputDirective } from 'igniteui-angular/input-group'; import { @@ -14,7 +13,7 @@ import { import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { IgxGridComponent } from './grid.component'; import { GridSelectionFunctions, GridFunctions } from '../../../test-utils/grid-functions.spec'; -import { ColumnType, SortingDirection } from 'igniteui-angular/core'; +import { ColumnType, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxGrid - Column Moving #grid', () => { const CELL_CSS_CLASS = '.igx-grid__td'; @@ -28,12 +27,12 @@ describe('IgxGrid - Column Moving #grid', () => { TestBed.configureTestingModule({ imports: [ FormsModule, - NoopAnimationsModule, MovableColumnsComponent, MovableTemplatedColumnsComponent, MovableColumnsLargeComponent, MultiColumnHeadersComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/column-pinning.spec.ts b/projects/igniteui-angular/grids/grid/src/column-pinning.spec.ts index 1052172a23a..0a34e9e3083 100644 --- a/projects/igniteui-angular/grids/grid/src/column-pinning.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column-pinning.spec.ts @@ -1,7 +1,7 @@ +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { DebugElement } from '@angular/core'; import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { ColumnPinningTestComponent, @@ -25,11 +25,11 @@ describe('Column Pinning UI #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ColumnPinningTestComponent, ColumnGroupsPinningTestComponent, ColumnPinningWithTemplateTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/column-resizing.spec.ts b/projects/igniteui-angular/grids/grid/src/column-resizing.spec.ts index f56144ab2a5..6796845deee 100644 --- a/projects/igniteui-angular/grids/grid/src/column-resizing.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column-resizing.spec.ts @@ -1,7 +1,6 @@ import { Component, DebugElement, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { GridTemplateStrings, ColumnDefinitions } from '../../../test-utils/template-strings.spec'; @@ -11,7 +10,7 @@ import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { IColumnResizeEventArgs, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; import { setElementSize } from '../../../test-utils/helper-utils.spec'; import { IgxColumnResizerDirective } from 'igniteui-angular/grids/core'; -import { ɵSize } from 'igniteui-angular/core'; +import { ɵSize, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { Calendar } from 'igniteui-angular/calendar'; @@ -23,7 +22,6 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { TestBed.configureTestingModule({ imports: [ MultiColumnHeadersComponent, - NoopAnimationsModule, ResizableColumnsComponent, GridFeaturesComponent, LargePinnedColGridComponent, @@ -31,7 +29,8 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { MinWidthColumnsComponent, ColGridComponent, ColPercentageGridComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/column-selection.spec.ts b/projects/igniteui-angular/grids/grid/src/column-selection.spec.ts index ca124d9bbda..673e2cd882e 100644 --- a/projects/igniteui-angular/grids/grid/src/column-selection.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column-selection.spec.ts @@ -1,12 +1,11 @@ import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxGridComponent } from './grid.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { ProductsComponent, ColumnSelectionGroupTestComponent } from '../../../test-utils/grid-samples.spec'; import { GridSelectionFunctions, GridFunctions } from '../../../test-utils/grid-functions.spec'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; import { IColumnSelectionEventArgs } from 'igniteui-angular/grids/core'; import { GridSelectionMode } from 'igniteui-angular/grids/core'; -import { IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxStringFilteringOperand, provideIgxNoopAnimations } from 'igniteui-angular/core'; const SELECTED_COLUMN_CLASS = 'igx-grid-th--selected'; const SELECTED_COLUMN_CELL_CLASS = 'igx-grid__td--column-selected'; @@ -33,8 +32,9 @@ describe('IgxGrid - Column Selection #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - ProductsComponent, ColumnSelectionGroupTestComponent, NoopAnimationsModule - ] + ProductsComponent, ColumnSelectionGroupTestComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index 2a3e5f7b4d2..1c87243fed1 100644 --- a/projects/igniteui-angular/grids/grid/src/column.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column.spec.ts @@ -17,12 +17,11 @@ import { IgxGridPercentColumnComponent, IgxGridDateTimeColumnComponent } from '../../../test-utils/grid-samples.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions, GridSummaryFunctions } from '../../../test-utils/grid-functions.spec'; import { IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, INPUT_DEBOUNCE_TIME_DEFAULT, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; import { IgxGridRowComponent } from './grid-row.component'; -import { GridColumnDataType, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { GridColumnDataType, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxButtonDirective, IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; import { IgxInputDirective } from 'igniteui-angular/input-group'; @@ -44,7 +43,6 @@ describe('IgxGrid - Column properties #grid', () => { IgxGridCurrencyColumnComponent, IgxGridPercentColumnComponent, IgxGridDateTimeColumnComponent, - NoopAnimationsModule, ColumnsFromIterableComponent, TemplatedColumnsComponent, TemplatedInputColumnsComponent, @@ -53,7 +51,8 @@ describe('IgxGrid - Column properties #grid', () => { ResizableColumnsComponent, DOMAttributesAsSettersComponent, GridInToggleableWrapperComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -2041,8 +2040,8 @@ export class GridInToggleableWrapperComponent { describe('IgxGrid column autosizing in zoneless change detection #grid', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [ResizableColumnsComponent, NoopAnimationsModule], - providers: [provideZonelessChangeDetection()] + imports: [ResizableColumnsComponent], + providers: [provideIgxNoopAnimations(), provideZonelessChangeDetection()] }); }); diff --git a/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts index 566dafa6e3f..c1f118cf8b8 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts @@ -1,5 +1,4 @@ import { IgxGridComponent } from './public_api'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { DebugElement } from '@angular/core'; import { GridFunctions, GridSummaryFunctions } from '../../../test-utils/grid-functions.spec'; @@ -16,7 +15,7 @@ import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { IgxGridRowComponent } from './grid-row.component'; import { takeUntil, first } from 'rxjs/operators'; import { Subject } from 'rxjs'; -import { DefaultSortingStrategy, IgxStringFilteringOperand, SortingDirection, TransactionType } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, IgxStringFilteringOperand, SortingDirection, TransactionType, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; const DEBOUNCETIME = 60; @@ -41,7 +40,6 @@ describe('IgxGrid - Row Adding #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxAddRowComponent, IgxGridRowEditingTransactionComponent, IgxGridRowEditingDefinedColumnsComponent, @@ -50,6 +48,7 @@ describe('IgxGrid - Row Adding #grid', () => { GridDynamicActionStripComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 1204bbabbc0..c42312064f5 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -3583,7 +3583,7 @@ export abstract class IgxGridBaseDirective implements GridType, this.overlayIDs.forEach(overlayID => { const overlay = this.overlayService.getOverlayById(overlayID); - if (overlay?.visible && !overlay.closeAnimationPlayer?.hasStarted()) { + if (overlay?.visible && !overlay.closeAnimationPlayer?.started()) { this.overlayService.hide(overlayID); this.nativeElement.focus(); diff --git a/projects/igniteui-angular/grids/grid/src/grid-cell-editing.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-cell-editing.spec.ts index 22979154bbd..c3e7d1c54dd 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-cell-editing.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-cell-editing.spec.ts @@ -1,6 +1,5 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './public_api'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; @@ -14,7 +13,7 @@ import { DebugElement } from '@angular/core'; import { first, takeUntil } from 'rxjs/operators'; import { Subject, fromEvent } from 'rxjs'; import { IGridEditDoneEventArgs, IGridEditEventArgs, IgxColumnComponent } from 'igniteui-angular/grids/core'; -import { IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; const DEBOUNCE_TIME = 30; const CELL_CSS_CLASS = '.igx-grid__td'; @@ -27,12 +26,12 @@ describe('IgxGrid - Cell Editing #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, CellEditingTestComponent, CellEditingScrollTestComponent, ColumnEditablePropertyTestComponent, SelectionWithTransactionsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts index 5134ecba738..6ed8c9b07c1 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './public_api'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../src/grid-base.directive'; import { @@ -18,19 +17,19 @@ import { DebugElement, provideZonelessChangeDetection } from '@angular/core'; import { firstValueFrom } from 'rxjs'; import { DropPosition } from 'igniteui-angular/grids/core'; import { IgxGridGroupByRowComponent } from './groupby-row.component'; -import { DefaultSortingStrategy, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxGrid - Cell selection #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, SelectionWithScrollsComponent, SelectionWithTransactionsComponent, CellSelectionNoneComponent, CellSelectionSingleComponent, IgxGridRowEditingWithoutEditableColumnsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-clipboard.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-clipboard.spec.ts index 2ebd4142ac7..e4bdfdaa374 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-clipboard.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-clipboard.spec.ts @@ -1,12 +1,11 @@ import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './public_api'; import { IgxGridClipboardComponent } from '../../../test-utils/grid-samples.spec'; import { take } from 'rxjs/operators'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { IgxGridFilteringRowComponent } from 'igniteui-angular/grids/core'; -import { CancelableEventArgs } from 'igniteui-angular/core'; +import { CancelableEventArgs, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxInputDirective } from 'igniteui-angular/input-group'; describe('IgxGrid - Clipboard #grid', () => { @@ -16,8 +15,9 @@ describe('IgxGrid - Clipboard #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - IgxGridClipboardComponent, NoopAnimationsModule - ] + IgxGridClipboardComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts index 1b4b414c5e8..9cceb397ebf 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts @@ -1,6 +1,5 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxGridComponent } from './grid.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { CollapsibleColumnGroupTestComponent, CollapsibleGroupsTemplatesTestComponent, @@ -11,7 +10,7 @@ import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { DropPosition } from 'igniteui-angular/grids/core'; import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; -import { SortingDirection } from 'igniteui-angular/core'; +import { SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxGrid - multi-column headers #grid', () => { let contactInf; @@ -26,12 +25,12 @@ describe('IgxGrid - multi-column headers #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, CollapsibleColumnGroupTestComponent, CollapsibleGroupsTemplatesTestComponent, CollapsibleGroupsDynamicColComponent, CollapsibleGroupWithExplicitChildWidthsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering-advanced.spec.ts index f4f4a4b0bfd..8f3fea9c114 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-filtering-advanced.spec.ts @@ -1,5 +1,4 @@ import { fakeAsync, TestBed, tick, flush, ComponentFixture, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; @@ -18,7 +17,7 @@ import { By } from '@angular/platform-browser'; import { IgxHGridRemoteOnDemandComponent, IgxHierarchicalGridMissingChildDataComponent } from '../../hierarchical-grid/src/hierarchical-grid.spec'; import { QueryBuilderFunctions } from '../../../query-builder/src/query-builder/query-builder-functions.spec'; import { IFilteringEventArgs, IgxGridNavigationService, IgxGridToolbarAdvancedFilteringComponent } from 'igniteui-angular/grids/core'; -import { FilteringExpressionsTree, FilteringLogic, FormattedValuesFilteringStrategy, IGridResourceStrings, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { FilteringExpressionsTree, FilteringLogic, FormattedValuesFilteringStrategy, IGridResourceStrings, IgxNumberFilteringOperand, IgxStringFilteringOperand, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { QueryBuilderSelectors } from 'igniteui-angular/query-builder/src/query-builder/query-builder.common'; import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; import { IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid'; @@ -27,7 +26,6 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridAdvancedFilteringColumnGroupComponent, IgxGridAdvancedFilteringComponent, IgxGridExternalAdvancedFilteringComponent, @@ -40,6 +38,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { IgxHGridRemoteOnDemandComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts index b6eac714201..52a45ce01de 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts @@ -1,7 +1,6 @@ import { DebugElement } from '@angular/core'; import { fakeAsync, TestBed, tick, flush, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; import { INPUT_DEBOUNCE_TIME } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from './grid.component'; @@ -36,7 +35,7 @@ import { import { GridSelectionMode, FilterMode } from 'igniteui-angular/grids/core'; import { ControlsFunction } from '../../../test-utils/controls-functions.spec'; import { setElementSize } from '../../../test-utils/helper-utils.spec'; -import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, getComponentSize, GridResourceStringsEN, IFilteringExpression, IFilteringExpressionsTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, changei18n, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, ɵSize, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, getComponentSize, GridResourceStringsEN, IFilteringExpression, IFilteringExpressionsTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, changei18n, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, ɵSize, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives'; import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; import { IgxChipComponent, IgxBadgeComponent, IgxDatePickerComponent, IgxCalendarComponent, IgxIconComponent } from 'igniteui-angular'; @@ -54,14 +53,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridFilteringComponent, IgxGridFilteringScrollComponent, IgxGridFilteringMCHComponent, IgxGridFilteringTemplateComponent, IgxGridDatesFilteringComponent, IgxGridFilteringNumericComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -3226,7 +3225,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridFilteringComponent, IgxGridFilteringESFEmptyTemplatesComponent, IgxGridFilteringESFTemplatesComponent, @@ -3235,7 +3233,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { IgxGridFilteringMCHComponent, IgxGridExternalESFComponent, IgxGridExternalESFTemplateComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -7346,10 +7345,9 @@ describe('IgxGrid - Custom Filtering Strategy #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, CustomFilteringStrategyComponent ], - providers: [{ provide: INPUT_DEBOUNCE_TIME, useValue: 0 }] + providers: [provideIgxNoopAnimations(), { provide: INPUT_DEBOUNCE_TIME, useValue: 0 }] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-filtering.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering.spec.ts index 3b583c90567..893a47fd8ab 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-filtering.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-filtering.spec.ts @@ -1,11 +1,10 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { GridFunctions, GridSummaryFunctions } from '../../../test-utils/grid-functions.spec'; import { IgxGridFilteringComponent, CustomFilter, IgxGridFilteringBindingComponent } from '../../../test-utils/grid-samples.spec'; -import { FilteringExpressionsTree, FilteringLogic, IFilteringExpression, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, NoopFilteringStrategy } from 'igniteui-angular/core'; +import { FilteringExpressionsTree, FilteringLogic, IFilteringExpression, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, NoopFilteringStrategy, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxChipComponent } from 'igniteui-angular/chips'; import { ExpressionUI } from 'igniteui-angular/grids/core'; @@ -13,8 +12,9 @@ describe('IgxGrid - Filtering actions #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - IgxGridFilteringComponent, NoopAnimationsModule - ] + IgxGridFilteringComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -1151,9 +1151,9 @@ describe('IgxGrid - Filtering expression tree bindings #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridFilteringBindingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav-headers.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav-headers.spec.ts index 392c484add7..c9a5a7b22ac 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav-headers.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav-headers.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; @@ -13,7 +12,7 @@ import { GridFunctions, GridSelectionFunctions } from '../../../test-utils/grid- import { GridSelectionMode, FilterMode, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; import { IActiveNodeChangeEventArgs } from 'igniteui-angular/grids/core'; import { IgxGridHeaderRowComponent } from 'igniteui-angular/grids/core'; -import { IgxStringFilteringOperand, ISortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { IgxStringFilteringOperand, ISortingStrategy, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; const DEBOUNCETIME = 30; @@ -25,9 +24,10 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - SelectionWithScrollsComponent, NoopAnimationsModule + SelectionWithScrollsComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService ] }).compileComponents(); @@ -768,9 +768,10 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - MRLTestComponent, NoopAnimationsModule + MRLTestComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService ] }).compileComponents(); @@ -999,8 +1000,9 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - ColumnGroupsNavigationTestComponent, NoopAnimationsModule - ] + ColumnGroupsNavigationTestComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts index d250a5b7e33..0defbdc3d06 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts @@ -1,5 +1,4 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { IGridCellEventArgs, IActiveNodeChangeEventArgs } from 'igniteui-angular/grids/core'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; @@ -14,7 +13,7 @@ import { GridFunctions, GridSelectionFunctions } from '../../../test-utils/grid- import { DebugElement, QueryList } from '@angular/core'; import { IgxGridGroupByRowComponent } from './groupby-row.component'; import { CellType } from 'igniteui-angular/grids/core'; -import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../src/grid-base.directive'; const DEBOUNCETIME = 100; @@ -28,8 +27,9 @@ describe('IgxGrid - Keyboard navigation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoScrollsComponent, NoopAnimationsModule - ] + NoScrollsComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -217,8 +217,9 @@ describe('IgxGrid - Keyboard navigation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - VirtualGridComponent, NoopAnimationsModule - ] + VirtualGridComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -708,8 +709,9 @@ describe('IgxGrid - Keyboard navigation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - IgxGridGroupByComponent, NoopAnimationsModule - ] + IgxGridGroupByComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts index 65cf95fb951..e5c1080728f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts @@ -1,7 +1,6 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; @@ -10,7 +9,7 @@ import { IgxGridGroupByRowComponent } from './groupby-row.component'; import { GridFunctions, GRID_MRL_BLOCK } from '../../../test-utils/grid-functions.spec'; import { CellType, IGridCellEventArgs, IgxColumnComponent, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; import { IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; -import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../src/grid-base.directive'; const DEBOUNCE_TIME = 60; @@ -23,8 +22,8 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, ColumnLayoutTestComponent], - providers: [IgxGridMRLNavigationService] + imports: [ColumnLayoutTestComponent], + providers: [provideIgxNoopAnimations(), IgxGridMRLNavigationService] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts index e14f52423bc..4ee21bad27a 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts @@ -1,7 +1,6 @@ import { DebugElement } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { CellType, IGridEditDoneEventArgs, IGridEditEventArgs, IRowDataCancelableEventArgs, IRowDataEventArgs, RowType } from 'igniteui-angular/grids/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; @@ -21,7 +20,7 @@ import { } from '../../../test-utils/grid-samples.spec'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { DefaultDataCloneStrategy, DefaultSortingStrategy, IgxNumberFilteringOperand, IgxStringFilteringOperand, ɵSize, SortingDirection, Transaction, TransactionType } from 'igniteui-angular/core'; +import { DefaultDataCloneStrategy, DefaultSortingStrategy, IgxNumberFilteringOperand, IgxStringFilteringOperand, ɵSize, SortingDirection, Transaction, TransactionType, provideIgxNoopAnimations } from 'igniteui-angular/core'; const CELL_CLASS = '.igx-grid__td'; const ROW_EDITED_CLASS = 'igx-grid__tr--edited'; @@ -34,7 +33,6 @@ describe('IgxGrid - Row Editing #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridRowEditingComponent, IgxGridRowEditingTransactionComponent, IgxGridWithEditingAndFeaturesComponent, @@ -43,7 +41,8 @@ describe('IgxGrid - Row Editing #grid', () => { IgxGridEmptyRowEditTemplateComponent, IgxGridCustomRowEditTemplateComponent, VirtualGridComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-row-pinning.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-row-pinning.spec.ts index 34becfa62fb..111a651efc2 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-row-pinning.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-row-pinning.spec.ts @@ -1,7 +1,6 @@ import { ViewChild, Component, DebugElement, OnInit, QueryList, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { CellType, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxGridMRLNavigationService, IPinningConfig, IPinRowEventArgs, RowPinningPosition } from 'igniteui-angular/grids/core'; @@ -12,7 +11,7 @@ import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { GridRowConditionalStylingComponent } from '../../../test-utils/grid-base-components.spec'; import { IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; -import { ColumnPinningPosition, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { ColumnPinningPosition, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; describe('Row Pinning #grid', () => { @@ -26,7 +25,6 @@ describe('Row Pinning #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, GridRowConditionalStylingComponent, GridRowPinningComponent, GridRowPinningWithMRLComponent, @@ -36,6 +34,7 @@ describe('Row Pinning #grid', () => { GridRowPinningWithPrimaryKeyComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts index 9151cfb90bd..1f9821cabc0 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { @@ -13,7 +12,7 @@ import { import { GridFunctions, GridSelectionFunctions } from '../../../test-utils/grid-functions.spec'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { GridSelectionMode, IRowSelectionEventArgs } from 'igniteui-angular/grids/core'; -import { FilteringExpressionsTree, FilteringLogic, IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { FilteringExpressionsTree, FilteringLogic, IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; const DEBOUNCETIME = 30; const SCROLL_DEBOUNCETIME = 100; @@ -24,14 +23,14 @@ describe('IgxGrid - Row Selection #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, RowSelectionComponent, SelectionWithScrollsComponent, RowSelectionWithoutPrimaryKeyComponent, SingleRowSelectionComponent, SelectionWithTransactionsComponent, GridCustomSelectorsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-summary.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-summary.spec.ts index 8266201fb25..f4dcea646c4 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-summary.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-summary.spec.ts @@ -1,7 +1,6 @@ import { Component, DebugElement, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { fakeAsync, TestBed, tick, ComponentFixture, flush, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions, GridSummaryFunctions } from '../../../test-utils/grid-functions.spec'; @@ -17,7 +16,7 @@ import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { DropPosition, IgxColumnComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from 'igniteui-angular/grids/core'; import { DatePipe } from '@angular/common'; import { IgxGridGroupByRowComponent } from './groupby-row.component'; -import { GridSummaryCalculationMode, IColumnPipeArgs, IgxDateSummaryOperand, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxStringFilteringOperand, IgxSummaryOperand, IgxSummaryResult, SortingDirection } from 'igniteui-angular/core'; +import { GridSummaryCalculationMode, IColumnPipeArgs, IgxDateSummaryOperand, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxStringFilteringOperand, IgxSummaryOperand, IgxSummaryResult, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; describe('IgxGrid - Summaries #grid', () => { @@ -32,14 +31,14 @@ describe('IgxGrid - Summaries #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, CustomSummariesComponent, ProductsComponent, SummaryColumnComponent, FilteringComponent, SummariesGroupByComponent, SummariesGroupByTransactionsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid-toolbar.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-toolbar.spec.ts index fa9e5dd8a79..b16fdf302e6 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-toolbar.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-toolbar.spec.ts @@ -1,10 +1,9 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, fakeAsync, ComponentFixture, tick, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './public_api'; import { GridFunctions } from "../../../test-utils/grid-functions.spec"; import { By } from "@angular/platform-browser"; -import { AbsoluteScrollStrategy, GlobalPositionStrategy } from 'igniteui-angular/core'; +import { AbsoluteScrollStrategy, GlobalPositionStrategy, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxCsvExporterService, IgxExcelExporterService, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; import { ExportUtilities } from 'igniteui-angular/grids/core'; @@ -34,11 +33,11 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, DefaultToolbarComponent, ToolbarActionsComponent ], providers: [ + provideIgxNoopAnimations(), IgxExcelExporterService, IgxCsvExporterService ] diff --git a/projects/igniteui-angular/grids/grid/src/grid-validation.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-validation.spec.ts index c6a456c7b0c..c7a6ad9ddd0 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-validation.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-validation.spec.ts @@ -1,7 +1,6 @@ import { fakeAsync, flush, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators' import { IgxInputDirective } from 'igniteui-angular/input-group'; @@ -16,7 +15,8 @@ import { import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { GridType, IGridFormGroupCreatedEventArgs, IgxGridCellComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from './grid.component'; -import { AutoPositionStrategy, HorizontalAlignment, IgxOverlayService, VerticalAlignment } from 'igniteui-angular/core'; +import { AutoPositionStrategy, HorizontalAlignment, IgxOverlayService, VerticalAlignment, provideIgxNoopAnimations } from 'igniteui-angular/core'; +import { resolveAnimation } from 'igniteui-angular/animations'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; /** @@ -31,12 +31,12 @@ describe('IgxGrid - Validation #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridValidationTestBaseComponent, IgxGridValidationTestCustomErrorComponent, IgxGridCustomEditorsComponent, IgxTreeGridValidationTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -223,8 +223,8 @@ describe('IgxGrid - Validation #grid', () => { expect(positionSettings.horizontalDirection).toEqual(HorizontalAlignment.Center); expect(positionSettings.verticalStartPoint).toEqual(VerticalAlignment.Bottom); expect(positionSettings.verticalDirection).toEqual(VerticalAlignment.Bottom); - expect(positionSettings.openAnimation.options.params).toEqual({ duration: '150ms' }); - expect(positionSettings.closeAnimation.options.params).toEqual({ duration: '75ms' }); + expect(resolveAnimation(positionSettings.openAnimation).options.duration).toEqual(150); + expect(resolveAnimation(positionSettings.closeAnimation).options.duration).toEqual(75); cell.errorTooltip.first.close(); tick(); diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts index 90e47ec2bb6..3ec00272bb8 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts @@ -2,7 +2,6 @@ import { AfterViewInit, ChangeDetectorRef, Component, Injectable, OnInit, ViewCh import { TestBed, fakeAsync, tick, flush, waitForAsync, ComponentFixture } from '@angular/core/testing'; import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { IGridRowEventArgs, IgxColumnComponent, IgxColumnGroupComponent, IgxGridEmptyTemplateDirective, IgxGridFooterComponent, IgxGridLoadingTemplateDirective, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from 'igniteui-angular/grids/core'; import { IForOfState } from 'igniteui-angular/directives'; @@ -16,7 +15,7 @@ import { IgxGridRowComponent } from './grid-row.component'; import { GRID_SCROLL_CLASS, GridFunctions } from '../../../test-utils/grid-functions.spec'; import { AsyncPipe } from '@angular/common'; import { setElementSize, ymd } from '../../../test-utils/helper-utils.spec'; -import { FilteringExpressionsTree, FilteringLogic, getComponentSize, GridColumnDataType, IgxNumberFilteringOperand, IgxStringFilteringOperand, ISortingExpression, ɵSize, SortingDirection, GridResourceStringsEN, changei18n } from 'igniteui-angular/core'; +import { FilteringExpressionsTree, FilteringLogic, getComponentSize, GridColumnDataType, IgxNumberFilteringOperand, IgxStringFilteringOperand, ISortingExpression, ɵSize, SortingDirection, GridResourceStringsEN, changei18n, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular/paginator'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../src/grid-base.directive'; @@ -31,13 +30,13 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridTestComponent, IgxGridMarkupDeclarationComponent, IgxGridRemoteVirtualizationComponent, IgxGridRemoteOnDemandComponent, IgxGridEmptyMessage100PercentComponent - ] + ], + providers: [provideIgxNoopAnimations()] }) .compileComponents(); })); @@ -774,9 +773,9 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }) .compileComponents(); })); @@ -905,8 +904,8 @@ describe('IgxGrid Component Tests #grid', () => { describe('scroll throttle trailing edge', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxGridScrollThrottleComponent], - providers: [{ provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] + imports: [IgxGridScrollThrottleComponent], + providers: [provideIgxNoopAnimations(), { provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 }] }).compileComponents(); })); @@ -974,13 +973,13 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridDefaultRenderingComponent, IgxGridColumnPercentageWidthComponent, IgxGridWrappedInContComponent, IgxGridFormattingComponent, IgxGridFixedContainerHeightComponent - ] + ], + providers: [provideIgxNoopAnimations()] }) .compileComponents(); })); @@ -2253,9 +2252,9 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridDefaultRenderingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -2545,10 +2544,10 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridDefaultRenderingComponent, IgxGridWrappedInContComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -3015,9 +3014,9 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridInsideIgxTabsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -3176,9 +3175,9 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridWithCustomFooterComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -3202,9 +3201,9 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridWithCustomPaginationTemplateComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -3237,9 +3236,9 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridPerformanceComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -3427,10 +3426,10 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridNoDataComponent, IgxGridTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -3459,7 +3458,8 @@ describe('IgxGrid Component Tests #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxGridTestComponent] + imports: [IgxGridTestComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts index 9db9a70cfc2..e691850dd79 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts @@ -1,9 +1,9 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, fakeAsync, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxGridComponent } from './grid.component'; import { wait } from '../../../test-utils/ui-interactions.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IGridEditEventArgs } from 'igniteui-angular/grids/core'; const CELL_CSS_CLASS = '.igx-grid__td'; @@ -16,8 +16,9 @@ describe('IgxGrid - CRUD operations #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, DefaultCRUDGridComponent - ] + DefaultCRUDGridComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts index 6d1ebd6ae71..4d026411458 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts @@ -2,7 +2,6 @@ import { Component, ViewChild, TemplateRef, QueryList, ChangeDetectionStrategy, import { formatNumber } from '@angular/common' import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxColumnComponent, IgxGridStateDirective } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from './grid.component'; import { IgxGroupAreaDropDirective, IgxGroupByRowTemplateDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective } from 'igniteui-angular/grids/core'; @@ -16,7 +15,7 @@ import { GridSelectionMode } from 'igniteui-angular/grids/core'; import { ControlsFunction } from '../../../test-utils/controls-functions.spec'; import { ymd } from '../../../test-utils/helper-utils.spec'; import { IgxGroupByRowSelectorDirective } from 'igniteui-angular/grids/core'; -import { DefaultSortingStrategy, IGroupingExpression, IgxGrouping, IgxStringFilteringOperand, ISortingExpression, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, IGroupingExpression, IgxGrouping, IgxStringFilteringOperand, ISortingExpression, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxChipComponent } from 'igniteui-angular/chips'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; @@ -34,7 +33,6 @@ describe('IgxGrid - GroupBy #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, DefaultGridComponent, GroupableGridComponent, CustomTemplateGridComponent, @@ -45,7 +43,8 @@ describe('IgxGrid - GroupBy #grid', () => { GridGroupByTestDateTimeDataComponent, GridGroupByStateComponent, MultiColumnHeadersWithGroupingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -4397,8 +4396,8 @@ export class GridGroupByStateComponent extends GridGroupByTestDateTimeDataCompon describe('IgxGrid grouped virtualization in zoneless change detection #grid', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [GroupableGridComponent, NoopAnimationsModule], - providers: [provideZonelessChangeDetection()] + imports: [GroupableGridComponent], + providers: [provideIgxNoopAnimations(), provideZonelessChangeDetection()] }); }); diff --git a/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts index 00708edb499..82ca68f16e5 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts @@ -1,6 +1,5 @@ import { Component, ViewChild, OnInit, DebugElement, QueryList, TemplateRef, ViewChildren, ChangeDetectionStrategy, provideZonelessChangeDetection } from '@angular/core'; import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { firstValueFrom } from 'rxjs'; import { UIInteractions, wait, waitForActiveNodeChange } from '../../../test-utils/ui-interactions.spec'; @@ -12,7 +11,7 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component'; import { GridSummaryPosition, GridSelectionMode, CellType, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { IgxColumnLayoutComponent } from 'igniteui-angular/grids/core'; -import { GridSummaryCalculationMode, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { GridSummaryCalculationMode, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; @@ -34,12 +33,12 @@ describe('IgxGrid Master Detail #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, DefaultGridMasterDetailComponent, AllExpandedGridMasterDetailComponent, MRLMasterDetailComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService ] }).compileComponents(); @@ -1286,11 +1285,11 @@ describe('IgxGrid Master Detail zoneless change detection #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, DefaultGridMasterDetailComponent, AllExpandedGridMasterDetailComponent ], providers: [ + provideIgxNoopAnimations(), provideZonelessChangeDetection(), IgxGridMRLNavigationService, { provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 } diff --git a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts index 7b6f43d9611..f9719e06b56 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts @@ -1,6 +1,5 @@ import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxGridComponent } from './grid.component'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { ViewChild, Component, DebugElement, ChangeDetectionStrategy } from '@angular/core'; @@ -9,7 +8,7 @@ import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions, GRID_MRL_BLOCK } from '../../../test-utils/grid-functions.spec'; import { ControlsFunction } from '../../../test-utils/controls-functions.spec'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; -import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; type FixtureType = ColumnLayoutGroupingTestComponent | ColumnLayoutHidingTestComponent | ColumnLayoutResizingTestComponent @@ -29,7 +28,6 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ColumnLayoutPinningTestComponent, ColumnLayoutFilteringTestComponent, ColumnLayoutHidingTestComponent, @@ -37,6 +35,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { ColumnLayoutResizingTestComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.spec.ts index 14f4a18c8c7..c5f1f053640 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.spec.ts @@ -1,7 +1,6 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxGridComponent } from './grid.component'; import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxColumnLayoutComponent, IgxGridMRLNavigationService } from 'igniteui-angular/grids/core'; import { By } from '@angular/platform-browser'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; @@ -10,7 +9,7 @@ import { ICellPosition } from 'igniteui-angular/grids/core'; import { GridFunctions, GRID_MRL_BLOCK } from '../../../test-utils/grid-functions.spec'; import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core'; import { IgxColumnComponent } from 'igniteui-angular/grids/core'; -import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; const GRID_COL_THEAD_CLASS = '.igx-grid-th'; const GRID_MRL_BLOCK_CLASS = `.${GRID_MRL_BLOCK}`; @@ -21,11 +20,11 @@ describe('IgxGrid - multi-row-layout #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ColumnLayoutTestComponent, ColumnLayoutAndGroupsTestComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts index 0fb915c5525..862de7bec42 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts @@ -1,13 +1,12 @@ import { TestBed, ComponentFixture, fakeAsync, waitForAsync, tick } from '@angular/core/testing'; import { IgxGridComponent } from './grid.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Component, DebugElement, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { IGridEditEventArgs, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; import { FormsModule } from '@angular/forms'; import { IgxComboComponent } from 'igniteui-angular/combo'; -import { cloneArray, columnFieldPath, IgxStringFilteringOperand, resolveNestedPath, SortingDirection } from 'igniteui-angular/core'; +import { cloneArray, columnFieldPath, IgxStringFilteringOperand, resolveNestedPath, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; const first = (array: T[]): T => array[0]; @@ -209,8 +208,9 @@ describe('Grid - nested data source properties #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, NestedPropertiesGridComponent - ] + NestedPropertiesGridComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -366,8 +366,9 @@ describe('Grid nested data advanced editing #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, NestedPropertiesGrid2Component - ] + NestedPropertiesGrid2Component + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -526,8 +527,9 @@ describe('Edit cell with data of type Array #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, NestedPropertyGridComponent - ] + NestedPropertyGridComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid.pagination.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.pagination.spec.ts index 190a428e498..50115ec6ac1 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.pagination.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.pagination.spec.ts @@ -1,12 +1,11 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { GridWithUndefinedDataComponent } from '../../../test-utils/grid-samples.spec'; import { PagingComponent, RemotePagingComponent } from '../../../test-utils/grid-base-components.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { wait } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions, PAGER_CLASS } from '../../../test-utils/grid-functions.spec'; import { ControlsFunction, BUTTON_DISABLED_CLASS } from '../../../test-utils/controls-functions.spec'; -import { IgxNumberFilteringOperand } from 'igniteui-angular/core'; +import { IgxNumberFilteringOperand, provideIgxNoopAnimations } from 'igniteui-angular/core'; const verifyGridPager = (fix, rowsCount, firstCellValue, pagerText, buttonsVisibility) => { const grid = fix.componentInstance.grid; @@ -34,11 +33,11 @@ describe('IgxGrid - Grid Paging #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, PagingComponent, GridWithUndefinedDataComponent, RemotePagingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/grid.pinning.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.pinning.spec.ts index a0c9814d68d..6e543efa49b 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.pinning.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.pinning.spec.ts @@ -1,6 +1,5 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { GridSelectionMode, IgxGridHeaderRowComponent, IgxGridMRLNavigationService, IPinningConfig, RowPinningPosition } from 'igniteui-angular/grids/core'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { @@ -26,7 +25,7 @@ import { import { IgxGridComponent } from './grid.component'; import { DropPosition } from 'igniteui-angular/grids/core'; import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec'; -import { ColumnPinningPosition, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { ColumnPinningPosition, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxGrid - Column Pinning #grid', () => { @@ -35,7 +34,6 @@ describe('IgxGrid - Column Pinning #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, PinningComponent, PinOnInitAndSelectionComponent, GridFeaturesComponent, @@ -44,6 +42,7 @@ describe('IgxGrid - Column Pinning #grid', () => { PinOnBothSidesInitComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridMRLNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/grid/src/grid.search.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.search.spec.ts index f5791a510ce..f9c61160a12 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.search.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.search.spec.ts @@ -6,12 +6,11 @@ import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { GridWithAvatarComponent, GroupableGridSearchComponent, ScrollableGridSearchComponent } from '../../../test-utils/grid-samples.spec'; import { IForOfState } from 'igniteui-angular/directives'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { IgxTextHighlightDirective } from 'igniteui-angular/directives'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { firstValueFrom } from 'rxjs'; -import { DefaultSortingStrategy, GridColumnDataType, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, GridColumnDataType, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxGrid - search API #grid', () => { const CELL_CSS_CLASS = '.igx-grid__td'; @@ -23,12 +22,12 @@ describe('IgxGrid - search API #grid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, BasicGridSearchComponent, GridWithAvatarComponent, GroupableGridSearchComponent, ScrollableGridSearchComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })) diff --git a/projects/igniteui-angular/grids/grid/src/grid.sorting.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.sorting.spec.ts index f7168591e5c..8d79ceeee67 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.sorting.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.sorting.spec.ts @@ -1,12 +1,11 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxGridComponent } from './grid.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { GridDeclaredColumnsComponent, SortByParityComponent, GridWithPrimaryKeyComponent, SortByAnotherColumnComponent, SortOnInitComponent, IgxGridFormattedValuesSortingComponent } from '../../../test-utils/grid-samples.spec'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { CellType } from 'igniteui-angular/grids/core'; -import { DefaultSortingStrategy, FormattedValuesSortingStrategy, NoopSortingStrategy, SortingDirection } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, FormattedValuesSortingStrategy, NoopSortingStrategy, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { By } from '@angular/platform-browser'; describe('IgxGrid - Grid Sorting #grid', () => { @@ -20,9 +19,9 @@ describe('IgxGrid - Grid Sorting #grid', () => { GridDeclaredColumnsComponent, SortByParityComponent, GridWithPrimaryKeyComponent, - NoopAnimationsModule, IgxGridFormattedValuesSortingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/grid/src/row-drag.directive.spec.ts b/projects/igniteui-angular/grids/grid/src/row-drag.directive.spec.ts index d697e8bb28a..da468e1eacb 100644 --- a/projects/igniteui-angular/grids/grid/src/row-drag.directive.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/row-drag.directive.spec.ts @@ -1,7 +1,6 @@ import { Component, ViewChild, DebugElement, QueryList, TemplateRef, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { DataParent, SampleTestData } from '../../../test-utils/sample-test-data.spec'; @@ -16,7 +15,7 @@ import { GridSelectionMode } from 'igniteui-angular/grids/core'; import { CellType, GridType, RowType } from 'igniteui-angular/grids/core'; import { IgxRowDirective } from 'igniteui-angular/grids/core'; import { NgStyle } from '@angular/common'; -import { IgxStringFilteringOperand, Point, SortingDirection } from 'igniteui-angular/core'; +import { IgxStringFilteringOperand, Point, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -60,9 +59,9 @@ describe('Row Drag Tests', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridRowDraggableComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -410,9 +409,9 @@ describe('Row Drag Tests', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridRowCustomGhostDraggableComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -496,9 +495,9 @@ describe('Row Drag Tests', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxGridFeaturesRowDragComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -949,11 +948,11 @@ describe('Row Drag Tests', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridTestComponent, IgxHierarchicalGridCustomGhostTestComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); @@ -1102,9 +1101,9 @@ describe('Row Drag Tests', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-add-row.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-add-row.spec.ts index b1cc31bd3d0..c6a8a3509e1 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-add-row.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-add-row.spec.ts @@ -1,9 +1,9 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; import { IgxHierarchicalGridActionStripComponent } from '../../../test-utils/hierarchical-grid-components.spec'; import { wait } from '../../../test-utils/ui-interactions.spec'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { IgxGridNavigationService } from 'igniteui-angular/grids/core'; @@ -21,9 +21,10 @@ describe('IgxHierarchicalGrid - Add Row UI #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridActionStripComponent + IgxHierarchicalGridActionStripComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.integration.spec.ts index bfac7007eda..464f1b981b4 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.integration.spec.ts @@ -1,6 +1,5 @@ import { TestBed, tick, fakeAsync, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxChildGridRowComponent, IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { IgxColumnMovingDragDirective, IgxGridNavigationService } from 'igniteui-angular/grids/core'; @@ -19,7 +18,7 @@ import { HierarchicalGridFunctions } from '../../../test-utils/hierarchical-grid import { GridSelectionMode, RowPinningPosition } from 'igniteui-angular/grids/core'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { setElementSize } from '../../../test-utils/helper-utils.spec'; -import { ColumnPinningPosition, DefaultSortingStrategy, IgxStringFilteringOperand, ɵSize, SortingDirection } from 'igniteui-angular/core'; +import { ColumnPinningPosition, DefaultSortingStrategy, IgxStringFilteringOperand, ɵSize, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; describe('IgxHierarchicalGrid Integration #hGrid', () => { @@ -35,7 +34,6 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridEmptyDataExportComponent, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridTestCustomToolbarComponent, @@ -44,6 +42,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { IgxHierarchicalGridTestInputToolbarComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts index 8ac59fac5ee..3c2474c3a21 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts @@ -1,5 +1,4 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Component, ViewChild, DebugElement, ChangeDetectionStrategy, provideZonelessChangeDetection } from '@angular/core'; import { IgxChildGridRowComponent, IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { wait, UIInteractions, waitForSelectionChange } from '../../../test-utils/ui-interactions.spec'; @@ -9,7 +8,7 @@ import { IgxHierarchicalRowComponent } from './hierarchical-row.component'; import { clearGridSubs, setupHierarchicalGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { IGridCellEventArgs, IgxColumnComponent, IgxGridCellComponent, IgxGridNavigationService } from 'igniteui-angular/grids/core'; -import { IPathSegment } from 'igniteui-angular/core'; +import { IPathSegment, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; import { firstValueFrom } from 'rxjs'; @@ -26,13 +25,13 @@ describe('IgxHierarchicalGrid Navigation', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridTestComplexComponent, IgxHierarchicalGridMultiLayoutComponent, IgxHierarchicalGridSmallerChildComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.selection.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.selection.spec.ts index b729c542211..16f620240e4 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.selection.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.selection.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { IgxHierarchicalRowComponent } from './hierarchical-row.component'; @@ -16,7 +15,7 @@ import { CellType, GridSelectionMode, IgxGridNavigationService } from 'igniteui- import { QueryList } from '@angular/core'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { setElementSize } from '../../../test-utils/helper-utils.spec'; -import { IgxStringFilteringOperand, ɵSize } from 'igniteui-angular/core'; +import { IgxStringFilteringOperand, ɵSize, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxHierarchicalGrid selection #hGrid', () => { let fix; @@ -28,7 +27,6 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridRowSelectionComponent, IgxHierarchicalGridRowSelectionTestSelectRowOnClickComponent, @@ -37,6 +35,7 @@ describe('IgxHierarchicalGrid selection #hGrid', () => { IgxHierGridExternalAdvancedFilteringComponent, ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts index 25c13af2608..67f9bdc0683 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { ChangeDetectorRef, Component, ViewChild, AfterViewInit, QueryList, inject, ChangeDetectionStrategy } from '@angular/core'; import { IgxChildGridRowComponent, IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { wait, UIInteractions } from '../../../test-utils/ui-interactions.spec'; @@ -15,7 +14,7 @@ import { IgxExcelStyleSortingComponent } from 'igniteui-angular/grids/core'; import { IgxExcelStyleSearchComponent } from 'igniteui-angular/grids/core'; import { IgxCellHeaderTemplateDirective } from 'igniteui-angular/grids/core'; import { setElementSize } from '../../../test-utils/helper-utils.spec'; -import { ColumnType, IgxStringFilteringOperand, ɵSize, getComponentSize } from 'igniteui-angular/core'; +import { ColumnType, IgxStringFilteringOperand, ɵSize, getComponentSize, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IGridCreatedEventArgs } from './events'; @@ -24,7 +23,6 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridMultiLayoutComponent, IgxHierarchicalGridSizingComponent, @@ -40,6 +38,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { IgxHierarchicalGridMCHComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts index 525553d40dc..c3ebec58da4 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts @@ -1,5 +1,4 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { IgxRowIslandComponent } from './row-island.component'; @@ -12,7 +11,7 @@ import { HierarchicalGridFunctions } from '../../../test-utils/hierarchical-grid import { IgxHierarchicalRowComponent } from './hierarchical-row.component'; import { IgxHierarchicalGridDefaultComponent } from '../../../test-utils/hierarchical-grid-components.spec'; import { firstValueFrom } from 'rxjs'; -import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxGridNavigationService } from 'igniteui-angular/grids/core'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; @@ -23,11 +22,11 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridDefaultComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); @@ -450,11 +449,11 @@ describe('IgxHierarchicalGrid Virtualization Custom Scenarios #hGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxHierarchicalGridTestBaseComponent, IgxHierarchicalGridNoScrollTestComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts index 107dec341a9..0a48b023e04 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts @@ -1,4 +1,3 @@ -import { useAnimation } from "@angular/animations"; import { ChangeDetectorRef, Component, @@ -229,16 +228,8 @@ export class IgxPivotDataSelectorComponent { /* blazorSuppress */ public animationSettings = { - closeAnimation: useAnimation(fadeOut, { - params: { - duration: "0ms", - }, - }), - openAnimation: useAnimation(fadeIn, { - params: { - duration: "0ms", - }, - }), + closeAnimation: fadeOut({ duration: 0 }), + openAnimation: fadeIn({ duration: 0 }), }; /** @hidden @internal */ diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.spec.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.spec.ts index e5d1ac8f61b..e2342dc6e46 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.spec.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.spec.ts @@ -1,7 +1,6 @@ import { DebugElement } from "@angular/core"; import { fakeAsync, TestBed, waitForAsync } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; -import { NoopAnimationsModule } from "@angular/platform-browser/animations"; import { IgxExpansionPanelHeaderComponent } from 'igniteui-angular/expansion-panel'; import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel'; import { IgxInputDirective } from 'igniteui-angular/input-group'; @@ -16,7 +15,7 @@ import { PivotGridType } from "igniteui-angular/grids/core"; import { setElementSize } from '../../../test-utils/helper-utils.spec'; -import { ɵSize, SortingDirection } from 'igniteui-angular/core'; +import { ɵSize, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxCheckboxComponent } from 'igniteui-angular/checkbox'; describe("Pivot data selector", () => { @@ -24,8 +23,9 @@ describe("Pivot data selector", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxPivotDataSelectorComponent - ] + IgxPivotDataSelectorComponent + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -45,10 +45,10 @@ describe("Pivot data selector integration", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxPivotGridTestBaseComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid-keyboard-nav.spec.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid-keyboard-nav.spec.ts index 7c2caa4887d..04c7d8604bf 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid-keyboard-nav.spec.ts @@ -1,12 +1,12 @@ import { TestBed, fakeAsync, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { IgxPivotGridMultipleRowComponent, IgxPivotGridTestBaseComponent } from '../../../test-utils/pivot-grid-samples.spec'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { IgxPivotGridComponent } from './pivot-grid.component'; import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component'; import { DebugElement } from '@angular/core'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; import { IgxGridNavigationService, PivotRowLayoutType } from 'igniteui-angular/grids/core'; import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service'; @@ -30,10 +30,10 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxPivotGridMultipleRowComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); @@ -346,10 +346,10 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxPivotGridTestBaseComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); @@ -414,10 +414,10 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxPivotGridMultipleRowComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts index 010e01cca71..7ac74c6fcea 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts @@ -1,7 +1,6 @@ import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IgxStringFilteringOperand, ISortingExpression, ɵSize, SortingDirection } from 'igniteui-angular/core'; +import { FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IgxStringFilteringOperand, ISortingExpression, ɵSize, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'; import { DefaultPivotSortingStrategy } from 'igniteui-angular/grids/pivot-grid'; @@ -31,12 +30,12 @@ describe('IgxPivotGrid #pivotGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxPivotGridTestBaseComponent, IgxPivotGridTestComplexHierarchyComponent, IgxPivotGridFlexContainerComponent ], providers: [ + provideIgxNoopAnimations(), IgxGridNavigationService ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-add-row-ui.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-add-row-ui.spec.ts index d6c1ccf612f..21eb4ddfbe8 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-add-row-ui.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-add-row-ui.spec.ts @@ -1,9 +1,9 @@ +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxTreeGridComponent } from './public_api'; import { IgxTreeGridEditActionsComponent, IgxTreeGridEditActionsPinningComponent } from '../../../test-utils/tree-grid-components.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; import { IgxTreeGridRowComponent } from './tree-grid-row.component'; import { first } from 'rxjs/operators'; @@ -24,10 +24,10 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridEditActionsComponent, IgxTreeGridEditActionsPinningComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-crud.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-crud.spec.ts index 5cfae2b3c6f..81da450aae9 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-crud.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-crud.spec.ts @@ -1,4 +1,5 @@ +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent } from '../../../test-utils/tree-grid-components.spec'; @@ -6,7 +7,6 @@ import { TreeGridFunctions } from '../../../test-utils/tree-grid-functions.spec' import { first } from 'rxjs/operators'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { DropPosition } from 'igniteui-angular/grids/core'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { DebugElement } from '@angular/core'; import { IgxTreeGridComponent } from './tree-grid.component'; @@ -21,10 +21,10 @@ describe('IgxTreeGrid - CRUD #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-expanding.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-expanding.spec.ts index ca1eb880355..eb8ad1b9de4 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-expanding.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxTreeGridExpandingComponent, IgxTreeGridPrimaryForeignKeyComponent, @@ -16,6 +15,7 @@ import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { CellType, GridSelectionMode } from 'igniteui-angular/grids/core'; import { IgxTreeGridComponent } from './tree-grid.component'; import { QueryList } from '@angular/core'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxTreeGridAPIService } from './tree-grid-api.service'; describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { @@ -25,7 +25,6 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridExpandingComponent, IgxTreeGridPrimaryForeignKeyComponent, IgxTreeGridLoadOnDemandComponent, @@ -33,7 +32,8 @@ describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { IgxTreeGridLoadOnDemandChildDataComponent, IgxTreeGridCustomExpandersTemplateComponent, IgxTreeGridRowEditingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts index 393ae97a56e..1583ea4038e 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts @@ -1,6 +1,5 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxTreeGridComponent } from './public_api'; import { IgxTreeGridFilteringComponent, IgxTreeGridFilteringESFTemplatesComponent, IgxTreeGridFilteringRowEditingComponent } from '../../../test-utils/tree-grid-components.spec'; import { TreeGridFunctions } from '../../../test-utils/tree-grid-functions.spec'; @@ -9,7 +8,7 @@ import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { By } from '@angular/platform-browser'; -import { FilteringStrategy, GridColumnDataType, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy } from 'igniteui-angular/core'; +import { FilteringStrategy, GridColumnDataType, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, provideIgxNoopAnimations } from 'igniteui-angular/core'; const IGX_CHECKBOX_LABEL = '.igx-checkbox__label'; @@ -20,11 +19,11 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridFilteringComponent, IgxTreeGridFilteringRowEditingComponent, IgxTreeGridFilteringESFTemplatesComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.pipe.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.pipe.spec.ts index e0eea7c0865..e52a0979c22 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.pipe.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.pipe.spec.ts @@ -1,6 +1,5 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { DefaultSortingStrategy, IGroupingExpression } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, IGroupingExpression, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent } from '../../../test-utils/tree-grid-components.spec'; import { IgxTreeGridGroupingPipe } from './tree-grid.grouping.pipe'; @@ -13,7 +12,8 @@ describe('TreeGrid Grouping Pipe', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent] + imports: [IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts index e5506611b43..a8d3fdf7738 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts @@ -1,11 +1,10 @@ import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { IgxTreeGridGroupByAreaTestComponent, IgxTreeGridGroupingComponent } from '../../../test-utils/tree-grid-components.spec'; import { IgxTreeGridGroupByAreaComponent } from 'igniteui-angular/grids/tree-grid'; import { TreeGridFunctions } from '../../../test-utils/tree-grid-functions.spec'; import { IgxTreeGridComponent } from './tree-grid.component'; -import { DefaultSortingStrategy } from 'igniteui-angular/core'; +import { DefaultSortingStrategy, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; describe('IgxTreeGrid', () => { @@ -13,10 +12,10 @@ describe('IgxTreeGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridGroupingComponent, IgxTreeGridGroupByAreaTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-indentation.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-indentation.spec.ts index a26d7e2490b..10f77fb9ad8 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-indentation.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-indentation.spec.ts @@ -5,8 +5,7 @@ import { TreeGridFunctions, NUMBER_CELL_CSS_CLASS } from '../../../test-utils/tr import { By } from '@angular/platform-browser'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { DropPosition } from 'igniteui-angular/grids/core'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { IgxNumberFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { IgxNumberFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; const GRID_RESIZE_CLASS = '.igx-grid-th__resize-handle'; @@ -16,7 +15,8 @@ describe('IgxTreeGrid - Indentation #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent] + imports: [IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts index a229156b431..3ce675a2fc7 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts @@ -9,13 +9,12 @@ import { IgxTreeGridRowEditingHierarchicalDSTransactionComponent, IgxTreeGridRowPinningComponent } from '../../../test-utils/tree-grid-components.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { TreeGridFunctions } from '../../../test-utils/tree-grid-functions.spec'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { By } from '@angular/platform-browser'; import { CellType, DropPosition, IgxColumnComponent, IgxTreeGridRow } from 'igniteui-angular/grids/core'; import { IgxTreeGridRowComponent } from './tree-grid-row.component'; -import { HierarchicalTransaction, IgxGridTransaction, IgxHierarchicalTransactionService, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection, TransactionType } from 'igniteui-angular/core'; +import { HierarchicalTransaction, IgxGridTransaction, IgxHierarchicalTransactionService, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection, TransactionType, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { firstValueFrom } from 'rxjs'; const CSS_CLASS_BANNER = 'igx-banner'; @@ -29,7 +28,6 @@ describe('IgxTreeGrid - Integration #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridSimpleComponent, IgxTreeGridPrimaryForeignKeyComponent, IgxTreeGridStringTreeColumnComponent, @@ -42,6 +40,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { IgxTreeGridRowEditingHierarchicalDSTransactionComponent ], providers: [ + provideIgxNoopAnimations(), { provide: IgxGridTransaction, useClass: IgxHierarchicalTransactionService } ] }).compileComponents(); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts index 254018b67a3..a500be4c817 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts @@ -1,5 +1,4 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxTreeGridComponent } from './public_api'; import { IgxTreeGridManyColumnsComponent, IgxTreeGridWithNoScrollsComponent, IgxTreeGridWithScrollsComponent } from '../../../test-utils/tree-grid-components.spec'; import { TreeGridFunctions } from '../../../test-utils/tree-grid-functions.spec'; @@ -7,6 +6,7 @@ import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { DebugElement, provideZonelessChangeDetection } from '@angular/core'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { filter, firstValueFrom } from 'rxjs'; import { CellType } from 'igniteui-angular/grids/core'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; @@ -17,10 +17,10 @@ describe('IgxTreeGrid - Key Board Navigation #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridWithNoScrollsComponent, IgxTreeGridWithScrollsComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -859,8 +859,9 @@ describe('IgxTreeGrid keyboard navigation in zoneless change detection #tGrid', beforeEach(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxTreeGridManyColumnsComponent], + imports: [IgxTreeGridManyColumnsComponent], providers: [ + provideIgxNoopAnimations(), provideZonelessChangeDetection(), { provide: SCROLL_THROTTLE_TIME_MULTIPLIER, useValue: 0 } ] diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts index 261edf9ce2e..f7857590a1b 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts @@ -1,5 +1,4 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxTreeGridSelectionKeyComponent, IgxTreeGridSelectionComponent, @@ -10,7 +9,7 @@ import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/hel import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { GridSelectionFunctions, GridSummaryFunctions, GridFunctions } from '../../../test-utils/grid-functions.spec'; import { GridSelectionMode } from 'igniteui-angular/grids/core'; -import { IgxStringFilteringOperand } from 'igniteui-angular/core'; +import { IgxStringFilteringOperand, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; import { asyncScheduler } from 'rxjs'; @@ -19,12 +18,12 @@ describe('IgxTreeGrid - Multi Cell selection #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridSelectionKeyComponent, IgxTreeGridSelectionComponent, IgxTreeGridSelectionWithTransactionComponent, IgxTreeGridFKeySelectionWithTransactionComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-search.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-search.spec.ts index 1be5a638a49..3b85c1aa42b 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-search.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-search.spec.ts @@ -5,9 +5,8 @@ import { IgxTreeGridSearchComponent, IgxTreeGridPrimaryForeignKeyComponent, IgxTreeGridSummariesScrollingComponent } from '../../../test-utils/tree-grid-components.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { wait } from '../../../test-utils/ui-interactions.spec'; -import { IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; const HIGHLIGHT_CLASS = 'igx-highlight'; const ACTIVE_CLASS = 'igx-highlight__active'; @@ -20,11 +19,11 @@ describe('IgxTreeGrid - search API #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridSearchComponent, IgxTreeGridPrimaryForeignKeyComponent, IgxTreeGridSummariesScrollingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-selection.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-selection.spec.ts index ecb5458ddbe..095e860818d 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-selection.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-selection.spec.ts @@ -11,7 +11,6 @@ import { IgxTreeGridCascadingSelectionTransactionComponent, IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent } from '../../../test-utils/tree-grid-components.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { TreeGridFunctions, TREE_ROW_SELECTION_CSS_CLASS, @@ -24,7 +23,7 @@ import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { GridSelectionMode, IgxGridCell } from 'igniteui-angular/grids/core'; import { By } from '@angular/platform-browser'; import { IRowSelectionEventArgs } from 'igniteui-angular/grids/core'; -import { FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; +import { FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxTreeGrid - Selection #tGrid', () => { let fix; @@ -39,7 +38,6 @@ describe('IgxTreeGrid - Selection #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridSimpleComponent, IgxTreeGridCellSelectionComponent, IgxTreeGridSelectionRowEditingComponent, @@ -49,7 +47,8 @@ describe('IgxTreeGrid - Selection #tGrid', () => { IgxTreeGridCascadingSelectionComponent, IgxTreeGridCascadingSelectionTransactionComponent, IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-sorting.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-sorting.spec.ts index e2e93d4b71d..a8e67af73d5 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-sorting.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-sorting.spec.ts @@ -1,9 +1,9 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxTreeGridComponent } from './tree-grid.component'; import { IgxTreeGridSortingComponent } from '../../../test-utils/tree-grid-components.spec'; import { TreeGridFunctions } from '../../../test-utils/tree-grid-functions.spec'; import { DefaultSortingStrategy, SortingDirection } from '../../../core/src/data-operations/sorting-strategy'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; describe('IgxTreeGrid - Sorting #tGrid', () => { @@ -12,7 +12,8 @@ describe('IgxTreeGrid - Sorting #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxTreeGridSortingComponent] + imports: [IgxTreeGridSortingComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts index d0954db8f03..72c25e7cbdf 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts @@ -1,5 +1,4 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxTreeGridSummariesComponent, IgxTreeGridSummariesKeyComponent, @@ -14,7 +13,7 @@ import { GridSummaryFunctions, GridFunctions } from '../../../test-utils/grid-fu import { DebugElement } from '@angular/core'; import { IgxTreeGridComponent } from './tree-grid.component'; import { IgxSummaryRow, IgxTreeGridRow } from 'igniteui-angular/grids/core'; -import { IgxNumberFilteringOperand } from 'igniteui-angular/core'; +import { IgxNumberFilteringOperand, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { SCROLL_THROTTLE_TIME_MULTIPLIER } from './../../grid/src/grid-base.directive'; describe('IgxTreeGrid - Summaries #tGrid', () => { @@ -23,14 +22,14 @@ describe('IgxTreeGrid - Summaries #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridSummariesComponent, IgxTreeGridSummariesKeyComponent, IgxTreeGridCustomSummariesComponent, IgxTreeGridSummariesTransactionsComponent, IgxTreeGridSummariesScrollingComponent, IgxTreeGridSummariesKeyScroliingComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.spec.ts index 74eeb4c401f..e320cf9ef5a 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.spec.ts @@ -1,5 +1,4 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxTreeGridComponent } from './tree-grid.component'; import { By } from '@angular/platform-browser'; import { @@ -15,7 +14,7 @@ import { GridSelectionMode } from 'igniteui-angular/grids/core'; import { SampleTestData } from '../../../test-utils/sample-test-data.spec'; import { SAFE_DISPOSE_COMP_ID } from '../../../test-utils/grid-functions.spec'; import { setElementSize } from '../../../test-utils/helper-utils.spec'; -import { IgxStringFilteringOperand, ɵSize } from 'igniteui-angular/core'; +import { IgxStringFilteringOperand, ɵSize, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxTreeGrid Component Tests #tGrid', () => { @@ -26,14 +25,14 @@ describe('IgxTreeGrid Component Tests #tGrid', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeGridWrappedInContComponent, IgxTreeGridDefaultLoadingComponent, IgxTreeGridCellSelectionComponent, IgxTreeGridSummariesTransactionsComponent, IgxTreeGridNoDataComponent, IgxTreeGridWithNoForeignKeyComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/icon/src/icon/icon.service.spec.ts b/projects/igniteui-angular/icon/src/icon/icon.service.spec.ts index 6bd93773ef9..4f863277c0e 100644 --- a/projects/igniteui-angular/icon/src/icon/icon.service.spec.ts +++ b/projects/igniteui-angular/icon/src/icon/icon.service.spec.ts @@ -25,7 +25,6 @@ describe("Icon Service", () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [], providers: [IgxIconService, provideHttpClient(withXhr(), withInterceptorsFromDi())], }).compileComponents(); diff --git a/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.spec.ts b/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.spec.ts index cc5962487e6..e4a9b5951a1 100644 --- a/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.spec.ts +++ b/projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.spec.ts @@ -1,18 +1,18 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxReadOnlyInputDirective } from './read-only-input.directive'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; import { IgxInputGroupComponent } from 'igniteui-angular/input-group'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxReadOnlyInputDirective', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, TestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }) .compileComponents(); })); diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json index 9a341858507..230b9d5ed55 100644 --- a/projects/igniteui-angular/migrations/migration-collection.json +++ b/projects/igniteui-angular/migrations/migration-collection.json @@ -314,6 +314,11 @@ "version": "22.2.0", "description": "Removes scrollbar-theme properties with no effect under the standard scrollbar properties", "factory": "./update-22_2_0" + }, + "migration-62": { + "version": "22.2.0", + "description": "Replaces useAnimation(preset, { params }) with preset({ ... }) and the Angular AnimationReferenceMetadata type with AnimationInput", + "factory": "./update-22_2_0_animations" } } } diff --git a/projects/igniteui-angular/migrations/update-11_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-11_1_0/index.spec.ts index a137b94418e..e1573badd28 100644 --- a/projects/igniteui-angular/migrations/update-11_1_0/index.spec.ts +++ b/projects/igniteui-angular/migrations/update-11_1_0/index.spec.ts @@ -319,7 +319,6 @@ export class ExcelExportComponent { @NgModule({ declarations: [ExcelExportComponent], exports: [ExcelExportComponent], - imports: [], providers: [IgxExcelExporterService] }); `); @@ -344,7 +343,6 @@ export class ExcelExportComponent { @NgModule({ declarations: [ExcelExportComponent], exports: [ExcelExportComponent], - imports: [], providers: [IgxExcelExporterService] }); `; @@ -375,7 +373,6 @@ export class CsvExportComponent { @NgModule({ declarations: [CsvExportComponent], exports: [CsvExportComponent], - imports: [], providers: [IgxCsvExporterService] }); `); @@ -400,7 +397,6 @@ export class CsvExportComponent { @NgModule({ declarations: [CsvExportComponent], exports: [CsvExportComponent], - imports: [], providers: [IgxCsvExporterService] }); `; @@ -614,7 +610,6 @@ export class ExcelExportComponent { @NgModule({ declarations: [ExcelExportComponent], exports: [ExcelExportComponent], - imports: [], providers: [IgxExcelExporterService] }); `); @@ -640,7 +635,6 @@ export class ExcelExportComponent { @NgModule({ declarations: [ExcelExportComponent], exports: [ExcelExportComponent], - imports: [], providers: [IgxExcelExporterService] }); `; @@ -672,7 +666,6 @@ export class CsvExportComponent { @NgModule({ declarations: [CsvExportComponent], exports: [CsvExportComponent], - imports: [], providers: [IgxCsvExporterService] }); `); @@ -698,7 +691,6 @@ export class CsvExportComponent { @NgModule({ declarations: [CsvExportComponent], exports: [CsvExportComponent], - imports: [], providers: [IgxCsvExporterService] }); `; diff --git a/projects/igniteui-angular/migrations/update-22_2_0_animations/index.spec.ts b/projects/igniteui-angular/migrations/update-22_2_0_animations/index.spec.ts new file mode 100644 index 00000000000..733f2e7792d --- /dev/null +++ b/projects/igniteui-angular/migrations/update-22_2_0_animations/index.spec.ts @@ -0,0 +1,118 @@ +import * as path from 'path'; + +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing/index.js'; +import { setupTestTree } from '../common/setup.spec'; + +const version = '22.2.0'; + +describe(`Update to ${version} - animations`, () => { + let appTree: UnitTestTree; + const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json')); + + beforeEach(() => { + appTree = setupTestTree(); + }); + + const migrationName = 'migration-62'; + const filePath = '/testSrc/appPrefix/component/test.component.ts'; + + it('should turn useAnimation with params into a preset call with millisecond timing', async () => { + appTree.create(filePath, +`import { useAnimation } from '@angular/animations'; +import { fadeIn, slideInTop } from 'igniteui-angular/animations'; + +const a = useAnimation(fadeIn, { params: { duration: '350ms', easing: 'ease-in' } }); +const b = useAnimation(slideInTop, { params: { duration: '.5s', delay: '0s', fromPosition: 'translateY(100%)' } }); +const c = useAnimation(fadeIn, { params: { duration: \`\${this.time}ms\` } }); +`); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent(filePath)).toEqual( +`import { fadeIn, slideInTop } from 'igniteui-angular/animations'; + +const a = fadeIn({ duration: 350, easing: 'ease-in' }); +const b = slideInTop({ duration: 500, delay: 0, fromPosition: 'translateY(100%)' }); +const c = fadeIn({ duration: this.time }); +`); + }); + + it('should unwrap useAnimation without params', async () => { + appTree.create(filePath, +`import { useAnimation } from '@angular/animations'; +import { fadeIn } from 'igniteui-angular/animations'; + +const settings = { openAnimation: useAnimation(fadeIn), closeAnimation: null }; +`); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent(filePath)).toEqual( +`import { fadeIn } from 'igniteui-angular/animations'; + +const settings = { openAnimation: fadeIn, closeAnimation: null }; +`); + }); + + it('should replace the AnimationReferenceMetadata type with AnimationInput', async () => { + appTree.create(filePath, +`import { AnimationReferenceMetadata, useAnimation } from '@angular/animations'; +import { Component } from '@angular/core'; +import { growVerIn } from 'igniteui-angular/animations'; + +export class Cmp { + public open: AnimationReferenceMetadata = useAnimation(growVerIn, { params: { duration: '200ms' } }); + public close: AnimationReferenceMetadata | null = null; +} +`); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent(filePath)).toEqual( +`import { Component } from '@angular/core'; +import { growVerIn, AnimationInput } from 'igniteui-angular/animations'; + +export class Cmp { + public open: AnimationInput = growVerIn({ duration: 200 }); + public close: AnimationInput | null = null; +} +`); + }); + + it('should add an animations import when the file has none', async () => { + appTree.create(filePath, +`import { AnimationReferenceMetadata } from '@angular/animations'; + +export interface Settings { open: AnimationReferenceMetadata; } +`); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent(filePath)).toEqual( +`import { AnimationInput } from 'igniteui-angular/animations'; + +export interface Settings { open: AnimationInput; } +`); + }); + + it('should keep other @angular/animations imports and leave unrelated files alone', async () => { + appTree.create(filePath, +`import { trigger, useAnimation } from '@angular/animations'; +import { fadeIn } from 'igniteui-angular/animations'; + +const a = useAnimation(fadeIn); +`); + const other = '/testSrc/appPrefix/component/other.component.ts'; + appTree.create(other, `import { trigger } from '@angular/animations';\n`); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent(filePath)).toEqual( +`import { trigger } from '@angular/animations'; +import { fadeIn } from 'igniteui-angular/animations'; + +const a = fadeIn; +`); + expect(tree.readContent(other)).toEqual(`import { trigger } from '@angular/animations';\n`); + }); +}); diff --git a/projects/igniteui-angular/migrations/update-22_2_0_animations/index.ts b/projects/igniteui-angular/migrations/update-22_2_0_animations/index.ts new file mode 100644 index 00000000000..ce4ee1b7702 --- /dev/null +++ b/projects/igniteui-angular/migrations/update-22_2_0_animations/index.ts @@ -0,0 +1,223 @@ +import type { + FileVisitor, + Rule, + SchematicContext, + Tree +} from '@angular-devkit/schematics'; +import * as ts from 'typescript'; +import { IG_PACKAGE_NAME, IG_LICENSED_PACKAGE_NAME } from '../common/tsUtils'; + +const version = '22.2.0'; + +const NG_ANIMATIONS = '@angular/animations'; +const ANIMATIONS_ENTRY = 'animations'; +const USE_ANIMATION = 'useAnimation'; +const NG_METADATA_TYPE = 'AnimationReferenceMetadata'; +const IGX_INPUT_TYPE = 'AnimationInput'; +const PARAMS = 'params'; + +/** Params the presets now take in milliseconds. */ +const TIME_PARAMS = new Set(['duration', 'delay']); +const MS_PER_SECOND = 1000; + +interface Edit { + start: number; + end: number; + text: string; +} + +/** `'350ms'` -> `350`, `'.35s'` -> `350`, `` `${x}ms` `` -> `x`. Anything else is left alone. */ +function toMilliseconds(node: ts.Expression, source: ts.SourceFile): string | null { + if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) { + const match = /^\s*(-?\d*\.?\d+)\s*(ms|s)\s*$/.exec(node.text); + + if (!match) { + return null; + } + + const value = parseFloat(match[1]); + + return String(match[2] === 's' ? value * MS_PER_SECOND : value); + } + + if (ts.isTemplateExpression(node) && node.head.text === '' && node.templateSpans.length === 1) { + const [span] = node.templateSpans; + + if (span.literal.text === 'ms') { + return span.expression.getText(source); + } + } + + return null; +} + +/** Rewrites `{ params: { ... } }` into the preset overrides object. */ +function paramsText(options: ts.Expression, source: ts.SourceFile): string | null { + if (!ts.isObjectLiteralExpression(options)) { + return null; + } + + const params = options.properties.find(p => + ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === PARAMS) as ts.PropertyAssignment | undefined; + + if (!params || !ts.isObjectLiteralExpression(params.initializer)) { + return null; + } + + const entries = params.initializer.properties.map(prop => { + if (ts.isPropertyAssignment(prop) && ts.isIdentifier(prop.name) && TIME_PARAMS.has(prop.name.text)) { + const ms = toMilliseconds(prop.initializer, source); + + if (ms !== null) { + return `${prop.name.text}: ${ms}`; + } + } + + return prop.getText(source); + }); + + return `{ ${entries.join(', ')} }`; +} + +function migrateFile(filePath: string, content: string, logger: SchematicContext['logger']): string { + const source = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true); + const edits: Edit[] = []; + let ngImport: ts.ImportDeclaration | undefined; + let useAnimationName: string | undefined; + let metadataName: string | undefined; + let igxAnimationsImport: ts.ImportDeclaration | undefined; + let igxBasePackage = IG_PACKAGE_NAME; + let needsInputType = false; + + // Pass 1: find the relevant imports. + for (const statement of source.statements) { + if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier)) { + continue; + } + + const bindings = statement.importClause?.namedBindings; + + if (!bindings || !ts.isNamedImports(bindings)) { + continue; + } + + const path = statement.moduleSpecifier.text; + + if (path === NG_ANIMATIONS) { + ngImport = statement; + + for (const element of bindings.elements) { + const imported = (element.propertyName ?? element.name).text; + + if (imported === USE_ANIMATION) { + useAnimationName = element.name.text; + } + if (imported === NG_METADATA_TYPE) { + metadataName = element.name.text; + } + } + } + + for (const basePackage of [IG_PACKAGE_NAME, IG_LICENSED_PACKAGE_NAME]) { + if (path === `${basePackage}/${ANIMATIONS_ENTRY}`) { + igxAnimationsImport = statement; + } + if (path.startsWith(`${basePackage}/`) || path === basePackage) { + igxBasePackage = basePackage; + } + } + } + + if (!ngImport || (!useAnimationName && !metadataName)) { + return content; + } + + // Pass 2: rewrite usages. + const visit = (node: ts.Node) => { + if (useAnimationName && ts.isCallExpression(node) && ts.isIdentifier(node.expression) + && node.expression.text === useAnimationName && node.arguments.length > 0) { + const [preset, options] = node.arguments; + const presetText = preset.getText(source); + const overrides = options ? paramsText(options, source) : null; + + if (options && overrides === null) { + logger.warn(` ! ${filePath}: could not migrate useAnimation options, review manually`); + return; + } + + edits.push({ start: node.getStart(source), end: node.getEnd(), text: overrides ? `${presetText}(${overrides})` : presetText }); + return; + } + + if (metadataName && ts.isTypeReferenceNode(node) && ts.isIdentifier(node.typeName) && node.typeName.text === metadataName) { + needsInputType = true; + edits.push({ start: node.typeName.getStart(source), end: node.typeName.getEnd(), text: IGX_INPUT_TYPE }); + } + + ts.forEachChild(node, visit); + }; + visit(source); + + // Pass 3: fix the imports. + const remaining = (ngImport.importClause!.namedBindings as ts.NamedImports).elements + .filter(e => ![USE_ANIMATION, NG_METADATA_TYPE].includes((e.propertyName ?? e.name).text)) + .map(e => e.getText(source)); + const lineEnd = content.indexOf('\n', ngImport.getEnd()); + const importEnd = lineEnd === -1 ? content.length : lineEnd + 1; + const replacement = remaining.length ? `import { ${remaining.join(', ')} } from '${NG_ANIMATIONS}';\n` : ''; + edits.push({ start: ngImport.getStart(source), end: importEnd, text: replacement }); + + if (needsInputType) { + if (igxAnimationsImport) { + const bindings = igxAnimationsImport.importClause!.namedBindings as ts.NamedImports; + const hasInput = bindings.elements.some(e => e.name.text === IGX_INPUT_TYPE); + + if (!hasInput) { + const last = bindings.elements[bindings.elements.length - 1]; + edits.push({ start: last.getEnd(), end: last.getEnd(), text: `, ${IGX_INPUT_TYPE}` }); + } + } else { + edits.push({ start: importEnd, end: importEnd, text: `import { ${IGX_INPUT_TYPE} } from '${igxBasePackage}/${ANIMATIONS_ENTRY}';\n` }); + } + } + + if (remaining.length) { + logger.warn(` ! ${filePath}: still imports from ${NG_ANIMATIONS}; custom animations need the igniteui-angular animation() helper`); + } + + edits.sort((a, b) => b.start - a.start); + let result = content; + + for (const edit of edits) { + result = result.substring(0, edit.start) + edit.text + result.substring(edit.end); + } + + return result; +} + +export default function migrate(): Rule { + return async (host: Tree, context: SchematicContext) => { + context.logger.info(`Applying animations migration for Ignite UI for Angular to version ${version}`); + + const visit: FileVisitor = (filePath) => { + if (!filePath.endsWith('.ts') || filePath.includes('node_modules') || filePath.includes('dist')) { + return; + } + + const content = host.read(filePath)?.toString(); + + if (!content || !content.includes(NG_ANIMATIONS)) { + return; + } + + const migrated = migrateFile(filePath, content, context.logger); + + if (migrated !== content) { + host.overwrite(filePath, migrated); + context.logger.info(` ✓ Migrated ${filePath}`); + } + }; + + host.visit(visit); + }; +} diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index ce948689e07..3d30bceb24a 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -82,7 +82,6 @@ "peerDependencies": { "@angular/common": "22", "@angular/core": "22", - "@angular/animations": "22", "@angular/forms": "22", "igniteui-webcomponents": "~7.3.0", "igniteui-grid-lite": "~0.10.0" diff --git a/projects/igniteui-angular/paginator/src/paginator/paginator.component.spec.ts b/projects/igniteui-angular/paginator/src/paginator/paginator.component.spec.ts index 156217363c2..161f36a98eb 100644 --- a/projects/igniteui-angular/paginator/src/paginator/paginator.component.spec.ts +++ b/projects/igniteui-angular/paginator/src/paginator/paginator.component.spec.ts @@ -1,18 +1,18 @@ import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { ViewChild, Component, ChangeDetectionStrategy } from '@angular/core'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxPaginatorComponent, IgxPaginatorContentDirective } from './paginator.component'; import { GridFunctions } from '../../../test-utils/grid-functions.spec'; import { ControlsFunction } from '../../../test-utils/controls-functions.spec'; import { first } from 'rxjs/operators'; import { IgxButtonDirective } from '../../../directives/src/directives/button/button.directive'; -import { PaginatorResourceStringsEN, changei18n } from 'igniteui-angular/core'; +import { PaginatorResourceStringsEN, changei18n, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxPaginator with default settings', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, DefaultPaginatorComponent] + imports: [DefaultPaginatorComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); it('should calculate number of pages correctly', () => { @@ -306,7 +306,8 @@ describe('IgxPaginator with default settings', () => { describe('IgxPaginator with custom settings', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, CustomizedPaginatorComponent] + imports: [CustomizedPaginatorComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts index 30d9dd35383..bf1c24821f2 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts @@ -1,12 +1,11 @@ import { waitForAsync, TestBed, ComponentFixture, fakeAsync, tick, flush } from '@angular/core/testing'; -import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxDateFilteringOperand, IgxNumberFilteringOperand, QueryBuilderResourceStringsEN, changei18n } from 'igniteui-angular/core'; +import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxDateFilteringOperand, IgxNumberFilteringOperand, QueryBuilderResourceStringsEN, changei18n, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxChipComponent } from 'igniteui-angular/chips'; import { IgxComboComponent } from 'igniteui-angular/combo'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxInputGroupComponent } from 'igniteui-angular/input-group'; import { IgxSelectComponent } from 'igniteui-angular/select';; import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { ControlsFunction } from '../../../test-utils/controls-functions.spec'; import { QueryBuilderFunctions, SampleEntities } from './query-builder-functions.spec'; @@ -24,12 +23,12 @@ describe('IgxQueryBuilder', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxQueryBuilderComponent, IgxQueryBuilderSampleTestComponent, IgxQueryBuilderCustomTemplateSampleTestComponent, IgxComboComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.spec.ts b/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.spec.ts index 39f827412f6..16f94d278f5 100644 --- a/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.spec.ts +++ b/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.spec.ts @@ -3,8 +3,8 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxRadioGroupDirective } from './radio-group.directive'; import { FormsModule, ReactiveFormsModule, UntypedFormGroup, UntypedFormBuilder, FormGroup, FormControl } from '@angular/forms'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxRadioComponent } from '../../radio/radio.component'; describe('IgxRadioGroupDirective', () => { @@ -13,7 +13,6 @@ describe('IgxRadioGroupDirective', () => { imports: [ FormsModule, ReactiveFormsModule, - NoopAnimationsModule, RadioGroupComponent, RadioGroupOnPushComponent, RadioGroupSimpleComponent, @@ -24,7 +23,8 @@ describe('IgxRadioGroupDirective', () => { RadioGroupTestComponent, DynamicRadioGroupComponent, RadioGroupVerticalComponent - ] + ], + providers: [provideIgxNoopAnimations()] }) .compileComponents(); })); diff --git a/projects/igniteui-angular/radio/src/radio/radio.component.spec.ts b/projects/igniteui-angular/radio/src/radio/radio.component.spec.ts index f97a5a4f7ed..ce62518e202 100644 --- a/projects/igniteui-angular/radio/src/radio/radio.component.spec.ts +++ b/projects/igniteui-angular/radio/src/radio/radio.component.spec.ts @@ -2,16 +2,15 @@ import { Component, ViewChild, ViewChildren, inject, ChangeDetectionStrategy } f import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule, NgForm, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxRadioComponent } from './radio.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxRadio', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxRadioComponent, InitRadioComponent, DisabledRadioComponent, @@ -21,7 +20,8 @@ describe('IgxRadio', () => { ReactiveFormComponent, RadioExternalLabelComponent, RadioInvisibleLabelComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/schematics/utils/dependency-handler.ts b/projects/igniteui-angular/schematics/utils/dependency-handler.ts index 36bdb102417..30f4a1356b1 100644 --- a/projects/igniteui-angular/schematics/utils/dependency-handler.ts +++ b/projects/igniteui-angular/schematics/utils/dependency-handler.ts @@ -32,7 +32,6 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [ { name: '@angular/forms', target: PackageTarget.NONE }, { name: '@angular/common', target: PackageTarget.NONE }, { name: '@angular/core', target: PackageTarget.NONE }, - { name: '@angular/animations', target: PackageTarget.NONE }, { name: 'igniteui-webcomponents', target: PackageTarget.NONE }, { name: 'igniteui-grid-lite', target: PackageTarget.NONE }, // igxDevDependencies diff --git a/projects/igniteui-angular/select/src/select/select.component.spec.ts b/projects/igniteui-angular/select/src/select/select.component.spec.ts index 3212df317b0..1fa2f6e4537 100644 --- a/projects/igniteui-angular/select/src/select/select.component.spec.ts +++ b/projects/igniteui-angular/select/src/select/select.component.spec.ts @@ -3,13 +3,12 @@ import { NgStyle } from '@angular/common'; import { TestBed, tick, fakeAsync, waitForAsync, discardPeriodicTasks } from '@angular/core/testing'; import { FormsModule, UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators, ReactiveFormsModule, NgForm, NgControl } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IGX_DROPDOWN_BASE, IgxDropDownItemComponent, ISelectionEventArgs } from '../../../drop-down/src/drop-down/public_api'; import { IgxHintDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../../../input-group/src/public_api'; import { IgxSelectComponent, IgxSelectFooterDirective, IgxSelectHeaderDirective } from './select.component'; import { IgxSelectItemComponent } from './select-item.component'; -import { HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy, AutoPositionStrategy, IgxSelectionAPIService } from 'igniteui-angular/core'; +import { HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy, AutoPositionStrategy, IgxSelectionAPIService, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { IgxButtonDirective } from '../../../directives/src/directives/button/button.directive'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -85,7 +84,6 @@ describe('igxSelect', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxSelectSimpleComponent, IgxSelectGroupsComponent, IgxSelectMiddleComponent, @@ -97,7 +95,8 @@ describe('igxSelect', () => { IgxSelectHeaderFooterComponent, IgxSelectCDRComponent, IgxSelectWithIdComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -2738,8 +2737,8 @@ describe('igxSelect ControlValueAccessor Unit', () => { const mockDocument = jasmine.createSpyObj('DOCUMENT', [], { 'defaultView': { getComputedStyle: () => null }}); TestBed.configureTestingModule({ - imports: [NoopAnimationsModule], providers: [ + provideIgxNoopAnimations(), { provide: ElementRef, useValue: null }, { provide: IgxSelectionAPIService, useValue: mockSelection }, { provide: ChangeDetectorRef, useValue: mockCdr }, diff --git a/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts index 98a3a07a68c..8f21e16a20b 100644 --- a/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts @@ -3,12 +3,11 @@ import { AfterViewInit, ChangeDetectorRef, Component, DOCUMENT, DebugElement, El import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormControl, FormGroup, FormsModule, NgForm, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxSelectionAPIService, PlatformUtil } from 'igniteui-angular/core'; import { IBaseCancelableBrowserEventArgs } from 'igniteui-angular/core'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxInputState, IgxLabelDirective } from '../../../input-group/src/public_api'; -import { AbsoluteScrollStrategy, AutoPositionStrategy, ConnectedPositioningStrategy } from 'igniteui-angular/core'; +import { AbsoluteScrollStrategy, AutoPositionStrategy, ConnectedPositioningStrategy, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { IgxSimpleComboComponent, ISimpleComboSelectionChangedEventArgs, ISimpleComboSelectionChangingEventArgs } from './public_api'; import { IGX_GRID_DIRECTIVES, IgxGridComponent } from 'igniteui-angular/grids/grid'; @@ -522,7 +521,6 @@ describe('IgxSimpleCombo', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReactiveFormsModule, FormsModule, IgxSimpleComboSampleComponent, @@ -530,7 +528,8 @@ describe('IgxSimpleCombo', () => { IgxSimpleComboFormControlRequiredComponent, IgxSimpleComboFormWithFormControlComponent, IgxSimpleComboNgModelComponent, - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -987,14 +986,14 @@ describe('IgxSimpleCombo', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReactiveFormsModule, FormsModule, IgxSimpleComboSampleComponent, IgxComboInContainerTestComponent, IgxComboRemoteDataComponent, ComboModelBindingComponent, - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); it('should bind combo data to array of primitive data', () => { @@ -1155,7 +1154,6 @@ describe('IgxSimpleCombo', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReactiveFormsModule, FormsModule, IgxSimpleComboSampleComponent, @@ -1163,7 +1161,8 @@ describe('IgxSimpleCombo', () => { IgxSimpleComboIconTemplatesComponent, IgxSimpleComboDirtyCheckTestComponent, IgxSimpleComboTabBehaviorTestComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -2334,8 +2333,9 @@ describe('IgxSimpleCombo', () => { expect(document.activeElement).toBe(input.nativeElement); expect(combo.collapsed).toBe(false); - // Simulate outside click by clicking on document body - // This triggers the blur event which is what happens on outside clicks + // Simulate outside click by clicking on document body. + // A real click moves focus away from the input, so blur it as the browser would. + input.nativeElement.blur(); input.triggerEventHandler('blur', {}); document.body.click(); tick(); @@ -2379,11 +2379,11 @@ describe('IgxSimpleCombo', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReactiveFormsModule, FormsModule, IgxSimpleComboInTemplatedFormComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(waitForAsync(() => { @@ -2638,11 +2638,11 @@ describe('IgxSimpleCombo', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReactiveFormsModule, FormsModule, IgxSimpleComboInReactiveFormComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -2967,13 +2967,13 @@ describe('IgxSimpleCombo', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, ReactiveFormsModule, FormsModule, IgxComboRemoteDataComponent, IgxSimpleComboBindingDataAfterInitComponent, IgxComboRemoteDataInReactiveFormComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { @@ -3101,9 +3101,9 @@ describe('IgxSimpleCombo', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxSimpleComboInGridComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(() => { diff --git a/projects/igniteui-angular/slider/src/slider/slider.component.spec.ts b/projects/igniteui-angular/slider/src/slider/slider.component.spec.ts index 27cf56de2a8..b9636df5bd4 100644 --- a/projects/igniteui-angular/slider/src/slider/slider.component.spec.ts +++ b/projects/igniteui-angular/slider/src/slider/slider.component.spec.ts @@ -2,7 +2,7 @@ import { Component, Input, ViewChild, ChangeDetectionStrategy } from '@angular/c import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { IgxSliderType, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IRangeSliderValue, TickLabelsOrientation, TicksOrientation } from './slider.common'; import { IgxSliderComponent } from './slider.component'; @@ -27,7 +27,7 @@ describe('IgxSlider', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, FormsModule, ReactiveFormsModule, + FormsModule, ReactiveFormsModule, SliderInitializeTestComponent, SliderMinMaxComponent, SliderTestComponent, @@ -40,7 +40,8 @@ describe('IgxSlider', () => { SliderTemplateFormComponent, SliderReactiveFormComponent, SliderWithValueAdjustmentComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.spec.ts b/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.spec.ts index 638dc113101..45b7840699b 100644 --- a/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.spec.ts +++ b/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.spec.ts @@ -1,21 +1,19 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxSnackbarComponent } from './snackbar.component'; -import { useAnimation } from '@angular/animations'; -import { HorizontalAlignment, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; -import { slideInLeft, slideInRight } from 'igniteui-angular/animations'; +import { HorizontalAlignment, PositionSettings, VerticalAlignment, provideIgxNoopAnimations } from 'igniteui-angular/core'; +import { resolveAnimation, slideInLeft, slideInRight } from 'igniteui-angular/animations'; import { IgxButtonDirective } from '../../../directives/src/directives/button/button.directive'; describe('IgxSnackbar', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, SnackbarInitializeTestComponent, SnackbarCustomContentComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -161,14 +159,13 @@ describe('IgxSnackbar', () => { })); it('should be able to set custom positionSettings', () => { const defaultPositionSettings = snackbar.positionSettings; - const defaulOpenAnimationParams = {duration: '.35s', easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)', - fromPosition: 'translateY(100%)', toPosition: 'translateY(0)'}; + const defaulOpenAnimationParams = { duration: 350, easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)' }; expect(defaultPositionSettings.horizontalDirection).toBe(-0.5); expect(defaultPositionSettings.verticalDirection).toBe(0); - expect(defaultPositionSettings.openAnimation.options.params).toEqual(defaulOpenAnimationParams); + expect(resolveAnimation(defaultPositionSettings.openAnimation).options).toEqual(jasmine.objectContaining(defaulOpenAnimationParams)); const newPositionSettings: PositionSettings = { - openAnimation: useAnimation(slideInLeft, { params: { duration: '1000ms' } }), - closeAnimation: useAnimation(slideInRight, { params: { duration: '1000ms' } }), + openAnimation: slideInLeft({ duration: 1000 }), + closeAnimation: slideInRight({ duration: 1000 }), horizontalDirection: HorizontalAlignment.Center, verticalDirection: VerticalAlignment.Middle, horizontalStartPoint: HorizontalAlignment.Center, @@ -180,7 +177,7 @@ describe('IgxSnackbar', () => { const customPositionSettings = snackbar.positionSettings; expect(customPositionSettings.horizontalDirection).toBe(-0.5); expect(customPositionSettings.verticalDirection).toBe(-0.5); - expect(customPositionSettings.openAnimation.options.params).toEqual({duration: '1000ms'}); + expect(resolveAnimation(customPositionSettings.openAnimation).options.duration).toEqual(1000); expect(customPositionSettings.minSize).toEqual({height: 100, width: 100}); }); @@ -231,9 +228,9 @@ describe('IgxSnackbar with custom content', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, SnackbarCustomContentComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts b/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts index e13afe8bc3d..1e8251fd455 100644 --- a/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts +++ b/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts @@ -1,4 +1,3 @@ -import { useAnimation } from '@angular/animations'; import { Component, EventEmitter, @@ -126,8 +125,8 @@ export class IgxSnackbarComponent extends IgxNotificationsDirective * ... * @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent; * public newPositionSettings: PositionSettings = { - * openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}), - * closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}), + * openAnimation: slideInTop({ duration: 1000, fromPosition: 'translateY(100%)' }), + * closeAnimation: slideOutBottom({ duration: 1000, fromPosition: 'translateY(0)' }), * horizontalDirection: HorizontalAlignment.Left, * verticalDirection: VerticalAlignment.Middle, * horizontalStartPoint: HorizontalAlignment.Left, @@ -144,10 +143,8 @@ export class IgxSnackbarComponent extends IgxNotificationsDirective private _positionSettings: PositionSettings = { horizontalDirection: HorizontalAlignment.Center, verticalDirection: VerticalAlignment.Bottom, - openAnimation: useAnimation(fadeIn, { params: { duration: '.35s', easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)', - fromPosition: 'translateY(100%)', toPosition: 'translateY(0)'} }), - closeAnimation: useAnimation(fadeOut, { params: { duration: '.2s', easing: 'cubic-bezier(0.4, 0.0, 1, 1)', - fromPosition: 'translateY(0)', toPosition: 'translateY(100%)'} }), + openAnimation: fadeIn({ duration: 350, easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)' }), + closeAnimation: fadeOut({ duration: 200, easing: 'cubic-bezier(0.4, 0.0, 1, 1)' }), }; /** diff --git a/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts b/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts index fa4d2ac5f7e..2bac4fa4f77 100644 --- a/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts @@ -1,12 +1,10 @@ -import { AnimationBuilder } from '@angular/animations'; import { ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { take } from 'rxjs/operators'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxInputDirective, IgxInputGroupComponent } from '../../../input-group/src/public_api'; -import { IgxAngularAnimationService, PlatformUtil } from 'igniteui-angular/core'; +import { IGX_ANIMATION_SERVICE, PlatformUtil, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { IgxStepComponent } from './step/step.component'; import { @@ -81,11 +79,11 @@ describe('Rendering Tests', () => { waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxStepperSampleTestComponent, IgxStepperLinearComponent, IgxStepperIndicatorNoShrinkComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); }) ); @@ -1003,23 +1001,17 @@ describe('Stepper service unit tests', () => { mockElementRef = { nativeElement: mockElement }; mockAnimationService = { - buildAnimation: (_builder: AnimationBuilder) => ({ - animationEnd: { - pipe: () => ({ - subscribe: () => { } - }), - subscribe: () => { } - }, - animationStart: { + build: () => ({ + finished$: { pipe: () => ({ subscribe: () => { } }), subscribe: () => { } }, position: 0, - init: () => { }, - hasStarted: () => true, + started: () => true, play: () => { }, + pause: () => { }, finish: () => { }, reset: () => { }, destroy: () => { } @@ -1039,10 +1031,10 @@ describe('Stepper service unit tests', () => { stepperService = new IgxStepperService(); TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxStepComponent], + imports: [IgxStepComponent], providers: [ { provide: ChangeDetectorRef, useValue: mockCdr }, - { provide: IgxAngularAnimationService, useValue: mockAnimationService }, + { provide: IGX_ANIMATION_SERVICE, useValue: mockAnimationService }, { provide: ElementRef, useValue: mockElementRef }, { provide: IgxStepperService, useValue: stepperService }, { provide: PlatformUtil, useValue: mockPlatform }, diff --git a/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts b/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts index a281e240a4e..a0282846197 100644 --- a/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts +++ b/projects/igniteui-angular/stepper/src/stepper/stepper.component.ts @@ -1,4 +1,3 @@ -import { AnimationReferenceMetadata, useAnimation } from '@angular/animations'; import { NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, @@ -36,7 +35,7 @@ import { IgxStepInvalidIndicatorDirective } from './stepper.directive'; import { IgxStepperService } from './stepper.service'; -import { fadeIn, growVerIn, growVerOut } from 'igniteui-angular/animations'; +import { AnimationInput, fadeIn, growVerIn, growVerOut, resolveAnimation } from 'igniteui-angular/animations'; import { ToggleAnimationSettings } from 'igniteui-angular/expansion-panel'; @@ -476,22 +475,13 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx } private updateVerticalAnimationSettings( - openAnimation: AnimationReferenceMetadata, - closeAnimation: AnimationReferenceMetadata): ToggleAnimationSettings { - const customCloseAnimation = useAnimation(closeAnimation, { - params: { - duration: this.animationDuration + 'ms' - } - }); - const customOpenAnimation = useAnimation(openAnimation, { - params: { - duration: this.animationDuration + 'ms' - } - }); + openAnimation: AnimationInput, + closeAnimation: AnimationInput): ToggleAnimationSettings { + const duration = this.animationDuration; return { - openAnimation: openAnimation ? customOpenAnimation : null!, - closeAnimation: closeAnimation ? customCloseAnimation : null! + openAnimation: openAnimation ? resolveAnimation(openAnimation, { duration }) : null!, + closeAnimation: closeAnimation ? resolveAnimation(closeAnimation, { duration }) : null! }; } diff --git a/projects/igniteui-angular/switch/src/switch/switch.component.spec.ts b/projects/igniteui-angular/switch/src/switch/switch.component.spec.ts index 0d08701e6bb..095aca9ffc9 100644 --- a/projects/igniteui-angular/switch/src/switch/switch.component.spec.ts +++ b/projects/igniteui-angular/switch/src/switch/switch.component.spec.ts @@ -2,16 +2,15 @@ import { Component, ViewChild, inject, ChangeDetectionStrategy } from '@angular/ import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { UntypedFormBuilder, FormsModule, ReactiveFormsModule, Validators, NgForm } from '@angular/forms'; import { By } from '@angular/platform-browser'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxSwitchComponent } from './switch.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('IgxSwitch', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, InitSwitchComponent, SwitchSimpleComponent, SwitchRequiredComponent, @@ -20,7 +19,8 @@ describe('IgxSwitch', () => { SwitchFormComponent, SwitchFormGroupComponent, IgxSwitchComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.spec.ts b/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.spec.ts index c9903732ad4..6b87b593095 100644 --- a/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.spec.ts +++ b/projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.spec.ts @@ -3,11 +3,11 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { IgxTabItemComponent } from './item/tab-item.component'; import { IgxTabsAlignment, IgxTabsComponent } from './tabs.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { RouterTestingModule } from '@angular/router/testing'; import { Router } from '@angular/router'; import { Location } from '@angular/common'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { AddingSelectedTabComponent, TabsContactsComponent, TabsDisabledTestComponent, TabsRoutingDisabledTestComponent, TabsRoutingGuardTestComponent, TabsRoutingTestComponent, TabsRtlComponent, TabsTabsOnlyModeTest1Component, @@ -50,7 +50,6 @@ describe('IgxTabs', () => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, RouterTestingModule.withRoutes(testRoutes), TabsTestHtmlAttributesComponent, TabsTestComponent, @@ -69,7 +68,7 @@ describe('IgxTabs', () => { AddingSelectedTabComponent, TabsRtlComponent ], - providers: [RoutingTestGuard] + providers: [provideIgxNoopAnimations(), RoutingTestGuard] }).compileComponents(); })); diff --git a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts index f353b8e34af..b9284e60d30 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts @@ -2,14 +2,13 @@ import { Component, ViewChild, DebugElement, EventEmitter, QueryList, ElementRef import { TestBed, fakeAsync, tick, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { UntypedFormControl, UntypedFormGroup, FormsModule, NgForm, ReactiveFormsModule, Validators } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxTimePickerComponent, IgxTimePickerValidationFailedEventArgs } from './time-picker.component'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { IgxHintDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../../../input-group/src/public_api'; import { PickerInteractionMode } from '../../../core/src/date-common/types'; -import { PlatformUtil } from 'igniteui-angular/core'; +import { PlatformUtil, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { DatePart } from '../../../core/src/date-common/public_api'; import { IgxDateTimeEditorDirective } from '../../../directives/src/directives/date-time-editor/date-time-editor.directive'; import { IgxItemListDirective, IgxTimeItemDirective } from './time-picker.directives'; @@ -468,10 +467,9 @@ describe('IgxTimePicker', () => { TestBed.configureTestingModule({ imports: [ FormsModule, - NoopAnimationsModule, IgxTimePickerTestComponent ], - providers: [PlatformUtil] + providers: [provideIgxNoopAnimations(), PlatformUtil] }).compileComponents(); })); beforeEach(fakeAsync(() => { @@ -1157,7 +1155,8 @@ describe('IgxTimePicker', () => { let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxTimePickerTestComponent] + imports: [IgxTimePickerTestComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(fakeAsync(() => { @@ -1639,7 +1638,8 @@ describe('IgxTimePicker', () => { let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxTimePickerTestComponent] + imports: [IgxTimePickerTestComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(fakeAsync(() => { @@ -1724,7 +1724,8 @@ describe('IgxTimePicker', () => { let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxTimePickerWithProjectionsComponent] + imports: [IgxTimePickerWithProjectionsComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(fakeAsync(() => { @@ -1825,10 +1826,10 @@ describe('IgxTimePicker', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTimePickerInFormComponent, IgxTimePickerReactiveFormComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); beforeEach(fakeAsync(() => { diff --git a/projects/igniteui-angular/toast/src/toast/toast.component.spec.ts b/projects/igniteui-angular/toast/src/toast/toast.component.spec.ts index 93ed4852521..8c5236d79fe 100644 --- a/projects/igniteui-angular/toast/src/toast/toast.component.spec.ts +++ b/projects/igniteui-angular/toast/src/toast/toast.component.spec.ts @@ -5,11 +5,10 @@ import { flushMicrotasks, fakeAsync, } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxToastComponent } from './toast.component'; -import { HorizontalAlignment, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; +import { HorizontalAlignment, PositionSettings, VerticalAlignment, provideIgxNoopAnimations } from 'igniteui-angular/core'; describe('IgxToast', () => { let fixture: ComponentFixture; @@ -29,7 +28,8 @@ describe('IgxToast', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxToastComponent] + imports: [IgxToastComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/toast/src/toast/toast.component.ts b/projects/igniteui-angular/toast/src/toast/toast.component.ts index 32543596a10..6a26ecbe8c8 100644 --- a/projects/igniteui-angular/toast/src/toast/toast.component.ts +++ b/projects/igniteui-angular/toast/src/toast/toast.component.ts @@ -19,7 +19,6 @@ import { } from 'igniteui-angular/core'; import { IgxNotificationsDirective, IgxNoTypographyDirective } from 'igniteui-angular/directives'; import { ToggleViewEventArgs } from 'igniteui-angular/directives'; -import { useAnimation } from '@angular/animations'; import { fadeIn, fadeOut } from 'igniteui-angular/animations'; let NEXT_ID = 0; @@ -115,8 +114,8 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn * ... * @ViewChild('toast', { static: true }) public toast: IgxToastComponent; * public newPositionSettings: PositionSettings = { - * openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}), - * closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}), + * openAnimation: slideInTop({ duration: 1000, fromPosition: 'translateY(100%)' }), + * closeAnimation: slideOutBottom({ duration: 1000, fromPosition: 'translateY(0)' }), * horizontalDirection: HorizontalAlignment.Left, * verticalDirection: VerticalAlignment.Middle, * horizontalStartPoint: HorizontalAlignment.Left, @@ -132,8 +131,8 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn private _positionSettings: PositionSettings = { horizontalDirection: HorizontalAlignment.Center, verticalDirection: VerticalAlignment.Bottom, - openAnimation: useAnimation(fadeIn), - closeAnimation: useAnimation(fadeOut), + openAnimation: fadeIn, + closeAnimation: fadeOut, }; /** diff --git a/projects/igniteui-angular/tree/src/tree/tree-navigation.spec.ts b/projects/igniteui-angular/tree/src/tree/tree-navigation.spec.ts index 88edbd5b540..f5f6377caec 100644 --- a/projects/igniteui-angular/tree/src/tree/tree-navigation.spec.ts +++ b/projects/igniteui-angular/tree/src/tree/tree-navigation.spec.ts @@ -1,9 +1,9 @@ import { waitForAsync, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { IgxTreeNavigationComponent, IgxTreeScrollComponent, IgxTreeSimpleComponent } from './tree-samples.spec'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { IgxTreeNavigationService } from './tree-navigation.service'; import { ElementRef, EventEmitter } from '@angular/core'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxTreeSelectionService } from './tree-selection.service'; import { TreeTestFunctions } from './tree-functions.spec'; import { IgxTreeService } from './tree.service'; @@ -19,11 +19,11 @@ describe('IgxTree - Navigation #treeView', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeNavigationComponent, IgxTreeScrollComponent, IgxTreeSimpleComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/projects/igniteui-angular/tree/src/tree/tree-selection.spec.ts b/projects/igniteui-angular/tree/src/tree/tree-selection.spec.ts index 7ce9114d3ea..2433e766e6e 100644 --- a/projects/igniteui-angular/tree/src/tree/tree-selection.spec.ts +++ b/projects/igniteui-angular/tree/src/tree/tree-selection.spec.ts @@ -1,7 +1,7 @@ import { TestBed, fakeAsync, waitForAsync } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, QueryList, provideZonelessChangeDetection, signal } from '@angular/core'; +import { provideIgxNoopAnimations } from 'igniteui-angular/core'; import { IgxTreeComponent } from './tree.component'; import { UIInteractions } from '../../../test-utils/ui-interactions.spec'; import { TreeTestFunctions, TREE_NODE_DIV_SELECTION_CHECKBOX_CSS_CLASS } from './tree-functions.spec'; @@ -58,10 +58,10 @@ describe('IgxTree - Selection #treeView', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeSimpleComponent, IgxTreeSelectionSampleComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -735,11 +735,10 @@ describe('IgxTree selection in zoneless change detection #treeView', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeZonelessNodeDeletionComponent, IgxTreeZonelessInitialSelectionComponent ], - providers: [provideZonelessChangeDetection()] + providers: [provideIgxNoopAnimations(), provideZonelessChangeDetection()] }); }); diff --git a/projects/igniteui-angular/tree/src/tree/tree.spec.ts b/projects/igniteui-angular/tree/src/tree/tree.spec.ts index f520928cbce..53fc1c64b28 100644 --- a/projects/igniteui-angular/tree/src/tree/tree.spec.ts +++ b/projects/igniteui-angular/tree/src/tree/tree.spec.ts @@ -1,10 +1,9 @@ import { ChangeDetectorRef, Component, DebugElement, ElementRef, EventEmitter, QueryList, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { AnimationService, IgxAngularAnimationService, TreeResourceStringsEN, changei18n } from 'igniteui-angular/core'; +import { AnimationService, IGX_ANIMATION_SERVICE, TreeResourceStringsEN, changei18n, provideIgxNoopAnimations } from 'igniteui-angular/core'; import { TreeTestFunctions } from './tree-functions.spec'; import { IgxTreeNavigationService } from './tree-navigation.service'; import { IgxTreeNodeComponent } from './tree-node/tree-node.component'; @@ -265,7 +264,7 @@ describe('IgxTree #treeView', () => { nodeExpanded: jasmine.createSpyObj('spy', ['emit']) }); mockCdr = jasmine.createSpyObj('mockCdr', ['detectChanges', 'markForCheck'], {}); - mockAnimationService = jasmine.createSpyObj('mockAB', ['buildAnimation'], {}); + mockAnimationService = jasmine.createSpyObj('mockAB', ['build'], {}); treeService = new IgxTreeService(); TestBed.resetTestingModule(); @@ -276,7 +275,7 @@ describe('IgxTree #treeView', () => { { provide: IgxTreeNavigationService, useValue: mockNavService }, { provide: ElementRef, useValue: mockElementRef }, { provide: ChangeDetectorRef, useValue: mockCdr }, - { provide: IgxAngularAnimationService, useValue: mockAnimationService }, + { provide: IGX_ANIMATION_SERVICE, useValue: mockAnimationService }, { provide: IgxTreeComponent, useValue: mockTree }, { provide: IGX_TREE_COMPONENT, useValue: mockTree }, IgxTreeNodeComponent @@ -294,7 +293,7 @@ describe('IgxTree #treeView', () => { { provide: IgxTreeNavigationService, useValue: mockNavService }, { provide: ElementRef, useValue: mockElementRef }, { provide: ChangeDetectorRef, useValue: mockCdr }, - { provide: IgxAngularAnimationService, useValue: mockAnimationService }, + { provide: IGX_ANIMATION_SERVICE, useValue: mockAnimationService }, { provide: IgxTreeComponent, useValue: mockTree }, { provide: IGX_TREE_COMPONENT, useValue: mockTree }, IgxTreeNodeComponent @@ -520,9 +519,9 @@ describe('IgxTree #treeView', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - NoopAnimationsModule, IgxTreeSampleComponent - ] + ], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); @@ -725,7 +724,8 @@ describe('IgxTree #treeView', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, IgxTreeSampleComponent] + imports: [IgxTreeSampleComponent], + providers: [provideIgxNoopAnimations()] }).compileComponents(); })); diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 02532310839..df4f7b4dc9e 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,7 +1,6 @@ import { HTTP_INTERCEPTORS, provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http'; import { ApplicationConfig } from '@angular/core'; import { TestInterceptorClass } from './interceptor.service'; -import { provideAnimations } from '@angular/platform-browser/animations'; import { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser'; import { provideRouter } from '@angular/router'; import { appRoutes } from './app.routes'; @@ -14,7 +13,6 @@ export const appConfig: ApplicationConfig = { useClass: TestInterceptorClass, multi: true }, - provideAnimations(), provideHttpClient(withInterceptorsFromDi(), withFetch()), provideClientHydration(withNoIncrementalHydration()), provideRouter(appRoutes), diff --git a/src/app/banner/banner.sample.ts b/src/app/banner/banner.sample.ts index d33c3b580fa..b8becfda7bb 100644 --- a/src/app/banner/banner.sample.ts +++ b/src/app/banner/banner.sample.ts @@ -1,5 +1,4 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { useAnimation } from '@angular/animations'; import { IGX_BANNER_DIRECTIVES, IgxIconComponent, IgxRippleDirective, IgxNavbarModule, IgxButtonModule, IgxBannerComponent } from 'igniteui-angular'; import { growVerIn, growVerOut } from 'igniteui-angular/animations'; import { defineComponents, IgcIconButtonComponent, IgcNavbarComponent, IgcBannerComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents'; @@ -37,11 +36,7 @@ export class BannerSampleComponent { @ViewChild('bannerNoSafeConnection', { static: true }) private bannerNoSafeConnection: IgxBannerComponent; - public animationSettings = { openAnimation: useAnimation(growVerIn, { - params: { - duration: '2000ms' - } - }), closeAnimation: useAnimation(growVerOut)}; + public animationSettings = { openAnimation: growVerIn({ duration: 2000 }), closeAnimation: growVerOut }; public toggle() { if (this.bannerNoSafeConnection.collapsed) { this.bannerNoSafeConnection.open(); diff --git a/src/app/overlay/overlay-animation.sample.ts b/src/app/overlay/overlay-animation.sample.ts index 48098a10b60..129de1e2568 100644 --- a/src/app/overlay/overlay-animation.sample.ts +++ b/src/app/overlay/overlay-animation.sample.ts @@ -1,5 +1,5 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { AnimationReferenceMetadata, animation, style, AnimationMetadata, animate } from '@angular/animations'; +import { AnimationReferenceMetadata, animation } from 'igniteui-angular/animations'; import { OverlaySettings, GlobalPositionStrategy, @@ -33,19 +33,17 @@ export class OverlayAnimationSampleComponent { }; public mouseenter(ev) { - const openAnimationMetaData: AnimationMetadata[] = [ - style({ opacity: `0`, transform: `scale(0.5)`, transformOrigin: `50% 50%` }), - animate(`3000ms`, style({ opacity: `1`, transform: `scale(1)`, transformOrigin: `50% 50%` })) - ]; - const openAnimation: AnimationReferenceMetadata = animation(openAnimationMetaData); + const openAnimation: AnimationReferenceMetadata = animation([ + { opacity: 0, transform: 'scale(0.5)', transformOrigin: '50% 50%' }, + { opacity: 1, transform: 'scale(1)', transformOrigin: '50% 50%' } + ], { duration: 3000 }); this._overlaySettings.positionStrategy.settings.openAnimation = openAnimation; this._overlaySettings.closeOnOutsideClick = false; - const closeAnimationMetaData: AnimationMetadata[] = [ - style({ opacity: `1`, transform: `scale(1)`, transformOrigin: `50% 50%` }), - animate(`6000ms`, style({ opacity: `0`, transform: `scale(0.5)`, transformOrigin: `50% 50%` })) - ]; - const closeAnimation: AnimationReferenceMetadata = animation(closeAnimationMetaData); + const closeAnimation: AnimationReferenceMetadata = animation([ + { opacity: 1, transform: 'scale(1)', transformOrigin: '50% 50%' }, + { opacity: 0, transform: 'scale(0.5)', transformOrigin: '50% 50%' } + ], { duration: 6000 }); this._overlaySettings.positionStrategy.settings.closeAnimation = closeAnimation; switch (ev.target.id) { case 'audi': @@ -89,11 +87,10 @@ export class OverlayAnimationSampleComponent { os.positionStrategy.settings.verticalStartPoint = VerticalAlignment.Bottom; os.target = ev.target; - const closeAnimationMetaData: AnimationMetadata[] = [ - style({ opacity: `1`, transform: `scale(1)`, transformOrigin: `50% 50%` }), - animate(`6000ms`, style({ opacity: `0`, transform: `scale(0.5)`, transformOrigin: `50% 50%` })) - ]; - const closeAnimation: AnimationReferenceMetadata = animation(closeAnimationMetaData); + const closeAnimation: AnimationReferenceMetadata = animation([ + { opacity: 1, transform: 'scale(1)', transformOrigin: '50% 50%' }, + { opacity: 0, transform: 'scale(0.5)', transformOrigin: '50% 50%' } + ], { duration: 6000 }); this._overlaySettings.positionStrategy.settings.closeAnimation = closeAnimation; switch (ev.target.id) { case 'audi': diff --git a/src/app/overlay/overlay.sample.ts b/src/app/overlay/overlay.sample.ts index 9f45642e710..d6ed8e89d74 100644 --- a/src/app/overlay/overlay.sample.ts +++ b/src/app/overlay/overlay.sample.ts @@ -28,7 +28,7 @@ import { IgxButtonGroupComponent, IButtonGroupEventArgs } from 'igniteui-angular'; -import { IAnimationParams } from 'igniteui-angular/animations'; +import { resolveAnimation } from 'igniteui-angular/animations'; @Component({ selector: 'overlay-sample', @@ -290,10 +290,9 @@ export class OverlaySampleComponent implements AfterViewInit { this.cdr.detectChanges(); this.onChange2(); this._overlaySettings.target = this.button.nativeElement; - (this._overlaySettings.positionStrategy.settings.openAnimation.options.params as IAnimationParams).duration - = `${this.animationLength}ms`; - (this._overlaySettings.positionStrategy.settings.closeAnimation.options.params as IAnimationParams).duration - = `${this.animationLength}ms`; + const positionSettings = this._overlaySettings.positionStrategy.settings; + positionSettings.openAnimation = resolveAnimation(positionSettings.openAnimation, { duration: this.animationLength }); + positionSettings.closeAnimation = resolveAnimation(positionSettings.closeAnimation, { duration: this.animationLength }); if (!this.hasAnimation) { this._overlaySettings.positionStrategy.settings.openAnimation = null; this._overlaySettings.positionStrategy.settings.closeAnimation = null; diff --git a/src/app/styleguide/animations/animations.sample.ts b/src/app/styleguide/animations/animations.sample.ts index b654f2ce638..41031b5d9e3 100644 --- a/src/app/styleguide/animations/animations.sample.ts +++ b/src/app/styleguide/animations/animations.sample.ts @@ -1,4 +1,3 @@ -import { AnimationReferenceMetadata } from '@angular/animations'; import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxDialogComponent, IgxListComponent, IgxListItemComponent, IgxOverlayService, IgxRippleDirective, IListItemClickEventArgs, @@ -22,7 +21,8 @@ import { slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, - swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd + swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, + AnimationPreset } from 'igniteui-angular/animations'; @Component({ @@ -48,14 +48,14 @@ export class AnimationsSampleComponent { 'pulsate' ]; - public animations: { name: string; animation: AnimationReferenceMetadata }[]; + public animations: { name: string; animation: AnimationPreset }[]; - private fadeAnimations: { name: string; animation: AnimationReferenceMetadata }[] = [ + private fadeAnimations: { name: string; animation: AnimationPreset }[] = [ { name: 'fadeIn', animation: fadeIn }, { name: 'fadeOut', animation: fadeOut }, ]; - private flipAnimations: { name: string; animation: AnimationReferenceMetadata }[] = [ + private flipAnimations: { name: string; animation: AnimationPreset }[] = [ { name: 'flipTop', animation: flipTop }, { name: 'flipRight', animation: flipRight }, { name: 'flipBottom', animation: flipBottom }, @@ -66,12 +66,12 @@ export class AnimationsSampleComponent { { name: 'flipVerBck', animation: flipVerBck } ]; - private growAnimations: { name: string; animation: AnimationReferenceMetadata }[] = [ + private growAnimations: { name: string; animation: AnimationPreset }[] = [ { name: 'growVerIn', animation: growVerIn }, { name: 'growVerOut', animation: growVerOut }, ]; - private rotateAnimations: { name: string; animation: AnimationReferenceMetadata }[] = [ + private rotateAnimations: { name: string; animation: AnimationPreset }[] = [ { name: 'rotateInCenter', animation: rotateInCenter }, { name: 'rotateInTop', animation: rotateInTop }, { name: 'rotateInRight', animation: rotateInRight }, @@ -100,7 +100,7 @@ export class AnimationsSampleComponent { { name: 'rotateOutVer', animation: rotateOutVer } ]; - private scaleAnimations: { name: string; animation: AnimationReferenceMetadata }[] = [ + private scaleAnimations: { name: string; animation: AnimationPreset }[] = [ { name: 'scaleInTop', animation: scaleInTop }, { name: 'scaleInRight', animation: scaleInRight }, { name: 'scaleInBottom', animation: scaleInBottom }, @@ -133,7 +133,7 @@ export class AnimationsSampleComponent { { name: 'scaleOutHorRight', animation: scaleOutHorRight } ]; - private slideAnimations: { name: string; animation: AnimationReferenceMetadata }[] = [ + private slideAnimations: { name: string; animation: AnimationPreset }[] = [ { name: 'slideInTop', animation: slideInTop }, { name: 'slideInRight', animation: slideInRight }, { name: 'slideInBottom', animation: slideInBottom }, @@ -152,7 +152,7 @@ export class AnimationsSampleComponent { { name: 'slideOutTl', animation: slideOutTl } ]; - private swingAnimations: { name: string; animation: AnimationReferenceMetadata }[] = [ + private swingAnimations: { name: string; animation: AnimationPreset }[] = [ { name: 'swingInTopFwd', animation: swingInTopFwd }, { name: 'swingInRightFwd', animation: swingInRightFwd }, { name: 'swingInLeftFwd', animation: swingInLeftFwd }, @@ -171,7 +171,7 @@ export class AnimationsSampleComponent { { name: 'swingOutLeftBck', animation: swingOutLeftBck } ]; - private shakeAnimations: { name: string; animation: AnimationReferenceMetadata }[] = [ + private shakeAnimations: { name: string; animation: AnimationPreset }[] = [ { name: 'shakeHor', animation: shakeHor }, { name: 'shakeVer', animation: shakeVer }, { name: 'shakeTop', animation: shakeTop }, @@ -185,7 +185,7 @@ export class AnimationsSampleComponent { { name: 'shakeTl', animation: shakeTl } ]; - private pulsateAnimations: { name: string; animation: AnimationReferenceMetadata }[] = [ + private pulsateAnimations: { name: string; animation: AnimationPreset }[] = [ { name: 'heartbeat', animation: heartbeat }, { name: 'pulsateFwd', animation: pulsateFwd }, { name: 'pulsateBck', animation: pulsateBck }, @@ -230,10 +230,7 @@ export class AnimationsSampleComponent { } public playAnimation(e: IListItemClickEventArgs): void { - const animation = this.animations[e.item.index].animation; - if (animation.options?.params?.duration && animation.options?.params?.duration !== '1000ms') { - animation.options.params.duration = '1000ms'; - } + const animation = this.animations[e.item.index].animation({ duration: 1000 }); const overlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(); overlaySettings.closeOnOutsideClick = true; overlaySettings.modal = true; diff --git a/src/app/tree/tree.sample.ts b/src/app/tree/tree.sample.ts index c4274b3619f..9bce3f1db1d 100644 --- a/src/app/tree/tree.sample.ts +++ b/src/app/tree/tree.sample.ts @@ -1,4 +1,3 @@ -import { useAnimation } from '@angular/animations'; import { NgTemplateOutlet, AsyncPipe } from '@angular/common'; import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; @@ -238,16 +237,8 @@ export class TreeSampleComponent implements AfterViewInit { public get animationSettings() { return { - openAnimation: useAnimation(growVerIn, { - params: { - duration: `${this.animationDuration}ms` - } - }), - closeAnimation: useAnimation(growVerOut, { - params: { - duration: `${this.animationDuration}ms` - } - }) + openAnimation: growVerIn({ duration: this.animationDuration }), + closeAnimation: growVerOut({ duration: this.animationDuration }) }; }