Extend toggle component to support disabled state

libs/ui/src/lib/toggle/toggle.component.html

@@ -9,9 +9,11 @@
       [class]="{
         'cursor-default': option.value === optionFormControl.value,
         'cursor-pointer':
-          !isLoading() && option.value !== optionFormControl.value
+          !isDisabled() &&
+          !isLoading() &&
+          option.value !== optionFormControl.value
       }"
-      [disabled]="isLoading()"
+      [disabled]="isDisabled() || isLoading()"
       [title]="option.title ?? ''"
       [value]="option.value"
     >

libs/ui/src/lib/toggle/toggle.component.scss

@@ -9,6 +9,14 @@
       background-color: rgba(var(--dark-dividers));
     }
 
+    &.mat-mdc-radio-disabled {
+      ::ng-deep {
+        label {
+          color: rgba(var(--dark-disabled-text));
+        }
+      }
+    }
+
     ::ng-deep {
       .mdc-radio {
         display: none;
@@ -31,6 +39,14 @@
       border: 1px solid rgba(var(--light-disabled-text));
     }
 
+    &.mat-mdc-radio-disabled {
+      ::ng-deep {
+        label {
+          color: rgba(var(--light-disabled-text));
+        }
+      }
+    }
+
     ::ng-deep {
       label {
         color: rgba(var(--light-primary-text), 1);

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

@@ -26,6 +26,22 @@ type Story = StoryObj<GfToggleComponent>;
 export const Default: Story = {
   args: {
     defaultValue: '1d',
+    isDisabled: false,
+    isLoading: false,
+    options: [
+      { label: 'Today', value: '1d' },
+      { label: 'YTD', value: 'ytd' },
+      { label: '1Y', value: '1y' },
+      { label: '5Y', value: '5y' },
+      { label: 'Max', value: 'max' }
+    ]
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: '1d',
+    isDisabled: true,
     isLoading: false,
     options: [
       { label: 'Today', value: '1d' },
@@ -40,6 +56,7 @@ export const Default: Story = {
 export const WithIcons: Story = {
   args: {
     defaultValue: 'TABLE',
+    isDisabled: false,
     isLoading: false,
     options: [
       {

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

@@ -20,6 +20,7 @@ import { IonIcon } from '@ionic/angular/standalone';
 })
 export class GfToggleComponent {
   public readonly defaultValue = input.required<string>();
+  public readonly isDisabled = input<boolean>(false);
   public readonly isLoading = input<boolean>(false);
   public readonly options = input<ToggleOption[]>([]);