feat(lib): implement input signals

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -15,7 +15,7 @@
         <div class="text-truncate">
           {{ element?.name }}
         </div>
-        @if (showSymbol) {
+        @if (showSymbol()) {
           <div>
             <small class="text-muted">{{ element?.symbol }}</small>
           </div>
@@ -98,7 +98,7 @@
           @if (element?.performances?.allTimeHigh?.date) {
             <gf-value
               [isDate]="true"
-              [locale]="locale"
+              [locale]="locale()"
               [value]="element?.performances?.allTimeHigh?.date"
             />
           }
@@ -123,7 +123,7 @@
           <gf-value
             class="d-inline-block justify-content-end"
             [isPercent]="true"
-            [locale]="locale"
+            [locale]="locale()"
             [ngClass]="{
               'text-danger':
                 element?.performances?.allTimeHigh?.performancePercent < 0,
@@ -150,7 +150,7 @@
     <ng-container matColumnDef="actions" stickyEnd>
       <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
       <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-        @if (hasPermissionToDeleteItem) {
+        @if (hasPermissionToDeleteItem()) {
           <button
             class="mx-1 no-min-width px-2"
             mat-button
@@ -163,7 +163,7 @@
         <mat-menu #benchmarkMenu="matMenu" xPosition="before">
           <button
             mat-menu-item
-            [disabled]="!hasPermissionToDeleteItem"
+            [disabled]="!hasPermissionToDeleteItem()"
             (click)="
               onDeleteItem({
                 dataSource: element.dataSource,
@@ -180,9 +180,9 @@
       </td>
     </ng-container>
 
-    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matHeaderRowDef="displayedColumns()" mat-header-row></tr>
     <tr
-      *matRowDef="let row; columns: displayedColumns"
+      *matRowDef="let row; columns: displayedColumns()"
       class="cursor-pointer"
       mat-row
       (click)="
@@ -204,7 +204,7 @@
       width: '100%'
     }"
   />
-} @else if (benchmarks?.length === 0) {
+} @else if (benchmarks()?.length === 0) {
   <div class="p-3 text-center text-muted">
     <small i18n>No data available</small>
   </div>

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

@@ -17,9 +17,10 @@ import {
   ChangeDetectionStrategy,
   Component,
   DestroyRef,
-  Input,
+  computed,
-  OnChanges,
+  effect,
   inject,
+  input,
   output,
   viewChild
 } from '@angular/core';
@@ -61,26 +62,31 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
   styleUrls: ['./benchmark.component.scss'],
   templateUrl: './benchmark.component.html'
 })
-export class GfBenchmarkComponent implements OnChanges {
+export class GfBenchmarkComponent {
-  @Input() benchmarks: Benchmark[];
+  public readonly benchmarks = input.required<Benchmark[]>();
-  @Input() deviceType: string;
+  public readonly deviceType = input.required<string>();
-  @Input() hasPermissionToDeleteItem: boolean;
+  public readonly hasPermissionToDeleteItem = input<boolean>();
-  @Input() locale = getLocale();
+  public readonly locale = input(getLocale());
-  @Input() showSymbol = true;
+  public readonly showSymbol = input(true);
-  @Input() user: User;
+  public readonly user = input<User>();
 
   public readonly itemDeleted = output<AssetProfileIdentifier>();
 
   protected readonly sort = viewChild(MatSort);
 
   protected readonly dataSource = new MatTableDataSource<Benchmark>([]);
-  protected displayedColumns = [
+  protected readonly displayedColumns = computed(() => {
+    return [
       'name',
+      ...(this.user()?.settings?.isExperimentalFeatures
+        ? ['trend50d', 'trend200d']
+        : []),
       'date',
       'change',
       'marketCondition',
       'actions'
     ];
+  });
   protected isLoading = true;
   protected readonly isNumber = isNumber;
   protected readonly resolveMarketCondition = resolveMarketCondition;
@@ -93,6 +99,19 @@ export class GfBenchmarkComponent implements OnChanges {
   private readonly router = inject(Router);
 
   public constructor() {
+    effect(() => {
+      const benchmarks = this.benchmarks();
+
+      if (benchmarks) {
+        this.dataSource.data = benchmarks;
+        this.dataSource.sortingDataAccessor = getLowercase;
+
+        this.dataSource.sort = this.sort() ?? null;
+
+        this.isLoading = false;
+      }
+    });
+
     this.route.queryParams
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
@@ -111,29 +130,6 @@ export class GfBenchmarkComponent implements OnChanges {
     addIcons({ ellipsisHorizontal, trashOutline });
   }
 
-  public ngOnChanges() {
-    if (this.benchmarks) {
-      this.dataSource.data = this.benchmarks;
-      this.dataSource.sortingDataAccessor = getLowercase;
-
-      this.dataSource.sort = this.sort();
-
-      this.isLoading = false;
-    }
-
-    if (this.user?.settings?.isExperimentalFeatures) {
-      this.displayedColumns = [
-        'name',
-        'trend50d',
-        'trend200d',
-        'date',
-        'change',
-        'marketCondition',
-        'actions'
-      ];
-    }
-  }
-
   protected onDeleteItem({ dataSource, symbol }: AssetProfileIdentifier) {
     this.notificationService.confirm({
       confirmFn: () => {
@@ -164,12 +160,12 @@ export class GfBenchmarkComponent implements OnChanges {
       data: {
         dataSource,
         symbol,
-        colorScheme: this.user?.settings?.colorScheme,
+        colorScheme: this.user()?.settings?.colorScheme,
-        deviceType: this.deviceType,
+        deviceType: this.deviceType(),
-        locale: this.locale
+        locale: this.locale()
       },
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
     dialogRef