@angular/material/fesm2022/module-d4c8147a.mjs.map

Angular Material

{"version":3,"file":"module-d4c8147a.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/select/select-errors.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/select/select.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/select/select.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/select/module.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.dev/license\n */\n\n// Note that these have been copied over verbatim from\n// `material/select` so that we don't have to expose them publicly.\n\n/**\n * Returns an exception to be thrown when attempting to change a select's `multiple` option\n * after initialization.\n * @docs-private\n */\nexport function getMatSelectDynamicMultipleError(): Error {\n  return Error('Cannot change `multiple` mode of select after initialization.');\n}\n\n/**\n * Returns an exception to be thrown when attempting to assign a non-array value to a select\n * in `multiple` mode. Note that `undefined` and `null` are still valid values to allow for\n * resetting the value.\n * @docs-private\n */\nexport function getMatSelectNonArrayValueError(): Error {\n  return Error('Value must be an array in multiple-selection mode.');\n}\n\n/**\n * Returns an exception to be thrown when assigning a non-function value to the comparator\n * used to determine if a value corresponds to an option. Note that whether the function\n * actually takes two values and returns a boolean is not checked.\n */\nexport function getMatSelectNonFunctionValueError(): Error {\n  return Error('`compareWith` must be a function.');\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.dev/license\n */\n\nimport {\n  _IdGenerator,\n  ActiveDescendantKeyManager,\n  addAriaReferencedId,\n  LiveAnnouncer,\n  removeAriaReferencedId,\n} from '@angular/cdk/a11y';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {SelectionModel} from '@angular/cdk/collections';\nimport {\n  A,\n  DOWN_ARROW,\n  ENTER,\n  ESCAPE,\n  hasModifierKey,\n  LEFT_ARROW,\n  RIGHT_ARROW,\n  SPACE,\n  UP_ARROW,\n} from '@angular/cdk/keycodes';\nimport {\n  CdkConnectedOverlay,\n  CdkOverlayOrigin,\n  ConnectedPosition,\n  Overlay,\n  ScrollStrategy,\n} from '@angular/cdk/overlay';\nimport {ViewportRuler} from '@angular/cdk/scrolling';\nimport {\n  AfterContentInit,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  Directive,\n  DoCheck,\n  ElementRef,\n  EventEmitter,\n  inject,\n  InjectionToken,\n  Input,\n  numberAttribute,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  QueryList,\n  SimpleChanges,\n  ViewChild,\n  ViewEncapsulation,\n  HostAttributeToken,\n  ANIMATION_MODULE_TYPE,\n  Renderer2,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  ControlValueAccessor,\n  FormGroupDirective,\n  NgControl,\n  NgForm,\n  Validators,\n} from '@angular/forms';\nimport {\n  _countGroupLabelsBeforeOption,\n  _ErrorStateTracker,\n  _getOptionScrollPosition,\n  ErrorStateMatcher,\n  MAT_OPTGROUP,\n  MAT_OPTION_PARENT_COMPONENT,\n  MatOptgroup,\n  MatOption,\n  MatOptionSelectionChange,\n} from '../core';\nimport {MAT_FORM_FIELD, MatFormField, MatFormFieldControl} from '../form-field';\nimport {defer, merge, Observable, Subject} from 'rxjs';\nimport {filter, map, startWith, switchMap, take, takeUntil} from 'rxjs/operators';\nimport {\n  getMatSelectDynamicMultipleError,\n  getMatSelectNonArrayValueError,\n  getMatSelectNonFunctionValueError,\n} from './select-errors';\nimport {NgClass} from '@angular/common';\n\n/** Injection token that determines the scroll handling while a select is open. */\nexport const MAT_SELECT_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(\n  'mat-select-scroll-strategy',\n  {\n    providedIn: 'root',\n    factory: () => {\n      const overlay = inject(Overlay);\n      return () => overlay.scrollStrategies.reposition();\n    },\n  },\n);\n\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(\n  overlay: Overlay,\n): () => ScrollStrategy {\n  return () => overlay.scrollStrategies.reposition();\n}\n\n/** Object that can be used to configure the default options for the select module. */\nexport interface MatSelectConfig {\n  /** Whether option centering should be disabled. */\n  disableOptionCentering?: boolean;\n\n  /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */\n  typeaheadDebounceInterval?: number;\n\n  /** Class or list of classes to be applied to the menu's overlay panel. */\n  overlayPanelClass?: string | string[];\n\n  /** Whether icon indicators should be hidden for single-selection. */\n  hideSingleSelectionIndicator?: boolean;\n\n  /**\n   * Width of the panel. If set to `auto`, the panel will match the trigger width.\n   * If set to null or an empty string, the panel will grow to match the longest option's text.\n   */\n  panelWidth?: string | number | null;\n\n  /**\n   * Whether nullable options can be selected by default.\n   * See `MatSelect.canSelectNullableOptions` for more information.\n   */\n  canSelectNullableOptions?: boolean;\n}\n\n/** Injection token that can be used to provide the default options the select module. */\nexport const MAT_SELECT_CONFIG = new InjectionToken<MatSelectConfig>('MAT_SELECT_CONFIG');\n\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport const MAT_SELECT_SCROLL_STRATEGY_PROVIDER = {\n  provide: MAT_SELECT_SCROLL_STRATEGY,\n  deps: [Overlay],\n  useFactory: MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY,\n};\n\n/**\n * Injection token that can be used to reference instances of `MatSelectTrigger`. It serves as\n * alternative token to the actual `MatSelectTrigger` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nexport const MAT_SELECT_TRIGGER = new InjectionToken<MatSelectTrigger>('MatSelectTrigger');\n\n/** Change event object that is emitted when the select value has changed. */\nexport class MatSelectChange<T = any> {\n  constructor(\n    /** Reference to the select that emitted the change event. */\n    public source: MatSelect,\n    /** Current value of the select that emitted the event. */\n    public value: T,\n  ) {}\n}\n\n@Component({\n  selector: 'mat-select',\n  exportAs: 'matSelect',\n  templateUrl: 'select.html',\n  styleUrl: 'select.css',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'role': 'combobox',\n    'aria-haspopup': 'listbox',\n    'class': 'mat-mdc-select',\n    '[attr.id]': 'id',\n    '[attr.tabindex]': 'disabled ? -1 : tabIndex',\n    '[attr.aria-controls]': 'panelOpen ? id + \"-panel\" : null',\n    '[attr.aria-expanded]': 'panelOpen',\n    '[attr.aria-label]': 'ariaLabel || null',\n    '[attr.aria-required]': 'required.toString()',\n    '[attr.aria-disabled]': 'disabled.toString()',\n    '[attr.aria-invalid]': 'errorState',\n    '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',\n    '[class.mat-mdc-select-disabled]': 'disabled',\n    '[class.mat-mdc-select-invalid]': 'errorState',\n    '[class.mat-mdc-select-required]': 'required',\n    '[class.mat-mdc-select-empty]': 'empty',\n    '[class.mat-mdc-select-multiple]': 'multiple',\n    '(keydown)': '_handleKeydown($event)',\n    '(focus)': '_onFocus()',\n    '(blur)': '_onBlur()',\n  },\n  providers: [\n    {provide: MatFormFieldControl, useExisting: MatSelect},\n    {provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect},\n  ],\n  imports: [CdkOverlayOrigin, CdkConnectedOverlay, NgClass],\n})\nexport class MatSelect\n  implements\n    AfterContentInit,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    DoCheck,\n    ControlValueAccessor,\n    MatFormFieldControl<any>\n{\n  protected _viewportRuler = inject(ViewportRuler);\n  protected _changeDetectorRef = inject(ChangeDetectorRef);\n  readonly _elementRef = inject(ElementRef);\n  private _dir = inject(Directionality, {optional: true});\n  private _idGenerator = inject(_IdGenerator);\n  private _renderer = inject(Renderer2);\n  protected _parentFormField = inject<MatFormField>(MAT_FORM_FIELD, {optional: true});\n  ngControl = inject(NgControl, {self: true, optional: true})!;\n  private _liveAnnouncer = inject(LiveAnnouncer);\n  protected _defaultOptions = inject(MAT_SELECT_CONFIG, {optional: true});\n  protected _animationsDisabled =\n    inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';\n  private _initialized = new Subject();\n  private _cleanupDetach: (() => void) | undefined;\n\n  /** All of the defined select options. */\n  @ContentChildren(MatOption, {descendants: true}) options: QueryList<MatOption>;\n\n  // TODO(crisbeto): this is only necessary for the non-MDC select, but it's technically a\n  // public API so we have to keep it. It should be deprecated and removed eventually.\n  /** All of the defined groups of options. */\n  @ContentChildren(MAT_OPTGROUP, {descendants: true}) optionGroups: QueryList<MatOptgroup>;\n\n  /** User-supplied override of the trigger element. */\n  @ContentChild(MAT_SELECT_TRIGGER) customTrigger: MatSelectTrigger;\n\n  /**\n   * This position config ensures that the top \"start\" corner of the overlay\n   * is aligned with with the top \"start\" of the origin by default (overlapping\n   * the trigger completely). If the panel cannot fit below the trigger, it\n   * will fall back to a position above the trigger.\n   */\n  _positions: ConnectedPosition[] = [\n    {\n      originX: 'start',\n      originY: 'bottom',\n      overlayX: 'start',\n      overlayY: 'top',\n    },\n    {\n      originX: 'end',\n      originY: 'bottom',\n      overlayX: 'end',\n      overlayY: 'top',\n    },\n    {\n      originX: 'start',\n      originY: 'top',\n      overlayX: 'start',\n      overlayY: 'bottom',\n      panelClass: 'mat-mdc-select-panel-above',\n    },\n    {\n      originX: 'end',\n      originY: 'top',\n      overlayX: 'end',\n      overlayY: 'bottom',\n      panelClass: 'mat-mdc-select-panel-above',\n    },\n  ];\n\n  /** Scrolls a particular option into the view. */\n  _scrollOptionIntoView(index: number): void {\n    const option = this.options.toArray()[index];\n\n    if (option) {\n      const panel: HTMLElement = this.panel.nativeElement;\n      const labelCount = _countGroupLabelsBeforeOption(index, this.options, this.optionGroups);\n      const element = option._getHostElement();\n\n      if (index === 0 && labelCount === 1) {\n        // If we've got one group label before the option and we're at the top option,\n        // scroll the list to the top. This is better UX than scrolling the list to the\n        // top of the option, because it allows the user to read the top group's label.\n        panel.scrollTop = 0;\n      } else {\n        panel.scrollTop = _getOptionScrollPosition(\n          element.offsetTop,\n          element.offsetHeight,\n          panel.scrollTop,\n          panel.offsetHeight,\n        );\n      }\n    }\n  }\n\n  /** Called when the panel has been opened and the overlay has settled on its final position. */\n  private _positioningSettled() {\n    this._scrollOptionIntoView(this._keyManager.activeItemIndex || 0);\n  }\n\n  /** Creates a change event object that should be emitted by the select. */\n  private _getChangeEvent(value: any) {\n    return new MatSelectChange(this, value);\n  }\n\n  /** Factory function used to create a scroll strategy for this select. */\n  private _scrollStrategyFactory = inject(MAT_SELECT_SCROLL_STRATEGY);\n\n  /** Whether or not the overlay panel is open. */\n  private _panelOpen = false;\n\n  /** Comparison function to specify which option is displayed. Defaults to object equality. */\n  private _compareWith = (o1: any, o2: any) => o1 === o2;\n\n  /** Unique id for this input. */\n  private _uid = this._idGenerator.getId('mat-select-');\n\n  /** Current `aria-labelledby` value for the select trigger. */\n  private _triggerAriaLabelledBy: string | null = null;\n\n  /**\n   * Keeps track of the previous form control assigned to the select.\n   * Used to detect if it has changed.\n   */\n  private _previousControl: AbstractControl | null | undefined;\n\n  /** Emits whenever the component is destroyed. */\n  protected readonly _destroy = new Subject<void>();\n\n  /** Tracks the error state of the select. */\n  private _errorStateTracker: _ErrorStateTracker;\n\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  /**\n   * Disable the automatic labeling to avoid issues like #27241.\n   * @docs-private\n   */\n  readonly disableAutomaticLabeling = true;\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  @Input('aria-describedby') userAriaDescribedBy: string;\n\n  /** Deals with the selection logic. */\n  _selectionModel: SelectionModel<MatOption>;\n\n  /** Manages keyboard events for options in the panel. */\n  _keyManager: ActiveDescendantKeyManager<MatOption>;\n\n  /** Ideal origin for the overlay panel. */\n  _preferredOverlayOrigin: CdkOverlayOrigin | ElementRef | undefined;\n\n  /** Width of the overlay panel. */\n  _overlayWidth: string | number;\n\n  /** `View -> model callback called when value changes` */\n  _onChange: (value: any) => void = () => {};\n\n  /** `View -> model callback called when select has been touched` */\n  _onTouched = () => {};\n\n  /** ID for the DOM node containing the select's value. */\n  _valueId = this._idGenerator.getId('mat-select-value-');\n\n  /** Strategy that will be used to handle scrolling while the select panel is open. */\n  _scrollStrategy: ScrollStrategy;\n\n  _overlayPanelClass: string | string[] = this._defaultOptions?.overlayPanelClass || '';\n\n  /** Whether the select is focused. */\n  get focused(): boolean {\n    return this._focused || this._panelOpen;\n  }\n  private _focused = false;\n\n  /** A name for this control that can be used by `mat-form-field`. */\n  controlType = 'mat-select';\n\n  /** Trigger that opens the select. */\n  @ViewChild('trigger') trigger: ElementRef;\n\n  /** Panel containing the select options. */\n  @ViewChild('panel') panel: ElementRef;\n\n  /** Overlay pane containing the options. */\n  @ViewChild(CdkConnectedOverlay)\n  protected _overlayDir: CdkConnectedOverlay;\n\n  /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */\n  @Input() panelClass: string | string[] | Set<string> | {[key: string]: any};\n\n  /** Whether the select is disabled. */\n  @Input({transform: booleanAttribute})\n  disabled: boolean = false;\n\n  /** Whether ripples in the select are disabled. */\n  @Input({transform: booleanAttribute})\n  disableRipple: boolean = false;\n\n  /** Tab index of the select. */\n  @Input({\n    transform: (value: unknown) => (value == null ? 0 : numberAttribute(value)),\n  })\n  tabIndex: number = 0;\n\n  /** Whether checkmark indicator for single-selection options is hidden. */\n  @Input({transform: booleanAttribute})\n  get hideSingleSelectionIndicator(): boolean {\n    return this._hideSingleSelectionIndicator;\n  }\n  set hideSingleSelectionIndicator(value: boolean) {\n    this._hideSingleSelectionIndicator = value;\n    this._syncParentProperties();\n  }\n  private _hideSingleSelectionIndicator: boolean =\n    this._defaultOptions?.hideSingleSelectionIndicator ?? false;\n\n  /** Placeholder to be shown if no value has been selected. */\n  @Input()\n  get placeholder(): string {\n    return this._placeholder;\n  }\n  set placeholder(value: string) {\n    this._placeholder = value;\n    this.stateChanges.next();\n  }\n  private _placeholder: string;\n\n  /** Whether the component is required. */\n  @Input({transform: booleanAttribute})\n  get required(): boolean {\n    return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;\n  }\n  set required(value: boolean) {\n    this._required = value;\n    this.stateChanges.next();\n  }\n  private _required: boolean | undefined;\n\n  /** Whether the user should be allowed to select multiple options. */\n  @Input({transform: booleanAttribute})\n  get multiple(): boolean {\n    return this._multiple;\n  }\n  set multiple(value: boolean) {\n    if (this._selectionModel && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw getMatSelectDynamicMultipleError();\n    }\n\n    this._multiple = value;\n  }\n  private _multiple: boolean = false;\n\n  /** Whether to center the active option over the trigger. */\n  @Input({transform: booleanAttribute})\n  disableOptionCentering = this._defaultOptions?.disableOptionCentering ?? false;\n\n  /**\n   * 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() {\n    return this._compareWith;\n  }\n  set compareWith(fn: (o1: any, o2: any) => boolean) {\n    if (typeof fn !== 'function' && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw getMatSelectNonFunctionValueError();\n    }\n    this._compareWith = fn;\n    if (this._selectionModel) {\n      // A different comparator means the selection could change.\n      this._initializeSelection();\n    }\n  }\n\n  /** Value of the select control. */\n  @Input()\n  get value(): any {\n    return this._value;\n  }\n  set value(newValue: any) {\n    const hasAssigned = this._assignValue(newValue);\n\n    if (hasAssigned) {\n      this._onChange(newValue);\n    }\n  }\n  private _value: any;\n\n  /** Aria label of the select. */\n  @Input('aria-label') ariaLabel: string = '';\n\n  /** Input that can be used to specify the `aria-labelledby` attribute. */\n  @Input('aria-labelledby') ariaLabelledby: string;\n\n  /** Object used to control when error messages are shown. */\n  @Input()\n  get errorStateMatcher() {\n    return this._errorStateTracker.matcher;\n  }\n  set errorStateMatcher(value: ErrorStateMatcher) {\n    this._errorStateTracker.matcher = value;\n  }\n\n  /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */\n  @Input({transform: numberAttribute})\n  typeaheadDebounceInterval: number;\n\n  /**\n   * Function used to sort the values in a select in multiple mode.\n   * Follows the same logic as `Array.prototype.sort`.\n   */\n  @Input() sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number;\n\n  /** Unique id of the element. */\n  @Input()\n  get id(): string {\n    return this._id;\n  }\n  set id(value: string) {\n    this._id = value || this._uid;\n    this.stateChanges.next();\n  }\n  private _id: string;\n\n  /** Whether the select is in an error state. */\n  get errorState() {\n    return this._errorStateTracker.errorState;\n  }\n  set errorState(value: boolean) {\n    this._errorStateTracker.errorState = value;\n  }\n\n  /**\n   * Width of the panel. If set to `auto`, the panel will match the trigger width.\n   * If set to null or an empty string, the panel will grow to match the longest option's text.\n   */\n  @Input() panelWidth: string | number | null =\n    this._defaultOptions && typeof this._defaultOptions.panelWidth !== 'undefined'\n      ? this._defaultOptions.panelWidth\n      : 'auto';\n\n  /**\n   * By default selecting an option with a `null` or `undefined` value will reset the select's\n   * value. Enable this option if the reset behavior doesn't match your requirements and instead\n   * the nullable options should become selected. The value of this input can be controlled app-wide\n   * using the `MAT_SELECT_CONFIG` injection token.\n   */\n  @Input({transform: booleanAttribute})\n  canSelectNullableOptions: boolean = this._defaultOptions?.canSelectNullableOptions ?? false;\n\n  /** Combined stream of all of the child options' change events. */\n  readonly optionSelectionChanges: Observable<MatOptionSelectionChange> = defer(() => {\n    const options = this.options;\n\n    if (options) {\n      return options.changes.pipe(\n        startWith(options),\n        switchMap(() => merge(...options.map(option => option.onSelectionChange))),\n      );\n    }\n\n    return this._initialized.pipe(switchMap(() => this.optionSelectionChanges));\n  });\n\n  /** Event emitted when the select panel has been toggled. */\n  @Output() readonly openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  /** Event emitted when the select has been opened. */\n  @Output('opened') readonly _openedStream: Observable<void> = this.openedChange.pipe(\n    filter(o => o),\n    map(() => {}),\n  );\n\n  /** Event emitted when the select has been closed. */\n  @Output('closed') readonly _closedStream: Observable<void> = this.openedChange.pipe(\n    filter(o => !o),\n    map(() => {}),\n  );\n\n  /** Event emitted when the selected value has been changed by the user. */\n  @Output() readonly selectionChange = new EventEmitter<MatSelectChange>();\n\n  /**\n   * Event that emits whenever the raw value of the select changes. This is here primarily\n   * to facilitate the two-way binding for the `value` input.\n   * @docs-private\n   */\n  @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>();\n\n  constructor(...args: unknown[]);\n\n  constructor() {\n    const defaultErrorStateMatcher = inject(ErrorStateMatcher);\n    const parentForm = inject(NgForm, {optional: true});\n    const parentFormGroup = inject(FormGroupDirective, {optional: true});\n    const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});\n\n    if (this.ngControl) {\n      // Note: we provide the value accessor through here, instead of\n      // the `providers` to avoid running into a circular import.\n      this.ngControl.valueAccessor = this;\n    }\n\n    // Note that we only want to set this when the defaults pass it in, otherwise it should\n    // stay as `undefined` so that it falls back to the default in the key manager.\n    if (this._defaultOptions?.typeaheadDebounceInterval != null) {\n      this.typeaheadDebounceInterval = this._defaultOptions.typeaheadDebounceInterval;\n    }\n\n    this._errorStateTracker = new _ErrorStateTracker(\n      defaultErrorStateMatcher,\n      this.ngControl,\n      parentFormGroup,\n      parentForm,\n      this.stateChanges,\n    );\n    this._scrollStrategy = this._scrollStrategyFactory();\n    this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0;\n\n    // Force setter to be called in case id was not specified.\n    this.id = this.id;\n  }\n\n  ngOnInit() {\n    this._selectionModel = new SelectionModel<MatOption>(this.multiple);\n    this.stateChanges.next();\n    this._viewportRuler\n      .change()\n      .pipe(takeUntil(this._destroy))\n      .subscribe(() => {\n        if (this.panelOpen) {\n          this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);\n          this._changeDetectorRef.detectChanges();\n        }\n      });\n  }\n\n  ngAfterContentInit() {\n    this._initialized.next();\n    this._initialized.complete();\n\n    this._initKeyManager();\n\n    this._selectionModel.changed.pipe(takeUntil(this._destroy)).subscribe(event => {\n      event.added.forEach(option => option.select());\n      event.removed.forEach(option => option.deselect());\n    });\n\n    this.options.changes.pipe(startWith(null), takeUntil(this._destroy)).subscribe(() => {\n      this._resetOptions();\n      this._initializeSelection();\n    });\n  }\n\n  ngDoCheck() {\n    const newAriaLabelledby = this._getTriggerAriaLabelledby();\n    const ngControl = this.ngControl;\n\n    // We have to manage setting the `aria-labelledby` ourselves, because part of its value\n    // is computed as a result of a content query which can cause this binding to trigger a\n    // \"changed after checked\" error.\n    if (newAriaLabelledby !== this._triggerAriaLabelledBy) {\n      const element: HTMLElement = this._elementRef.nativeElement;\n      this._triggerAriaLabelledBy = newAriaLabelledby;\n      if (newAriaLabelledby) {\n        element.setAttribute('aria-labelledby', newAriaLabelledby);\n      } else {\n        element.removeAttribute('aria-labelledby');\n      }\n    }\n\n    if (ngControl) {\n      // The disabled state might go out of sync if the form group is swapped out. See #17860.\n      if (this._previousControl !== ngControl.control) {\n        if (\n          this._previousControl !== undefined &&\n          ngControl.disabled !== null &&\n          ngControl.disabled !== this.disabled\n        ) {\n          this.disabled = ngControl.disabled;\n        }\n\n        this._previousControl = ngControl.control;\n      }\n\n      this.updateErrorState();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    // Updating the disabled state is handled by the input, but we need to additionally let\n    // the parent form field know to run change detection when the disabled state changes.\n    if (changes['disabled'] || changes['userAriaDescribedBy']) {\n      this.stateChanges.next();\n    }\n\n    if (changes['typeaheadDebounceInterval'] && this._keyManager) {\n      this._keyManager.withTypeAhead(this.typeaheadDebounceInterval);\n    }\n  }\n\n  ngOnDestroy() {\n    this._cleanupDetach?.();\n    this._keyManager?.destroy();\n    this._destroy.next();\n    this._destroy.complete();\n    this.stateChanges.complete();\n    this._clearFromModal();\n  }\n\n  /** Toggles the overlay panel open or closed. */\n  toggle(): void {\n    this.panelOpen ? this.close() : this.open();\n  }\n\n  /** Opens the overlay panel. */\n  open(): void {\n    if (!this._canOpen()) {\n      return;\n    }\n\n    // It's important that we read this as late as possible, because doing so earlier will\n    // return a different element since it's based on queries in the form field which may\n    // not have run yet. Also this needs to be assigned before we measure the overlay width.\n    if (this._parentFormField) {\n      this._preferredOverlayOrigin = this._parentFormField.getConnectedOverlayOrigin();\n    }\n\n    this._cleanupDetach?.();\n    this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);\n    this._applyModalPanelOwnership();\n    this._panelOpen = true;\n    this._overlayDir.positionChange.pipe(take(1)).subscribe(() => {\n      this._changeDetectorRef.detectChanges();\n      this._positioningSettled();\n    });\n    this._overlayDir.attachOverlay();\n    this._keyManager.withHorizontalOrientation(null);\n    this._highlightCorrectOption();\n    this._changeDetectorRef.markForCheck();\n\n    // Required for the MDC form field to pick up when the overlay has been opened.\n    this.stateChanges.next();\n\n    // Simulate the animation event before we moved away from `@angular/animations`.\n    Promise.resolve().then(() => this.openedChange.emit(true));\n  }\n\n  /**\n   * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is\n   * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options\n   * panel. Track the modal we have changed so we can undo the changes on destroy.\n   */\n  private _trackedModal: Element | null = null;\n\n  /**\n   * If the autocomplete trigger is inside of an `aria-modal` element, connect\n   * that modal to the options panel with `aria-owns`.\n   *\n   * For some browser + screen reader combinations, when navigation is inside\n   * of an `aria-modal` element, the screen reader treats everything outside\n   * of that modal as hidden or invisible.\n   *\n   * This causes a problem when the combobox trigger is _inside_ of a modal, because the\n   * options panel is rendered _outside_ of that modal, preventing screen reader navigation\n   * from reaching the panel.\n   *\n   * We can work around this issue by applying `aria-owns` to the modal with the `id` of\n   * the options panel. This effectively communicates to assistive technology that the\n   * options panel is part of the same interaction as the modal.\n   *\n   * At time of this writing, this issue is present in VoiceOver.\n   * See https://github.com/angular/components/issues/20694\n   */\n  private _applyModalPanelOwnership() {\n    // TODO(http://github.com/angular/components/issues/26853): consider de-duplicating this with\n    // the `LiveAnnouncer` and any other usages.\n    //\n    // Note that the selector here is limited to CDK overlays at the moment in order to reduce the\n    // section of the DOM we need to look through. This should cover all the cases we support, but\n    // the selector can be expanded if it turns out to be too narrow.\n    const modal = this._elementRef.nativeElement.closest(\n      'body > .cdk-overlay-container [aria-modal=\"true\"]',\n    );\n\n    if (!modal) {\n      // Most commonly, the autocomplete trigger is not inside a modal.\n      return;\n    }\n\n    const panelId = `${this.id}-panel`;\n\n    if (this._trackedModal) {\n      removeAriaReferencedId(this._trackedModal, 'aria-owns', panelId);\n    }\n\n    addAriaReferencedId(modal, 'aria-owns', panelId);\n    this._trackedModal = modal;\n  }\n\n  /** Clears the reference to the listbox overlay element from the modal it was added to. */\n  private _clearFromModal() {\n    if (!this._trackedModal) {\n      // Most commonly, the autocomplete trigger is not used inside a modal.\n      return;\n    }\n\n    const panelId = `${this.id}-panel`;\n\n    removeAriaReferencedId(this._trackedModal, 'aria-owns', panelId);\n    this._trackedModal = null;\n  }\n\n  /** Closes the overlay panel and focuses the host element. */\n  close(): void {\n    if (this._panelOpen) {\n      this._panelOpen = false;\n      this._exitAndDetach();\n      this._keyManager.withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr');\n      this._changeDetectorRef.markForCheck();\n      this._onTouched();\n      // Required for the MDC form field to pick up when the overlay has been closed.\n      this.stateChanges.next();\n\n      // Simulate the animation event before we moved away from `@angular/animations`.\n      Promise.resolve().then(() => this.openedChange.emit(false));\n    }\n  }\n\n  /** Triggers the exit animation and detaches the overlay at the end. */\n  private _exitAndDetach() {\n    if (this._animationsDisabled || !this.panel) {\n      this._detachOverlay();\n      return;\n    }\n\n    this._cleanupDetach?.();\n    this._cleanupDetach = () => {\n      cleanupEvent();\n      clearTimeout(exitFallbackTimer);\n      this._cleanupDetach = undefined;\n    };\n\n    const panel: HTMLElement = this.panel.nativeElement;\n    const cleanupEvent = this._renderer.listen(panel, 'animationend', (event: AnimationEvent) => {\n      if (event.animationName === '_mat-select-exit') {\n        this._cleanupDetach?.();\n        this._detachOverlay();\n      }\n    });\n\n    // Since closing the overlay depends on the animation, we have a fallback in case the panel\n    // doesn't animate. This can happen in some internal tests that do `* {animation: none}`.\n    const exitFallbackTimer = setTimeout(() => {\n      this._cleanupDetach?.();\n      this._detachOverlay();\n    }, 200);\n\n    panel.classList.add('mat-select-panel-exit');\n  }\n\n  /** Detaches the current overlay directive. */\n  private _detachOverlay() {\n    this._overlayDir.detachOverlay();\n    // Some of the overlay detachment logic depends on change detection.\n    // Mark for check to ensure that things get picked up in a timely manner.\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Sets the select's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: any): void {\n    this._assignValue(value);\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: (value: any) => void): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: () => {}): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Disables the select. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this._changeDetectorRef.markForCheck();\n    this.stateChanges.next();\n  }\n\n  /** Whether or not the overlay panel is open. */\n  get panelOpen(): boolean {\n    return this._panelOpen;\n  }\n\n  /** The currently selected option. */\n  get selected(): MatOption | MatOption[] {\n    return this.multiple ? this._selectionModel?.selected || [] : this._selectionModel?.selected[0];\n  }\n\n  /** The value displayed in the trigger. */\n  get triggerValue(): string {\n    if (this.empty) {\n      return '';\n    }\n\n    if (this._multiple) {\n      const selectedOptions = this._selectionModel.selected.map(option => option.viewValue);\n\n      if (this._isRtl()) {\n        selectedOptions.reverse();\n      }\n\n      // TODO(crisbeto): delimiter should be configurable for proper localization.\n      return selectedOptions.join(', ');\n    }\n\n    return this._selectionModel.selected[0].viewValue;\n  }\n\n  /** Refreshes the error state of the select. */\n  updateErrorState() {\n    this._errorStateTracker.updateErrorState();\n  }\n\n  /** Whether the element is in RTL mode. */\n  _isRtl(): boolean {\n    return this._dir ? this._dir.value === 'rtl' : false;\n  }\n\n  /** Handles all keydown events on the select. */\n  _handleKeydown(event: KeyboardEvent): void {\n    if (!this.disabled) {\n      this.panelOpen ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);\n    }\n  }\n\n  /** Handles keyboard events while the select is closed. */\n  private _handleClosedKeydown(event: KeyboardEvent): void {\n    const keyCode = event.keyCode;\n    const isArrowKey =\n      keyCode === DOWN_ARROW ||\n      keyCode === UP_ARROW ||\n      keyCode === LEFT_ARROW ||\n      keyCode === RIGHT_ARROW;\n    const isOpenKey = keyCode === ENTER || keyCode === SPACE;\n    const manager = this._keyManager;\n\n    // Open the select on ALT + arrow key to match the native <select>\n    if (\n      (!manager.isTyping() && isOpenKey && !hasModifierKey(event)) ||\n      ((this.multiple || event.altKey) && isArrowKey)\n    ) {\n      event.preventDefault(); // prevents the page from scrolling down when pressing space\n      this.open();\n    } else if (!this.multiple) {\n      const previouslySelectedOption = this.selected;\n      manager.onKeydown(event);\n      const selectedOption = this.selected;\n\n      // Since the value has changed, we need to announce it ourselves.\n      if (selectedOption && previouslySelectedOption !== selectedOption) {\n        // We set a duration on the live announcement, because we want the live element to be\n        // cleared after a while so that users can't navigate to it using the arrow keys.\n        this._liveAnnouncer.announce((selectedOption as MatOption).viewValue, 10000);\n      }\n    }\n  }\n\n  /** Handles keyboard events when the selected is open. */\n  private _handleOpenKeydown(event: KeyboardEvent): void {\n    const manager = this._keyManager;\n    const keyCode = event.keyCode;\n    const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;\n    const isTyping = manager.isTyping();\n\n    if (isArrowKey && event.altKey) {\n      // Close the select on ALT + arrow key to match the native <select>\n      event.preventDefault();\n      this.close();\n      // Don't do anything in this case if the user is typing,\n      // because the typing sequence can include the space key.\n    } else if (\n      !isTyping &&\n      (keyCode === ENTER || keyCode === SPACE) &&\n      manager.activeItem &&\n      !hasModifierKey(event)\n    ) {\n      event.preventDefault();\n      manager.activeItem._selectViaInteraction();\n    } else if (!isTyping && this._multiple && keyCode === A && event.ctrlKey) {\n      event.preventDefault();\n      const hasDeselectedOptions = this.options.some(opt => !opt.disabled && !opt.selected);\n\n      this.options.forEach(option => {\n        if (!option.disabled) {\n          hasDeselectedOptions ? option.select() : option.deselect();\n        }\n      });\n    } else {\n      const previouslyFocusedIndex = manager.activeItemIndex;\n\n      manager.onKeydown(event);\n\n      if (\n        this._multiple &&\n        isArrowKey &&\n        event.shiftKey &&\n        manager.activeItem &&\n        manager.activeItemIndex !== previouslyFocusedIndex\n      ) {\n        manager.activeItem._selectViaInteraction();\n      }\n    }\n  }\n\n  /** Handles keyboard events coming from the overlay. */\n  protected _handleOverlayKeydown(event: KeyboardEvent): void {\n    // TODO(crisbeto): prior to #30363 this was being handled inside the overlay directive, but we\n    // need control over the animation timing so we do it manually. We should remove the `keydown`\n    // listener from `.mat-mdc-select-panel` and handle all the events here. That may cause\n    // further test breakages so it's left for a follow-up.\n    if (event.keyCode === ESCAPE && !hasModifierKey(event)) {\n      event.preventDefault();\n      this.close();\n    }\n  }\n\n  _onFocus() {\n    if (!this.disabled) {\n      this._focused = true;\n      this.stateChanges.next();\n    }\n  }\n\n  /**\n   * Calls the touched callback only if the panel is closed. Otherwise, the trigger will\n   * \"blur\" to the panel when it opens, causing a false positive.\n   */\n  _onBlur() {\n    this._focused = false;\n    this._keyManager?.cancelTypeahead();\n\n    if (!this.disabled && !this.panelOpen) {\n      this._onTouched();\n      this._changeDetectorRef.markForCheck();\n      this.stateChanges.next();\n    }\n  }\n\n  /** Returns the theme to be used on the panel. */\n  _getPanelTheme(): string {\n    return this._parentFormField ? `mat-${this._parentFormField.color}` : '';\n  }\n\n  /** Whether the select has a value. */\n  get empty(): boolean {\n    return !this._selectionModel || this._selectionModel.isEmpty();\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) {\n        this._value = this.ngControl.value;\n      }\n\n      this._setSelectionByValue(this._value);\n      this.stateChanges.next();\n    });\n  }\n\n  /**\n   * Sets the selected option based on a value. If no option can be\n   * found with the designated value, the select trigger is cleared.\n   */\n  private _setSelectionByValue(value: any | any[]): void {\n    this.options.forEach(option => option.setInactiveStyles());\n    this._selectionModel.clear();\n\n    if (this.multiple && value) {\n      if (!Array.isArray(value) && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n        throw getMatSelectNonArrayValueError();\n      }\n\n      value.forEach((currentValue: any) => this._selectOptionByValue(currentValue));\n      this._sortValues();\n    } else {\n      const correspondingOption = this._selectOptionByValue(value);\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 option the user interacted with last.\n      if (correspondingOption) {\n        this._keyManager.updateActiveItem(correspondingOption);\n      } else if (!this.panelOpen) {\n        // Otherwise reset the highlighted option. Note that we only want to do this while\n        // closed, because doing it while open can shift the user's focus unnecessarily.\n        this._keyManager.updateActiveItem(-1);\n      }\n    }\n\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Finds and selects and option based on its value.\n   * @returns Option that has the corresponding value.\n   */\n  private _selectOptionByValue(value: any): MatOption | undefined {\n    const correspondingOption = this.options.find((option: MatOption) => {\n      // Skip options that are already in the model. This allows us to handle cases\n      // where the same primitive value is selected multiple times.\n      if (this._selectionModel.isSelected(option)) {\n        return false;\n      }\n\n      try {\n        // Treat null as a special reset value.\n        return (\n          (option.value != null || this.canSelectNullableOptions) &&\n          this._compareWith(option.value, value)\n        );\n      } catch (error) {\n        if (typeof ngDevMode === 'undefined' || ngDevMode) {\n          // Notify developers of errors in their comparator.\n          console.warn(error);\n        }\n        return false;\n      }\n    });\n\n    if (correspondingOption) {\n      this._selectionModel.select(correspondingOption);\n    }\n\n    return correspondingOption;\n  }\n\n  /** Assigns a specific value to the select. Returns whether the value has changed. */\n  private _assignValue(newValue: any | any[]): boolean {\n    // Always re-assign an array, because it might have been mutated.\n    if (newValue !== this._value || (this._multiple && Array.isArray(newValue))) {\n      if (this.options) {\n        this._setSelectionByValue(newValue);\n      }\n\n      this._value = newValue;\n      return true;\n    }\n    return false;\n  }\n\n  // `skipPredicate` determines if key manager should avoid putting a given option in the tab\n  // order. Allow disabled list items to receive focus via keyboard to align with WAI ARIA\n  // recommendation.\n  //\n  // Normally WAI ARIA's instructions are to exclude disabled items from the tab order, but it\n  // makes a few exceptions for compound widgets.\n  //\n  // From [Developing a Keyboard Interface](\n  // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/):\n  //   \"For the following composite widget elements, keep them focusable when disabled: Options in a\n  //   Listbox...\"\n  //\n  // The user can focus disabled options using the keyboard, but the user cannot click disabled\n  // options.\n  private _skipPredicate = (option: MatOption) => {\n    if (this.panelOpen) {\n      // Support keyboard focusing disabled options in an ARIA listbox.\n      return false;\n    }\n\n    // When the panel is closed, skip over disabled options. Support options via the UP/DOWN arrow\n    // keys on a closed select. ARIA listbox interaction pattern is less relevant when the panel is\n    // closed.\n    return option.disabled;\n  };\n\n  /** Gets how wide the overlay panel should be. */\n  private _getOverlayWidth(\n    preferredOrigin: ElementRef<ElementRef> | CdkOverlayOrigin | undefined,\n  ): string | number {\n    if (this.panelWidth === 'auto') {\n      const refToMeasure =\n        preferredOrigin instanceof CdkOverlayOrigin\n          ? preferredOrigin.elementRef\n          : preferredOrigin || this._elementRef;\n      return refToMeasure.nativeElement.getBoundingClientRect().width;\n    }\n\n    return this.panelWidth === null ? '' : this.panelWidth;\n  }\n  /** Syncs the parent state with the individual options. */\n  _syncParentProperties(): void {\n    if (this.options) {\n      for (const option of this.options) {\n        option._changeDetectorRef.markForCheck();\n      }\n    }\n  }\n\n  /** Sets up a key manager to listen to keyboard events on the overlay panel. */\n  private _initKeyManager() {\n    this._keyManager = new ActiveDescendantKeyManager<MatOption>(this.options)\n      .withTypeAhead(this.typeaheadDebounceInterval)\n      .withVerticalOrientation()\n      .withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr')\n      .withHomeAndEnd()\n      .withPageUpDown()\n      .withAllowedModifierKeys(['shiftKey'])\n      .skipPredicate(this._skipPredicate);\n\n    this._keyManager.tabOut.subscribe(() => {\n      if (this.panelOpen) {\n        // Select the active item when tabbing away. This is consistent with how the native\n        // select behaves. Note that we only want to do this in single selection mode.\n        if (!this.multiple && this._keyManager.activeItem) {\n          this._keyManager.activeItem._selectViaInteraction();\n        }\n\n        // Restore focus to the trigger before closing. Ensures that the focus\n        // position won't be lost if the user got focus into the overlay.\n        this.focus();\n        this.close();\n      }\n    });\n\n    this._keyManager.change.subscribe(() => {\n      if (this._panelOpen && this.panel) {\n        this._scrollOptionIntoView(this._keyManager.activeItemIndex || 0);\n      } else if (!this._panelOpen && !this.multiple && this._keyManager.activeItem) {\n        this._keyManager.activeItem._selectViaInteraction();\n      }\n    });\n  }\n\n  /** Drops current option subscriptions and IDs and resets from scratch. */\n  private _resetOptions(): void {\n    const changedOrDestroyed = merge(this.options.changes, this._destroy);\n\n    this.optionSelectionChanges.pipe(takeUntil(changedOrDestroyed)).subscribe(event => {\n      this._onSelect(event.source, event.isUserInput);\n\n      if (event.isUserInput && !this.multiple && this._panelOpen) {\n        this.close();\n        this.focus();\n      }\n    });\n\n    // Listen to changes in the internal state of the options and react accordingly.\n    // Handles cases like the labels of the selected options changing.\n    merge(...this.options.map(option => option._stateChanges))\n      .pipe(takeUntil(changedOrDestroyed))\n      .subscribe(() => {\n        // `_stateChanges` can fire as a result of a change in the label's DOM value which may\n        // be the result of an expression changing. We have to use `detectChanges` in order\n        // to avoid \"changed after checked\" errors (see #14793).\n        this._changeDetectorRef.detectChanges();\n        this.stateChanges.next();\n      });\n  }\n\n  /** Invoked when an option is clicked. */\n  private _onSelect(option: MatOption, isUserInput: boolean): void {\n    const wasSelected = this._selectionModel.isSelected(option);\n\n    if (!this.canSelectNullableOptions && option.value == null && !this._multiple) {\n      option.deselect();\n      this._selectionModel.clear();\n\n      if (this.value != null) {\n        this._propagateChanges(option.value);\n      }\n    } else {\n      if (wasSelected !== option.selected) {\n        option.selected\n          ? this._selectionModel.select(option)\n          : this._selectionModel.deselect(option);\n      }\n\n      if (isUserInput) {\n        this._keyManager.setActiveItem(option);\n      }\n\n      if (this.multiple) {\n        this._sortValues();\n\n        if (isUserInput) {\n          // In case the user selected the option with their mouse, we\n          // want to restore focus back to the trigger, in order to\n          // prevent the select keyboard controls from clashing with\n          // the ones from `mat-option`.\n          this.focus();\n        }\n      }\n    }\n\n    if (wasSelected !== this._selectionModel.isSelected(option)) {\n      this._propagateChanges();\n    }\n\n    this.stateChanges.next();\n  }\n\n  /** Sorts the selected values in the selected based on their order in the panel. */\n  private _sortValues() {\n    if (this.multiple) {\n      const options = this.options.toArray();\n\n      this._selectionModel.sort((a, b) => {\n        return this.sortComparator\n          ? this.sortComparator(a, b, options)\n          : options.indexOf(a) - options.indexOf(b);\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;\n\n    if (this.multiple) {\n      valueToEmit = (this.selected as MatOption[]).map(option => option.value);\n    } else {\n      valueToEmit = this.selected ? (this.selected as MatOption).value : fallbackValue;\n    }\n\n    this._value = valueToEmit;\n    this.valueChange.emit(valueToEmit);\n    this._onChange(valueToEmit);\n    this.selectionChange.emit(this._getChangeEvent(valueToEmit));\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Highlights the selected item. If no option is selected, it will highlight\n   * the first *enabled* option.\n   */\n  private _highlightCorrectOption(): void {\n    if (this._keyManager) {\n      if (this.empty) {\n        // Find the index of the first *enabled* option. Avoid calling `_keyManager.setActiveItem`\n        // because it activates the first option that passes the skip predicate, rather than the\n        // first *enabled* option.\n        let firstEnabledOptionIndex = -1;\n        for (let index = 0; index < this.options.length; index++) {