From d2ad879ddec8ca173c94a634573f6d06d11e8943 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 10 Aug 2026 20:36:16 +0200
Subject: [PATCH] Task/extend toggle component to support disabled state
 (#7585)

* Extend toggle component to support disabled state

* Update changelog
---
 CHANGELOG.md                                    |  1 +
 libs/ui/src/lib/toggle/toggle.component.html    |  6 ++++--
 libs/ui/src/lib/toggle/toggle.component.scss    | 16 ++++++++++++++++
 .../src/lib/toggle/toggle.component.stories.ts  | 17 +++++++++++++++++
 libs/ui/src/lib/toggle/toggle.component.ts      |  1 +
 5 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b9af6f4d..a3714bcdd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Extended the toggle component to support a disabled state
 - Extended the toggle component to support icons
 
 ## 3.46.0 - 2026-08-09
diff --git a/libs/ui/src/lib/toggle/toggle.component.html b/libs/ui/src/lib/toggle/toggle.component.html
index 8ad5d75b3..bec1bfab3 100644
--- a/libs/ui/src/lib/toggle/toggle.component.html
+++ b/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"
     >
diff --git a/libs/ui/src/lib/toggle/toggle.component.scss b/libs/ui/src/lib/toggle/toggle.component.scss
index 24d1a2975..76e2404ab 100644
--- a/libs/ui/src/lib/toggle/toggle.component.scss
+++ b/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);
diff --git a/libs/ui/src/lib/toggle/toggle.component.stories.ts b/libs/ui/src/lib/toggle/toggle.component.stories.ts
index 30af31c42..f93754c7e 100644
--- a/libs/ui/src/lib/toggle/toggle.component.stories.ts
+++ b/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: [
       {
diff --git a/libs/ui/src/lib/toggle/toggle.component.ts b/libs/ui/src/lib/toggle/toggle.component.ts
index fe8db17a3..bf9259fd8 100644
--- a/libs/ui/src/lib/toggle/toggle.component.ts
+++ b/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[]>([]);