@angular/cdk/fesm2022/overlay-module-1d184db0.mjs.map

Angular Material Component Development Kit

{"version":3,"file":"overlay-module-1d184db0.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/scroll/block-scroll-strategy.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/scroll/scroll-strategy.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/scroll/close-scroll-strategy.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/scroll/noop-scroll-strategy.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/position/scroll-clip.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/scroll/reposition-scroll-strategy.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/scroll/scroll-strategy-options.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/overlay-config.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/position/connected-position.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/dispatchers/base-overlay-dispatcher.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/overlay-container.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/backdrop-ref.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/overlay-ref.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/position/flexible-connected-position-strategy.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/position/global-position-strategy.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/position/overlay-position-builder.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/overlay.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/overlay-directives.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/overlay/overlay-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 {ScrollStrategy} from './scroll-strategy';\nimport {ViewportRuler} from '../../scrolling';\nimport {coerceCssPixelValue} from '../../coercion';\nimport {supportsScrollBehavior} from '../../platform';\n\nconst scrollBehaviorSupported = supportsScrollBehavior();\n\n/**\n * Strategy that will prevent the user from scrolling while the overlay is visible.\n */\nexport class BlockScrollStrategy implements ScrollStrategy {\n  private _previousHTMLStyles = {top: '', left: ''};\n  private _previousScrollPosition: {top: number; left: number};\n  private _isEnabled = false;\n  private _document: Document;\n\n  constructor(\n    private _viewportRuler: ViewportRuler,\n    document: any,\n  ) {\n    this._document = document;\n  }\n\n  /** Attaches this scroll strategy to an overlay. */\n  attach() {}\n\n  /** Blocks page-level scroll while the attached overlay is open. */\n  enable() {\n    if (this._canBeEnabled()) {\n      const root = this._document.documentElement!;\n\n      this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();\n\n      // Cache the previous inline styles in case the user had set them.\n      this._previousHTMLStyles.left = root.style.left || '';\n      this._previousHTMLStyles.top = root.style.top || '';\n\n      // Note: we're using the `html` node, instead of the `body`, because the `body` may\n      // have the user agent margin, whereas the `html` is guaranteed not to have one.\n      root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);\n      root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);\n      root.classList.add('cdk-global-scrollblock');\n      this._isEnabled = true;\n    }\n  }\n\n  /** Unblocks page-level scroll while the attached overlay is open. */\n  disable() {\n    if (this._isEnabled) {\n      const html = this._document.documentElement!;\n      const body = this._document.body!;\n      const htmlStyle = html.style;\n      const bodyStyle = body.style;\n      const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';\n      const previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';\n\n      this._isEnabled = false;\n\n      htmlStyle.left = this._previousHTMLStyles.left;\n      htmlStyle.top = this._previousHTMLStyles.top;\n      html.classList.remove('cdk-global-scrollblock');\n\n      // Disable user-defined smooth scrolling temporarily while we restore the scroll position.\n      // See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior\n      // Note that we don't mutate the property if the browser doesn't support `scroll-behavior`,\n      // because it can throw off feature detections in `supportsScrollBehavior` which\n      // checks for `'scrollBehavior' in documentElement.style`.\n      if (scrollBehaviorSupported) {\n        htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';\n      }\n\n      window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);\n\n      if (scrollBehaviorSupported) {\n        htmlStyle.scrollBehavior = previousHtmlScrollBehavior;\n        bodyStyle.scrollBehavior = previousBodyScrollBehavior;\n      }\n    }\n  }\n\n  private _canBeEnabled(): boolean {\n    // Since the scroll strategies can't be singletons, we have to use a global CSS class\n    // (`cdk-global-scrollblock`) to make sure that we don't try to disable global\n    // scrolling multiple times.\n    const html = this._document.documentElement!;\n\n    if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {\n      return false;\n    }\n\n    const body = this._document.body;\n    const viewport = this._viewportRuler.getViewportSize();\n    return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width;\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.dev/license\n */\n\nimport type {OverlayRef} from '../overlay-ref';\n\n/**\n * Describes a strategy that will be used by an overlay to handle scroll events while it is open.\n */\nexport interface ScrollStrategy {\n  /** Enable this scroll strategy (called when the attached overlay is attached to a portal). */\n  enable: () => void;\n\n  /** Disable this scroll strategy (called when the attached overlay is detached from a portal). */\n  disable: () => void;\n\n  /** Attaches this `ScrollStrategy` to an overlay. */\n  attach: (overlayRef: OverlayRef) => void;\n\n  /** Detaches the scroll strategy from the current overlay. */\n  detach?: () => void;\n}\n\n/**\n * Returns an error to be thrown when attempting to attach an already-attached scroll strategy.\n */\nexport function getMatScrollStrategyAlreadyAttachedError(): Error {\n  return Error(`Scroll strategy has already been attached.`);\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 */\nimport {NgZone} from '@angular/core';\nimport {ScrollStrategy, getMatScrollStrategyAlreadyAttachedError} from './scroll-strategy';\nimport {Subscription} from 'rxjs';\nimport {ScrollDispatcher, ViewportRuler} from '../../scrolling';\nimport {filter} from 'rxjs/operators';\nimport type {OverlayRef} from '../overlay-ref';\n\n/**\n * Config options for the CloseScrollStrategy.\n */\nexport interface CloseScrollStrategyConfig {\n  /** Amount of pixels the user has to scroll before the overlay is closed. */\n  threshold?: number;\n}\n\n/**\n * Strategy that will close the overlay as soon as the user starts scrolling.\n */\nexport class CloseScrollStrategy implements ScrollStrategy {\n  private _scrollSubscription: Subscription | null = null;\n  private _overlayRef: OverlayRef;\n  private _initialScrollPosition: number;\n\n  constructor(\n    private _scrollDispatcher: ScrollDispatcher,\n    private _ngZone: NgZone,\n    private _viewportRuler: ViewportRuler,\n    private _config?: CloseScrollStrategyConfig,\n  ) {}\n\n  /** Attaches this scroll strategy to an overlay. */\n  attach(overlayRef: OverlayRef) {\n    if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw getMatScrollStrategyAlreadyAttachedError();\n    }\n\n    this._overlayRef = overlayRef;\n  }\n\n  /** Enables the closing of the attached overlay on scroll. */\n  enable() {\n    if (this._scrollSubscription) {\n      return;\n    }\n\n    const stream = this._scrollDispatcher.scrolled(0).pipe(\n      filter(scrollable => {\n        return (\n          !scrollable ||\n          !this._overlayRef.overlayElement.contains(scrollable.getElementRef().nativeElement)\n        );\n      }),\n    );\n\n    if (this._config && this._config.threshold && this._config.threshold > 1) {\n      this._initialScrollPosition = this._viewportRuler.getViewportScrollPosition().top;\n\n      this._scrollSubscription = stream.subscribe(() => {\n        const scrollPosition = this._viewportRuler.getViewportScrollPosition().top;\n\n        if (Math.abs(scrollPosition - this._initialScrollPosition) > this._config!.threshold!) {\n          this._detach();\n        } else {\n          this._overlayRef.updatePosition();\n        }\n      });\n    } else {\n      this._scrollSubscription = stream.subscribe(this._detach);\n    }\n  }\n\n  /** Disables the closing the attached overlay on scroll. */\n  disable() {\n    if (this._scrollSubscription) {\n      this._scrollSubscription.unsubscribe();\n      this._scrollSubscription = null;\n    }\n  }\n\n  detach() {\n    this.disable();\n    this._overlayRef = null!;\n  }\n\n  /** Detaches the overlay ref and disables the scroll strategy. */\n  private _detach = () => {\n    this.disable();\n\n    if (this._overlayRef.hasAttached()) {\n      this._ngZone.run(() => this._overlayRef.detach());\n    }\n  };\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {ScrollStrategy} from './scroll-strategy';\n\n/** Scroll strategy that doesn't do anything. */\nexport class NoopScrollStrategy implements ScrollStrategy {\n  /** Does nothing, as this scroll strategy is a no-op. */\n  enable() {}\n  /** Does nothing, as this scroll strategy is a no-op. */\n  disable() {}\n  /** Does nothing, as this scroll strategy is a no-op. */\n  attach() {}\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\n// TODO(jelbourn): move this to live with the rest of the scrolling code\n// TODO(jelbourn): someday replace this with IntersectionObservers\n\n/** Equivalent of `DOMRect` without some of the properties we don't care about. */\ntype Dimensions = Omit<DOMRect, 'x' | 'y' | 'toJSON'>;\n\n/**\n * Gets whether an element is scrolled outside of view by any of its parent scrolling containers.\n * @param element Dimensions of the element (from getBoundingClientRect)\n * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)\n * @returns Whether the element is scrolled out of view\n * @docs-private\n */\nexport function isElementScrolledOutsideView(element: Dimensions, scrollContainers: Dimensions[]) {\n  return scrollContainers.some(containerBounds => {\n    const outsideAbove = element.bottom < containerBounds.top;\n    const outsideBelow = element.top > containerBounds.bottom;\n    const outsideLeft = element.right < containerBounds.left;\n    const outsideRight = element.left > containerBounds.right;\n\n    return outsideAbove || outsideBelow || outsideLeft || outsideRight;\n  });\n}\n\n/**\n * Gets whether an element is clipped by any of its scrolling containers.\n * @param element Dimensions of the element (from getBoundingClientRect)\n * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)\n * @returns Whether the element is clipped\n * @docs-private\n */\nexport function isElementClippedByScrolling(element: Dimensions, scrollContainers: Dimensions[]) {\n  return scrollContainers.some(scrollContainerRect => {\n    const clippedAbove = element.top < scrollContainerRect.top;\n    const clippedBelow = element.bottom > scrollContainerRect.bottom;\n    const clippedLeft = element.left < scrollContainerRect.left;\n    const clippedRight = element.right > scrollContainerRect.right;\n\n    return clippedAbove || clippedBelow || clippedLeft || clippedRight;\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.dev/license\n */\n\nimport {NgZone} from '@angular/core';\nimport {Subscription} from 'rxjs';\nimport {ScrollStrategy, getMatScrollStrategyAlreadyAttachedError} from './scroll-strategy';\nimport {ScrollDispatcher, ViewportRuler} from '../../scrolling';\nimport {isElementScrolledOutsideView} from '../position/scroll-clip';\nimport type {OverlayRef} from '../overlay-ref';\n\n/**\n * Config options for the RepositionScrollStrategy.\n */\nexport interface RepositionScrollStrategyConfig {\n  /** Time in milliseconds to throttle the scroll events. */\n  scrollThrottle?: number;\n\n  /** Whether to close the overlay once the user has scrolled away completely. */\n  autoClose?: boolean;\n}\n\n/**\n * Strategy that will update the element position as the user is scrolling.\n */\nexport class RepositionScrollStrategy implements ScrollStrategy {\n  private _scrollSubscription: Subscription | null = null;\n  private _overlayRef: OverlayRef;\n\n  constructor(\n    private _scrollDispatcher: ScrollDispatcher,\n    private _viewportRuler: ViewportRuler,\n    private _ngZone: NgZone,\n    private _config?: RepositionScrollStrategyConfig,\n  ) {}\n\n  /** Attaches this scroll strategy to an overlay. */\n  attach(overlayRef: OverlayRef) {\n    if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw getMatScrollStrategyAlreadyAttachedError();\n    }\n\n    this._overlayRef = overlayRef;\n  }\n\n  /** Enables repositioning of the attached overlay on scroll. */\n  enable() {\n    if (!this._scrollSubscription) {\n      const throttle = this._config ? this._config.scrollThrottle : 0;\n\n      this._scrollSubscription = this._scrollDispatcher.scrolled(throttle).subscribe(() => {\n        this._overlayRef.updatePosition();\n\n        // TODO(crisbeto): make `close` on by default once all components can handle it.\n        if (this._config && this._config.autoClose) {\n          const overlayRect = this._overlayRef.overlayElement.getBoundingClientRect();\n          const {width, height} = this._viewportRuler.getViewportSize();\n\n          // TODO(crisbeto): include all ancestor scroll containers here once\n          // we have a way of exposing the trigger element to the scroll strategy.\n          const parentRects = [{width, height, bottom: height, right: width, top: 0, left: 0}];\n\n          if (isElementScrolledOutsideView(overlayRect, parentRects)) {\n            this.disable();\n            this._ngZone.run(() => this._overlayRef.detach());\n          }\n        }\n      });\n    }\n  }\n\n  /** Disables repositioning of the attached overlay on scroll. */\n  disable() {\n    if (this._scrollSubscription) {\n      this._scrollSubscription.unsubscribe();\n      this._scrollSubscription = null;\n    }\n  }\n\n  detach() {\n    this.disable();\n    this._overlayRef = null!;\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.dev/license\n */\n\nimport {ScrollDispatcher, ViewportRuler} from '../../scrolling';\nimport {DOCUMENT} from '@angular/common';\nimport {Injectable, NgZone, inject} from '@angular/core';\nimport {BlockScrollStrategy} from './block-scroll-strategy';\nimport {CloseScrollStrategy, CloseScrollStrategyConfig} from './close-scroll-strategy';\nimport {NoopScrollStrategy} from './noop-scroll-strategy';\nimport {\n  RepositionScrollStrategy,\n  RepositionScrollStrategyConfig,\n} from './reposition-scroll-strategy';\n\n/**\n * Options for how an overlay will handle scrolling.\n *\n * Users can provide a custom value for `ScrollStrategyOptions` to replace the default\n * behaviors. This class primarily acts as a factory for ScrollStrategy instances.\n */\n@Injectable({providedIn: 'root'})\nexport class ScrollStrategyOptions {\n  private _scrollDispatcher = inject(ScrollDispatcher);\n  private _viewportRuler = inject(ViewportRuler);\n  private _ngZone = inject(NgZone);\n\n  private _document = inject(DOCUMENT);\n\n  constructor(...args: unknown[]);\n  constructor() {}\n\n  /** Do nothing on scroll. */\n  noop = () => new NoopScrollStrategy();\n\n  /**\n   * Close the overlay as soon as the user scrolls.\n   * @param config Configuration to be used inside the scroll strategy.\n   */\n  close = (config?: CloseScrollStrategyConfig) =>\n    new CloseScrollStrategy(this._scrollDispatcher, this._ngZone, this._viewportRuler, config);\n\n  /** Block scrolling. */\n  block = () => new BlockScrollStrategy(this._viewportRuler, this._document);\n\n  /**\n   * Update the overlay's position on scroll.\n   * @param config Configuration to be used inside the scroll strategy.\n   * Allows debouncing the reposition calls.\n   */\n  reposition = (config?: RepositionScrollStrategyConfig) =>\n    new RepositionScrollStrategy(this._scrollDispatcher, this._viewportRuler, this._ngZone, config);\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 {PositionStrategy} from './position/position-strategy';\nimport {Direction, Directionality} from '../bidi';\nimport {ScrollStrategy, NoopScrollStrategy} from './scroll/index';\n\n/** Initial configuration used when creating an overlay. */\nexport class OverlayConfig {\n  /** Strategy with which to position the overlay. */\n  positionStrategy?: PositionStrategy;\n\n  /** Strategy to be used when handling scroll events while the overlay is open. */\n  scrollStrategy?: ScrollStrategy = new NoopScrollStrategy();\n\n  /** Custom class to add to the overlay pane. */\n  panelClass?: string | string[] = '';\n\n  /** Whether the overlay has a backdrop. */\n  hasBackdrop?: boolean = false;\n\n  /** Custom class to add to the backdrop */\n  backdropClass?: string | string[] = 'cdk-overlay-dark-backdrop';\n\n  /** The width of the overlay panel. If a number is provided, pixel units are assumed. */\n  width?: number | string;\n\n  /** The height of the overlay panel. If a number is provided, pixel units are assumed. */\n  height?: number | string;\n\n  /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. */\n  minWidth?: number | string;\n\n  /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. */\n  minHeight?: number | string;\n\n  /** The max-width of the overlay panel. If a number is provided, pixel units are assumed. */\n  maxWidth?: number | string;\n\n  /** The max-height of the overlay panel. If a number is provided, pixel units are assumed. */\n  maxHeight?: number | string;\n\n  /**\n   * Direction of the text in the overlay panel. If a `Directionality` instance\n   * is passed in, the overlay will handle changes to its value automatically.\n   */\n  direction?: Direction | Directionality;\n\n  /**\n   * Whether the overlay should be disposed of when the user goes backwards/forwards in history.\n   * Note that this usually doesn't include clicking on links (unless the user is using\n   * the `HashLocationStrategy`).\n   */\n  disposeOnNavigation?: boolean = false;\n\n  constructor(config?: OverlayConfig) {\n    if (config) {\n      // Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,\n      // loses the array generic type in the `for of`. But we *also* have to use `Array` because\n      // typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`\n      const configKeys = Object.keys(config) as Iterable<keyof OverlayConfig> &\n        (keyof OverlayConfig)[];\n      for (const key of configKeys) {\n        if (config[key] !== undefined) {\n          // TypeScript, as of version 3.5, sees the left-hand-side of this expression\n          // as \"I don't know *which* key this is, so the only valid value is the intersection\n          // of all the possible values.\" In this case, that happens to be `undefined`. TypeScript\n          // is not smart enough to see that the right-hand-side is actually an access of the same\n          // exact type with the same exact key, meaning that the value type must be identical.\n          // So we use `any` to work around this.\n          this[key] = config[key] as any;\n        }\n      }\n    }\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\n/** Horizontal dimension of a connection point on the perimeter of the origin or overlay element. */\nexport type HorizontalConnectionPos = 'start' | 'center' | 'end';\n\n/** Vertical dimension of a connection point on the perimeter of the origin or overlay element. */\nexport type VerticalConnectionPos = 'top' | 'center' | 'bottom';\n\n/** A connection point on the origin element. */\nexport interface OriginConnectionPosition {\n  originX: HorizontalConnectionPos;\n  originY: VerticalConnectionPos;\n}\n\n/** A connection point on the overlay element. */\nexport interface OverlayConnectionPosition {\n  overlayX: HorizontalConnectionPos;\n  overlayY: VerticalConnectionPos;\n}\n\n/** The points of the origin element and the overlay element to connect. */\nexport class ConnectionPositionPair {\n  /** X-axis attachment point for connected overlay origin. Can be 'start', 'end', or 'center'. */\n  originX: HorizontalConnectionPos;\n  /** Y-axis attachment point for connected overlay origin. Can be 'top', 'bottom', or 'center'. */\n  originY: VerticalConnectionPos;\n  /** X-axis attachment point for connected overlay. Can be 'start', 'end', or 'center'. */\n  overlayX: HorizontalConnectionPos;\n  /** Y-axis attachment point for connected overlay. Can be 'top', 'bottom', or 'center'. */\n  overlayY: VerticalConnectionPos;\n\n  constructor(\n    origin: OriginConnectionPosition,\n    overlay: OverlayConnectionPosition,\n    /** Offset along the X axis. */\n    public offsetX?: number,\n    /** Offset along the Y axis. */\n    public offsetY?: number,\n    /** Class(es) to be applied to the panel while this position is active. */\n    public panelClass?: string | string[],\n  ) {\n    this.originX = origin.originX;\n    this.originY = origin.originY;\n    this.overlayX = overlay.overlayX;\n    this.overlayY = overlay.overlayY;\n  }\n}\n\n/**\n * Set of properties regarding the position of the origin and overlay relative to the viewport\n * with respect to the containing Scrollable elements.\n *\n * The overlay and origin are clipped if any part of their bounding client rectangle exceeds the\n * bounds of any one of the strategy's Scrollable's bounding client rectangle.\n *\n * The overlay and origin are outside view if there is no overlap between their bounding client\n * rectangle and any one of the strategy's Scrollable's bounding client rectangle.\n *\n *       -----------                    -----------\n *       | outside |                    | clipped |\n *       |  view   |              --------------------------\n *       |         |              |     |         |        |\n *       ----------               |     -----------        |\n *  --------------------------    |                        |\n *  |                        |    |      Scrollable        |\n *  |                        |    |                        |\n *  |                        |     --------------------------\n *  |      Scrollable        |\n *  |                        |\n *  --------------------------\n *\n *  @docs-private\n */\nexport class ScrollingVisibility {\n  isOriginClipped: boolean;\n  isOriginOutsideView: boolean;\n  isOverlayClipped: boolean;\n  isOverlayOutsideView: boolean;\n}\n\n/** The change event emitted by the strategy when a fallback position is used. */\nexport class ConnectedOverlayPositionChange {\n  constructor(\n    /** The position used as a result of this change. */\n    public connectionPair: ConnectionPositionPair,\n    /** @docs-private */\n    public scrollableViewProperties: ScrollingVisibility,\n  ) {}\n}\n\n/**\n * Validates whether a vertical position property matches the expected values.\n * @param property Name of the property being validated.\n * @param value Value of the property being validated.\n * @docs-private\n */\nexport function validateVerticalPosition(property: string, value: VerticalConnectionPos) {\n  if (value !== 'top' && value !== 'bottom' && value !== 'center') {\n    throw Error(\n      `ConnectedPosition: Invalid ${property} \"${value}\". ` +\n        `Expected \"top\", \"bottom\" or \"center\".`,\n    );\n  }\n}\n\n/**\n * Validates whether a horizontal position property matches the expected values.\n * @param property Name of the property being validated.\n * @param value Value of the property being validated.\n * @docs-private\n */\nexport function validateHorizontalPosition(property: string, value: HorizontalConnectionPos) {\n  if (value !== 'start' && value !== 'end' && value !== 'center') {\n    throw Error(\n      `ConnectedPosition: Invalid ${property} \"${value}\". ` +\n        `Expected \"start\", \"end\" or \"center\".`,\n    );\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {DOCUMENT} from '@angular/common';\nimport {Injectable, OnDestroy, inject} from '@angular/core';\nimport type {OverlayRef} from '../overlay-ref';\n\n/**\n * Service for dispatching events that land on the body to appropriate overlay ref,\n * if any. It maintains a list of attached overlays to determine best suited overlay based\n * on event target and order of overlay opens.\n */\n@Injectable({providedIn: 'root'})\nexport abstract class BaseOverlayDispatcher implements OnDestroy {\n  /** Currently attached overlays in the order they were attached. */\n  _attachedOverlays: OverlayRef[] = [];\n\n  protected _document = inject(DOCUMENT);\n  protected _isAttached: boolean;\n\n  constructor(...args: unknown[]);\n\n  constructor() {}\n\n  ngOnDestroy(): void {\n    this.detach();\n  }\n\n  /** Add a new overlay to the list of attached overlay refs. */\n  add(overlayRef: OverlayRef): void {\n    // Ensure that we don't get the same overlay multiple times.\n    this.remove(overlayRef);\n    this._attachedOverlays.push(overlayRef);\n  }\n\n  /** Remove an overlay from the list of attached overlay refs. */\n  remove(overlayRef: OverlayRef): void {\n    const index = this._attachedOverlays.indexOf(overlayRef);\n\n    if (index > -1) {\n      this._attachedOverlays.splice(index, 1);\n    }\n\n    // Remove the global listener once there are no more overlays.\n    if (this._attachedOverlays.length === 0) {\n      this.detach();\n    }\n  }\n\n  /** Detaches the global event listener. */\n  protected abstract detach(): void;\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 {Injectable, NgZone, RendererFactory2, inject} from '@angular/core';\nimport {BaseOverlayDispatcher} from './base-overlay-dispatcher';\nimport type {OverlayRef} from '../overlay-ref';\n\n/**\n * Service for dispatching keyboard events that land on the body to appropriate overlay ref,\n * if any. It maintains a list of attached overlays to determine best suited overlay based\n * on event target and order of overlay opens.\n */\n@Injectable({providedIn: 'root'})\nexport class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {\n  private _ngZone = inject(NgZone);\n  private _renderer = inject(RendererFactory2).createRenderer(null, null);\n  private _cleanupKeydown: (() => void) | undefined;\n\n  /** Add a new overlay to the list of attached overlay refs. */\n  override add(overlayRef: OverlayRef): void {\n    super.add(overlayRef);\n\n    // Lazily start dispatcher once first overlay is added\n    if (!this._isAttached) {\n      this._ngZone.runOutsideAngular(() => {\n        this._cleanupKeydown = this._renderer.listen('body', 'keydown', this._keydownListener);\n      });\n\n      this._isAttached = true;\n    }\n  }\n\n  /** Detaches the global keyboard event listener. */\n  protected detach() {\n    if (this._isAttached) {\n      this._cleanupKeydown?.();\n      this._isAttached = false;\n    }\n  }\n\n  /** Keyboard event listener that will be attached to the body. */\n  private _keydownListener = (event: KeyboardEvent) => {\n    const overlays = this._attachedOverlays;\n\n    for (let i = overlays.length - 1; i > -1; i--) {\n      // Dispatch the keydown event to the top overlay which has subscribers to its keydown events.\n      // We want to target the most recent overlay, rather than trying to match where the event came\n      // from, because some components might open an overlay, but keep focus on a trigger element\n      // (e.g. for select and autocomplete). We skip overlays without keydown event subscriptions,\n      // because we don't want overlays that don't handle keyboard events to block the ones below\n      // them that do.\n      if (overlays[i]._keydownEvents.observers.length > 0) {\n        this._ngZone.run(() => overlays[i]._keydownEvents.next(event));\n        break;\n      }\n    }\n  };\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {Injectable, NgZone, RendererFactory2, inject} from '@angular/core';\nimport {Platform, _bindEventWithOptions, _getEventTarget} from '../../platform';\nimport {BaseOverlayDispatcher} from './base-overlay-dispatcher';\nimport type {OverlayRef} from '../overlay-ref';\n\n/**\n * Service for dispatching mouse click events that land on the body to appropriate overlay ref,\n * if any. It maintains a list of attached overlays to determine best suited overlay based\n * on event target and order of overlay opens.\n */\n@Injectable({providedIn: 'root'})\nexport class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {\n  private _platform = inject(Platform);\n  private _ngZone = inject(NgZone);\n  private _renderer = inject(RendererFactory2).createRenderer(null, null);\n\n  private _cursorOriginalValue: string;\n  private _cursorStyleIsSet = false;\n  private _pointerDownEventTarget: HTMLElement | null;\n  private _cleanups: (() => void)[] | undefined;\n\n  /** Add a new overlay to the list of attached overlay refs. */\n  override add(overlayRef: OverlayRef): void {\n    super.add(overlayRef);\n\n    // Safari on iOS does not generate click events for non-interactive\n    // elements. However, we want to receive a click for any element outside\n    // the overlay. We can force a \"clickable\" state by setting\n    // `cursor: pointer` on the document body. See:\n    // https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile\n    // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html\n    if (!this._isAttached) {\n      const body = this._document.body;\n      const eventOptions = {capture: true};\n\n      this._cleanups = this._ngZone.runOutsideAngular(() => [\n        _bindEventWithOptions(\n          this._renderer,\n          body,\n          'pointerdown',\n          this._pointerDownListener,\n          eventOptions,\n        ),\n        _bindEventWithOptions(this._renderer, body, 'click', this._clickListener, eventOptions),\n        _bindEventWithOptions(this._renderer, body, 'auxclick', this._clickListener, eventOptions),\n        _bindEventWithOptions(\n          this._renderer,\n          body,\n          'contextmenu',\n          this._clickListener,\n          eventOptions,\n        ),\n      ]);\n\n      // click event is not fired on iOS. To make element \"clickable\" we are\n      // setting the cursor to pointer\n      if (this._platform.IOS && !this._cursorStyleIsSet) {\n        this._cursorOriginalValue = body.style.cursor;\n        body.style.cursor = 'pointer';\n        this._cursorStyleIsSet = true;\n      }\n\n      this._isAttached = true;\n    }\n  }\n\n  /** Detaches the global keyboard event listener. */\n  protected detach() {\n    if (this._isAttached) {\n      this._cleanups?.forEach(cleanup => cleanup());\n      this._cleanups = undefined;\n      if (this._platform.IOS && this._cursorStyleIsSet) {\n        this._document.body.style.cursor = this._cursorOriginalValue;\n        this._cursorStyleIsSet = false;\n      }\n      this._isAttached = false;\n    }\n  }\n\n  /** Store pointerdown event target to track origin of click. */\n  private _pointerDownListener = (event: PointerEvent) => {\n    this._pointerDownEventTarget = _getEventTarget<HTMLElement>(event);\n  };\n\n  /** Click event listener that will be attached to the body propagate phase. */\n  private _clickListener = (event: MouseEvent) => {\n    const target = _getEventTarget<HTMLElement>(event);\n    // In case of a click event, we want to check the origin of the click\n    // (e.g. in case where a user starts a click inside the overlay and\n    // releases the click outside of it).\n    // This is done by using the event target of the preceding pointerdown event.\n    // Every click event caused by a pointer device has a preceding pointerdown\n    // event, unless the click was programmatically triggered (e.g. in a unit test).\n    const origin =\n      event.type === 'click' && this._pointerDownEventTarget\n        ? this._pointerDownEventTarget\n        : target;\n    // Reset the stored pointerdown event target, to avoid having it interfere\n    // in subsequent events.\n    this._pointerDownEventTarget = null;\n\n    // We copy the array because the original may be modified asynchronously if the\n    // outsidePointerEvents listener decides to detach overlays resulting in index errors inside\n    // the for loop.\n    const overlays = this._attachedOverlays.slice();\n\n    // Dispatch the mouse event to the top overlay which has subscribers to its mouse events.\n    // We want to target all overlays for which the click could be considered as outside click.\n    // As soon as we reach an overlay for which the click is not outside click we break off\n    // the loop.\n    for (let i = overlays.length - 1; i > -1; i--) {\n      const overlayRef = overlays[i];\n      if (overlayRef._outsidePointerEvents.observers.length < 1 || !overlayRef.hasAttached()) {\n        continue;\n      }\n\n      // If it's a click inside the overlay, just break - we should do nothing\n      // If it's an outside click (both origin and target of the click) dispatch the mouse event,\n      // and proceed with the next overlay\n      if (\n        containsPierceShadowDom(overlayRef.overlayElement, target) ||\n        containsPierceShadowDom(overlayRef.overlayElement, origin)\n      ) {\n        break;\n      }\n\n      const outsidePointerEvents = overlayRef._outsidePointerEvents;\n      /** @breaking-change 14.0.0 _ngZone will be required. */\n      if (this._ngZone) {\n        this._ngZone.run(() => outsidePointerEvents.next(event));\n      } else {\n        outsidePointerEvents.next(event);\n      }\n    }\n  };\n}\n\n/** Version of `Element.contains` that transcends shadow DOM boundaries. */\nfunction containsPierceShadowDom(parent: HTMLElement, child: HTMLElement | null): boolean {\n  const supportsShadowRoot = typeof ShadowRoot !== 'undefined' && ShadowRoot;\n  let current: Node | null = child;\n\n  while (current) {\n    if (current === parent) {\n      return true;\n    }\n\n    current =\n      supportsShadowRoot && current instanceof ShadowRoot ? current.host : current.parentNode;\n  }\n\n  return false;\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 {DOCUMENT} from '@angular/common';\nimport {\n  Injectable,\n  OnDestroy,\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport {_CdkPrivateStyleLoader} from '../private';\nimport {Platform, _isTestEnvironment} from '../platform';\n\n@Component({\n  template: '',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  styleUrl: 'overlay-structure.css',\n  host: {'cdk-overlay-style-loader': ''},\n})\nexport class _CdkOverlayStyleLoader {}\n\n/** Container inside which all overlays will render. */\n@Injectable({providedIn: 'root'})\nexport class OverlayContainer implements OnDestroy {\n  protected _platform = inject(Platform);\n\n  protected _containerElement: HTMLElement;\n  protected _document = inject(DOCUMENT);\n  protected _styleLoader = inject(_CdkPrivateStyleLoader);\n\n  constructor(...args: unknown[]);\n  constructor() {}\n\n  ngOnDestroy() {\n    this._containerElement?.remove();\n  }\n\n  /**\n   * This method returns the overlay container element. It will lazily\n   * create the element the first time it is called to facilitate using\n   * the container in non-browser environments.\n   * @returns the container element\n   */\n  getContainerElement(): HTMLElement {\n    this._loadStyles();\n\n    if (!this._containerElement) {\n      this._createContainer();\n    }\n\n    return this._containerElement;\n  }\n\n  /**\n   * Create the overlay container element, which is simply a div\n   * with the 'cdk-overlay-container' class on the document body.\n   */\n  protected _createContainer(): void {\n    const containerClass = 'cdk-overlay-container';\n\n    // TODO(crisbeto): remove the testing check once we have an overlay testing\n    // module or Angular starts tearing down the testing `NgModule`. See:\n    // https://github.com/angular/angular/issues/18831\n    if (this._platform.isBrowser || _isTestEnvironment()) {\n      const oppositePlatformContainers = this._document.querySelectorAll(\n        `.${containerClass}[platform=\"server\"], ` + `.${containerClass}[platform=\"test\"]`,\n      );\n\n      // Remove any old containers from the opposite platform.\n      // This can happen when transitioning from the server to the client.\n      for (let i = 0; i < oppositePlatformContainers.length; i++) {\n        oppositePlatformContainers[i].remove();\n      }\n    }\n\n    const container = this._document.createElement('div');\n    container.classList.add(containerClass);\n\n    // A long time ago we kept adding new overlay containers whenever a new app was instantiated,\n    // but at some point we added logic which clears the duplicate ones in order to avoid leaks.\n    // The new logic was a little too aggressive since it was breaking some legitimate use cases.\n    // To mitigate the problem we made it so that only containers from a different platform are\n    // cleared, but the side-effect was that people started depending on the overly-aggressive\n    // logic to clean up their tests for them. Until we can introduce an overlay-specific testing\n    // module which does the cleanup, we try to detect that we're in a test environment and we\n    // always clear the container. See #17006.\n    // TODO(crisbeto): remove the test environment check once we have an overlay testing module.\n    if (_isTestEnvironment()) {\n      container.setAttribute('platform', 'test');\n    } else if (!this._platform.isBrowser) {\n      container.setAttribute('platform', 'server');\n    }\n\n    this._document.body.appendChild(container);\n    this._containerElement = container;\n  }\n\n  /** Loads the structural styles necessary for the overlay to work. */\n  protected _loadStyles(): void {\n    this._styleLoader.load(_CdkOverlayStyleLoader);\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.dev/license\n */\n\nimport {NgZone, Renderer2} from '@angular/core';\n\n/** Encapsulates the logic for attaching and detaching a backdrop. */\nexport class BackdropRef {\n  readonly element: HTMLElement;\n  private _cleanupClick: (() => void) | undefined;\n  private _cleanupTransitionEnd: (() => void) | undefined;\n  private _fallbackTimeout: ReturnType<typeof setTimeout> | undefined;\n\n  constructor(\n    document: Document,\n    private _renderer: Renderer2,\n    private _ngZone: NgZone,\n    onClick: (event: MouseEvent) => void,\n  ) {\n    this.element = document.createElement('div');\n    this.element.classList.add('cdk-overlay-backdrop');\n    this._cleanupClick = _renderer.listen(this.element, 'click', onClick);\n  }\n\n  detach() {\n    this._ngZone.runOutsideAngular(() => {\n      const element = this.element;\n      clearTimeout(this._fallbackTimeout);\n      this._cleanupTransitionEnd?.();\n      this._cleanupTransitionEnd = this._renderer.listen(element, 'transitionend', this.dispose);\n      this._fallbackTimeout = setTimeout(this.dispose, 500);\n\n      // If the backdrop doesn't have a transition, the `transitionend` event won't fire.\n      // In this case we make it unclickable and we try to remove it after a delay.\n      element.style.pointerEvents = 'none';\n      element.classList.remove('cdk-overlay-backdrop-showing');\n    });\n  }\n\n  dispose = () => {\n    clearTimeout(this._fallbackTimeout);\n    this._cleanupClick?.();\n    this._cleanupTransitionEnd?.();\n    this._cleanupClick = this._cleanupTransitionEnd = this._fallbackTimeout = undefined;\n    this.element.remove();\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.dev/license\n */\n\nimport {Direction, Directionality} from '../bidi';\nimport {ComponentPortal, Portal, PortalOutlet, TemplatePortal} from '../portal';\nimport {\n  AfterRenderRef,\n  ComponentRef,\n  EmbeddedViewRef,\n  EnvironmentInjector,\n  NgZone,\n  Renderer2,\n  afterNextRender,\n  afterRender,\n  untracked,\n} from '@angular/core';\nimport {Location} from '@angular/common';\nimport {Observable, Subject, merge, SubscriptionLike, Subscription} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\nimport {OverlayKeyboardDispatcher} from './dispatchers/overlay-keyboard-dispatcher';\nimport {OverlayOutsideClickDispatcher} from './dispatchers/overlay-outside-click-dispatcher';\nimport {OverlayConfig} from './overlay-config';\nimport {coerceCssPixelValue, coerceArray} from '../coercion';\nimport {PositionStrategy} from './position/position-strategy';\nimport {ScrollStrategy} from './scroll';\nimport {BackdropRef} from './backdrop-ref';\n\n/** An object where all of its properties cannot be written. */\nexport type ImmutableObject<T> = {\n  readonly [P in keyof T]: T[P];\n};\n\n/**\n * Reference to an overlay that has been created with the Overlay service.\n * Used to manipulate or dispose of said overlay.\n */\nexport class OverlayRef implements PortalOutlet {\n  private readonly _backdropClick = new Subject<MouseEvent>();\n  private readonly _attachments = new Subject<void>();\n  private readonly _detachments = new Subject<void>();\n  private _positionStrategy: PositionStrategy | undefined;\n  private _scrollStrategy: ScrollStrategy | undefined;\n  private _locationChanges: SubscriptionLike = Subscription.EMPTY;\n  private _backdropRef: BackdropRef | null = null;\n\n  /**\n   * Reference to the parent of the `_host` at the time it was detached. Used to restore\n   * the `_host` to its original position in the DOM when it gets re-attached.\n   */\n  private _previousHostParent: HTMLElement;\n\n  /** Stream of keydown events dispatched to this overlay. */\n  readonly _keydownEvents = new Subject<KeyboardEvent>();\n\n  /** Stream of mouse outside events dispatched to this overlay. */\n  readonly _outsidePointerEvents = new Subject<MouseEvent>();\n\n  private _renders = new Subject<void>();\n\n  private _afterRenderRef: AfterRenderRef;\n\n  /** Reference to the currently-running `afterNextRender` call. */\n  private _afterNextRenderRef: AfterRenderRef | undefined;\n\n  constructor(\n    private _portalOutlet: PortalOutlet,\n    private _host: HTMLElement,\n    private _pane: HTMLElement,\n    private _config: ImmutableObject<OverlayConfig>,\n    private _ngZone: NgZone,\n    private _keyboardDispatcher: OverlayKeyboardDispatcher,\n    private _document: Document,\n    private _location: Location,\n    private _outsideClickDispatcher: OverlayOutsideClickDispatcher,\n    private _animationsDisabled = false,\n    private _injector: EnvironmentInjector,\n    private _renderer: Renderer2,\n  ) {\n    if (_config.scrollStrategy) {\n      this._scrollStrategy = _config.scrollStrategy;\n      this._scrollStrategy.attach(this);\n    }\n\n    this._positionStrategy = _config.positionStrategy;\n\n    // Users could open the overlay from an `effect`, in which case we need to\n    // run the `afterRender` as `untracked`. We don't recommend that users do\n    // this, but we also don't want to break users who are doing it.\n    this._afterRenderRef = untracked(() =>\n      afterRender(\n        () => {\n          this._renders.next();\n        },\n        {injector: this._injector},\n      ),\n    );\n  }\n\n  /** The overlay's HTML element */\n  get overlayElement(): HTMLElement {\n    return this._pane;\n  }\n\n  /** The overlay's backdrop HTML element. */\n  get backdropElement(): HTMLElement | null {\n    return this._backdropRef?.element || null;\n  }\n\n  /**\n   * Wrapper around the panel element. Can be used for advanced\n   * positioning where a wrapper with specific styling is\n   * required around the overlay pane.\n   */\n  get hostElement(): HTMLElement {\n    return this._host;\n  }\n\n  attach<T>(portal: ComponentPortal<T>): ComponentRef<T>;\n  attach<T>(portal: TemplatePortal<T>): EmbeddedViewRef<T>;\n  attach(portal: any): any;\n\n  /**\n   * Attaches content, given via a Portal, to the overlay.\n   * If the overlay is configured to have a backdrop, it will be created.\n   *\n   * @param portal Portal instance to which to attach the overlay.\n   * @returns The portal attachment result.\n   */\n  attach(portal: Portal<any>): any {\n    // Insert the host into the DOM before attaching the portal, otherwise\n    // the animations module will skip animations on repeat attachments.\n    if (!this._host.parentElement && this._previousHostParent) {\n      this._previousHostParent.appendChild(this._host);\n    }\n\n    const attachResult = this._portalOutlet.attach(portal);\n\n    if (this._positionStrategy) {\n      this._positionStrategy.attach(this);\n    }\n\n    this._updateStackingOrder();\n    this._updateElementSize();\n    this._updateElementDirection();\n\n    if (this._scrollStrategy) {\n      this._scrollStrategy.enable();\n    }\n\n    // We need to clean this up ourselves, because we're passing in an\n    // `EnvironmentInjector` below which won't ever be destroyed.\n    // Otherwise it causes some callbacks to be retained (see #29696).\n    this._afterNextRenderRef?.destroy();\n\n    // Update the position once the overlay is fully rendered before attempting to position it,\n    // as the position may depend on the size of the rendered content.\n    this._afterNextRenderRef = afterNextRender(\n      () => {\n        // The overlay could've been detached before the callback executed.\n        if (this.hasAttached()) {\n          this.updatePosition();\n        }\n      },\n      {injector: this._injector},\n    );\n\n    // Enable pointer events for the overlay pane element.\n    this._togglePointerEvents(true);\n\n    if (this._config.hasBackdrop) {\n      this._attachBackdrop();\n    }\n\n    if (this._config.panelClass) {\n      this._toggleClasses(this._pane, this._config.panelClass, true);\n    }\n\n    // Only emit the `attachments` event once all other setup is done.\n    this._attachments.next();\n\n    // Track this overlay by the keyboard dispatcher\n    this._keyboardDispatcher.add(this);\n\n    if (this._config.disposeOnNavigation) {\n      this._locationChanges = this._location.subscribe(() => this.dispose());\n    }\n\n    this._outsideClickDispatcher.add(this);\n\n    // TODO(crisbeto): the null check is here, because the portal outlet returns `any`.\n    // We should be guaranteed for the result to be `Componen