fix: override toggle colors when disabled (#898)

Author: arjunlalb

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;
 

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);

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)"
     >