From 0202131958439ceaed78856a6a0c0b4df5f4f705 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Thu, 3 Jun 2021 18:34:14 +0530
Subject: [PATCH] fix: override toggle colors when disabled

---
 .../src/toggle-switch/toggle-switch.component.scss   | 12 +++++++++++-
 .../toggle-switch/toggle-switch.component.test.ts    |  2 +-
 .../src/toggle-switch/toggle-switch.component.ts     |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/projects/components/src/toggle-switch/toggle-switch.component.scss b/projects/components/src/toggle-switch/toggle-switch.component.scss
index df83c849b..6990e107b 100644
--- a/projects/components/src/toggle-switch/toggle-switch.component.scss
+++ b/projects/components/src/toggle-switch/toggle-switch.component.scss
@@ -4,7 +4,17 @@
 :host {
   ::ng-deep {
     .mat-slide-toggle {
-      &.small-slide-toogle {
+      &.disabled {
+        .mat-slide-toggle-thumb {
+          background: $gray-7;
+        }
+
+        .mat-slide-toggle-bar {
+          background: $gray-3;
+        }
+      }
+
+      &.small-slide-toggle {
         height: 20px;
         line-height: 20px;
 
diff --git a/projects/components/src/toggle-switch/toggle-switch.component.test.ts b/projects/components/src/toggle-switch/toggle-switch.component.test.ts
index 6fa641873..563ccabfa 100644
--- a/projects/components/src/toggle-switch/toggle-switch.component.test.ts
+++ b/projects/components/src/toggle-switch/toggle-switch.component.test.ts
@@ -36,7 +36,7 @@ describe('Toggle Switch Component', () => {
     expect(matToggleComponent?.checked).toBeTruthy();
     expect(matToggleComponent?.disabled).toBeFalsy();
     expect(spectator.query('.label')).toHaveText('label');
-    expect(spectator.query('mat-slide-toggle')).toHaveClass('small-slide-toogle');
+    expect(spectator.query('mat-slide-toggle')).toHaveClass('small-slide-toggle');
 
     spectator.triggerEventHandler(MatSlideToggle, 'change', new MatSlideToggleChange(matToggleComponent!, false));
     expect(onCheckedChangeSpy).toHaveBeenCalledWith(false);
diff --git a/projects/components/src/toggle-switch/toggle-switch.component.ts b/projects/components/src/toggle-switch/toggle-switch.component.ts
index 72c95cc9c..3c4340abf 100644
--- a/projects/components/src/toggle-switch/toggle-switch.component.ts
+++ b/projects/components/src/toggle-switch/toggle-switch.component.ts
@@ -10,7 +10,7 @@ import { ToggleSwitchSize } from './toggle-switch-size';
     <mat-slide-toggle
       color="primary"
       [(ngModel)]="this.checked"
-      [ngClass]="{ 'small-slide-toogle': this.size === '${ToggleSwitchSize.Small}' }"
+      [ngClass]="{ 'small-slide-toggle': this.size === '${ToggleSwitchSize.Small}', disabled: this.disabled }"
       [disabled]="this.disabled"
       (change)="this.onToggle($event)"
     >