Task/widen input types in dialog header tables and benchmark comparator (#8068)

Widen input types

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts

@@ -72,7 +72,13 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
   public readonly benchmarks = input<Partial<SymbolProfile>[]>();
   public readonly colorScheme = input<ColorScheme>();
   public readonly isLoading = input<boolean>();
-  public readonly locale = input(getLocale());
+
+  public readonly locale = input(getLocale(), {
+    transform: (value?: string) => {
+      return value ?? getLocale();
+    }
+  });
+
   public readonly performanceDataItems = input.required<LineChartItem[]>();
   public readonly user = input<User>();
 

libs/ui/src/lib/accounts-table/accounts-table.component.ts

@@ -62,7 +62,13 @@ export class GfAccountsTableComponent {
   public readonly hasPermissionToDeleteAccount = input<boolean>();
   public readonly hasPermissionToOpenDetails = input(true);
   public readonly hasPermissionToUpdateAccount = input<boolean>();
-  public readonly locale = input(getLocale());
+
+  public readonly locale = input(getLocale(), {
+    transform: (value?: string) => {
+      return value ?? getLocale();
+    }
+  });
+
   public readonly showActions = input<boolean>();
   public readonly showActivitiesCount = input(true);
   public readonly showAllocationInPercentage = input<boolean>();

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html

@@ -1,7 +1,7 @@
 <gf-dialog-header
   position="center"
   [deviceType]="data.deviceType"
-  [title]="assetProfile?.name ?? assetProfile?.symbol ?? ''"
+  [title]="assetProfile?.name ?? assetProfile?.symbol"
   (closeButtonClicked)="onClose()"
 />
 

libs/ui/src/lib/dialog-header/dialog-header.component.html

@@ -1,10 +1,10 @@
 <div class="d-flex" mat-dialog-title>
   <span
     class="flex-grow-1 text-truncate"
-    [class.text-center]="position === 'center'"
-    >{{ title }}</span
+    [class.text-center]="position() === 'center'"
+    >{{ title() }}</span
   >
-  @if (deviceType !== 'mobile') {
+  @if (deviceType() !== 'mobile') {
     <button class="no-min-width px-0" mat-button (click)="onClickCloseButton()">
       <ion-icon name="close" size="large" />
     </button>

libs/ui/src/lib/dialog-header/dialog-header.component.ts

@@ -1,9 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Input,
-  Output
+  input,
+  output
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -20,17 +19,17 @@ import { close } from 'ionicons/icons';
   templateUrl: './dialog-header.component.html'
 })
 export class GfDialogHeaderComponent {
-  @Input() deviceType: string;
-  @Input() position: 'center' | 'left' = 'left';
-  @Input() title: string;
+  public readonly deviceType = input<string>();
+  public readonly position = input<'center' | 'left'>('left');
+  public readonly title = input.required<string | null | undefined>();
 
-  @Output() closeButtonClicked = new EventEmitter<void>();
+  public readonly closeButtonClicked = output<void>();
 
   public constructor() {
     addIcons({ close });
   }
 
-  public onClickCloseButton() {
+  protected onClickCloseButton() {
     this.closeButtonClicked.emit();
   }
 }

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

@@ -54,7 +54,13 @@ export class GfHoldingsTableComponent {
   public readonly hasPermissionToShowQuantities = input(true);
   public readonly hasPermissionToShowValues = input(true);
   public readonly holdings = input.required<PortfolioPosition[] | undefined>();
-  public readonly locale = input(getLocale());
+
+  public readonly locale = input(getLocale(), {
+    transform: (value?: string) => {
+      return value ?? getLocale();
+    }
+  });
+
   public readonly mode = input<'default' | 'simple'>('default');
   public readonly pageSize = model(Number.MAX_SAFE_INTEGER);