refactor(material-experimental): avoid unique id conflicts (#19046)

Some of the MDC components were using the same pattern as the base components to generate unique ids, allowing for potential conflicts.

Author: crisbeto

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

@@ -84,7 +84,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
   @Input() placeholder: string = '';
 
   /** Unique id for the input. */
-  @Input() id: string = `mat-chip-list-input-${nextUniqueId++}`;
+  @Input() id: string = `mat-mdc-chip-list-input-${nextUniqueId++}`;
 
   /** Whether the input is disabled. */
   @Input()

src/material-experimental/mdc-form-field/directives/error.ts

@@ -20,5 +20,5 @@ let nextUniqueId = 0;
   }
 })
 export class MatError {
-  @Input() id: string = `mat-error-${nextUniqueId++}`;
+  @Input() id: string = `mat-mdc-error-${nextUniqueId++}`;
 }

src/material-experimental/mdc-form-field/directives/hint.ts

@@ -26,5 +26,5 @@ export class MatHint {
   @Input() align: 'start' | 'end' = 'start';
 
   /** Unique ID for the hint. Used for the aria-describedby on the form field control. */
-  @Input() id: string = `mat-hint-${nextUniqueId++}`;
+  @Input() id: string = `mat-mdc-hint-${nextUniqueId++}`;
 }

src/material-experimental/mdc-form-field/form-field.ts

@@ -191,13 +191,13 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
   private _hintLabel = '';
 
   // Unique id for the hint label.
-  _hintLabelId: string = `mat-hint-${nextUniqueId++}`;
+  _hintLabelId = `mat-mdc-hint-${nextUniqueId++}`;
 
   // Unique id for the internal form field label.
-  _labelId = `mat-form-field-label-${nextUniqueId++}`;
+  _labelId = `mat-mdc-form-field-label-${nextUniqueId++}`;
 
   /** State of the mat-hint and mat-error animations. */
-  _subscriptAnimationState: string = '';
+  _subscriptAnimationState = '';
 
   /** Width of the outline notch. */
   _outlineNotchWidth: number;

src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts

@@ -156,7 +156,7 @@ describe('MDC-based MatSlideToggle without forms', () => {
       fixture.detectChanges();
 
       // Once the id binding is set to null, the id property should auto-generate a unique id.
-      expect(inputElement.id).toMatch(/mat-slide-toggle-\d+-input/);
+      expect(inputElement.id).toMatch(/mat-mdc-slide-toggle-\d+-input/);
     });
 
     it('should forward the tabIndex to the underlying input', () => {

src/material-experimental/mdc-slide-toggle/slide-toggle.ts

@@ -92,7 +92,7 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
   private _onChange = (_: any) => {};
   private _onTouched = () => {};
 
-  private _uniqueId: string = `mat-slide-toggle-${++nextUniqueId}`;
+  private _uniqueId: string = `mat-mdc-slide-toggle-${++nextUniqueId}`;
   private _required: boolean = false;
   private _checked: boolean = false;
   private _foundation: MDCSwitchFoundation;