@angular/cdk/fesm2022/scrolling-module-722545e3.mjs.map

Angular Material Component Development Kit

{"version":3,"file":"scrolling-module-722545e3.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/virtual-scroll-strategy.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/fixed-size-virtual-scroll.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/scroll-dispatcher.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/scrollable.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/viewport-ruler.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/virtual-scrollable.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/virtual-scroll-viewport.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/virtual-scroll-viewport.html","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/virtual-for-of.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/virtual-scrollable-element.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/virtual-scrollable-window.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/cdk/scrolling/scrolling-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 {InjectionToken} from '@angular/core';\nimport {Observable} from 'rxjs';\nimport type {CdkVirtualScrollViewport} from './virtual-scroll-viewport';\n\n/** The injection token used to specify the virtual scrolling strategy. */\nexport const VIRTUAL_SCROLL_STRATEGY = new InjectionToken<VirtualScrollStrategy>(\n  'VIRTUAL_SCROLL_STRATEGY',\n);\n\n/** A strategy that dictates which items should be rendered in the viewport. */\nexport interface VirtualScrollStrategy {\n  /** Emits when the index of the first element visible in the viewport changes. */\n  scrolledIndexChange: Observable<number>;\n\n  /**\n   * Attaches this scroll strategy to a viewport.\n   * @param viewport The viewport to attach this strategy to.\n   */\n  attach(viewport: CdkVirtualScrollViewport): void;\n\n  /** Detaches this scroll strategy from the currently attached viewport. */\n  detach(): void;\n\n  /** Called when the viewport is scrolled (debounced using requestAnimationFrame). */\n  onContentScrolled(): void;\n\n  /** Called when the length of the data changes. */\n  onDataLengthChanged(): void;\n\n  /** Called when the range of items rendered in the DOM has changed. */\n  onContentRendered(): void;\n\n  /** Called when the offset of the rendered items changed. */\n  onRenderedOffsetChanged(): void;\n\n  /**\n   * Scroll to the offset for the given index.\n   * @param index The index of the element to scroll to.\n   * @param behavior The ScrollBehavior to use when scrolling.\n   */\n  scrollToIndex(index: number, behavior: ScrollBehavior): 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 {coerceNumberProperty, NumberInput} from '../coercion';\nimport {Directive, forwardRef, Input, OnChanges} from '@angular/core';\nimport {Observable, Subject} from 'rxjs';\nimport {distinctUntilChanged} from 'rxjs/operators';\nimport {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';\nimport {CdkVirtualScrollViewport} from './virtual-scroll-viewport';\n\n/** Virtual scrolling strategy for lists with items of known fixed size. */\nexport class FixedSizeVirtualScrollStrategy implements VirtualScrollStrategy {\n  private readonly _scrolledIndexChange = new Subject<number>();\n\n  /** @docs-private Implemented as part of VirtualScrollStrategy. */\n  scrolledIndexChange: Observable<number> = this._scrolledIndexChange.pipe(distinctUntilChanged());\n\n  /** The attached viewport. */\n  private _viewport: CdkVirtualScrollViewport | null = null;\n\n  /** The size of the items in the virtually scrolling list. */\n  private _itemSize: number;\n\n  /** The minimum amount of buffer rendered beyond the viewport (in pixels). */\n  private _minBufferPx: number;\n\n  /** The number of buffer items to render beyond the edge of the viewport (in pixels). */\n  private _maxBufferPx: number;\n\n  /**\n   * @param itemSize The size of the items in the virtually scrolling list.\n   * @param minBufferPx The minimum amount of buffer (in pixels) before needing to render more\n   * @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.\n   */\n  constructor(itemSize: number, minBufferPx: number, maxBufferPx: number) {\n    this._itemSize = itemSize;\n    this._minBufferPx = minBufferPx;\n    this._maxBufferPx = maxBufferPx;\n  }\n\n  /**\n   * Attaches this scroll strategy to a viewport.\n   * @param viewport The viewport to attach this strategy to.\n   */\n  attach(viewport: CdkVirtualScrollViewport) {\n    this._viewport = viewport;\n    this._updateTotalContentSize();\n    this._updateRenderedRange();\n  }\n\n  /** Detaches this scroll strategy from the currently attached viewport. */\n  detach() {\n    this._scrolledIndexChange.complete();\n    this._viewport = null;\n  }\n\n  /**\n   * Update the item size and buffer size.\n   * @param itemSize The size of the items in the virtually scrolling list.\n   * @param minBufferPx The minimum amount of buffer (in pixels) before needing to render more\n   * @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.\n   */\n  updateItemAndBufferSize(itemSize: number, minBufferPx: number, maxBufferPx: number) {\n    if (maxBufferPx < minBufferPx && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw Error('CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx');\n    }\n    this._itemSize = itemSize;\n    this._minBufferPx = minBufferPx;\n    this._maxBufferPx = maxBufferPx;\n    this._updateTotalContentSize();\n    this._updateRenderedRange();\n  }\n\n  /** @docs-private Implemented as part of VirtualScrollStrategy. */\n  onContentScrolled() {\n    this._updateRenderedRange();\n  }\n\n  /** @docs-private Implemented as part of VirtualScrollStrategy. */\n  onDataLengthChanged() {\n    this._updateTotalContentSize();\n    this._updateRenderedRange();\n  }\n\n  /** @docs-private Implemented as part of VirtualScrollStrategy. */\n  onContentRendered() {\n    /* no-op */\n  }\n\n  /** @docs-private Implemented as part of VirtualScrollStrategy. */\n  onRenderedOffsetChanged() {\n    /* no-op */\n  }\n\n  /**\n   * Scroll to the offset for the given index.\n   * @param index The index of the element to scroll to.\n   * @param behavior The ScrollBehavior to use when scrolling.\n   */\n  scrollToIndex(index: number, behavior: ScrollBehavior): void {\n    if (this._viewport) {\n      this._viewport.scrollToOffset(index * this._itemSize, behavior);\n    }\n  }\n\n  /** Update the viewport's total content size. */\n  private _updateTotalContentSize() {\n    if (!this._viewport) {\n      return;\n    }\n\n    this._viewport.setTotalContentSize(this._viewport.getDataLength() * this._itemSize);\n  }\n\n  /** Update the viewport's rendered range. */\n  private _updateRenderedRange() {\n    if (!this._viewport) {\n      return;\n    }\n\n    const renderedRange = this._viewport.getRenderedRange();\n    const newRange = {start: renderedRange.start, end: renderedRange.end};\n    const viewportSize = this._viewport.getViewportSize();\n    const dataLength = this._viewport.getDataLength();\n    let scrollOffset = this._viewport.measureScrollOffset();\n    // Prevent NaN as result when dividing by zero.\n    let firstVisibleIndex = this._itemSize > 0 ? scrollOffset / this._itemSize : 0;\n\n    // If user scrolls to the bottom of the list and data changes to a smaller list\n    if (newRange.end > dataLength) {\n      // We have to recalculate the first visible index based on new data length and viewport size.\n      const maxVisibleItems = Math.ceil(viewportSize / this._itemSize);\n      const newVisibleIndex = Math.max(\n        0,\n        Math.min(firstVisibleIndex, dataLength - maxVisibleItems),\n      );\n\n      // If first visible index changed we must update scroll offset to handle start/end buffers\n      // Current range must also be adjusted to cover the new position (bottom of new list).\n      if (firstVisibleIndex != newVisibleIndex) {\n        firstVisibleIndex = newVisibleIndex;\n        scrollOffset = newVisibleIndex * this._itemSize;\n        newRange.start = Math.floor(firstVisibleIndex);\n      }\n\n      newRange.end = Math.max(0, Math.min(dataLength, newRange.start + maxVisibleItems));\n    }\n\n    const startBuffer = scrollOffset - newRange.start * this._itemSize;\n    if (startBuffer < this._minBufferPx && newRange.start != 0) {\n      const expandStart = Math.ceil((this._maxBufferPx - startBuffer) / this._itemSize);\n      newRange.start = Math.max(0, newRange.start - expandStart);\n      newRange.end = Math.min(\n        dataLength,\n        Math.ceil(firstVisibleIndex + (viewportSize + this._minBufferPx) / this._itemSize),\n      );\n    } else {\n      const endBuffer = newRange.end * this._itemSize - (scrollOffset + viewportSize);\n      if (endBuffer < this._minBufferPx && newRange.end != dataLength) {\n        const expandEnd = Math.ceil((this._maxBufferPx - endBuffer) / this._itemSize);\n        if (expandEnd > 0) {\n          newRange.end = Math.min(dataLength, newRange.end + expandEnd);\n          newRange.start = Math.max(\n            0,\n            Math.floor(firstVisibleIndex - this._minBufferPx / this._itemSize),\n          );\n        }\n      }\n    }\n\n    this._viewport.setRenderedRange(newRange);\n    this._viewport.setRenderedContentOffset(this._itemSize * newRange.start);\n    this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));\n  }\n}\n\n/**\n * Provider factory for `FixedSizeVirtualScrollStrategy` that simply extracts the already created\n * `FixedSizeVirtualScrollStrategy` from the given directive.\n * @param fixedSizeDir The instance of `CdkFixedSizeVirtualScroll` to extract the\n *     `FixedSizeVirtualScrollStrategy` from.\n */\nexport function _fixedSizeVirtualScrollStrategyFactory(fixedSizeDir: CdkFixedSizeVirtualScroll) {\n  return fixedSizeDir._scrollStrategy;\n}\n\n/** A virtual scroll strategy that supports fixed-size items. */\n@Directive({\n  selector: 'cdk-virtual-scroll-viewport[itemSize]',\n  providers: [\n    {\n      provide: VIRTUAL_SCROLL_STRATEGY,\n      useFactory: _fixedSizeVirtualScrollStrategyFactory,\n      deps: [forwardRef(() => CdkFixedSizeVirtualScroll)],\n    },\n  ],\n})\nexport class CdkFixedSizeVirtualScroll implements OnChanges {\n  /** The size of the items in the list (in pixels). */\n  @Input()\n  get itemSize(): number {\n    return this._itemSize;\n  }\n  set itemSize(value: NumberInput) {\n    this._itemSize = coerceNumberProperty(value);\n  }\n  _itemSize = 20;\n\n  /**\n   * The minimum amount of buffer rendered beyond the viewport (in pixels).\n   * If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.\n   */\n  @Input()\n  get minBufferPx(): number {\n    return this._minBufferPx;\n  }\n  set minBufferPx(value: NumberInput) {\n    this._minBufferPx = coerceNumberProperty(value);\n  }\n  _minBufferPx = 100;\n\n  /**\n   * The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.\n   */\n  @Input()\n  get maxBufferPx(): number {\n    return this._maxBufferPx;\n  }\n  set maxBufferPx(value: NumberInput) {\n    this._maxBufferPx = coerceNumberProperty(value);\n  }\n  _maxBufferPx = 200;\n\n  /** The scroll strategy used by this directive. */\n  _scrollStrategy = new FixedSizeVirtualScrollStrategy(\n    this.itemSize,\n    this.minBufferPx,\n    this.maxBufferPx,\n  );\n\n  ngOnChanges() {\n    this._scrollStrategy.updateItemAndBufferSize(this.itemSize, this.minBufferPx, this.maxBufferPx);\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 {coerceElement} from '../coercion';\nimport {Platform} from '../platform';\nimport {ElementRef, Injectable, NgZone, OnDestroy, RendererFactory2, inject} from '@angular/core';\nimport {of as observableOf, Subject, Subscription, Observable, Observer} from 'rxjs';\nimport {auditTime, filter} from 'rxjs/operators';\nimport type {CdkScrollable} from './scrollable';\n\n/** Time in ms to throttle the scrolling events by default. */\nexport const DEFAULT_SCROLL_TIME = 20;\n\n/**\n * Service contained all registered Scrollable references and emits an event when any one of the\n * Scrollable references emit a scrolled event.\n */\n@Injectable({providedIn: 'root'})\nexport class ScrollDispatcher implements OnDestroy {\n  private _ngZone = inject(NgZone);\n  private _platform = inject(Platform);\n  private _renderer = inject(RendererFactory2).createRenderer(null, null);\n  private _cleanupGlobalListener: (() => void) | undefined;\n\n  constructor(...args: unknown[]);\n  constructor() {}\n\n  /** Subject for notifying that a registered scrollable reference element has been scrolled. */\n  private readonly _scrolled = new Subject<CdkScrollable | void>();\n\n  /** Keeps track of the amount of subscriptions to `scrolled`. Used for cleaning up afterwards. */\n  private _scrolledCount = 0;\n\n  /**\n   * Map of all the scrollable references that are registered with the service and their\n   * scroll event subscriptions.\n   */\n  scrollContainers: Map<CdkScrollable, Subscription> = new Map();\n\n  /**\n   * Registers a scrollable instance with the service and listens for its scrolled events. When the\n   * scrollable is scrolled, the service emits the event to its scrolled observable.\n   * @param scrollable Scrollable instance to be registered.\n   */\n  register(scrollable: CdkScrollable): void {\n    if (!this.scrollContainers.has(scrollable)) {\n      this.scrollContainers.set(\n        scrollable,\n        scrollable.elementScrolled().subscribe(() => this._scrolled.next(scrollable)),\n      );\n    }\n  }\n\n  /**\n   * De-registers a Scrollable reference and unsubscribes from its scroll event observable.\n   * @param scrollable Scrollable instance to be deregistered.\n   */\n  deregister(scrollable: CdkScrollable): void {\n    const scrollableReference = this.scrollContainers.get(scrollable);\n\n    if (scrollableReference) {\n      scrollableReference.unsubscribe();\n      this.scrollContainers.delete(scrollable);\n    }\n  }\n\n  /**\n   * Returns an observable that emits an event whenever any of the registered Scrollable\n   * references (or window, document, or body) fire a scrolled event. Can provide a time in ms\n   * to override the default \"throttle\" time.\n   *\n   * **Note:** in order to avoid hitting change detection for every scroll event,\n   * all of the events emitted from this stream will be run outside the Angular zone.\n   * If you need to update any data bindings as a result of a scroll event, you have\n   * to run the callback using `NgZone.run`.\n   */\n  scrolled(auditTimeInMs: number = DEFAULT_SCROLL_TIME): Observable<CdkScrollable | void> {\n    if (!this._platform.isBrowser) {\n      return observableOf<void>();\n    }\n\n    return new Observable((observer: Observer<CdkScrollable | void>) => {\n      if (!this._cleanupGlobalListener) {\n        this._cleanupGlobalListener = this._ngZone.runOutsideAngular(() =>\n          this._renderer.listen('document', 'scroll', () => this._scrolled.next()),\n        );\n      }\n\n      // In the case of a 0ms delay, use an observable without auditTime\n      // since it does add a perceptible delay in processing overhead.\n      const subscription =\n        auditTimeInMs > 0\n          ? this._scrolled.pipe(auditTime(auditTimeInMs)).subscribe(observer)\n          : this._scrolled.subscribe(observer);\n\n      this._scrolledCount++;\n\n      return () => {\n        subscription.unsubscribe();\n        this._scrolledCount--;\n\n        if (!this._scrolledCount) {\n          this._cleanupGlobalListener?.();\n          this._cleanupGlobalListener = undefined;\n        }\n      };\n    });\n  }\n\n  ngOnDestroy() {\n    this._cleanupGlobalListener?.();\n    this._cleanupGlobalListener = undefined;\n    this.scrollContainers.forEach((_, container) => this.deregister(container));\n    this._scrolled.complete();\n  }\n\n  /**\n   * Returns an observable that emits whenever any of the\n   * scrollable ancestors of an element are scrolled.\n   * @param elementOrElementRef Element whose ancestors to listen for.\n   * @param auditTimeInMs Time to throttle the scroll events.\n   */\n  ancestorScrolled(\n    elementOrElementRef: ElementRef | HTMLElement,\n    auditTimeInMs?: number,\n  ): Observable<CdkScrollable | void> {\n    const ancestors = this.getAncestorScrollContainers(elementOrElementRef);\n\n    return this.scrolled(auditTimeInMs).pipe(\n      filter(target => !target || ancestors.indexOf(target) > -1),\n    );\n  }\n\n  /** Returns all registered Scrollables that contain the provided element. */\n  getAncestorScrollContainers(elementOrElementRef: ElementRef | HTMLElement): CdkScrollable[] {\n    const scrollingContainers: CdkScrollable[] = [];\n\n    this.scrollContainers.forEach((_subscription: Subscription, scrollable: CdkScrollable) => {\n      if (this._scrollableContainsElement(scrollable, elementOrElementRef)) {\n        scrollingContainers.push(scrollable);\n      }\n    });\n\n    return scrollingContainers;\n  }\n\n  /** Returns true if the element is contained within the provided Scrollable. */\n  private _scrollableContainsElement(\n    scrollable: CdkScrollable,\n    elementOrElementRef: ElementRef | HTMLElement,\n  ): boolean {\n    let element: HTMLElement | null = coerceElement(elementOrElementRef);\n    let scrollableElement = scrollable.getElementRef().nativeElement;\n\n    // Traverse through the element parents until we reach null, checking if any of the elements\n    // are the scrollable's element.\n    do {\n      if (element == scrollableElement) {\n        return true;\n      }\n    } while ((element = element!.parentElement));\n\n    return false;\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 {Directionality} from '../bidi';\nimport {getRtlScrollAxisType, RtlScrollAxisType, supportsScrollBehavior} from '../platform';\nimport {Directive, ElementRef, NgZone, OnDestroy, OnInit, Renderer2, inject} from '@angular/core';\nimport {Observable, Subject} from 'rxjs';\nimport {ScrollDispatcher} from './scroll-dispatcher';\n\nexport type _Without<T> = {[P in keyof T]?: never};\nexport type _XOR<T, U> = (_Without<T> & U) | (_Without<U> & T);\nexport type _Top = {top?: number};\nexport type _Bottom = {bottom?: number};\nexport type _Left = {left?: number};\nexport type _Right = {right?: number};\nexport type _Start = {start?: number};\nexport type _End = {end?: number};\nexport type _XAxis = _XOR<_XOR<_Left, _Right>, _XOR<_Start, _End>>;\nexport type _YAxis = _XOR<_Top, _Bottom>;\n\n/**\n * An extended version of ScrollToOptions that allows expressing scroll offsets relative to the\n * top, bottom, left, right, start, or end of the viewport rather than just the top and left.\n * Please note: the top and bottom properties are mutually exclusive, as are the left, right,\n * start, and end properties.\n */\nexport type ExtendedScrollToOptions = _XAxis & _YAxis & ScrollOptions;\n\n/**\n * Sends an event when the directive's element is scrolled. Registers itself with the\n * ScrollDispatcher service to include itself as part of its collection of scrolling events that it\n * can be listened to through the service.\n */\n@Directive({\n  selector: '[cdk-scrollable], [cdkScrollable]',\n})\nexport class CdkScrollable implements OnInit, OnDestroy {\n  protected elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  protected scrollDispatcher = inject(ScrollDispatcher);\n  protected ngZone = inject(NgZone);\n  protected dir? = inject(Directionality, {optional: true});\n  protected _scrollElement: EventTarget = this.elementRef.nativeElement;\n  protected readonly _destroyed = new Subject<void>();\n  private _renderer = inject(Renderer2);\n  private _cleanupScroll: (() => void) | undefined;\n  private _elementScrolled = new Subject<Event>();\n\n  constructor(...args: unknown[]);\n  constructor() {}\n\n  ngOnInit() {\n    this._cleanupScroll = this.ngZone.runOutsideAngular(() =>\n      this._renderer.listen(this._scrollElement, 'scroll', event =>\n        this._elementScrolled.next(event),\n      ),\n    );\n    this.scrollDispatcher.register(this);\n  }\n\n  ngOnDestroy() {\n    this._cleanupScroll?.();\n    this._elementScrolled.complete();\n    this.scrollDispatcher.deregister(this);\n    this._destroyed.next();\n    this._destroyed.complete();\n  }\n\n  /** Returns observable that emits when a scroll event is fired on the host element. */\n  elementScrolled(): Observable<Event> {\n    return this._elementScrolled;\n  }\n\n  /** Gets the ElementRef for the viewport. */\n  getElementRef(): ElementRef<HTMLElement> {\n    return this.elementRef;\n  }\n\n  /**\n   * Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo\n   * method, since browsers are not consistent about what scrollLeft means in RTL. For this method\n   * left and right always refer to the left and right side of the scrolling container irrespective\n   * of the layout direction. start and end refer to left and right in an LTR context and vice-versa\n   * in an RTL context.\n   * @param options specified the offsets to scroll to.\n   */\n  scrollTo(options: ExtendedScrollToOptions): void {\n    const el = this.elementRef.nativeElement;\n    const isRtl = this.dir && this.dir.value == 'rtl';\n\n    // Rewrite start & end offsets as right or left offsets.\n    if (options.left == null) {\n      options.left = isRtl ? options.end : options.start;\n    }\n\n    if (options.right == null) {\n      options.right = isRtl ? options.start : options.end;\n    }\n\n    // Rewrite the bottom offset as a top offset.\n    if (options.bottom != null) {\n      (options as _Without<_Bottom> & _Top).top =\n        el.scrollHeight - el.clientHeight - options.bottom;\n    }\n\n    // Rewrite the right offset as a left offset.\n    if (isRtl && getRtlScrollAxisType() != RtlScrollAxisType.NORMAL) {\n      if (options.left != null) {\n        (options as _Without<_Left> & _Right).right =\n          el.scrollWidth - el.clientWidth - options.left;\n      }\n\n      if (getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {\n        options.left = options.right;\n      } else if (getRtlScrollAxisType() == RtlScrollAxisType.NEGATED) {\n        options.left = options.right ? -options.right : options.right;\n      }\n    } else {\n      if (options.right != null) {\n        (options as _Without<_Right> & _Left).left =\n          el.scrollWidth - el.clientWidth - options.right;\n      }\n    }\n\n    this._applyScrollToOptions(options);\n  }\n\n  private _applyScrollToOptions(options: ScrollToOptions): void {\n    const el = this.elementRef.nativeElement;\n\n    if (supportsScrollBehavior()) {\n      el.scrollTo(options);\n    } else {\n      if (options.top != null) {\n        el.scrollTop = options.top;\n      }\n      if (options.left != null) {\n        el.scrollLeft = options.left;\n      }\n    }\n  }\n\n  /**\n   * Measures the scroll offset relative to the specified edge of the viewport. This method can be\n   * used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent\n   * about what scrollLeft means in RTL. The values returned by this method are normalized such that\n   * left and right always refer to the left and right side of the scrolling container irrespective\n   * of the layout direction. start and end refer to left and right in an LTR context and vice-versa\n   * in an RTL context.\n   * @param from The edge to measure from.\n   */\n  measureScrollOffset(from: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end'): number {\n    const LEFT = 'left';\n    const RIGHT = 'right';\n    const el = this.elementRef.nativeElement;\n    if (from == 'top') {\n      return el.scrollTop;\n    }\n    if (from == 'bottom') {\n      return el.scrollHeight - el.clientHeight - el.scrollTop;\n    }\n\n    // Rewrite start & end as left or right offsets.\n    const isRtl = this.dir && this.dir.value == 'rtl';\n    if (from == 'start') {\n      from = isRtl ? RIGHT : LEFT;\n    } else if (from == 'end') {\n      from = isRtl ? LEFT : RIGHT;\n    }\n\n    if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {\n      // For INVERTED, scrollLeft is (scrollWidth - clientWidth) when scrolled all the way left and\n      // 0 when scrolled all the way right.\n      if (from == LEFT) {\n        return el.scrollWidth - el.clientWidth - el.scrollLeft;\n      } else {\n        return el.scrollLeft;\n      }\n    } else if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.NEGATED) {\n      // For NEGATED, scrollLeft is -(scrollWidth - clientWidth) when scrolled all the way left and\n      // 0 when scrolled all the way right.\n      if (from == LEFT) {\n        return el.scrollLeft + el.scrollWidth - el.clientWidth;\n      } else {\n        return -el.scrollLeft;\n      }\n    } else {\n      // For NORMAL, as well as non-RTL contexts, scrollLeft is 0 when scrolled all the way left and\n      // (scrollWidth - clientWidth) when scrolled all the way right.\n      if (from == LEFT) {\n        return el.scrollLeft;\n      } else {\n        return el.scrollWidth - el.clientWidth - el.scrollLeft;\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 {Platform} from '../platform';\nimport {Injectable, NgZone, OnDestroy, RendererFactory2, inject} from '@angular/core';\nimport {Observable, Subject} from 'rxjs';\nimport {auditTime} from 'rxjs/operators';\nimport {DOCUMENT} from '@angular/common';\n\n/** Time in ms to throttle the resize events by default. */\nexport const DEFAULT_RESIZE_TIME = 20;\n\n/** Object that holds the scroll position of the viewport in each direction. */\nexport interface ViewportScrollPosition {\n  top: number;\n  left: number;\n}\n\n/**\n * Simple utility for getting the bounds of the browser viewport.\n * @docs-private\n */\n@Injectable({providedIn: 'root'})\nexport class ViewportRuler implements OnDestroy {\n  private _platform = inject(Platform);\n  private _listeners: (() => void)[] | undefined;\n\n  /** Cached viewport dimensions. */\n  private _viewportSize: {width: number; height: number} | null;\n\n  /** Stream of viewport change events. */\n  private readonly _change = new Subject<Event>();\n\n  /** Used to reference correct document/window */\n  protected _document = inject(DOCUMENT, {optional: true})!;\n\n  constructor(...args: unknown[]);\n\n  constructor() {\n    const ngZone = inject(NgZone);\n    const renderer = inject(RendererFactory2).createRenderer(null, null);\n\n    ngZone.runOutsideAngular(() => {\n      if (this._platform.isBrowser) {\n        const changeListener = (event: Event) => this._change.next(event);\n        this._listeners = [\n          renderer.listen('window', 'resize', changeListener),\n          renderer.listen('window', 'orientationchange', changeListener),\n        ];\n      }\n\n      // Clear the cached position so that the viewport is re-measured next time it is required.\n      // We don't need to keep track of the subscription, because it is completed on destroy.\n      this.change().subscribe(() => (this._viewportSize = null));\n    });\n  }\n\n  ngOnDestroy() {\n    this._listeners?.forEach(cleanup => cleanup());\n    this._change.complete();\n  }\n\n  /** Returns the viewport's width and height. */\n  getViewportSize(): Readonly<{width: number; height: number}> {\n    if (!this._viewportSize) {\n      this._updateViewportSize();\n    }\n\n    const output = {width: this._viewportSize!.width, height: this._viewportSize!.height};\n\n    // If we're not on a browser, don't cache the size since it'll be mocked out anyway.\n    if (!this._platform.isBrowser) {\n      this._viewportSize = null!;\n    }\n\n    return output;\n  }\n\n  /** Gets a DOMRect for the viewport's bounds. */\n  getViewportRect() {\n    // Use the document element's bounding rect rather than the window scroll properties\n    // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll\n    // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different\n    // conceptual viewports. Under most circumstances these viewports are equivalent, but they\n    // can disagree when the page is pinch-zoomed (on devices that support touch).\n    // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4\n    // We use the documentElement instead of the body because, by default (without a css reset)\n    // browsers typically give the document body an 8px margin, which is not included in\n    // getBoundingClientRect().\n    const scrollPosition = this.getViewportScrollPosition();\n    const {width, height} = this.getViewportSize();\n\n    return {\n      top: scrollPosition.top,\n      left: scrollPosition.left,\n      bottom: scrollPosition.top + height,\n      right: scrollPosition.left + width,\n      height,\n      width,\n    };\n  }\n\n  /** Gets the (top, left) scroll position of the viewport. */\n  getViewportScrollPosition(): ViewportScrollPosition {\n    // While we can get a reference to the fake document\n    // during SSR, it doesn't have getBoundingClientRect.\n    if (!this._platform.isBrowser) {\n      return {top: 0, left: 0};\n    }\n\n    // The top-left-corner of the viewport is determined by the scroll position of the document\n    // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about\n    // whether `document.body` or `document.documentElement` is the scrolled element, so reading\n    // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of\n    // `document.documentElement` works consistently, where the `top` and `left` values will\n    // equal negative the scroll position.\n    const document = this._document;\n    const window = this._getWindow();\n    const documentElement = document.documentElement!;\n    const documentRect = documentElement.getBoundingClientRect();\n\n    const top =\n      -documentRect.top ||\n      document.body.scrollTop ||\n      window.scrollY ||\n      documentElement.scrollTop ||\n      0;\n\n    const left =\n      -documentRect.left ||\n      document.body.scrollLeft ||\n      window.scrollX ||\n      documentElement.scrollLeft ||\n      0;\n\n    return {top, left};\n  }\n\n  /**\n   * Returns a stream that emits whenever the size of the viewport changes.\n   * This stream emits outside of the Angular zone.\n   * @param throttleTime Time in milliseconds to throttle the stream.\n   */\n  change(throttleTime: number = DEFAULT_RESIZE_TIME): Observable<Event> {\n    return throttleTime > 0 ? this._change.pipe(auditTime(throttleTime)) : this._change;\n  }\n\n  /** Use defaultView of injected document if available or fallback to global window reference */\n  private _getWindow(): Window {\n    return this._document.defaultView || window;\n  }\n\n  /** Updates the cached viewport size. */\n  private _updateViewportSize() {\n    const window = this._getWindow();\n    this._viewportSize = this._platform.isBrowser\n      ? {width: window.innerWidth, height: window.innerHeight}\n      : {width: 0, height: 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.dev/license\n */\n\nimport {Directive, InjectionToken} from '@angular/core';\nimport {CdkScrollable} from './scrollable';\n\nexport const VIRTUAL_SCROLLABLE = new InjectionToken<CdkVirtualScrollable>('VIRTUAL_SCROLLABLE');\n\n/**\n * Extending the {@link CdkScrollable} to be used as scrolling container for virtual scrolling.\n */\n@Directive()\nexport abstract class CdkVirtualScrollable extends CdkScrollable {\n  constructor(...args: unknown[]);\n  constructor() {\n    super();\n  }\n\n  /**\n   * Measure the viewport size for the provided orientation.\n   *\n   * @param orientation The orientation to measure the size from.\n   */\n  measureViewportSize(orientation: 'horizontal' | 'vertical') {\n    const viewportEl = this.elementRef.nativeElement;\n    return orientation === 'horizontal' ? viewportEl.clientWidth : viewportEl.clientHeight;\n  }\n\n  /**\n   * Measure the bounding DOMRect size including the scroll offset.\n   *\n   * @param from The edge to measure from.\n   */\n  abstract measureBoundingClientRectWithScrollOffset(\n    from: 'left' | 'top' | 'right' | 'bottom',\n  ): number;\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 {ListRange} from '../collections';\nimport {Platform} from '../platform';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  inject,\n  Inject,\n  Injector,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  animationFrameScheduler,\n  asapScheduler,\n  Observable,\n  Observer,\n  Subject,\n  Subscription,\n} from 'rxjs';\nimport {auditTime, startWith, takeUntil} from 'rxjs/operators';\nimport {CdkScrollable, ExtendedScrollToOptions} from './scrollable';\nimport {ViewportRuler} from './viewport-ruler';\nimport {CdkVirtualScrollRepeater} from './virtual-scroll-repeater';\nimport {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';\nimport {CdkVirtualScrollable, VIRTUAL_SCROLLABLE} from './virtual-scrollable';\n\n/** Checks if the given ranges are equal. */\nfunction rangesEqual(r1: ListRange, r2: ListRange): boolean {\n  return r1.start == r2.start && r1.end == r2.end;\n}\n\n/**\n * Scheduler to be used for scroll events. Needs to fall back to\n * something that doesn't rely on requestAnimationFrame on environments\n * that don't support it (e.g. server-side rendering).\n */\nconst SCROLL_SCHEDULER =\n  typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;\n\n/** A viewport that virtualizes its scrolling with the help of `CdkVirtualForOf`. */\n@Component({\n  selector: 'cdk-virtual-scroll-viewport',\n  templateUrl: 'virtual-scroll-viewport.html',\n  styleUrl: 'virtual-scroll-viewport.css',\n  host: {\n    'class': 'cdk-virtual-scroll-viewport',\n    '[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === \"horizontal\"',\n    '[class.cdk-virtual-scroll-orientation-vertical]': 'orientation !== \"horizontal\"',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: CdkScrollable,\n      useFactory: (\n        virtualScrollable: CdkVirtualScrollable | null,\n        viewport: CdkVirtualScrollViewport,\n      ) => virtualScrollable || viewport,\n      deps: [[new Optional(), new Inject(VIRTUAL_SCROLLABLE)], CdkVirtualScrollViewport],\n    },\n  ],\n})\nexport class CdkVirtualScrollViewport extends CdkVirtualScrollable implements OnInit, OnDestroy {\n  override elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n  private _scrollStrategy = inject<VirtualScrollStrategy>(VIRTUAL_SCROLL_STRATEGY, {\n    optional: true,\n  })!;\n  scrollable = inject<CdkVirtualScrollable>(VIRTUAL_SCROLLABLE, {optional: true})!;\n\n  private _platform = inject(Platform);\n\n  /** Emits when the viewport is detached from a CdkVirtualForOf. */\n  private readonly _detachedSubject = new Subject<void>();\n\n  /** Emits when the rendered range changes. */\n  private readonly _renderedRangeSubject = new Subject<ListRange>();\n\n  /** The direction the viewport scrolls. */\n  @Input()\n  get orientation() {\n    return this._orientation;\n  }\n\n  set orientation(orientation: 'horizontal' | 'vertical') {\n    if (this._orientation !== orientation) {\n      this._orientation = orientation;\n      this._calculateSpacerSize();\n    }\n  }\n  private _orientation: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Whether rendered items should persist in the DOM after scrolling out of view. By default, items\n   * will be removed.\n   */\n  @Input({transform: booleanAttribute}) appendOnly: boolean = false;\n\n  // Note: we don't use the typical EventEmitter here because we need to subscribe to the scroll\n  // strategy lazily (i.e. only if the user is actually listening to the events). We do this because\n  // depending on how the strategy calculates the scrolled index, it may come at a cost to\n  // performance.\n  /** Emits when the index of the first element visible in the viewport changes. */\n  @Output()\n  readonly scrolledIndexChange: Observable<number> = new Observable((observer: Observer<number>) =>\n    this._scrollStrategy.scrolledIndexChange.subscribe(index =>\n      Promise.resolve().then(() => this.ngZone.run(() => observer.next(index))),\n    ),\n  );\n\n  /** The element that wraps the rendered content. */\n  @ViewChild('contentWrapper', {static: true}) _contentWrapper: ElementRef<HTMLElement>;\n\n  /** A stream that emits whenever the rendered range changes. */\n  readonly renderedRangeStream: Observable<ListRange> = this._renderedRangeSubject;\n\n  /**\n   * The total size of all content (in pixels), including content that is not currently rendered.\n   */\n  private _totalContentSize = 0;\n\n  /** A string representing the `style.width` property value to be used for the spacer element. */\n  _totalContentWidth = '';\n\n  /** A string representing the `style.height` property value to be used for the spacer element. */\n  _totalContentHeight = '';\n\n  /**\n   * The CSS transform applied to the rendered subset of items so that they appear within the bounds\n   * of the visible viewport.\n   */\n  private _renderedContentTransform: string;\n\n  /** The currently rendered range of indices. */\n  private _renderedRange: ListRange = {start: 0, end: 0};\n\n  /** The length of the data bound to this viewport (in number of items). */\n  private _dataLength = 0;\n\n  /** The size of the viewport (in pixels). */\n  private _viewportSize = 0;\n\n  /** the currently attached CdkVirtualScrollRepeater. */\n  private _forOf: CdkVirtualScrollRepeater<any> | null;\n\n  /** The last rendered content offset that was set. */\n  private _renderedContentOffset = 0;\n\n  /**\n   * Whether the last rendered content offset was to the end of the content (and therefore needs to\n   * be rewritten as an offset to the start of the content).\n   */\n  private _renderedContentOffsetNeedsRewrite = false;\n\n  /** Whether there is a pending change detection cycle. */\n  private _isChangeDetectionPending = false;\n\n  /** A list of functions to run after the next change detection cycle. */\n  private _runAfterChangeDetection: Function[] = [];\n\n  /** Subscription to changes in the viewport size. */\n  private _viewportChanges = Subscription.EMPTY;\n\n  private _injector = inject(Injector);\n\n  private _isDestroyed = false;\n\n  constructor(...args: unknown[]);\n\n  constructor() {\n    super();\n    const viewportRuler = inject(ViewportRuler);\n\n    if (!this._scrollStrategy && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw Error('Error: cdk-virtual-scroll-viewport requires the \"itemSize\" property to be set.');\n    }\n\n    this._viewportChanges = viewportRuler.change().subscribe(() => {\n      this.checkViewportSize();\n    });\n\n    if (!this.scrollable) {\n      // No scrollable is provided, so the virtual-scroll-viewport needs to become a scrollable\n      this.elementRef.nativeElement.classList.add('cdk-virtual-scrollable');\n      this.scrollable = this;\n    }\n  }\n\n  override ngOnInit() {\n    // Scrolling depends on the element dimensions which we can't get during SSR.\n    if (!this._platform.isBrowser) {\n      return;\n    }\n\n    if (this.scrollable === this) {\n      super.ngOnInit();\n    }\n    // It's still too early to measure the viewport at this point. Deferring with a promise allows\n    // the Viewport to be rendered with the correct size before we measure. We run this outside the\n    // zone to avoid causing more change detection cycles. We handle the change detection loop\n    // ourselves instead.\n    this.ngZone.runOutsideAngular(() =>\n      Promise.resolve().then(() => {\n        this._measureViewportSize();\n        this._scrollStrategy.attach(this);\n\n        this.scrollable\n          .elementScrolled()\n          .pipe(\n            // Start off with a fake scroll event so we properly detect our initial position.\n            startWith(null),\n            // Collect multiple events into one until the next animation frame. This way if\n            // there are multiple scroll events in the same frame we only need to recheck\n            // our layout once.\n            auditTime(0, SCROLL_SCHEDULER),\n            // Usually `elementScrolled` is completed when the scrollable is destroyed, but\n            // that may not be the case if a `CdkVirtualScrollableElement` is used so we have\n            // to unsubscribe here just in case.\n            takeUntil(this._destroyed),\n          )\n          .subscribe(() => this._scrollStrategy.onContentScrolled());\n\n        this._markChangeDetectionNeeded();\n      }),\n    );\n  }\n\n  override ngOnDestroy() {\n    this.detach();\n    this._scrollStrategy.detach();\n\n    // Complete all subjects\n    this._renderedRangeSubject.complete();\n    this._detachedSubject.complete();\n    this._viewportChanges.unsubscribe();\n\n    this._isDestroyed = true;\n\n    super.ngOnDestroy();\n  }\n\n  /** Attaches a `CdkVirtualScrollRepeater` to this viewport. */\n  attach(forOf: CdkVirtualScrollRepeater<any>) {\n    if (this._forOf && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw Error('CdkVirtualScrollViewport is already attached.');\n    }\n\n    // Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length\n    // changes. Run outside the zone to avoid triggering change detection, since we're managing the\n    // change detection loop ourselves.\n    this.ngZone.runOutsideAngular(() => {\n      this._forOf = forOf;\n      this._forOf.dataStream.pipe(takeUntil(this._detachedSubject)).subscribe(data => {\n        const newLength = data.length;\n        if (newLength !== this._dataLength) {\n          this._dataLength = newLength;\n          this._scrollStrategy.onDataLengthChanged();\n        }\n        this._doChangeDetection();\n      });\n    });\n  }\n\n  /** Detaches the current `CdkVirtualForOf`. */\n  detach() {\n    this._forOf = null;\n    this._detachedSubject.next();\n  }\n\n  /** Gets the length of the data bound to this viewport (in number of items). */\n  getDataLength(): number {\n    return this._dataLength;\n  }\n\n  /** Gets the size of the viewport (in pixels). */\n  getViewportSize(): number {\n    return this._viewportSize;\n  }\n\n  // TODO(mmalerba): This is technically out of sync with what's really rendered until a render\n  // cycle happens. I'm being careful to only call it after the render cycle is complete and before\n  // setting it to something else, but its error prone and should probably be split into\n  // `pendingRange` and `renderedRange`, the latter reflecting whats actually in the DOM.\n\n  /** Get the current rendered range of items. */\n  getRenderedRange(): ListRange {\n    return this._renderedRange;\n  }\n\n  measureBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {\n    return this.getElementRef().nativeElement.getBoundingClientRect()[from];\n  }\n\n  /**\n   * Sets the total size of all content (in pixels), including content that is not currently\n   * rendered.\n   */\n  setTotalContentSize(size: number) {\n    if (this._totalContentSize !== size) {\n      this._totalContentSize = size;\n      this._calculateSpacerSize();\n      this._markChangeDetectionNeeded();\n    }\n  }\n\n  /** Sets the currently rendered range of indices. */\n  setRenderedRange(range: ListRange) {\n    if (!rangesEqual(this._renderedRange, range)) {\n      if (this.appendOnly) {\n        range = {start: 0, end: Math.max(this._renderedRange.end, range.end)};\n      }\n      this._renderedRangeSubject.next((this._renderedRange = range));\n      this._markChangeDetectionNeeded(() => this._scrollStrategy.onContentRendered());\n    }\n  }\n\n  /**\n   * Gets the offset from the start of the viewport to the start of the rendered data (in pixels).\n   */\n  getOffsetToRenderedContentStart(): number | null {\n    return this._renderedContentOffsetNeedsRewrite ? null : this._renderedContentOffset;\n  }\n\n  /**\n   * Sets the offset from the start of the viewport to either the start or end of the rendered data\n   * (in pixels).\n   */\n  setRenderedContentOffset(offset: number, to: 'to-start' | 'to-end' = 'to-start') {\n    // In appendOnly, we always start from the top\n    offset = this.appendOnly && to === 'to-start' ? 0 : offset;\n\n    // For a horizontal viewport in a right-to-left language we need to translate along the x-axis\n    // in the negative direction.\n    const isRtl = this.dir && this.dir.value == 'rtl';\n    const isHorizontal = this.orientation == 'horizontal';\n    const axis = isHorizontal ? 'X' : 'Y';\n    const axisDirection = isHorizontal && isRtl ? -1 : 1;\n    let transform = `translate${axis}(${Number(axisDirection * offset)}px)`;\n    this._renderedContentOffset = offset;\n    if (to === 'to-end') {\n      transform += ` translate${axis}(-100%)`;\n      // The viewport should rewrite this as a `to-start` offset on the next render cycle. Otherwise\n      // elements will appear to expand in the wrong direction (e.g. `mat-expansion-panel` would\n      // expand upward).\n      this._renderedContentOffsetNeedsRewrite = true;\n    }\n    if (this._renderedContentTransform != transform) {\n      // We know this value is safe because we parse `offset` with `Number()` before passing it\n      // into the string.\n      this._renderedContentTransform = transform;\n      this._markChangeDetectionNeeded(() => {\n        if (this._renderedContentOffsetNeedsRewrite) {\n          this._renderedContentOffset -= this.measureRenderedContentSize();\n          this._renderedContentOffsetNeedsRewrite = false;\n          this.setRenderedContentOffset(this._renderedContentOffset);\n        } else {\n          this._scrollStrategy.onRenderedOffsetChanged();\n        }\n      });\n    }\n  }\n\n  /**\n   * Scrolls to the given offset from the start of the viewport. Please note that this is not always\n   * the same as setting `scrollTop` or `scrollLeft`. In a horizontal viewport with right-to-left\n   * direction, this would be the equivalent of setting a fictional `scrollRight` property.\n   * @param offset The offset to scroll to.\n   * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.\n   */\n  scrollToOffset(offset: number, behavior: ScrollBehavior = 'auto') {\n    const options: ExtendedScrollToOptions = {behavior};\n    if (this.orientation === 'horizontal') {\n      options.start = offset;\n    } else {\n      options.top = offset;\n    }\n    this.scrollable.scrollTo(options);\n  }\n\n  /**\n   * Scrolls to the offset for the given index.\n   * @param index The index of the element to scroll to.\n   * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.\n   */\n  scrollToIndex(index: number, behavior: ScrollBehavior = 'auto') {\n    this._scrollStrategy.scrollToIndex(index, behavior);\n  }\n\n  /**\n   * Gets the current scroll offset from the start of the scrollable (in pixels).\n   * @param from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'\n   *     in horizontal mode.\n   */\n  override measureScrollOffset(\n    from?: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end',\n  ): number {\n    // This is to break the call cycle\n    let measureScrollOffset: InstanceType<typeof CdkVirtualScrollable>['measureScrollOffset'];\n    if (this.scrollable == this) {\n      measureScrollOffset = (_from: NonNullable<typeof from>) => super.measureScrollOffset(_from);\n    } else {\n      measureScrollOffset = (_from: NonNullable<typeof from>) =>\n        this.scrollable.measureScrollOffset(_from);\n    }\n\n    return Math.max(\n      0,\n      measureScrollOffset(from ?? (this.orientation === 'horizontal' ? 'start' : 'top')) -\n        this.measureViewportOffset(),\n    );\n  }\n\n  /**\n   * Measures the offset of the viewport from the scrolling container\n   * @param from The edge to measure from.\n   */\n  measureViewportOffset(from?: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end') {\n    let fromRect: 'left' | 'top'