Method _getOverlayRef

src/material/timepicker/timepicker.ts:352–402

Creates an overlay reference for the timepicker panel.

()

  /** Creates an overlay reference for the timepicker panel. */
  private _getOverlayRef(): OverlayRef {
    if (this._overlayRef) {
      return this._overlayRef;
    }

    const positionStrategy = createFlexibleConnectedPositionStrategy(
      this._injector,
      this._input()!.getOverlayOrigin(),
    )
      .withFlexibleDimensions(false)
      .withPush(false)
      .withTransformOriginOn('.mat-timepicker-panel')
      .withPopoverLocation('inline')
      .withPositions([
        {
          originX: 'start',
          originY: 'bottom',
          overlayX: 'start',
          overlayY: 'top',
        },
        {
          originX: 'start',
          originY: 'top',
          overlayX: 'start',
          overlayY: 'bottom',
          panelClass: 'mat-timepicker-above',
        },
      ]);

    this._overlayRef = createOverlayRef(this._injector, {
      positionStrategy,
      scrollStrategy: this._scrollStrategyFactory(),
      direction: this._dir || 'ltr',
      hasBackdrop: false,
      disableAnimations: this._animationsDisabled,
      panelClass: this.panelClass(),
    });

    this._overlayRef.detachments().subscribe(() => this.close());
    this._overlayRef.keydownEvents().subscribe(event => this._handleKeydown(event));
    this._overlayRef.outsidePointerEvents().subscribe(event => {
      const target = _getEventTarget(event) as HTMLElement;
      const origin = this._input()?.getOverlayOrigin().nativeElement;

      if (target && origin && target !== origin && !origin.contains(target)) {
        this.close();
      }
    });

    return this._overlayRef;
  }

  /** Generates the list of options from which the user can select.. */
  private _generateOptions(): void {