From 4067bfe4455e246f26a410fbade31ebb33c04050 Mon Sep 17 00:00:00 2001 From: waterplea Date: Wed, 24 Jan 2024 19:19:01 +0400 Subject: [PATCH] refactor(core)!: replace `TUI_ANIMATIONS_DURATION` with `TUI_ANIMATIONS_SPEED` --- .../pie-chart/pie-chart.directive.ts | 6 ++--- .../mobile-calendar.component.ts | 7 +++--- .../sheet-dialog/sheet-dialog.component.ts | 7 +++--- .../sheets-host/sheets-host.component.ts | 12 +++++++--- .../tab-bar/tab-bar-item.component.ts | 7 +++--- .../tab-bar/tab-bar-item.template.html | 2 +- .../directives/sidebar/sidebar.component.ts | 24 ++++++------------- .../table-bars-host.component.ts | 9 +++---- .../table-bars-host.template.html | 2 +- .../core/components/alert/alert.component.ts | 18 ++++++-------- .../components/dialog/dialog.component.ts | 9 +++---- .../core/components/error/error.component.ts | 8 ++++--- .../core/components/error/error.template.html | 4 ++-- .../core/components/root/root.component.ts | 11 ++++----- .../scroll-controls.component.ts | 7 +++--- .../scroll-controls.template.html | 4 ++-- .../directives/dropdown/dropdown.component.ts | 5 ++-- .../core/directives/hint/hint.component.ts | 11 +++++---- projects/core/tokens/animation-options.ts | 15 ------------ projects/core/tokens/animations-duration.ts | 13 ---------- projects/core/tokens/animations-speed.ts | 11 +++++++++ projects/core/tokens/index.ts | 3 +-- projects/core/utils/miscellaneous/index.ts | 1 + .../miscellaneous/to-animation-options.ts | 16 +++++++++++++ .../badge-notification.component.ts | 21 ++++++---------- .../pdf-viewer/pdf-viewer.component.ts | 19 ++++++++++----- .../components/push/push-alert.component.ts | 19 +++++++-------- .../components/stepper/stepper.component.ts | 6 ++--- 28 files changed, 136 insertions(+), 141 deletions(-) delete mode 100644 projects/core/tokens/animation-options.ts delete mode 100644 projects/core/tokens/animations-duration.ts create mode 100644 projects/core/tokens/animations-speed.ts create mode 100644 projects/core/utils/miscellaneous/to-animation-options.ts diff --git a/projects/addon-charts/components/pie-chart/pie-chart.directive.ts b/projects/addon-charts/components/pie-chart/pie-chart.directive.ts index 05bf8e1343a4d..6f7e3ed0befbe 100644 --- 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, @Inject(PERFORMANCE) performance: Performance, @Inject(ANIMATION_FRAME) animationFrame$: Observable, - @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 index b56256901e4b1..d6153acbeb719 100644 --- 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, @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 index 2b2991a8524ea..423d1d47e9ff7 100644 --- 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,7 +55,7 @@ export class TuiSheetDialogComponent implements AfterViewInit { value: '', params: { start: '100vh', - duration: this.duration, + duration: tuiGetDuration(this.speed), }, }; @@ -62,7 +63,7 @@ export class TuiSheetDialogComponent implements AfterViewInit { constructor( @Inject(ElementRef) private readonly el: ElementRef, - @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, @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 index d67ce4ac60cce..e209635d9029a 100644 --- 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> = []; + 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, @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable, 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 index d95695d2880f5..a062cb25a7a03 100644 --- 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 index 9b363fcf927bf..20f9a62f246e6 100644 --- 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 @@ {{ format(value) }} diff --git a/projects/addon-mobile/directives/sidebar/sidebar.component.ts b/projects/addon-mobile/directives/sidebar/sidebar.component.ts index 28bf2453049e8..e3e87b8ddec77 100644 --- a/projects/addon-mobile/directives/sidebar/sidebar.component.ts +++ b/projects/addon-mobile/directives/sidebar/sidebar.component.ts @@ -1,16 +1,16 @@ -import {AnimationOptions} from '@angular/animations'; import { ChangeDetectionStrategy, Component, DoCheck, HostBinding, - Inject, + inject, } from '@angular/core'; import { - TUI_ANIMATION_OPTIONS, + TUI_ANIMATIONS_SPEED, TuiAnimationOptions, TuiHorizontalDirection, tuiSlideIn, + tuiToAnimationOptions, } from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @@ -24,20 +24,10 @@ 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 { 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 index 97b0e6bf4ed7f..c91021f4adc46 100644 --- 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, @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 index 43dc359b4f471..2214ecbd5d8d0 100644 --- 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 @@
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, @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, O>, ) {} diff --git a/projects/core/components/dialog/dialog.component.ts b/projects/core/components/dialog/dialog.component.ts index 2521a36e4cfb3..daf4785e2c771 100644 --- a/projects/core/components/dialog/dialog.component.ts +++ b/projects/core/components/dialog/dialog.component.ts @@ -14,12 +14,13 @@ import { import {tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core/animations'; import {TuiAnimationOptions, 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,7 +61,7 @@ export class TuiDialogComponent { value: '', params: { start: '40px', - duration: this.duration, + duration: tuiGetDuration(this.speed), }, } as const; @@ -68,14 +69,14 @@ export class TuiDialogComponent { value: '', params: { start: '100vh', - duration: this.duration, + duration: tuiGetDuration(this.speed), }, } as const; readonly close$ = new Subject(); 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, O>, @Inject(TuiDestroyService) @Self() destroy$: Observable, diff --git a/projects/core/components/error/error.component.ts b/projects/core/components/error/error.component.ts index b409108d80261..72142f9684451 100644 --- 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, @Inject(TUI_DEFAULT_ERROR_MESSAGE) readonly defaultErrorMessage$: Observable, diff --git a/projects/core/components/error/error.template.html b/projects/core/components/error/error.template.html index 4333f3dca1c4b..3beb93b4202f5 100644 --- 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'" > breakpoint === 'mobile'), ); @@ -53,7 +53,6 @@ export class TuiRootComponent { constructor( @Inject(TUI_REDUCED_MOTION) readonly reducedMotion: boolean, - @Inject(TUI_ANIMATIONS_DURATION) readonly duration: number, @Inject(TUI_DIALOGS) readonly dialogs: ReadonlyArray>, @Inject(TUI_IS_MOBILE) private readonly isMobile: boolean, diff --git a/projects/core/components/scroll-controls/scroll-controls.component.ts b/projects/core/components/scroll-controls/scroll-controls.component.ts index 5b2ec6c610e76..b416f677d1f76 100644 --- a/projects/core/components/scroll-controls/scroll-controls.component.ts +++ b/projects/core/components/scroll-controls/scroll-controls.component.ts @@ -1,17 +1,18 @@ -import {AnimationOptions} from '@angular/animations'; import { ChangeDetectionStrategy, Component, ElementRef, Inject, + inject, NgZone, } from '@angular/core'; import {ANIMATION_FRAME} from '@ng-web-apis/common'; import {TUI_SCROLL_REF, tuiZoneOptimized} from '@taiga-ui/cdk'; import {tuiFadeIn} from '@taiga-ui/core/animations'; import {MODE_PROVIDER} from '@taiga-ui/core/providers'; -import {TUI_ANIMATION_OPTIONS, TUI_MODE} from '@taiga-ui/core/tokens'; +import {TUI_ANIMATIONS_SPEED, TUI_MODE} from '@taiga-ui/core/tokens'; import {TuiBrightness} from '@taiga-ui/core/types'; +import {tuiToAnimationOptions} from '@taiga-ui/core/utils'; import {distinctUntilChanged, map, Observable, startWith, throttleTime} from 'rxjs'; @Component({ @@ -26,6 +27,7 @@ import {distinctUntilChanged, map, Observable, startWith, throttleTime} from 'rx animations: [tuiFadeIn], }) export class TuiScrollControlsComponent { + readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED)); readonly refresh$ = this.animationFrame$.pipe( throttleTime(300), map(() => this.scrollbars), @@ -35,7 +37,6 @@ export class TuiScrollControlsComponent { ); constructor( - @Inject(TUI_ANIMATION_OPTIONS) readonly animation: AnimationOptions, @Inject(NgZone) private readonly zone: NgZone, @Inject(TUI_SCROLL_REF) private readonly scrollRef: ElementRef, @Inject(ANIMATION_FRAME) private readonly animationFrame$: Observable, diff --git a/projects/core/components/scroll-controls/scroll-controls.template.html b/projects/core/components/scroll-controls/scroll-controls.template.html index 08491f57bbce7..bb3e20a6f45c3 100644 --- a/projects/core/components/scroll-controls/scroll-controls.template.html +++ b/projects/core/components/scroll-controls/scroll-controls.template.html @@ -3,7 +3,7 @@ *ngIf="bars[0]" tuiScrollbarWrapper class="t-bar t-bar_vertical" - [@tuiFadeIn]="animation" + [@tuiFadeIn]="options" [class.t-bar_has-horizontal]="bars[1]" >
= inject(TUI_MODE); - readonly animation = inject(TUI_ANIMATION_OPTIONS); + readonly animation = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED)); readonly options = inject(TUI_DROPDOWN_OPTIONS); readonly directive = inject(TuiDropdownDirective); readonly context = inject(TUI_DROPDOWN_CONTEXT, {optional: true}); diff --git a/projects/core/directives/hint/hint.component.ts b/projects/core/directives/hint/hint.component.ts index dbbc4867bb3a8..0f888dc1f8cba 100644 --- a/projects/core/directives/hint/hint.component.ts +++ b/projects/core/directives/hint/hint.component.ts @@ -1,4 +1,3 @@ -import {AnimationOptions} from '@angular/animations'; import { ChangeDetectionStrategy, Component, @@ -6,6 +5,7 @@ import { HostBinding, HostListener, Inject, + inject, Optional, Self, } from '@angular/core'; @@ -27,9 +27,9 @@ import {tuiFadeIn} from '@taiga-ui/core/animations'; import {TuiModeDirective} from '@taiga-ui/core/directives/mode'; import {TuiPortalItem} from '@taiga-ui/core/interfaces'; import {TuiPositionService, TuiVisualViewportService} from '@taiga-ui/core/services'; -import {TUI_ANIMATION_OPTIONS, TUI_VIEWPORT} from '@taiga-ui/core/tokens'; +import {TUI_ANIMATIONS_SPEED, TUI_VIEWPORT} from '@taiga-ui/core/tokens'; import {TuiPoint} from '@taiga-ui/core/types'; -import {tuiIsObscured} from '@taiga-ui/core/utils'; +import {tuiIsObscured, tuiToAnimationOptions} from '@taiga-ui/core/utils'; import {POLYMORPHEUS_CONTEXT, PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {map, Observable, takeUntil} from 'rxjs'; @@ -62,7 +62,7 @@ export const TUI_HINT_PROVIDERS = [ providers: TUI_HINT_PROVIDERS, animations: [tuiFadeIn], host: { - '[@tuiFadeIn]': 'animation', + '[@tuiFadeIn]': 'options', '[class._untouchable]': 'pointer', }, }) @@ -70,11 +70,12 @@ export class TuiHintComponent { @HostBinding('attr.data-appearance') readonly appearance = this.polymorpheus.$implicit.appearance || this.mode?.mode; + readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED)); + constructor( @Inject(TuiHoveredService) hovered$: Observable, @Inject(TuiPositionService) position$: Observable, @Self() @Inject(TuiDestroyService) destroy$: Observable, - @Inject(TUI_ANIMATION_OPTIONS) readonly animation: AnimationOptions, @Optional() @Inject(TuiHintPointerDirective) readonly pointer: unknown, @Inject(TuiRectAccessor) protected readonly accessor: TuiRectAccessor, @Inject(ElementRef) private readonly el: ElementRef, diff --git a/projects/core/tokens/animation-options.ts b/projects/core/tokens/animation-options.ts deleted file mode 100644 index 8faf9303675cf..0000000000000 --- a/projects/core/tokens/animation-options.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {AnimationOptions} from '@angular/animations'; -import {inject} from '@angular/core'; -import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk'; - -import {TUI_ANIMATIONS_DURATION} from './animations-duration'; - -/** - * Options for Taiga UI animations - */ -export const TUI_ANIMATION_OPTIONS = tuiCreateTokenFromFactory(() => ({ - value: '', - params: { - duration: inject(TUI_ANIMATIONS_DURATION), - }, -})); diff --git a/projects/core/tokens/animations-duration.ts b/projects/core/tokens/animations-duration.ts deleted file mode 100644 index 6f8cd3e20bf1b..0000000000000 --- a/projects/core/tokens/animations-duration.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {inject} from '@angular/core'; -import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk'; - -import {TUI_REDUCED_MOTION} from './reduced-motion'; - -export const TUI_ANIMATIONS_DEFAULT_DURATION = 300; - -/** - * Duration of all Taiga UI animations in ms - */ -export const TUI_ANIMATIONS_DURATION = tuiCreateTokenFromFactory(() => - inject(TUI_REDUCED_MOTION) ? 0 : TUI_ANIMATIONS_DEFAULT_DURATION, -); diff --git a/projects/core/tokens/animations-speed.ts b/projects/core/tokens/animations-speed.ts new file mode 100644 index 0000000000000..c785f662263f8 --- /dev/null +++ b/projects/core/tokens/animations-speed.ts @@ -0,0 +1,11 @@ +import {inject} from '@angular/core'; +import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk'; + +import {TUI_REDUCED_MOTION} from './reduced-motion'; + +/** + * Speed of all Taiga UI animations. 1 equals 300ms. + */ +export const TUI_ANIMATIONS_SPEED = tuiCreateTokenFromFactory(() => + inject(TUI_REDUCED_MOTION) ? 0 : 1, +); diff --git a/projects/core/tokens/index.ts b/projects/core/tokens/index.ts index 855377fbbdd8e..b2b2a0c7d592d 100644 --- a/projects/core/tokens/index.ts +++ b/projects/core/tokens/index.ts @@ -1,5 +1,4 @@ -export * from './animation-options'; -export * from './animations-duration'; +export * from './animations-speed'; export * from './assert-enabled'; export * from './common-icon'; export * from './data-list-accessor'; diff --git a/projects/core/utils/miscellaneous/index.ts b/projects/core/utils/miscellaneous/index.ts index d644ce7033930..610f37bac890a 100644 --- a/projects/core/utils/miscellaneous/index.ts +++ b/projects/core/utils/miscellaneous/index.ts @@ -5,3 +5,4 @@ export * from './is-obscured'; export * from './is-presumed-html-string'; export * from './override-options'; export * from './size-bigger'; +export * from './to-animation-options'; diff --git a/projects/core/utils/miscellaneous/to-animation-options.ts b/projects/core/utils/miscellaneous/to-animation-options.ts new file mode 100644 index 0000000000000..af587248c83d8 --- /dev/null +++ b/projects/core/utils/miscellaneous/to-animation-options.ts @@ -0,0 +1,16 @@ +import {TuiAnimationOptions} from '@taiga-ui/core/interfaces'; + +const TUI_ANIMATIONS_DEFAULT_DURATION = 300; + +export function tuiToAnimationOptions(speed: number): TuiAnimationOptions { + return { + value: '', + params: { + duration: tuiGetDuration(speed), + }, + }; +} + +export function tuiGetDuration(speed: number): number { + return TUI_ANIMATIONS_DEFAULT_DURATION / speed || 0; +} diff --git a/projects/experimental/components/badge-notification/badge-notification.component.ts b/projects/experimental/components/badge-notification/badge-notification.component.ts index c6a94d16ecdcb..abb4221898773 100644 --- a/projects/experimental/components/badge-notification/badge-notification.component.ts +++ b/projects/experimental/components/badge-notification/badge-notification.component.ts @@ -1,16 +1,13 @@ -import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; import { - TUI_ANIMATION_OPTIONS, - TuiAnimationOptions, + TUI_ANIMATIONS_SPEED, tuiPop, TuiSizeL, TuiSizeXS, + tuiToAnimationOptions, } from '@taiga-ui/core'; -import { - TUI_BADGE_NOTIFICATION_OPTIONS, - TuiBadgeNotificationOptions, -} from './badge-notification.options'; +import {TUI_BADGE_NOTIFICATION_OPTIONS} from './badge-notification.options'; @Component({ selector: 'tui-badge-notification', @@ -20,16 +17,12 @@ import { animations: [tuiPop], host: { '[attr.data-size]': 'size', - '[@tuiPop]': 'animation', + '[@tuiPop]': 'options', }, }) export class TuiBadgeNotificationComponent { @Input() - size: TuiSizeL | TuiSizeXS = this.options.size; + size: TuiSizeL | TuiSizeXS = inject(TUI_BADGE_NOTIFICATION_OPTIONS).size; - constructor( - @Inject(TUI_ANIMATION_OPTIONS) readonly animation: TuiAnimationOptions, - @Inject(TUI_BADGE_NOTIFICATION_OPTIONS) - private readonly options: TuiBadgeNotificationOptions, - ) {} + readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED)); } diff --git a/projects/kit/components/pdf-viewer/pdf-viewer.component.ts b/projects/kit/components/pdf-viewer/pdf-viewer.component.ts index 69fa12c336850..394786a4b482b 100644 --- a/projects/kit/components/pdf-viewer/pdf-viewer.component.ts +++ b/projects/kit/components/pdf-viewer/pdf-viewer.component.ts @@ -1,13 +1,19 @@ -import {AnimationOptions} from '@angular/animations'; -import {ChangeDetectionStrategy, Component, HostListener, Inject} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + HostListener, + Inject, + inject, +} from '@angular/core'; import {TuiDialog} from '@taiga-ui/cdk'; import { - TUI_ANIMATION_OPTIONS, + TUI_ANIMATIONS_SPEED, TUI_CLOSE_WORD, TUI_COMMON_ICONS, TuiCommonIcons, tuiFadeIn, tuiSlideInTop, + tuiToAnimationOptions, } from '@taiga-ui/core'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; import {Observable} from 'rxjs'; @@ -21,13 +27,14 @@ import {TuiPdfViewerOptions} from './pdf-viewer.options'; changeDetection: ChangeDetectionStrategy.OnPush, animations: [tuiSlideInTop, tuiFadeIn], host: { - '[@tuiFadeIn]': 'animation', - '[@tuiSlideInTop]': 'animation', + '[@tuiFadeIn]': 'options', + '[@tuiSlideInTop]': 'options', }, }) export class TuiPdfViewerComponent { + readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED)); + constructor( - @Inject(TUI_ANIMATION_OPTIONS) readonly animation: AnimationOptions, @Inject(TUI_CLOSE_WORD) readonly closeWord$: Observable, @Inject(TUI_COMMON_ICONS) readonly icons: TuiCommonIcons, @Inject(POLYMORPHEUS_CONTEXT) diff --git a/projects/kit/components/push/push-alert.component.ts b/projects/kit/components/push/push-alert.component.ts index 58a1945ba3563..080956eb98368 100644 --- a/projects/kit/components/push/push-alert.component.ts +++ b/projects/kit/components/push/push-alert.component.ts @@ -1,11 +1,11 @@ -import {AnimationOptions} from '@angular/animations'; -import {ChangeDetectionStrategy, Component, Inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {TuiDialog} from '@taiga-ui/cdk'; import { - TUI_ANIMATION_OPTIONS, + TUI_ANIMATIONS_SPEED, tuiFadeIn, tuiHeightCollapse, tuiSlideInRight, + tuiToAnimationOptions, } from '@taiga-ui/core'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; @@ -20,17 +20,14 @@ import {TuiPushAlertDirective} from './push-alert.directive'; animations: [tuiFadeIn, tuiSlideInRight, tuiHeightCollapse], host: { role: 'alert', - '[@tuiFadeIn]': 'animation', - '[@tuiSlideInRight]': 'animation', - '[@tuiHeightCollapse]': 'animation', + '[@tuiFadeIn]': 'options', + '[@tuiSlideInRight]': 'options', + '[@tuiHeightCollapse]': 'options', }, }) export class TuiPushAlertComponent { - constructor( - @Inject(TUI_ANIMATION_OPTIONS) readonly animation: AnimationOptions, - @Inject(POLYMORPHEUS_CONTEXT) - readonly context: TuiDialog, - ) {} + readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED)); + readonly context = inject(POLYMORPHEUS_CONTEXT) as TuiDialog; get isDirective(): boolean { return this.context.content instanceof TuiPushAlertDirective; diff --git a/projects/kit/components/stepper/stepper.component.ts b/projects/kit/components/stepper/stepper.component.ts index 02263a57bc31d..7f7945a9f8426 100644 --- a/projects/kit/components/stepper/stepper.component.ts +++ b/projects/kit/components/stepper/stepper.component.ts @@ -25,7 +25,7 @@ import { TuiResizeService, TuiScrollService, } from '@taiga-ui/cdk'; -import {TUI_ANIMATIONS_DURATION, TuiOrientation} from '@taiga-ui/core'; +import {TUI_ANIMATIONS_SPEED, tuiGetDuration, TuiOrientation} from '@taiga-ui/core'; import {delay, Observable, takeUntil} from 'rxjs'; import {TuiStepComponent} from './step/step.component'; @@ -61,7 +61,7 @@ export class TuiStepperComponent { @Inject(ElementRef) private readonly el: ElementRef, @Inject(TuiScrollService) private readonly scrollService: TuiScrollService, @Inject(TuiResizeService) resize$: Observable, - @Inject(TUI_ANIMATIONS_DURATION) private readonly duration: number, + @Inject(TUI_ANIMATIONS_SPEED) private readonly speed: number, @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable, ) { resize$.subscribe(() => this.scrollIntoView(this.activeItemIndex)); @@ -158,7 +158,7 @@ export class TuiStepperComponent { nativeElement, Math.max(0, top), Math.max(0, left), - this.duration / 3, + tuiGetDuration(this.speed) / 3, ) .pipe(takeUntil(this.destroy$)) .subscribe();