Migrate UI components to standalone (#3302)

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

@@ -1,7 +1,9 @@
 import { getLocale } from '@ghostfolio/common/helper';
 import { AccountBalancesResponse } from '@ghostfolio/common/interfaces';
 
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
@@ -12,18 +14,34 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { get } from 'lodash';
 import { Subject } from 'rxjs';
 
+import { GfValueComponent } from '../value';
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    GfValueComponent,
+    MatButtonModule,
+    MatMenuModule,
+    MatSortModule,
+    MatTableModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-account-balances',
+  standalone: true,
   styleUrls: ['./account-balances.component.scss'],
   templateUrl: './account-balances.component.html'
 })
-export class AccountBalancesComponent implements OnChanges, OnDestroy, OnInit {
+export class GfAccountBalancesComponent
+  implements OnChanges, OnDestroy, OnInit
+{
   @Input() accountBalances: AccountBalancesResponse['balances'];
   @Input() accountId: string;
   @Input() locale = getLocale();

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

@@ -1,25 +0,0 @@
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-
-import { AccountBalancesComponent } from './account-balances.component';
-
-@NgModule({
-  declarations: [AccountBalancesComponent],
-  exports: [AccountBalancesComponent],
-  imports: [
-    CommonModule,
-    GfValueComponent,
-    MatButtonModule,
-    MatMenuModule,
-    MatSortModule,
-    MatTableModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAccountBalancesModule {}

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

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

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

@@ -1,8 +1,11 @@
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { Filter, FilterGroup } from '@ghostfolio/common/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
@@ -14,23 +17,39 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import {
   MatAutocomplete,
+  MatAutocompleteModule,
   MatAutocompleteSelectedEvent
 } from '@angular/material/autocomplete';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { groupBy } from 'lodash';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    GfSymbolModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatChipsModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    ReactiveFormsModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-activities-filter',
+  standalone: true,
   styleUrls: ['./activities-filter.component.scss'],
   templateUrl: './activities-filter.component.html'
 })
-export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
+export class GfActivitiesFilterComponent implements OnChanges, OnDestroy {
   @Input() allFilters: Filter[];
   @Input() isLoading: boolean;
   @Input() placeholder: string;

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

@@ -1,29 +0,0 @@
-import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-
-import { ActivitiesFilterComponent } from './activities-filter.component';
-
-@NgModule({
-  declarations: [ActivitiesFilterComponent],
-  exports: [ActivitiesFilterComponent],
-  imports: [
-    CommonModule,
-    GfSymbolModule,
-    MatAutocompleteModule,
-    MatButtonModule,
-    MatChipsModule,
-    MatInputModule,
-    MatProgressSpinnerModule,
-    ReactiveFormsModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfActivitiesFilterModule {}

libs/ui/src/lib/activities-filter/index.ts

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

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

@@ -5,7 +5,7 @@ import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
 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 { GfActivityTypeComponent } from '@ghostfolio/ui/activity-type';
 import { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
@@ -50,7 +50,7 @@ import { Subject, Subscription, takeUntil } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
-    GfActivityTypeModule,
+    GfActivityTypeComponent,
     GfAssetProfileIconComponent,
     GfNoTransactionsInfoComponent,
     GfSymbolModule,

libs/ui/src/lib/activity-type/activity-type.component.ts

@@ -1,6 +1,8 @@
 import { translate } from '@ghostfolio/ui/i18n';
 
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   Input,
@@ -10,11 +12,14 @@ import { Type as ActivityType } from '@prisma/client';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-activity-type',
+  standalone: true,
   styleUrls: ['./activity-type.component.scss'],
   templateUrl: './activity-type.component.html'
 })
-export class ActivityTypeComponent implements OnChanges {
+export class GfActivityTypeComponent implements OnChanges {
   @Input() activityType: ActivityType;
 
   public activityTypeLabel: string;

libs/ui/src/lib/activity-type/activity-type.module.ts

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

libs/ui/src/lib/activity-type/index.ts

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

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.component.ts

@@ -1,6 +1,8 @@
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { ISearchResultItem } from '@ghostfolio/ui/assistant/interfaces/interfaces';
 
 import { FocusableOption } from '@angular/cdk/a11y';
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -13,15 +15,19 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { Params } from '@angular/router';
+import { Params, RouterModule } from '@angular/router';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, GfSymbolModule, RouterModule],
   selector: 'gf-assistant-list-item',
-  templateUrl: './assistant-list-item.html',
-  styleUrls: ['./assistant-list-item.scss']
+  standalone: true,
+  styleUrls: ['./assistant-list-item.scss'],
+  templateUrl: './assistant-list-item.html'
 })
-export class AssistantListItemComponent implements FocusableOption, OnChanges {
+export class GfAssistantListItemComponent
+  implements FocusableOption, OnChanges
+{
   @HostBinding('attr.tabindex') tabindex = -1;
   @HostBinding('class.has-focus') get getHasFocus() {
     return this.hasFocus;

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.module.ts

@@ -1,14 +0,0 @@
-import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AssistantListItemComponent } from './assistant-list-item.component';
-
-@NgModule({
-  declarations: [AssistantListItemComponent],
-  exports: [AssistantListItemComponent],
-  imports: [CommonModule, GfSymbolModule, RouterModule]
-})
-export class GfAssistantListItemModule {}

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

@@ -1,3 +1,4 @@
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { Filter, User } from '@ghostfolio/common/interfaces';
@@ -5,7 +6,9 @@ import { DateRange } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import { FocusKeyManager } from '@angular/cdk/a11y';
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -21,10 +24,20 @@ import {
   ViewChild,
   ViewChildren
 } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import {
+  FormBuilder,
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatMenuTrigger } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { RouterModule } from '@angular/router';
 import { Account, AssetClass } from '@prisma/client';
 import { eachYearOfInterval, format } from 'date-fns';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { EMPTY, Observable, Subject, lastValueFrom } from 'rxjs';
 import {
   catchError,
@@ -35,7 +48,7 @@ import {
   takeUntil
 } from 'rxjs/operators';
 
-import { AssistantListItemComponent } from './assistant-list-item/assistant-list-item.component';
+import { GfAssistantListItemComponent } from './assistant-list-item/assistant-list-item.component';
 import {
   IDateRangeOption,
   ISearchResultItem,
@@ -44,11 +57,25 @@ import {
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    FormsModule,
+    GfAssetProfileIconComponent,
+    GfAssistantListItemComponent,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    NgxSkeletonLoaderModule,
+    ReactiveFormsModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-assistant',
+  standalone: true,
   styleUrls: ['./assistant.scss'],
   templateUrl: './assistant.html'
 })
-export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
+export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
   @HostListener('document:keydown', ['$event']) onKeydown(
     event: KeyboardEvent
   ) {
@@ -92,8 +119,8 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
   @ViewChild('menuTrigger') menuTriggerElement: MatMenuTrigger;
   @ViewChild('search', { static: true }) searchElement: ElementRef;
 
-  @ViewChildren(AssistantListItemComponent)
-  assistantListItems: QueryList<AssistantListItemComponent>;
+  @ViewChildren(GfAssistantListItemComponent)
+  assistantListItems: QueryList<GfAssistantListItemComponent>;
 
   public static readonly SEARCH_RESULTS_DEFAULT_LIMIT = 5;
 
@@ -117,7 +144,7 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
   public tags: Filter[] = [];
 
   private filterTypes: Filter['type'][] = ['ACCOUNT', 'ASSET_CLASS', 'TAG'];
-  private keyManager: FocusKeyManager<AssistantListItemComponent>;
+  private keyManager: FocusKeyManager<GfAssistantListItemComponent>;
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -334,7 +361,7 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
         );
         assetProfiles = assetProfiles.slice(
           0,
-          AssistantComponent.SEARCH_RESULTS_DEFAULT_LIMIT
+          GfAssistantComponent.SEARCH_RESULTS_DEFAULT_LIMIT
         );
       } catch {}
     }
@@ -343,7 +370,7 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
       holdings = await lastValueFrom(this.searchHoldings(aSearchTerm));
       holdings = holdings.slice(
         0,
-        AssistantComponent.SEARCH_RESULTS_DEFAULT_LIMIT
+        GfAssistantComponent.SEARCH_RESULTS_DEFAULT_LIMIT
       );
     } catch {}
 
@@ -364,7 +391,7 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
             type: 'SEARCH_QUERY'
           }
         ],
-        take: AssistantComponent.SEARCH_RESULTS_DEFAULT_LIMIT
+        take: GfAssistantComponent.SEARCH_RESULTS_DEFAULT_LIMIT
       })
       .pipe(
         catchError(() => {

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

@@ -1,32 +0,0 @@
-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';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { RouterModule } from '@angular/router';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { GfAssistantListItemModule } from './assistant-list-item/assistant-list-item.module';
-import { AssistantComponent } from './assistant.component';
-
-@NgModule({
-  declarations: [AssistantComponent],
-  exports: [AssistantComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    GfAssetProfileIconComponent,
-    GfAssistantListItemModule,
-    MatButtonModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    NgxSkeletonLoaderModule,
-    ReactiveFormsModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAssistantModule {}

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

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

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

@@ -2,20 +2,36 @@ import { getLocale, resolveMarketCondition } from '@ghostfolio/common/helper';
 import { Benchmark, User } from '@ghostfolio/common/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
 
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   Input,
   OnChanges
 } from '@angular/core';
+import { MatTableModule } from '@angular/material/table';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { GfTrendIndicatorComponent } from '../trend-indicator';
+import { GfValueComponent } from '../value';
 
 @Component({
-  selector: 'gf-benchmark',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './benchmark.component.html',
-  styleUrls: ['./benchmark.component.scss']
+  imports: [
+    CommonModule,
+    GfTrendIndicatorComponent,
+    GfValueComponent,
+    MatTableModule,
+    NgxSkeletonLoaderModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-benchmark',
+  standalone: true,
+  styleUrls: ['./benchmark.component.scss'],
+  templateUrl: './benchmark.component.html'
 })
-export class BenchmarkComponent implements OnChanges {
+export class GfBenchmarkComponent implements OnChanges {
   @Input() benchmarks: Benchmark[];
   @Input() locale = getLocale();
   @Input() user: User;

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

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatTableModule } from '@angular/material/table';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { GfTrendIndicatorComponent } from '../trend-indicator';
-import { GfValueComponent } from '../value';
-import { BenchmarkComponent } from './benchmark.component';
-
-@NgModule({
-  declarations: [BenchmarkComponent],
-  exports: [BenchmarkComponent],
-  imports: [
-    CommonModule,
-    GfTrendIndicatorComponent,
-    GfValueComponent,
-    MatTableModule,
-    NgxSkeletonLoaderModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfBenchmarkModule {}

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

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

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

@@ -1,7 +1,9 @@
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { LEFT_ARROW, RIGHT_ARROW, TAB } from '@angular/cdk/keycodes';
+import { CommonModule } from '@angular/common';
 import {
   AfterContentInit,
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   ContentChildren,
@@ -13,17 +15,21 @@ import {
   QueryList,
   ViewChild
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 
 import { CarouselItem } from './carousel-item.directive';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, MatButtonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-carousel',
+  standalone: true,
   styleUrls: ['./carousel.component.scss'],
   templateUrl: './carousel.component.html'
 })
-export class CarouselComponent implements AfterContentInit {
+export class GfCarouselComponent implements AfterContentInit {
   @ContentChildren(CarouselItem) public items!: QueryList<CarouselItem>;
 
   @HostBinding('class.animations-disabled')

libs/ui/src/lib/carousel/carousel.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 { CarouselItem } from './carousel-item.directive';
-import { CarouselComponent } from './carousel.component';
-
-@NgModule({
-  declarations: [CarouselComponent, CarouselItem],
-  exports: [CarouselComponent, CarouselItem],
-  imports: [CommonModule, MatButtonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfCarouselModule {}

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

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

libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts

@@ -1,14 +1,23 @@
 import { DataProviderInfo } from '@ghostfolio/common/interfaces';
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  Input
+} from '@angular/core';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-data-provider-credits',
+  standalone: true,
   styleUrls: ['./data-provider-credits.component.scss'],
   templateUrl: './data-provider-credits.component.html'
 })
-export class DataProviderCreditsComponent {
+export class GfDataProviderCreditsComponent {
   @Input() dataProviderInfos: DataProviderInfo[];
 
   public constructor() {}

libs/ui/src/lib/data-provider-credits/data-provider-credits.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-
-import { DataProviderCreditsComponent } from './data-provider-credits.component';
-
-@NgModule({
-  declarations: [DataProviderCreditsComponent],
-  exports: [DataProviderCreditsComponent],
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfDataProviderCreditsModule {}

libs/ui/src/lib/data-provider-credits/index.ts

@@ -1 +1 @@
-export * from './data-provider-credits.module';
+export * from './data-provider-credits.component';

libs/ui/src/lib/line-chart/index.ts

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

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -13,6 +13,7 @@ import {
 import { LineChartItem } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -34,14 +35,19 @@ import {
   Tooltip
 } from 'chart.js';
 import 'chartjs-adapter-date-fns';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
-  selector: 'gf-line-chart',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './line-chart.component.html',
-  styleUrls: ['./line-chart.component.scss']
+  imports: [CommonModule, NgxSkeletonLoaderModule],
+  selector: 'gf-line-chart',
+  standalone: true,
+  styleUrls: ['./line-chart.component.scss'],
+  templateUrl: './line-chart.component.html'
 })
-export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class GfLineChartComponent
+  implements AfterViewInit, OnChanges, OnDestroy
+{
   @Input() benchmarkDataItems: LineChartItem[] = [];
   @Input() benchmarkLabel = '';
   @Input() colorScheme: ColorScheme;

libs/ui/src/lib/line-chart/line-chart.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { LineChartComponent } from './line-chart.component';
-
-@NgModule({
-  declarations: [LineChartComponent],
-  exports: [LineChartComponent],
-  imports: [CommonModule, NgxSkeletonLoaderModule]
-})
-export class GfLineChartModule {}

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

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

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

@@ -1,4 +1,6 @@
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   HostBinding,
@@ -6,12 +8,15 @@ import {
 } from '@angular/core';
 
 @Component({
-  selector: 'gf-logo',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './logo.component.html',
-  styleUrls: ['./logo.component.scss']
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-logo',
+  standalone: true,
+  styleUrls: ['./logo.component.scss'],
+  templateUrl: './logo.component.html'
 })
-export class LogoComponent {
+export class GfLogoComponent {
   @HostBinding('class') @Input() size: 'large' | 'medium' = 'medium';
   @Input() label: string;
   @Input() showLabel = true;

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

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

libs/ui/src/lib/membership-card/index.ts

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

libs/ui/src/lib/membership-card/membership-card.component.ts

@@ -1,12 +1,24 @@
-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';
+
+import { GfLogoComponent } from '../logo';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, GfLogoComponent, RouterModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-membership-card',
+  standalone: true,
   styleUrls: ['./membership-card.component.scss'],
   templateUrl: './membership-card.component.html'
 })
-export class MembershipCardComponent {
+export class GfMembershipCardComponent {
   @Input() public expiresAt: string;
   @Input() public name: string;
 

libs/ui/src/lib/membership-card/membership-card.module.ts

@@ -1,15 +0,0 @@
-import { GfLogoModule } from '@ghostfolio/ui/logo';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { MembershipCardComponent } from './membership-card.component';
-
-@NgModule({
-  declarations: [MembershipCardComponent],
-  exports: [MembershipCardComponent],
-  imports: [CommonModule, GfLogoModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfMembershipCardModule {}

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

@@ -9,11 +9,11 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
-import { GfLogoModule } from '../logo';
+import { GfLogoComponent } from '../logo';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, GfLogoModule, MatButtonModule, RouterModule],
+  imports: [CommonModule, GfLogoComponent, MatButtonModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-no-transactions-info-indicator',
   standalone: true,

libs/ui/src/lib/portfolio-proportion-chart/index.ts

@@ -1 +1 @@
-export * from './portfolio-proportion-chart.module';
+export * from './portfolio-proportion-chart.component';

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -5,6 +5,7 @@ import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
 
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -26,14 +27,17 @@ import { DoughnutController } from 'chart.js';
 import { Chart } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import * as Color from 'color';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
-  selector: 'gf-portfolio-proportion-chart',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './portfolio-proportion-chart.component.html',
-  styleUrls: ['./portfolio-proportion-chart.component.scss']
+  imports: [CommonModule, NgxSkeletonLoaderModule],
+  selector: 'gf-portfolio-proportion-chart',
+  standalone: true,
+  styleUrls: ['./portfolio-proportion-chart.component.scss'],
+  templateUrl: './portfolio-proportion-chart.component.html'
 })
-export class PortfolioProportionChartComponent
+export class GfPortfolioProportionChartComponent
   implements AfterViewInit, OnChanges, OnDestroy
 {
   @Input() baseCurrency: string;

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { PortfolioProportionChartComponent } from './portfolio-proportion-chart.component';
-
-@NgModule({
-  declarations: [PortfolioProportionChartComponent],
-  exports: [PortfolioProportionChartComponent],
-  imports: [CommonModule, NgxSkeletonLoaderModule]
-})
-export class GfPortfolioProportionChartModule {}