feat: styling for disabled input (#976)

* feat: styling for disabled input

Author: arjunlalb

projects/components/src/input/input.component.scss

@@ -3,6 +3,11 @@
 
 :host {
   ::ng-deep {
+    &.disabled {
+      background-color: $gray-2;
+      cursor: not-allowed;
+    }
+
     .border {
       &.mat-form-field {
         height: inherit;

projects/components/src/input/input.component.test.ts

@@ -18,6 +18,7 @@ describe('Input Component', () => {
 
     spectator.tick();
     expect(spectator.query(MatInput)!.disabled).toBe(true);
+    expect(spectator.query('mat-form-field')).toHaveClass('disabled');
   }));
 
   test('should emit number values for inputs of type number', () => {

projects/components/src/input/input.component.ts

@@ -7,7 +7,7 @@ import { InputAppearance } from './input-appearance';
   styleUrls: ['./input.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <mat-form-field [ngClass]="this.appearance" floatLabel="never">
+    <mat-form-field [ngClass]="this.getStyleClasses()" floatLabel="never">
       <input
         matInput
         [type]="this.type"
@@ -66,4 +66,8 @@ export class InputComponent<T extends string | number> implements OnChanges {
         return value as T | undefined;
     }
   }
+
+  public getStyleClasses(): string[] {
+    return [this.appearance, this.disabled ? 'disabled' : ''];
+  }
 }