@angular/material/fesm2022/autocomplete.mjs.map

Angular Material

{"version":3,"file":"autocomplete.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/autocomplete/autocomplete.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/autocomplete/autocomplete.html","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/autocomplete/autocomplete-origin.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/autocomplete/autocomplete-trigger.ts","../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/material/autocomplete/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\nimport {\n  ANIMATION_MODULE_TYPE,\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  InjectionToken,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\nimport {\n  MAT_OPTGROUP,\n  MAT_OPTION_PARENT_COMPONENT,\n  MatOptgroup,\n  MatOption,\n  ThemePalette,\n} from '../core';\nimport {_IdGenerator, ActiveDescendantKeyManager} from '@angular/cdk/a11y';\nimport {Platform} from '@angular/cdk/platform';\nimport {Subscription} from 'rxjs';\n\n/** Event object that is emitted when an autocomplete option is selected. */\nexport class MatAutocompleteSelectedEvent {\n  constructor(\n    /** Reference to the autocomplete panel that emitted the event. */\n    public source: MatAutocomplete,\n    /** Option that was selected. */\n    public option: MatOption,\n  ) {}\n}\n\n/** Event object that is emitted when an autocomplete option is activated. */\nexport interface MatAutocompleteActivatedEvent {\n  /** Reference to the autocomplete panel that emitted the event. */\n  source: MatAutocomplete;\n\n  /** Option that was selected. */\n  option: MatOption | null;\n}\n\n/** Default `mat-autocomplete` options that can be overridden. */\nexport interface MatAutocompleteDefaultOptions {\n  /** Whether the first option should be highlighted when an autocomplete panel is opened. */\n  autoActiveFirstOption?: boolean;\n\n  /** Whether the active option should be selected as the user is navigating. */\n  autoSelectActiveOption?: boolean;\n\n  /**\n   * Whether the user is required to make a selection when\n   * they're interacting with the autocomplete.\n   */\n  requireSelection?: boolean;\n\n  /** Class to be applied to the autocomplete's backdrop. */\n  backdropClass?: string;\n\n  /** Whether the autocomplete has a backdrop. */\n  hasBackdrop?: boolean;\n\n  /** Class or list of classes to be applied to the autocomplete's overlay panel. */\n  overlayPanelClass?: string | string[];\n\n  /** Whether icon indicators should be hidden for single-selection. */\n  hideSingleSelectionIndicator?: boolean;\n}\n\n/** Injection token to be used to override the default options for `mat-autocomplete`. */\nexport const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = new InjectionToken<MatAutocompleteDefaultOptions>(\n  'mat-autocomplete-default-options',\n  {\n    providedIn: 'root',\n    factory: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY,\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_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefaultOptions {\n  return {\n    autoActiveFirstOption: false,\n    autoSelectActiveOption: false,\n    hideSingleSelectionIndicator: false,\n    requireSelection: false,\n    hasBackdrop: false,\n  };\n}\n\n/** Autocomplete component. */\n@Component({\n  selector: 'mat-autocomplete',\n  templateUrl: 'autocomplete.html',\n  styleUrl: 'autocomplete.css',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  exportAs: 'matAutocomplete',\n  host: {\n    'class': 'mat-mdc-autocomplete',\n  },\n  providers: [{provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete}],\n})\nexport class MatAutocomplete implements AfterContentInit, OnDestroy {\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  protected _defaults = inject<MatAutocompleteDefaultOptions>(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS);\n  protected _animationsDisabled =\n    inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';\n  private _activeOptionChanges = Subscription.EMPTY;\n\n  /** Manages active item in option list based on key events. */\n  _keyManager: ActiveDescendantKeyManager<MatOption>;\n\n  /** Whether the autocomplete panel should be visible, depending on option length. */\n  showPanel: boolean = false;\n\n  /** Whether the autocomplete panel is open. */\n  get isOpen(): boolean {\n    return this._isOpen && this.showPanel;\n  }\n  _isOpen: boolean = false;\n\n  /** Latest trigger that opened the autocomplete. */\n  _latestOpeningTrigger: unknown;\n\n  /** @docs-private Sets the theme color of the panel. */\n  _setColor(value: ThemePalette) {\n    this._color = value;\n    this._changeDetectorRef.markForCheck();\n  }\n  /** @docs-private theme color of the panel */\n  protected _color: ThemePalette;\n\n  // The @ViewChild query for TemplateRef here needs to be static because some code paths\n  // lead to the overlay being created before change detection has finished for this component.\n  // Notably, another component may trigger `focus` on the autocomplete-trigger.\n\n  /** @docs-private */\n  @ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;\n\n  /** Element for the panel containing the autocomplete options. */\n  @ViewChild('panel') panel: ElementRef;\n\n  /** Reference to all options within the autocomplete. */\n  @ContentChildren(MatOption, {descendants: true}) options: QueryList<MatOption>;\n\n  /** Reference to all option groups within the autocomplete. */\n  @ContentChildren(MAT_OPTGROUP, {descendants: true}) optionGroups: QueryList<MatOptgroup>;\n\n  /** Aria label of the autocomplete. */\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  /** Function that maps an option's control value to its display value in the trigger. */\n  @Input() displayWith: ((value: any) => string) | null = null;\n\n  /**\n   * Whether the first option should be highlighted when the autocomplete panel is opened.\n   * Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.\n   */\n  @Input({transform: booleanAttribute}) autoActiveFirstOption: boolean;\n\n  /** Whether the active option should be selected as the user is navigating. */\n  @Input({transform: booleanAttribute}) autoSelectActiveOption: boolean;\n\n  /**\n   * Whether the user is required to make a selection when they're interacting with the\n   * autocomplete. If the user moves away from the autocomplete without selecting an option from\n   * the list, the value will be reset. If the user opens the panel and closes it without\n   * interacting or selecting a value, the initial value will be kept.\n   */\n  @Input({transform: booleanAttribute}) requireSelection: boolean;\n\n  /**\n   * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will\n   * match the width of its host.\n   */\n  @Input() panelWidth: string | number;\n\n  /** Whether ripples are disabled within the autocomplete panel. */\n  @Input({transform: booleanAttribute}) disableRipple: boolean;\n\n  /** Event that is emitted whenever an option from the list is selected. */\n  @Output() readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent> =\n    new EventEmitter<MatAutocompleteSelectedEvent>();\n\n  /** Event that is emitted when the autocomplete panel is opened. */\n  @Output() readonly opened: EventEmitter<void> = new EventEmitter<void>();\n\n  /** Event that is emitted when the autocomplete panel is closed. */\n  @Output() readonly closed: EventEmitter<void> = new EventEmitter<void>();\n\n  /** Emits whenever an option is activated. */\n  @Output() readonly optionActivated: EventEmitter<MatAutocompleteActivatedEvent> =\n    new EventEmitter<MatAutocompleteActivatedEvent>();\n\n  /**\n   * Takes classes set on the host mat-autocomplete element and applies them to the panel\n   * inside the overlay container to allow for easy styling.\n   */\n  @Input('class')\n  set classList(value: string | string[]) {\n    this._classList = value;\n    this._elementRef.nativeElement.className = '';\n  }\n  _classList: string | string[];\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\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  /** Unique ID to be used by autocomplete trigger's \"aria-owns\" property. */\n  id: string = inject(_IdGenerator).getId('mat-autocomplete-');\n\n  /**\n   * Tells any descendant `mat-optgroup` to use the inert a11y pattern.\n   * @docs-private\n   */\n  readonly inertGroups: boolean;\n\n  constructor(...args: unknown[]);\n\n  constructor() {\n    const platform = inject(Platform);\n\n    // TODO(crisbeto): the problem that the `inertGroups` option resolves is only present on\n    // Safari using VoiceOver. We should occasionally check back to see whether the bug\n    // wasn't resolved in VoiceOver, and if it has, we can remove this and the `inertGroups`\n    // option altogether.\n    this.inertGroups = platform?.SAFARI || false;\n    this.autoActiveFirstOption = !!this._defaults.autoActiveFirstOption;\n    this.autoSelectActiveOption = !!this._defaults.autoSelectActiveOption;\n    this.requireSelection = !!this._defaults.requireSelection;\n    this._hideSingleSelectionIndicator = this._defaults.hideSingleSelectionIndicator ?? false;\n  }\n\n  ngAfterContentInit() {\n    this._keyManager = new ActiveDescendantKeyManager<MatOption>(this.options)\n      .withWrap()\n      .skipPredicate(this._skipPredicate);\n    this._activeOptionChanges = this._keyManager.change.subscribe(index => {\n      if (this.isOpen) {\n        this.optionActivated.emit({source: this, option: this.options.toArray()[index] || null});\n      }\n    });\n\n    // Set the initial visibility state.\n    this._setVisibility();\n  }\n\n  ngOnDestroy() {\n    this._keyManager?.destroy();\n    this._activeOptionChanges.unsubscribe();\n  }\n\n  /**\n   * Sets the panel scrollTop. This allows us to manually scroll to display options\n   * above or below the fold, as they are not actually being focused when active.\n   */\n  _setScrollTop(scrollTop: number): void {\n    if (this.panel) {\n      this.panel.nativeElement.scrollTop = scrollTop;\n    }\n  }\n\n  /** Returns the panel's scrollTop. */\n  _getScrollTop(): number {\n    return this.panel ? this.panel.nativeElement.scrollTop : 0;\n  }\n\n  /** Panel should hide itself when the option list is empty. */\n  _setVisibility() {\n    this.showPanel = !!this.options?.length;\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /** Emits the `select` event. */\n  _emitSelectEvent(option: MatOption): void {\n    const event = new MatAutocompleteSelectedEvent(this, option);\n    this.optionSelected.emit(event);\n  }\n\n  /** Gets the aria-labelledby for the autocomplete panel. */\n  _getPanelAriaLabelledby(labelId: string | null): string | null {\n    if (this.ariaLabel) {\n      return null;\n    }\n\n    const labelExpression = labelId ? labelId + ' ' : '';\n    return this.ariaLabelledby ? labelExpression + this.ariaLabelledby : labelId;\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  protected _skipPredicate() {\n    return false;\n  }\n}\n","<ng-template let-formFieldId=\"id\">\n  <div\n    class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n    role=\"listbox\"\n    [id]=\"id\"\n    [class]=\"_classList\"\n    [class.mat-mdc-autocomplete-visible]=\"showPanel\"\n    [class.mat-mdc-autocomplete-hidden]=\"!showPanel\"\n    [class.mat-autocomplete-panel-animations-enabled]=\"!_animationsDisabled\"\n    [class.mat-primary]=\"_color === 'primary'\"\n    [class.mat-accent]=\"_color === 'accent'\"\n    [class.mat-warn]=\"_color === 'warn'\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n    #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\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 {Directive, ElementRef, inject} from '@angular/core';\n\n/**\n * Directive applied to an element to make it usable\n * as a connection point for an autocomplete panel.\n */\n@Directive({\n  selector: '[matAutocompleteOrigin]',\n  exportAs: 'matAutocompleteOrigin',\n})\nexport class MatAutocompleteOrigin {\n  elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  constructor(...args: unknown[]);\n  constructor() {}\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 {addAriaReferencedId, removeAriaReferencedId} from '@angular/cdk/a11y';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW, hasModifierKey} from '@angular/cdk/keycodes';\nimport {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';\nimport {\n  ConnectedPosition,\n  FlexibleConnectedPositionStrategy,\n  Overlay,\n  OverlayConfig,\n  OverlayRef,\n  PositionStrategy,\n  ScrollStrategy,\n} from '@angular/cdk/overlay';\nimport {_getEventTarget, _getFocusedElementPierceShadowDom} from '@angular/cdk/platform';\nimport {TemplatePortal} from '@angular/cdk/portal';\nimport {ViewportRuler} from '@angular/cdk/scrolling';\nimport {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Directive,\n  ElementRef,\n  EnvironmentInjector,\n  InjectionToken,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  Renderer2,\n  SimpleChanges,\n  ViewContainerRef,\n  afterNextRender,\n  booleanAttribute,\n  forwardRef,\n  inject,\n} from '@angular/core';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\nimport {\n  MatOption,\n  MatOptionSelectionChange,\n  _countGroupLabelsBeforeOption,\n  _getOptionScrollPosition,\n} from '../core';\nimport {MAT_FORM_FIELD, MatFormField} from '../form-field';\nimport {Observable, Subject, Subscription, defer, merge, of as observableOf} from 'rxjs';\nimport {delay, filter, map, startWith, switchMap, take, tap} from 'rxjs/operators';\nimport {\n  MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n  MatAutocomplete,\n  MatAutocompleteDefaultOptions,\n} from './autocomplete';\nimport {MatAutocompleteOrigin} from './autocomplete-origin';\n\n/**\n * Provider that allows the autocomplete to register as a ControlValueAccessor.\n * @docs-private\n */\nexport const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => MatAutocompleteTrigger),\n  multi: true,\n};\n\n/**\n * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.\n * @docs-private\n */\nexport function getMatAutocompleteMissingPanelError(): Error {\n  return Error(\n    'Attempting to open an undefined instance of `mat-autocomplete`. ' +\n      'Make sure that the id passed to the `matAutocomplete` is correct and that ' +\n      \"you're attempting to open it after the ngAfterContentInit hook.\",\n  );\n}\n\n/** Injection token that determines the scroll handling while the autocomplete panel is open. */\nexport const MAT_AUTOCOMPLETE_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(\n  'mat-autocomplete-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_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {\n  return () => overlay.scrollStrategies.reposition();\n}\n\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nexport const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {\n  provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,\n  deps: [Overlay],\n  useFactory: MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY,\n};\n\n/** Base class with all of the `MatAutocompleteTrigger` functionality. */\n@Directive({\n  selector: `input[matAutocomplete], textarea[matAutocomplete]`,\n  host: {\n    'class': 'mat-mdc-autocomplete-trigger',\n    '[attr.autocomplete]': 'autocompleteAttribute',\n    '[attr.role]': 'autocompleteDisabled ? null : \"combobox\"',\n    '[attr.aria-autocomplete]': 'autocompleteDisabled ? null : \"list\"',\n    '[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null',\n    '[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()',\n    '[attr.aria-controls]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id',\n    '[attr.aria-haspopup]': 'autocompleteDisabled ? null : \"listbox\"',\n    // Note: we use `focusin`, as opposed to `focus`, in order to open the panel\n    // a little earlier. This avoids issues where IE delays the focusing of the input.\n    '(focusin)': '_handleFocus()',\n    '(blur)': '_onTouched()',\n    '(input)': '_handleInput($event)',\n    '(keydown)': '_handleKeydown($event)',\n    '(click)': '_handleClick()',\n  },\n  exportAs: 'matAutocompleteTrigger',\n  providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR],\n})\nexport class MatAutocompleteTrigger\n  implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy\n{\n  private _environmentInjector = inject(EnvironmentInjector);\n  private _element = inject<ElementRef<HTMLInputElement>>(ElementRef);\n  private _overlay = inject(Overlay);\n  private _viewContainerRef = inject(ViewContainerRef);\n  private _zone = inject(NgZone);\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n  private _dir = inject(Directionality, {optional: true});\n  private _formField = inject<MatFormField | null>(MAT_FORM_FIELD, {optional: true, host: true});\n  private _viewportRuler = inject(ViewportRuler);\n  private _scrollStrategy = inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY);\n  private _renderer = inject(Renderer2);\n  private _defaults = inject<MatAutocompleteDefaultOptions | null>(\n    MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n    {optional: true},\n  );\n\n  private _overlayRef: OverlayRef | null;\n  private _portal: TemplatePortal;\n  private _componentDestroyed = false;\n  private _initialized = new Subject();\n  private _keydownSubscription: Subscription | null;\n  private _outsideClickSubscription: Subscription | null;\n  private _cleanupWindowBlur: (() => void) | undefined;\n\n  /** Old value of the native input. Used to work around issues with the `input` event on IE. */\n  private _previousValue: string | number | null;\n\n  /** Value of the input element when the panel was attached (even if there are no options). */\n  private _valueOnAttach: string | number | null;\n\n  /** Value on the previous keydown event. */\n  private _valueOnLastKeydown: string | null;\n\n  /** Strategy that is used to position the panel. */\n  private _positionStrategy: FlexibleConnectedPositionStrategy;\n\n  /** Whether or not the label state is being overridden. */\n  private _manuallyFloatingLabel = false;\n\n  /** The subscription for closing actions (some are bound to document). */\n  private _closingActionsSubscription: Subscription;\n\n  /** Subscription to viewport size changes. */\n  private _viewportSubscription = Subscription.EMPTY;\n\n  /** Implements BreakpointObserver to be used to detect handset landscape */\n  private _breakpointObserver = inject(BreakpointObserver);\n  private _handsetLandscapeSubscription = Subscription.EMPTY;\n\n  /**\n   * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,\n   * closed autocomplete from being reopened if the user switches to another browser tab and then\n   * comes back.\n   */\n  private _canOpenOnNextFocus = true;\n\n  /** Value inside the input before we auto-selected an option. */\n  private _valueBeforeAutoSelection: string | undefined;\n\n  /**\n   * Current option that we have auto-selected as the user is navigating,\n   * but which hasn't been propagated to the model value yet.\n   */\n  private _pendingAutoselectedOption: MatOption | null;\n\n  /** Stream of keyboard events that can close the panel. */\n  private readonly _closeKeyEventStream = new Subject<void>();\n\n  /**\n   * Event handler for when the window is blurred. Needs to be an\n   * arrow function in order to preserve the context.\n   */\n  private _windowBlurHandler = () => {\n    // If the user blurred the window while the autocomplete is focused, it means that it'll be\n    // refocused when they come back. In this case we want to skip the first focus event, if the\n    // pane was closed, in order to avoid reopening it unintentionally.\n    this._canOpenOnNextFocus = this.panelOpen || !this._hasFocus();\n  };\n\n  /** `View -> model callback called when value changes` */\n  _onChange: (value: any) => void = () => {};\n\n  /** `View -> model callback called when autocomplete has been touched` */\n  _onTouched = () => {};\n\n  /** The autocomplete panel to be attached to this trigger. */\n  @Input('matAutocomplete') autocomplete: MatAutocomplete;\n\n  /**\n   * Position of the autocomplete panel relative to the trigger element. A position of `auto`\n   * will render the panel underneath the trigger if there is enough space for it to fit in\n   * the viewport, otherwise the panel will be shown above it. If the position is set to\n   * `above` or `below`, the panel will always be shown above or below the trigger. no matter\n   * whether it fits completely in the viewport.\n   */\n  @Input('matAutocompletePosition') position: 'auto' | 'above' | 'below' = 'auto';\n\n  /**\n   * Reference relative to which to position the autocomplete panel.\n   * Defaults to the autocomplete trigger element.\n   */\n  @Input('matAutocompleteConnectedTo') connectedTo: MatAutocompleteOrigin;\n\n  /**\n   * `autocomplete` attribute to be set on the input element.\n   * @docs-private\n   */\n  @Input('autocomplete') autocompleteAttribute: string = 'off';\n\n  /**\n   * Whether the autocomplete is disabled. When disabled, the element will\n   * act as a regular input and the user won't be able to open the panel.\n   */\n  @Input({alias: 'matAutocompleteDisabled', transform: booleanAttribute})\n  autocompleteDisabled: boolean;\n\n  constructor(...args: unknown[]);\n  constructor() {}\n\n  /** Class to apply to the panel when it's above the input. */\n  private _aboveClass = 'mat-mdc-autocomplete-panel-above';\n\n  ngAfterViewInit() {\n    this._initialized.next();\n    this._initialized.complete();\n    this._cleanupWindowBlur = this._renderer.listen('window', 'blur', this._windowBlurHandler);\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['position'] && this._positionStrategy) {\n      this._setStrategyPositions(this._positionStrategy);\n\n      if (this.panelOpen) {\n        this._overlayRef!.updatePosition();\n      }\n    }\n  }\n\n  ngOnDestroy() {\n    this._cleanupWindowBlur?.();\n    this._handsetLandscapeSubscription.unsubscribe();\n    this._viewportSubscription.unsubscribe();\n    this._componentDestroyed = true;\n    this._destroyPanel();\n    this._closeKeyEventStream.complete();\n    this._clearFromModal();\n  }\n\n  /** Whether or not the autocomplete panel is open. */\n  get panelOpen(): boolean {\n    return this._overlayAttached && this.autocomplete.showPanel;\n  }\n  private _overlayAttached: boolean = false;\n\n  /** Opens the autocomplete suggestion panel. */\n  openPanel(): void {\n    this._openPanelInternal();\n  }\n\n  /** Closes the autocomplete suggestion panel. */\n  closePanel(): void {\n    this._resetLabel();\n\n    if (!this._overlayAttached) {\n      return;\n    }\n\n    if (this.panelOpen) {\n      // Only emit if the panel was visible.\n      // `afterNextRender` always runs outside of the Angular zone, so all the subscriptions from\n      // `_subscribeToClosingActions()` are also outside of the Angular zone.\n      // We should manually run in Angular zone to update UI after panel closing.\n      this._zone.run(() => {\n        this.autocomplete.closed.emit();\n      });\n    }\n\n    // Only reset if this trigger is the latest one that opened the\n    // autocomplete since another may have taken it over.\n    if (this.autocomplete._latestOpeningTrigger === this) {\n      this.autocomplete._isOpen = false;\n      this.autocomplete._latestOpeningTrigger = null;\n    }\n\n    this._overlayAttached = false;\n    this._pendingAutoselectedOption = null;\n\n    if (this._overlayRef && this._overlayRef.hasAttached()) {\n      this._overlayRef.detach();\n      this._closingActionsSubscription.unsubscribe();\n    }\n\n    this._updatePanelState();\n\n    // Note that in some cases this can end up being called after the component is destroyed.\n    // Add a check to ensure that we don't try to run change detection on a destroyed view.\n    if (!this._componentDestroyed) {\n      // We need to trigger change detection manually, because\n      // `fromEvent` doesn't seem to do it at the proper time.\n      // This ensures that the label is reset when the\n      // user clicks outside.\n      this._changeDetectorRef.detectChanges();\n    }\n\n    // Remove aria-owns attribute when the autocomplete is no longer visible.\n    if (this._trackedModal) {\n      removeAriaReferencedId(this._trackedModal, 'aria-owns', this.autocomplete.id);\n    }\n  }\n\n  /**\n   * Updates the position of the autocomplete suggestion panel to ensure that it fits all options\n   * within the viewport.\n   */\n  updatePosition(): void {\n    if (this._overlayAttached) {\n      this._overlayRef!.updatePosition();\n    }\n  }\n\n  /**\n   * A stream of actions that should close the autocomplete panel, including\n   * when an option is selected, on blur, and when TAB is pressed.\n   */\n  get panelClosingActions(): Observable<MatOptionSelectionChange | null> {\n    return merge(\n      this.optionSelections,\n      this.autocomplete._keyManager.tabOut.pipe(filter(() => this._overlayAttached)),\n      this._closeKeyEventStream,\n      this._getOutsideClickStream(),\n      this._overlayRef\n        ? this._overlayRef.detachments().pipe(filter(() => this._overlayAttached))\n        : observableOf(),\n    ).pipe(\n      // Normalize the output so we return a consistent type.\n      map(event => (event instanceof MatOptionSelectionChange ? event : null)),\n    );\n  }\n\n  /** Stream of changes to the selection state of the autocomplete options. */\n  readonly optionSelections: Observable<MatOptionSelectionChange> = defer(() => {\n    const options = this.autocomplete ? this.autocomplete.options : null;\n\n    if (options) {\n      return options.changes.pipe(\n        startWith(options),\n        switchMap(() => merge(...options.map(option => option.onSelectionChange))),\n      );\n    }\n\n    // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.\n    // Return a stream that we'll replace with the real one once everything is in place.\n    return this._initialized.pipe(switchMap(() => this.optionSelections));\n  }) as Observable<MatOptionSelectionChange>;\n\n  /** The currently active option, coerced to MatOption type. */\n  get activeOption(): MatOption | null {\n    if (this.autocomplete && this.autocomplete._keyManager) {\n      return this.autocomplete._keyManager.activeItem;\n    }\n\n    return null;\n  }\n\n  /** Stream of clicks outside of the autocomplete panel. */\n  private _getOutsideClickStream(): Observable<any> {\n    return new Observable(observer => {\n      const listener = (event: MouseEvent | TouchEvent) => {\n        // If we're in the Shadow DOM, the event target will be the shadow root, so we have to\n        // fall back to check the first element in the path of the click event.\n        const clickTarget = _getEventTarget<HTMLElement>(event)!;\n        const formField = this._formField\n          ? this._formField.getConnectedOverlayOrigin().nativeElement\n          : null;\n        const customOrigin = this.connectedTo ? this.connectedTo.elementRef.nativeElement : null;\n\n        if (\n          this._overlayAttached &&\n          clickTarget !== this._element.nativeElement &&\n          // Normally focus moves inside `mousedown` so this condition will almost always be\n          // true. Its main purpose is to handle the case where the input is focused from an\n          // outside click which propagates up to the `body` listener within the same sequence\n          // and causes the panel to close immediately (see #3106).\n          !this._hasFocus() &&\n          (!formField || !formField.contains(clickTarget)) &&\n          (!customOrigin || !customOrigin.contains(clickTarget)) &&\n          !!this._overlayRef &&\n          !this._overlayRef.overlayElement.contains(clickTarget)\n        ) {\n          observer.next(event);\n        }\n      };\n\n      const cleanups = [\n        this._renderer.listen('document', 'click', listener),\n        this._renderer.listen('document', 'auxclick', listener),\n        this._renderer.listen('document', 'touchend', listener),\n      ];\n\n      return () => {\n        cleanups.forEach(current => current());\n      };\n    });\n  }\n\n  // Implemented as part of ControlValueAccessor.\n  writeValue(value: any): void {\n    Promise.resolve(null).then(() => this._assignOptionValue(value));\n  }\n\n  // Implemented as part of ControlValueAccessor.\n  registerOnChange(fn: (value: any) => {}): void {\n    this._onChange = fn;\n  }\n\n  // Implemented as part of ControlValueAccessor.\n  registerOnTouched(fn: () => {}) {\n    this._onTouched = fn;\n  }\n\n  // Implemented as part of ControlValueAccessor.\n  setDisabledState(isDisabled: boolean) {\n    this._element.nativeElement.disabled = isDisabled;\n  }\n\n  _handleKeydown(event: KeyboardEvent): void {\n    const keyCode = event.keyCode;\n    const hasModifier = hasModifierKey(event);\n\n    // Prevent the default action on all escape key presses. This is here primarily to bring IE\n    // in line with other browsers. By default, pressing escape on IE will cause it to revert\n    // the input value to the one that it had on focus, however it won't dispatch any events\n    // which means that the model value will be out of sync with the view.\n    if (keyCode === ESCAPE && !hasModifier) {\n      event.preventDefault();\n    }\n\n    this._valueOnLastKeydown = this._element.nativeElement.value;\n\n    if (this.activeOption && keyCode === ENTER && this.panelOpen && !hasModifier) {\n      this.activeOption._selectViaInteraction();\n      this._resetActiveItem();\n      event.preventDefault();\n    } else if (this.autocomplete) {\n      const prevActiveItem = this.autocomplete._keyManager.activeItem;\n      const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;\n\n      if (keyCode === TAB || (isArrowKey && !hasModifier && this.panelOpen)) {\n        this.autocomplete._keyManager.onKeydown(event);\n      } else if (isArrowKey && this._canOpen()) {\n        this._openPanelInternal(this._valueOnLastKeydown);\n      }\n\n      if (isArrowKey || this.autocomplete._keyManager.activeItem !== prevActiveItem) {\n        this._scrollToOption(this.autocomplete._keyManager.activeItemIndex || 0);\n\n        if (this.autocomplete.autoSelectActiveOption && this.activeOption) {\n          if (!this._pendingAutoselectedOption) {\n            this._valueBeforeAutoSelection = this._valueOnLastKeydown;\n          }\n\n          this._pendingAutoselectedOption = this.activeOption;\n          this._assignOptionValue(this.activeOption.value);\n        }\n      }\n    }\n  }\n\n  _handleInput(event: KeyboardEvent): void {\n    let target = event.target as HTMLInputElement;\n    let value: number | string | null = target.value;\n\n    // Based on `NumberValueAccessor` from forms.\n    if (target.type === 'number') {\n      value = value == '' ? null : parseFloat(value);\n    }\n\n    // If the input has a placeholder, IE will fire the `input` event on page load,\n    // focus and blur, in addition to when the user actually changed the value. To\n    // filter out all of the extra events, we save the value on focus and between\n    // `input` events, and we check whether it changed.\n    // See: https://connect.microsoft.com/IE/feedback/details/885747/\n    if (this._previousValue !== value) {\n      this._previousValue = value;\n      this._pendingAutoselectedOption = null;\n\n      // If selection is required we don't write to the CVA while the user is typing.\n      // At the end of the selection either the user will have picked something\n      // or we'll reset the value back to null.\n      if (!this.autocomplete || !this.autocomplete.requireSelection) {\n        this._onChange(value);\n      }\n\n      if (!value) {\n        this._clearPreviousSelectedOption(null, false);\n      } else if (this.panelOpen && !this.autocomplete.requireSelection) {\n        // Note that we don't reset this when `requireSelection` is enabled,\n        // because the option will be reset when the panel is closed.\n        const selectedOption = this.autocomplete.options?.find(option => option.selected);\n\n        if (selectedOption) {\n          const display = this._getDisplayValue(selectedOption.value);\n\n          if (value !== display) {\n            selectedOption.deselect(false);\n          }\n        }\n      }\n\n      if (this._canOpen() && this._hasFocus()) {\n        // When the `input` event fires, the input's value will have already changed. This means\n        // that if we take the `this._element.nativeElement.value` directly, it'll be one keystroke\n        // behind. This can be a problem when the user selects a value, changes a character while\n        // the input still has focus and then clicks away (see #28432). To work around it, we\n        // capture the value in `keydown` so we can use it here.\n        const valueOnAttach = this._valueOnLastKeydown ?? this._element.nativeElement.value;\n        this._valueOnLastKeydown = null;\n        this._openPanelInternal(valueOnAttach);\n      }\n    }\n  }\n\n  _handleFocus(): void {\n    if (!this._canOpenOnNextFocus) {\n      this._canOpenOnNextFocus = true;\n    } else if (this._canOpen()) {\n      this._previousValue = this._element.nativeElement.value;\n      this._attachOverlay(this._previousValue);\n      this._floatLabel(true);\n    }\n  }\n\n  _handleClick(): void {\n    if (this._canOpen() && !this.panelOpen) {\n      this._openPanelInternal();\n    }\n  }\n\n  /** Whether the input currently has focus. */\n  private _hasFocus(): boolean {\n    return _getFocusedElementPierceShadowDom() === this._element.nativeElement;\n  }\n\n  /**\n   * In \"auto\" mode, the label will animate down as soon as focus is lost.\n   * This causes the value to jump when selecting an option with the mouse.\n   * This method manually floats the label until the panel can be closed.\n   * @param shouldAnimate Whether the label should be animated when it is floated.\n   */\n  private _floatLabel(shouldAnimate = false): void {\n    if (this._formField && this._formField.floatLabel === 'auto') {\n      if (shouldAnimate) {\n        this._formField._animateAndLockLabel();\n      } else {\n        this._formField.floatLabel = 'always';\n      }\n\n      this._manuallyFloatingLabel = true;\n    }\n  }\n\n  /** If the label has been manually elevated, return it to its normal state. */\n  private _resetLabel(): void {\n    if (this._manuallyFloatingLabel) {\n      if (this._formField) {\n        this._formField.floatLabel = 'auto';\n      }\n      this._manuallyFloatingLabel = false;\n    }\n  }\n\n  /**\n   * This method listens to a stream of panel closing actions and resets the\n   * stream every time the option list changes.\n   */\n  private _subscribeToClosingActions(): Subscription {\n    const initialRender = new Observable(subscriber => {\n      afterNextRender(\n        () => {\n          subscriber.next();\n        },\n        {injector: this._environmentInjector},\n      );\n    });\n    const optionChanges = this.autocomplete.options?.changes.pipe(\n      tap(() => this._positionStrategy.reapplyLastPosition()),\n      // Defer emitting to the stream until the next tick, because changing\n      // bindings in here will cause \"changed after checked\" errors.\n      delay(0),\n    ) ?? observableOf();\n\n    // When the options are initially rendered, and when the option list changes...\n    return (\n      merge(initialRender, optionChanges)\n        .pipe(\n          // create a new stream of panelClosingActions, replacing any previous streams\n          // that were created, and flatten it so our stream only emits closing events...\n          switchMap(() =>\n            this._zone.run(() => {\n              // `afterNextRender` always runs outside of the Angular zone, thus we have to re-enter\n              // the Angular zone. This will lead to change detection being called outside of the Angular\n              // zone and the `autocomplete.opened` will also emit outside of the Angular.\n              const wasOpen = this.panelOpen;\n              this._resetActiveItem();\n              this._updatePanelState();\n              this._changeDetectorRef.detectChanges();\n\n              if (this.panelOpen) {\n                this._overlayRef!.updatePosition();\n              }\n\n              if (wasOpen !== this.panelOpen) {\n                // If the `panelOpen` state changed, we need to make sure to emit the `opened` or\n                // `closed` event, because we may not have emitted it. This can happen\n                // - if the users opens the panel and there are no options, but the\n                //   options come in slightly later or as a result of the value changing,\n                // - if the panel is closed after the user entered a string that did not match any\n                //   of the available options,\n                // - if a valid string is entered after an invalid one.\n                if (this.panelOpen) {\n                  this._emitOpened();\n                } else {\n                  this.autocomplete.closed.emit();\n                }\n              }\n\n              return this.panelClosingActions;\n            }),\n          ),\n          // when the first closing event occurs...\n          take(1),\n        )\n        // set the value, close the panel, and complete.\n        .subscribe(event => this._setValueAndClose(event))\n    );\n  }\n\n  /**\n   * Emits the opened event once it's known that the panel will be shown and stores\n   * the state of the trigger right before the opening sequence was finished.\n   */\n  private _emitOpened() {\n    this.autocomplete.opened.emit();\n  }\n\n  /** Destroys the autocomplete suggestion panel. */\n  private _destroyPanel(): void {\n    if (this._overlayRef) {\n      this.closePanel();\n      this._overlayRef.dispose();\n      this._overlayRef = null;\n    }\n  }\n\n  /** Given a value, returns the string that should be shown within the input. */\n  private _getDisplayValue<T>(value: T): T | string {\n    const autocomplete = this.autocomplete;\n    return autocomplete && autocomplete.displayWith ? autocomplete.displayWith(value) : value;\n  }\n\n  private _assignOptionValue(value: any): void {\n    const toDisplay = this._getDisplayValue(value);\n\n    if (value == null) {\n      this._clearPreviousSelectedOption(null, false);\n    }\n\n    // Simply falling back to an empty string if the display value is falsy does not work properly.\n    // The display value can also be the number zero and shouldn't fall back to an empty string.\n    this._updateNativeInputValue(toDisplay != null ? toDisplay : '');\n  }\n\n  private _updateNativeInputValue(value: string): void {\n    // If it's used within a `MatFormField`, we should set it through the property so it can go\n    // through change detection.\n    if (this._formField) {\n      this._formField._control.value = value;\n    } else {\n      this._element.nativeElement.value = value;\n    }\n\n    this._previousValue = value;\n  }\n\n  /**\n   * This method closes the panel, and if a value is specified, also sets the associated\n   * control to that value. It will also mark the control as dirty if this interaction\n   * stemmed from the user.\n   */\n  private _setValueAndClose(event: MatOptionSelectionChange | null): void {\n    const panel = this.autocomplete;\n    const toSelect = event ? event.source : this._pendingAutoselectedOption;\n\n    if (toSelect) {\n      this._clearPreviousSelectedOption(toSelect);\n      this._assignOptionValue(toSelect.value);\n      // TODO(crisbeto): this should wait until the animation is done, otherwise the value\n      // gets reset while the panel is still animating which looks glitchy. It'll likely break\n      // some tests to change it at this point.\n      this._onChange(toSelect.value);\n      panel._emitSelectEvent(toSelect);\n      this._element.nativeElement.focus();\n    } else if (\n      panel.requireSelection &&\n      this._element.nativeElement.value !== this._valueOnAttach\n    ) {\n      this._clearPreviousSelectedOption(null);\n      this._assignOptionValue(null);\n      this._onChange(null);\n    }\n\n    this.closePanel();\n  }\n\n  /**\n   * Clear any previous selected option and emit a selection change event for this option\n   */\n  private _clearPreviousSelectedOption(skip: MatOption | null, emitEvent?: boolean) {\n    // Null checks are necessary here, because the autocomplete\n    // or its options may not have been assigned yet.\n    this.autocomplete?.options?.forEach(option => {\n      if (option !== skip && option.selected) {\n        option.deselect(emitEvent);\n      }\n    });\n  }\n\n  private _openPanelInternal(valueOnAttach = this._element.nativeElement.value) {\n    this._attachOverlay(valueOnAttach);\n    this._floatLabel();\n    // Add aria-owns attribute when the autocomplete becomes visible.\n    if (this._trackedModal) {\n      const panelId = this.autocomplete.id;\n      addAriaReferencedId(this._trackedModal, 'aria-owns', panelId);\n    }\n  }\n\n  private _attachOverlay(valueOnAttach: string): void {\n    if (!this.autocomplete && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw getMatAutocompleteMissingPanelError();\n    }\n\n    let overlayRef = this._overlayRef;\n\n    if (!overlayRef) {\n      this._portal = new TemplatePortal(this.autocomplete.template, this._viewContainerRef, {\n        id: this._formField?.getLabelId(),\n      });\n      overlayRef = this._overlay.create(this._getOverlayConfig());\n      this._overlayRef = overlayRef;\n      this._viewportSubscription = this._viewportRuler.change().subscribe(() => {\n        if (this.panelOpen && overlayRef) {\n          overlayRef.updateSize({width: this._getPanelWidth()});\n        }\n      });\n      // Subscribe to the breakpoint events stream to detect when screen is in\n      // handsetLandscape.\n      this._handsetLandscapeSubscription = this._breakpointObserver\n        .observe(Breakpoints.HandsetLandscape)\n        .subscribe(result => {\n          const isHandsetLandscape = result.matches;\n          // Check if result.matches Breakpoints.HandsetLandscape. Apply HandsetLandscape\n          // settings to prevent overlay cutoff in that breakpoint. Fixes b/284148377\n          if (isHandsetLandscape) {\n            this._positionStrategy\n              .withFlexibleDimensions(true)\n              .withGrowAfterOpen(true)\n              .withViewportMargin(8);\n          } else {\n            this._positionStrategy\n              .withFlexibleDimensions(false)\n              .withGrowAfterOpen(false)\n              .withViewportMargin(0);\n          }\n        });\n    } else {\n      // Update the trigger, panel width and direction, in case anything has changed.\n      this._positionStrategy.setOrigin(this._getConnectedElement());\n      overlayRef.updateSize({width: this._getPanelWidth()});\n    }\n\n    if (overlayRef && !overlayRef.hasAttached()) {\n      overlayRef.attach(this._portal);\n      this._valueOnAttach = valueOnAttach;\n      this._valueOnLastKeydown = null;\n      this._closingActionsSubscription = this._subscribeToClosingActions();\n    }\n\n    const wasOpen = this.panelOpen;\n\n    this.autocomplete._isOpen = this._overlayAttached = true;\n    this.autocomplete._latestOpeningTrigger = this;\n    this.autocomplete._setColor(this._formField?.color);\n    this._updatePanelState();\n    this._applyModalPanelOwnership();\n\n    // We need to do an extra `panelOpen` check in here, because the\n    // autocomplete won't be shown if there are no options.\n    if (this.panelOpen && wasOpen !== this.panelOpen) {\n      this._emitOpened();\n    }\n  }\n\n  /** Handles keyboard events coming from the overlay panel. */\n  private _handlePanelKeydown = (event: KeyboardEvent) => {\n    // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.\n    // See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction\n    if (\n      (event.keyCode === ESCAPE && !hasModifierKey(event)) ||\n      (event.keyCode === UP_ARROW && hasModifierKey(event, 'altKey'))\n    ) {\n      // If the user had typed something in before we autoselected an option, and they decided\n      // to cancel the selection, restore the input value to the one they had typed in.\n      if (this._pendingAutoselectedOption) {\n        this._updateNativeInputValue(this._valueBeforeAutoSelection ?? '');\n        this._pendingAutoselectedOption = null;\n      }\n      this._closeKeyEventStream.next();\n      this._resetActiveItem();\n      // We need to stop propagation, otherwise the event will eventually\n      // reach the input itself and cause the overlay to be reopened.\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  };\n\n  /** Updates the panel's visibility state and any trigger state tied to id. */\n  private _updatePanelState() {\n    this.autocomplete._setVisibility();\n\n    // Note that here we subscribe and unsubscribe based on the panel's visiblity state,\n    // because the act of subscribing will prevent events from reaching other overlays and\n    // we don't want to block the events if there are no options.\n    if (this.panelOpen) {\n      const overlayRef = this._overlayRef!;\n\n      if (!this._keydownSubscription) {\n        // Use the `keydownEvents` in order to take advantage of\n        // the overlay event targeting provided by the CDK overlay.\n        this._keydownSubscription = overlayRef.keydownEvents().subscribe(this._handlePanelKeydown);\n      }\n\n      if (!this._outsideClickSubscription) {\n        // Subscribe to the pointer events stream so that it doesn't get picked up by other overlays.\n        // TODO(crisbeto): we should switch `_getOutsideClickStream` eventually to use this stream,\n        // but the behvior isn't exactly the same and it ends up breaking some internal tests.\n        this._outsideClickSubscription = overlayRef.outsidePointerEvents().subscribe();\n      }\n    } else {\n      this._keydownSubscription?.unsubscribe();\n      this._outsideClickSubscription?.unsubscribe();\n      this._keydownSubscription = this._outsideClickSubscription = null;\n    }\n  }\n\n  private _getOverlayConfig(): OverlayConfig {\n    return new OverlayConfig({\n      positionStrategy: this._getOverlayPosition(),\n      scrollStrategy: this._scrollStrategy(),\n      width: this._getPanelWidth(),\n      direction: this._dir ?? undefined,\n      hasBackdrop: this._defaults?.hasBackdrop,\n      backdropClass: this._defaults?.backdropClass,\n      panelClass: this._defaults?.overlayPanelClass,\n    });\n  }\n\n  private _getOverlayPosition(): PositionStrategy {\n    // Set default Overlay Position\n    const strategy = this._overlay\n      .position()\n      .flexibleConnectedTo(this._getConnectedElement())\n      .withFlexibleDimensions(false)\n      .wi