Migrate UI components to standalone (#3302)

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

@@ -1,4 +1,4 @@
-import { GfLogoModule } from '@ghostfolio/ui/logo';
+import { GfLogoComponent } from '@ghostfolio/ui/logo';
 
 import { Platform } from '@angular/cdk/platform';
 import { HttpClientModule } from '@angular/common/http';
@@ -43,7 +43,7 @@ export function NgxStripeFactory(): string {
     BrowserAnimationsModule,
     BrowserModule,
     GfHeaderModule,
-    GfLogoModule,
+    GfLogoComponent,
     GfSubscriptionInterstitialDialogModule,
     HttpClientModule,
     MarkdownModule.forRoot(),

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

@@ -1,7 +1,7 @@
 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';
+import { GfAccountBalancesComponent } from '@ghostfolio/ui/account-balances';
 import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
 import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
 import { GfValueComponent } from '@ghostfolio/ui/value';
@@ -19,7 +19,7 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
   declarations: [AccountDetailDialog],
   imports: [
     CommonModule,
-    GfAccountBalancesModule,
+    GfAccountBalancesComponent,
     GfActivitiesTableComponent,
     GfDialogFooterModule,
     GfDialogHeaderModule,

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';
+import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -9,7 +9,7 @@ import { GfMarketDataDetailDialogModule } from './market-data-detail-dialog/mark
 @NgModule({
   declarations: [AdminMarketDataDetailComponent],
   exports: [AdminMarketDataDetailComponent],
-  imports: [CommonModule, GfLineChartModule, GfMarketDataDetailDialogModule],
+  imports: [CommonModule, GfLineChartComponent, GfMarketDataDetailDialogModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAdminMarketDataDetailModule {}

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';
+import { GfActivitiesFilterComponent } from '@ghostfolio/ui/activities-filter';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -20,7 +20,7 @@ import { GfCreateAssetProfileDialogModule } from './create-asset-profile-dialog/
   declarations: [AdminMarketDataComponent],
   imports: [
     CommonModule,
-    GfActivitiesFilterModule,
+    GfActivitiesFilterComponent,
     GfAssetProfileDialogModule,
     GfCreateAssetProfileDialogModule,
     GfSymbolModule,

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

@@ -2,7 +2,7 @@ import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/adm
 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 { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector';
-import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
+import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { TextFieldModule } from '@angular/cdk/text-field';
@@ -27,7 +27,7 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
     GfAdminMarketDataDetailModule,
     GfAssetProfileIconComponent,
     GfCurrencySelectorComponent,
-    GfPortfolioProportionChartModule,
+    GfPortfolioProportionChartComponent,
     GfValueComponent,
     MatButtonModule,
     MatCheckboxModule,

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

@@ -12,7 +12,7 @@ import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { Filter, InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
-import { AssistantComponent } from '@ghostfolio/ui/assistant/assistant.component';
+import { GfAssistantComponent } from '@ghostfolio/ui/assistant/assistant.component';
 
 import {
   ChangeDetectionStrategy,
@@ -62,7 +62,7 @@ export class HeaderComponent implements OnChanges {
 
   @Output() signOut = new EventEmitter<void>();
 
-  @ViewChild('assistant') assistantElement: AssistantComponent;
+  @ViewChild('assistant') assistantElement: GfAssistantComponent;
   @ViewChild('assistantTrigger') assistentMenuTriggerElement: MatMenuTrigger;
 
   public hasPermissionForSocialLogin: boolean;

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

@@ -1,6 +1,6 @@
 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 { GfAssistantComponent } from '@ghostfolio/ui/assistant';
+import { GfLogoComponent } from '@ghostfolio/ui/logo';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
@@ -17,8 +17,8 @@ import { HeaderComponent } from './header.component';
   exports: [HeaderComponent],
   imports: [
     CommonModule,
-    GfAssistantModule,
-    GfLogoModule,
+    GfAssistantComponent,
+    GfLogoComponent,
     GfPremiumIndicatorComponent,
     LoginWithAccessTokenDialogModule,
     MatButtonModule,

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';
+import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
+import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -13,9 +13,9 @@ import { HomeMarketComponent } from './home-market.component';
   exports: [HomeMarketComponent],
   imports: [
     CommonModule,
-    GfBenchmarkModule,
+    GfBenchmarkComponent,
     GfFearAndGreedIndexModule,
-    GfLineChartModule,
+    GfLineChartComponent,
     NgxSkeletonLoaderModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

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';
+import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 import { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
 
 import { CommonModule } from '@angular/common';
@@ -13,7 +13,7 @@ import { HomeOverviewComponent } from './home-overview.component';
   declarations: [HomeOverviewComponent],
   imports: [
     CommonModule,
-    GfLineChartModule,
+    GfLineChartComponent,
     GfNoTransactionsInfoComponent,
     GfPortfolioPerformanceModule,
     MatButtonModule,

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

@@ -2,9 +2,9 @@ import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-ta
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.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';
-import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
+import { GfDataProviderCreditsComponent } from '@ghostfolio/ui/data-provider-credits';
+import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
+import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
@@ -23,11 +23,11 @@ import { PositionDetailDialog } from './position-detail-dialog.component';
     CommonModule,
     GfAccountsTableModule,
     GfActivitiesTableComponent,
-    GfDataProviderCreditsModule,
+    GfDataProviderCreditsComponent,
     GfDialogFooterModule,
     GfDialogHeaderModule,
-    GfLineChartModule,
-    GfPortfolioProportionChartModule,
+    GfLineChartComponent,
+    GfPortfolioProportionChartComponent,
     GfValueComponent,
     MatButtonModule,
     MatChipsModule,

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

@@ -1,4 +1,4 @@
-import { GfMembershipCardModule } from '@ghostfolio/ui/membership-card';
+import { GfMembershipCardComponent } from '@ghostfolio/ui/membership-card';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
@@ -15,7 +15,7 @@ import { UserAccountMembershipComponent } from './user-account-membership.compon
   exports: [UserAccountMembershipComponent],
   imports: [
     CommonModule,
-    GfMembershipCardModule,
+    GfMembershipCardComponent,
     GfPremiumIndicatorComponent,
     GfValueComponent,
     MatButtonModule,

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

@@ -1,6 +1,6 @@
 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 { GfCarouselComponent } from '@ghostfolio/ui/carousel';
+import { GfLogoComponent } from '@ghostfolio/ui/logo';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
@@ -16,8 +16,8 @@ import { LandingPageComponent } from './landing-page.component';
   declarations: [LandingPageComponent],
   imports: [
     CommonModule,
-    GfCarouselModule,
-    GfLogoModule,
+    GfCarouselComponent,
+    GfLogoComponent,
     GfValueComponent,
     GfWorldMapChartModule,
     LandingPageRoutingModule,

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';
+import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
@@ -17,7 +17,7 @@ import { AllocationsPageComponent } from './allocations-page.component';
   imports: [
     AllocationsPageRoutingModule,
     CommonModule,
-    GfPortfolioProportionChartModule,
+    GfPortfolioProportionChartComponent,
     GfPremiumIndicatorComponent,
     GfWorldMapChartModule,
     GfValueComponent,

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';
+import { GfActivitiesFilterComponent } from '@ghostfolio/ui/activities-filter';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
@@ -18,7 +18,7 @@ import { AnalysisPageComponent } from './analysis-page.component';
   imports: [
     AnalysisPageRoutingModule,
     CommonModule,
-    GfActivitiesFilterModule,
+    GfActivitiesFilterComponent,
     GfBenchmarkComparatorModule,
     GfInvestmentChartModule,
     GfPremiumIndicatorComponent,

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 { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
-import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart';
+import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
@@ -16,7 +16,7 @@ import { PublicPageComponent } from './public-page.component';
   imports: [
     CommonModule,
     GfHoldingsTableComponent,
-    GfPortfolioProportionChartModule,
+    GfPortfolioProportionChartComponent,
     GfValueComponent,
     GfWorldMapChartModule,
     MatButtonModule,

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

@@ -1,4 +1,4 @@
-import { GfLogoModule } from '@ghostfolio/ui/logo';
+import { GfLogoComponent } from '@ghostfolio/ui/logo';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -13,7 +13,7 @@ import { ShowAccessTokenDialogModule } from './show-access-token-dialog/show-acc
   declarations: [RegisterPageComponent],
   imports: [
     CommonModule,
-    GfLogoModule,
+    GfLogoComponent,
     MatButtonModule,
     RegisterPageRoutingModule,
     RouterModule,

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

@@ -1,5 +1,5 @@
 import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component';
-import { GfLogoModule } from '@ghostfolio/ui/logo';
+import { GfLogoComponent } from '@ghostfolio/ui/logo';
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -12,7 +12,7 @@ import { WebauthnPageRoutingModule } from './webauthn-page-routing.module';
   declarations: [WebauthnPageComponent],
   imports: [
     CommonModule,
-    GfLogoModule,
+    GfLogoComponent,
     MatButtonModule,
     MatProgressSpinnerModule,
     WebauthnPageRoutingModule

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 {}