@angular/material/fesm2020/legacy-chips.mjs.map

Angular Material

{"version":3,"file":"legacy-chips.mjs","sources":["../../../../../../src/material/legacy-chips/chip.ts","../../../../../../src/material/legacy-chips/chip-default-options.ts","../../../../../../src/material/legacy-chips/chip-list.ts","../../../../../../src/material/legacy-chips/chip-input.ts","../../../../../../src/material/legacy-chips/chips-module.ts","../../../../../../src/material/legacy-chips/public-api.ts","../../../../../../src/material/legacy-chips/index.ts","../../../../../../src/material/legacy-chips/legacy-chips_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {FocusableOption} from '@angular/cdk/a11y';\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {BACKSPACE, DELETE, SPACE} from '@angular/cdk/keycodes';\nimport {Platform} from '@angular/cdk/platform';\nimport {DOCUMENT} from '@angular/common';\nimport {\n  Attribute,\n  ChangeDetectorRef,\n  ContentChild,\n  Directive,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  InjectionToken,\n  Input,\n  NgZone,\n  OnDestroy,\n  Optional,\n  Output,\n} from '@angular/core';\nimport {\n  CanColor,\n  CanDisable,\n  CanDisableRipple,\n  HasTabIndex,\n  MAT_RIPPLE_GLOBAL_OPTIONS,\n  mixinColor,\n  mixinDisableRipple,\n  mixinTabIndex,\n  RippleConfig,\n  RippleGlobalOptions,\n  RippleRenderer,\n  RippleTarget,\n} from '@angular/material/core';\nimport {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';\nimport {Subject} from 'rxjs';\nimport {take} from 'rxjs/operators';\n\n/**\n * Represents an event fired on an individual `mat-chip`.\n * @deprecated Use `MatChipEvent` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nexport interface MatLegacyChipEvent {\n  /** The chip the event was fired on. */\n  chip: MatLegacyChip;\n}\n\n/**\n * Event object emitted by MatChip when selected or deselected.\n * @deprecated Use `MatChipSelectionChange` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nexport class MatLegacyChipSelectionChange {\n  constructor(\n    /** Reference to the chip that emitted the event. */\n    public source: MatLegacyChip,\n    /** Whether the chip that emitted the event is selected. */\n    public selected: boolean,\n    /** Whether the selection change was a result of a user interaction. */\n    public isUserInput = false,\n  ) {}\n}\n\n/**\n * Injection token that can be used to reference instances of `MatChipRemove`. It serves as\n * alternative token to the actual `MatChipRemove` class which could cause unnecessary\n * retention of the class and its directive metadata.\n * @deprecated Use `MAT_CHIP_REMOVE` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nexport const MAT_LEGACY_CHIP_REMOVE = new InjectionToken<MatLegacyChipRemove>('MatChipRemove');\n\n/**\n * Injection token that can be used to reference instances of `MatChipAvatar`. It serves as\n * alternative token to the actual `MatChipAvatar` class which could cause unnecessary\n * retention of the class and its directive metadata.\n * @deprecated Use `MAT_CHIP_AVATAR` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nexport const MAT_LEGACY_CHIP_AVATAR = new InjectionToken<MatLegacyChipAvatar>('MatChipAvatar');\n\n/**\n * Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as\n * alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary\n * retention of the class and its directive metadata.\n * @deprecated Use `MAT_CHIP_TRAILING_ICON` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nexport const MAT_LEGACY_CHIP_TRAILING_ICON = new InjectionToken<MatLegacyChipTrailingIcon>(\n  'MatChipTrailingIcon',\n);\n\n// Boilerplate for applying mixins to MatChip.\n/** @docs-private */\nabstract class MatChipBase {\n  abstract disabled: boolean;\n  constructor(public _elementRef: ElementRef) {}\n}\n\nconst _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBase), 'primary'), -1);\n\n/**\n * Dummy directive to add CSS class to chip avatar.\n * @docs-private\n * @deprecated Use `MatChipAvatar` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\n@Directive({\n  selector: 'mat-chip-avatar, [matChipAvatar]',\n  host: {'class': 'mat-chip-avatar'},\n  providers: [{provide: MAT_LEGACY_CHIP_AVATAR, useExisting: MatLegacyChipAvatar}],\n})\nexport class MatLegacyChipAvatar {}\n\n/**\n * Dummy directive to add CSS class to chip trailing icon.\n * @docs-private\n * @deprecated Use `MatChipTrailingIcon` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\n@Directive({\n  selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',\n  host: {'class': 'mat-chip-trailing-icon'},\n  providers: [{provide: MAT_LEGACY_CHIP_TRAILING_ICON, useExisting: MatLegacyChipTrailingIcon}],\n})\nexport class MatLegacyChipTrailingIcon {}\n\n/**\n * Material Design styled chip directive. Used inside the MatChipList component.\n * @deprecated Use `MatChip` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\n@Directive({\n  selector: `mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`,\n  inputs: ['color', 'disableRipple', 'tabIndex'],\n  exportAs: 'matChip',\n  host: {\n    'class': 'mat-chip mat-focus-indicator',\n    '[attr.tabindex]': 'disabled ? null : tabIndex',\n    '[attr.role]': 'role',\n    '[class.mat-chip-selected]': 'selected',\n    '[class.mat-chip-with-avatar]': 'avatar',\n    '[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon',\n    '[class.mat-chip-disabled]': 'disabled',\n    '[class._mat-animation-noopable]': '_animationsDisabled',\n    '[attr.disabled]': 'disabled || null',\n    '[attr.aria-disabled]': 'disabled.toString()',\n    '[attr.aria-selected]': 'ariaSelected',\n    '(click)': '_handleClick($event)',\n    '(keydown)': '_handleKeydown($event)',\n    '(focus)': 'focus()',\n    '(blur)': '_blur()',\n  },\n})\nexport class MatLegacyChip\n  extends _MatChipMixinBase\n  implements\n    FocusableOption,\n    OnDestroy,\n    CanColor,\n    CanDisableRipple,\n    RippleTarget,\n    HasTabIndex,\n    CanDisable\n{\n  /** Reference to the RippleRenderer for the chip. */\n  private _chipRipple: RippleRenderer;\n\n  /**\n   * Reference to the element that acts as the chip's ripple target. This element is\n   * dynamically added as a child node of the chip. The chip itself cannot be used as the\n   * ripple target because it must be the host of the focus indicator.\n   */\n  private _chipRippleTarget: HTMLElement;\n\n  /**\n   * Ripple configuration for ripples that are launched on pointer down. The ripple config\n   * is set to the global ripple options since we don't have any configurable options for\n   * the chip ripples.\n   * @docs-private\n   */\n  rippleConfig: RippleConfig & RippleGlobalOptions;\n\n  /**\n   * Whether ripples are disabled on interaction\n   * @docs-private\n   */\n  get rippleDisabled(): boolean {\n    return (\n      this.disabled ||\n      this.disableRipple ||\n      this._animationsDisabled ||\n      !!this.rippleConfig.disabled\n    );\n  }\n\n  /** Whether the chip has focus. */\n  _hasFocus: boolean = false;\n\n  /** Whether animations for the chip are enabled. */\n  _animationsDisabled: boolean;\n\n  /** Whether the chip list is selectable */\n  chipListSelectable: boolean = true;\n\n  /** Whether the chip list is in multi-selection mode. */\n  _chipListMultiple: boolean = false;\n\n  /** Whether the chip list as a whole is disabled. */\n  _chipListDisabled: boolean = false;\n\n  /** The chip avatar */\n  @ContentChild(MAT_LEGACY_CHIP_AVATAR) avatar: MatLegacyChipAvatar;\n\n  /** The chip's trailing icon. */\n  @ContentChild(MAT_LEGACY_CHIP_TRAILING_ICON) trailingIcon: MatLegacyChipTrailingIcon;\n\n  /** The chip's remove toggler. */\n  @ContentChild(MAT_LEGACY_CHIP_REMOVE) removeIcon: MatLegacyChipRemove;\n\n  /** ARIA role that should be applied to the chip. */\n  @Input() role: string = 'option';\n\n  /** Whether the chip is selected. */\n  @Input()\n  get selected(): boolean {\n    return this._selected;\n  }\n  set selected(value: BooleanInput) {\n    const coercedValue = coerceBooleanProperty(value);\n\n    if (coercedValue !== this._selected) {\n      this._selected = coercedValue;\n      this._dispatchSelectionChange();\n    }\n  }\n  protected _selected: boolean = false;\n\n  /** The value of the chip. Defaults to the content inside `<mat-chip>` tags. */\n  @Input()\n  get value(): any {\n    return this._value !== undefined ? this._value : this._elementRef.nativeElement.textContent;\n  }\n  set value(value: any) {\n    this._value = value;\n  }\n  protected _value: any;\n\n  /**\n   * Whether or not the chip is selectable. When a chip is not selectable,\n   * changes to its selected state are always ignored. By default a chip is\n   * selectable, and it becomes non-selectable if its parent chip list is\n   * not selectable.\n   */\n  @Input()\n  get selectable(): boolean {\n    return this._selectable && this.chipListSelectable;\n  }\n  set selectable(value: BooleanInput) {\n    this._selectable = coerceBooleanProperty(value);\n  }\n  protected _selectable: boolean = true;\n\n  /** Whether the chip is disabled. */\n  @Input()\n  get disabled(): boolean {\n    return this._chipListDisabled || this._disabled;\n  }\n  set disabled(value: BooleanInput) {\n    this._disabled = coerceBooleanProperty(value);\n  }\n  protected _disabled: boolean = false;\n\n  /**\n   * Determines whether or not the chip displays the remove styling and emits (removed) events.\n   */\n  @Input()\n  get removable(): boolean {\n    return this._removable;\n  }\n  set removable(value: BooleanInput) {\n    this._removable = coerceBooleanProperty(value);\n  }\n  protected _removable: boolean = true;\n\n  /** Emits when the chip is focused. */\n  readonly _onFocus = new Subject<MatLegacyChipEvent>();\n\n  /** Emits when the chip is blurred. */\n  readonly _onBlur = new Subject<MatLegacyChipEvent>();\n\n  /** Emitted when the chip is selected or deselected. */\n  @Output() readonly selectionChange: EventEmitter<MatLegacyChipSelectionChange> =\n    new EventEmitter<MatLegacyChipSelectionChange>();\n\n  /** Emitted when the chip is destroyed. */\n  @Output() readonly destroyed: EventEmitter<MatLegacyChipEvent> =\n    new EventEmitter<MatLegacyChipEvent>();\n\n  /** Emitted when a chip is to be removed. */\n  @Output() readonly removed: EventEmitter<MatLegacyChipEvent> =\n    new EventEmitter<MatLegacyChipEvent>();\n\n  /** The ARIA selected applied to the chip. */\n  get ariaSelected(): string | null {\n    // Remove the `aria-selected` when the chip is deselected in single-selection mode, because\n    // it adds noise to NVDA users where \"not selected\" will be read out for each chip.\n    return this.selectable && (this._chipListMultiple || this.selected)\n      ? this.selected.toString()\n      : null;\n  }\n\n  constructor(\n    elementRef: ElementRef<HTMLElement>,\n    private _ngZone: NgZone,\n    platform: Platform,\n    @Optional()\n    @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)\n    globalRippleOptions: RippleGlobalOptions | null,\n    private _changeDetectorRef: ChangeDetectorRef,\n    @Inject(DOCUMENT) _document: any,\n    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,\n    @Attribute('tabindex') tabIndex?: string,\n  ) {\n    super(elementRef);\n\n    this._addHostClassName();\n\n    // Dynamically create the ripple target, append it within the chip, and use it as the\n    // chip's ripple target. Adding the class '.mat-chip-ripple' ensures that it will have\n    // the proper styles.\n    this._chipRippleTarget = _document.createElement('div');\n    this._chipRippleTarget.classList.add('mat-chip-ripple');\n    this._elementRef.nativeElement.appendChild(this._chipRippleTarget);\n    this._chipRipple = new RippleRenderer(this, _ngZone, this._chipRippleTarget, platform);\n    this._chipRipple.setupTriggerEvents(elementRef);\n\n    this.rippleConfig = globalRippleOptions || {};\n    this._animationsDisabled = animationMode === 'NoopAnimations';\n    this.tabIndex = tabIndex != null ? parseInt(tabIndex) || -1 : -1;\n  }\n\n  _addHostClassName() {\n    const basicChipAttrName = 'mat-basic-chip';\n    const element = this._elementRef.nativeElement as HTMLElement;\n\n    if (\n      element.hasAttribute(basicChipAttrName) ||\n      element.tagName.toLowerCase() === basicChipAttrName\n    ) {\n      element.classList.add(basicChipAttrName);\n      return;\n    } else {\n      element.classList.add('mat-standard-chip');\n    }\n  }\n\n  ngOnDestroy() {\n    this.destroyed.emit({chip: this});\n    this._chipRipple._removeTriggerEvents();\n  }\n\n  /** Selects the chip. */\n  select(): void {\n    if (!this._selected) {\n      this._selected = true;\n      this._dispatchSelectionChange();\n      this._changeDetectorRef.markForCheck();\n    }\n  }\n\n  /** Deselects the chip. */\n  deselect(): void {\n    if (this._selected) {\n      this._selected = false;\n      this._dispatchSelectionChange();\n      this._changeDetectorRef.markForCheck();\n    }\n  }\n\n  /** Select this chip and emit selected event */\n  selectViaInteraction(): void {\n    if (!this._selected) {\n      this._selected = true;\n      this._dispatchSelectionChange(true);\n      this._changeDetectorRef.markForCheck();\n    }\n  }\n\n  /** Toggles the current selected state of this chip. */\n  toggleSelected(isUserInput: boolean = false): boolean {\n    this._selected = !this.selected;\n    this._dispatchSelectionChange(isUserInput);\n    this._changeDetectorRef.markForCheck();\n    return this.selected;\n  }\n\n  /** Allows for programmatic focusing of the chip. */\n  focus(): void {\n    if (!this._hasFocus) {\n      this._elementRef.nativeElement.focus();\n      this._onFocus.next({chip: this});\n    }\n    this._hasFocus = true;\n  }\n\n  /**\n   * Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or\n   * BACKSPACE keys are pressed.\n   *\n   * Informs any listeners of the removal request. Does not remove the chip from the DOM.\n   */\n  remove(): void {\n    if (this.removable) {\n      this.removed.emit({chip: this});\n    }\n  }\n\n  /** Handles click events on the chip. */\n  _handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  /** Handle custom key presses. */\n  _handleKeydown(event: KeyboardEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    switch (event.keyCode) {\n      case DELETE:\n      case BACKSPACE:\n        // If we are removable, remove the focused chip\n        this.remove();\n        // Always prevent so page navigation does not occur\n        event.preventDefault();\n        break;\n      case SPACE:\n        // If we are selectable, toggle the focused chip\n        if (this.selectable) {\n          this.toggleSelected(true);\n        }\n\n        // Always prevent space from scrolling the page since the list has focus\n        event.preventDefault();\n        break;\n    }\n  }\n\n  _blur(): void {\n    // When animations are enabled, Angular may end up removing the chip from the DOM a little\n    // earlier than usual, causing it to be blurred and throwing off the logic in the chip list\n    // that moves focus not the next item. To work around the issue, we defer marking the chip\n    // as not focused until the next time the zone stabilizes.\n    this._ngZone.onStable.pipe(take(1)).subscribe(() => {\n      this._ngZone.run(() => {\n        this._hasFocus = false;\n        this._onBlur.next({chip: this});\n      });\n    });\n  }\n\n  private _dispatchSelectionChange(isUserInput = false) {\n    this.selectionChange.emit({\n      source: this,\n      isUserInput,\n      selected: this._selected,\n    });\n  }\n}\n\n/**\n * Applies proper (click) support and adds styling for use with the Material Design \"cancel\" icon\n * available at https://material.io/icons/#ic_cancel.\n *\n * Example:\n *\n *     `<mat-chip>\n *       <mat-icon matChipRemove>cancel</mat-icon>\n *     </mat-chip>`\n *\n * You *may* use a custom icon, but you may need to override the `mat-chip-remove` positioning\n * styles to properly center the icon within the chip.\n *\n * @deprecated Use `MatChipRemove` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\n@Directive({\n  selector: '[matChipRemove]',\n  host: {\n    'class': 'mat-chip-remove mat-chip-trailing-icon',\n    '(click)': '_handleClick($event)',\n  },\n  providers: [{provide: MAT_LEGACY_CHIP_REMOVE, useExisting: MatLegacyChipRemove}],\n})\nexport class MatLegacyChipRemove {\n  constructor(protected _parentChip: MatLegacyChip, elementRef: ElementRef<HTMLElement>) {\n    if (elementRef.nativeElement.nodeName === 'BUTTON') {\n      elementRef.nativeElement.setAttribute('type', 'button');\n    }\n  }\n\n  /** Calls the parent chip's public `remove()` method if applicable. */\n  _handleClick(event: Event): void {\n    const parentChip = this._parentChip;\n\n    if (parentChip.removable && !parentChip.disabled) {\n      parentChip.remove();\n    }\n\n    // We need to stop event propagation because otherwise the event will bubble up to the\n    // form field and cause the `onContainerClick` method to be invoked. This method would then\n    // reset the focused chip that has been focused after chip removal. Usually the parent\n    // the parent click listener of the `MatChip` would prevent propagation, but it can happen\n    // that the chip is being removed before the event bubbles up.\n    event.stopPropagation();\n    event.preventDefault();\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {InjectionToken} from '@angular/core';\n\n/**\n * Default options, for the chips module, that can be overridden.\n * @deprecated Use `MatChipsDefaultOptions` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nexport interface MatLegacyChipsDefaultOptions {\n  /** The list of key codes that will trigger a chipEnd event. */\n  separatorKeyCodes: readonly number[] | ReadonlySet<number>;\n}\n\n/**\n * Injection token to be used to override the default options for the chips module.\n * @deprecated Use `MAT_CHIPS_DEFAULT_OPTIONS` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nexport const MAT_LEGACY_CHIPS_DEFAULT_OPTIONS = new InjectionToken<MatLegacyChipsDefaultOptions>(\n  'mat-chips-default-options',\n);\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {FocusKeyManager} from '@angular/cdk/a11y';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {SelectionModel} from '@angular/cdk/collections';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  DoCheck,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  QueryList,\n  Self,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormGroupDirective,\n  NgControl,\n  NgForm,\n  Validators,\n} from '@angular/forms';\nimport {CanUpdateErrorState, ErrorStateMatcher, mixinErrorState} from '@angular/material/core';\nimport {MatLegacyFormFieldControl} from '@angular/material/legacy-form-field';\nimport {merge, Observable, Subject, Subscription} from 'rxjs';\nimport {startWith, takeUntil} from 'rxjs/operators';\nimport {MatLegacyChip, MatLegacyChipEvent, MatLegacyChipSelectionChange} from './chip';\nimport {MatLegacyChipTextControl} from './chip-text-control';\n\n// Boilerplate for applying mixins to MatChipList.\n/** @docs-private */\nconst _MatChipListBase = mixinErrorState(\n  class {\n    /**\n     * Emits whenever the component state changes and should cause the parent\n     * form-field to update. Implemented as part of `MatFormFieldControl`.\n     * @docs-private\n     */\n    readonly stateChanges = new Subject<void>();\n\n    constructor(\n      public _defaultErrorStateMatcher: ErrorStateMatcher,\n      public _parentForm: NgForm,\n      public _parentFormGroup: FormGroupDirective,\n      /**\n       * Form control bound to the component.\n       * Implemented as part of `MatFormFieldControl`.\n       * @docs-private\n       */\n      public ngControl: NgControl,\n    ) {}\n  },\n);\n\n// Increasing integer for generating unique ids for chip-list components.\nlet nextUniqueId = 0;\n\n/**\n * Change event object that is emitted when the chip list value has changed.\n * @deprecated Use `MatChipListChange` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nexport class MatLegacyChipListChange {\n  constructor(\n    /** Chip list that emitted the event. */\n    public source: MatLegacyChipList,\n    /** Value of the chip list when the event was emitted. */\n    public value: any,\n  ) {}\n}\n\n/**\n * A material design chips component (named ChipList for its similarity to the List component).\n * @deprecated Use `MatChipList` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\n@Component({\n  selector: 'mat-chip-list',\n  template: `<div class=\"mat-chip-list-wrapper\"><ng-content></ng-content></div>`,\n  exportAs: 'matChipList',\n  host: {\n    '[attr.tabindex]': 'disabled ? null : _tabIndex',\n    '[attr.aria-required]': 'role ? required : null',\n    '[attr.aria-disabled]': 'disabled.toString()',\n    '[attr.aria-invalid]': 'errorState',\n    '[attr.aria-multiselectable]': 'multiple',\n    '[attr.role]': 'role',\n    '[class.mat-chip-list-disabled]': 'disabled',\n    '[class.mat-chip-list-invalid]': 'errorState',\n    '[class.mat-chip-list-required]': 'required',\n    '[attr.aria-orientation]': 'ariaOrientation',\n    'class': 'mat-chip-list',\n    '(focus)': 'focus()',\n    '(blur)': '_blur()',\n    '(keydown)': '_keydown($event)',\n    '[id]': '_uid',\n  },\n  providers: [{provide: MatLegacyFormFieldControl, useExisting: MatLegacyChipList}],\n  styleUrls: ['chips.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatLegacyChipList\n  extends _MatChipListBase\n  implements\n    MatLegacyFormFieldControl<any>,\n    ControlValueAccessor,\n    AfterContentInit,\n    DoCheck,\n    OnInit,\n    OnDestroy,\n    CanUpdateErrorState\n{\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  readonly controlType: string = 'mat-chip-list';\n\n  /**\n   * When a chip is destroyed, we store the index of the destroyed chip until the chips\n   * query list notifies about the update. This is necessary because we cannot determine an\n   * appropriate chip that should receive focus until the array of chips updated completely.\n   */\n  private _lastDestroyedChipIndex: number | null = null;\n\n  /** Subject that emits when the component has been destroyed. */\n  private readonly _destroyed = new Subject<void>();\n\n  /** Subscription to focus changes in the chips. */\n  private _chipFocusSubscription: Subscription | null;\n\n  /** Subscription to blur changes in the chips. */\n  private _chipBlurSubscription: Subscription | null;\n\n  /** Subscription to selection changes in chips. */\n  private _chipSelectionSubscription: Subscription | null;\n\n  /** Subscription to remove changes in chips. */\n  private _chipRemoveSubscription: Subscription | null;\n\n  /** The chip input to add more chips */\n  protected _chipInput: MatLegacyChipTextControl;\n\n  /** Uid of the chip list */\n  _uid: string = `mat-chip-list-${nextUniqueId++}`;\n\n  /** Tab index for the chip list. */\n  _tabIndex = 0;\n\n  /**\n   * User defined tab index.\n   * When it is not null, use user defined tab index. Otherwise use _tabIndex\n   */\n  _userTabIndex: number | null = null;\n\n  /** The FocusKeyManager which handles focus. */\n  _keyManager: FocusKeyManager<MatLegacyChip>;\n\n  /** Function when touched */\n  _onTouched = () => {};\n\n  /** Function when changed */\n  _onChange: (value: any) => void = () => {};\n\n  _selectionModel: SelectionModel<MatLegacyChip>;\n\n  /** The array of selected chips inside chip list. */\n  get selected(): MatLegacyChip[] | MatLegacyChip {\n    return this.multiple ? this._selectionModel?.selected || [] : this._selectionModel?.selected[0];\n  }\n\n  /** The ARIA role applied to the chip list. */\n  @Input()\n  get role(): string | null {\n    if (this._explicitRole) {\n      return this._explicitRole;\n    }\n\n    return this.empty ? null : 'listbox';\n  }\n  set role(role: string | null) {\n    this._explicitRole = role;\n  }\n  private _explicitRole?: string | null;\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  @Input('aria-describedby') userAriaDescribedBy: string;\n\n  /** An object used to control when error messages are shown. */\n  @Input() override errorStateMatcher: ErrorStateMatcher;\n\n  /** Whether the user should be allowed to select multiple chips. */\n  @Input()\n  get multiple(): boolean {\n    return this._multiple;\n  }\n  set multiple(value: BooleanInput) {\n    this._multiple = coerceBooleanProperty(value);\n    this._syncChipsState();\n  }\n  private _multiple: boolean = false;\n\n  /**\n   * A function to compare the option values with the selected values. The first argument\n   * is a value from an option. The second is a value from the selection. A boolean\n   * should be returned.\n   */\n  @Input()\n  get compareWith(): (o1: any, o2: any) => boolean {\n    return this._compareWith;\n  }\n  set compareWith(fn: (o1: any, o2: any) => boolean) {\n    this._compareWith = fn;\n    if (this._selectionModel) {\n      // A different comparator means the selection could change.\n      this._initializeSelection();\n    }\n  }\n  private _compareWith = (o1: any, o2: any) => o1 === o2;\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  @Input()\n  get value(): any {\n    return this._value;\n  }\n  set value(value: any) {\n    this.writeValue(value);\n    this._value = value;\n  }\n  protected _value: any;\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  get id(): string {\n    return this._chipInput ? this._chipInput.id : this._uid;\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  @Input()\n  get required(): boolean {\n    return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;\n  }\n  set required(value: BooleanInput) {\n    this._required = coerceBooleanProperty(value);\n    this.stateChanges.next();\n  }\n  protected _required: boolean | undefined;\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  @Input()\n  get placeholder(): string {\n    return this._chipInput ? this._chipInput.placeholder : this._placeholder;\n  }\n  set placeholder(value: string) {\n    this._placeholder = value;\n    this.stateChanges.next();\n  }\n  protected _placeholder: string;\n\n  /** Whether any chips or the matChipInput inside of this chip-list has focus. */\n  get focused(): boolean {\n    return (this._chipInput && this._chipInput.focused) || this._hasFocusedChip();\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  get empty(): boolean {\n    return (!this._chipInput || this._chipInput.empty) && (!this.chips || this.chips.length === 0);\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  get shouldLabelFloat(): boolean {\n    return !this.empty || this.focused;\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  @Input()\n  get disabled(): boolean {\n    return this.ngControl ? !!this.ngControl.disabled : this._disabled;\n  }\n  set disabled(value: BooleanInput) {\n    this._disabled = coerceBooleanProperty(value);\n    this._syncChipsState();\n  }\n  protected _disabled: boolean = false;\n\n  /** Orientation of the chip list. */\n  @Input('aria-orientation') ariaOrientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Whether or not this chip list is selectable. When a chip list is not selectable,\n   * the selected states for all the chips inside the chip list are always ignored.\n   */\n  @Input()\n  get selectable(): boolean {\n    return this._selectable;\n  }\n  set selectable(value: BooleanInput) {\n    this._selectable = coerceBooleanProperty(value);\n    this._syncChipsState();\n  }\n  protected _selectable: boolean = true;\n\n  @Input()\n  set tabIndex(value: number) {\n    this._userTabIndex = value;\n    this._tabIndex = value;\n  }\n\n  /** Combined stream of all of the child chips' selection change events. */\n  get chipSelectionChanges(): Observable<MatLegacyChipSelectionChange> {\n    return merge(...this.chips.map(chip => chip.selectionChange));\n  }\n\n  /** Combined stream of all of the child chips' focus change events. */\n  get chipFocusChanges(): Observable<MatLegacyChipEvent> {\n    return merge(...this.chips.map(chip => chip._onFocus));\n  }\n\n  /** Combined stream of all of the child chips' blur change events. */\n  get chipBlurChanges(): Observable<MatLegacyChipEvent> {\n    return merge(...this.chips.map(chip => chip._onBlur));\n  }\n\n  /** Combined stream of all of the child chips' remove change events. */\n  get chipRemoveChanges(): Observable<MatLegacyChipEvent> {\n    return merge(...this.chips.map(chip => chip.destroyed));\n  }\n\n  /** Event emitted when the selected chip list value has been changed by the user. */\n  @Output() readonly change = new EventEmitter<MatLegacyChipListChange>();\n\n  /**\n   * Event that emits whenever the raw value of the chip-list changes. This is here primarily\n   * to facilitate the two-way binding for the `value` input.\n   * @docs-private\n   */\n  @Output() readonly valueChange = new EventEmitter<any>();\n\n  /** The chips contained within this chip list. */\n  @ContentChildren(MatLegacyChip, {\n    // We need to use `descendants: true`, because Ivy will no longer match\n    // indirect descendants if it's left as false.\n    descendants: true,\n  })\n  chips: QueryList<MatLegacyChip>;\n\n  constructor(\n    protected _elementRef: ElementRef<HTMLElement>,\n    private _changeDetectorRef: ChangeDetectorRef,\n    @Optional() private _dir: Directionality,\n    @Optional() _parentForm: NgForm,\n    @Optional() _parentFormGroup: FormGroupDirective,\n    _defaultErrorStateMatcher: ErrorStateMatcher,\n    @Optional() @Self() ngControl: NgControl,\n  ) {\n    super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  ngAfterContentInit() {\n    this._keyManager = new FocusKeyManager<MatLegacyChip>(this.chips)\n      .withWrap()\n      .withVerticalOrientation()\n      .withHomeAndEnd()\n      .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');\n\n    if (this._dir) {\n      this._dir.change\n        .pipe(takeUntil(this._destroyed))\n        .subscribe(dir => this._keyManager.withHorizontalOrientation(dir));\n    }\n\n    this._keyManager.tabOut.subscribe(() => this._allowFocusEscape());\n\n    // When the list changes, re-subscribe\n    this.chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {\n      if (this.disabled || !this.selectable) {\n        // Since this happens after the content has been\n        // checked, we need to defer it to the next tick.\n        Promise.resolve().then(() => {\n          this._syncChipsState();\n        });\n      }\n\n      this._resetChips();\n\n      // Reset chips selected/deselected status\n      this._initializeSelection();\n\n      // Check to see if we need to update our tab index\n      this._updateTabIndex();\n\n      // Check to see if we have a destroyed chip and need to refocus\n      this._updateFocusForDestroyedChips();\n\n      this.stateChanges.next();\n    });\n  }\n\n  ngOnInit() {\n    this._selectionModel = new SelectionModel<MatLegacyChip>(this.multiple, undefined, false);\n    this.stateChanges.next();\n  }\n\n  ngDoCheck() {\n    if (this.ngControl) {\n      // We need to re-evaluate this on every change detection cycle, because there are some\n      // error triggers that we can't subscribe to (e.g. parent form submissions). This means\n      // that whatever logic is in here has to be super lean or we risk destroying the performance.\n      this.updateErrorState();\n\n      if (this.ngControl.disabled !== this._disabled) {\n        this.disabled = !!this.ngControl.disabled;\n      }\n    }\n  }\n\n  ngOnDestroy() {\n    this._keyManager?.destroy();\n    this._destroyed.next();\n    this._destroyed.complete();\n    this.stateChanges.complete();\n    this._dropSubscriptions();\n  }\n\n  /** Associates an HTML input element with this chip list. */\n  registerInput(inputElement: MatLegacyChipTextControl): void {\n    this._chipInput = inputElement;\n\n    // We use this attribute to match the chip list to its input in test harnesses.\n    // Set the attribute directly here to avoid \"changed after checked\" errors.\n    this._elementRef.nativeElement.setAttribute('data-mat-chip-input', inputElement.id);\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  setDescribedByIds(ids: string[]) {\n    if (ids.length) {\n      this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));\n    } else {\n      this._elementRef.nativeElement.removeAttribute('aria-describedby');\n    }\n  }\n\n  // Implemented as part of ControlValueAccessor.\n  writeValue(value: any): void {\n    if (this.chips) {\n      this._setSelectionByValue(value, false);\n    }\n  }\n\n  // Implemented as part of ControlValueAccessor.\n  registerOnChange(fn: (value: any) => void): void {\n    this._onChange = fn;\n  }\n\n  // Implemented as part of ControlValueAccessor.\n  registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n  }\n\n  // Implemented as part of ControlValueAccessor.\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.stateChanges.next();\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  onContainerClick(event: MouseEvent) {\n    if (!this._originatesFromChip(event)) {\n      this.focus();\n    }\n  }\n\n  /**\n   * Focuses the first non-disabled chip in this chip list, or the associated input when there\n   * are no eligible chips.\n   */\n  focus(options?: FocusOptions): void {\n    if (this.disabled) {\n      return;\n    }\n\n    // TODO: ARIA says this should focus the first `selected` chip if any are selected.\n    // Focus on first element if there's no chipInput inside chip-list\n    if (this._chipInput && this._chipInput.focused) {\n      // do nothing\n    } else if (this.chips.length > 0) {\n      this._keyManager.setFirstItemActive();\n      this.stateChanges.next();\n    } else {\n      this._focusInput(options);\n      this.stateChanges.next();\n    }\n  }\n\n  /** Attempt to focus an input if we have one. */\n  _focusInput(options?: FocusOptions) {\n    if (this._chipInput) {\n      this._chipInput.focus(options);\n    }\n  }\n\n  /**\n   * Pass events to the keyboard manager. Available here for tests.\n   */\n  _keydown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target && target.classList.contains('mat-chip')) {\n      this._keyManager.onKeydown(event);\n      this.stateChanges.next();\n    }\n  }\n\n  /**\n   * Check the tab index as you should not be allowed to focus an empty list.\n   */\n  protected _updateTabIndex(): void {\n    // If we have 0 chips, we should not allow keyboard focus\n    this._tabIndex = this._userTabIndex || (this.chips.length === 0 ? -1 : 0);\n  }\n\n  /**\n   * If the amount of chips changed, we need to update the\n   * key manager state and focus the next closest chip.\n   */\n  protected _updateFocusForDestroyedChips() {\n    // Move focus to the closest chip. If no other chips remain, focus the chip-list itself.\n    if (this._lastDestroyedChipIndex != null) {\n      if (this.chips.length) {\n        const newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1);\n        this._keyManager.setActiveItem(newChipIndex);\n      } else {\n        this.focus();\n      }\n    }\n\n    this._lastDestroyedChipIndex = null;\n  }\n\n  /**\n   * Utility to ensure all indexes are valid.\n   *\n   * @param index The index to be checked.\n   * @returns True if the index is valid for our list of chips.\n   */\n  private _isValidIndex(index: number): boolean {\n    return index >= 0 && index < this.chips.length;\n  }\n\n  _setSelectionByValue(value: any, isUserInput: boolean = true) {\n    this._clearSelection();\n    this.chips.forEach(chip => chip.deselect());\n\n    if (Array.isArray(value)) {\n      value.forEach(currentValue => this._selectValue(currentValue, isUserInput));\n      this._sortValues();\n    } else {\n      const correspondingChip = this._selectValue(value, isUserInput);\n\n      // Shift focus to the active item. Note that we shouldn't do this in multiple\n      // mode, because we don't know what chip the user interacted with last.\n      if (correspondingChip) {\n        if (isUserInput) {\n          this._keyManager.setActiveItem(correspondingChip);\n        }\n      }\n    }\n  }\n\n  /**\n   * Finds and selects the chip based on its value.\n   * @returns Chip that has the corresponding value.\n   */\n  private _selectValue(value: any, isUserInput: boolean = true): MatLegacyChip | undefined {\n    const correspondingChip = this.chips.find(chip => {\n      return chip.value != null && this._compareWith(chip.value, value);\n    });\n\n    if (correspondingChip) {\n      isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select();\n      this._selectionModel.select(correspondingChip);\n    }\n\n    return correspondingChip;\n  }\n\n  private _initializeSelection(): void {\n    // Defer setting the value in order to avoid the \"Expression\n    // has changed after it was checked\" errors from Angular.\n    Promise.resolve().then(() => {\n      if (this.ngControl || this._value) {\n        this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value, false);\n        this.stateChanges.next();\n      }\n    });\n  }\n\n  /**\n   * Deselects every chip in the list.\n   * @param skip Chip that should not be deselected.\n   */\n  private _clearSelection(skip?: MatLegacyChip): void {\n    this._selectionModel.clear();\n    this.chips.forEach(chip => {\n      if (chip !== skip) {\n        chip.deselect();\n      }\n    });\n    this.stateChanges.next();\n  }\n\n  /**\n   * Sorts the model values, ensuring that they keep the same\n   * order that they have in the panel.\n   */\n  private _sortValues(): void {\n    if (this._multiple) {\n      this._selectionModel.clear();\n\n      this.chips.forEach(chip => {\n        if (chip.selected) {\n          this._selectionModel.select(chip);\n        }\n      });\n      this.stateChanges.next();\n    }\n  }\n\n  /** Emits change event to set the model value. */\n  private _propagateChanges(fallbackValue?: any): void {\n    let valueToEmit: any = null;\n\n    if (Array.isArray(this.selected)) {\n      valueToEmit = this.selected.map(chip => chip.value);\n    } else {\n      valueToEmit = this.selected ? this.selected.value : fallbackValue;\n    }\n    this._value = valueToEmit;\n    this.change.emit(new MatLegacyChipListChange(this, valueToEmit));\n    this.valueChange.emit(valueToEmit);\n    this._onChange(valueToEmit);\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /** When blurred, mark the field as touched when focus moved outside the chip list. */\n  _blur() {\n    if (!this._hasFocusedChip()) {\n      this._keyManager.setActiveItem(-1);\n    }\n\n    if (!this.disabled) {\n      if (this._chipInput) {\n        // If there's a chip input, we should check whether the focus moved to chip input.\n        // If the focus is not moved to chip input, mark the field as touched. If the focus moved\n        // to chip input, do nothing.\n        // Timeout is needed to wait for the focus() event trigger on chip input.\n        setTimeout(() => {\n          if (!this.focused) {\n            this._markAsTouched();\n          }\n        });\n      } else {\n        // If there's no chip input, then mark the field as touched.\n        this._markAsTouched();\n      }\n    }\n  }\n\n  /** Mark the field as touched */\n  _markAsTouched() {\n    this._onTouched();\n    this._changeDetectorRef.markForCheck();\n    this.stateChanges.next();\n  }\n\n  /**\n   * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the\n   * user to tab out of it. This prevents the list from capturing focus and redirecting\n   * it back to the first chip, creating a focus trap, if it user tries to tab away.\n   */\n  _allowFocusEscape() {\n    if (this._tabIndex !== -1) {\n      this._tabIndex = -1;\n\n      setTimeout(() => {\n        this._tabIndex = this._userTabIndex || 0;\n        this._changeDetectorRef.markForCheck();\n      });\n    }\n  }\n\n  private _resetChips() {\n    this._dropSubscriptions();\n    this._listenToChipsFocus();\n    this._listenToChipsSelection();\n    this._listenToChipsRemoved();\n  }\n\n  private _dropSubscriptions() {\n    if (this._chipFocusSubscription) {\n      this._chipFocusSubscription.unsubscribe();\n      this._chipFocusSubscription = null;\n    }\n\n    if (this._chipBlurSubscription) {\n      this._chipBlurSubscription.unsubscribe();\n      this._chipBlurSubscription = null;\n    }\n\n    if (this._chipSelectionSubscription) {\n      this._chipSelectionSubscription.unsubscribe();\n      this._chipSelectionSubscription = null;\n    }\n\n    if (this._chipRemoveSubscription) {\n      this._chipRemoveSubscription.unsubscribe();\n      this._chipRemoveSubscription = null;\n    }\n  }\n\n  /** Listens to user-generated selection events on each chip. */\n  private _listenToChipsSelection(): void {\n    this._chipSelectionSubscription = this.chipSelectionChanges.subscribe(event => {\n      event.source.selected\n        ? this._selectionModel.select(event.source)\n        : this._selectionModel.deselect(event.source);\n\n      // For single selection chip list, make sure the deselected value is unselected.\n      if (!this.multiple) {\n        this.chips.forEach(chip => {\n          if (!this._selectionModel.isSelected(chip) && chip.selected) {\n            chip.deselect();\n          }\n        });\n      }\n\n      if (event.isUserInput) {\n        this._propagateChanges();\n      }\n    });\n  }\n\n  /** Listens to user-generated selection events on each chip. */\n  private _listenToChipsFocus(): void {\n    this._chipFocusSubscription = this.chipFocusChanges.subscribe(event => {\n      let chipIndex: number = this.chips.toArray().indexOf(event.chip);\n\n      if (this._isValidIndex(chipIndex)) {\n        this._keyManager.updateActiveItem(chipIndex);\n      }\n      this.stateChanges.next();\n    });\n\n    this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {\n      this._blur();\n      this.stateChanges.next();\n    });\n  }\n\n  private _listenToChipsRemoved(): void {\n    this._chipRemoveSubscription = this.chipRemoveChanges.subscribe(event => {\n      const chip = event.chip;\n      const chipIndex = this.chips.toArray().indexOf(event.chip);\n\n      // In case the chip that will be removed is currently focused, we temporarily store\n      // the index in order to be able to determine an appropriate sibling chip that will\n      // receive focus.\n      if (this._isValidIndex(chipIndex) && chip._hasFocus) {\n        this._lastDestroyedChipIndex = chipIndex;\n      }\n    });\n  }\n\n  /** Checks whether an event comes from inside a chip element. */\n  private _originatesFromChip(event: Event): boolean {\n    let currentElement = event.target as HTMLElement | null;\n\n    while (currentElement && currentElement !== this._elementRef.nativeElement) {\n      if (currentElement.classList.contains('mat-chip')) {\n        return true;\n      }\n\n      currentElement = currentElement.parentElement;\n    }\n\n    return false;\n  }\n\n  /** Checks whether any of the chips is focused. */\n  private _hasFocusedChip() {\n    return this.chips && this.chips.some(chip => chip._hasFocus);\n  }\n\n  /** Syncs the list's state with the individual chips. */\n  private _syncChipsState() {\n    if (this.chips) {\n      this.chips.forEach(chip => {\n        chip._chipListDisabled = this._disabled;\n        chip._chipListMultiple = this.multiple;\n        chip.chipListSelectable = this._selectable;\n      });\n    }\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {BACKSPACE, hasModifierKey, TAB} from '@angular/cdk/keycodes';\nimport {\n  AfterContentInit,\n  Directive,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  Input,\n  OnChanges,\n  OnDestroy,\n  Output,\n} from '@angular/core';\nimport {\n  MatLegacyChipsDefaultOptions,\n  MAT_LEGACY_CHIPS_DEFAULT_OPTIONS,\n} from './chip-default-options';\nimport {MatLegacyChipList} from './chip-list';\nimport {MatLegacyChipTextControl} from './chip-text-control';\n\n/**\n * Represents an input event on a `matChipInput`.\n * @deprecated Use `MatChipInputEvent` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nexport interface MatLegacyChipInputEvent {\n  /**\n   * The native `<input>` element that the event is being fired for.\n   * @deprecated Use `MatChipInputEvent#chipInput.inputElement` instead.\n   * @breaking-change 13.0.0 This property will be removed.\n   */\n  input: HTMLInputElement;\n\n  /** The value of the input. */\n  value: string;\n\n  /** Reference to the chip input that emitted the event. */\n  chipInput: MatLegacyChipInput;\n}\n\n// Increasing integer for generating unique ids.\nlet nextUniqueId = 0;\n\n/**\n * Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.\n * May be placed inside or outside of an `<mat-chip-list>`.\n * @deprecated Use `MatChipInput` from `@angular/material/chips` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\n@Directive({\n  selector: 'input[matChipInputFor]',\n  exportAs: 'matChipInput, matChipInputFor',\n  host: {\n    'class': 'mat-chip-input mat-input-element',\n    '(keydown)': '_keydown($event)',\n    '(keyup)': '_keyup($event)',\n    '(blur)': '_blur()',\n    '(focus)': '_focus()',\n    '(input)': '_onInput()',\n    '[id]': 'id',\n    '[attr.disabled]': 'disabled || null',\n    '[attr.placeholder]': 'placeholder || null',\n    '[attr.aria-invalid]': '_chipList && _chipList.ngControl ? _chipList.ngControl.invalid : null',\n    '[attr.aria-required]': '_chipList && _chipList.required || null',\n  },\n})\nexport class MatLegacyChipInput\n  implements MatLegacyChipTextControl, OnChanges, OnDestroy, AfterContentInit\n{\n  /** Used to prevent focus moving to chips while user is holding backspace */\n  private _focusLastChipOnBackspace: boolean;\n\n  /** Whether the control is focused. */\n  focused: boolean = false;\n  _chipList: MatLegacyChipList;\n\n  /** Register input for chip list */\n  @Input('matChipInputFor')\n  set chipList(value: MatLegacyChipList) {\n    if (value) {\n      this._chipList = value;\n      this._chipList.registerInput(this);\n    }\n  }\n\n  /**\n   * Whether or not the chipEnd event will be emitted when the input is blurred.\n   */\n  @Input('matChipInputAddOnBlur')\n  get addOnBlur(): boolean {\n    return this._addOnBlur;\n  }\n  set addOnBlur(value: BooleanInput) {\n    this._addOnBlur = coerceBooleanProperty(value);\n  }\n  _addOnBlur: boolean = false;\n\n  /**\n   * The list