fix(material/autocomplete): remove dependency on NgClass (#28849)

We can set classes directly through `[class]` instead of having to import `NgClass`.

Author: crisbeto

src/material/autocomplete/autocomplete.html

@@ -3,7 +3,12 @@
     class="mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open"
     role="listbox"
     [id]="id"
-    [ngClass]="_classList"
+    [class]="_classList"
+    [class.mat-mdc-autocomplete-visible]="showPanel"
+    [class.mat-mdc-autocomplete-hidden]="!showPanel"
+    [class.mat-primary]="_color === 'primary'"
+    [class.mat-accent]="_color === 'accent'"
+    [class.mat-warn]="_color === 'warn'"
     [attr.aria-label]="ariaLabel || null"
     [attr.aria-labelledby]="_getPanelAriaLabelledby(formFieldId)"
     [@panelAnimation]="isOpen ? 'visible' : 'hidden'"

src/material/autocomplete/autocomplete.ts

@@ -34,11 +34,9 @@ import {
   ThemePalette,
 } from '@angular/material/core';
 import {ActiveDescendantKeyManager} from '@angular/cdk/a11y';
-import {coerceStringArray} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
 import {panelAnimation} from './animations';
 import {Subscription} from 'rxjs';
-import {NgClass} from '@angular/common';
 
 /**
  * Autocomplete IDs need to be unique across components, so this counter exists outside of
@@ -119,17 +117,10 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefau
   providers: [{provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete}],
   animations: [panelAnimation],
   standalone: true,
-  imports: [NgClass],
 })
 export class MatAutocomplete implements AfterContentInit, OnDestroy {
   private _activeOptionChanges = Subscription.EMPTY;
 
-  /** Class to apply to the panel when it's visible. */
-  private _visibleClass = 'mat-mdc-autocomplete-visible';
-
-  /** Class to apply to the panel when it's hidden. */
-  private _hiddenClass = 'mat-mdc-autocomplete-hidden';
-
   /** Emits when the panel animation is done. Null if the panel doesn't animate. */
   _animationDone = new EventEmitter<AnimationEvent>();
 
@@ -151,10 +142,10 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
   /** @docs-private Sets the theme color of the panel. */
   _setColor(value: ThemePalette) {
     this._color = value;
-    this._setThemeClasses(this._classList);
+    this._changeDetectorRef.markForCheck();
   }
   /** @docs-private theme color of the panel */
-  private _color: ThemePalette;
+  protected _color: ThemePalette;
 
   // The @ViewChild query for TemplateRef here needs to be static because some code paths
   // lead to the overlay being created before change detection has finished for this component.
@@ -227,23 +218,10 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
    */
   @Input('class')
   set classList(value: string | string[]) {
-    if (value && value.length) {
-      this._classList = coerceStringArray(value).reduce(
-        (classList, className) => {
-          classList[className] = true;
-          return classList;
-        },
-        {} as {[key: string]: boolean},
-      );
-    } else {
-      this._classList = {};
-    }
-
-    this._setVisibilityClasses(this._classList);
-    this._setThemeClasses(this._classList);
+    this._classList = value;
     this._elementRef.nativeElement.className = '';
   }
-  _classList: {[key: string]: boolean} = {};
+  _classList: string | string[];
 
   /** Whether checkmark indicator for single-selection options is hidden. */
   @Input({transform: booleanAttribute})
@@ -329,7 +307,6 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
   /** Panel should hide itself when the option list is empty. */
   _setVisibility() {
     this.showPanel = !!this.options.length;
-    this._setVisibilityClasses(this._classList);
     this._changeDetectorRef.markForCheck();
   }
 
@@ -349,19 +326,6 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
     return this.ariaLabelledby ? labelExpression + this.ariaLabelledby : labelId;
   }
 
-  /** Sets the autocomplete visibility classes on a classlist based on the panel is visible. */
-  private _setVisibilityClasses(classList: {[key: string]: boolean}) {
-    classList[this._visibleClass] = this.showPanel;
-    classList[this._hiddenClass] = !this.showPanel;
-  }
-
-  /** Sets the theming classes on a classlist based on the theme of the panel. */
-  private _setThemeClasses(classList: {[key: string]: boolean}) {
-    classList['mat-primary'] = this._color === 'primary';
-    classList['mat-warn'] = this._color === 'warn';
-    classList['mat-accent'] = this._color === 'accent';
-  }
-
   // `skipPredicate` determines if key manager should avoid putting a given option in the tab
   // order. Allow disabled list items to receive focus via keyboard to align with WAI ARIA
   // recommendation.

tools/public_api_guard/material/autocomplete.md

@@ -72,10 +72,9 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
     autoSelectActiveOption: boolean;
     set classList(value: string | string[]);
     // (undocumented)
-    _classList: {
-        [key: string]: boolean;
-    };
+    _classList: string | string[];
     readonly closed: EventEmitter<void>;
+    protected _color: ThemePalette;
     // (undocumented)
     protected _defaults: MatAutocompleteDefaultOptions;
     disableRipple: boolean;