@scion/components 13.0.0

package/fesm2015/scion-components-viewport.mjs

@@ -0,0 +1,846 @@
+import * as i0 from '@angular/core';
+import { Injectable, Inject, NgZone, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Input, Directive, EventEmitter, Output, HostListener, NgModule } from '@angular/core';
+import * as i5 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { coerceElement } from '@angular/cdk/coercion';
+import { BehaviorSubject, Subject, fromEvent, of, merge, timer } from 'rxjs';
+import { debounceTime, startWith, map, distinctUntilChanged, takeUntil, switchMap, first, withLatestFrom, takeWhile } from 'rxjs/operators';
+import { fromDimension$, fromMutation$ } from '@scion/toolkit/observable';
+import { subscribeInside, filterArray } from '@scion/toolkit/operators';
+import * as i4 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+/*
+ * Copyright (c) 2018-2019 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.
+ *
+ * @dynamic ignore 'strictMetadataEmit' errors due to the usage of {@link Document} as ambient type for DI.
+ */
+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$;
+    }
+    /**
+     * Returns the native scrollbar track size, if any, or else `null`.
+     */
+    get trackSize() {
+        return this._trackSize$.getValue();
+    }
+    /**
+     * Computes the native scrollbar track size.
+     *
+     * @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
+        const viewportDiv = this._document.createElement('div');
+        setStyle(viewportDiv, {
+            position: 'absolute',
+            overflow: 'scroll',
+            height: '100px',
+            width: '100px',
+            border: 0,
+            visibility: 'hidden',
+        });
+        const viewportClientDiv = this._document.createElement('div');
+        setStyle(viewportClientDiv, {
+            height: '100%',
+            width: '100%',
+            border: 0,
+        });
+        viewportDiv.appendChild(viewportClientDiv);
+        this._document.body.appendChild(viewportDiv);
+        const trackSize = {
+            hScrollbarTrackHeight: viewportDiv.offsetHeight - viewportClientDiv.offsetHeight,
+            vScrollbarTrackWidth: viewportDiv.offsetWidth - viewportClientDiv.offsetWidth,
+        };
+        // destroy temporary viewport
+        this._document.body.removeChild(viewportDiv);
+        if (trackSize.hScrollbarTrackHeight === 0 && trackSize.vScrollbarTrackWidth === 0) {
+            return null;
+        }
+        return trackSize;
+    }
+    installNativeScrollbarTrackSizeListener() {
+        // 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();
+    }
+}
+SciNativeScrollbarTrackSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [{ token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SciNativeScrollbarTrackSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () {
+        return [{ type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.NgZone }];
+    } });
+/**
+ * Applies the given style(s) to the given element.
+ *
+ * Specify styles to be modified by passing a dictionary containing CSS property names (hyphen case).
+ * To remove a style, set its value to `null`.
+ *
+ * @ignore
+ */
+function setStyle(element, style) {
+    Object.keys(style).forEach(key => element.style.setProperty(key, style[key]));
+}
+
+/*
+ * Copyright (c) 2018-2019 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
+ */
+/**
+ * Renders a vertical or horizontal scrollbar.
+ *
+ * The scrollbar features the following functionality:
+ * - allows to move the thumb by mouse or touch
+ * - enlarges the thumb if the mouse pointer is near the thumb
+ * - allows paging on mousedown on the scroll track
+ *
+ * ### CSS styling:
+ *
+ * You can override the following CSS variables:
+ *
+ * - sci-scrollbar-color:    Sets the color of the scrollbar (by default, uses `rgb(78, 78, 78)`).
+ *
+ * Example:
+ *
+ * ```css
+ *
+ * sci-scrollbar {
+ *   --sci-scrollbar-color: blue;
+ * }
+ * ```
+ */
+class SciScrollbarComponent {
+    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();
+            }
+        });
+    }
+    get vertical() {
+        return this.direction === 'vscroll';
+    }
+    get horizontal() {
+        return this.direction === 'hscroll';
+    }
+    get scrolling() {
+        return this._lastDragPosition !== null;
+    }
+    /**
+     * The viewport to provide scrollbars for.
+     */
+    set setViewport(viewport) {
+        this._viewport = viewport;
+        this._viewportChange$.next();
+    }
+    /**
+     * Computes the scroll position and updates CSS variables to render the scroll position in the UI.
+     */
+    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.nativeElement.classList.add('overflow') : this._host.nativeElement.classList.remove('overflow');
+        }
+    }
+    /**
+     * Clears CSS variables used for rendering the scroll position in the UI.
+     */
+    unsetScrollPosition() {
+        NgZone.assertNotInAngularZone();
+        this._thumbPositionFr = 0;
+        this._thumbSizeFr = 0;
+        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');
+    }
+    /* @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;
+        const scrollbarPanPx = newDragPositionPx - this._lastDragPosition;
+        const viewportPanPx = this.toViewportPanPx(scrollbarPanPx);
+        this._lastDragPosition = newDragPositionPx;
+        this.moveViewportClient(viewportPanPx);
+    }
+    /* @docs-private */
+    onTouchEnd(event) {
+        event.preventDefault();
+        this._lastDragPosition = null;
+    }
+    /* @docs-private */
+    onMouseDown(mousedownEvent) {
+        if (mousedownEvent.button !== 0) {
+            return;
+        }
+        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;
+            });
+        });
+    }
+    /* @docs-private */
+    onScrollTrackMouseDown(event, direction) {
+        const signum = (direction === 'up' ? -1 : +1);
+        this.scrollWhileMouseDown(this.toViewportPanPx(signum * this.thumbSize), event);
+    }
+    /**
+     * 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.
+     */
+    moveViewportClient(viewportPanPx) {
+        if (this.vertical) {
+            this._viewport.scrollTop += viewportPanPx;
+        }
+        else {
+            this._viewport.scrollLeft += viewportPanPx;
+        }
+    }
+    /**
+     * Indicates if the content overflows.
+     */
+    get overflow() {
+        return this._overflow;
+    }
+    /**
+     * Scrolls continuously while holding the mouse pressed, or until the mouse leaves the scrolltrack.
+     */
+    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);
+        });
+    }
+    /**
+     * 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 fromDimension$(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(fromDimension$(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);
+    }
+    get viewportSize() {
+        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;
+    }
+    get scrollPosition() {
+        return this._viewport ? (this.vertical ? this._viewport.scrollTop : this._viewport.scrollLeft) : 0;
+    }
+    get thumbSize() {
+        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();
+    }
+}
+/**
+ * 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
+ */
+SciScrollbarComponent.VIEWPORT_RESIZE_DEBOUNCE_TIME = 50;
+SciScrollbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciScrollbarComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SciScrollbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SciScrollbarComponent, 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;--sci-scrollbar-color: rgb(78, 78, 78);--\\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: "13.2.3", ngImport: i0, type: SciScrollbarComponent, decorators: [{
+            type: Component,
+            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;--sci-scrollbar-color: rgb(78, 78, 78);--\\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: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.NgZone }];
+    }, propDecorators: { thumbElement: [{
+                type: ViewChild,
+                args: ['thumb_handle', { static: true }]
+            }], vertical: [{
+                type: HostBinding,
+                args: ['class.vertical']
+            }], horizontal: [{
+                type: HostBinding,
+                args: ['class.horizontal']
+            }], scrolling: [{
+                type: HostBinding,
+                args: ['class.scrolling']
+            }], direction: [{
+                type: Input
+            }], setViewport: [{
+                type: Input,
+                args: ['viewport']
+            }] } });
+
+/*
+ * Copyright (c) 2018-2019 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
+ */
+/**
+ * Makes the host element natively scrollable and hides native scrollbars by default, unless native scrollbars
+ * already sit on top of the viewport (e.g. in OS X).
+ *
+ * Because there is no cross-browser API to hide scrollbars without losing native scroll support, we set 'overflow'
+ * to 'scroll' but shift the native scrollbars out of the visible viewport area. The shift offset is computed upfront.
+ *
+ * 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.
+ */
+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();
+            }
+            else {
+                this.isDisplayNativeScrollbar ? this.useNativeScrollbars() : this.shiftNativeScrollbars(nativeScrollbarTrackSize);
+            }
+        });
+    }
+    /**
+     * Uses the native scrollbars when content overflows.
+     */
+    useNativeScrollbars() {
+        this.setStyle(this._host.nativeElement, {
+            overflow: 'auto',
+            width: '100%',
+            height: '100%',
+            marginRight: 0,
+            marginBottom: 0,
+        });
+    }
+    /**
+     * Shifts the native scrollbars out of the visible viewport area.
+     */
+    shiftNativeScrollbars(nativeScrollbarTrackSize) {
+        this.setStyle(this._host.nativeElement, {
+            overflow: 'scroll',
+            width: `calc(100% + ${nativeScrollbarTrackSize.vScrollbarTrackWidth}px`,
+            height: `calc(100% + ${nativeScrollbarTrackSize.hScrollbarTrackHeight}px`,
+            marginRight: `-${nativeScrollbarTrackSize.vScrollbarTrackWidth}px`,
+            marginBottom: `-${nativeScrollbarTrackSize.hScrollbarTrackHeight}px`,
+        });
+    }
+    setStyle(element, style) {
+        Object.keys(style).forEach(key => this._renderer.setStyle(element, key, style[key]));
+    }
+    ngOnChanges(changes) {
+        this._inputChange$.next();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+    }
+}
+SciScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Directive });
+SciScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: { isDisplayNativeScrollbar: ["sciScrollableDisplayNativeScrollbar", "isDisplayNativeScrollbar"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciScrollableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sciScrollable]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SciNativeScrollbarTrackSizeProvider }]; }, propDecorators: { isDisplayNativeScrollbar: [{
+                type: Input,
+                args: ['sciScrollableDisplayNativeScrollbar']
+            }] } });
+
+/*
+ * Copyright (c) 2018-2019 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
+ */
+/**
+ * Represents a viewport with the `<ng-content>` used as scrollable content. Content is added to a CSS grid layout.
+ *
+ * The viewport component displays scrollbars when its content overflows. Scrollbars are displayed on top of the content, not next to it.
+ * The component uses the native scrollbars of the operating system if they are already sitting on top, or falls back and renders scrollbars on top otherwise.
+ * The viewport remains natively scrollable with the native scrollbars shifted out of the viewport's visible area. Consequently, the viewport keeps supporting
+ * native scrolling features such as touch gestures, scroll speed acceleration, or scrolling near the viewport edges during drag-and-drop operations.
+ *
+ * ```html
+ * <sci-viewport>
+ *   your content
+ * </sci-viewport>
+ * ```
+ *
+ * ## Adding the viewport to a layout
+ *
+ * Typically you would add the viewport component to a flexible layout, filling the remaining space vertically and horizontally, such as a flexbox container
+ * with the viewport's `flex` CSS property set to either `flex: auto` or `flex: 1 1 0`.
+ *
+ * The viewport is sized according to its content width and height. It grows to absorb any free space, thus overflowing its content only when encountering
+ * a layout constraint. Depending on the layout, different steps may be necessary to prevent the viewport from growing to infinity.
+ *
+ * - If practical, give the viewport a fixed size or a maximum size.
+ * - If you add the viewport to a flexbox layout, make sure that it cannot exceed the available space. Instead, the viewport should fill the remaining space,
+ *   vertically and horizontally. Be aware that, by default, a flex item does not shrink below its minimum content size. To change this, set the viewport's
+ *   `flex-basis` to `0` (instead of `auto`), or use the CSS shorthand property `flex: 1 1 0`. The `flex-basis` defines the default size of a flex item before
+ *   the remaining extra space is distributed. If the viewport does not appear after setting this property, check its parent elements' content sizes.
+ *   As an alternative to setting `flex: 1 1 0`, change the setting to `flex: auto` and hide the overflow in the parent element, as follows: `overflow: hidden`.
+ *   Another approach would be to set the minimum height of all parents to `0`, as follows: `min-height: 0`.
+ *
+ *   For the complete documentation on the flex layout and its features, refer to https://developer.mozilla.org/en-US/docs/Web/CSS/flex.
+ *
+ *
+ * ## Layouting the viewport content
+ *
+ * `NgContent` is added to a CSS grid container with, by default, a single column, filling remaining space vertically and horizontally.
+ *
+ * You can override the following CSS variables to control the grid:
+ *
+ * - sci-viewport-content-grid-template-columns:   Defines the columns and their track sizes (by default, single column with track size auto)
+ * - sci-viewport-content-grid-template-rows:      Defines the rows and their track sizes (by default, single row with track size auto)
+ * - sci-viewport-content-grid-auto-columns:       Defines the track size of not explicitly declared columns.
+ * - sci-viewport-content-grid-auto-rows:          Defines the track size of not explicitly declared rows.
+ * - sci-viewport-content-grid-gap:                Sets the gaps (gutters) between rows and columns.
+ *
+ * Example of how to control the CSS grid:
+ *
+ * ```css
+ * sci-viewport {
+ *   --sci-viewport-content-grid-auto-rows: min-content;
+ *   --sci-viewport-content-grid-gap: .5em; // specifies the row and column gap
+ * }
+ * ```
+ *
+ * ## Styling of scrollbars
+ *
+ * You can override the following CSS variables to control the appearance of the scrollbar:
+ *
+ * - sci-viewport-scrollbar-color:     Sets the color of the scrollbar (by default, uses `rgb(78, 78, 78)`).
+ *
+ * ```css
+ * sci-viewport {
+ *   --sci-viewport-scrollbar-color: blue;
+ * }
+ * ```
+ */
+class SciViewportComponent {
+    constructor(host, nativeScrollbarTrackSizeProvider) {
+        this.host = host;
+        this.nativeScrollbarTrackSizeProvider = nativeScrollbarTrackSizeProvider;
+        this._scrollbarStyle = 'on-top';
+        this.tabindex = -1; // make the viewport programmatically focusable but do not include it in the tab order
+        /**
+         * 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
+    }
+    /** @internal */
+    set setViewport(viewport) {
+        this._viewport = coerceElement(viewport);
+    }
+    /** @internal */
+    set setViewportClient(viewportClient) {
+        this._viewportClient = coerceElement(viewportClient);
+    }
+    /**
+     * 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.
+     */
+    set scrollbarStyle(scrollbarStyle) {
+        this._scrollbarStyle = scrollbarStyle || 'on-top';
+    }
+    get scrollbarStyle() {
+        return this._scrollbarStyle;
+    }
+    focus() {
+        this._viewport && this._viewport.focus();
+    }
+    onScroll(event) {
+        this.scroll.emit(event);
+    }
+    /**
+     * Returns the number of pixels that the viewport client is scrolled vertically.
+     *
+     * @see Element.scrollTop
+     */
+    get scrollTop() {
+        return this._viewport.scrollTop;
+    }
+    /**
+     * Sets the number of pixels that the viewport client is scrolled vertically.
+     *
+     * @see Element.scrollTop
+     */
+    set scrollTop(scrollTop) {
+        this._viewport.scrollTop = scrollTop;
+    }
+    /**
+     * Returns the number of pixels that the viewport client is scrolled horizontally.
+     *
+     * @see Element.scrollLeft
+     */
+    get scrollLeft() {
+        return this._viewport.scrollLeft;
+    }
+    /**
+     * Sets the number of pixels that the viewport client is scrolled horizontally.
+     *
+     * @see Element.scrollLeft
+     */
+    set scrollLeft(scrollLeft) {
+        this._viewport.scrollLeft = scrollLeft;
+    }
+    /**
+     * Returns the height of the viewport client.
+     *
+     * @see Element.scrollHeight
+     */
+    get scrollHeight() {
+        return this._viewport.scrollHeight;
+    }
+    /**
+     * Returns the width of the viewport client.
+     *
+     * @see Element.scrollWidth
+     */
+    get scrollWidth() {
+        return this._viewport.scrollWidth;
+    }
+    /**
+     * Returns the viewport {HTMLElement}.
+     */
+    get viewportElement() {
+        return this._viewport;
+    }
+    /**
+     * Returns the viewport client {HTMLElement}.
+     */
+    get viewportClientElement() {
+        return this._viewportClient;
+    }
+    /**
+     * Checks if the specified element is scrolled into the viewport.
+     *
+     * @param element - the element to be checked
+     * @param fit - control if the element must fully or partially fit into the viewport
+     */
+    isElementInView(element, fit) {
+        const elLeft = this.computeOffset(element, 'left');
+        const elRight = elLeft + element.offsetWidth;
+        const elTop = this.computeOffset(element, 'top');
+        const elBottom = elTop + element.offsetHeight;
+        const vpLeft = this._viewport.scrollLeft;
+        const vpRight = vpLeft + this._viewport.clientWidth;
+        const vpTop = this._viewport.scrollTop;
+        const vpBottom = vpTop + this._viewport.clientHeight;
+        switch (fit) {
+            case 'full':
+                return (elLeft >= vpLeft && elRight <= vpRight) && (elTop >= vpTop && elBottom <= vpBottom);
+            case 'partial':
+                return (elRight >= vpLeft && elLeft <= vpRight) && (elBottom >= vpTop && elTop <= vpBottom);
+            default:
+                throw Error('Unsupported fit strategy');
+        }
+    }
+    /**
+     * Scrolls the specified element into the viewport.
+     *
+     * @param element - the element to scroll into the viewport
+     * @param offset - the gap between the element and the viewport
+     */
+    scrollIntoView(element, offset = 50) {
+        this._viewport.scrollTop = this.computeOffset(element, 'top') - offset;
+        this._viewport.scrollLeft = this.computeOffset(element, 'left') - offset;
+    }
+    /**
+     * Computes the distance of the element to the viewport's left or top border.
+     */
+    computeOffset(element, border) {
+        if (!isChildOf(element, this._viewport)) {
+            throw Error('element not a child of the viewport');
+        }
+        let offset = 0;
+        let el = element;
+        do {
+            offset += (border === 'left' ? el.offsetLeft : el.offsetTop);
+            el = el.offsetParent;
+        } while (el !== null && el !== this._viewport);
+        return offset;
+    }
+}
+SciViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciViewportComponent, deps: [{ token: i0.ElementRef }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Component });
+SciViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SciViewportComponent, selector: "sci-viewport", inputs: { scrollbarStyle: "scrollbarStyle" }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" }, properties: { "attr.tabindex": "this.tabindex" } }, 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\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<ng-container *ngIf=\"scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null\">\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\"></sci-scrollbar>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\"></sci-scrollbar>\n</ng-container>\n", styles: [":host{--sci-viewport-content-grid-template-columns: auto;--sci-viewport-content-grid-template-rows: unset;--sci-viewport-content-grid-auto-columns: unset;--sci-viewport-content-grid-auto-rows: auto;--sci-viewport-content-grid-gap: 0 0;--sci-viewport-scrollbar-color: rgb(78, 78, 78);display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}: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;grid-template-columns:var(--sci-viewport-content-grid-template-columns);grid-template-rows:var(--sci-viewport-content-grid-template-rows);grid-auto-rows:var(--sci-viewport-content-grid-auto-rows);grid-auto-columns:var(--sci-viewport-content-grid-auto-columns);grid-gap:var(--sci-viewport-content-grid-gap);gap:var(--sci-viewport-content-grid-gap)}: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"], components: [{ type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }], directives: [{ type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { type: i4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciViewportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-viewport', 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\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<ng-container *ngIf=\"scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null\">\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\"></sci-scrollbar>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\"></sci-scrollbar>\n</ng-container>\n", styles: [":host{--sci-viewport-content-grid-template-columns: auto;--sci-viewport-content-grid-template-rows: unset;--sci-viewport-content-grid-auto-columns: unset;--sci-viewport-content-grid-auto-rows: auto;--sci-viewport-content-grid-gap: 0 0;--sci-viewport-scrollbar-color: rgb(78, 78, 78);display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}: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;grid-template-columns:var(--sci-viewport-content-grid-template-columns);grid-template-rows:var(--sci-viewport-content-grid-template-rows);grid-auto-rows:var(--sci-viewport-content-grid-auto-rows);grid-auto-columns:var(--sci-viewport-content-grid-auto-columns);grid-gap:var(--sci-viewport-content-grid-gap);gap:var(--sci-viewport-content-grid-gap)}: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: function () { return [{ type: i0.ElementRef }, { type: SciNativeScrollbarTrackSizeProvider }]; }, propDecorators: { tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], setViewport: [{
+                type: ViewChild,
+                args: ['viewport', { static: true }]
+            }], setViewportClient: [{
+                type: ViewChild,
+                args: ['viewport_client', { static: true }]
+            }], scrollbarStyle: [{
+                type: Input
+            }], scroll: [{
+                type: Output
+            }], focus: [{
+                type: HostListener,
+                args: ['focus']
+            }] } });
+/**
+ * Returns 'true' if the given element is a child element of the parent element.
+ */
+function isChildOf(element, parent) {
+    while (element.parentElement !== null) {
+        element = element.parentElement;
+        if (element === parent) {
+            return true;
+        }
+    }
+    return false;
+}
+
+/*
+ * Copyright (c) 2018-2019 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 a viewport component with scrollbars that sit on top of the viewport client.
+ */
+class SciViewportModule {
+}
+SciViewportModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciViewportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SciViewportModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciViewportModule, declarations: [SciViewportComponent,
+        SciScrollbarComponent,
+        SciScrollableDirective], imports: [CommonModule,
+        ScrollingModule], exports: [SciViewportComponent,
+        SciScrollbarComponent,
+        SciScrollableDirective] });
+SciViewportModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciViewportModule, imports: [[
+            CommonModule,
+            ScrollingModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciViewportModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ScrollingModule,
+                    ],
+                    declarations: [
+                        SciViewportComponent,
+                        SciScrollbarComponent,
+                        SciScrollableDirective,
+                    ],
+                    exports: [
+                        SciViewportComponent,
+                        SciScrollbarComponent,
+                        SciScrollableDirective,
+                    ],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2019 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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SciNativeScrollbarTrackSizeProvider, SciScrollableDirective, SciScrollbarComponent, SciViewportComponent, SciViewportModule };
+//# sourceMappingURL=scion-components-viewport.mjs.map