feat(material/chips): add (optional) edit icon to input chips

Author: adolgachev

src/dev-app/chips/chips-demo.html

@@ -160,6 +160,8 @@ <h4>Multi selection</h4>
 
       <mat-checkbox [(ngModel)]="disableInputs">Disabled</mat-checkbox>
       <mat-checkbox [(ngModel)]="editable">Editable</mat-checkbox>
+      <mat-checkbox [(ngModel)]="peopleWithAvatar">Show Avatar</mat-checkbox>
+      <mat-checkbox [(ngModel)]="showEditIcon">Show Edit Icon</mat-checkbox>
       <mat-checkbox [(ngModel)]="disabledInteractive">Disabled Interactive</mat-checkbox>
 
       <h4>Input is last child of chip grid</h4>
@@ -172,6 +174,14 @@ <h4>Input is last child of chip grid</h4>
               [editable]="editable"
               (removed)="remove(person)"
               (edited)="edit(person, $event)">
+              @if (showEditIcon) {
+                <button matChipEdit aria-label="Edit contributor">
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
+              @if (peopleWithAvatar && person.avatar) {
+                <mat-chip-avatar>{{person.avatar}}</mat-chip-avatar>
+              }
               {{person.name}}
               <button matChipRemove aria-label="Remove contributor">
                 <mat-icon>close</mat-icon>

src/dev-app/chips/chips-demo.ts

@@ -20,6 +20,7 @@ import {MatIconModule} from '@angular/material/icon';
 
 export interface Person {
   name: string;
+  avatar?: string;
 }
 
 export interface DemoColor {
@@ -52,6 +53,8 @@ export class ChipsDemo {
   listboxesWithAvatar = false;
   disableInputs = false;
   editable = false;
+  peopleWithAvatar = false;
+  showEditIcon = false;
   disabledInteractive = false;
   message = '';
 
@@ -75,12 +78,12 @@ export class ChipsDemo {
   selectedPeople = null;
 
   people: Person[] = [
-    {name: 'Kara'},
-    {name: 'Jeremy'},
-    {name: 'Topher'},
-    {name: 'Elad'},
-    {name: 'Kristiyan'},
-    {name: 'Paul'},
+    {name: 'Kara', avatar: 'K'},
+    {name: 'Jeremy', avatar: 'J'},
+    {name: 'Topher', avatar: 'T'},
+    {name: 'Elad', avatar: 'E'},
+    {name: 'Kristiyan', avatar: 'K'},
+    {name: 'Paul', avatar: 'P'},
   ];
 
   availableColors: DemoColor[] = [

src/material/chips/chip-action.ts

@@ -43,6 +43,7 @@ export class MatChipAction {
     _handlePrimaryActionInteraction(): void;
     remove(): void;
     disabled: boolean;
+    _edit(): void;
     _isEditing?: boolean;
   }>(MAT_CHIP);
 

src/material/chips/chip-icons.ts

@@ -9,7 +9,7 @@
 import {ENTER, SPACE} from '@angular/cdk/keycodes';
 import {Directive} from '@angular/core';
 import {MatChipAction} from './chip-action';
-import {MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
+import {MAT_CHIP_AVATAR, MAT_CHIP_EDIT, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
 
 /** Avatar image within a chip. */
 @Directive({
@@ -42,6 +42,55 @@ export class MatChipTrailingIcon extends MatChipAction {
   override _isPrimary = false;
 }
 
+/**
+ * Directive to edit the parent chip when the leading action icon is clicked or
+ * when the ENTER key is pressed on it.
+ *
+ * Recommended for use with the Material Design "edit" icon
+ * available at https://material.io/icons/#ic_edit.
+ *
+ * Example:
+ *
+ * ```
+ * <mat-chip>
+ *   <button matChipEdit aria-label="Edit">
+ *     <mat-icon>edit</mat-icon>
+ *   </button>
+ * </mat-chip>
+ * ```
+ */
+
+@Directive({
+  selector: '[matChipEdit]',
+  host: {
+    'class':
+      'mat-mdc-chip-edit mat-mdc-chip-avatar mat-focus-indicator ' +
+      'mdc-evolution-chip__icon mdc-evolution-chip__icon--primary',
+    'role': 'button',
+    '[attr.aria-hidden]': 'null',
+  },
+  providers: [{provide: MAT_CHIP_EDIT, useExisting: MatChipEdit}],
+})
+export class MatChipEdit extends MatChipAction {
+  override _isPrimary = false;
+
+  override _handleClick(event: MouseEvent): void {
+    if (!this.disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+      this._parentChip._edit();
+    }
+  }
+
+  override _handleKeydown(event: KeyboardEvent) {
+    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+      this._parentChip._edit();
+    }
+  }
+}
+
 /**
  * Directive to remove the parent chip when the trailing icon is clicked or
  * when the ENTER key is pressed on it.

src/material/chips/chip-row.html

@@ -2,12 +2,19 @@
   <span class="mat-mdc-chip-focus-overlay"></span>
 }
 
+@if (!_isEditing && editIcon) {
+  <span
+    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary"
+    role="gridcell">
+    <ng-content select="[matChipEdit]"></ng-content>
+</span>
+}
 <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell"
     matChipAction
     [disabled]="disabled"
     [attr.aria-label]="ariaLabel"
     [attr.aria-describedby]="_ariaDescriptionId">
-  @if (leadingIcon) {
+  @if (!_isEditing && leadingIcon) {
     <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
       <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
     </span>

src/material/chips/chip-row.ts

@@ -41,15 +41,16 @@ export interface MatChipEditedEvent extends MatChipEvent {
   styleUrl: 'chip.css',
   host: {
     'class': 'mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip',
-    '[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
+    '[class.mat-mdc-chip-with-avatar]': '_hasLeadingIcon()',
     '[class.mat-mdc-chip-disabled]': 'disabled',
     '[class.mat-mdc-chip-editing]': '_isEditing',
     '[class.mat-mdc-chip-editable]': 'editable',
     '[class.mdc-evolution-chip--disabled]': 'disabled',
+    '[class.mdc-evolution-chip--with-leading-action]': '!!editIcon',
     '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
-    '[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
-    '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
-    '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
+    '[class.mdc-evolution-chip--with-primary-graphic]': '_hasLeadingIcon()',
+    '[class.mdc-evolution-chip--with-primary-icon]': '_hasLeadingIcon()',
+    '[class.mdc-evolution-chip--with-avatar]': '_hasLeadingIcon()',
     '[class.mat-mdc-chip-highlighted]': 'highlighted',
     '[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
     '[id]': 'id',
@@ -107,6 +108,11 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     });
   }
 
+  /** Returns whether the chip has a leading icon. */
+  _hasLeadingIcon() {
+    return !this._isEditing && !!(this.editIcon || this.leadingIcon);
+  }
+
   override _hasTrailingIcon() {
     // The trailing icon is hidden while editing.
     return !this._isEditing && super._hasTrailingIcon();
@@ -141,10 +147,18 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     }
   }
 
-  private _startEditing(event: Event) {
+  override _edit(): void {
+    // markForCheck necessary for edit input to be rendered
+    this._changeDetectorRef.markForCheck();
+    this._startEditing();
+  }
+
+  private _startEditing(event?: Event) {
     if (
       !this.primaryAction ||
-      (this.removeIcon && this._getSourceAction(event.target as Node) === this.removeIcon)
+      (this.removeIcon &&
+        !!event &&
+        this._getSourceAction(event.target as Node) === this.removeIcon)
     ) {
       return;
     }
@@ -158,7 +172,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     afterNextRender(
       () => {
         this._getEditInput().initialize(value);
-        this._editStartPending = false;
+        setTimeout(() => this._ngZone.run(() => (this._editStartPending = false)));
       },
       {injector: this._injector},
     );

src/material/chips/chip.scss

@@ -274,6 +274,7 @@ $fallbacks: m3-chip.get-tokens(m3-system.$theme-with-system-vars);
   // Moved out into variables, because the selectors are too long.
   $with-icon: '.mdc-evolution-chip--with-primary-icon';
   $with-graphic: '.mdc-evolution-chip--with-primary-graphic';
+  $with-leading: '.mdc-evolution-chip--with-leading-action';
   $with-trailing: '.mdc-evolution-chip--with-trailing-action';
 
   .mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(#{$with-icon}) & {
@@ -305,6 +306,11 @@ $fallbacks: m3-chip.get-tokens(m3-system.$theme-with-system-vars);
     padding-right: $_avatar-trailing-padding;
   }
 
+  .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-leading} & {
+    padding-left: 0;
+    padding-right: $_avatar-trailing-padding;
+  }
+
   [dir='rtl'] .mdc-evolution-chip--with-avatar#{$with-graphic}#{$with-trailing} & {
     padding-left: $_avatar-trailing-padding;
     padding-right: $_avatar-leading-padding;
@@ -531,7 +537,7 @@ $fallbacks: m3-chip.get-tokens(m3-system.$theme-with-system-vars);
     }
   }
 
-  .mat-mdc-chip-remove {
+  .mat-mdc-chip-edit, .mat-mdc-chip-remove {
     opacity: token-utils.slot(trailing-action-opacity);
 
     &:focus {
@@ -683,7 +689,7 @@ $fallbacks: m3-chip.get-tokens(m3-system.$theme-with-system-vars);
   }
 }
 
-.mat-mdc-chip-remove {
+.mat-mdc-chip-edit, .mat-mdc-chip-remove {
   &::before {
     $default-border-width: focus-indicators-private.$default-border-width;
     $offset: var(--mat-focus-indicator-border-width, #{$default-border-width});
@@ -747,6 +753,6 @@ $fallbacks: m3-chip.get-tokens(m3-system.$theme-with-system-vars);
 // Prevents icon from being cut off when text spacing is increased.
 // .mat-mdc-chip-remove selector necessary for remove button with icon.
 // Fixes b/250063405.
-.mdc-evolution-chip__icon, .mat-mdc-chip-remove .mat-icon {
+.mdc-evolution-chip__icon, .mat-mdc-chip-edit .mat-icon, .mat-mdc-chip-remove .mat-icon {
   min-height: fit-content;
 }

src/material/chips/chip.ts

@@ -44,8 +44,14 @@ import {
 } from '../core';
 import {Subject, Subscription, merge} from 'rxjs';
 import {MatChipAction} from './chip-action';
-import {MatChipAvatar, MatChipRemove, MatChipTrailingIcon} from './chip-icons';
-import {MAT_CHIP, MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
+import {MatChipAvatar, MatChipEdit, MatChipRemove, MatChipTrailingIcon} from './chip-icons';
+import {
+  MAT_CHIP,
+  MAT_CHIP_AVATAR,
+  MAT_CHIP_EDIT,
+  MAT_CHIP_REMOVE,
+  MAT_CHIP_TRAILING_ICON,
+} from './tokens';
 
 /** Represents an event fired on an individual `mat-chip`. */
 export interface MatChipEvent {
@@ -133,6 +139,10 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   @ContentChildren(MAT_CHIP_TRAILING_ICON, {descendants: true})
   protected _allTrailingIcons: QueryList<MatChipTrailingIcon>;
 
+  /** All edit icons present in the chip. */
+  @ContentChildren(MAT_CHIP_EDIT, {descendants: true})
+  protected _allEditIcons: QueryList<MatChipEdit>;
+
   /** All remove icons present in the chip. */
   @ContentChildren(MAT_CHIP_REMOVE, {descendants: true})
   protected _allRemoveIcons: QueryList<MatChipRemove>;
@@ -225,6 +235,9 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   /** The chip's leading icon. */
   @ContentChild(MAT_CHIP_AVATAR) leadingIcon: MatChipAvatar;
 
+  /** The chip's leading edit icon. */
+  @ContentChild(MAT_CHIP_EDIT) editIcon: MatChipEdit;
+
   /** The chip's trailing icon. */
   @ContentChild(MAT_CHIP_TRAILING_ICON) trailingIcon: MatChipTrailingIcon;
 
@@ -279,6 +292,7 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     this._actionChanges = merge(
       this._allLeadingIcons.changes,
       this._allTrailingIcons.changes,
+      this._allEditIcons.changes,
       this._allRemoveIcons.changes,
     ).subscribe(() => this._changeDetectorRef.markForCheck());
   }
@@ -358,6 +372,10 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   _getActions(): MatChipAction[] {
     const result: MatChipAction[] = [];
 
+    if (this.editIcon) {
+      result.push(this.editIcon);
+    }
+
     if (this.primaryAction) {
       result.push(this.primaryAction);
     }
@@ -378,6 +396,11 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     // Empty here, but is overwritten in child classes.
   }
 
+  /** Handles interactions with the edit action of the chip. */
+  _edit(event: Event) {
+    // Empty here, but is overwritten in child classes.
+  }
+
   /** Starts the focus monitoring process on the chip. */
   private _monitorFocus() {
     this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {

src/material/chips/module.ts

@@ -13,7 +13,7 @@ import {MatChip} from './chip';
 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';
+import {MatChipAvatar, MatChipEdit, MatChipRemove, MatChipTrailingIcon} from './chip-icons';
 import {MatChipInput} from './chip-input';
 import {MatChipListbox} from './chip-listbox';
 import {MatChipRow} from './chip-row';
@@ -24,6 +24,7 @@ import {MatChipAction} from './chip-action';
 const CHIP_DECLARATIONS = [
   MatChip,
   MatChipAvatar,
+  MatChipEdit,
   MatChipEditInput,
   MatChipGrid,
   MatChipInput,

src/material/chips/tokens.ts

@@ -46,6 +46,13 @@ export const MAT_CHIP_AVATAR = new InjectionToken('MatChipAvatar');
  */
 export const MAT_CHIP_TRAILING_ICON = new InjectionToken('MatChipTrailingIcon');
 
+/**
+ * Injection token that can be used to reference instances of `MatChipEdit`. It serves as
+ * alternative token to the actual `MatChipEdit` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_CHIP_EDIT = new InjectionToken('MatChipEdit');
+
 /**
  * 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