@scion/components 18.1.0 → 19.0.0

package/fesm2022/scion-components-viewport.mjs

@@ -1,16 +1,17 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Directive, Input, NgZone, Component, ChangeDetectionStrategy, ViewChild, HostBinding, EventEmitter, ViewEncapsulation, Output, HostListener, NgModule } from '@angular/core';
+import { inject, NgZone, Injectable, ElementRef, Renderer2, input, effect, untracked, Directive, DestroyRef, viewChild, computed, Component, ChangeDetectionStrategy, HostBinding, output, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { fromEvent, merge, mergeWith, timer, of } from 'rxjs';
+import { debounceTime, startWith, map, distinctUntilChanged, first, withLatestFrom, takeWhile, takeUntil, switchMap } from 'rxjs/operators';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { subscribeIn, filterArray } from '@scion/toolkit/operators';
 import { coerceElement } from '@angular/cdk/coercion';
-import { debounceTime, startWith, map, distinctUntilChanged, takeUntil, switchMap, first, withLatestFrom, takeWhile } from 'rxjs/operators';
-import { BehaviorSubject, Subject, fromEvent, merge, of, timer } from 'rxjs';
-import { DOCUMENT, AsyncPipe } from '@angular/common';
 import { fromResize$, fromMutation$ } from '@scion/toolkit/observable';
-import { subscribeInside, filterArray } from '@scion/toolkit/operators';
-import * as i2 from '@angular/cdk/scrolling';
+import * as i1 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
 /*
- * Copyright (c) 2018-2019 Swiss Federal Railways
+ * Copyright (c) 2018-2024 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -22,26 +23,14 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
  * Provides the native scrollbar tracksize.
  */
 class SciNativeScrollbarTrackSizeProvider {
-    constructor(_document, _zone) {
-        this._document = _document;
-        this._zone = _zone;
-        this._trackSize$ = new BehaviorSubject(null);
-        this._destroy$ = new Subject();
-        this.installNativeScrollbarTrackSizeListener();
-    }
-    /**
-     * Returns an {Observable} which emits the native scrollbar track size, if any, or else `null`.
-     *
-     * Upon subscription, it emits the track size immediately, and then continuously emits when the track size changes.
-     */
-    get trackSize$() {
-        return this._trackSize$;
-    }
+    _document = inject(DOCUMENT);
+    _zone = inject(NgZone);
     /**
-     * Returns the native scrollbar track size, if any, or else `null`.
+     * Provides the track size of the native scrollbar, or `null` if the native scrollbars sit on top of the content.
      */
-    get trackSize() {
-        return this._trackSize$.getValue();
+    trackSize;
+    constructor() {
+        this.trackSize = this.createNativeScrollbarTrackSizeSignal();
     }
     /**
      * Computes the native scrollbar track size.
@@ -49,7 +38,7 @@ class SciNativeScrollbarTrackSizeProvider {
      * @returns native track size, or `null` if the native scrollbars sit on top of the content.
      */
     computeTrackSize() {
-        // create temporary viewport and viewport client with native scrollbars to compute scrolltrack width
+        // Create temporary viewport and viewport client with native scrollbars to compute the scrolltrack width.
         const viewportDiv = this._document.createElement('div');
         setStyle(viewportDiv, {
             position: 'absolute',
@@ -74,39 +63,29 @@ class SciNativeScrollbarTrackSizeProvider {
             hScrollbarTrackHeight: viewportBounds.height - viewportClientBounds.height,
             vScrollbarTrackWidth: viewportBounds.width - viewportClientBounds.width,
         };
-        // destroy temporary viewport
+        // Destroy temporary viewport.
         this._document.body.removeChild(viewportDiv);
         if (trackSize.hScrollbarTrackHeight === 0 && trackSize.vScrollbarTrackWidth === 0) {
             return null;
         }
         return trackSize;
     }
-    installNativeScrollbarTrackSizeListener() {
+    createNativeScrollbarTrackSizeSignal() {
         // We compute the size of the native scrollbar track when the browser fires the onresize window event.
         // This event is also fired on page zoom or when displaying a hidden document. Hidden documents do not have
         // a scrollbar track size until being displayed, e.g., after showing hidden iframes.
-        this._zone.runOutsideAngular(() => {
-            fromEvent(window, 'resize')
-                .pipe(debounceTime(5), startWith(null), // trigger the initial computation
-            map(() => this.computeTrackSize()), distinctUntilChanged((t1, t2) => JSON.stringify(t1) === JSON.stringify(t2)), takeUntil(this._destroy$))
-                .subscribe(trackSize => {
-                this._zone.run(() => this._trackSize$.next(trackSize));
-            });
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
+        const trackSize$ = fromEvent(window, 'resize')
+            .pipe(subscribeIn(fn => this._zone.runOutsideAngular(fn)), debounceTime(5), startWith(null), // trigger the initial computation
+        map(() => this.computeTrackSize()), distinctUntilChanged((t1, t2) => t1?.hScrollbarTrackHeight === t2?.hScrollbarTrackHeight && t1?.vScrollbarTrackWidth === t2?.vScrollbarTrackWidth));
+        return toSignal(trackSize$, { initialValue: null });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [{ token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.NgZone }] });
+        }], ctorParameters: () => [] });
 /**
  * Applies the given style(s) to the given element.
  *
@@ -140,24 +119,33 @@ function setStyle(element, style) {
  * to hide the pushed out native scrollbars.
  */
 class SciScrollableDirective {
-    constructor(_host, _renderer, nativeScrollbarTrackSizeProvider) {
-        this._host = _host;
-        this._renderer = _renderer;
-        this._destroy$ = new Subject();
-        this._inputChange$ = new Subject();
-        /**
-         * Controls whether to display native scrollbars.
-         * Has no effect if the native scrollbar sits on top of the content, e.g. in OS X.
-         */
-        this.isDisplayNativeScrollbar = false;
-        merge(nativeScrollbarTrackSizeProvider.trackSize$, this._inputChange$.pipe(map(() => nativeScrollbarTrackSizeProvider.trackSize)))
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(nativeScrollbarTrackSize => {
-            if (nativeScrollbarTrackSize === null) { // the native scrollbar sits on top of the content
-                this.useNativeScrollbars();
+    _host = inject((ElementRef)).nativeElement;
+    _renderer = inject(Renderer2);
+    _nativeScrollbarTrackSizeProvider = inject(SciNativeScrollbarTrackSizeProvider);
+    /**
+     * Controls whether to display native scrollbars.
+     * Has no effect if the native scrollbar sits on top of the content, e.g. in OS X.
+     */
+    displayNativeScrollbar = input(false, { alias: 'sciScrollableDisplayNativeScrollbar' });
+    constructor() {
+        this.controlDisplayOfNativeScrollbar();
+    }
+    /**
+     * Controls the display of the native scrollbar based on this directive's configuration.
+     */
+    controlDisplayOfNativeScrollbar() {
+        effect(() => {
+            const displayNativeScrollbar = this.displayNativeScrollbar();
+            if (displayNativeScrollbar) {
+                untracked(() => this.useNativeScrollbars());
+                return;
+            }
+            const nativeScrollbarTrackSize = this._nativeScrollbarTrackSizeProvider.trackSize();
+            if (nativeScrollbarTrackSize) {
+                untracked(() => this.shiftNativeScrollbars(nativeScrollbarTrackSize));
             }
             else {
-                this.isDisplayNativeScrollbar ? this.useNativeScrollbars() : this.shiftNativeScrollbars(nativeScrollbarTrackSize);
+                untracked(() => this.useNativeScrollbars());
             }
         });
     }
@@ -165,7 +153,7 @@ class SciScrollableDirective {
      * Uses the native scrollbars when content overflows.
      */
     useNativeScrollbars() {
-        this.setStyle(this._host.nativeElement, {
+        this.setStyle(this._host, {
             overflow: 'auto',
             width: '100%',
             height: '100%',
@@ -177,7 +165,7 @@ class SciScrollableDirective {
      * Shifts the native scrollbars out of the visible viewport area.
      */
     shiftNativeScrollbars(nativeScrollbarTrackSize) {
-        this.setStyle(this._host.nativeElement, {
+        this.setStyle(this._host, {
             overflow: 'scroll',
             width: `calc(100% + ${nativeScrollbarTrackSize.vScrollbarTrackWidth}px`,
             height: `calc(100% + ${nativeScrollbarTrackSize.hScrollbarTrackHeight}px`,
@@ -188,25 +176,15 @@ class SciScrollableDirective {
     setStyle(element, style) {
         Object.keys(style).forEach(key => this._renderer.setStyle(element, key, style[key]));
     }
-    ngOnChanges(changes) {
-        this._inputChange$.next();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: SciScrollableDirective, isStandalone: true, selector: "[sciScrollable]", inputs: { isDisplayNativeScrollbar: ["sciScrollableDisplayNativeScrollbar", "isDisplayNativeScrollbar"] }, usesOnChanges: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciScrollableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: SciScrollableDirective, isStandalone: true, selector: "[sciScrollable]", inputs: { displayNativeScrollbar: { classPropertyName: "displayNativeScrollbar", publicName: "sciScrollableDisplayNativeScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciScrollableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciScrollableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sciScrollable]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SciNativeScrollbarTrackSizeProvider }], propDecorators: { isDisplayNativeScrollbar: [{
-                type: Input,
-                args: ['sciScrollableDisplayNativeScrollbar']
-            }] } });
+        }], ctorParameters: () => [] });
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -251,54 +229,38 @@ class SciScrollbarComponent {
      *
      * @internal
      */
-    static { this.VIEWPORT_RESIZE_DEBOUNCE_TIME = 50; }
+    static VIEWPORT_RESIZE_DEBOUNCE_TIME = 50;
+    _host = inject((ElementRef)).nativeElement;
+    _document = inject(DOCUMENT);
+    _zone = inject(NgZone);
+    _destroyRef = inject(DestroyRef);
+    _lastDragPosition = null;
+    _overflow = false;
+    _thumbSizeFr = 0;
+    _thumbPositionFr = 0;
+    _thumbElement = viewChild.required('thumb_handle');
+    _vertical = computed(() => this.direction() === 'vscroll');
     get vertical() {
-        return this.direction === 'vscroll';
+        return this._vertical();
     }
     get horizontal() {
-        return this.direction === 'hscroll';
+        return !this._vertical();
     }
     get scrolling() {
         return this._lastDragPosition !== null;
     }
+    /**
+     * Specifies the direction of the scrollbar.
+     *
+     * By default, if not specified, renders a vertical scrollbar.
+     */
+    direction = input('vscroll');
     /**
      * The viewport to provide scrollbars for.
      */
-    set setViewport(viewport) {
-        this._viewport = viewport;
-        this._viewportChange$.next();
-    }
-    constructor(_host, _document, _zone) {
-        this._host = _host;
-        this._document = _document;
-        this._zone = _zone;
-        this._destroy$ = new Subject();
-        this._viewportChange$ = new Subject();
-        this._lastDragPosition = null;
-        this._overflow = false;
-        this._thumbSizeFr = 0;
-        this._thumbPositionFr = 0;
-        /**
-         * Specifies the direction of the scrollbar.
-         *
-         * By default, if not specified, renders a vertical scrollbar.
-         */
-        this.direction = 'vscroll';
-        this._viewportChange$
-            .pipe(switchMap(() => {
-            if (!this._viewport) {
-                return of(undefined);
-            }
-            return merge(this.viewportScrollChange$(), this.viewportDimensionChange$({ debounceTime: SciScrollbarComponent.VIEWPORT_RESIZE_DEBOUNCE_TIME }), this.viewportClientDimensionChange$({ debounceTime: SciScrollbarComponent.VIEWPORT_RESIZE_DEBOUNCE_TIME }));
-        }), subscribeInside(continueFn => this._zone.runOutsideAngular(continueFn)), takeUntil(this._destroy$))
-            .subscribe(() => {
-            if (this._viewport) {
-                this.renderScrollPosition();
-            }
-            else {
-                this.unsetScrollPosition();
-            }
-        });
+    viewport = input.required();
+    constructor() {
+        this.installScrollPositionRenderer();
     }
     /**
      * Computes the scroll position and updates CSS variables to render the scroll position in the UI.
@@ -318,7 +280,7 @@ class SciScrollbarComponent {
         }
         if (overflow !== this._overflow) {
             this._overflow = overflow;
-            overflow ? this._host.nativeElement.classList.add('overflow') : this._host.nativeElement.classList.remove('overflow');
+            overflow ? this._host.classList.add('overflow') : this._host.classList.remove('overflow');
         }
     }
     /**
@@ -331,14 +293,12 @@ class SciScrollbarComponent {
         this._overflow = false;
         this.setCssVariable('--ɵsci-scrollbar-thumb-position-fr', 0);
         this.setCssVariable('--ɵsci-scrollbar-thumb-size-fr', 0);
-        this._host.nativeElement.classList.remove('overflow');
+        this._host.classList.remove('overflow');
     }
-    /* @docs-private */
     onTouchStart(event) {
         event.preventDefault();
         this._lastDragPosition = this.vertical ? event.touches[0].screenY : event.touches[0].screenX;
     }
-    /* @docs-private */
     onTouchMove(event) {
         event.preventDefault();
         const newDragPositionPx = this.vertical ? event.touches[0].screenY : event.touches[0].screenX;
@@ -347,12 +307,10 @@ class SciScrollbarComponent {
         this._lastDragPosition = newDragPositionPx;
         this.moveViewportClient(viewportPanPx);
     }
-    /* @docs-private */
     onTouchEnd(event) {
         event.preventDefault();
         this._lastDragPosition = null;
     }
-    /* @docs-private */
     onMouseDown(mousedownEvent) {
         if (mousedownEvent.button !== 0) {
             return;
@@ -360,32 +318,49 @@ class SciScrollbarComponent {
         mousedownEvent.preventDefault();
         this._lastDragPosition = this.vertical ? mousedownEvent.screenY : mousedownEvent.screenX;
         // Listen for 'mousemove' events
-        this._zone.runOutsideAngular(() => {
-            const mousemoveListener = merge(fromEvent(this._document, 'mousemove'), fromEvent(this._document, 'sci-mousemove'))
-                .pipe(takeUntil(this._destroy$))
-                .subscribe(mousemoveEvent => {
-                mousemoveEvent.preventDefault();
-                const newDragPositionPx = this.vertical ? mousemoveEvent.screenY : mousemoveEvent.screenX;
-                const scrollbarPanPx = newDragPositionPx - this._lastDragPosition;
-                const viewportPanPx = this.toViewportPanPx(scrollbarPanPx);
-                this._lastDragPosition = newDragPositionPx;
-                this.moveViewportClient(viewportPanPx);
-            });
-            // Listen for 'mouseup' events; use 'capture phase' and 'stop propagation' to not close overlays
-            merge(fromEvent(this._document, 'mouseup', { capture: true }), fromEvent(this._document, 'sci-mouseup'))
-                .pipe(first(), takeUntil(this._destroy$))
-                .subscribe(mouseupEvent => {
-                mouseupEvent.stopPropagation();
-                mousemoveListener.unsubscribe();
-                this._lastDragPosition = null;
-            });
+        const mousemoveListener = merge(fromEvent(this._document, 'mousemove'), fromEvent(this._document, 'sci-mousemove'))
+            .pipe(subscribeIn(fn => this._zone.runOutsideAngular(fn)), takeUntilDestroyed(this._destroyRef))
+            .subscribe(mousemoveEvent => {
+            NgZone.assertNotInAngularZone();
+            mousemoveEvent.preventDefault();
+            const newDragPositionPx = this.vertical ? mousemoveEvent.screenY : mousemoveEvent.screenX;
+            const scrollbarPanPx = newDragPositionPx - this._lastDragPosition;
+            const viewportPanPx = this.toViewportPanPx(scrollbarPanPx);
+            this._lastDragPosition = newDragPositionPx;
+            this.moveViewportClient(viewportPanPx);
+        });
+        // Listen for 'mouseup' events; use 'capture phase' and 'stop propagation' to not close overlays
+        merge(fromEvent(this._document, 'mouseup', { capture: true }), fromEvent(this._document, 'sci-mouseup'))
+            .pipe(subscribeIn(fn => this._zone.runOutsideAngular(fn)), first(), takeUntilDestroyed(this._destroyRef))
+            .subscribe(mouseupEvent => {
+            NgZone.assertNotInAngularZone();
+            mouseupEvent.stopPropagation();
+            mousemoveListener.unsubscribe();
+            this._lastDragPosition = null;
         });
     }
-    /* @docs-private */
     onScrollTrackMouseDown(event, direction) {
         const signum = (direction === 'up' ? -1 : +1);
         this.scrollWhileMouseDown(this.toViewportPanPx(signum * this.thumbSize), event);
     }
+    /**
+     * Renders the current scroll position when the viewport is scrolled.
+     */
+    installScrollPositionRenderer() {
+        effect(onCleanup => {
+            const viewport = this.viewport();
+            untracked(() => {
+                if (!viewport) {
+                    this.unsetScrollPosition();
+                    return;
+                }
+                const subscription = viewportScroll$(viewport)
+                    .pipe(mergeWith(viewportSize$(viewport, { debounceTime: SciScrollbarComponent.VIEWPORT_RESIZE_DEBOUNCE_TIME })), mergeWith(viewportClientSize$(viewport, { debounceTime: SciScrollbarComponent.VIEWPORT_RESIZE_DEBOUNCE_TIME })), subscribeIn(fn => this._zone.runOutsideAngular(fn)))
+                    .subscribe(() => this.renderScrollPosition());
+                onCleanup(() => subscription.unsubscribe());
+            });
+        });
+    }
     /**
      * Projects the given scrollbar scroll pixels into viewport scroll pixels.
      */
@@ -399,10 +374,10 @@ class SciScrollbarComponent {
      */
     moveViewportClient(viewportPanPx) {
         if (this.vertical) {
-            this._viewport.scrollTop += viewportPanPx;
+            this.viewport().scrollTop += viewportPanPx;
         }
         else {
-            this._viewport.scrollLeft += viewportPanPx;
+            this.viewport().scrollLeft += viewportPanPx;
         }
     }
     /**
@@ -434,81 +409,32 @@ class SciScrollbarComponent {
             this.moveViewportClient(viewportScrollPx);
         });
     }
-    /**
-     * Emits whenever the viewport scrolls.
-     */
-    viewportScrollChange$() {
-        return fromEvent(this._viewport, 'scroll', { passive: true }).pipe(map(() => undefined));
-    }
-    /**
-     * Emits on subscription, and then each time the size of the viewport changes.
-     */
-    viewportDimensionChange$(options) {
-        return fromResize$(this._viewport)
-            .pipe(
-        // Debouncing is particularly important in the context of Angular animations, since they continuously
-        // trigger resize events. Debouncing prevents the scrollbar from flickering, for example, when the user
-        // expands a panel that contains a viewport.
-        debounceTime(options.debounceTime), map(() => undefined));
-    }
-    /**
-     * Emits on subscription, and then each time the size or style property of the viewport client changes.
-     */
-    viewportClientDimensionChange$(options) {
-        return this.children$(this._viewport)
-            .pipe(switchMap(children => merge(...children.map(child => merge(fromResize$(child), 
-        // Observe style mutations since some transformations change the scroll position without necessarily triggering a dimension change,
-        // e.g., `scale` or `translate` used by some virtual scroll implementations
-        fromMutation$(child, { subtree: false, childList: false, attributeFilter: ['style'] }))))), 
-        // Debouncing is particularly important in the context of Angular animations, since they continuously
-        // trigger resize events. Debouncing prevents the scrollbar from flickering, for example, when the user
-        // expands a panel that contains a viewport.
-        debounceTime(options.debounceTime), map(() => undefined));
-    }
-    /**
-     * Emits the children of the passed element, and then each time child elements are added or removed.
-     */
-    children$(element) {
-        return fromMutation$(element, { subtree: false, childList: true })
-            .pipe(startWith(undefined), map(() => Array.from(element.children)), filterArray((child) => child instanceof HTMLElement));
-    }
     setCssVariable(key, value) {
-        this._host.nativeElement.style.setProperty(key, value);
+        this._host.style.setProperty(key, value);
     }
     get viewportSize() {
-        return this._viewport ? (this.vertical ? this._viewport.clientHeight : this._viewport.clientWidth) : 0;
+        return this.viewport() ? (this.vertical ? this.viewport().clientHeight : this.viewport().clientWidth) : 0;
     }
     get viewportClientSize() {
-        return this._viewport ? (this.vertical ? this._viewport.scrollHeight : this._viewport.scrollWidth) : 0;
+        return this.viewport() ? (this.vertical ? this.viewport().scrollHeight : this.viewport().scrollWidth) : 0;
     }
     get scrollPosition() {
-        return this._viewport ? (this.vertical ? this._viewport.scrollTop : this._viewport.scrollLeft) : 0;
+        return this.viewport() ? (this.vertical ? this.viewport().scrollTop : this.viewport().scrollLeft) : 0;
     }
     get thumbSize() {
-        const thumbElement = this.thumbElement.nativeElement;
+        const thumbElement = this._thumbElement().nativeElement;
         return this.vertical ? thumbElement.clientHeight : thumbElement.clientWidth;
     }
     get trackSize() {
-        const trackElement = this._host.nativeElement;
-        return this.vertical ? trackElement.clientHeight : trackElement.clientWidth;
-    }
-    /* @docs-private */
-    ngOnDestroy() {
-        this._destroy$.next();
+        return this.vertical ? this._host.clientHeight : this._host.clientWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciScrollbarComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: SciScrollbarComponent, isStandalone: true, selector: "sci-scrollbar", inputs: { direction: "direction", setViewport: ["viewport", "setViewport"] }, host: { properties: { "class.vertical": "this.vertical", "class.horizontal": "this.horizontal", "class.scrolling": "this.scrolling" } }, viewQueries: [{ propertyName: "thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, static: true }], ngImport: i0, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical\"\n     [class.horizontal]=\"horizontal\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical\"\n       [class.horizontal]=\"horizontal\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context:not(.overflow){display:none}:host-context:hover>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context:hover>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context:hover>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.0", type: SciScrollbarComponent, isStandalone: true, selector: "sci-scrollbar", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.vertical": "this.vertical", "class.horizontal": "this.horizontal", "class.scrolling": "this.scrolling" } }, viewQueries: [{ propertyName: "_thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical\"\n     [class.horizontal]=\"horizontal\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical\"\n       [class.horizontal]=\"horizontal\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context:not(.overflow){display:none}:host-context:hover>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context:hover>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context:hover>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciScrollbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciScrollbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-scrollbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical\"\n     [class.horizontal]=\"horizontal\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical\"\n       [class.horizontal]=\"horizontal\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context:not(.overflow){display:none}:host-context:hover>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context:hover>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context:hover>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.NgZone }], propDecorators: { thumbElement: [{
-                type: ViewChild,
-                args: ['thumb_handle', { static: true }]
-            }], vertical: [{
+            args: [{ selector: 'sci-scrollbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical\"\n     [class.horizontal]=\"horizontal\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical\"\n       [class.horizontal]=\"horizontal\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context:not(.overflow){display:none}:host-context:hover>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context:hover>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context:hover>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { vertical: [{
                 type: HostBinding,
                 args: ['class.vertical']
             }], horizontal: [{
@@ -517,12 +443,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
             }], scrolling: [{
                 type: HostBinding,
                 args: ['class.scrolling']
-            }], direction: [{
-                type: Input
-            }], setViewport: [{
-                type: Input,
-                args: [{ alias: 'viewport', required: true }]
             }] } });
+/**
+ * Emits whenever the viewport scrolls.
+ */
+function viewportScroll$(viewport) {
+    return fromEvent(viewport, 'scroll', { passive: true }).pipe(map(() => undefined));
+}
+/**
+ * Emits on subscription, and then each time the size of the viewport changes.
+ */
+function viewportSize$(viewport, options) {
+    return fromResize$(viewport)
+        .pipe(
+    // Debouncing is particularly important in the context of Angular animations, since they continuously
+    // trigger resize events. Debouncing prevents the scrollbar from flickering, for example, when the user
+    // expands a panel that contains a viewport.
+    debounceTime(options.debounceTime), map(() => undefined));
+}
+/**
+ * Emits on subscription, and then each time the size or style property of the viewport client changes.
+ */
+function viewportClientSize$(viewport, options) {
+    return children$(viewport)
+        .pipe(switchMap(children => merge(...children.map(child => merge(fromResize$(child), 
+    // Observe style mutations since some transformations change the scroll position without necessarily triggering a dimension change,
+    // e.g., `scale` or `translate` used by some virtual scroll implementations
+    fromMutation$(child, { subtree: false, childList: false, attributeFilter: ['style'] }))))), 
+    // Debouncing is particularly important in the context of Angular animations, since they continuously
+    // trigger resize events. Debouncing prevents the scrollbar from flickering, for example, when the user
+    // expands a panel that contains a viewport.
+    debounceTime(options.debounceTime), map(() => undefined));
+}
+/**
+ * Emits the children of the passed element, and then each time child elements are added or removed.
+ */
+function children$(element) {
+    return fromMutation$(element, { subtree: false, childList: true })
+        .pipe(startWith(undefined), map(() => Array.from(element.children)), filterArray((child) => child instanceof HTMLElement));
+}
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -601,40 +560,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
  * ```
  */
 class SciViewportComponent {
-    /** @internal */
-    set setViewport(viewport) {
-        this._viewportElement = coerceElement(viewport);
-    }
-    /** @internal */
-    set setViewportClient(viewportClient) {
-        this._viewportClient = coerceElement(viewportClient);
-    }
+    _viewport = viewChild.required('viewport');
+    _viewportClient = viewChild.required('viewport_client');
+    _host = inject((ElementRef)).nativeElement;
+    nativeScrollbarTrackSizeProvider = inject(SciNativeScrollbarTrackSizeProvider);
     /**
-     * Controls whether to use native scrollbars or, which is by default, emulated scrollbars that sit on top of the viewport client.
-     * In the latter, the viewport client remains natively scrollable.
+     * Controls if to use the native scrollbar or a scrollbar that sits on top of the viewport. Defaults to `on-top`.
      */
-    set scrollbarStyle(scrollbarStyle) {
-        this._scrollbarStyle = scrollbarStyle || 'on-top';
-    }
-    get scrollbarStyle() {
-        return this._scrollbarStyle;
-    }
-    constructor(host, nativeScrollbarTrackSizeProvider) {
-        this.host = host;
-        this.nativeScrollbarTrackSizeProvider = nativeScrollbarTrackSizeProvider;
-        this._scrollbarStyle = 'on-top';
-        /**
-         * Emits upon a scroll event.
-         *
-         * You can add [sciDimension] directive to the viewport or viewport client to be notified about layout changes.
-         */
-        this.scroll = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
+    scrollbarStyle = input('on-top');
+    /**
+     * Emits when the viewport is scrolled. The event is emitted outside the Angular zone to avoid unnecessary change detection cycles.
+     */
+    scroll = output();
+    constructor() {
+        this.installScrollEmitter();
     }
     focus() {
-        this._viewportElement?.focus();
-    }
-    onScroll(event) {
-        this.scroll.emit(event);
+        this.viewportElement.focus();
     }
     /**
      * Returns the number of pixels that the viewport client is scrolled vertically.
@@ -642,7 +584,7 @@ class SciViewportComponent {
      * @see Element.scrollTop
      */
     get scrollTop() {
-        return this._viewportElement.scrollTop;
+        return this.viewportElement.scrollTop;
     }
     /**
      * Sets the number of pixels that the viewport client is scrolled vertically.
@@ -650,7 +592,7 @@ class SciViewportComponent {
      * @see Element.scrollTop
      */
     set scrollTop(scrollTop) {
-        this._viewportElement.scrollTop = scrollTop;
+        this.viewportElement.scrollTop = scrollTop;
     }
     /**
      * Returns the number of pixels that the viewport client is scrolled horizontally.
@@ -658,7 +600,7 @@ class SciViewportComponent {
      * @see Element.scrollLeft
      */
     get scrollLeft() {
-        return this._viewportElement.scrollLeft;
+        return this.viewportElement.scrollLeft;
     }
     /**
      * Sets the number of pixels that the viewport client is scrolled horizontally.
@@ -666,7 +608,7 @@ class SciViewportComponent {
      * @see Element.scrollLeft
      */
     set scrollLeft(scrollLeft) {
-        this._viewportElement.scrollLeft = scrollLeft;
+        this.viewportElement.scrollLeft = scrollLeft;
     }
     /**
      * Returns the height of the viewport client.
@@ -674,7 +616,7 @@ class SciViewportComponent {
      * @see Element.scrollHeight
      */
     get scrollHeight() {
-        return this._viewportElement.scrollHeight;
+        return this.viewportElement.scrollHeight;
     }
     /**
      * Returns the width of the viewport client.
@@ -682,19 +624,19 @@ class SciViewportComponent {
      * @see Element.scrollWidth
      */
     get scrollWidth() {
-        return this._viewportElement.scrollWidth;
+        return this.viewportElement.scrollWidth;
     }
     /**
      * Returns the viewport {HTMLElement}.
      */
     get viewportElement() {
-        return this._viewportElement;
+        return this._viewport().nativeElement;
     }
     /**
      * Returns the viewport client {HTMLElement}.
      */
     get viewportClientElement() {
-        return this._viewportClient;
+        return this._viewportClient().nativeElement;
     }
     /**
      * Checks if the specified element is scrolled into the viewport.
@@ -716,15 +658,15 @@ class SciViewportComponent {
         // The calculation of whether an element is scrolled into view may be wrong by a few pixels if the viewport contains elements with decimal sizes.
         // This can happen because `offsetLeft` and `offsetTop` operate on an integer (not a decimal), losing precision that can accumulate.
         // To avoid incorrect calculation when there is no viewport overflow, we consider all contained elements as scrolled into the view.
-        if (this._viewportElement.scrollWidth <= this._viewportElement.clientWidth && this._viewportElement.scrollHeight <= this._viewportElement.clientHeight) {
+        if (this.viewportElement.scrollWidth <= this.viewportElement.clientWidth && this.viewportElement.scrollHeight <= this.viewportElement.clientHeight) {
             return true;
         }
         const elBottom = elTop + coerceElement(element).offsetHeight;
         const elRight = elLeft + coerceElement(element).offsetWidth;
-        const vpTop = this._viewportElement.scrollTop;
-        const vpLeft = this._viewportElement.scrollLeft;
-        const vpBottom = vpTop + this._viewportElement.clientHeight;
-        const vpRight = vpLeft + this._viewportElement.clientWidth;
+        const vpTop = this.viewportElement.scrollTop;
+        const vpLeft = this.viewportElement.scrollLeft;
+        const vpBottom = vpTop + this.viewportElement.clientHeight;
+        const vpRight = vpLeft + this.viewportElement.clientWidth;
         if (fit === 'full') {
             return (elTop >= vpTop && elBottom <= vpBottom) && (elLeft >= vpLeft && elRight <= vpRight);
         }
@@ -747,8 +689,8 @@ class SciViewportComponent {
         if (left === null) {
             return;
         }
-        this._viewportElement.scrollTop = top - offset;
-        this._viewportElement.scrollLeft = left - offset;
+        this.viewportElement.scrollTop = top - offset;
+        this.viewportElement.scrollLeft = left - offset;
     }
     /**
      * Computes the distance of the element to the viewport's left or top border.
@@ -774,31 +716,35 @@ class SciViewportComponent {
                 return null;
             }
             el = offsetParent;
-        } while (el !== this.host.nativeElement);
+        } while (el !== this._host);
         return offset;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciViewportComponent, deps: [{ token: i0.ElementRef }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: SciViewportComponent, isStandalone: true, selector: "sci-viewport", inputs: { scrollbarStyle: "scrollbarStyle" }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "setViewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "setViewportClient", first: true, predicate: ["viewport_client"], descendants: true, static: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n     cdkScrollable\n     (scroll)=\"onScroll($event)\">\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null) {\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"/>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+    /**
+     * Emits when the scroll position changes.
+     */
+    installScrollEmitter() {
+        const zone = inject(NgZone);
+        effect(onCleanup => {
+            const viewport = this._viewport();
+            untracked(() => {
+                const subscription = fromEvent(viewport.nativeElement, 'scroll')
+                    .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)))
+                    .subscribe(event => this.scroll.emit(event));
+                onCleanup(() => subscription.unsubscribe());
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: SciViewportComponent, isStandalone: true, selector: "sci-viewport", inputs: { scrollbarStyle: { classPropertyName: "scrollbarStyle", publicName: "scrollbarStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "_viewportClient", first: true, predicate: ["viewport_client"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\"\n     cdkScrollable>\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle() === 'on-top' && nativeScrollbarTrackSizeProvider.trackSize() !== null) {\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"/>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciViewportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciViewportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, standalone: true, imports: [
-                        AsyncPipe,
+            args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, imports: [
                         ScrollingModule,
                         SciScrollableDirective,
                         SciScrollbarComponent,
-                    ], template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n     cdkScrollable\n     (scroll)=\"onScroll($event)\">\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null) {\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"/>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SciNativeScrollbarTrackSizeProvider }], propDecorators: { setViewport: [{
-                type: ViewChild,
-                args: ['viewport', { static: true }]
-            }], setViewportClient: [{
-                type: ViewChild,
-                args: ['viewport_client', { static: true }]
-            }], scrollbarStyle: [{
-                type: Input
-            }], scroll: [{
-                type: Output
-            }], focus: [{
+                    ], template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\"\n     cdkScrollable>\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle() === 'on-top' && nativeScrollbarTrackSizeProvider.trackSize() !== null) {\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"/>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { focus: [{
                 type: HostListener,
                 args: ['focus']
             }] } });
@@ -814,17 +760,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
  */
 /**
  * Provides a viewport component with scrollbars that sit on top of the viewport client.
+ *
+ * @deprecated since version 19.0.0; Import standalone components and directive instead; API will be removed in a future release.
  */
 class SciViewportModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciViewportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: SciViewportModule, imports: [SciViewportComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciViewportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: SciViewportModule, imports: [SciViewportComponent,
             SciScrollbarComponent,
             SciScrollableDirective], exports: [SciViewportComponent,
             SciScrollbarComponent,
-            SciScrollableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciViewportModule, imports: [SciViewportComponent] }); }
+            SciScrollableDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciViewportModule, imports: [SciViewportComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciViewportModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciViewportModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [