Task/migrate deprecated animation providers (#7396)

* Migrate deprecated animation providers

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Refactored the deprecated animation providers (`provideAnimations()` and `provideNoopAnimations()`)
 - Improved the language localization for Polish (`pl`)
 
 ### Fixed

apps/client/src/main.ts

@@ -23,7 +23,6 @@ import {
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { provideAnimations } from '@angular/platform-browser/animations';
 import { RouterModule, TitleStrategy } from '@angular/router';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { provideIonicAngular } from '@ionic/angular/standalone';
@@ -82,7 +81,6 @@ import { environment } from './environments/environment';
       ),
       LanguageService,
       ModulePreloadService,
-      provideAnimations(),
       provideHttpClient(withInterceptorsFromDi()),
       provideIonicAngular(),
       provideMarkdown(),

libs/ui/src/lib/carousel/carousel.component.ts

@@ -1,4 +1,5 @@
 import {
+  ANIMATION_MODULE_TYPE,
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
@@ -11,7 +12,6 @@ import {
   ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { chevronBackOutline, chevronForwardOutline } from 'ionicons/icons';

libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { ANIMATION_MODULE_TYPE, importProvidersFrom } from '@angular/core';
 import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
 
 import { EntityLogoImageSourceServiceMock } from '../mocks/entity-logo-image-source.service.mock';
@@ -13,8 +12,11 @@ export default {
   decorators: [
     applicationConfig({
       providers: [
-        provideNoopAnimations(),
         importProvidersFrom(CommonModule),
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        },
         {
           provide: EntityLogoImageSourceService,
           useValue: new EntityLogoImageSourceServiceMock()

libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts

@@ -1,6 +1,7 @@
 import { DEFAULT_LOCALE } from '@ghostfolio/common/config';
 
 import { CommonModule } from '@angular/common';
+import { ANIMATION_MODULE_TYPE } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import '@angular/localize/init';
 import { MatButtonModule } from '@angular/material/button';
@@ -8,7 +9,6 @@ import { provideNativeDateAdapter } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -32,10 +32,16 @@ export default {
         MatFormFieldModule,
         MatInputModule,
         NgxSkeletonLoaderModule,
-        NoopAnimationsModule,
         ReactiveFormsModule
       ],
-      providers: [FireCalculatorService, provideNativeDateAdapter()]
+      providers: [
+        FireCalculatorService,
+        provideNativeDateAdapter(),
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        }
+      ]
     })
   ]
 } as Meta<GfFireCalculatorComponent>;

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts

@@ -2,14 +2,13 @@ import { LookupItem } from '@ghostfolio/common/interfaces';
 
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { importProvidersFrom } from '@angular/core';
+import { ANIMATION_MODULE_TYPE, importProvidersFrom } from '@angular/core';
 import {
   FormControl,
   FormsModule,
   NgControl,
   ReactiveFormsModule
 } from '@angular/forms';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
 
 import { HttpClientMock } from '../mocks/httpClient.mock';
@@ -75,8 +74,11 @@ export default {
   decorators: [
     applicationConfig({
       providers: [
-        provideNoopAnimations(),
         importProvidersFrom(CommonModule, FormsModule, ReactiveFormsModule),
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        },
         {
           provide: NgControl,
           useValue: {

libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
+import { ANIMATION_MODULE_TYPE } from '@angular/core';
 import '@angular/localize/init';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 import { GfTagsSelectorComponent } from './tags-selector.component';
@@ -10,7 +10,13 @@ export default {
   component: GfTagsSelectorComponent,
   decorators: [
     moduleMetadata({
-      imports: [CommonModule, NoopAnimationsModule]
+      imports: [CommonModule],
+      providers: [
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        }
+      ]
     })
   ]
 } as Meta<GfTagsSelectorComponent>;

libs/ui/src/lib/top-holdings/top-holdings.component.html

@@ -58,7 +58,7 @@
         mat-cell
         [attr.colspan]="displayedColumns.length"
       >
-        <div [@detailExpand]="element.expand ? 'expanded' : 'collapsed'">
+        <div class="detail-expand" [class.expanded]="element.expand">
           <div class="holding-parents-table">
             <table
               class="gf-table w-100"

libs/ui/src/lib/top-holdings/top-holdings.component.scss

@@ -19,6 +19,21 @@
         height: 0;
       }
 
+      .detail-expand {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1);
+
+        &.expanded {
+          grid-template-rows: 1fr;
+        }
+
+        .holding-parents-table {
+          min-height: 0;
+          overflow: hidden;
+        }
+      }
+
       .holding-parents-table {
         --table-padding: 0.5em;
 

libs/ui/src/lib/top-holdings/top-holdings.component.ts

@@ -5,13 +5,6 @@ import {
   PortfolioPosition
 } from '@ghostfolio/common/interfaces';
 
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger
-} from '@angular/animations';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -31,16 +24,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { GfValueComponent } from '../value/value.component';
 
 @Component({
-  animations: [
-    trigger('detailExpand', [
-      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
-      state('expanded', style({ height: '*' })),
-      transition(
-        'expanded <=> collapsed',
-        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
-      )
-    ])
-  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     GfValueComponent,

libs/ui/src/lib/value/value.component.stories.ts

@@ -1,5 +1,5 @@
+import { ANIMATION_MODULE_TYPE } from '@angular/core';
 import '@angular/localize/init';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { applicationConfig, moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -11,7 +11,12 @@ export default {
   component: GfValueComponent,
   decorators: [
     applicationConfig({
-      providers: [provideNoopAnimations()]
+      providers: [
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        }
+      ]
     }),
     moduleMetadata({
       imports: [NgxSkeletonLoaderModule]