fix(material/input): fix input suffix disabled color

Author: wagnermaciel

src/material/form-field/directives/suffix.ts

@@ -23,7 +23,15 @@ export const MAT_SUFFIX = new InjectionToken<MatSuffix>('MatSuffix');
 export class MatSuffix {
   _isText = false;
 
-  constructor(elementRef: ElementRef) {
+  constructor(private elementRef: ElementRef<HTMLElement>) {
     this._isText = elementRef.nativeElement.hasAttribute('matTextSuffix');
   }
+
+  disable(): void {
+    this.elementRef.nativeElement.classList.add('mat-form-field-suffix--disabled');
+  }
+
+  enable(): void {
+    this.elementRef.nativeElement.classList.remove('mat-form-field-suffix--disabled');
+  }
 }

src/material/input/input.ts

@@ -167,6 +167,9 @@ export class MatInput
   }
   set disabled(value: BooleanInput) {
     this._disabled = coerceBooleanProperty(value);
+    this._formField?._suffixChildren?.forEach(suffix =>
+      this._disabled ? suffix.disable() : suffix.enable(),
+    );
 
     // Browsers may not fire the blur event if the input is disabled too quickly.
     // Reset from here to ensure that the element doesn't become stuck.
@@ -332,6 +335,12 @@ export class MatInput
         this.stateChanges.next();
       });
     }
+
+    if (this._disabled) {
+      this._formField?._suffixChildren.forEach(suffix => {
+        suffix.disable();
+      });
+    }
   }
 
   ngOnChanges() {

src/material/legacy-form-field/suffix.ts

@@ -6,12 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive} from '@angular/core';
+import {Directive, ElementRef} from '@angular/core';
 import {MAT_SUFFIX} from '@angular/material/form-field';
 
 /** Suffix to be placed at the end of the form field. */
 @Directive({
   selector: '[matSuffix]',
   providers: [{provide: MAT_SUFFIX, useExisting: MatLegacySuffix}],
 })
-export class MatLegacySuffix {}
+export class MatLegacySuffix {
+  constructor(private elementRef: ElementRef<HTMLElement>) {}
+
+  disable(): void {
+    this.elementRef.nativeElement.classList.add('mat-form-field-suffix--disabled');
+  }
+
+  enable(): void {
+    this.elementRef.nativeElement.classList.remove('mat-form-field-suffix--disabled');
+  }
+}

src/material/legacy-input/_input-theme.scss

@@ -53,6 +53,10 @@
     caret-color: theming.get-color-from-palette($accent, text);
   }
 
+  .mat-form-field-suffix--disabled {
+    color: theming.get-color-from-palette($foreground, disabled-text);
+  }
+
   .mat-form-field.mat-warn .mat-input-element,
   .mat-form-field-invalid .mat-input-element {
     caret-color: theming.get-color-from-palette($warn, text);