Closes #433 - Removed deprecated BrowserAnimationsModule

Dockerfile

@@ -15,7 +15,7 @@ RUN npm ci && \
 	npm prune --force --production
 
 # ---------- Release ----------
-FROM nginx:1.28.0-alpine-slim
+FROM nginx:1.29.1-alpine-slim
 
 # Copy nginx config file
 RUN rm -rf /usr/share/nginx/html/* && rm -rf /etc/nginx/nginx.conf

package.json

@@ -25,19 +25,19 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@angular/animations": "~20.2.0",
-    "@angular/cdk": "~20.2.0",
-    "@angular/common": "~20.2.0",
-    "@angular/compiler": "~20.2.0",
-    "@angular/core": "~20.2.0",
-    "@angular/forms": "~20.2.0",
-    "@angular/localize": "~20.2.0",
-    "@angular/material": "~20.2.0",
-    "@angular/platform-browser": "~20.2.0",
-    "@angular/platform-browser-dynamic": "~20.2.0",
-    "@angular/router": "~20.2.0",
-    "@angular/service-worker": "~20.2.0",
-    "@apollo/client": "^3.13.9",
+    "@angular/animations": "~20.2.2",
+    "@angular/cdk": "~20.2.1",
+    "@angular/common": "~20.2.2",
+    "@angular/compiler": "~20.2.2",
+    "@angular/core": "~20.2.2",
+    "@angular/forms": "~20.2.2",
+    "@angular/localize": "~20.2.2",
+    "@angular/material": "~20.2.1",
+    "@angular/platform-browser": "~20.2.2",
+    "@angular/platform-browser-dynamic": "~20.2.2",
+    "@angular/router": "~20.2.2",
+    "@angular/service-worker": "~20.2.2",
+    "@apollo/client": "^3.14.0",
     "@ng-bootstrap/ng-bootstrap": "~19.0.1",
     "@popperjs/core": "^2.11.8",
     "@types/grecaptcha": "^3.0.9",
@@ -51,17 +51,17 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.2.0",
-    "@angular/cli": "^20.2.0",
-    "@angular/compiler-cli": "~20.2.0",
-    "@angular/language-service": "20.2.0",
+    "@angular-devkit/build-angular": "^20.2.1",
+    "@angular/cli": "^20.2.1",
+    "@angular/compiler-cli": "~20.2.2",
+    "@angular/language-service": "20.2.2",
     "@types/node": "^24.3.0",
-    "@types/react": "^19.1.10",
-    "angular-eslint": "20.1.1",
-    "eslint": "^9.33.0",
+    "@types/react": "^19.1.12",
+    "angular-eslint": "20.2.0",
+    "eslint": "^9.34.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",
-    "typescript-eslint": "8.40.0"
+    "typescript-eslint": "8.41.0"
   },
   "repository": {
     "type": "git",

src/app/app.module.ts

@@ -18,7 +18,6 @@ import { GraphQLModule } from './graphql.module';
 import { AppMaterialModule } from './shared/app-material.module';
 import { HomeComponent } from './home/home.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SignupComponent } from './signup/signup.component';
 
 import { RecaptchaModule, RecaptchaFormsModule } from '../libs/ng-recaptcha-module';
@@ -39,7 +38,6 @@ import { provideCharts, withDefaultRegisterables } from '../libs/ng2-charts/src/
     imports: [
       BrowserModule,
       CommonModule,
-      BrowserAnimationsModule,
       ReactiveFormsModule,
       appRoutingModule,
       GraphQLModule,

src/app/dashboard-module/domain-module/changelog/changelog.component.css

@@ -25,6 +25,14 @@ tr.element-row:not(.expanded-row):active {
 .element-detail-panel {
   overflow: hidden;
   display: flex;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.element-detail-panel.expanded {
+  max-height: 500px;
+  opacity: 1;
 }
 
 .element-detail {

src/app/dashboard-module/domain-module/changelog/changelog.component.html

@@ -28,36 +28,35 @@
 
         <ng-container matColumnDef="expandedDetail">
             <td mat-cell *matCellDef="let element" [attr.colspan]="dataColumns.length">
-                <div class="element-detail-panel"
-                    [@detailExpand]="element === expandedElement ? 'expanded' : 'collapsed'">
+                <div class="element-detail-panel" [class.expanded]="isExpanded(element)">
                     <div class="element-detail">
                         <h1>Before</h1>
-                        <mat-list role="list" *ngFor="let key of getElementKeys(element.oldValue)">
+                        <div *ngFor="let key of getElementKeys(element.oldValue)">
                             <mat-form-field style="width: 100%;">
                                 <mat-label>{{key}}</mat-label>
                                 <input matInput [value]="getElementValue(key, element.oldValue)"
                                     readonly autocomplete="off">
                             </mat-form-field>
-                        </mat-list>
+                        </div>
                     </div>
                     <div class="element-detail">
                         <h1>After</h1>
-                        <mat-list role="list" *ngFor="let key of getElementKeys(element.newValue)">
+                        <div *ngFor="let key of getElementKeys(element.newValue)">
                             <mat-form-field style="width: 100%;">
                                 <mat-label>{{key}}</mat-label>
                                 <input matInput [value]="getElementValue(key, element.newValue)"
                                     readonly autocomplete="off">
                             </mat-form-field>
-                        </mat-list>
+                        </div>
                     </div>
                 </div>
             </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="dataColumns"></tr>
         <tr mat-row *matRowDef="let element; columns: dataColumns;" class="element-row"
-            [class.expanded-row]="expandedElement === element"
-            (click)="expandedElement = expandedElement === element ? null : element">
+            [class.expanded-row]="isExpanded(element)"
+            (click)="toggleExpanded(element)">
         </tr>
         <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
     </table>

src/app/dashboard-module/domain-module/changelog/changelog.component.ts

@@ -1,7 +1,6 @@
-import { Component, OnInit, OnDestroy, ViewChild, Input, inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, Input, inject, signal } from '@angular/core';
 import { Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { ToastService } from 'src/app/_helpers/toast.service';
 import { ConsoleLogger } from 'src/app/_helpers/console-logger';
 import { DatePipe } from '@angular/common';
@@ -29,15 +28,6 @@ import { Types } from 'src/app/model/path-route';
     '../common/css/detail.component.css',
     './changelog.component.css'
   ],
-  animations: [
-    trigger('detailExpand', [
-      state('collapsed', style({ height: '0px', minHeight: '0' })),
-      state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', [
-        animate('.1s')
-      ]),
-    ]),
-  ],
   standalone: false
 })
 export class ChangelogComponent implements OnInit, OnDestroy {
@@ -83,7 +73,7 @@ export class ChangelogComponent implements OnInit, OnDestroy {
       display: 'Updated By'
     }
   ];
-  expandedElement: History | null;
+  expandedElement = signal<History | null>(null);
 
   configId: string;
   groupId: string;
@@ -118,6 +108,19 @@ export class ChangelogComponent implements OnInit, OnDestroy {
     this.unsubscribe.complete();
   }
 
+  toggleExpanded(element: History) {
+    const currentExpanded = this.expandedElement();
+    if (currentExpanded === element) {
+      this.expandedElement.set(null);
+    } else {
+      this.expandedElement.set(element);
+    }
+  }
+
+  isExpanded(element: History): boolean {
+    return this.expandedElement() === element;
+  }
+
   onPage(event: PageEvent) {
     this.pageSkip = (event.pageSize * (event.pageIndex + 1)) - event.pageSize;
     this.pageSkip = this.pageSkip + (this.pageLength - this.pageSkip);

src/app/dashboard-module/domain-module/metric-module/metric-data/metric-data.component.css

@@ -25,6 +25,14 @@ p {
 .element-detail-panel {
   overflow: hidden;
   display: flex;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.element-detail-panel.expanded {
+  max-height: 500px;
+  opacity: 1;
 }
 
 .element-detail {
@@ -73,7 +81,6 @@ th,
 }
 
 .tablelog-footer {
-  /* columns: 2; */
   background: white;
 }
 

src/app/dashboard-module/domain-module/metric-module/metric-data/metric-data.component.html

@@ -33,15 +33,14 @@
 
         <ng-container matColumnDef="expandedDetail">
             <td mat-cell *matCellDef="let element" [attr.colspan]="dataColumns.length">
-                <div class="element-detail-panel"
-                    [@detailExpand]="element === expandedElement ? 'expanded' : 'collapsed'">
+                <div class="element-detail-panel" [class.expanded]="isExpanded(element)">
                     <div class="element-detail">
-                        <mat-list *ngFor="let entry of element.entry">
+                        <div *ngFor="let entry of element.entry">
                             <mat-form-field style="width: 100%;">
                                 <mat-label>{{entry.strategy}}</mat-label>
                                 <input matInput [value]="entry.input" readonly autocomplete="off">
                             </mat-form-field>
-                        </mat-list>
+                        </div>
                         <mat-form-field style="width: 100%;">
                             <mat-label>Reason</mat-label>
                             <input matInput [value]="element.reason" readonly autocomplete="off">
@@ -57,8 +56,8 @@
 
         <tr mat-header-row *matHeaderRowDef="dataColumns"></tr>
         <tr mat-row *matRowDef="let element; columns: dataColumns;" class="element-row"
-            [class.expanded-row]="expandedElement === element"
-            (click)="expandedElement = expandedElement === element ? null : element">
+            [class.expanded-row]="isExpanded(element)"
+            (click)="toggleExpanded(element)">
         <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
     </table>
     <div class="tablelog-footer">

src/app/dashboard-module/domain-module/metric-module/metric-data/metric-data.component.ts

@@ -1,6 +1,5 @@
-import { Component, OnInit, Input, OnDestroy, ViewChild, inject } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, ViewChild, inject, signal } from '@angular/core';
 import { Subject } from 'rxjs';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { takeUntil } from 'rxjs/operators';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { NgbdModalConfirmComponent } from 'src/app/_helpers/confirmation-dialog';
@@ -21,15 +20,6 @@ import { MetricService } from 'src/app/services/metric.service';
     '../../common/css/detail.component.css',
     './metric-data.component.css'
   ],
-  animations: [
-    trigger('detailExpand', [
-      state('collapsed', style({ height: '0px', minHeight: '0' })),
-      state('expanded', style({ height: '*' })),
-      transition('expanded <=> collapsed', [
-        animate('.1s')
-      ]),
-    ]),
-  ],
   standalone: false
 })
 export class MetricDataComponent implements OnInit, OnDestroy {
@@ -50,7 +40,7 @@ export class MetricDataComponent implements OnInit, OnDestroy {
   dataSource: MatTableDataSource<MetricData>;
   dataColumns = ['switcher', 'component', 'result', 'date'];
 
-  expandedElement: MetricData | null;
+  expandedElement = signal<MetricData | null>(null);
 
   removable = false;
 
@@ -80,6 +70,19 @@ export class MetricDataComponent implements OnInit, OnDestroy {
     this.unsubscribe.complete();
   }
 
+  toggleExpanded(element: MetricData) {
+    const currentExpanded = this.expandedElement();
+    if (currentExpanded === element) {
+      this.expandedElement.set(null);
+    } else {
+      this.expandedElement.set(element);
+    }
+  }
+
+  isExpanded(element: MetricData): boolean {
+    return this.expandedElement() === element;
+  }
+
   applyFilter(filterValue: string) {
     this.dataSource.filter = filterValue.trim().toLowerCase();