Migrate UI components to standalone (#3290)

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

@@ -1,9 +1,9 @@
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
-import { GfAccountBalancesModule } from '@ghostfolio/ui/account-balances/account-balances.module';
-import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
-import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
+import { GfAccountBalancesModule } from '@ghostfolio/ui/account-balances';
+import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
+import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
@@ -20,10 +20,10 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
   imports: [
     CommonModule,
     GfAccountBalancesModule,
-    GfActivitiesTableModule,
+    GfActivitiesTableComponent,
     GfDialogFooterModule,
     GfDialogHeaderModule,
-    GfHoldingsTableModule,
+    GfHoldingsTableComponent,
     GfInvestmentChartModule,
     GfValueModule,
     MatButtonModule,

apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.module.ts

@@ -1,4 +1,4 @@
-import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

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

@@ -1,5 +1,5 @@
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
-import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
+import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

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

@@ -1,8 +1,8 @@
 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 { 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 { GfCurrencySelectorModule } from '@ghostfolio/ui/currency-selector';
+import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { TextFieldModule } from '@angular/cdk/text-field';

apps/client/src/app/components/home-market/home-market.module.ts

@@ -1,6 +1,6 @@
 import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
 import { GfBenchmarkModule } from '@ghostfolio/ui/benchmark/benchmark.module';
-import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

apps/client/src/app/components/home-overview/home-overview.module.ts

@@ -1,5 +1,5 @@
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
-import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { CommonModule } from '@angular/common';

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

@@ -1,10 +1,10 @@
 import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
-import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
+import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
 import { GfDataProviderCreditsModule } from '@ghostfolio/ui/data-provider-credits/data-provider-credits.module';
-import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
-import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart';
+import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
@@ -22,7 +22,7 @@ import { PositionDetailDialog } from './position-detail-dialog.component';
   imports: [
     CommonModule,
     GfAccountsTableModule,
-    GfActivitiesTableModule,
+    GfActivitiesTableComponent,
     GfDataProviderCreditsModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,

apps/client/src/app/components/position/position.module.ts

@@ -1,5 +1,5 @@
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
-import { GfTrendIndicatorModule } from '@ghostfolio/ui/trend-indicator';
+import { GfTrendIndicatorComponent } from '@ghostfolio/ui/trend-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
@@ -18,7 +18,7 @@ import { PositionComponent } from './position.component';
     CommonModule,
     GfPositionDetailDialogModule,
     GfSymbolModule,
-    GfTrendIndicatorModule,
+    GfTrendIndicatorComponent,
     GfValueModule,
     MatDialogModule,
     NgxSkeletonLoaderModule,

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

@@ -1,5 +1,5 @@
 import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
-import { GfCurrencySelectorModule } from '@ghostfolio/ui/currency-selector/currency-selector.module';
+import { GfCurrencySelectorModule } from '@ghostfolio/ui/currency-selector';
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';

apps/client/src/app/pages/portfolio/activities/activities-page.module.ts

@@ -1,5 +1,5 @@
 import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service';
-import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
+import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -17,7 +17,7 @@ import { GfImportActivitiesDialogModule } from './import-activities-dialog/impor
   imports: [
     ActivitiesPageRoutingModule,
     CommonModule,
-    GfActivitiesTableModule,
+    GfActivitiesTableComponent,
     GfCreateOrUpdateActivityDialogModule,
     GfImportActivitiesDialogModule,
     MatButtonModule,

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

@@ -2,7 +2,7 @@ import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-foote
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfFileDropModule } from '@ghostfolio/client/directives/file-drop/file-drop.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
-import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
+import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -22,7 +22,7 @@ import { ImportActivitiesDialog } from './import-activities-dialog.component';
   imports: [
     CommonModule,
     FormsModule,
-    GfActivitiesTableModule,
+    GfActivitiesTableComponent,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfFileDropModule,

apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts

@@ -1,5 +1,5 @@
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
-import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
+import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 

apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts

@@ -1,7 +1,7 @@
 import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
-import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
+import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 

apps/client/src/app/pages/portfolio/fire/fire-page.module.ts

@@ -1,5 +1,5 @@
 import { GfRulesModule } from '@ghostfolio/client/components/rules/rules.module';
-import { GfFireCalculatorModule } from '@ghostfolio/ui/fire-calculator';
+import { GfFireCalculatorComponent } from '@ghostfolio/ui/fire-calculator';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -15,7 +15,7 @@ import { FirePageComponent } from './fire-page.component';
   imports: [
     CommonModule,
     FirePageRoutingModule,
-    GfFireCalculatorModule,
+    GfFireCalculatorComponent,
     GfPremiumIndicatorModule,
     GfRulesModule,
     GfValueModule,

apps/client/src/app/pages/portfolio/holdings/holdings-page.module.ts

@@ -1,5 +1,5 @@
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
-import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
+import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -12,7 +12,7 @@ import { HoldingsPageComponent } from './holdings-page.component';
   declarations: [HoldingsPageComponent],
   imports: [
     CommonModule,
-    GfHoldingsTableModule,
+    GfHoldingsTableComponent,
     GfToggleModule,
     HoldingsPageRoutingModule,
     MatButtonModule

apps/client/src/app/pages/public/public-page.module.ts

@@ -1,6 +1,6 @@
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
-import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
-import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
+import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
+import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
@@ -15,7 +15,7 @@ import { PublicPageComponent } from './public-page.component';
   declarations: [PublicPageComponent],
   imports: [
     CommonModule,
-    GfHoldingsTableModule,
+    GfHoldingsTableComponent,
     GfPortfolioProportionChartModule,
     GfValueModule,
     GfWorldMapChartModule,

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

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

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

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

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

@@ -1,12 +1,19 @@
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
+import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 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 { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { SelectionModel } from '@angular/cdk/collections';
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
@@ -17,21 +24,54 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort, SortDirection } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
-import { Router } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatMenuModule } from '@angular/material/menu';
+import {
+  MatPaginator,
+  MatPaginatorModule,
+  PageEvent
+} from '@angular/material/paginator';
+import {
+  MatSort,
+  MatSortModule,
+  Sort,
+  SortDirection
+} from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router, RouterModule } from '@angular/router';
 import { isUUID } from 'class-validator';
 import { endOfToday, isAfter } from 'date-fns';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, Subscription, takeUntil } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    GfActivityTypeModule,
+    GfAssetProfileIconComponent,
+    GfNoTransactionsInfoModule,
+    GfSymbolModule,
+    GfValueModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    MatTooltipModule,
+    NgxSkeletonLoaderModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-activities-table',
+  standalone: true,
   styleUrls: ['./activities-table.component.scss'],
   templateUrl: './activities-table.component.html'
 })
-export class ActivitiesTableComponent
+export class GfActivitiesTableComponent
   implements AfterViewInit, OnChanges, OnDestroy, OnInit
 {
   @Input() baseCurrency: string;

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

@@ -1,43 +0,0 @@
-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';
-import { GfValueModule } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterModule } from '@angular/router';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { ActivitiesTableComponent } from './activities-table.component';
-
-@NgModule({
-  declarations: [ActivitiesTableComponent],
-  exports: [ActivitiesTableComponent],
-  imports: [
-    CommonModule,
-    GfActivityTypeModule,
-    GfAssetProfileIconComponent,
-    GfNoTransactionsInfoModule,
-    GfSymbolModule,
-    GfValueModule,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatMenuModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatTableModule,
-    MatTooltipModule,
-    NgxSkeletonLoaderModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfActivitiesTableModule {}

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

@@ -0,0 +1 @@
+export * from './activities-table.component';

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

@@ -3,7 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatTableModule } from '@angular/material/table';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfTrendIndicatorModule } from '../trend-indicator';
+import { GfTrendIndicatorComponent } from '../trend-indicator';
 import { GfValueModule } from '../value';
 import { BenchmarkComponent } from './benchmark.component';
 
@@ -12,7 +12,7 @@ import { BenchmarkComponent } from './benchmark.component';
   exports: [BenchmarkComponent],
   imports: [
     CommonModule,
-    GfTrendIndicatorModule,
+    GfTrendIndicatorComponent,
     GfValueModule,
     MatTableModule,
     NgxSkeletonLoaderModule

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

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

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -6,6 +6,7 @@ import { primaryColorRgb } from '@ghostfolio/common/config';
 import { getLocale } from '@ghostfolio/common/helper';
 import { ColorScheme } from '@ghostfolio/common/types';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -17,8 +18,19 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
-import { MatDatepicker } from '@angular/material/datepicker';
+import {
+  FormBuilder,
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MatDatepicker,
+  MatDatepickerModule
+} from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import {
   BarController,
   BarElement,
@@ -39,17 +51,30 @@ import {
   sub
 } from 'date-fns';
 import { isNumber } from 'lodash';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, debounceTime, takeUntil } from 'rxjs';
 
 import { FireCalculatorService } from './fire-calculator.service';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    NgxSkeletonLoaderModule,
+    ReactiveFormsModule
+  ],
+  providers: [FireCalculatorService],
   selector: 'gf-fire-calculator',
+  standalone: true,
   styleUrls: ['./fire-calculator.component.scss'],
   templateUrl: './fire-calculator.component.html'
 })
-export class FireCalculatorComponent implements OnChanges, OnDestroy {
+export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
   @Input() annualInterestRate = 5;
   @Input() colorScheme: ColorScheme;
   @Input() currency: string;

libs/ui/src/lib/fire-calculator/fire-calculator.module.ts

@@ -1,28 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { FireCalculatorComponent } from './fire-calculator.component';
-import { FireCalculatorService } from './fire-calculator.service';
-
-@NgModule({
-  declarations: [FireCalculatorComponent],
-  exports: [FireCalculatorComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatButtonModule,
-    MatDatepickerModule,
-    MatFormFieldModule,
-    MatInputModule,
-    NgxSkeletonLoaderModule,
-    ReactiveFormsModule
-  ],
-  providers: [FireCalculatorService]
-})
-export class GfFireCalculatorModule {}

libs/ui/src/lib/fire-calculator/index.ts

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

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

@@ -1,7 +1,14 @@
+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 { 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 { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
   Input,
@@ -10,20 +17,40 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
-import { Router } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { Router, RouterModule } from '@angular/router';
 import { AssetClass } from '@prisma/client';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, Subscription } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    GfAssetProfileIconComponent,
+    GfNoTransactionsInfoModule,
+    GfPositionDetailDialogModule,
+    GfSymbolModule,
+    GfValueModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    NgxSkeletonLoaderModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-holdings-table',
+  standalone: true,
   styleUrls: ['./holdings-table.component.scss'],
   templateUrl: './holdings-table.component.html'
 })
-export class HoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
+export class GfHoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() hasPermissionToCreateActivity: boolean;

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

@@ -1,39 +0,0 @@
-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 { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
-import { GfValueModule } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { RouterModule } from '@angular/router';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { HoldingsTableComponent } from './holdings-table.component';
-
-@NgModule({
-  declarations: [HoldingsTableComponent],
-  exports: [HoldingsTableComponent],
-  imports: [
-    CommonModule,
-    GfAssetProfileIconComponent,
-    GfNoTransactionsInfoModule,
-    GfPositionDetailDialogModule,
-    GfSymbolModule,
-    GfValueModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatTableModule,
-    NgxSkeletonLoaderModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfHoldingsTableModule {}

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

@@ -0,0 +1 @@
+export * from './holdings-table.component';

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

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

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

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

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

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

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

@@ -1,14 +1,24 @@
 import { DateRange, MarketState } from '@ghostfolio/common/types';
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  Input
+} from '@angular/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
-  selector: 'gf-trend-indicator',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './trend-indicator.component.html',
-  styleUrls: ['./trend-indicator.component.scss']
+  imports: [CommonModule, NgxSkeletonLoaderModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-trend-indicator',
+  standalone: true,
+  styleUrls: ['./trend-indicator.component.scss'],
+  templateUrl: './trend-indicator.component.html'
 })
-export class TrendIndicatorComponent {
+export class GfTrendIndicatorComponent {
   @Input() isLoading = false;
   @Input() marketState: MarketState = 'open';
   @Input() range: DateRange = 'max';

libs/ui/src/lib/trend-indicator/trend-indicator.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 { TrendIndicatorComponent } from './trend-indicator.component';
-
-@NgModule({
-  declarations: [TrendIndicatorComponent],
-  exports: [TrendIndicatorComponent],
-  imports: [CommonModule, NgxSkeletonLoaderModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfTrendIndicatorModule {}