fix(base): Add EDITING and EDITABLE states to the chip.

PiperOrigin-RevId: 314367772

Author: material-web-copybara

packages/mdc-chips/chip/adapter.ts

@@ -93,6 +93,16 @@ export interface MDCChipAdapter {
    */
   notifyNavigation(key: string, source: EventSource): void;
 
+  /**
+   * Emits when editing starts.
+   */
+  notifyEditStart(): void;
+
+  /**
+   * Emits when editing finishes.
+   */
+  notifyEditFinish(): void;
+
   /**
    * @return The computed property value of the given style property on the root element.
    */

packages/mdc-chips/chip/component.ts

@@ -267,6 +267,8 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
           this.emit<MDCChipInteractionEventDetail>(
               strings.TRAILING_ICON_INTERACTION_EVENT, {chipId: this.id},
               true /* shouldBubble */),
+      notifyEditStart: () => { /* Not Implemented. */ },
+      notifyEditFinish: () => { /* Not Implemented. */ },
       removeClass: (className) => this.root.classList.remove(className),
       removeClassFromLeadingIcon: (className) => {
         if (this.leadingIcon_) {

packages/mdc-chips/chip/constants.ts

@@ -69,6 +69,8 @@ export const cssClasses = {
   CHECKMARK: 'mdc-chip__checkmark',
   CHIP_EXIT: 'mdc-chip--exit',
   DELETABLE: 'mdc-chip--deletable',
+  EDITABLE: 'mdc-chip--editable',
+  EDITING: 'mdc-chip--editing',
   HIDDEN_LEADING_ICON: 'mdc-chip__icon--leading-hidden',
   LEADING_ICON: 'mdc-chip__icon--leading',
   PRIMARY_ACTION: 'mdc-chip__primary-action',

packages/mdc-chips/chip/foundation.ts

@@ -66,6 +66,8 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
       hasLeadingIcon: () => false,
       isRTL: () => false,
       isTrailingActionNavigable: () => false,
+      notifyEditFinish: () => undefined,
+      notifyEditStart: () => undefined,
       notifyInteraction: () => undefined,
       notifyNavigation: () => undefined,
       notifyRemoval: () => undefined,
@@ -97,6 +99,14 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
     return this.adapter.hasClass(cssClasses.SELECTED);
   }
 
+  isEditable() {
+    return this.adapter.hasClass(cssClasses.EDITABLE);
+  }
+
+  isEditing() {
+    return this.adapter.hasClass(cssClasses.EDITING);
+  }
+
   setSelected(selected: boolean) {
     this.setSelected_(selected);
     this.notifySelection_(selected);
@@ -162,6 +172,12 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
     this.setPrimaryActionFocusable_(this.getFocusBehavior_());
   }
 
+  handleDoubleClick() {
+    if (this.isEditable()) {
+      this.startEditing();
+    }
+  }
+
   /**
    * Handles a transition end event on the root element.
    */
@@ -239,6 +255,10 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
       return;
     }
 
+    if (this.isEditing()) {
+      this.finishEditing();
+    }
+
     this.adapter.removeClass(cssClasses.PRIMARY_ACTION_FOCUSED);
   }
 
@@ -255,6 +275,23 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
    * Handles a keydown event from the root element.
    */
   handleKeydown(evt: KeyboardEvent) {
+    if (this.isEditing()) {
+      if (this.shouldFinishEditing(evt)) {
+        evt.preventDefault();
+        this.finishEditing();
+      }
+      // When editing, the foundation should only handle key events that finish
+      // the editing process.
+      return;
+    }
+
+    if (this.isEditable()) {
+      if (this.shouldStartEditing(evt)) {
+        evt.preventDefault();
+        this.startEditing();
+      }
+    }
+
     if (this.shouldNotifyInteraction_(evt)) {
       this.adapter.notifyInteraction();
       this.setPrimaryActionFocusable_(this.getFocusBehavior_());
@@ -366,6 +403,14 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
     }
   }
 
+  private shouldStartEditing(evt: KeyboardEvent): boolean {
+    return this.eventFromPrimaryAction_(evt) && evt.key === strings.ENTER_KEY;
+  }
+
+  private shouldFinishEditing(evt: KeyboardEvent): boolean {
+    return evt.key === strings.ENTER_KEY;
+  }
+
   private shouldNotifyInteraction_(evt: KeyboardEvent): boolean {
     return evt.key === strings.ENTER_KEY || evt.key === strings.SPACEBAR_KEY;
   }
@@ -399,6 +444,16 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
     return this.adapter.eventTargetHasClass(
         evt.target, cssClasses.PRIMARY_ACTION);
   }
+
+  private startEditing() {
+    this.adapter.addClass(cssClasses.EDITING);
+    this.adapter.notifyEditStart();
+  }
+
+  private finishEditing() {
+    this.adapter.removeClass(cssClasses.EDITING);
+    this.adapter.notifyEditFinish();
+  }
 }
 
 // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.