@scion/components 21.1.1 → 22.1.0

package/fesm2022/scion-components-viewport.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, NgZone, Injectable, input, ElementRef, Renderer2, effect, untracked, Directive, DestroyRef, viewChild, signal, computed, ChangeDetectionStrategy, Component, output, ViewEncapsulation } from '@angular/core';
-import { fromEvent, merge, mergeWith, timer, of } from 'rxjs';
-import { debounceTime, startWith, map, distinctUntilChanged, first, withLatestFrom, takeWhile, takeUntil, switchMap } from 'rxjs/operators';
+import { inject, DOCUMENT, NgZone, Injectable, input, ElementRef, Renderer2, effect, untracked, Directive, DestroyRef, viewChild, computed, signal, Component, output, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { fromEvent, race, tap, merge, finalize, timer, exhaustMap, of, concatWith, mergeWith } from 'rxjs';
+import { debounceTime, startWith, map, distinctUntilChanged, takeUntil, withLatestFrom, switchMap } from 'rxjs/operators';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { subscribeIn, filterArray } from '@scion/toolkit/operators';
+import { subscribeIn } from '@scion/toolkit/operators';
 import { coerceElement } from '@angular/cdk/coercion';
 import { fromResize$, fromMutation$ } from '@scion/toolkit/observable';
 import { CdkScrollable } from '@angular/cdk/scrolling';
@@ -77,10 +77,10 @@ class SciNativeScrollbarTrackSizeProvider {
         map(() => this.computeTrackSize()), distinctUntilChanged((t1, t2) => t1?.hScrollbarTrackHeight === t2?.hScrollbarTrackHeight && t1?.vScrollbarTrackWidth === t2?.vScrollbarTrackWidth));
         return toSignal(trackSize$, { initialValue: null });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -121,7 +121,7 @@ class SciScrollableDirective {
      * 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, ...(ngDevMode ? [{ debugName: "displayNativeScrollbar", alias: 'sciScrollableDisplayNativeScrollbar' }] : [{ alias: 'sciScrollableDisplayNativeScrollbar' }]));
+    displayNativeScrollbar = input(false, { ...(ngDevMode ? { debugName: "displayNativeScrollbar" } : /* istanbul ignore next */ {}), alias: 'sciScrollableDisplayNativeScrollbar' });
     _host = inject((ElementRef)).nativeElement;
     _renderer = inject(Renderer2);
     _nativeScrollbarTrackSizeProvider = inject(SciNativeScrollbarTrackSizeProvider);
@@ -174,10 +174,10 @@ class SciScrollableDirective {
     setStyle(element, style) {
         Object.keys(style).forEach(key => this._renderer.setStyle(element, key, style[key]));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciScrollableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: SciScrollableDirective, isStandalone: true, selector: "[sciScrollable]", inputs: { displayNativeScrollbar: { classPropertyName: "displayNativeScrollbar", publicName: "sciScrollableDisplayNativeScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciScrollableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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: "21.0.0", ngImport: i0, type: SciScrollableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciScrollableDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[sciScrollable]' }]
         }], ctorParameters: () => [], propDecorators: { displayNativeScrollbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sciScrollableDisplayNativeScrollbar", required: false }] }] } });
@@ -195,7 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  * Renders a vertical or horizontal scrollbar.
  *
  * The scrollbar features the following functionality:
- * - allows to move the thumb by mouse or touch
+ * - allows to move the thumb by mouse
  * - enlarges the thumb if the mouse pointer is near the thumb
  * - allows paging on mousedown on the scroll track
  *
@@ -204,7 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
  * To style a specific `sci-scrollbar` component, the following CSS variables can be set directly on the component.
  *
- * - sci-scrollbar-color:    Sets the color of the scrollbar.
+ * - --sci-scrollbar-color:    Sets the color of the scrollbar.
  *
  * Example:
  *
@@ -229,95 +229,111 @@ class SciScrollbarComponent {
     /**
      * Specifies the direction of the scrollbar. Defaults to a vertical scrollbar.
      */
-    direction = input('vscroll', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    direction = input('vscroll', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
     /**
-     * The viewport to provide scrollbars for.
+     * Specifies the viewport associated with the scrollbar.
      */
-    viewport = input.required(...(ngDevMode ? [{ debugName: "viewport" }] : []));
+    viewport = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
     _host = inject(ElementRef).nativeElement;
     _document = inject(DOCUMENT);
     _zone = inject(NgZone);
     _destroyRef = inject(DestroyRef);
     _thumbElement = viewChild.required('thumb_handle');
-    _lastDragPosition = signal(null, ...(ngDevMode ? [{ debugName: "_lastDragPosition" }] : []));
-    vertical = computed(() => this.direction() === 'vscroll', ...(ngDevMode ? [{ debugName: "vertical" }] : []));
-    horizontal = computed(() => !this.vertical(), ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
-    scrolling = computed(() => this._lastDragPosition() !== null, ...(ngDevMode ? [{ debugName: "scrolling" }] : []));
-    _overflow = false;
-    _thumbSizeFr = 0;
-    _thumbPositionFr = 0;
+    vertical = computed(() => this.direction() === 'vscroll', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    horizontal = computed(() => !this.vertical(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "horizontal" }] : /* istanbul ignore next */ []));
+    scrolling = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrolling" }] : /* istanbul ignore next */ []));
+    overflow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    thumbSizeFr = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbSizeFr" }] : /* istanbul ignore next */ []));
+    thumbPositionFr = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbPositionFr" }] : /* istanbul ignore next */ []));
     constructor() {
         this.installScrollPositionRenderer();
     }
     /**
-     * Computes the scroll position and updates CSS variables to render the scroll position in the UI.
+     * Computes the scroll position and updates CSS variables to render the scroll position.
      */
     renderScrollPosition() {
         NgZone.assertNotInAngularZone();
-        const viewportSize = this.viewportSize;
-        const viewportClientSize = this.viewportClientSize;
-        const thumbPositionFr = this.scrollPosition / viewportClientSize;
-        const thumbSizeFr = viewportSize / viewportClientSize;
-        const overflow = viewportClientSize > viewportSize;
-        if (thumbPositionFr !== this._thumbPositionFr || thumbSizeFr !== this._thumbSizeFr) {
-            this._thumbPositionFr = thumbPositionFr;
-            this._thumbSizeFr = thumbSizeFr;
-            this.setCssVariable('--ɵsci-scrollbar-thumb-position-fr', thumbPositionFr);
-            this.setCssVariable('--ɵsci-scrollbar-thumb-size-fr', thumbSizeFr);
-        }
-        if (overflow !== this._overflow) {
-            this._overflow = overflow;
-            overflow ? this._host.classList.add('overflow') : this._host.classList.remove('overflow');
-        }
-    }
-    onTouchStart(event) {
-        event.preventDefault();
-        this._lastDragPosition.set(this.vertical() ? event.touches[0].screenY : event.touches[0].screenX);
+        const viewportSize = this.viewportSize();
+        const viewportClientSize = this.viewportClientSize();
+        this.thumbPositionFr.set(this.viewportScrollPosition() / viewportClientSize);
+        this.thumbSizeFr.set(viewportSize / viewportClientSize);
+        this.overflow.set(viewportClientSize > viewportSize);
     }
-    onTouchMove(event) {
-        event.preventDefault();
-        const newDragPositionPx = this.vertical() ? event.touches[0].screenY : event.touches[0].screenX;
-        const scrollbarPanPx = newDragPositionPx - this._lastDragPosition();
-        const viewportPanPx = this.toViewportPanPx(scrollbarPanPx);
-        this._lastDragPosition.set(newDragPositionPx);
-        this.moveViewportClient(viewportPanPx);
-    }
-    onTouchEnd(event) {
-        event.preventDefault();
-        this._lastDragPosition.set(null);
-    }
-    onMouseDown(mousedownEvent) {
+    /**
+     * Method invoked when clicking on the scrollbar thumb.
+     */
+    onThumbMouseDown(mousedownEvent) {
         if (mousedownEvent.button !== 0) {
             return;
         }
+        this.scrolling.set(true);
+        // Prevent text selection during drag.
         mousedownEvent.preventDefault();
-        this._lastDragPosition.set(this.vertical() ? mousedownEvent.screenY : mousedownEvent.screenX);
-        // Listen for 'mousemove' events
-        const mousemoveListener = merge(fromEvent(this._document, 'mousemove'), fromEvent(this._document, 'sci-mousemove'))
-            .pipe(subscribeIn(fn => this._zone.runOutsideAngular(fn)), takeUntilDestroyed(this._destroyRef))
+        // Memoize offset where thumb was clicked.
+        const [thumbStartPosition] = this.thumbPosition();
+        const thumbStartOffset = (this.vertical() ? mousedownEvent.pageY : mousedownEvent.pageX) - thumbStartPosition;
+        // Stop scrolling when releasing the mouse. Handle the event in the capture phase and stop propagation to not close a potential overlay when releasing the mouse outside the overlay.
+        const mouseUp$ = race(fromEvent(this._document, 'mouseup', { capture: true, once: true }), fromEvent(this._document, 'sci-mouseup', { once: true }))
+            .pipe(tap(mouseupEvent => mouseupEvent.stopPropagation()));
+        // Track pointer until mouse release.
+        merge(fromEvent(this._document, 'mousemove'), fromEvent(this._document, 'sci-mousemove'))
+            .pipe(subscribeIn(fn => this._zone.runOutsideAngular(fn)), takeUntilDestroyed(this._destroyRef), takeUntil(mouseUp$), finalize(() => this.scrolling.set(false)))
             .subscribe(mousemoveEvent => {
             NgZone.assertNotInAngularZone();
+            // Prevent user agent scrolling while during drag.
             mousemoveEvent.preventDefault();
-            const newDragPositionPx = this.vertical() ? mousemoveEvent.screenY : mousemoveEvent.screenX;
-            const scrollbarPanPx = newDragPositionPx - this._lastDragPosition();
-            const viewportPanPx = this.toViewportPanPx(scrollbarPanPx);
-            this._lastDragPosition.set(newDragPositionPx);
-            this.moveViewportClient(viewportPanPx);
+            // Calculate new thumb position.
+            const pointerPosition = this.vertical() ? mousemoveEvent.pageY : mousemoveEvent.pageX;
+            this.scrollViewport(pointerPosition - thumbStartOffset);
         });
-        // 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 => {
+    }
+    /**
+     * Method invoked when clicking on the scrollbar track.
+     *
+     * Scrolls in discrete steps to the pointer, then switches to regular scrolling until releasing the mouse.
+     */
+    onScrollTrackMouseDown(event) {
+        const mouseMove$ = merge(fromEvent(this._document, 'mousemove'), fromEvent(this._document, 'sci-mousemove'));
+        // Stop scrolling when releasing the mouse. Handle the event in the capture phase and stop propagation to not close a potential overlay when releasing the mouse outside the overlay.
+        const mouseUp$ = race(fromEvent(this._document, 'mouseup', { capture: true, once: true }), fromEvent(this._document, 'sci-mouseup', { once: true }))
+            .pipe(tap(mouseupEvent => mouseupEvent.stopPropagation()));
+        // Prevent text selection during drag.
+        event.preventDefault();
+        this.scrolling.set(true);
+        // Scroll in discrete steps to the pointer position, then switch to regular scrolling.
+        timer(250, 50)
+            .pipe(
+        // Track current pointer position.
+        withLatestFrom(mouseMove$.pipe(startWith(event)), (_tick, event) => event), 
+        // Scroll immediately on initial click.
+        startWith(event), subscribeIn(fn => this._zone.runOutsideAngular(fn)), exhaustMap(event => {
+            const pointerPosition = this.vertical() ? event.pageY : event.pageX;
+            const [thumbStartPosition, thumbEndPosition] = this.thumbPosition();
+            const thumbSize = thumbEndPosition - thumbStartPosition;
+            // Step scroll until the pointer hits the thumb.
+            if (!isBetween(pointerPosition, { from: thumbStartPosition - thumbSize, to: thumbEndPosition + thumbSize })) {
+                const scrollingDown = pointerPosition > thumbEndPosition;
+                return of(scrollingDown ? thumbStartPosition + thumbSize : thumbStartPosition - thumbSize);
+            }
+            // Switch to "smooth scrolling" following the pointer.
+            return of(event)
+                .pipe(concatWith(mouseMove$), map(event => (this.vertical() ? event.pageY : event.pageX) - (thumbSize / 2)));
+        }), 
+        // Stop on mouse release.
+        takeUntil(mouseUp$), finalize(() => this.scrolling.set(false)))
+            .subscribe((thumbPosition) => {
             NgZone.assertNotInAngularZone();
-            mouseupEvent.stopPropagation();
-            mousemoveListener.unsubscribe();
-            this._lastDragPosition.set(null);
+            this.scrollViewport(thumbPosition);
         });
     }
-    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.
      */
@@ -333,85 +349,101 @@ class SciScrollbarComponent {
         });
     }
     /**
-     * Projects the given scrollbar scroll pixels into viewport scroll pixels.
-     */
-    toViewportPanPx(scrollbarPanPx) {
-        const scrollRangePx = this.trackSize - this.thumbSize;
-        const scrollRatio = scrollbarPanPx / scrollRangePx;
-        return scrollRatio * (this.viewportClientSize - this.viewportSize);
-    }
-    /**
-     * Moves the viewport client by the specified numbers of pixels.
+     * Moves the scrollbar thumb to the specified position, scrolling the viewport accordingly.
+     *
+     * The thumb position must be given in page coordinates relative to the top-left corner of the document.
      */
-    moveViewportClient(viewportPanPx) {
+    scrollViewport(thumbPosition) {
+        const [scrollbarComponentStartPosition] = this.scrollbarComponentPosition();
+        const scrollbarBorderWidth = this.vertical() ? this._host.clientTop : this._host.clientLeft;
+        const scrollRatio = clamp((thumbPosition - scrollbarComponentStartPosition - scrollbarBorderWidth) / (this.trackSize() - this.thumbSize()), { min: 0, max: 1 });
+        const viewportScrollPosition = scrollRatio * (this.viewportClientSize() - this.viewportSize());
         if (this.vertical()) {
-            this.viewport().scrollTop += viewportPanPx;
+            this.viewport().scrollTop = viewportScrollPosition;
         }
         else {
-            this.viewport().scrollLeft += viewportPanPx;
+            this.viewport().scrollLeft = viewportScrollPosition;
         }
     }
     /**
-     * Indicates if the content overflows.
+     * Returns the position of this component in page coordinates.
+     *
+     * Returned coordinates are relative to the top-left corner of the document.
+     * Depending on the scrollbar orientation, returned coordinates are `[top, bottom]` or `[left, right]`.
      */
-    get overflow() {
-        return this._overflow;
+    scrollbarComponentPosition() {
+        const boundingBox = this._host.getBoundingClientRect();
+        return this.vertical() ? [boundingBox.top + window.scrollY, boundingBox.bottom + window.scrollY] : [boundingBox.left + window.scrollX, boundingBox.right + window.scrollX];
     }
     /**
-     * Scrolls continuously while holding the mouse pressed, or until the mouse leaves the scrolltrack.
+     * Returns the size of the viewport in pixels.
+     *
+     * The viewport is the container for scrollable content (viewport client), displaying scrollbars if it overflows.
+     * Depending on the scrollbar orientation, the returned size is `viewport.clientHeight` or `viewport.clientWidth`.
      */
-    scrollWhileMouseDown(viewportScrollPx, mousedownEvent) {
-        // The `EventTarget` type of `Event.target` is not yet compatible with `FromEventTarget` used in `fromEvent`.
-        // This will be fixed in rxjs version 7.0.0. Refer to https://github.com/ReactiveX/rxjs/commit/5f022d784570684632e6fd5ae247fc259ee34c4b
-        // for more details.
-        const scrollTrackElement = mousedownEvent.target;
-        // scroll continuously every 50ms after an initial delay of 250ms
-        timer(250, 50)
-            .pipe(
-        // continue chain with latest mouse event
-        withLatestFrom(merge(of(mousedownEvent), fromEvent(scrollTrackElement, 'mousemove')), (tick, event) => event), 
-        // start immediately
-        startWith(mousedownEvent), 
-        // stop scrolling if the thumb hits the mouse pointer position
-        takeWhile((event) => scrollTrackElement === this._document.elementFromPoint(event.clientX, event.clientY)), debounceTime(10), 
-        // stop scrolling on mouseout or mouseup
-        takeUntil(merge(fromEvent(scrollTrackElement, 'mouseout'), fromEvent(scrollTrackElement, 'mouseup'))))
-            .subscribe(() => {
-            this.moveViewportClient(viewportScrollPx);
-        });
-    }
-    setCssVariable(key, value) {
-        this._host.style.setProperty(key, `${value}`);
-    }
-    get viewportSize() {
+    viewportSize() {
         return this.vertical() ? this.viewport().clientHeight : this.viewport().clientWidth;
     }
-    get viewportClientSize() {
+    /**
+     * Returns the size of the viewport client in pixels.
+     *
+     * The viewport client represents scrollable content displayed in the viewport.
+     * Depending on the scrollbar orientation, the returned size is `viewport.scrollHeight` or `viewport.scrollWidth`.
+     */
+    viewportClientSize() {
         return this.vertical() ? this.viewport().scrollHeight : this.viewport().scrollWidth;
     }
-    get scrollPosition() {
+    /**
+     * Returns the viewport's scroll position in pixels.
+     *
+     * Depending on the scrollbar orientation, the returned position is `viewport.scrollTop` or `viewport.scrollLeft`.
+     */
+    viewportScrollPosition() {
         return this.vertical() ? this.viewport().scrollTop : this.viewport().scrollLeft;
     }
-    get thumbSize() {
+    /**
+     * Returns the size of the scrollbar thumb in pixels.
+     *
+     * The thumb is the handle used to scroll the scrollbar.
+     */
+    thumbSize() {
         const thumbElement = this._thumbElement().nativeElement;
-        return this.vertical() ? thumbElement.clientHeight : thumbElement.clientWidth;
+        return this.vertical() ? thumbElement.offsetHeight : thumbElement.offsetWidth;
     }
-    get trackSize() {
+    /**
+     * Returns the current thumb position in page coordinates.
+     *
+     * Returned coordinates are relative to the top-left corner of the document.
+     * Depending on the scrollbar orientation, returned coordinates are `[top, bottom]` or `[left, right]`.
+     */
+    thumbPosition() {
+        const boundingBox = this._thumbElement().nativeElement.getBoundingClientRect();
+        return this.vertical() ? [boundingBox.top + window.scrollY, boundingBox.bottom + window.scrollY] : [boundingBox.left + window.scrollX, boundingBox.right + window.scrollX];
+    }
+    /**
+     * Returns the size of the scrollbar track in pixels.
+     *
+     * The scrollbar track is the track along which the scrollbar thumb moves.
+     */
+    trackSize() {
         return this.vertical() ? this._host.clientHeight : this._host.clientWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.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": "vertical()", "class.horizontal": "horizontal()", "class.scrolling": "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", 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": "vertical()", "class.horizontal": "horizontal()", "class.scrolling": "scrolling()", "class.overflow": "overflow()", "style.--\u0275sci-scrollbar-thumb-position-fr": "thumbPositionFr()", "style.--\u0275sci-scrollbar-thumb-size-fr": "thumbSizeFr()" } }, viewQueries: [{ propertyName: "_thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- scrolltrack for moving the viewport client upwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onThumbMouseDown($event)\">\n  <div class=\"thumb e2e-thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack for moving the viewport client downwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;box-sizing:border-box;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column;width:8px}:host.horizontal{flex-direction:row;height:8px}:host>div.scrolltrack:first-child{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host:not(.overflow){display:none}:host:hover>div.thumb-handle>div.thumb,:host.scrolling>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host:hover>div.thumb-handle>div.thumb.vertical,:host.scrolling>div.thumb-handle>div.thumb.vertical{width:100%}:host:hover>div.thumb-handle>div.thumb.horizontal,:host.scrolling>div.thumb-handle>div.thumb.horizontal{height:100%}:host>div.thumb-handle{display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column;min-height:20px}:host>div.thumb-handle.horizontal{flex-direction:row;min-width:20px}: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:last-child{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciScrollbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciScrollbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-scrollbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'sci-scrollbar', host: {
                         '[class.vertical]': 'vertical()',
                         '[class.horizontal]': 'horizontal()',
                         '[class.scrolling]': 'scrolling()',
-                    }, 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"] }]
+                        '[class.overflow]': 'overflow()',
+                        '[style.--ɵsci-scrollbar-thumb-position-fr]': 'thumbPositionFr()',
+                        '[style.--ɵsci-scrollbar-thumb-size-fr]': 'thumbSizeFr()',
+                    }, template: "<!-- scrolltrack for moving the viewport client upwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onThumbMouseDown($event)\">\n  <div class=\"thumb e2e-thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack for moving the viewport client downwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;box-sizing:border-box;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column;width:8px}:host.horizontal{flex-direction:row;height:8px}:host>div.scrolltrack:first-child{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host:not(.overflow){display:none}:host:hover>div.thumb-handle>div.thumb,:host.scrolling>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host:hover>div.thumb-handle>div.thumb.vertical,:host.scrolling>div.thumb-handle>div.thumb.vertical{width:100%}:host:hover>div.thumb-handle>div.thumb.horizontal,:host.scrolling>div.thumb-handle>div.thumb.horizontal{height:100%}:host>div.thumb-handle{display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column;min-height:20px}:host>div.thumb-handle.horizontal{flex-direction:row;min-width:20px}: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:last-child{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], viewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewport", required: true }] }], _thumbElement: [{ type: i0.ViewChild, args: ['thumb_handle', { isSignal: true }] }] } });
 /**
- * Emits whenever the viewport scrolls.
+ * Emits whenever the viewport is scrolled.
  */
 function viewportScroll$(viewport) {
     return fromEvent(viewport, 'scroll', { passive: true }).pipe(map(() => undefined));
@@ -446,7 +478,23 @@ function viewportClientSize$(viewport, options) {
  */
 function children$(element) {
     return fromMutation$(element, { subtree: false, childList: true })
-        .pipe(startWith(undefined), map(() => Array.from(element.children)), filterArray((child) => child instanceof HTMLElement));
+        .pipe(startWith(undefined), map(() => Array.from(element.children)
+        // Map to slotted content if a slot (Shadow DOM).
+        .flatMap(child => child instanceof HTMLSlotElement ? child.assignedElements() : child)
+        // Filter HTML elements.
+        .filter((child) => child instanceof HTMLElement)));
+}
+/**
+ * Returns the value clamped to the inclusive range of min and max.
+ */
+function clamp(value, minmax) {
+    return Math.max(minmax.min, Math.min(value, minmax.max));
+}
+/**
+ * Returns whether the value is between the specified range (inclusive).
+ */
+function isBetween(value, range) {
+    return value >= range.from && value <= range.to;
 }
 
 /*
@@ -529,7 +577,8 @@ class SciViewportComponent {
     /**
      * Controls if to use the native scrollbar or a scrollbar that sits on top of the viewport. Defaults to `on-top`.
      */
-    scrollbarStyle = input('on-top', ...(ngDevMode ? [{ debugName: "scrollbarStyle" }] : []));
+    scrollbarStyle = input('on-top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollbarStyle" }] : /* istanbul ignore next */ []));
     /**
      * Emits when the viewport is scrolled. The event is emitted outside the Angular zone to avoid unnecessary change detection cycles.
      */
@@ -700,18 +749,18 @@ class SciViewportComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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:is(:not(:hover):not(:active),:host(: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}:host>sci-scrollbar.vertical{top:1px;right:1px;bottom:1px}:host>sci-scrollbar.horizontal{left:1px;bottom:1px;right:1px}\n"], dependencies: [{ kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciViewportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, imports: [
                         SciScrollableDirective,
                         SciScrollbarComponent,
                         CdkScrollable,
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '(focus)': '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"] }]
+                    }, 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:is(:not(:hover):not(:active),:host(: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}:host>sci-scrollbar.vertical{top:1px;right:1px;bottom:1px}:host>sci-scrollbar.horizontal{left:1px;bottom:1px;right:1px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scrollbarStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarStyle", required: false }] }], scroll: [{ type: i0.Output, args: ["scroll"] }], _viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], _viewportClient: [{ type: i0.ViewChild, args: ['viewport_client', { isSignal: true }] }] } });
 
 /*