fix(chips): support readonly collections in inputs (#20292)

Author: rafaelss95

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

@@ -12,7 +12,7 @@ import {InjectionToken} from '@angular/core';
 /** Default options, for the chips module, that can be overridden. */
 export interface MatChipsDefaultOptions {
   /** The list of key codes that will trigger a chipEnd event. */
-  separatorKeyCodes: number[] | Set<number>;
+  separatorKeyCodes: readonly number[] | ReadonlySet<number>;
 }
 
 /** Injection token to be used to override the default options for the chips module. */

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

@@ -7,9 +7,9 @@
  */
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Directive, ElementRef, EventEmitter, Inject, Input, OnChanges, Output} from '@angular/core';
 import {hasModifierKey, TAB} from '@angular/cdk/keycodes';
-import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
+import {Directive, ElementRef, EventEmitter, Inject, Input, OnChanges, Output} from '@angular/core';
+import {MatChipsDefaultOptions, MAT_CHIPS_DEFAULT_OPTIONS} from './chip-default-options';
 import {MatChipGrid} from './chip-grid';
 import {MatChipTextControl} from './chip-text-control';
 
@@ -74,7 +74,8 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
    * Defaults to `[ENTER]`.
    */
   @Input('matChipInputSeparatorKeyCodes')
-  separatorKeyCodes: number[] | Set<number> = this._defaultOptions.separatorKeyCodes;
+  separatorKeyCodes: readonly number[] | ReadonlySet<number> =
+      this._defaultOptions.separatorKeyCodes;
 
   /** Emitted when a chip is to be added. */
   @Output('matChipInputTokenEnd')
@@ -163,13 +164,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
 
   /** Checks whether a keycode is one of the configured separators. */
   private _isSeparatorKey(event: KeyboardEvent) {
-    if (hasModifierKey(event)) {
-      return false;
-    }
-
-    const separators = this.separatorKeyCodes;
-    const keyCode = event.keyCode;
-    return Array.isArray(separators) ? separators.indexOf(keyCode) > -1 : separators.has(keyCode);
+    return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
   }
 
   static ngAcceptInputType_addOnBlur: BooleanInput;

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

@@ -137,7 +137,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   /** Emits when the chip is blurred. */
   readonly _onBlur = new Subject<MatChipEvent>();
 
-  readonly REMOVE_ICON_HANDLED_KEYS: Set<number> = new Set([SPACE, ENTER]);
+  readonly REMOVE_ICON_HANDLED_KEYS: ReadonlySet<number> = new Set([SPACE, ENTER]);
 
   /** Whether this chip is a basic (unstyled) chip. */
   readonly _isBasicChip: boolean;

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

@@ -11,7 +11,7 @@ import {InjectionToken} from '@angular/core';
 /** Default options, for the chips module, that can be overridden. */
 export interface MatChipsDefaultOptions {
   /** The list of key codes that will trigger a chipEnd event. */
-  separatorKeyCodes: number[] | Set<number>;
+  separatorKeyCodes: readonly number[] | ReadonlySet<number>;
 }
 
 /** Injection token to be used to override the default options for the chips module. */

src/material/chips/chip-input.ts

@@ -7,9 +7,9 @@
  */
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Directive, ElementRef, EventEmitter, Inject, Input, OnChanges, Output} from '@angular/core';
 import {hasModifierKey, TAB} from '@angular/cdk/keycodes';
-import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
+import {Directive, ElementRef, EventEmitter, Inject, Input, OnChanges, Output} from '@angular/core';
+import {MatChipsDefaultOptions, MAT_CHIPS_DEFAULT_OPTIONS} from './chip-default-options';
 import {MatChipList} from './chip-list';
 import {MatChipTextControl} from './chip-text-control';
 
@@ -74,7 +74,8 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
    * Defaults to `[ENTER]`.
    */
   @Input('matChipInputSeparatorKeyCodes')
-  separatorKeyCodes: number[] | Set<number> = this._defaultOptions.separatorKeyCodes;
+  separatorKeyCodes: readonly number[] | ReadonlySet<number> =
+      this._defaultOptions.separatorKeyCodes;
 
   /** Emitted when a chip is to be added. */
   @Output('matChipInputTokenEnd')
@@ -163,13 +164,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
 
   /** Checks whether a keycode is one of the configured separators. */
   private _isSeparatorKey(event: KeyboardEvent) {
-    if (hasModifierKey(event)) {
-      return false;
-    }
-
-    const separators = this.separatorKeyCodes;
-    const keyCode = event.keyCode;
-    return Array.isArray(separators) ? separators.indexOf(keyCode) > -1 : separators.has(keyCode);
+    return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
   }
 
   static ngAcceptInputType_addOnBlur: BooleanInput;

tools/public_api_guard/material/chips.d.ts

@@ -85,7 +85,7 @@ export declare class MatChipInput implements MatChipTextControl, OnChanges {
     focused: boolean;
     id: string;
     placeholder: string;
-    separatorKeyCodes: number[] | Set<number>;
+    separatorKeyCodes: readonly number[] | ReadonlySet<number>;
     constructor(_elementRef: ElementRef<HTMLInputElement>, _defaultOptions: MatChipsDefaultOptions);
     _blur(): void;
     _emitChipEnd(event?: KeyboardEvent): void;
@@ -200,7 +200,7 @@ export declare class MatChipRemove {
 }
 
 export interface MatChipsDefaultOptions {
-    separatorKeyCodes: number[] | Set<number>;
+    separatorKeyCodes: readonly number[] | ReadonlySet<number>;
 }
 
 export declare class MatChipSelectionChange {