Toggle Component Reallocation

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -1,4 +1,3 @@
-import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -12,6 +11,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { HoldingType, HoldingsViewMode } from '@ghostfolio/common/types';
 import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
+import { GfToggleComponent } from '@ghostfolio/ui/toggle';
 import { GfTreemapChartComponent } from '@ghostfolio/ui/treemap-chart';
 
 import { CommonModule } from '@angular/common';

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -28,7 +28,7 @@
             [defaultValue]="holdingType"
             [isLoading]="false"
             [options]="holdingTypeOptions"
-            (change)="onChangeHoldingType($event.value)"
+            (valueChange)="onChangeHoldingType($event.value)"
           />
         </div>
       </div>

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

@@ -1,5 +1,4 @@
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
-import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
@@ -14,6 +13,7 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
+import { GfToggleComponent } from '@ghostfolio/ui/toggle';
 
 import { CommonModule } from '@angular/common';
 import {
@@ -43,7 +43,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './home-overview.html'
 })
 export class GfHomeOverviewComponent implements OnDestroy, OnInit {
-  public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
+  public dateRangeOptions = GfToggleComponent;
   public deviceType: string;
   public errors: AssetProfileIdentifier[];
   public hasError: boolean;

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

@@ -1,5 +1,4 @@
 import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
-import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { resetHours } from '@ghostfolio/common/helper';
@@ -13,6 +12,7 @@ import {
 import { FearAndGreedIndexMode } from '@ghostfolio/common/types';
 import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
+import { GfToggleComponent } from '@ghostfolio/ui/toggle';
 
 import {
   ChangeDetectionStrategy,

apps/client/src/app/components/markets/markets.html

@@ -9,7 +9,7 @@
             [defaultValue]="fearAndGreedIndexMode"
             [isLoading]="false"
             [options]="fearAndGreedIndexModeOptions"
-            (change)="onChangeFearAndGreedIndexMode($event.value)"
+            (valueChange)="onChangeFearAndGreedIndexMode($event.value)"
           />
         </div>
       }

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

@@ -1,6 +1,5 @@
 import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
-import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -17,6 +16,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { AiPromptMode, GroupBy } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
+import { GfToggleComponent } from '@ghostfolio/ui/toggle';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { Clipboard } from '@angular/cdk/clipboard';
@@ -68,7 +68,6 @@ export class GfAnalysisPageComponent implements OnDestroy, OnInit {
   public benchmarkDataItems: HistoricalDataItem[] = [];
   public benchmarks: Partial<SymbolProfile>[];
   public bottom3: PortfolioPosition[];
-  public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public dividendsByGroup: InvestmentItem[];
   public dividendTimelineDataLabel = $localize`Dividend`;

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -375,7 +375,7 @@
           [defaultValue]="mode"
           [isLoading]="false"
           [options]="modeOptions"
-          (change)="onChangeGroupBy($event.value)"
+          (valueChange)="onChangeGroupBy($event.value)"
         />
       </div>
       @if (streaks) {
@@ -432,7 +432,7 @@
           [defaultValue]="mode"
           [isLoading]="false"
           [options]="modeOptions"
-          (change)="onChangeGroupBy($event.value)"
+          (valueChange)="onChangeGroupBy($event.value)"
         />
       </div>
       <div class="chart-container">

libs/ui/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/toggle';

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

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

apps/client/src/app/components/toggle/toggle.component.html → libs/ui/src/lib/toggle/toggle.component.html

@@ -1,5 +1,6 @@
 <mat-radio-group
   class="d-block text-nowrap"
+  [disabled]="isLoading"
   [formControl]="optionFormControl"
   (change)="onValueChange()"
 >
@@ -8,7 +9,7 @@
       class="d-inline-flex"
       [disabled]="isLoading"
       [ngClass]="{
-        'cursor-default': option.value === optionFormControl.value,
+        'cursor-default': option.value === optionFormControl.value || isLoading,
         'cursor-pointer': !isLoading && option.value !== optionFormControl.value
       }"
       [value]="option.value"

libs/ui/src/lib/toggle/toggle.component.stories.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatRadioModule } from '@angular/material/radio';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { GfToggleComponent } from './toggle.component';
+
+const DEFAULT_OPTIONS = [
+  { label: 'Today', value: '1d' },
+  { label: 'YTD', value: 'ytd' },
+  { label: '1Y', value: '1y' },
+  { label: '5Y', value: '5y' },
+  { label: 'Max', value: 'max' }
+];
+
+export default {
+  title: 'Toggle',
+  component: GfToggleComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, MatRadioModule, ReactiveFormsModule]
+    })
+  ]
+} as Meta<GfToggleComponent>;
+
+type Story = StoryObj<GfToggleComponent>;
+
+export const Default: Story = {
+  args: {
+    options: DEFAULT_OPTIONS,
+    defaultValue: '1d'
+  }
+};
+
+export const Loading: Story = {
+  args: {
+    options: DEFAULT_OPTIONS,
+    defaultValue: '1d',
+    isLoading: true
+  }
+};

apps/client/src/app/components/toggle/toggle.component.ts → libs/ui/src/lib/toggle/toggle.component.ts

@@ -16,23 +16,16 @@ import { MatRadioModule } from '@angular/material/radio';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CommonModule, MatRadioModule, ReactiveFormsModule],
   selector: 'gf-toggle',
+  standalone: true,
   styleUrls: ['./toggle.component.scss'],
   templateUrl: './toggle.component.html'
 })
 export class GfToggleComponent implements OnChanges {
-  public static DEFAULT_DATE_RANGE_OPTIONS: ToggleOption[] = [
-    { label: $localize`Today`, value: '1d' },
-    { label: $localize`YTD`, value: 'ytd' },
-    { label: $localize`1Y`, value: '1y' },
-    { label: $localize`5Y`, value: '5y' },
-    { label: $localize`Max`, value: 'max' }
-  ];
-
   @Input() defaultValue: string;
-  @Input() isLoading: boolean;
-  @Input() options: ToggleOption[];
+  @Input() isLoading = false;
+  @Input() options: ToggleOption[] = [];
 
-  @Output() change = new EventEmitter<Pick<ToggleOption, 'value'>>();
+  @Output() valueChange = new EventEmitter<Pick<ToggleOption, 'value'>>();
 
   public optionFormControl = new FormControl<string>(undefined);
 
@@ -41,6 +34,6 @@ export class GfToggleComponent implements OnChanges {
   }
 
   public onValueChange() {
-    this.change.emit({ value: this.optionFormControl.value });
+    this.valueChange.emit({ value: this.optionFormControl.value });
   }
 }