From b4d691ca62cb5f51d37ff4450aba701064fb6192 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Mon, 13 Jan 2025 18:39:30 +0400
Subject: [PATCH] chore(demo): add animation (#10153)

Co-authored-by: taiga-family-bot <taiga-family-bot@users.noreply.github.com>
---
 .../core/utils/miscellaneous/to-animation-options.ts |  7 ++++++-
 .../components/card-large/examples/14/index.html     |  2 ++
 .../components/card-large/examples/14/index.ts       | 12 +++++++++++-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/projects/core/utils/miscellaneous/to-animation-options.ts b/projects/core/utils/miscellaneous/to-animation-options.ts
index f2409b568862..6b966da4b1c0 100644
--- a/projects/core/utils/miscellaneous/to-animation-options.ts
+++ b/projects/core/utils/miscellaneous/to-animation-options.ts
@@ -1,8 +1,13 @@
 import type {AnimationOptions} from '@angular/animations';
+import {inject} from '@angular/core';
+import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';
 
 export const TUI_ANIMATIONS_DEFAULT_DURATION = 300;
 
-export function tuiToAnimationOptions(speed: number, easing?: string): AnimationOptions {
+export function tuiToAnimationOptions(
+    speed: number = inject(TUI_ANIMATIONS_SPEED),
+    easing?: string,
+): AnimationOptions {
     return {
         value: '',
         params: {
diff --git a/projects/demo/src/modules/components/card-large/examples/14/index.html b/projects/demo/src/modules/components/card-large/examples/14/index.html
index 99a016446555..45ff12bea683 100644
--- a/projects/demo/src/modules/components/card-large/examples/14/index.html
+++ b/projects/demo/src/modules/components/card-large/examples/14/index.html
@@ -10,6 +10,8 @@
     tuiAppearance="floating"
     tuiCardLarge="compact"
     class="popover"
+    [@tuiFadeIn]="animation"
+    [@tuiSlideIn]="animation"
 >
     <ng-container *ngIf="step() === 1">
         <h1 tuiTitle>
diff --git a/projects/demo/src/modules/components/card-large/examples/14/index.ts b/projects/demo/src/modules/components/card-large/examples/14/index.ts
index 712c7a3ec17b..fec315e5c197 100644
--- a/projects/demo/src/modules/components/card-large/examples/14/index.ts
+++ b/projects/demo/src/modules/components/card-large/examples/14/index.ts
@@ -4,7 +4,15 @@ import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiAutoFocus} from '@taiga-ui/cdk';
-import {TuiAppearance, TuiButton, TuiPopup, TuiTitle} from '@taiga-ui/core';
+import {
+    TuiAppearance,
+    TuiButton,
+    tuiFadeIn,
+    TuiPopup,
+    tuiSlideIn,
+    TuiTitle,
+    tuiToAnimationOptions,
+} from '@taiga-ui/core';
 import {TuiRating} from '@taiga-ui/kit';
 import {TuiCardLarge} from '@taiga-ui/layout';
 import {TuiTextareaModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
@@ -28,8 +36,10 @@ import {TuiTextareaModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
+    animations: [tuiFadeIn, tuiSlideIn],
 })
 export default class Example {
+    protected readonly animation = {...tuiToAnimationOptions(), value: 'right'};
     protected readonly step = signal(0);
     protected rating = 0;
     protected comment = '';