refactor(core)!: replace TUI_ANIMATIONS_DURATION with `TUI_ANIMATIO…

…NS_SPEED` (#6542)
taiga-family · Jan 25, 2024 · 9b6732a · 9b6732a
1 parent 75f9762
commit 9b6732a
Show file tree

Hide file tree

Showing 30 changed files with 141 additions and 150 deletions.
diff --git a/projects/addon-charts/components/pie-chart/pie-chart.directive.ts b/projects/addon-charts/components/pie-chart/pie-chart.directive.ts
@@ -2,7 +2,7 @@ import {Directive, ElementRef, Inject, Input, NgZone, Self} from '@angular/core'
 import {ANIMATION_FRAME, PERFORMANCE} from '@ng-web-apis/common';
 import {tuiDescribeSector} from '@taiga-ui/addon-charts/utils';
 import {tuiClamp, TuiDestroyService, tuiEaseInOutQuad, tuiZonefree} from '@taiga-ui/cdk';
-import {TUI_ANIMATIONS_DURATION} from '@taiga-ui/core';
+import {TUI_ANIMATIONS_SPEED, tuiGetDuration} from '@taiga-ui/core';
 import {
     BehaviorSubject,
     map,
@@ -31,7 +31,7 @@ export class TuiPieChartDirective {
         @Self() @Inject(TuiDestroyService) destroy$: Observable<unknown>,
         @Inject(PERFORMANCE) performance: Performance,
         @Inject(ANIMATION_FRAME) animationFrame$: Observable<number>,
-        @Inject(TUI_ANIMATIONS_DURATION) duration: number,
+        @Inject(TUI_ANIMATIONS_SPEED) speed: number,
     ) {
         this.sector$
             .pipe(
@@ -44,7 +44,7 @@ export class TuiPieChartDirective {
                     return animationFrame$.pipe(
                         map(timestamp =>
                             tuiEaseInOutQuad(
-                                tuiClamp((timestamp - now) / duration, 0, 1),
+                                tuiClamp((timestamp - now) / tuiGetDuration(speed), 0, 1),
                             ),
                         ),
                         takeWhile(progress => progress < 1, true),

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts
@@ -29,11 +29,12 @@ import {
     TuiTypedMapper,
 } from '@taiga-ui/cdk';
 import {
-    TUI_ANIMATIONS_DURATION,
+    TUI_ANIMATIONS_SPEED,
     TUI_CLOSE_WORD,
     TUI_COMMON_ICONS,
     TUI_SHORT_WEEK_DAYS,
     TuiCommonIcons,
+    tuiGetDuration,
 } from '@taiga-ui/core';
 import {
     TUI_CANCEL_WORD,
@@ -140,7 +141,7 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
         readonly unorderedWeekDays$: TuiInjectionTokenType<typeof TUI_SHORT_WEEK_DAYS>,
         @Inject(TUI_CHOOSE_DAY_OR_RANGE_TEXTS)
         readonly chooseDayOrRangeTexts$: Observable<[string, string, string]>,
-        @Inject(TUI_ANIMATIONS_DURATION) private readonly duration: number,
+        @Inject(TUI_ANIMATIONS_SPEED) private readonly speed: number,
         @Inject(NgZone) private readonly ngZone: NgZone,
     ) {
         valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
@@ -304,7 +305,7 @@ export class TuiMobileCalendarComponent implements AfterViewInit {
 
         this.monthsScrollRef?.scrolledIndexChange
             .pipe(
-                delay(this.duration),
+                delay(tuiGetDuration(this.speed)),
                 this.lateInit(),
                 take(1),
                 takeUntil(this.destroy$),

diff --git a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts
@@ -12,10 +12,11 @@ import {
 } from '@angular/core';
 import {EMPTY_QUERY, TuiDialog, tuiPure} from '@taiga-ui/cdk';
 import {
-    TUI_ANIMATIONS_DURATION,
+    TUI_ANIMATIONS_SPEED,
     TUI_CLOSE_WORD,
     TUI_COMMON_ICONS,
     TuiCommonIcons,
+    tuiGetDuration,
     tuiSlideInTop,
 } from '@taiga-ui/core';
 import {shouldCall} from '@tinkoff/ng-event-plugins';
@@ -54,15 +55,15 @@ export class TuiSheetDialogComponent<I> implements AfterViewInit {
         value: '',
         params: {
             start: '100vh',
-            duration: this.duration,
+            duration: tuiGetDuration(this.speed),
         },
     };
 
     stuck$ = new BehaviorSubject(false);
 
     constructor(
         @Inject(ElementRef) private readonly el: ElementRef<HTMLElement>,
-        @Inject(TUI_ANIMATIONS_DURATION) private readonly duration: number,
+        @Inject(TUI_ANIMATIONS_SPEED) private readonly speed: number,
         @Inject(TUI_COMMON_ICONS) readonly icons: TuiCommonIcons,
         @Inject(TUI_CLOSE_WORD) readonly closeWord$: Observable<string>,
         @Inject(POLYMORPHEUS_CONTEXT)

diff --git a/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.component.ts b/projects/addon-mobile/components/sheet/components/sheets-host/sheets-host.component.ts
@@ -1,14 +1,19 @@
-import {AnimationOptions} from '@angular/animations';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
     Inject,
+    inject,
     OnInit,
     Self,
 } from '@angular/core';
 import {TUI_WINDOW_HEIGHT, TuiDestroyService} from '@taiga-ui/cdk';
-import {TUI_ANIMATION_OPTIONS, tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core';
+import {
+    TUI_ANIMATIONS_SPEED,
+    tuiFadeIn,
+    tuiSlideInTop,
+    tuiToAnimationOptions,
+} from '@taiga-ui/core';
 import {Observable, takeUntil} from 'rxjs';
 
 import {TuiSheet} from '../../sheet';
@@ -25,8 +30,9 @@ import {TuiSheetService} from '../../sheet.service';
 export class TuiSheetsHostComponent implements OnInit {
     sheets: ReadonlyArray<TuiSheet<any>> = [];
 
+    readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
+
     constructor(
-        @Inject(TUI_ANIMATION_OPTIONS) readonly options: AnimationOptions,
         @Inject(TuiSheetService) private readonly service: TuiSheetService,
         @Inject(TUI_WINDOW_HEIGHT) readonly height$: Observable<number>,
         @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable<void>,

diff --git a/projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts b/projects/addon-mobile/components/tab-bar/tab-bar-item.component.ts
@@ -1,6 +1,5 @@
-import {AnimationOptions} from '@angular/animations';
-import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
-import {TUI_ANIMATION_OPTIONS, tuiScaleIn} from '@taiga-ui/core';
+import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
+import {TUI_ANIMATIONS_SPEED, tuiScaleIn, tuiToAnimationOptions} from '@taiga-ui/core';
 
 @Component({
     selector: 'button[tuiTabBarItem], a[tuiTabBarItem]',
@@ -16,7 +15,7 @@ export class TuiTabBarItemComponent {
     @Input()
     badge?: number | null = null;
 
-    constructor(@Inject(TUI_ANIMATION_OPTIONS) readonly animation: AnimationOptions) {}
+    readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
 
     format(value: number): string {
         return value > 999 ? '999+' : String(value);

diff --git a/projects/addon-mobile/components/tab-bar/tab-bar-item.template.html b/projects/addon-mobile/components/tab-bar/tab-bar-item.template.html
@@ -6,7 +6,7 @@
     <span
         *ngIf="badge as value"
         class="t-badge"
-        [@tuiScaleIn]="animation"
+        [@tuiScaleIn]="options"
     >
         {{ format(value) }}
     </span>

diff --git a/projects/addon-mobile/directives/sidebar/sidebar.component.ts b/projects/addon-mobile/directives/sidebar/sidebar.component.ts
@@ -4,13 +4,13 @@ import {
     Component,
     DoCheck,
     HostBinding,
-    Inject,
+    inject,
 } from '@angular/core';
 import {
-    TUI_ANIMATION_OPTIONS,
-    TuiAnimationOptions,
+    TUI_ANIMATIONS_SPEED,
     TuiHorizontalDirection,
     tuiSlideIn,
+    tuiToAnimationOptions,
 } from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
@@ -24,23 +24,13 @@ import {TuiSidebarDirective} from './sidebar.directive';
     animations: [tuiSlideIn],
 })
 export class TuiSidebarComponent implements DoCheck {
-    private readonly left = {
-        ...this.options,
-        value: 'left',
-    } as const;
-
-    private readonly right = {
-        ...this.options,
-        value: 'right',
-    } as const;
-
-    constructor(
-        @Inject(TUI_ANIMATION_OPTIONS) private readonly options: AnimationOptions,
-        @Inject(TuiSidebarDirective) private readonly directive: TuiSidebarDirective,
-    ) {}
+    private readonly directive = inject(TuiSidebarDirective);
+    private readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
+    private readonly left = {...this.options, value: 'left'};
+    private readonly right = {...this.options, value: 'right'};
 
     @HostBinding('@tuiSlideIn')
-    get animation(): TuiAnimationOptions {
+    get animation(): AnimationOptions {
         return this.direction === 'left' ? this.left : this.right;
     }
 

diff --git a/projects/addon-tablebars/components/table-bars-host/table-bars-host.component.ts b/projects/addon-tablebars/components/table-bars-host/table-bars-host.component.ts
@@ -1,9 +1,8 @@
-import {AnimationOptions} from '@angular/animations';
-import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Inject, inject} from '@angular/core';
 import {WINDOW} from '@ng-web-apis/common';
 import {TUI_PARENT_ANIMATION, TuiContext} from '@taiga-ui/cdk';
 import {
-    TUI_ANIMATION_OPTIONS,
+    TUI_ANIMATIONS_SPEED,
     TUI_CLOSE_WORD,
     TUI_COMMON_ICONS,
     TUI_MEDIA,
@@ -12,6 +11,7 @@ import {
     tuiIsMobile,
     TuiMedia,
     tuiSlideInTop,
+    tuiToAnimationOptions,
 } from '@taiga-ui/core';
 import {Observable} from 'rxjs';
 
@@ -27,11 +27,12 @@ import {TuiTableBarsService} from '../../services/table-bars.service';
     animations: [tuiSlideInTop, TUI_PARENT_ANIMATION],
 })
 export class TuiTableBarsHostComponent {
+    readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
+
     constructor(
         @Inject(TuiTableBarsService) readonly service: TuiTableBarsService,
         @Inject(TUI_CLOSE_WORD) readonly closeWord$: Observable<string>,
         @Inject(TUI_COMMON_ICONS) readonly icons: TuiCommonIcons,
-        @Inject(TUI_ANIMATION_OPTIONS) readonly animation: AnimationOptions,
         @Inject(TUI_MEDIA) private readonly media: TuiMedia,
         @Inject(WINDOW) private readonly win: Window,
     ) {}

diff --git a/projects/addon-tablebars/components/table-bars-host/table-bars-host.template.html b/projects/addon-tablebars/components/table-bars-host/table-bars-host.template.html
@@ -6,7 +6,7 @@
     <div
         automation-id="tui-table-bar__bar"
         class="t-bar"
-        [@tuiSlideInTop]="animation"
+        [@tuiSlideInTop]="options"
         [class.t-bar_light]="item.mode === 'onDark'"
     >
         <div

diff --git a/projects/core/components/alert/alert.component.ts b/projects/core/components/alert/alert.component.ts
@@ -1,16 +1,17 @@
-import {AnimationOptions} from '@angular/animations';
 import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
     Inject,
+    inject,
     OnInit,
     Self,
 } from '@angular/core';
 import {TuiDestroyService, TuiDialog, tuiIsNumber} from '@taiga-ui/cdk';
 import {tuiFadeIn, tuiHeightCollapse, tuiSlideIn} from '@taiga-ui/core/animations';
 import {TuiAlertOptions} from '@taiga-ui/core/interfaces';
-import {TUI_ANIMATION_OPTIONS} from '@taiga-ui/core/tokens';
+import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';
+import {tuiToAnimationOptions} from '@taiga-ui/core/utils';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 import {fromEvent, repeatWhen, takeUntil, timer} from 'rxjs';
 
@@ -38,21 +39,16 @@ export class TuiAlertComponent<O, I> implements OnInit {
             ? this.item.autoClose(this.item.status)
             : this.item.autoClose;
 
+    readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
+
     readonly animation = this.position.endsWith('auto')
-        ? {
-              ...this.options,
-              value: 'right',
-          }
-        : {
-              ...this.options,
-              value: 'left',
-          };
+        ? {...this.options, value: 'right'}
+        : {...this.options, value: 'left'};
 
     constructor(
         @Inject(ElementRef) private readonly el: ElementRef<HTMLElement>,
         @Self() @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
         @Inject(TUI_ALERT_POSITION) readonly position: string,
-        @Inject(TUI_ANIMATION_OPTIONS) readonly options: AnimationOptions,
         @Inject(POLYMORPHEUS_CONTEXT) readonly item: TuiDialog<TuiAlertOptions<I>, O>,
     ) {}
 

diff --git a/projects/core/components/dialog/dialog.component.ts b/projects/core/components/dialog/dialog.component.ts
@@ -1,3 +1,4 @@
+import {AnimationOptions} from '@angular/animations';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -12,14 +13,15 @@ import {
     TuiDialog,
 } from '@taiga-ui/cdk';
 import {tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core/animations';
-import {TuiAnimationOptions, TuiDialogOptions} from '@taiga-ui/core/interfaces';
+import {TuiDialogOptions} from '@taiga-ui/core/interfaces';
 import {
-    TUI_ANIMATIONS_DURATION,
+    TUI_ANIMATIONS_SPEED,
     TUI_CLOSE_WORD,
     TUI_COMMON_ICONS,
     TuiCommonIcons,
 } from '@taiga-ui/core/tokens';
 import {TuiDialogSize} from '@taiga-ui/core/types';
+import {tuiGetDuration} from '@taiga-ui/core/utils';
 import {POLYMORPHEUS_CONTEXT, PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {
     filter,
@@ -60,22 +62,22 @@ export class TuiDialogComponent<O, I> {
         value: '',
         params: {
             start: '40px',
-            duration: this.duration,
+            duration: tuiGetDuration(this.speed),
         },
     } as const;
 
     private readonly fullscreenAnimation = {
         value: '',
         params: {
             start: '100vh',
-            duration: this.duration,
+            duration: tuiGetDuration(this.speed),
         },
     } as const;
 
     readonly close$ = new Subject<void>();
 
     constructor(
-        @Inject(TUI_ANIMATIONS_DURATION) private readonly duration: number,
+        @Inject(TUI_ANIMATIONS_SPEED) private readonly speed: number,
         @Inject(TUI_IS_MOBILE) private readonly isMobile: boolean,
         @Inject(POLYMORPHEUS_CONTEXT) readonly context: TuiDialog<TuiDialogOptions<I>, O>,
         @Inject(TuiDestroyService) @Self() destroy$: Observable<void>,
@@ -107,7 +109,7 @@ export class TuiDialogComponent<O, I> {
 
     @HostBinding('@tuiSlideInTop')
     @HostBinding('@tuiFadeIn')
-    get slideInTop(): TuiAnimationOptions {
+    get slideInTop(): AnimationOptions {
         return this.fullscreen || this.isMobile
             ? this.fullscreenAnimation
             : this.animation;

diff --git a/projects/core/components/error/error.component.ts b/projects/core/components/error/error.component.ts
@@ -1,20 +1,21 @@
-import {AnimationOptions} from '@angular/animations';
 import {
     ChangeDetectionStrategy,
     Component,
     HostListener,
     Inject,
+    inject,
     Input,
 } from '@angular/core';
 import {tuiIsString, TuiValidationError} from '@taiga-ui/cdk';
 import {tuiFadeIn, tuiHeightCollapse} from '@taiga-ui/core/animations';
 import {MODE_PROVIDER} from '@taiga-ui/core/providers';
 import {
-    TUI_ANIMATION_OPTIONS,
+    TUI_ANIMATIONS_SPEED,
     TUI_DEFAULT_ERROR_MESSAGE,
     TUI_MODE,
 } from '@taiga-ui/core/tokens';
 import {TuiBrightness} from '@taiga-ui/core/types';
+import {tuiToAnimationOptions} from '@taiga-ui/core/utils';
 import {Observable} from 'rxjs';
 
 @Component({
@@ -31,12 +32,13 @@ export class TuiErrorComponent {
         this.error = tuiIsString(error) ? new TuiValidationError(error) : error;
     }
 
+    readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
+
     error: TuiValidationError | null = null;
 
     visible = true;
 
     constructor(
-        @Inject(TUI_ANIMATION_OPTIONS) readonly animation: AnimationOptions,
         @Inject(TUI_MODE) readonly mode$: Observable<TuiBrightness | null>,
         @Inject(TUI_DEFAULT_ERROR_MESSAGE)
         readonly defaultErrorMessage$: Observable<string>,

diff --git a/projects/core/components/error/error.template.html b/projects/core/components/error/error.template.html
@@ -2,8 +2,8 @@
     *ngIf="error && visible"
     automation-id="tui-error__text"
     class="t-message-text"
-    [@tuiFadeIn]="animation"
-    [@tuiHeightCollapse]="animation"
+    [@tuiFadeIn]="options"
+    [@tuiHeightCollapse]="options"
     [class.t-message-text_light]="(mode$ | async) === 'onDark'"
 >
     <ng-container