@scion/components 22.1.0 → 22.3.0

package/fesm2022/scion-components-viewport.mjs

@@ -1,15 +1,16 @@
 import * as i0 from '@angular/core';
-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 { inject, DOCUMENT, NgZone, Injectable, input, ElementRef, Renderer2, computed, effect, untracked, Directive, DestroyRef, viewChild, signal, Component, output, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { coerceElement } from '@angular/cdk/coercion';
+import { fromEvent, race, tap, merge, finalize, timer, exhaustMap, of, concatWith, mergeWith, switchMap as switchMap$1, concat, map as map$1 } from 'rxjs';
 import { debounceTime, startWith, map, distinctUntilChanged, takeUntil, withLatestFrom, switchMap } from 'rxjs/operators';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { subscribeIn } from '@scion/toolkit/operators';
-import { coerceElement } from '@angular/cdk/coercion';
 import { fromResize$, fromMutation$ } from '@scion/toolkit/observable';
+import { isBetween, clamp } from '@scion/toolkit/util';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 
 /*
- * Copyright (c) 2018-2024 Swiss Federal Railways
+ * Copyright (c) 2018-2026 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -17,25 +18,27 @@ import { CdkScrollable } from '@angular/cdk/scrolling';
  *
  *  SPDX-License-Identifier: EPL-2.0
  */
-/**
- * Provides the native scrollbar tracksize.
- */
-class SciNativeScrollbarTrackSizeProvider {
+/** @inheritDoc */
+class ɵSciNativeScrollbarTrackSizeProvider {
     _document = inject(DOCUMENT);
-    _zone = inject(NgZone);
-    /**
-     * Provides the track size of the native scrollbar, or `null` if the native scrollbars sit on top of the content.
-     */
-    trackSize;
-    constructor() {
-        this.trackSize = this.createNativeScrollbarTrackSizeSignal();
+    /** @inheritDoc */
+    trackSize = this.computeNativeScrollbarTrackSize();
+    computeNativeScrollbarTrackSize() {
+        // 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.
+        const zone = inject(NgZone);
+        const trackSize$ = fromEvent(window, 'resize')
+            .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)), debounceTime(5), startWith(null), // trigger the initial computation
+        map(() => this.calculateTrackSize()), distinctUntilChanged((t1, t2) => t1?.hScrollbarTrackHeight === t2?.hScrollbarTrackHeight && t1?.vScrollbarTrackWidth === t2?.vScrollbarTrackWidth));
+        return toSignal(trackSize$, { initialValue: null });
     }
     /**
      * Computes the native scrollbar track size.
      *
      * @returns native track size, or `null` if the native scrollbars sit on top of the content.
      */
-    computeTrackSize() {
+    calculateTrackSize() {
         // Create temporary viewport and viewport client with native scrollbars to compute the scrolltrack width.
         const viewportDiv = this._document.createElement('div');
         setStyle(viewportDiv, {
@@ -68,22 +71,12 @@ class SciNativeScrollbarTrackSizeProvider {
         }
         return trackSize;
     }
-    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.
-        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 ɵ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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciNativeScrollbarTrackSizeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciNativeScrollbarTrackSizeProvider });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciNativeScrollbarTrackSizeProvider, decorators: [{
+            type: Injectable
+        }] });
 /**
  * Applies the given style(s) to the given element.
  *
@@ -96,6 +89,27 @@ function setStyle(element, styles) {
     Object.entries(styles).forEach(([name, value]) => element.style.setProperty(name, value));
 }
 
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Provides the native scrollbar tracksize.
+ */
+class SciNativeScrollbarTrackSizeProvider {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root', useClass: ɵSciNativeScrollbarTrackSizeProvider });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useClass: ɵSciNativeScrollbarTrackSizeProvider }]
+        }] });
+
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
  *
@@ -115,16 +129,37 @@ function setStyle(element, styles) {
  * This directive expects its host element to be the only child in document flow in its parent DOM element. It makes the host element
  * fill up the entire space (width and height set to 100%). The parent element must have its CSS `overflow` property set to `hidden`
  * to hide the pushed out native scrollbars.
+ *
+ * This directive provides the `isNativeScrollbarCropped` signal, which indicates whether native scrollbars are pushed out of the viewport element.
+ * In templates, access it via the exported template reference variable `sciScrollable`.
+ *
+ * ```html
+ * <div sciScrollable #sciScrollable="sciScrollable" #viewport>
+ *   content
+ * </div>
+ *
+ * <!-- Render scrollbars only if native scrollbars are pushed out of the viewport element. -->
+ * @if (sciScrollable.isNativeScrollbarCropped()) {
+ *   <sci-scrollbar [viewport]="viewport" direction="vscroll"/>
+ *   <sci-scrollbar [viewport]="viewport" direction="hscroll"/>
+ * }
+ * ```
  */
 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" } : /* istanbul ignore next */ {}), alias: 'sciScrollableDisplayNativeScrollbar' });
     _host = inject((ElementRef)).nativeElement;
     _renderer = inject(Renderer2);
     _nativeScrollbarTrackSizeProvider = inject(SciNativeScrollbarTrackSizeProvider);
+    /**
+     * Indicates whether native scrollbars are pushed out of the viewport element.
+     */
+    isNativeScrollbarCropped = computed(() => !this.displayNativeScrollbar() && this._nativeScrollbarTrackSizeProvider.trackSize() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNativeScrollbarCropped" }] : /* istanbul ignore next */ []));
     constructor() {
         this.controlDisplayOfNativeScrollbar();
     }
@@ -133,14 +168,9 @@ class SciScrollableDirective {
      */
     controlDisplayOfNativeScrollbar() {
         effect(() => {
-            const displayNativeScrollbar = this.displayNativeScrollbar();
-            if (displayNativeScrollbar) {
-                untracked(() => this.useNativeScrollbars());
-                return;
-            }
-            const nativeScrollbarTrackSize = this._nativeScrollbarTrackSizeProvider.trackSize();
-            if (nativeScrollbarTrackSize) {
-                untracked(() => this.shiftNativeScrollbars(nativeScrollbarTrackSize));
+            if (this.isNativeScrollbarCropped()) {
+                const trackSize = this._nativeScrollbarTrackSizeProvider.trackSize();
+                untracked(() => this.shiftNativeScrollbars(trackSize));
             }
             else {
                 untracked(() => this.useNativeScrollbars());
@@ -162,24 +192,27 @@ class SciScrollableDirective {
     /**
      * Shifts the native scrollbars out of the visible viewport area.
      */
-    shiftNativeScrollbars(nativeScrollbarTrackSize) {
+    shiftNativeScrollbars(trackSize) {
         this.setStyle(this._host, {
             overflow: 'scroll',
-            width: `calc(100% + ${nativeScrollbarTrackSize.vScrollbarTrackWidth}px`,
-            height: `calc(100% + ${nativeScrollbarTrackSize.hScrollbarTrackHeight}px`,
-            marginRight: `-${nativeScrollbarTrackSize.vScrollbarTrackWidth}px`,
-            marginBottom: `-${nativeScrollbarTrackSize.hScrollbarTrackHeight}px`,
+            width: `calc(100% + ${trackSize.vScrollbarTrackWidth}px`,
+            height: `calc(100% + ${trackSize.hScrollbarTrackHeight}px`,
+            marginRight: `-${trackSize.vScrollbarTrackWidth}px`,
+            marginBottom: `-${trackSize.hScrollbarTrackHeight}px`,
         });
     }
     setStyle(element, style) {
         Object.keys(style).forEach(key => this._renderer.setStyle(element, key, style[key]));
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciScrollableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SciScrollableDirective, isStandalone: true, selector: "[sciScrollable]", inputs: { displayNativeScrollbar: { classPropertyName: "displayNativeScrollbar", publicName: "sciScrollableDisplayNativeScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["sciScrollable"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciScrollableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciScrollableDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[sciScrollable]' }]
+            args: [{
+                    selector: '[sciScrollable]',
+                    exportAs: 'sciScrollable',
+                }]
         }], ctorParameters: () => [], propDecorators: { displayNativeScrollbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sciScrollableDisplayNativeScrollbar", required: false }] }] } });
 
 /*
@@ -216,16 +249,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * ```
  */
 class SciScrollbarComponent {
-    /**
-     * Timeout for debouncing viewport resize events that trigger the scroll position computation.
-     *
-     * 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.
-     *
-     * @internal
-     */
-    static VIEWPORT_RESIZE_DEBOUNCE_TIME = 50;
     /**
      * Specifies the direction of the scrollbar. Defaults to a vertical scrollbar.
      */
@@ -240,7 +263,8 @@ class SciScrollbarComponent {
     _document = inject(DOCUMENT);
     _zone = inject(NgZone);
     _destroyRef = inject(DestroyRef);
-    _thumbElement = viewChild.required('thumb_handle');
+    _thumbElement = viewChild.required('thumb_handle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_thumbElement" }] : /* istanbul ignore next */ []));
     vertical = computed(() => this.direction() === 'vscroll', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
     horizontal = computed(() => !this.vertical(), /* @ts-ignore */
@@ -277,9 +301,10 @@ class SciScrollbarComponent {
         this.scrolling.set(true);
         // Prevent text selection during drag.
         mousedownEvent.preventDefault();
+        // Calculate screen offset to convert screen coordinates into client coordinates, required for `sci-mousemove` events which originate from other documents (iframes).
+        const { screenOffsetX, screenOffsetY } = calculateScreenOffset(mousedownEvent);
         // Memoize offset where thumb was clicked.
-        const [thumbStartPosition] = this.thumbPosition();
-        const thumbStartOffset = (this.vertical() ? mousedownEvent.pageY : mousedownEvent.pageX) - thumbStartPosition;
+        const thumbStartOffset = this.vertical() ? mousedownEvent.offsetY : mousedownEvent.offsetX;
         // 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()));
@@ -291,7 +316,7 @@ class SciScrollbarComponent {
             // Prevent user agent scrolling while during drag.
             mousemoveEvent.preventDefault();
             // Calculate new thumb position.
-            const pointerPosition = this.vertical() ? mousemoveEvent.pageY : mousemoveEvent.pageX;
+            const pointerPosition = this.vertical() ? mousemoveEvent.screenY - screenOffsetY : mousemoveEvent.screenX - screenOffsetX;
             this.scrollViewport(pointerPosition - thumbStartOffset);
         });
     }
@@ -301,13 +326,15 @@ class SciScrollbarComponent {
      * Scrolls in discrete steps to the pointer, then switches to regular scrolling until releasing the mouse.
      */
     onScrollTrackMouseDown(event) {
+        this.scrolling.set(true);
+        // Prevent text selection during drag.
+        event.preventDefault();
         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.
+        // 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);
+        // Calculate screen offset to convert screen coordinates into client coordinates, required for `sci-mousemove` events which originate from other documents (iframes).
+        const { screenOffsetX, screenOffsetY } = calculateScreenOffset(event);
         // Scroll in discrete steps to the pointer position, then switch to regular scrolling.
         timer(250, 50)
             .pipe(
@@ -315,7 +342,7 @@ class SciScrollbarComponent {
         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 pointerPosition = this.vertical() ? event.screenY - screenOffsetY : event.screenX - screenOffsetX;
             const [thumbStartPosition, thumbEndPosition] = this.thumbPosition();
             const thumbSize = thumbEndPosition - thumbStartPosition;
             // Step scroll until the pointer hits the thumb.
@@ -325,7 +352,7 @@ class SciScrollbarComponent {
             }
             // Switch to "smooth scrolling" following the pointer.
             return of(event)
-                .pipe(concatWith(mouseMove$), map(event => (this.vertical() ? event.pageY : event.pageX) - (thumbSize / 2)));
+                .pipe(concatWith(mouseMove$), map(event => (this.vertical() ? event.screenY - screenOffsetY : event.screenX - screenOffsetX) - (thumbSize / 2)));
         }), 
         // Stop on mouse release.
         takeUntil(mouseUp$), finalize(() => this.scrolling.set(false)))
@@ -342,8 +369,10 @@ class SciScrollbarComponent {
             const viewport = this.viewport();
             untracked(() => {
                 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());
+                    .pipe(mergeWith(viewportSize$(viewport)), mergeWith(viewportClientSize$(viewport)), subscribeIn(fn => this._zone.runOutsideAngular(fn)))
+                    .subscribe(() => {
+                    this.renderScrollPosition();
+                });
                 onCleanup(() => subscription.unsubscribe());
             });
         });
@@ -351,7 +380,7 @@ class SciScrollbarComponent {
     /**
      * 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.
+     * The thumb position must be given in client coordinates (relative to the top-left corner of the page viewport).
      */
     scrollViewport(thumbPosition) {
         const [scrollbarComponentStartPosition] = this.scrollbarComponentPosition();
@@ -366,14 +395,14 @@ class SciScrollbarComponent {
         }
     }
     /**
-     * Returns the position of this component in page coordinates.
+     * Returns the position of this component in client coordinates.
      *
-     * Returned coordinates are relative to the top-left corner of the document.
+     * Returned coordinates are relative to the top-left corner of the page viewport.
      * Depending on the scrollbar orientation, returned coordinates are `[top, bottom]` or `[left, right]`.
      */
     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];
+        return this.vertical() ? [boundingBox.top, boundingBox.bottom] : [boundingBox.left, boundingBox.right];
     }
     /**
      * Returns the size of the viewport in pixels.
@@ -411,14 +440,14 @@ class SciScrollbarComponent {
         return this.vertical() ? thumbElement.offsetHeight : thumbElement.offsetWidth;
     }
     /**
-     * Returns the current thumb position in page coordinates.
+     * Returns the current thumb position in client coordinates.
      *
-     * Returned coordinates are relative to the top-left corner of the document.
+     * Returned coordinates are relative to the top-left corner of the page viewport.
      * 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];
+        return this.vertical() ? [boundingBox.top, boundingBox.bottom] : [boundingBox.left, boundingBox.right];
     }
     /**
      * Returns the size of the scrollbar track in pixels.
@@ -428,10 +457,10 @@ class SciScrollbarComponent {
     trackSize() {
         return this.vertical() ? this._host.clientHeight : this._host.clientWidth;
     }
-    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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", 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: "22.0.1", ngImport: i0, type: SciScrollbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciScrollbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-scrollbar', host: {
                         '[class.vertical]': 'vertical()',
@@ -451,27 +480,18 @@ function viewportScroll$(viewport) {
 /**
  * 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));
+function viewportSize$(viewport) {
+    return fromResize$(viewport).pipe(map(() => undefined));
 }
 /**
  * Emits on subscription, and then each time the size or style property of the viewport client changes.
  */
-function viewportClientSize$(viewport, options) {
+function viewportClientSize$(viewport) {
     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));
+    fromMutation$(child, { subtree: false, childList: false, attributeFilter: ['style'] }))))), map(() => undefined));
 }
 /**
  * Emits the children of the passed element, and then each time child elements are added or removed.
@@ -485,16 +505,18 @@ function children$(element) {
         .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).
+ * Calculates the distance between the top-left corner of the screen (monitor) and the top-left corner of the page viewport of this document.
+ *
+ * Use to convert screen coordinates from `sci-mousemove` and `sci-mouseup` events into client coordinates relative to the page viewport of the current document.
+ *
+ * The `sci-mousemove` and `sci-mouseup` events originate from other documents (iframes) and do not include client coordinates. Even if they did, they would be
+ * relative to the source document, not the current one.
  */
-function isBetween(value, range) {
-    return value >= range.from && value <= range.to;
+function calculateScreenOffset(mousedownEvent) {
+    return {
+        screenOffsetX: mousedownEvent.screenX - mousedownEvent.clientX,
+        screenOffsetY: mousedownEvent.screenY - mousedownEvent.clientY,
+    };
 }
 
 /*
@@ -584,12 +606,14 @@ class SciViewportComponent {
      */
     scroll = output(); // eslint-disable-line @angular-eslint/no-output-native
     _host = inject(ElementRef).nativeElement;
-    _viewport = viewChild.required('viewport');
-    _viewportClient = viewChild.required('viewport_client');
-    nativeScrollbarTrackSizeProvider = inject(SciNativeScrollbarTrackSizeProvider);
-    constructor() {
-        this.installScrollEmitter();
-    }
+    _viewport = viewChild.required('viewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_viewport" }] : /* istanbul ignore next */ []));
+    _viewportClient = viewChild.required('viewport_client', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_viewportClient" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates whether currently scrolling the viewport.
+     */
+    scrolling = this.computeScrolling(this._viewport);
     focus() {
         this.viewportElement.focus();
     }
@@ -735,24 +759,17 @@ class SciViewportComponent {
         return offset;
     }
     /**
-     * Emits when the scroll position changes.
+     * Computes whether currently scrolling the viewport.
      */
-    installScrollEmitter() {
+    computeScrolling(viewport) {
         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());
-            });
-        });
+        return toSignal(toObservable(viewport)
+            .pipe(switchMap$1(viewport => fromEvent(viewport.nativeElement, 'scroll', { passive: true }).pipe(subscribeIn(fn => zone.runOutsideAngular(fn)))), tap(event => this.scroll.emit(event)), switchMap$1(() => concat(of(true), timer(150).pipe(map$1(() => false))))), { initialValue: false });
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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'\" #sciScrollable=\"sciScrollable\"\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' && sciScrollable.isNativeScrollbarCropped()) {\n  <sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport\"/>\n  <sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport\"/>\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:2px;right:1px;bottom:2px}:host>sci-scrollbar.horizontal{left:2px;bottom:1px;right:2px}\n"], dependencies: [{ kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"], exportAs: ["sciScrollable"] }, { 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: "22.0.1", ngImport: i0, type: SciViewportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, imports: [
                         SciScrollableDirective,
@@ -760,8 +777,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         CdkScrollable,
                     ], 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: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 }] }] } });
+                    }, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\" #sciScrollable=\"sciScrollable\"\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' && sciScrollable.isNativeScrollbarCropped()) {\n  <sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport\"/>\n  <sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport\"/>\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:2px;right:1px;bottom:2px}:host>sci-scrollbar.horizontal{left:2px;bottom:1px;right:2px}\n"] }]
+        }], 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 }] }] } });
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways