fixup! refactor(material-experimental/mdc-chips): remove usage of MDC adapter

Author: crisbeto

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

@@ -6,13 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Input} from '@angular/core';
+import {ENTER, SPACE} from '@angular/cdk/keycodes';
+import {Directive, ElementRef, Inject, Input} from '@angular/core';
 import {
   CanDisable,
   HasTabIndex,
   mixinDisabled,
   mixinTabIndex,
 } from '@angular/material-experimental/mdc-core';
+import {MAT_CHIP} from './tokens';
 
 const _MatChipActionMixinBase = mixinTabIndex(mixinDisabled(class {}), -1);
 
@@ -33,6 +35,8 @@ const _MatChipActionMixinBase = mixinTabIndex(mixinDisabled(class {}), -1);
     '[attr.tabindex]': '(disabled || !isInteractive) ? null : tabIndex',
     '[attr.disabled]': "disabled ? '' : null",
     '[attr.aria-disabled]': 'disabled',
+    '(click)': '_handleClick($event)',
+    '(keydown)': '_handleKeydown($event)',
   },
 })
 export class MatChipAction extends _MatChipActionMixinBase implements CanDisable, HasTabIndex {
@@ -42,7 +46,11 @@ export class MatChipAction extends _MatChipActionMixinBase implements CanDisable
   /** Whether this is the primary action in the chip. */
   _isPrimary = true;
 
-  constructor(public _elementRef: ElementRef<HTMLElement>) {
+  constructor(
+    public _elementRef: ElementRef<HTMLElement>,
+    @Inject(MAT_CHIP)
+    protected _parentChip: {_handlePrimaryActionInteraction(): void; remove(): void},
+  ) {
     super();
 
     if (_elementRef.nativeElement.nodeName === 'BUTTON') {
@@ -53,4 +61,23 @@ export class MatChipAction extends _MatChipActionMixinBase implements CanDisable
   focus() {
     this._elementRef.nativeElement.focus();
   }
+
+  _handleClick(event: MouseEvent) {
+    if (!this.disabled && this.isInteractive && this._isPrimary) {
+      event.preventDefault();
+      this._parentChip._handlePrimaryActionInteraction();
+    }
+  }
+
+  _handleKeydown(event: KeyboardEvent) {
+    if (
+      (event.keyCode === ENTER || event.keyCode === SPACE) &&
+      !this.disabled &&
+      this.isInteractive &&
+      this._isPrimary
+    ) {
+      event.preventDefault();
+      this._parentChip._handlePrimaryActionInteraction();
+    }
+  }
 }

src/material-experimental/mdc-chips/chip-default-options.ts

@@ -6,15 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, InjectionToken} from '@angular/core';
+import {ENTER, SPACE} from '@angular/cdk/keycodes';
+import {Directive} from '@angular/core';
 import {MatChipAction} from './chip-action';
-
-/**
- * Injection token that can be used to reference instances of `MatChipAvatar`. It serves as
- * alternative token to the actual `MatChipAvatar` class which could cause unnecessary
- * retention of the class and its directive metadata.
- */
-export const MAT_CHIP_AVATAR = new InjectionToken<MatChipAvatar>('MatChipAvatar');
+import {MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
 
 /**
  * Directive to add CSS classes to chip leading icon.
@@ -30,15 +25,6 @@ export const MAT_CHIP_AVATAR = new InjectionToken<MatChipAvatar>('MatChipAvatar'
 })
 export class MatChipAvatar {}
 
-/**
- * Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
- * alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary
- * retention of the class and its directive metadata.
- */
-export const MAT_CHIP_TRAILING_ICON = new InjectionToken<MatChipTrailingIcon>(
-  'MatChipTrailingIcon',
-);
-
 /**
  * Directive to add CSS classes to and configure attributes for chip trailing icon.
  * @docs-private
@@ -62,13 +48,6 @@ export class MatChipTrailingIcon extends MatChipAction {
   override _isPrimary = false;
 }
 
-/**
- * Injection token that can be used to reference instances of `MatChipRemove`. It serves as
- * alternative token to the actual `MatChipRemove` class which could cause unnecessary
- * retention of the class and its directive metadata.
- */
-export const MAT_CHIP_REMOVE = new InjectionToken<MatChipRemove>('MatChipRemove');
-
 /**
  * Directive to remove the parent chip when the trailing icon is clicked or
  * when the ENTER key is pressed on it.
@@ -98,4 +77,20 @@ export const MAT_CHIP_REMOVE = new InjectionToken<MatChipRemove>('MatChipRemove'
 })
 export class MatChipRemove extends MatChipAction {
   override _isPrimary = false;
+
+  override _handleClick(event: MouseEvent): void {
+    if (!this.disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+      this._parentChip.remove();
+    }
+  }
+
+  override _handleKeydown(event: KeyboardEvent) {
+    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+      this._parentChip.remove();
+    }
+  }
 }

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

@@ -21,7 +21,7 @@ import {
   Output,
 } from '@angular/core';
 import {MatFormField, MAT_FORM_FIELD} from '@angular/material-experimental/mdc-form-field';
-import {MatChipsDefaultOptions, MAT_CHIPS_DEFAULT_OPTIONS} from './chip-default-options';
+import {MatChipsDefaultOptions, MAT_CHIPS_DEFAULT_OPTIONS} from './tokens';
 import {MatChipGrid} from './chip-grid';
 import {MatChipTextControl} from './chip-text-control';
 

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

@@ -195,6 +195,14 @@ export class MatChipListbox
     this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._blur());
     this.chipSelectionChanges.pipe(takeUntil(this._destroyed)).subscribe(event => {
       if (event.isUserInput) {
+        if (!this.multiple) {
+          this._chips.forEach(chip => {
+            if (chip !== event.source && chip.selected) {
+              chip.deselect();
+            }
+          });
+        }
+
         this._propagateChanges();
       }
     });

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

@@ -17,6 +17,7 @@ import {
   OnInit,
 } from '@angular/core';
 import {MatChip} from './chip';
+import {MAT_CHIP} from './tokens';
 
 /** Event object emitted by MatChipOption when selected or deselected. */
 export class MatChipSelectionChange {
@@ -64,7 +65,10 @@ export class MatChipSelectionChange {
     '[attr.role]': 'role',
     '[id]': 'id',
   },
-  providers: [{provide: MatChip, useExisting: MatChipOption}],
+  providers: [
+    {provide: MatChip, useExisting: MatChipOption},
+    {provide: MAT_CHIP, useExisting: MatChipOption},
+  ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -154,7 +158,7 @@ export class MatChipOption extends MatChip implements OnInit {
     return this.selected;
   }
 
-  protected override _handlePrimaryActionInteraction() {
+  override _handlePrimaryActionInteraction() {
     if (this.selectable && !this.disabled) {
       this._setSelectedState(!this.selected, true);
     }

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

@@ -34,6 +34,7 @@ import {FocusMonitor} from '@angular/cdk/a11y';
 import {MatChip, MatChipEvent} from './chip';
 import {MatChipEditInput} from './chip-edit-input';
 import {takeUntil} from 'rxjs/operators';
+import {MAT_CHIP} from './tokens';
 
 /** Represents an event fired on an individual `mat-chip` when it is edited. */
 export interface MatChipEditedEvent extends MatChipEvent {
@@ -70,7 +71,10 @@ export interface MatChipEditedEvent extends MatChipEvent {
     '(mousedown)': '_mousedown($event)',
     '(dblclick)': '_doubleclick($event)',
   },
-  providers: [{provide: MatChip, useExisting: MatChipRow}],
+  providers: [
+    {provide: MatChip, useExisting: MatChipRow},
+    {provide: MAT_CHIP, useExisting: MatChipRow},
+  ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -42,16 +42,10 @@ import {
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {Subject} from 'rxjs';
 import {take} from 'rxjs/operators';
-import {
-  MatChipAvatar,
-  MatChipTrailingIcon,
-  MatChipRemove,
-  MAT_CHIP_AVATAR,
-  MAT_CHIP_TRAILING_ICON,
-  MAT_CHIP_REMOVE,
-} from './chip-icons';
+import {MatChipAvatar, MatChipTrailingIcon, MatChipRemove} from './chip-icons';
 import {MatChipAction} from './chip-action';
-import {BACKSPACE, DELETE, ENTER, SPACE} from '@angular/cdk/keycodes';
+import {BACKSPACE, DELETE} from '@angular/cdk/keycodes';
+import {MAT_CHIP, MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
 
 let uid = 0;
 
@@ -102,11 +96,11 @@ const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBas
     '[attr.role]': 'role',
     '[attr.tabindex]': 'role ? tabIndex : null',
     '[attr.aria-label]': 'ariaLabel',
-    '(click)': '_handleClick($event)',
     '(keydown)': '_handleKeydown($event)',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{provide: MAT_CHIP, useExisting: MatChip}],
 })
 export class MatChip
   extends _MatChipMixinBase
@@ -289,23 +283,9 @@ export class MatChip
     return !!(this.trailingIcon || this.removeIcon);
   }
 
-  /** Handles click events on the chip. */
-  _handleClick(event: MouseEvent) {
-    const action = this._getSourceAction(event.target as Node);
-
-    if (action) {
-      this._handleClickLikeInteraction(event, action);
-    }
-  }
-
   /** Handles keyboard events on the chip. */
   _handleKeydown(event: KeyboardEvent) {
-    const action = this._getSourceAction(event.target as Node);
-    const keyCode = event.keyCode;
-
-    if (action && (keyCode === ENTER || keyCode === SPACE)) {
-      this._handleClickLikeInteraction(event, action);
-    } else if (keyCode === BACKSPACE || keyCode === DELETE) {
+    if (event.keyCode === BACKSPACE || event.keyCode === DELETE) {
       event.preventDefault();
       this.remove();
     }
@@ -353,24 +333,10 @@ export class MatChip
   }
 
   /** Handles interactions with the primary action of the chip. */
-  protected _handlePrimaryActionInteraction() {
+  _handlePrimaryActionInteraction() {
     // Empty here, but is overwritten in child classes.
   }
 
-  /** Handles clicks or enter/space presses on a specific action. */
-  private _handleClickLikeInteraction(event: Event, action: MatChipAction) {
-    if (action.isInteractive && !action.disabled) {
-      if (action === this.removeIcon) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.remove();
-      } else if (action === this.primaryAction) {
-        event.preventDefault();
-        this._handlePrimaryActionInteraction();
-      }
-    }
-  }
-
   /** Starts the focus monitoring process on the chip. */
   private _monitorFocus() {
     this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {

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

@@ -15,7 +15,7 @@ import {
   MatRippleModule,
 } from '@angular/material-experimental/mdc-core';
 import {MatChip} from './chip';
-import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
+import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './tokens';
 import {MatChipEditInput} from './chip-edit-input';
 import {MatChipGrid} from './chip-grid';
 import {MatChipAvatar, MatChipRemove, MatChipTrailingIcon} from './chip-icons';

src/material-experimental/mdc-chips/module.ts

@@ -14,7 +14,7 @@ export * from './chip-listbox';
 export * from './chip-grid';
 export * from './module';
 export * from './chip-input';
-export * from './chip-default-options';
+export * from './tokens';
 export * from './chip-icons';
 export * from './chip-text-control';
 export * from './chip-edit-input';