refactor(material/select): remove dependency on NgClass (#32776)

Drops the dependency on `NgClass` from the select component since we can achieve the same with class bindings.

Author: crisbeto

goldens/material/select/index.api.md

@@ -274,7 +274,6 @@ export class MatSelect implements AfterContentInit, OnChanges, OnDestroy, OnInit
     get focused(): boolean;
     _getAriaActiveDescendant(): string | null;
     _getPanelAriaLabelledby(): string | null;
-    _getPanelTheme(): string;
     _handleKeydown(event: KeyboardEvent): void;
     protected _handleOverlayKeydown(event: KeyboardEvent): void;
     get hideSingleSelectionIndicator(): boolean;

src/material/select/select.html

@@ -43,21 +43,24 @@
   [cdkConnectedOverlayUsePopover]="_popoverLocation"
   (detach)="close()"
   (backdropClick)="close()"
-  (overlayKeydown)="_handleOverlayKeydown($event)"
->
+  (overlayKeydown)="_handleOverlayKeydown($event)">
+  <!-- `mat-undefined` is weird, but we were using it internally -->
   <div
     #panel
     role="listbox"
     tabindex="-1"
-    class="mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open {{ _getPanelTheme() }}"
+    class="mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open"
+    [class]="panelClass"
     [class.mat-select-panel-animations-enabled]="!_animationsDisabled"
+    [class.mat-primary]="_parentFormField?.color === 'primary'"
+    [class.mat-accent]="_parentFormField?.color === 'accent'"
+    [class.mat-warn]="_parentFormField?.color === 'warn'"
+    [class.mat-undefined]="!_parentFormField?.color"
     [attr.id]="id + '-panel'"
     [attr.aria-multiselectable]="multiple"
     [attr.aria-label]="ariaLabel || null"
     [attr.aria-labelledby]="_getPanelAriaLabelledby()"
-    [ngClass]="panelClass"
-    (keydown)="_handleKeydown($event)"
-  >
+    (keydown)="_handleKeydown($event)">
     <ng-content></ng-content>
   </div>
 </ng-template>

src/material/select/select.ts

@@ -94,7 +94,6 @@ import {
   getMatSelectNonArrayValueError,
   getMatSelectNonFunctionValueError,
 } from './select-errors';
-import {NgClass} from '@angular/common';
 
 /** Injection token that determines the scroll handling while a select is open. */
 export const MAT_SELECT_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
@@ -189,7 +188,7 @@ export class MatSelectChange<T = any> {
     {provide: MatFormFieldControl, useExisting: MatSelect},
     {provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect},
   ],
-  imports: [CdkOverlayOrigin, CdkConnectedOverlay, NgClass],
+  imports: [CdkOverlayOrigin, CdkConnectedOverlay],
 })
 export class MatSelect
   implements
@@ -711,6 +710,10 @@ export class MatSelect
     if (changes['typeaheadDebounceInterval'] && this._keyManager) {
       this._keyManager.withTypeAhead(this.typeaheadDebounceInterval);
     }
+
+    if (changes['panelClass'] && this.panelClass instanceof Set) {
+      this.panelClass = Array.from(this.panelClass);
+    }
   }
 
   ngOnDestroy() {
@@ -1085,11 +1088,6 @@ export class MatSelect
     }
   }
 
-  /** Returns the theme to be used on the panel. */
-  _getPanelTheme(): string {
-    return this._parentFormField ? `mat-${this._parentFormField.color}` : '';
-  }
-
   /** Whether the select has a value. */
   get empty(): boolean {
     return !this._selectionModel || this._selectionModel.isEmpty();