From 92a10361e2b28e561c53ac2abe8d8eb6c52549a0 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 11 Apr 2020 10:57:02 +0200
Subject: [PATCH] refactor(material-experimental): avoid unique id conflicts

Some of the MDC components were using the same pattern as the base components to generate unique ids, allowing for potential conflicts.
---
 src/material-experimental/mdc-chips/chip-input.ts           | 2 +-
 .../mdc-form-field/directives/error.ts                      | 2 +-
 src/material-experimental/mdc-form-field/directives/hint.ts | 2 +-
 src/material-experimental/mdc-form-field/form-field.ts      | 6 +++---
 .../mdc-slide-toggle/slide-toggle.spec.ts                   | 2 +-
 src/material-experimental/mdc-slide-toggle/slide-toggle.ts  | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/material-experimental/mdc-chips/chip-input.ts b/src/material-experimental/mdc-chips/chip-input.ts
index 938624fc560a..0ee7f850fd46 100644
--- a/src/material-experimental/mdc-chips/chip-input.ts
+++ b/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()
diff --git a/src/material-experimental/mdc-form-field/directives/error.ts b/src/material-experimental/mdc-form-field/directives/error.ts
index 1dc62bab0b43..9ffcbec8d56f 100644
--- a/src/material-experimental/mdc-form-field/directives/error.ts
+++ b/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++}`;
 }
diff --git a/src/material-experimental/mdc-form-field/directives/hint.ts b/src/material-experimental/mdc-form-field/directives/hint.ts
index 073a93d4b2dc..1f1682b4c851 100644
--- a/src/material-experimental/mdc-form-field/directives/hint.ts
+++ b/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++}`;
 }
diff --git a/src/material-experimental/mdc-form-field/form-field.ts b/src/material-experimental/mdc-form-field/form-field.ts
index 10dd74c62c00..e01776301b4c 100644
--- a/src/material-experimental/mdc-form-field/form-field.ts
+++ b/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;
diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts b/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts
index 3e2272ee991f..102ef62eee82 100644
--- a/src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts
+++ b/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', () => {
diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.ts b/src/material-experimental/mdc-slide-toggle/slide-toggle.ts
index 561245baacfc..9ed196f979a1 100644
--- a/src/material-experimental/mdc-slide-toggle/slide-toggle.ts
+++ b/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;