From 9a57674feae46a26a086b3b8e6abb38c54e95118 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 23 Feb 2023 14:04:28 +0100
Subject: [PATCH] fix(material/chips): allow attribute selectors for chips
 (#26683)

Updates the selector for chips to allow attributes like in the legacy chips.

Fixes #26677.

(cherry picked from commit f7a5bcbc0ff10a6a003814cbaa8629b2a712c464)
---
 guides/v15-mdc-migration.md              | 2 ++
 src/material/chips/chip-option.ts        | 2 +-
 src/material/chips/chip-row.ts           | 2 +-
 src/material/chips/chip.ts               | 2 +-
 tools/public_api_guard/material/chips.md | 6 +++---
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/guides/v15-mdc-migration.md b/guides/v15-mdc-migration.md
index 2d2f59394220..684f986930ac 100644
--- a/guides/v15-mdc-migration.md
+++ b/guides/v15-mdc-migration.md
@@ -271,6 +271,8 @@ DOM and CSS of the components, you may need to tweak some of your application's
 
 ### Chips
 
+* Chips used to be directives, but they're now components. This means that they can't be applied to
+  other components anymore.
 * The chips component has been split into multiple variants corresponding with more appropriate
   interaction patterns for accessibility. The original `mat-chip-list` used `role="listbox"`, but
   this interaction pattern is not suited for all use-cases. The new chips have:
diff --git a/src/material/chips/chip-option.ts b/src/material/chips/chip-option.ts
index 388494d59701..b47e0cde7fec 100644
--- a/src/material/chips/chip-option.ts
+++ b/src/material/chips/chip-option.ts
@@ -39,7 +39,7 @@ export class MatChipSelectionChange {
  * user cannot click disabled chips.
  */
 @Component({
-  selector: 'mat-basic-chip-option, mat-chip-option',
+  selector: 'mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]',
   templateUrl: 'chip-option.html',
   styleUrls: ['chip.css'],
   inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'],
diff --git a/src/material/chips/chip-row.ts b/src/material/chips/chip-row.ts
index aef258f0a565..4ea7a39a6884 100644
--- a/src/material/chips/chip-row.ts
+++ b/src/material/chips/chip-row.ts
@@ -44,7 +44,7 @@ export interface MatChipEditedEvent extends MatChipEvent {
  * the matChipInputFor directive.
  */
 @Component({
-  selector: 'mat-chip-row, mat-basic-chip-row',
+  selector: 'mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]',
   templateUrl: 'chip-row.html',
   styleUrls: ['chip.css'],
   inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'],
diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts
index d1457b7b9f42..a0bdd3c8b272 100644
--- a/src/material/chips/chip.ts
+++ b/src/material/chips/chip.ts
@@ -80,7 +80,7 @@ const _MatChipMixinBase = mixinTabIndex(
  * Extended by MatChipOption and MatChipRow for different interaction patterns.
  */
 @Component({
-  selector: 'mat-basic-chip, mat-chip',
+  selector: 'mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]',
   inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'],
   exportAs: 'matChip',
   templateUrl: 'chip.html',
diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md
index a0f58b285bcb..2fa1dccbf017 100644
--- a/tools/public_api_guard/material/chips.md
+++ b/tools/public_api_guard/material/chips.md
@@ -114,7 +114,7 @@ export class MatChip extends _MatChipMixinBase implements AfterViewInit, CanColo
     // (undocumented)
     protected _value: any;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, mat-chip", ["matChip"], { "color": "color"; "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "role": "role"; "id": "id"; "ariaLabel": "aria-label"; "ariaDescription": "aria-description"; "value": "value"; "removable": "removable"; "highlighted": "highlighted"; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "color": "color"; "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "role": "role"; "id": "id"; "ariaLabel": "aria-label"; "ariaDescription": "aria-description"; "value": "value"; "removable": "removable"; "highlighted": "highlighted"; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, [null, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
 }
@@ -360,7 +360,7 @@ export class MatChipOption extends MatChip implements OnInit {
     _setSelectedState(isSelected: boolean, isUserInput: boolean, emitEvent: boolean): void;
     toggleSelected(isUserInput?: boolean): boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipOption, "mat-basic-chip-option, mat-chip-option", never, { "color": "color"; "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "selectable": "selectable"; "selected": "selected"; }, { "selectionChange": "selectionChange"; }, never, ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipOption, "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", never, { "color": "color"; "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "selectable": "selectable"; "selected": "selected"; }, { "selectionChange": "selectionChange"; }, never, ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipOption, never>;
 }
@@ -399,7 +399,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     _isEditing: boolean;
     _mousedown(event: MouseEvent): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, mat-basic-chip-row", never, { "color": "color"; "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "editable": "editable"; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "*", "[matChipEditInput]", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "color": "color"; "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "editable": "editable"; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "*", "[matChipEditInput]", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, [null, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
 }