style(mdc chips) Fix clashing input and remove classes (#16561)

We have slightly different styles for the MDC versions of
mat-chip-remove and mat-chip-input. Projects that import
all angular material css are also getting the non-mdc chips
css, which is applying the non-mdc styles to these elements.

Add -mdc to mat-chip-remove and mat-chip-input classes in the
mdc module to differentiate them. All the other mdc chip
classes already contain -mdc for the same reason.

Author: vanessanschmitt

src/material-experimental/mdc-chips/chip-icons.ts

@@ -93,7 +93,8 @@ const _MatChipRemoveMixinBase:
   selector: '[matChipRemove]',
   inputs: ['disabled', 'tabIndex'],
   host: {
-    'class': 'mat-chip-remove mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
+    'class':
+      'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
     '[tabIndex]': 'tabIndex',
     'role': 'button',
     '(click)': 'interaction.next($event)',

src/material-experimental/mdc-chips/chip-input.ts

@@ -34,7 +34,7 @@ let nextUniqueId = 0;
   selector: 'input[matChipInputFor]',
   exportAs: 'matChipInput, matChipInputFor',
   host: {
-    'class': 'mat-chip-input mat-input-element',
+    'class': 'mat-mdc-chip-input mat-input-element',
     '(keydown)': '_keydown($event)',
     '(blur)': '_blur()',
     '(focus)': '_focus()',

src/material-experimental/mdc-chips/chip-remove.spec.ts

@@ -31,10 +31,10 @@ describe('Chip Remove', () => {
   }));
 
   describe('basic behavior', () => {
-    it('should apply the `mat-chip-remove` CSS class', () => {
+    it('should apply the `mat-mdc-chip-remove` CSS class', () => {
       let buttonElement = chipNativeElement.querySelector('button')!;
 
-      expect(buttonElement.classList).toContain('mat-chip-remove');
+      expect(buttonElement.classList).toContain('mat-mdc-chip-remove');
     });
 
     it('should start MDC exit animation on click', () => {

src/material-experimental/mdc-chips/chips.scss

@@ -48,6 +48,6 @@
 // Add styles for the matChipInputFor input element.
 $mat-chip-input-width: 150px;
 
-input.mat-chip-input {
+input.mat-mdc-chip-input {
   flex: 1 0 $mat-chip-input-width;
 }