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

Author: crisbeto

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

@@ -6,15 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Input} from '@angular/core';
-import {
-  CanDisable,
-  HasTabIndex,
-  mixinDisabled,
-  mixinTabIndex,
-} from '@angular/material-experimental/mdc-core';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {ENTER, SPACE} from '@angular/cdk/keycodes';
+import {Directive, ElementRef, Inject, Input} from '@angular/core';
+import {HasTabIndex, mixinTabIndex} from '@angular/material-experimental/mdc-core';
+import {MAT_CHIP} from './tokens';
 
-const _MatChipActionMixinBase = mixinTabIndex(mixinDisabled(class {}), -1);
+abstract class _MatChipActionBase {
+  abstract disabled: boolean;
+}
+
+const _MatChipActionMixinBase = mixinTabIndex(_MatChipActionBase, -1);
 
 /**
  * Section within a chip.
@@ -33,16 +35,36 @@ 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 {
+export class MatChipAction extends _MatChipActionMixinBase implements HasTabIndex {
   /** Whether the action is interactive. */
   @Input() isInteractive = true;
 
   /** Whether this is the primary action in the chip. */
   _isPrimary = true;
 
-  constructor(public _elementRef: ElementRef<HTMLElement>) {
+  /** Whether the action is disabled. */
+  @Input()
+  get disabled(): boolean {
+    return this._disabled || this._parentChip.disabled;
+  }
+  set disabled(value: BooleanInput) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  private _disabled = false;
+
+  constructor(
+    public _elementRef: ElementRef<HTMLElement>,
+    @Inject(MAT_CHIP)
+    protected _parentChip: {
+      _handlePrimaryActionInteraction(): void;
+      remove(): void;
+      disabled: boolean;
+    },
+  ) {
     super();
 
     if (_elementRef.nativeElement.nodeName === 'BUTTON') {
@@ -53,4 +75,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

@@ -40,7 +40,7 @@ import {
 } from '@angular/material-experimental/mdc-core';
 import {MatFormFieldControl} from '@angular/material-experimental/mdc-form-field';
 import {MatChipTextControl} from './chip-text-control';
-import {Observable, Subject} from 'rxjs';
+import {Observable, Subject, merge} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {MatChipEvent} from './chip';
 import {MatChipRow} from './chip-row';
@@ -296,7 +296,7 @@ export class MatChipGrid
       this.stateChanges.next();
     });
 
-    this.chipFocusChanges
+    merge(this.chipFocusChanges, this._chips.changes)
       .pipe(takeUntil(this._destroyed))
       .subscribe(() => this.stateChanges.next());
   }
@@ -449,10 +449,16 @@ export class MatChipGrid
         !this._chips.last.disabled
       ) {
         event.preventDefault();
-        this._focusLastChip();
+
+        if (this._keyManager.activeItem) {
+          this._keyManager.setActiveItem(this._keyManager.activeItem);
+        } else {
+          this._focusLastChip();
+        }
       } else {
-        // Use the super method here since it doesn't check for the input focused state.
-        // This allows focus to escape if there's only one disabled chip left in the list.
+        // Use the super method here since it doesn't check for the input
+        // focused state. This allows focus to escape if there's only one
+        // disabled chip left in the list.
         super._allowFocusEscape();
       }
     } else if (!this._chipInput.focused) {

src/material-experimental/mdc-chips/chip-grid.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 && event.selected) {
+          this._chips.forEach(chip => {
+            if (chip !== event.source) {
+              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 {
@@ -38,7 +39,7 @@ export class MatChipSelectionChange {
   selector: 'mat-basic-chip-option, mat-chip-option',
   templateUrl: 'chip-option.html',
   styleUrls: ['chip.css'],
-  inputs: ['color', 'disableRipple', 'tabIndex'],
+  inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'],
   host: {
     'class': 'mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter',
     '[class.mat-mdc-chip-selected]': 'selected',
@@ -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,
 })
@@ -97,10 +101,7 @@ export class MatChipOption extends MatChip implements OnInit {
     return this._selected;
   }
   set selected(value: BooleanInput) {
-    if (this.selectable) {
-      const coercedValue = coerceBooleanProperty(value);
-      this._setSelectedState(coercedValue, false);
-    }
+    this._setSelectedState(coerceBooleanProperty(value), false);
   }
   private _selected = false;
 
@@ -126,35 +127,26 @@ export class MatChipOption extends MatChip implements OnInit {
 
   /** Selects the chip. */
   select(): void {
-    if (this.selectable) {
-      this._setSelectedState(true, false);
-    }
+    this._setSelectedState(true, false);
   }
 
   /** Deselects the chip. */
   deselect(): void {
-    if (this.selectable) {
-      this._setSelectedState(false, false);
-    }
+    this._setSelectedState(false, false);
   }
 
   /** Selects this chip and emits userInputSelection event */
   selectViaInteraction(): void {
-    if (this.selectable) {
-      this._setSelectedState(true, true);
-    }
+    this._setSelectedState(true, true);
   }
 
   /** Toggles the current selected state of this chip. */
   toggleSelected(isUserInput: boolean = false): boolean {
-    if (this.selectable) {
-      this._setSelectedState(!this.selected, isUserInput);
-    }
-
+    this._setSelectedState(!this.selected, isUserInput);
     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

@@ -313,16 +313,6 @@ describe('MDC-based Row Chips', () => {
         expect(document.activeElement).toBe(primaryAction);
       }));
 
-      it('should focus the chip content if the body has focus on completion', fakeAsync(() => {
-        const chipValue = 'chip value';
-        editInputInstance.setValue(chipValue);
-        (document.activeElement as HTMLElement).blur();
-        dispatchKeyboardEvent(getEditInput(), 'keydown', ENTER);
-        fixture.detectChanges();
-        flush();
-        expect(document.activeElement).toBe(primaryAction);
-      }));
-
       it('should not change focus if another element has focus on completion', fakeAsync(() => {
         const chipValue = 'chip value';
         editInputInstance.setValue(chipValue);