Migrate UI components to standalone (#3296)

libs/ui/src/lib/account-balances/account-balances.module.ts

@@ -1,4 +1,4 @@
-import { GfValueModule } from '@ghostfolio/ui/value';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -14,7 +14,7 @@ import { AccountBalancesComponent } from './account-balances.component';
   exports: [AccountBalancesComponent],
   imports: [
     CommonModule,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatMenuModule,
     MatSortModule,

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

@@ -6,8 +6,8 @@ import { getDateFormatString, getLocale } from '@ghostfolio/common/helper';
 import { UniqueAsset } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import { GfActivityTypeModule } from '@ghostfolio/ui/activity-type';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
-import { GfValueModule } from '@ghostfolio/ui/value';
+import { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { SelectionModel } from '@angular/cdk/collections';
 import { CommonModule } from '@angular/common';
@@ -52,9 +52,9 @@ import { Subject, Subscription, takeUntil } from 'rxjs';
     CommonModule,
     GfActivityTypeModule,
     GfAssetProfileIconComponent,
-    GfNoTransactionsInfoModule,
+    GfNoTransactionsInfoComponent,
     GfSymbolModule,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatCheckboxModule,
     MatMenuModule,

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

@@ -4,7 +4,7 @@ import { MatTableModule } from '@angular/material/table';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfTrendIndicatorComponent } from '../trend-indicator';
-import { GfValueModule } from '../value';
+import { GfValueComponent } from '../value';
 import { BenchmarkComponent } from './benchmark.component';
 
 @NgModule({
@@ -13,7 +13,7 @@ import { BenchmarkComponent } from './benchmark.component';
   imports: [
     CommonModule,
     GfTrendIndicatorComponent,
-    GfValueModule,
+    GfValueComponent,
     MatTableModule,
     NgxSkeletonLoaderModule
   ],

libs/ui/src/lib/currency-selector/currency-selector.component.ts

@@ -2,7 +2,9 @@ import { Currency } from '@ghostfolio/common/interfaces';
 import { AbstractMatFormField } from '@ghostfolio/ui/shared/abstract-mat-form-field';
 
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -12,13 +14,23 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { FormControl, FormGroupDirective, NgControl } from '@angular/forms';
+import {
+  FormControl,
+  FormGroupDirective,
+  FormsModule,
+  NgControl,
+  ReactiveFormsModule
+} from '@angular/forms';
 import {
   MatAutocomplete,
+  MatAutocompleteModule,
   MatAutocompleteSelectedEvent
 } from '@angular/material/autocomplete';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
+import {
+  MatFormFieldControl,
+  MatFormFieldModule
+} from '@angular/material/form-field';
+import { MatInput, MatInputModule } from '@angular/material/input';
 import { Subject } from 'rxjs';
 import { map, startWith, takeUntil } from 'rxjs/operators';
 
@@ -28,17 +40,27 @@ import { map, startWith, takeUntil } from 'rxjs/operators';
     '[attr.aria-describedBy]': 'describedBy',
     '[id]': 'id'
   },
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
   providers: [
     {
       provide: MatFormFieldControl,
-      useExisting: CurrencySelectorComponent
+      useExisting: GfCurrencySelectorComponent
     }
   ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-currency-selector',
+  standalone: true,
   styleUrls: ['./currency-selector.component.scss'],
   templateUrl: 'currency-selector.component.html'
 })
-export class CurrencySelectorComponent
+export class GfCurrencySelectorComponent
   extends AbstractMatFormField<Currency>
   implements OnInit, OnDestroy
 {

libs/ui/src/lib/currency-selector/currency-selector.module.ts

@@ -1,23 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-
-import { CurrencySelectorComponent } from './currency-selector.component';
-
-@NgModule({
-  declarations: [CurrencySelectorComponent],
-  exports: [CurrencySelectorComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatAutocompleteModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfCurrencySelectorModule {}

libs/ui/src/lib/currency-selector/index.ts

@@ -1 +1 @@
-export * from './currency-selector.module';
+export * from './currency-selector.component';

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

@@ -3,8 +3,8 @@ import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/posi
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { getLocale } from '@ghostfolio/common/helper';
 import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
-import { GfValueModule } from '@ghostfolio/ui/value';
+import { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import {
@@ -32,10 +32,10 @@ import { Subject, Subscription } from 'rxjs';
   imports: [
     CommonModule,
     GfAssetProfileIconComponent,
-    GfNoTransactionsInfoModule,
+    GfNoTransactionsInfoComponent,
     GfPositionDetailDialogModule,
     GfSymbolModule,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatDialogModule,
     MatPaginatorModule,

libs/ui/src/lib/no-transactions-info/index.ts

@@ -1 +1 @@
-export * from './no-transactions-info.module';
+export * from './no-transactions-info.component';

libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts

@@ -1,17 +1,26 @@
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   HostBinding,
   Input
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { GfLogoModule } from '../logo';
 
 @Component({
-  selector: 'gf-no-transactions-info-indicator',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './no-transactions-info.component.html',
-  styleUrls: ['./no-transactions-info.component.scss']
+  imports: [CommonModule, GfLogoModule, MatButtonModule, RouterModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-no-transactions-info-indicator',
+  standalone: true,
+  styleUrls: ['./no-transactions-info.component.scss'],
+  templateUrl: './no-transactions-info.component.html'
 })
-export class NoTransactionsInfoComponent {
+export class GfNoTransactionsInfoComponent {
   @HostBinding('class.has-border') @Input() hasBorder = true;
 
   public constructor() {}

libs/ui/src/lib/no-transactions-info/no-transactions-info.module.ts

@@ -1,16 +0,0 @@
-import { GfLogoModule } from '@ghostfolio/ui/logo';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { RouterModule } from '@angular/router';
-
-import { NoTransactionsInfoComponent } from './no-transactions-info.component';
-
-@NgModule({
-  declarations: [NoTransactionsInfoComponent],
-  exports: [NoTransactionsInfoComponent],
-  imports: [CommonModule, GfLogoModule, MatButtonModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfNoTransactionsInfoModule {}

libs/ui/src/lib/premium-indicator/index.ts

@@ -1 +1 @@
-export * from './premium-indicator.module';
+export * from './premium-indicator.component';

libs/ui/src/lib/premium-indicator/premium-indicator.component.ts

@@ -1,12 +1,22 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  Input
+} from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 @Component({
-  selector: 'gf-premium-indicator',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './premium-indicator.component.html',
-  styleUrls: ['./premium-indicator.component.scss']
+  imports: [CommonModule, RouterModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-premium-indicator',
+  standalone: true,
+  styleUrls: ['./premium-indicator.component.scss'],
+  templateUrl: './premium-indicator.component.html'
 })
-export class PremiumIndicatorComponent {
+export class GfPremiumIndicatorComponent {
   @Input() enableLink = true;
 
   public constructor() {}

libs/ui/src/lib/premium-indicator/premium-indicator.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { PremiumIndicatorComponent } from './premium-indicator.component';
-
-@NgModule({
-  declarations: [PremiumIndicatorComponent],
-  exports: [PremiumIndicatorComponent],
-  imports: [CommonModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfPremiumIndicatorModule {}

libs/ui/src/lib/symbol-autocomplete/index.ts

@@ -1 +1 @@
-export * from './symbol-autocomplete.module';
+export * from './symbol-autocomplete.component';

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts

@@ -1,10 +1,13 @@
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { translate } from '@ghostfolio/ui/i18n';
 import { AbstractMatFormField } from '@ghostfolio/ui/shared/abstract-mat-form-field';
 
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -14,13 +17,23 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { FormControl, NgControl } from '@angular/forms';
+import {
+  FormControl,
+  FormsModule,
+  NgControl,
+  ReactiveFormsModule
+} from '@angular/forms';
 import {
   MatAutocomplete,
+  MatAutocompleteModule,
   MatAutocompleteSelectedEvent
 } from '@angular/material/autocomplete';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
+import {
+  MatFormFieldControl,
+  MatFormFieldModule
+} from '@angular/material/form-field';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { isString } from 'lodash';
 import { Subject, tap } from 'rxjs';
 import {
@@ -31,23 +44,38 @@ import {
   takeUntil
 } from 'rxjs/operators';
 
+import { GfPremiumIndicatorComponent } from '../premium-indicator';
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[attr.aria-describedBy]': 'describedBy',
     '[id]': 'id'
   },
-  selector: 'gf-symbol-autocomplete',
-  styleUrls: ['./symbol-autocomplete.component.scss'],
-  templateUrl: 'symbol-autocomplete.component.html',
+  imports: [
+    CommonModule,
+    FormsModule,
+    GfPremiumIndicatorComponent,
+    GfSymbolModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    ReactiveFormsModule
+  ],
   providers: [
     {
       provide: MatFormFieldControl,
-      useExisting: SymbolAutocompleteComponent
+      useExisting: GfSymbolAutocompleteComponent
     }
-  ]
+  ],
+  selector: 'gf-symbol-autocomplete',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  standalone: true,
+  styleUrls: ['./symbol-autocomplete.component.scss'],
+  templateUrl: 'symbol-autocomplete.component.html'
 })
-export class SymbolAutocompleteComponent
+export class GfSymbolAutocompleteComponent
   extends AbstractMatFormField<LookupItem>
   implements OnInit, OnDestroy
 {

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.module.ts

@@ -1,29 +0,0 @@
-import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
-import { SymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete/symbol-autocomplete.component';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-
-@NgModule({
-  declarations: [SymbolAutocompleteComponent],
-  exports: [SymbolAutocompleteComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    GfPremiumIndicatorModule,
-    GfSymbolModule,
-    MatAutocompleteModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatProgressSpinnerModule,
-    ReactiveFormsModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfSymbolAutocompleteModule {}

libs/ui/src/lib/value/index.ts

@@ -1 +1 @@
-export * from './value.module';
+export * from './value.component';

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

@@ -1,20 +1,26 @@
 import { getLocale } from '@ghostfolio/common/helper';
 
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   Input,
   OnChanges
 } from '@angular/core';
 import { isNumber } from 'lodash';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
-  selector: 'gf-value',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './value.component.html',
-  styleUrls: ['./value.component.scss']
+  imports: [CommonModule, NgxSkeletonLoaderModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-value',
+  standalone: true,
+  styleUrls: ['./value.component.scss'],
+  templateUrl: './value.component.html'
 })
-export class ValueComponent implements OnChanges {
+export class GfValueComponent implements OnChanges {
   @Input() colorizeSign = false;
   @Input() icon = '';
   @Input() isAbsolute = false;

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

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { ValueComponent } from './value.component';
-
-@NgModule({
-  declarations: [ValueComponent],
-  exports: [ValueComponent],
-  imports: [CommonModule, NgxSkeletonLoaderModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfValueModule {}