Migrate UI components to standalone (#3296)

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

@@ -4,7 +4,7 @@ import { GfInvestmentChartModule } from '@ghostfolio/client/components/investmen
 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 { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -25,7 +25,7 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
     GfDialogHeaderModule,
     GfHoldingsTableComponent,
     GfInvestmentChartModule,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatDialogModule,
     MatTabsModule,

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

@@ -1,5 +1,5 @@
 import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
-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';
@@ -18,7 +18,7 @@ import { AccountsTableComponent } from './accounts-table.component';
   imports: [
     CommonModule,
     GfAssetProfileIconComponent,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatMenuModule,
     MatSortModule,

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

@@ -1,9 +1,9 @@
 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';
+import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
-import { GfValueModule } from '@ghostfolio/ui/value';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
@@ -26,9 +26,9 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
     FormsModule,
     GfAdminMarketDataDetailModule,
     GfAssetProfileIconComponent,
-    GfCurrencySelectorModule,
+    GfCurrencySelectorComponent,
     GfPortfolioProportionChartModule,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatCheckboxModule,
     MatDialogModule,

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

@@ -1,4 +1,4 @@
-import { GfSymbolAutocompleteModule } from '@ghostfolio/ui/symbol-autocomplete';
+import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -16,7 +16,7 @@ import { CreateAssetProfileDialog } from './create-asset-profile-dialog.componen
   imports: [
     CommonModule,
     FormsModule,
-    GfSymbolAutocompleteModule,
+    GfSymbolAutocompleteComponent,
     MatDialogModule,
     MatButtonModule,
     MatFormFieldModule,

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

@@ -1,5 +1,5 @@
 import { CacheService } from '@ghostfolio/client/services/cache.service';
-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';
@@ -19,7 +19,7 @@ import { AdminOverviewComponent } from './admin-overview.component';
   imports: [
     CommonModule,
     FormsModule,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatCardModule,
     MatMenuModule,

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

@@ -1,5 +1,5 @@
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-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,8 +14,8 @@ import { AdminUsersComponent } from './admin-users.component';
   exports: [],
   imports: [
     CommonModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatMenuModule,
     MatTableModule

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts

@@ -1,4 +1,4 @@
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -15,7 +15,7 @@ import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
   imports: [
     CommonModule,
     FormsModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
     MatSelectModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,

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

@@ -1,7 +1,7 @@
 import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module';
 import { GfAssistantModule } from '@ghostfolio/ui/assistant';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -19,7 +19,7 @@ import { HeaderComponent } from './header.component';
     CommonModule,
     GfAssistantModule,
     GfLogoModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
     LoginWithAccessTokenDialogModule,
     MatButtonModule,
     MatMenuModule,

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

@@ -1,6 +1,6 @@
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
 import { GfLineChartModule } from '@ghostfolio/ui/line-chart';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
+import { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -14,7 +14,7 @@ import { HomeOverviewComponent } from './home-overview.component';
   imports: [
     CommonModule,
     GfLineChartModule,
-    GfNoTransactionsInfoModule,
+    GfNoTransactionsInfoComponent,
     GfPortfolioPerformanceModule,
     MatButtonModule,
     RouterModule

apps/client/src/app/components/portfolio-performance/portfolio-performance.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';
@@ -9,7 +9,7 @@ import { PortfolioPerformanceComponent } from './portfolio-performance.component
 @NgModule({
   declarations: [PortfolioPerformanceComponent],
   exports: [PortfolioPerformanceComponent],
-  imports: [CommonModule, GfValueModule, NgxSkeletonLoaderModule],
+  imports: [CommonModule, GfValueComponent, NgxSkeletonLoaderModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPortfolioPerformanceModule {}

apps/client/src/app/components/portfolio-summary/portfolio-summary.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';
@@ -8,7 +8,7 @@ import { PortfolioSummaryComponent } from './portfolio-summary.component';
 @NgModule({
   declarations: [PortfolioSummaryComponent],
   exports: [PortfolioSummaryComponent],
-  imports: [CommonModule, GfValueModule],
+  imports: [CommonModule, GfValueComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPortfolioSummaryModule {}

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

@@ -5,7 +5,7 @@ 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';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
-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';
@@ -28,7 +28,7 @@ import { PositionDetailDialog } from './position-detail-dialog.component';
     GfDialogHeaderModule,
     GfLineChartModule,
     GfPortfolioProportionChartModule,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatChipsModule,
     MatDialogModule,

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

@@ -1,6 +1,6 @@
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfTrendIndicatorComponent } from '@ghostfolio/ui/trend-indicator';
-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';
@@ -19,7 +19,7 @@ import { PositionComponent } from './position.component';
     GfPositionDetailDialogModule,
     GfSymbolModule,
     GfTrendIndicatorComponent,
-    GfValueModule,
+    GfValueComponent,
     MatDialogModule,
     NgxSkeletonLoaderModule,
     RouterModule

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

@@ -1,4 +1,4 @@
-import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
+import { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -12,7 +12,7 @@ import { PositionsComponent } from './positions.component';
   exports: [PositionsComponent],
   imports: [
     CommonModule,
-    GfNoTransactionsInfoModule,
+    GfNoTransactionsInfoComponent,
     GfPositionModule,
     MatButtonModule
   ],

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

@@ -1,5 +1,5 @@
 import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
+import { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -14,7 +14,7 @@ import { RulesComponent } from './rules.component';
   exports: [RulesComponent],
   imports: [
     CommonModule,
-    GfNoTransactionsInfoModule,
+    GfNoTransactionsInfoComponent,
     GfPositionModule,
     GfRuleModule,
     MatButtonModule,

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts

@@ -1,4 +1,4 @@
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -12,7 +12,7 @@ import { SubscriptionInterstitialDialog } from './subscription-interstitial-dial
   declarations: [SubscriptionInterstitialDialog],
   imports: [
     CommonModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
     MatButtonModule,
     MatDialogModule,
     RouterModule

apps/client/src/app/components/user-account-access/user-account-access.module.ts

@@ -1,5 +1,5 @@
 import { GfPortfolioAccessTableModule } from '@ghostfolio/client/components/access-table/access-table.module';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -17,7 +17,7 @@ import { UserAccountAccessComponent } from './user-account-access.component';
     CommonModule,
     GfCreateOrUpdateAccessDialogModule,
     GfPortfolioAccessTableModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
     MatButtonModule,
     MatDialogModule,
     RouterModule

apps/client/src/app/components/user-account-membership/user-account-membership.module.ts

@@ -1,6 +1,6 @@
 import { GfMembershipCardModule } from '@ghostfolio/ui/membership-card';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-import { GfValueModule } from '@ghostfolio/ui/value';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -16,8 +16,8 @@ import { UserAccountMembershipComponent } from './user-account-membership.compon
   imports: [
     CommonModule,
     GfMembershipCardModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatCardModule,
     RouterModule

apps/client/src/app/components/user-account-settings/user-account-settings.module.ts

@@ -1,4 +1,4 @@
-import { GfValueModule } from '@ghostfolio/ui/value';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -18,7 +18,7 @@ import { UserAccountSettingsComponent } from './user-account-settings.component'
   imports: [
     CommonModule,
     FormsModule,
-    GfValueModule,
+    GfValueComponent,
     MatButtonModule,
     MatCardModule,
     MatFormFieldModule,

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';
+import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector';
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -19,7 +19,7 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.c
     CommonModule,
     FormsModule,
     GfAssetProfileIconComponent,
-    GfCurrencySelectorModule,
+    GfCurrencySelectorComponent,
     MatAutocompleteModule,
     MatButtonModule,
     MatCheckboxModule,

apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.component.ts

@@ -1,4 +1,4 @@
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -6,7 +6,7 @@ import { RouterModule } from '@angular/router';
 
 @Component({
   host: { class: 'page' },
-  imports: [GfPremiumIndicatorModule, MatButtonModule, RouterModule],
+  imports: [GfPremiumIndicatorComponent, MatButtonModule, RouterModule],
   selector: 'gf-black-friday-2022-page',
   standalone: true,
   templateUrl: './black-friday-2022-page.html'

apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.component.ts

@@ -1,4 +1,4 @@
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -6,7 +6,7 @@ import { RouterModule } from '@angular/router';
 
 @Component({
   host: { class: 'page' },
-  imports: [GfPremiumIndicatorModule, MatButtonModule, RouterModule],
+  imports: [GfPremiumIndicatorComponent, MatButtonModule, RouterModule],
   selector: 'gf-black-week-2023-page',
   standalone: true,
   templateUrl: './black-week-2023-page.html'

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

@@ -1,4 +1,4 @@
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -13,7 +13,7 @@ import { FeaturesPageComponent } from './features-page.component';
   imports: [
     CommonModule,
     FeaturesPageRoutingModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
     MatButtonModule,
     MatCardModule
   ],

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

@@ -1,7 +1,7 @@
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfCarouselModule } from '@ghostfolio/ui/carousel';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
-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';
@@ -18,7 +18,7 @@ import { LandingPageComponent } from './landing-page.component';
     CommonModule,
     GfCarouselModule,
     GfLogoModule,
-    GfValueModule,
+    GfValueComponent,
     GfWorldMapChartModule,
     LandingPageRoutingModule,
     MatButtonModule,

apps/client/src/app/pages/open/open-page.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';
@@ -9,7 +9,12 @@ import { OpenPageComponent } from './open-page.component';
 
 @NgModule({
   declarations: [OpenPageComponent],
-  imports: [CommonModule, GfValueModule, MatCardModule, OpenPageRoutingModule],
+  imports: [
+    CommonModule,
+    GfValueComponent,
+    MatCardModule,
+    OpenPageRoutingModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class OpenPageModule {}

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

@@ -1,6 +1,6 @@
 import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component';
-import { GfSymbolAutocompleteModule } from '@ghostfolio/ui/symbol-autocomplete/symbol-autocomplete.module';
+import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete';
-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';
@@ -23,8 +23,8 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
     CommonModule,
     FormsModule,
     GfAssetProfileIconComponent,
-    GfSymbolAutocompleteModule,
+    GfSymbolAutocompleteComponent,
-    GfValueModule,
+    GfValueComponent,
     MatAutocompleteModule,
     MatButtonModule,
     MatCheckboxModule,

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

@@ -1,7 +1,7 @@
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-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';
@@ -18,9 +18,9 @@ import { AllocationsPageComponent } from './allocations-page.component';
     AllocationsPageRoutingModule,
     CommonModule,
     GfPortfolioProportionChartModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
     GfWorldMapChartModule,
-    GfValueModule,
+    GfValueComponent,
     MatCardModule,
     MatDialogModule,
     MatProgressBarModule

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

@@ -2,8 +2,8 @@ import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/bench
 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';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-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';
@@ -21,9 +21,9 @@ import { AnalysisPageComponent } from './analysis-page.component';
     GfActivitiesFilterModule,
     GfBenchmarkComparatorModule,
     GfInvestmentChartModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
     GfToggleModule,
-    GfValueModule,
+    GfValueComponent,
     MatCardModule,
     NgxSkeletonLoaderModule
   ],

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

@@ -1,7 +1,7 @@
 import { GfRulesModule } from '@ghostfolio/client/components/rules/rules.module';
 import { GfFireCalculatorComponent } from '@ghostfolio/ui/fire-calculator';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-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';
@@ -16,9 +16,9 @@ import { FirePageComponent } from './fire-page.component';
     CommonModule,
     FirePageRoutingModule,
     GfFireCalculatorComponent,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
     GfRulesModule,
-    GfValueModule,
+    GfValueComponent,
     NgxSkeletonLoaderModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

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

@@ -1,4 +1,4 @@
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -14,7 +14,7 @@ import { PricingPageComponent } from './pricing-page.component';
   declarations: [PricingPageComponent],
   imports: [
     CommonModule,
-    GfPremiumIndicatorModule,
+    GfPremiumIndicatorComponent,
     MatButtonModule,
     MatCardModule,
     MatTooltipModule,

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

@@ -1,7 +1,7 @@
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
-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';
@@ -17,7 +17,7 @@ import { PublicPageComponent } from './public-page.component';
     CommonModule,
     GfHoldingsTableComponent,
     GfPortfolioProportionChartModule,
-    GfValueModule,
+    GfValueComponent,
     GfWorldMapChartModule,
     MatButtonModule,
     MatCardModule,

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 { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
-import { GfValueModule } from '@ghostfolio/ui/value';
+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 {
-import { MatInput } from '@angular/material/input';
+  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 { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
-import { GfValueModule } from '@ghostfolio/ui/value';
+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',
+  imports: [CommonModule, GfLogoModule, MatButtonModule, RouterModule],
-  styleUrls: ['./no-transactions-info.component.scss']
+  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',
+  imports: [CommonModule, RouterModule],
-  styleUrls: ['./premium-indicator.component.scss']
+  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 {
-import { MatInput } from '@angular/material/input';
+  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',
+  imports: [
-  styleUrls: ['./symbol-autocomplete.component.scss'],
+    CommonModule,
-  templateUrl: 'symbol-autocomplete.component.html',
+    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',
+  imports: [CommonModule, NgxSkeletonLoaderModule],
-  styleUrls: ['./value.component.scss']
+  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 {}