Feature/refactor symbol icon module to asset profile icon component (#3245)

* Refactor symbol icon module to asset profile icon component (standalone)

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -34,7 +34,7 @@
       <ng-container i18n>Name</ng-container>
     </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
-      <gf-symbol-icon
+      <gf-asset-profile-icon
         *ngIf="element.Platform?.url"
         class="d-inline d-sm-none mr-1"
         [tooltip]="element.Platform?.name"
@@ -73,7 +73,7 @@
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       <div class="d-flex">
-        <gf-symbol-icon
+        <gf-asset-profile-icon
           *ngIf="element.Platform?.url"
           class="mr-1"
           [tooltip]="element.Platform?.name"

apps/client/src/app/components/accounts-table/accounts-table.module.ts

@@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
@@ -17,7 +17,7 @@ import { AccountsTableComponent } from './accounts-table.component';
   exports: [AccountsTableComponent],
   imports: [
     CommonModule,
-    GfSymbolIconModule,
+    GfAssetProfileIconComponent,
     GfValueModule,
     MatButtonModule,
     MatMenuModule,

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -339,7 +339,7 @@
         <mat-label i18n>Url</mat-label>
         <input formControlName="url" matInput type="text" />
         @if (assetProfileForm.controls['url'].value) {
-          <gf-symbol-icon
+          <gf-asset-profile-icon
             class="mr-3"
             matSuffix
             [url]="assetProfileForm.controls['url'].value"

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts

@@ -1,6 +1,6 @@
 import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
 import { AdminMarketDataService } from '@ghostfolio/client/components/admin-market-data/admin-market-data.service';
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfCurrencySelectorModule } from '@ghostfolio/ui/currency-selector/currency-selector.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
@@ -25,9 +25,9 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
     CommonModule,
     FormsModule,
     GfAdminMarketDataDetailModule,
+    GfAssetProfileIconComponent,
     GfCurrencySelectorModule,
     GfPortfolioProportionChartModule,
-    GfSymbolIconModule,
     GfValueModule,
     MatButtonModule,
     MatCheckboxModule,

apps/client/src/app/components/admin-platform/admin-platform.component.html

@@ -30,7 +30,7 @@
             <ng-container i18n>Name</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1" mat-cell>
-            <gf-symbol-icon
+            <gf-asset-profile-icon
               *ngIf="element.url"
               class="d-inline mr-1"
               [tooltip]="element.name"

apps/client/src/app/components/admin-platform/admin-platform.module.ts

@@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -16,8 +16,8 @@ import { GfCreateOrUpdatePlatformDialogModule } from './create-or-update-platfor
   exports: [AdminPlatformComponent],
   imports: [
     CommonModule,
+    GfAssetProfileIconComponent,
     GfCreateOrUpdatePlatformDialogModule,
-    GfSymbolIconModule,
     MatButtonModule,
     MatMenuModule,
     MatSortModule,

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html

@@ -13,7 +13,11 @@
         <mat-label i18n>Url</mat-label>
         <input matInput name="url" required [(ngModel)]="data.platform.url" />
         @if (data.platform.url) {
-          <gf-symbol-icon class="mr-3" matSuffix [url]="data.platform.url" />
+          <gf-asset-profile-icon
+            class="mr-3"
+            matSuffix
+            [url]="data.platform.url"
+          />
         }
       </mat-form-field>
     </div>

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.module.ts

@@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -14,7 +14,7 @@ import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog
   declarations: [CreateOrUpdatePlatformDialog],
   imports: [
     CommonModule,
-    GfSymbolIconModule,
+    GfAssetProfileIconComponent,
     FormsModule,
     MatButtonModule,
     MatDialogModule,

apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.html

@@ -0,0 +1,8 @@
+@if (src) {
+  <img
+    onerror="this.style.display='none'"
+    [ngClass]="{ large: size === 'large' }"
+    [src]="src"
+    [title]="tooltip ? tooltip : ''"
+  />
+}

apps/client/src/app/components/symbol-icon/symbol-icon.component.ts → apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts

@@ -1,4 +1,6 @@
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   Input,
@@ -7,12 +9,15 @@ import {
 import { DataSource } from '@prisma/client';
 
 @Component({
-  selector: 'gf-symbol-icon',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './symbol-icon.component.html',
+  imports: [CommonModule],
-  styleUrls: ['./symbol-icon.component.scss']
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-asset-profile-icon',
+  standalone: true,
+  styleUrls: ['./asset-profile-icon.component.scss'],
+  templateUrl: './asset-profile-icon.component.html'
 })
-export class SymbolIconComponent implements OnChanges {
+export class GfAssetProfileIconComponent implements OnChanges {
   @Input() dataSource: DataSource;
   @Input() size: 'large';
   @Input() symbol: string;

apps/client/src/app/components/symbol-icon/symbol-icon.component.html

@@ -1,7 +0,0 @@
-<img
-  *ngIf="src"
-  onerror="this.style.display='none'"
-  [ngClass]="{ large: size === 'large' }"
-  [src]="src"
-  [title]="tooltip ? tooltip : ''"
-/>

apps/client/src/app/components/symbol-icon/symbol-icon.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-
-import { SymbolIconComponent } from './symbol-icon.component';
-
-@NgModule({
-  declarations: [SymbolIconComponent],
-  exports: [SymbolIconComponent],
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfSymbolIconModule {}

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -61,7 +61,7 @@
           ) {
             <mat-option [value]="platformEntry">
               <span class="d-flex">
-                <gf-symbol-icon
+                <gf-asset-profile-icon
                   class="mr-1"
                   [tooltip]="platformEntry.name"
                   [url]="platformEntry.url"

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts

@@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfCurrencySelectorModule } from '@ghostfolio/ui/currency-selector/currency-selector.module';
 
 import { CommonModule } from '@angular/common';
@@ -18,8 +18,8 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.c
   imports: [
     CommonModule,
     FormsModule,
+    GfAssetProfileIconComponent,
     GfCurrencySelectorModule,
-    GfSymbolIconModule,
     MatAutocompleteModule,
     MatButtonModule,
     MatCheckboxModule,

apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html

@@ -12,7 +12,7 @@
         <mat-select formControlName="fromAccount">
           <mat-option *ngFor="let account of accounts" [value]="account.id">
             <div class="d-flex">
-              <gf-symbol-icon
+              <gf-asset-profile-icon
                 *ngIf="account.Platform?.url"
                 class="mr-1"
                 [tooltip]="account.Platform?.name"
@@ -29,7 +29,7 @@
         <mat-select formControlName="toAccount">
           <mat-option *ngFor="let account of accounts" [value]="account.id">
             <div class="d-flex">
-              <gf-symbol-icon
+              <gf-asset-profile-icon
                 *ngIf="account.Platform?.url"
                 class="mr-1"
                 [tooltip]="account.Platform?.name"

apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.module.ts

@@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -15,7 +15,7 @@ import { TransferBalanceDialog } from './transfer-balance-dialog.component';
   declarations: [TransferBalanceDialog],
   imports: [
     CommonModule,
-    GfSymbolIconModule,
+    GfAssetProfileIconComponent,
     MatButtonModule,
     MatDialogModule,
     MatFormFieldModule,

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -94,7 +94,7 @@
             [value]="account.id"
           >
             <div class="d-flex">
-              <gf-symbol-icon
+              <gf-asset-profile-icon
                 *ngIf="account.Platform?.url"
                 class="mr-1"
                 [tooltip]="account.Platform?.name"

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts

@@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfSymbolAutocompleteModule } from '@ghostfolio/ui/symbol-autocomplete/symbol-autocomplete.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -22,8 +22,8 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
   imports: [
     CommonModule,
     FormsModule,
+    GfAssetProfileIconComponent,
     GfSymbolAutocompleteModule,
-    GfSymbolIconModule,
     GfValueModule,
     MatAutocompleteModule,
     MatButtonModule,

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -122,7 +122,7 @@
     <ng-container matColumnDef="icon">
       <th *matHeaderCellDef class="px-1" mat-header-cell></th>
       <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-        <gf-symbol-icon
+        <gf-asset-profile-icon
           [dataSource]="element.SymbolProfile?.dataSource"
           [symbol]="element.SymbolProfile?.symbol"
           [tooltip]="element.SymbolProfile?.name"
@@ -308,7 +308,7 @@
       <td *matCellDef="let element" class="px-1" mat-cell>
         <div class="d-flex">
           @if (element.Account?.Platform?.url) {
-            <gf-symbol-icon
+            <gf-asset-profile-icon
               class="mr-1"
               [tooltip]="element.Account?.Platform?.name"
               [url]="element.Account?.Platform?.url"

libs/ui/src/lib/activities-table/activities-table.module.ts

@@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfActivityTypeModule } from '@ghostfolio/ui/activity-type';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
@@ -24,8 +24,8 @@ import { ActivitiesTableComponent } from './activities-table.component';
   imports: [
     CommonModule,
     GfActivityTypeModule,
+    GfAssetProfileIconComponent,
     GfNoTransactionsInfoModule,
-    GfSymbolIconModule,
     GfSymbolModule,
     GfValueModule,
     MatButtonModule,

libs/ui/src/lib/assistant/assistant.html

@@ -110,7 +110,7 @@
               @for (account of accounts; track account.id) {
                 <mat-option [value]="account.id">
                   <div class="d-flex">
-                    <gf-symbol-icon
+                    <gf-asset-profile-icon
                       *ngIf="account.Platform?.url"
                       class="mr-1"
                       [tooltip]="account.Platform?.name"

libs/ui/src/lib/assistant/assistant.module.ts

@@ -1,4 +1,4 @@
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -18,8 +18,8 @@ import { AssistantComponent } from './assistant.component';
   imports: [
     CommonModule,
     FormsModule,
+    GfAssetProfileIconComponent,
     GfAssistantListItemModule,
-    GfSymbolIconModule,
     MatButtonModule,
     MatFormFieldModule,
     MatSelectModule,

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

@@ -10,7 +10,7 @@
     <ng-container matColumnDef="icon">
       <th *matHeaderCellDef class="px-1" mat-header-cell></th>
       <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-        <gf-symbol-icon
+        <gf-asset-profile-icon
           [dataSource]="element.dataSource"
           [symbol]="element.symbol"
           [tooltip]="element.name"

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

@@ -1,5 +1,5 @@
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';
-import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 import { GfValueModule } from '@ghostfolio/ui/value';
@@ -21,9 +21,9 @@ import { HoldingsTableComponent } from './holdings-table.component';
   exports: [HoldingsTableComponent],
   imports: [
     CommonModule,
+    GfAssetProfileIconComponent,
     GfNoTransactionsInfoModule,
     GfPositionDetailDialogModule,
-    GfSymbolIconModule,
     GfSymbolModule,
     GfValueModule,
     MatButtonModule,