Task/migrate dialog header and footer components to standalone (#5401)

* Migrate dialog footer component to standalone

* Migrate dialog header component to standalone

* Update changelog

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Refactored the dialog footer component to standalone
+- Refactored the dialog header component to standalone
 - Refactored the register page to standalone
 - Migrated the login with access token dialog from `ngModel` to form control
 - Upgraded `prisma` from version `6.12.0` to `6.14.0`

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts

@@ -1,5 +1,5 @@
-import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
+import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
-import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
 import { GfAccountBalancesComponent } from '@ghostfolio/ui/account-balances';
 import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
@@ -22,8 +22,8 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
     CommonModule,
     GfAccountBalancesComponent,
     GfActivitiesTableComponent,
-    GfDialogFooterModule,
+    GfDialogFooterComponent,
-    GfDialogHeaderModule,
+    GfDialogHeaderComponent,
     GfHoldingsTableComponent,
     GfInvestmentChartModule,
     GfValueComponent,

apps/client/src/app/components/dialog-footer/dialog-footer.component.ts

@@ -5,18 +5,20 @@ import {
   Input,
   Output
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { close } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'justify-content-center' },
+  imports: [IonIcon, MatButtonModule],
   selector: 'gf-dialog-footer',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './dialog-footer.component.html',
   styleUrls: ['./dialog-footer.component.scss'],
-  standalone: false
+  templateUrl: './dialog-footer.component.html'
 })
-export class DialogFooterComponent {
+export class GfDialogFooterComponent {
   @Input() deviceType: string;
 
   @Output() closeButtonClicked = new EventEmitter<void>();

apps/client/src/app/components/dialog-footer/dialog-footer.module.ts

@@ -1,14 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { DialogFooterComponent } from './dialog-footer.component';
-
-@NgModule({
-  declarations: [DialogFooterComponent],
-  exports: [DialogFooterComponent],
-  imports: [CommonModule, IonIcon, MatButtonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfDialogFooterModule {}

apps/client/src/app/components/dialog-header/dialog-header.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -5,18 +6,20 @@ import {
   Input,
   Output
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { close } from 'ionicons/icons';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'justify-content-center' },
+  imports: [CommonModule, IonIcon, MatButtonModule],
   selector: 'gf-dialog-header',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './dialog-header.component.html',
   styleUrls: ['./dialog-header.component.scss'],
-  standalone: false
+  templateUrl: './dialog-header.component.html'
 })
-export class DialogHeaderComponent {
+export class GfDialogHeaderComponent {
   @Input() deviceType: string;
   @Input() position: 'center' | 'left' = 'left';
   @Input() title: string;

apps/client/src/app/components/dialog-header/dialog-header.module.ts

@@ -1,14 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { DialogHeaderComponent } from './dialog-header.component';
-
-@NgModule({
-  declarations: [DialogHeaderComponent],
-  exports: [DialogHeaderComponent],
-  imports: [CommonModule, IonIcon, MatButtonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfDialogHeaderModule {}

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
-import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
+import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
-import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
@@ -78,8 +78,8 @@ import { HoldingDetailDialogParams } from './interfaces/interfaces';
     GfAccountsTableComponent,
     GfActivitiesTableComponent,
     GfDataProviderCreditsComponent,
-    GfDialogFooterModule,
+    GfDialogFooterComponent,
-    GfDialogHeaderModule,
+    GfDialogHeaderComponent,
     GfHistoricalMarketDataEditorComponent,
     GfLineChartComponent,
     GfPortfolioProportionChartComponent,

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts

@@ -9,14 +9,14 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { IonIcon } from '@ionic/angular/standalone';
 
-import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
+import { GfDialogHeaderComponent } from '../dialog-header/dialog-header.component';
 import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.component';
 
 @NgModule({
   declarations: [LoginWithAccessTokenDialog],
   imports: [
     CommonModule,
-    GfDialogHeaderModule,
+    GfDialogHeaderComponent,
     IonIcon,
     MatButtonModule,
     MatCheckboxModule,

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -2,8 +2,8 @@ import { CreateTagDto } from '@ghostfolio/api/app/endpoints/tags/create-tag.dto'
 import { CreateAccountWithBalancesDto } from '@ghostfolio/api/app/import/create-account-with-balances.dto';
 import { CreateAssetProfileWithMarketDataDto } from '@ghostfolio/api/app/import/create-asset-profile-with-market-data.dto';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
-import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
+import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
-import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
 import { GfFileDropModule } from '@ghostfolio/client/directives/file-drop/file-drop.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -58,8 +58,8 @@ import { ImportActivitiesDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     GfActivitiesTableComponent,
-    GfDialogFooterModule,
+    GfDialogFooterComponent,
-    GfDialogHeaderModule,
+    GfDialogHeaderComponent,
     GfFileDropModule,
     GfSymbolModule,
     IonIcon,

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts

@@ -1,5 +1,5 @@
-import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
+import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
-import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import {
@@ -33,8 +33,8 @@ import { BenchmarkDetailDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
   imports: [
-    GfDialogFooterModule,
+    GfDialogFooterComponent,
-    GfDialogHeaderModule,
+    GfDialogHeaderComponent,
     GfLineChartComponent,
     GfValueComponent,
     MatDialogModule