@angular/material/fesm2020/select.mjs.map

Angular Material

{"version":3,"file":"select.mjs","sources":["../../../../../../src/material/select/select-animations.ts","../../../../../../src/material/select/select-errors.ts","../../../../../../src/material/select/select.ts","../../../../../../src/material/select/select.html","../../../../../../src/material/select/select-module.ts","../../../../../../src/material/select/public-api.ts","../../../../../../src/material/select/index.ts","../../../../../../src/material/select/select_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  animate,\n  animateChild,\n  AnimationTriggerMetadata,\n  query,\n  state,\n  style,\n  transition,\n  trigger,\n} from '@angular/animations';\n\n/**\n * The following are all the animations for the mat-select component, with each\n * const containing the metadata for one animation.\n *\n * The values below match the implementation of the AngularJS Material mat-select animation.\n * @docs-private\n */\nexport const matSelectAnimations: {\n  readonly transformPanelWrap: AnimationTriggerMetadata;\n  readonly transformPanel: AnimationTriggerMetadata;\n} = {\n  /**\n   * This animation ensures the select's overlay panel animation (transformPanel) is called when\n   * closing the select.\n   * This is needed due to https://github.com/angular/angular/issues/23302\n   */\n  transformPanelWrap: trigger('transformPanelWrap', [\n    transition('* => void', query('@transformPanel', [animateChild()], {optional: true})),\n  ]),\n\n  /**\n   * This animation transforms the select's overlay panel on and off the page.\n   *\n   * When the panel is attached to the DOM, it expands its width by the amount of padding, scales it\n   * up to 100% on the Y axis, fades in its border, and translates slightly up and to the\n   * side to ensure the option text correctly overlaps the trigger text.\n   *\n   * When the panel is removed from the DOM, it simply fades out linearly.\n   */\n  transformPanel: trigger('transformPanel', [\n    state(\n      'void',\n      style({\n        transform: 'scaleY(0.8)',\n        minWidth: '100%',\n        opacity: 0,\n      }),\n    ),\n    state(\n      'showing',\n      style({\n        opacity: 1,\n        minWidth: 'calc(100% + 32px)', // 32px = 2 * 16px padding\n        transform: 'scaleY(1)',\n      }),\n    ),\n    state(\n      'showing-multiple',\n      style({\n        opacity: 1,\n        minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right\n        transform: 'scaleY(1)',\n      }),\n    ),\n    transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')),\n    transition('* => void', animate('100ms 25ms linear', style({opacity: 0}))),\n  ]),\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\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.io/license\n */\n\nimport {ActiveDescendantKeyManager, LiveAnnouncer} from '@angular/cdk/a11y';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {\n  BooleanInput,\n  coerceBooleanProperty,\n  coerceNumberProperty,\n  NumberInput,\n} from '@angular/cdk/coercion';\nimport {SelectionModel} from '@angular/cdk/collections';\nimport {\n  A,\n  DOWN_ARROW,\n  ENTER,\n  hasModifierKey,\n  LEFT_ARROW,\n  RIGHT_ARROW,\n  SPACE,\n  UP_ARROW,\n} from '@angular/cdk/keycodes';\nimport {\n  CdkConnectedOverlay,\n  ConnectedPosition,\n  Overlay,\n  ScrollStrategy,\n} from '@angular/cdk/overlay';\nimport {ViewportRuler} from '@angular/cdk/scrolling';\nimport {\n  AfterContentInit,\n  Attribute,\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  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  QueryList,\n  Self,\n  SimpleChanges,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormGroupDirective,\n  NgControl,\n  NgForm,\n  Validators,\n} from '@angular/forms';\nimport {\n  _countGroupLabelsBeforeOption,\n  _getOptionScrollPosition,\n  CanDisable,\n  CanDisableRipple,\n  CanUpdateErrorState,\n  ErrorStateMatcher,\n  HasTabIndex,\n  MAT_OPTGROUP,\n  MAT_OPTION_PARENT_COMPONENT,\n  MatOptgroup,\n  MatOption,\n  MatOptionSelectionChange,\n  mixinDisabled,\n  mixinDisableRipple,\n  mixinErrorState,\n  mixinTabIndex,\n  _MatOptionBase,\n} from '@angular/material/core';\nimport {MAT_FORM_FIELD, MatFormField, MatFormFieldControl} from '@angular/material/form-field';\nimport {defer, merge, Observable, Subject} from 'rxjs';\nimport {\n  distinctUntilChanged,\n  filter,\n  map,\n  startWith,\n  switchMap,\n  take,\n  takeUntil,\n} from 'rxjs/operators';\nimport {matSelectAnimations} from './select-animations';\nimport {\n  getMatSelectDynamicMultipleError,\n  getMatSelectNonArrayValueError,\n  getMatSelectNonFunctionValueError,\n} from './select-errors';\n\nlet nextUniqueId = 0;\n\n/**\n * The following style constants are necessary to save here in order\n * to properly calculate the alignment of the selected option over\n * the trigger element.\n */\n\n/** The max height of the select's overlay panel. */\nexport const SELECT_PANEL_MAX_HEIGHT = 256;\n\n/** The panel's padding on the x-axis. */\nexport const SELECT_PANEL_PADDING_X = 16;\n\n/** The panel's x axis padding if it is indented (e.g. there is an option group). */\nexport const SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;\n\n/** The height of the select items in `em` units. */\nexport const SELECT_ITEM_HEIGHT_EM = 3;\n\n// TODO(josephperrott): Revert to a constant after 2018 spec updates are fully merged.\n/**\n * Distance between the panel edge and the option text in\n * multi-selection mode.\n *\n * Calculated as:\n * (SELECT_PANEL_PADDING_X * 1.5) + 16 = 40\n * The padding is multiplied by 1.5 because the checkbox's margin is half the padding.\n * The checkbox width is 16px.\n */\nexport const SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + 16;\n\n/**\n * The select panel will only \"fit\" inside the viewport if it is positioned at\n * this value or more away from the viewport boundary.\n */\nexport const SELECT_PANEL_VIEWPORT_PADDING = 8;\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\n/** @docs-private */\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\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/** @docs-private */\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/** Change event object that is emitted when the select value has changed. */\nexport class MatSelectChange {\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: any,\n  ) {}\n}\n\n// Boilerplate for applying mixins to MatSelect.\n/** @docs-private */\nconst _MatSelectMixinBase = mixinDisableRipple(\n  mixinTabIndex(\n    mixinDisabled(\n      mixinErrorState(\n        class {\n          constructor(\n            public _elementRef: ElementRef,\n            public _defaultErrorStateMatcher: ErrorStateMatcher,\n            public _parentForm: NgForm,\n            public _parentFormGroup: FormGroupDirective,\n            public ngControl: NgControl,\n          ) {}\n        },\n      ),\n    ),\n  ),\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/**\n * Allows the user to customize the trigger that is displayed when the select has a value.\n */\n@Directive({\n  selector: 'mat-select-trigger',\n  providers: [{provide: MAT_SELECT_TRIGGER, useExisting: MatSelectTrigger}],\n})\nexport class MatSelectTrigger {}\n\n/** Base class with all of the `MatSelect` functionality. */\n@Directive()\nexport abstract class _MatSelectBase<C>\n  extends _MatSelectMixinBase\n  implements\n    AfterContentInit,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    DoCheck,\n    ControlValueAccessor,\n    CanDisable,\n    HasTabIndex,\n    MatFormFieldControl<any>,\n    CanUpdateErrorState,\n    CanDisableRipple\n{\n  /** All of the defined select options. */\n  abstract options: QueryList<_MatOptionBase>;\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  abstract optionGroups: QueryList<MatOptgroup>;\n\n  /** User-supplied override of the trigger element. */\n  abstract customTrigger: {};\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  abstract _positions: ConnectedPosition[];\n\n  /** Scrolls a particular option into the view. */\n  protected abstract _scrollOptionIntoView(index: number): void;\n\n  /** Called when the panel has been opened and the overlay has settled on its final position. */\n  protected abstract _positioningSettled(): void;\n\n  /** Creates a change event object that should be emitted by the select. */\n  protected abstract _getChangeEvent(value: any): C;\n\n  /** Factory function used to create a scroll strategy for this select. */\n  private _scrollStrategyFactory: () => ScrollStrategy;\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 = `mat-select-${nextUniqueId++}`;\n\n  /** Current `ariar-labelledby` value for the select trigger. */\n  private _triggerAriaLabelledBy: string | null = null;\n\n  /** Emits whenever the component is destroyed. */\n  protected readonly _destroy = new Subject<void>();\n\n  /** The aria-describedby attribute on the select for improved a11y. */\n  _ariaDescribedby: 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  /** `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 = `mat-select-value-${nextUniqueId++}`;\n\n  /** Emits when the panel element is finished transforming in. */\n  readonly _panelDoneAnimatingStream = new Subject<string>();\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  /** 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()\n  get required(): boolean {\n    return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;\n  }\n  set required(value: BooleanInput) {\n    this._required = coerceBooleanProperty(value);\n    this.stateChanges.next();\n  }\n  private _required: boolean | undefined;\n\n  /** Whether the user should be allowed to select multiple options. */\n  @Input()\n  get multiple(): boolean {\n    return this._multiple;\n  }\n  set multiple(value: BooleanInput) {\n    if (this._selectionModel && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw getMatSelectDynamicMultipleError();\n    }\n\n    this._multiple = coerceBooleanProperty(value);\n  }\n  private _multiple: boolean = false;\n\n  /** Whether to center the active option over the trigger. */\n  @Input()\n  get disableOptionCentering(): boolean {\n    return this._disableOptionCentering;\n  }\n  set disableOptionCentering(value: BooleanInput) {\n    this._disableOptionCentering = coerceBooleanProperty(value);\n  }\n  private _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    // 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    }\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() override errorStateMatcher: ErrorStateMatcher;\n\n  /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */\n  @Input()\n  get typeaheadDebounceInterval(): number {\n    return this._typeaheadDebounceInterval;\n  }\n  set typeaheadDebounceInterval(value: NumberInput) {\n    this._typeaheadDebounceInterval = coerceNumberProperty(value);\n  }\n  private _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  /** 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._ngZone.onStable.pipe(\n      take(1),\n      switchMap(() => this.optionSelectionChanges),\n    );\n  }) as Observable<MatOptionSelectionChange>;\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: EventEmitter<C> = new EventEmitter<C>();\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(\n    protected _viewportRuler: ViewportRuler,\n    protected _changeDetectorRef: ChangeDetectorRef,\n    protected _ngZone: NgZone,\n    _defaultErrorStateMatcher: ErrorStateMatcher,\n    elementRef: ElementRef,\n    @Optional() private _dir: Directionality,\n    @Optional() _parentForm: NgForm,\n    @Optional() _parentFormGroup: FormGroupDirective,\n    @Optional() @Inject(MAT_FORM_FIELD) protected _parentFormField: MatFormField,\n    @Self() @Optional() ngControl: NgControl,\n    @Attribute('tabindex') tabIndex: string,\n    @Inject(MAT_SELECT_SCROLL_STRATEGY) scrollStrategyFactory: any,\n    private _liveAnnouncer: LiveAnnouncer,\n    @Optional() @Inject(MAT_SELECT_CONFIG) private _defaultOptions?: MatSelectConfig,\n  ) {\n    super(elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);\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 (_defaultOptions?.typeaheadDebounceInterval != null) {\n      this._typeaheadDebounceInterval = _defaultOptions.typeaheadDebounceInterval;\n    }\n\n    this._scrollStrategyFactory = scrollStrategyFactory;\n    this._scrollStrategy = this._scrollStrategyFactory();\n    this.tabIndex = 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\n    // We need `distinctUntilChanged` here, because some browsers will\n    // fire the animation end event twice for the same animation. See:\n    // https://github.com/angular/angular/issues/24084\n    this._panelDoneAnimatingStream\n      .pipe(distinctUntilChanged(), takeUntil(this._destroy))\n      .subscribe(() => this._panelDoneAnimating(this.panelOpen));\n  }\n\n  ngAfterContentInit() {\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\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 (this.ngControl) {\n      this.updateErrorState();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    // Updating the disabled state is handled by `mixinDisabled`, 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']) {\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._destroy.next();\n    this._destroy.complete();\n    this.stateChanges.complete();\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      this._panelOpen = true;\n      this._keyManager.withHorizontalOrientation(null);\n      this._highlightCorrectOption();\n      this._changeDetectorRef.markForCheck();\n    }\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._keyManager.withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr');\n      this._changeDetectorRef.markForCheck();\n      this._onTouched();\n    }\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.value = 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  /** 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  _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\n    if (!this.disabled && !this.panelOpen) {\n      this._onTouched();\n      this._changeDetectorRef.markForCheck();\n      this.stateChanges.next();\n    }\n  }\n\n  /**\n   * Callback that is invoked when the overlay panel has been attached.\n   */\n  _onAttached(): void {\n    this._overlayDir.positionChange.pipe(take(1)).subscribe(() => {\n      this._changeDetectorRef.detectChanges();\n      this._positioningSettled();\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      this._setSelectionByValue(this.ngControl ? this.ngControl.value : 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._selectionModel.selected.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._selectValue(currentValue));\n      this._sortValues();\n    } else {\n      const correspondingOption = this._selectValue(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 _selectValue(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 option.value != null && this._compareWith(option.value, value);\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  /** 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      .withAllowedModifierKeys(['shiftKey']);\n\n    this._keyManager.tabOut.pipe(takeUntil(this._destroy)).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.pipe(takeUntil(this._destroy)).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        this._changeDetectorRef.markForCheck();\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 (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 = null;\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 item instead.\n   */\n  private _highlightCorrectOption(): void {\n    if (this._keyManager) {\n      if (this.empty) {\n        this._keyManager.setFirstItemActive();\n      } else {\n        this._keyManager.setActiveItem(this._selectionModel.selected[0]);\n      }\n    }\n  }\n\n  /** Whether the panel is allowed to open. */\n  protected _canOpen(): boolean {\n    return !this._panelOpen && !this.disabled && this.options?.length > 0;\n  }\n\n  /** Focuses the select element. */\n  focus(options?: FocusOptions): void {\n    this._elementRef.nativeElement.focus(options);\n  }\n\n  /** Gets the aria-labelledby for the select panel. */\n  _getPanelAriaLabelledby(): string | null {\n    if (this.ariaLabel) {\n      return null;\n    }\n\n    const labelId = this._parentFormField?.getLabelId();\n    const labelExpression = labelId ? labelId + ' ' : '';\n    return this.ariaLabelledby ? labelExpression + this.ariaLabelledby : labelId;\n  }\n\n  /** Determines the `aria-activedescendant` to be set on the host. */\n  _getAriaActiveDescendant(): string | null {\n    if (this.panelOpen && this._keyManager && this._keyManager.activeItem) {\n      return this._keyManager.activeItem.id;\n    }\n\n    return null;\n  }\n\n  /** Gets the aria-labelledby of the select component trigger. */\n  private _getTriggerAriaLabelledby(): string | null {\n    if (this.ariaLabel) {\n      return null;\n    }\n\n    const labelId = this._parentFormField?.getLabelId();\n    let value = (labelId ? labelId + ' ' : '') + this._valueId;\n\n    if (this.ariaLabelledby) {\n      value += ' ' + this.ariaLabelledby;\n    }\n\n    return value;\n  }\n\n  /** Called when the overlay panel is done animating. */\n  protected _panelDoneAnimating(isOpen: boolean) {\n    this.openedChange.emit(isOpen);\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  setDescribedByIds(ids: string[]) {\n    this._ariaDescribedby = ids.join(' ');\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  onContainerClick() {\n    this.focus();\n    this.open();\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.\n   * @docs-private\n   */\n  get shouldLabelFloat(): boolean {\n    return this._panelOpen || !this.empty || (this._focused && !!this._placeholder);\n  }\n}\n\n@Component({\n  selector: 'mat-select',\n  exportAs: 'matSelect',\n  templateUrl: 'select.html',\n  styleUrls: ['select.css'],\n  inputs: ['disabled', 'disableRipple', 'tabIndex'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'role': 'combobox',\n    'aria-autocomplete': 'none',\n    // TODO(crisbeto): the value for aria-haspopup should be `listbox`, but currently it's difficult\n    // to sync into Google, because of an outdated automated a11y check which flags it as an invalid\n    // value. At some point we should try to switch it back to being `listbox`.\n    'aria-haspopup': 'true',\n    'class': 'mat-select',\n    '[attr.id]': 'id',\n    '[attr.tabindex]': '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-describedby]': '_ariaDescribedby || null',\n    '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',\n    '[class.mat-select-disabled]': 'disabled',\n    '[class.mat-select-invalid]': 'errorState',\n    '[class.mat-select-required]': 'required',\n    '[class.mat-select-empty]': 'empty',\n    '[class.mat-select-multiple]': 'multiple',\n    '(keydown)': '_handleKeydown($event)',\n    '(focus)': '_onFocus()',\n    '(blur)': '_onBlur()',\n  },\n  animations: [matSelectAnimations.transformPanelWrap, matSelectAnimations.transformPanel],\n  providers: [\n    {provide: MatFormFieldControl, useExisting: MatSelect},\n    {provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect},\n  ],\n})\nexport class MatSelect extends _MatSelectBase<MatSelectChange> implements OnInit {\n  /** The scroll position of the overlay panel, calculated to center the selected option. */\n  private _scrollTop = 0;\n\n  /** The last measured value for the trigger's client bounding rect. */\n  _triggerRect: ClientRect;\n\n  /** The cached font-size of the trigger element. */\n  _triggerFontSize = 0;\n\n  /** The value of the select panel's transform-origin property. */\n  _transformOrigin: string = 'top';\n\n  /**\n   * The y-offset of the overlay panel in relation to the trigger's top start corner.\n   * This must be adjusted to align the selected option text over the trigger text.\n   * when the panel opens. Will change based on the y-position of the selected option.\n   */\n  _offsetY = 0;\n\n  @ContentChildren(MatOption, {descendants: true}) options: QueryList<MatOption>;\n\n  @ContentChildren(MAT_OPTGROUP, {descendants: true}) optionGroups: QueryList<MatOptgroup>;\n\n  @ContentChild(MAT_SELECT_TRIGGER) customTrigger: MatSelectTrigger;\n\n  _positions: ConnectedPosition[] = [\n    {\n      originX: 'start',\n      originY: 'top',\n      overlayX: 'start',\n      overlayY: 'top',\n    },\n    {\n      originX: 'start',\n      originY: 'bottom',\n      overlayX: 'start',\n      overlayY: 'bottom',\n    },\n  ];\n\n  /**\n   * Calculates the scroll position of the select's overlay panel.\n   *\n   * Attempts to center the selected option in the panel. If the option is\n   * too high or too low in the panel to be scrolled to the center, it clamps the\n   * scroll position to the min or max scroll positions respectively.\n   */\n  _calculateOverlayScroll(selectedIndex: number, scrollBuffer: number, maxScroll: number): number {\n    const itemHeight = this._getItemHeight();\n    const optionOffsetFromScrollTop = itemHeight * selectedIndex;\n    const halfOptionHeight = itemHeight / 2;\n\n    // Starts at the optionOffsetFromScrollTop, which scrolls the option to the top of the\n    // scroll container, then subtracts the scroll buffer to scroll the option down to\n    // the center of the overlay panel. Half the option height must be re-added to the\n    // scrollTop so the option is centered based on its middle, not its top edge.\n    const optimalScrollPosition = optionOffsetFromScrollTop - scrollBuffer + halfOptionHeight;\n    return Math.min(Math.max(0, optimalScrollPosition), maxScroll);\n  }\n\n  override ngOnInit() {\n    super.ngOnInit();\n    this._viewportRuler\n      .change()\n      .pipe(takeUntil(this._destroy))\n      .subscribe(() => {\n        if (this.panelOpen) {\n          this._triggerRect = this.trigger.nativeElement.getBoundingClientRect();\n          this._changeDetectorRef.markForCheck();\n        }\n      });\n  }\n\n  override open(): void {\n    if (super._canOpen()) {\n      super.open();\n      this._triggerRect = this.trigger.nativeElement.getBoundingClientRect();\n      // Note: The computed font-size will be a string pixel value (e.g. \"16px\").\n      // `parseInt` ignores the trailing 'px' and converts this to a number.\n      this._triggerFontSize = parseInt(\n        getComputedStyle(this.trigger.nativeElement).fontSize || '0',\n      );\n      this._calculateOverlayPosition();\n\n      // Set the font size on the panel element once it exists.\n      this._ngZone.onStable.pipe(take(1)).subscribe(() => {\n        if (\n          this._triggerFontSize &&\n          this._overlayDir.overlayRef &&\n          this._overlayDir.overlayRef.overlayElement\n        ) {\n          this._overlayDir.overlayRef.overlayElement.style.fontSize = `${this._triggerFontSize}px`;\n        }\n      });\n    }\n  }\n\n  /** Scrolls the active option into view. */\n  protected _scrollOptionIntoView(index: number): void {\n    const labelCount = _countGroupLabelsBeforeOption(index, this.options, this.optionGroups);\n    const itemHeight = this._getItemHeight();\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      this.panel.nativeElement.scrollTop = 0;\n    } else {\n      this.panel.nativeElement.scrollTop = _getOptionScrollPosition(\n        (index + labelCount) * itemHeight,\n        itemHeight,\n        this.panel.nativeElement.scrollTop,\n        SELECT_PANEL_MAX_HEIGHT,\n      );\n    }\n  }\n\n  protected _positioningSettled() {\n    this._calculateOverlayOffsetX();\n    this.panel.nativeElement.scrollTop = this._scrollTop;\n  }\n\n  protected override _panelDoneAnimating(isOpen: boolean) {\n    if (this.panelOpen) {\n      this._scrollTop = 0;\n    } else {\n      this._overlayDir.offsetX = 0;\n      this._changeDetectorRef.markForCheck();\n    }\n\n    super._panelDoneAnimating(isOpen);\n  }\n\n  protected _getChangeEvent(value: any) {\n    return new MatSelectChange(this, value);\n  }\n\n  /**\n   * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.\n   * This must be adjusted to align the selected option text over the trigger text when\n   * the panel opens. Will change based on LTR or RTL text direction. Note that the offset\n   * can't be calculated until the panel has been attached, because we need to know the\n   * content width in order to constrain the panel within the viewport.\n   */\n  private _calculateOverlayOffsetX(): void {\n    const overlayRect = this._overlayDir.overlayRef.overlayElement.getBoundingClientRect();\n    const viewportSize = this._viewportRuler.getViewportSize();\n    const isRtl = this._isRtl();\n    const paddingWidth = this.multiple\n      ? SELECT_MULTIPLE_PANEL_PADDING_X + SELECT_PANEL_PADDING_X\n      : SELECT_PANEL_PADDING_X * 2;\n    let offsetX: number;\n\n    // Adjust the offset, depending on the option padding.\n    if (this.multiple) {\n      offsetX = SELECT_MULTIPLE_PANEL_PADDING_X;\n    } else if (this.disableOptionCentering) {\n      offsetX = SELECT_PANEL_PADDING_X;\n    } else {\n      let selected = this._selectionModel.selected[0] || this.options.first;\n      offsetX = selected && selected.group ? SELECT_PANEL_INDENT_PADDING_X : SELECT_PANEL_PADDING_X;\n    }\n\n    // Invert the offset in LTR.\n    if (!isRtl) {\n      offsetX *= -1;\n    }\n\n    // Determine how much the select overflows on each side.\n    const leftOverflow = 0 - (overlayRect.left + offsetX - (isRtl ? paddingWidth : 0));\n    const rightOverflow =\n      overlayRect.right + offsetX - viewportSize.width + (isRtl ? 0 : paddingWidth);\n\n    // If the element overflows on either side, reduce the offset to allow it to fit.\n    if (leftOverflow > 0) {\n      offsetX += leftOverflow + SELECT_PANEL_VIEWPORT_PADDING;\n    } else if (rightOverflow > 0) {\n      offsetX -= rightOverflow + SELECT_PANEL_VIEWPORT_PADDING;\n    }\n\n    // Set the offset directly in order to avoid having to go through change detection and\n    // potentially triggering \"changed after it was checked\" errors. Round the value to avoid\n    // blurry content in some browsers.\n    this._overlayDir.offsetX = Math.round(offsetX);\n    this._overlayDir.overlayRef.updatePosition();\n  }\n\n  /**\n   * Calculates the y-offset of the select's overlay panel in relation to the\n   * top start corner of the trigger. It has to be adjusted in order for the\n