@scion/components 13.0.0 → 14.0.2

package/fesm2020/scion-components-viewport.mjs

@@ -1,14 +1,14 @@
 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 { Injectable, Inject, NgZone, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Input, Directive, EventEmitter, ViewEncapsulation, Output, HostListener, NgModule } from '@angular/core';
+import * as i2 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 * as i3 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 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
@@ -98,9 +98,9 @@ class SciNativeScrollbarTrackSizeProvider {
         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: [{
+SciNativeScrollbarTrackSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [{ token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SciNativeScrollbarTrackSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
@@ -407,9 +407,9 @@ class SciScrollbarComponent {
  * @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: [{
+SciScrollbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciScrollbarComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SciScrollbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", 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: "14.1.2", 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: [{
@@ -510,9 +510,9 @@ class SciScrollableDirective {
         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: [{
+SciScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Directive });
+SciScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: { isDisplayNativeScrollbar: ["sciScrollableDisplayNativeScrollbar", "isDisplayNativeScrollbar"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciScrollableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sciScrollable]',
@@ -532,7 +532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  *  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.
+ * Represents a viewport with slotted content (`<ng-content>`) used as scrollable content. By default, 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.
@@ -564,24 +564,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  *   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.
+ * ## Layouting the viewport's slotted content
  *
- * You can override the following CSS variables to control the grid:
+ * By default, the viewport's content is added to a CSS grid container with a single column, filling remaining space vertically and horizontally.
+ * Using the `::part(content)` pseudo element selector, you can configure the grid container or apply a different layout, such as a flex or flow layout.
  *
- * - 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:
+ * #### Example of adding slotted content to a CSS flex container.
+ * ```css
+ * sci-viewport::part(content) {
+ *   display: flex;
+ *   flex-direction: column;
+ * }
+ * ```
  *
+ * #### Example of configuring CSS grid container with two columns
  * ```css
- * sci-viewport {
- *   --sci-viewport-content-grid-auto-rows: min-content;
- *   --sci-viewport-content-grid-gap: .5em; // specifies the row and column gap
+ * sci-viewport::part(content) {
+ *   grid-template-columns: 1fr 1fr;
+ *   gap: 1em;
  * }
  * ```
  *
@@ -602,7 +602,6 @@ class SciViewportComponent {
         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.
          *
@@ -612,7 +611,7 @@ class SciViewportComponent {
     }
     /** @internal */
     set setViewport(viewport) {
-        this._viewport = coerceElement(viewport);
+        this._viewportElement = coerceElement(viewport);
     }
     /** @internal */
     set setViewportClient(viewportClient) {
@@ -629,7 +628,7 @@ class SciViewportComponent {
         return this._scrollbarStyle;
     }
     focus() {
-        this._viewport && this._viewport.focus();
+        this._viewportElement?.focus();
     }
     onScroll(event) {
         this.scroll.emit(event);
@@ -640,7 +639,7 @@ class SciViewportComponent {
      * @see Element.scrollTop
      */
     get scrollTop() {
-        return this._viewport.scrollTop;
+        return this._viewportElement.scrollTop;
     }
     /**
      * Sets the number of pixels that the viewport client is scrolled vertically.
@@ -648,7 +647,7 @@ class SciViewportComponent {
      * @see Element.scrollTop
      */
     set scrollTop(scrollTop) {
-        this._viewport.scrollTop = scrollTop;
+        this._viewportElement.scrollTop = scrollTop;
     }
     /**
      * Returns the number of pixels that the viewport client is scrolled horizontally.
@@ -656,7 +655,7 @@ class SciViewportComponent {
      * @see Element.scrollLeft
      */
     get scrollLeft() {
-        return this._viewport.scrollLeft;
+        return this._viewportElement.scrollLeft;
     }
     /**
      * Sets the number of pixels that the viewport client is scrolled horizontally.
@@ -664,7 +663,7 @@ class SciViewportComponent {
      * @see Element.scrollLeft
      */
     set scrollLeft(scrollLeft) {
-        this._viewport.scrollLeft = scrollLeft;
+        this._viewportElement.scrollLeft = scrollLeft;
     }
     /**
      * Returns the height of the viewport client.
@@ -672,7 +671,7 @@ class SciViewportComponent {
      * @see Element.scrollHeight
      */
     get scrollHeight() {
-        return this._viewport.scrollHeight;
+        return this._viewportElement.scrollHeight;
     }
     /**
      * Returns the width of the viewport client.
@@ -680,13 +679,13 @@ class SciViewportComponent {
      * @see Element.scrollWidth
      */
     get scrollWidth() {
-        return this._viewport.scrollWidth;
+        return this._viewportElement.scrollWidth;
     }
     /**
      * Returns the viewport {HTMLElement}.
      */
     get viewportElement() {
-        return this._viewport;
+        return this._viewportElement;
     }
     /**
      * Returns the viewport client {HTMLElement}.
@@ -699,16 +698,18 @@ class SciViewportComponent {
      *
      * @param element - the element to be checked
      * @param fit - control if the element must fully or partially fit into the viewport
+     *
+     * @throws if the element is not contained in the viewport's slotted content.
      */
     isElementInView(element, fit) {
         const elLeft = this.computeOffset(element, 'left');
-        const elRight = elLeft + element.offsetWidth;
+        const elRight = elLeft + coerceElement(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;
+        const elBottom = elTop + coerceElement(element).offsetHeight;
+        const vpLeft = this._viewportElement.scrollLeft;
+        const vpRight = vpLeft + this._viewportElement.clientWidth;
+        const vpTop = this._viewportElement.scrollTop;
+        const vpBottom = vpTop + this._viewportElement.clientHeight;
         switch (fit) {
             case 'full':
                 return (elLeft >= vpLeft && elRight <= vpRight) && (elTop >= vpTop && elBottom <= vpBottom);
@@ -723,36 +724,37 @@ class SciViewportComponent {
      *
      * @param element - the element to scroll into the viewport
      * @param offset - the gap between the element and the viewport
+     *
+     * @throws if the element is not contained in the viewport's slotted content.
      */
     scrollIntoView(element, offset = 50) {
-        this._viewport.scrollTop = this.computeOffset(element, 'top') - offset;
-        this._viewport.scrollLeft = this.computeOffset(element, 'left') - offset;
+        this._viewportElement.scrollTop = this.computeOffset(element, 'top') - offset;
+        this._viewportElement.scrollLeft = this.computeOffset(element, 'left') - offset;
     }
     /**
      * Computes the distance of the element to the viewport's left or top border.
+     *
+     * @throws if the element is not contained in the viewport's slotted content.
      */
     computeOffset(element, border) {
-        if (!isChildOf(element, this._viewport)) {
-            throw Error('element not a child of the viewport');
-        }
         let offset = 0;
-        let el = element;
+        let el = coerceElement(element);
         do {
             offset += (border === 'left' ? el.offsetLeft : el.offsetTop);
             el = el.offsetParent;
-        } while (el !== null && el !== this._viewport);
+            if (el === null) {
+                throw Error(`[ElementNotContainedError] Element not contained in the viewport's slotted content`);
+            }
+        } while (el !== this.host.nativeElement);
         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: [{
+SciViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciViewportComponent, deps: [{ token: i0.ElementRef }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Component });
+SciViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SciViewportComponent, selector: "sci-viewport", inputs: { scrollbarStyle: "scrollbarStyle" }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "setViewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "setViewportClient", first: true, predicate: ["viewport_client"], descendants: true, static: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n     cdkScrollable\n     (scroll)=\"onScroll($event)\">\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<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);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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", 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: [{
+            args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n     cdkScrollable\n     (scroll)=\"onScroll($event)\">\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<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);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: { setViewport: [{
                 type: ViewChild,
                 args: ['viewport', { static: true }]
             }], setViewportClient: [{
@@ -766,18 +768,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 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
@@ -793,18 +783,16 @@ function isChildOf(element, parent) {
  */
 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,
+SciViewportModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciViewportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SciViewportModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", 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: [{
+SciViewportModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciViewportModule, imports: [CommonModule,
+        ScrollingModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SciViewportModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [