@scion/components 16.0.0 → 16.2.0

package/fesm2022/scion-components-throbber.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scion-components-throbber.mjs","sources":["../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.ts","../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.html","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.ts","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.html","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.ts","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.html","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.ts","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.html","../../../../projects/scion/components/throbber/src/throbber.component.ts","../../../../projects/scion/components/throbber/src/throbber.component.html","../../../../projects/scion/components/throbber/src/throbber.module.ts","../../../../projects/scion/components/throbber/src/public_api.ts","../../../../projects/scion/components/throbber/src/scion-components-throbber.ts"],"sourcesContent":["/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/**\n * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.\n *\n * Throbber type: `ellipsis`\n */\n@Component({\n  selector: 'sci-ellipsis-throbber',\n  templateUrl: './ellipsis-throbber.component.html',\n  styleUrls: ['./ellipsis-throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciEllipsisThrobberComponent {\n}\n","<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/**\n * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.\n *\n * Throbber type: `ripple`\n */\n@Component({\n  selector: 'sci-ripple-throbber',\n  templateUrl: './ripple-throbber.component.html',\n  styleUrls: ['./ripple-throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciRippleThrobberComponent {\n}\n","<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/**\n * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.\n *\n * Throbber type: `roller`\n */\n@Component({\n  selector: 'sci-roller-throbber',\n  templateUrl: './roller-throbber.component.html',\n  styleUrls: ['./roller-throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciRollerThrobberComponent {\n}\n","<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/**\n * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction\n * and then then fade out again.\n *\n * Throbber type: `spinner`\n */\n@Component({\n  selector: 'sci-spinner-throbber',\n  templateUrl: './spinner-throbber.component.html',\n  styleUrls: ['./spinner-throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciSpinnerThrobberComponent {\n}\n","<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component, Input} from '@angular/core';\n\n/**\n * Animated graphical control to indicate the execution of an action.\n *\n * Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.\n *\n * ### CSS styling:\n *\n * You can override the following CSS variables:\n *\n * - sci-throbber-color:     Sets the color of the throbber (by default, uses `lightgray`).\n * - sci-throbber-size:      Defines the size of the throbber. Most throbbers are quadratic having the same width and height.\n *                           For non-quadratic throbbers, the size usually specifies the height (by default, uses `50px`).\n * - sci-throbber-duration:  Sets the duration of a single animation cycle (by default, uses `1.25s`).\n *\n * Example:\n *\n * ```css\n *\n * sci-throbber {\n *   --sci-throbber-color: blue;\n *   --sci-throbber-size: 50px;\n *   --sci-throbber-duration: 1s\n * }\n * ```\n */\n@Component({\n  selector: 'sci-throbber',\n  templateUrl: './throbber.component.html',\n  styleUrls: ['./throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciThrobberComponent {\n\n  /**\n   * Chooses between different throbber presentation. If not set, uses `spinner` type.\n   *\n   * - **ellipsis**\n   * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.\n   * - **ripple**\n   * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.\n   * - **roller**\n   * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.\n   * - **spinner** (default)\n   * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction and then then fade out again.\n   */\n  @Input()\n  public type: 'ellipsis' | 'ripple' | 'roller' | 'spinner' = 'spinner';\n}\n","<ng-container [ngSwitch]=\"type\">\n  <sci-ellipsis-throbber *ngSwitchCase=\"'ellipsis'\"></sci-ellipsis-throbber>\n  <sci-ripple-throbber *ngSwitchCase=\"'ripple'\"></sci-ripple-throbber>\n  <sci-roller-throbber *ngSwitchCase=\"'roller'\"></sci-roller-throbber>\n  <sci-spinner-throbber *ngSwitchCase=\"'spinner'\"></sci-spinner-throbber>\n  <sci-spinner-throbber *ngSwitchDefault></sci-spinner-throbber>\n</ng-container>","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {SciThrobberComponent} from './throbber.component';\nimport {SciEllipsisThrobberComponent} from './ellipsis-throbber/ellipsis-throbber.component';\nimport {SciRippleThrobberComponent} from './ripple-throbber/ripple-throbber.component';\nimport {SciRollerThrobberComponent} from './roller-throbber/roller-throbber.component';\nimport {SciSpinnerThrobberComponent} from './spinner-throbber/spinner-throbber.component';\n\n/**\n * Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.\n */\n@NgModule({\n  declarations: [\n    SciThrobberComponent,\n    SciEllipsisThrobberComponent,\n    SciRippleThrobberComponent,\n    SciRollerThrobberComponent,\n    SciSpinnerThrobberComponent,\n  ],\n  imports: [\n    CommonModule,\n  ],\n  exports: [\n    SciThrobberComponent,\n  ],\n})\nexport class SciThrobberModule {\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\n/*\n * Secondary entrypoint: '@scion/components/throbber'\n *\n * @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n */\nexport {SciThrobberModule} from './throbber.module';\nexport {SciThrobberComponent} from './throbber.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i2.SciEllipsisThrobberComponent","i3.SciRippleThrobberComponent","i4.SciRollerThrobberComponent","i5.SciSpinnerThrobberComponent"],"mappings":"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"}
+{"version":3,"file":"scion-components-throbber.mjs","sources":["../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.ts","../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.html","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.ts","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.html","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.ts","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.html","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.ts","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.html","../../../../projects/scion/components/throbber/src/throbber.component.ts","../../../../projects/scion/components/throbber/src/throbber.component.html","../../../../projects/scion/components/throbber/src/throbber.module.ts","../../../../projects/scion/components/throbber/src/public_api.ts","../../../../projects/scion/components/throbber/src/scion-components-throbber.ts"],"sourcesContent":["/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/**\n * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.\n *\n * Throbber type: `ellipsis`\n */\n@Component({\n  selector: 'sci-ellipsis-throbber',\n  templateUrl: './ellipsis-throbber.component.html',\n  styleUrls: ['./ellipsis-throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class SciEllipsisThrobberComponent {\n}\n","<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/**\n * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.\n *\n * Throbber type: `ripple`\n */\n@Component({\n  selector: 'sci-ripple-throbber',\n  templateUrl: './ripple-throbber.component.html',\n  styleUrls: ['./ripple-throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class SciRippleThrobberComponent {\n}\n","<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/**\n * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.\n *\n * Throbber type: `roller`\n */\n@Component({\n  selector: 'sci-roller-throbber',\n  templateUrl: './roller-throbber.component.html',\n  styleUrls: ['./roller-throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class SciRollerThrobberComponent {\n}\n","<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/**\n * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction\n * and then then fade out again.\n *\n * Throbber type: `spinner`\n */\n@Component({\n  selector: 'sci-spinner-throbber',\n  templateUrl: './spinner-throbber.component.html',\n  styleUrls: ['./spinner-throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class SciSpinnerThrobberComponent {\n}\n","<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectionStrategy, Component, Input} from '@angular/core';\nimport {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';\nimport {SciEllipsisThrobberComponent} from './ellipsis-throbber/ellipsis-throbber.component';\nimport {SciRippleThrobberComponent} from './ripple-throbber/ripple-throbber.component';\nimport {SciRollerThrobberComponent} from './roller-throbber/roller-throbber.component';\nimport {SciSpinnerThrobberComponent} from './spinner-throbber/spinner-throbber.component';\n\n/**\n * Animated graphical control to indicate the execution of an action.\n *\n * Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.\n *\n * ### Styling:\n *\n * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.\n * To style a specific `sci-throbber` component, the following CSS variables can be set directly on the component.\n *\n * - sci-throbber-color:     Sets the color of the throbber (by default, uses `lightgray`).\n * - sci-throbber-size:      Defines the size of the throbber. Most throbbers are quadratic having the same width and height.\n *                           For non-quadratic throbbers, the size usually specifies the height (by default, uses `50px`).\n * - sci-throbber-duration:  Sets the duration of a single animation cycle (by default, uses `1.25s`).\n *\n * Example:\n *\n * ```css\n *\n * sci-throbber {\n *   --sci-throbber-color: blue;\n *   --sci-throbber-size: 50px;\n *   --sci-throbber-duration: 1s\n * }\n * ```\n */\n@Component({\n  selector: 'sci-throbber',\n  templateUrl: './throbber.component.html',\n  styleUrls: ['./throbber.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [\n    NgSwitch,\n    NgSwitchCase,\n    NgSwitchDefault,\n    SciEllipsisThrobberComponent,\n    SciRippleThrobberComponent,\n    SciRollerThrobberComponent,\n    SciSpinnerThrobberComponent,\n  ],\n})\nexport class SciThrobberComponent {\n\n  /**\n   * Chooses between different throbber presentation. If not set, uses `spinner` type.\n   *\n   * - **ellipsis**\n   * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.\n   * - **ripple**\n   * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.\n   * - **roller**\n   * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.\n   * - **spinner** (default)\n   * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction and then then fade out again.\n   */\n  @Input()\n  public type: 'ellipsis' | 'ripple' | 'roller' | 'spinner' = 'spinner';\n}\n","<ng-container [ngSwitch]=\"type\">\n  <sci-ellipsis-throbber *ngSwitchCase=\"'ellipsis'\"></sci-ellipsis-throbber>\n  <sci-ripple-throbber *ngSwitchCase=\"'ripple'\"></sci-ripple-throbber>\n  <sci-roller-throbber *ngSwitchCase=\"'roller'\"></sci-roller-throbber>\n  <sci-spinner-throbber *ngSwitchCase=\"'spinner'\"></sci-spinner-throbber>\n  <sci-spinner-throbber *ngSwitchDefault></sci-spinner-throbber>\n</ng-container>","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {NgModule} from '@angular/core';\nimport {SciThrobberComponent} from './throbber.component';\n\n/**\n * Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.\n */\n@NgModule({\n  imports: [\n    SciThrobberComponent,\n  ],\n  exports: [\n    SciThrobberComponent,\n  ],\n})\nexport class SciThrobberModule {\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\n/*\n * Secondary entrypoint: '@scion/components/throbber'\n *\n * @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n */\nexport {SciThrobberModule} from './throbber.module';\nexport {SciThrobberComponent} from './throbber.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/scion-components-viewport.mjs

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
-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 { Injectable, Inject, Directive, Input, NgZone, Component, ChangeDetectionStrategy, ViewChild, HostBinding, EventEmitter, ViewEncapsulation, Output, HostListener, NgModule } from '@angular/core';
 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 { BehaviorSubject, Subject, fromEvent, merge, of, timer } from 'rxjs';
+import { DOCUMENT, NgIf, AsyncPipe } from '@angular/common';
 import { fromDimension$, fromMutation$ } from '@scion/toolkit/observable';
 import { subscribeInside, filterArray } from '@scion/toolkit/operators';
+import * as i2 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -21,8 +20,6 @@ import { subscribeInside, filterArray } from '@scion/toolkit/operators';
  */
 /**
  * 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) {
@@ -70,9 +67,12 @@ class SciNativeScrollbarTrackSizeProvider {
         });
         viewportDiv.appendChild(viewportClientDiv);
         this._document.body.appendChild(viewportDiv);
+        // Do not use client and offset width/height to calculate the size of the scrollbar, as they are rounded, resulting in unwanted spacing when zooming the page.
+        const viewportBounds = viewportDiv.getBoundingClientRect();
+        const viewportClientBounds = viewportClientDiv.getBoundingClientRect();
         const trackSize = {
-            hScrollbarTrackHeight: viewportDiv.offsetHeight - viewportClientDiv.offsetHeight,
-            vScrollbarTrackWidth: viewportDiv.offsetWidth - viewportClientDiv.offsetWidth,
+            hScrollbarTrackHeight: viewportBounds.height - viewportClientBounds.height,
+            vScrollbarTrackWidth: viewportBounds.width - viewportClientBounds.width,
         };
         // destroy temporary viewport
         this._document.body.removeChild(viewportDiv);
@@ -119,6 +119,95 @@ 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
+ */
+/**
+ * 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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: SciScrollableDirective, isStandalone: true, selector: "[sciScrollable]", inputs: { isDisplayNativeScrollbar: ["sciScrollableDisplayNativeScrollbar", "isDisplayNativeScrollbar"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciScrollableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sciScrollable]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SciNativeScrollbarTrackSizeProvider }]; }, propDecorators: { isDisplayNativeScrollbar: [{
+                type: Input,
+                args: ['sciScrollableDisplayNativeScrollbar']
+            }] } });
+
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
  *
@@ -136,11 +225,12 @@ function setStyle(element, style) {
  * - enlarges the thumb if the mouse pointer is near the thumb
  * - allows paging on mousedown on the scroll track
  *
- * ### CSS styling:
+ * ### Styling:
  *
- * You can override the following CSS variables:
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-scrollbar` component, the following CSS variables can be set directly on the component.
  *
- * - sci-scrollbar-color:    Sets the color of the scrollbar (by default, uses `rgb(78, 78, 78)`).
+ * - sci-scrollbar-color:    Sets the color of the scrollbar.
  *
  * Example:
  *
@@ -407,12 +497,12 @@ class SciScrollbarComponent {
         this._destroy$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciScrollbarComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SciScrollbarComponent, isStandalone: true, selector: "sci-scrollbar", inputs: { direction: "direction", setViewport: ["viewport", "setViewport"] }, host: { properties: { "class.vertical": "this.vertical", "class.horizontal": "this.horizontal", "class.scrolling": "this.scrolling" } }, viewQueries: [{ propertyName: "thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, static: true }], ngImport: i0, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical\"\n     [class.horizontal]=\"horizontal\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical\"\n       [class.horizontal]=\"horizontal\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-color: var(--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(--\\275sci-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(--\\275sci-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: "16.0.1", 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: [{
+            args: [{ selector: 'sci-scrollbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical\"\n     [class.horizontal]=\"horizontal\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical\"\n       [class.horizontal]=\"horizontal\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-color: var(--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(--\\275sci-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(--\\275sci-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: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: i0.NgZone }]; }, propDecorators: { thumbElement: [{
@@ -431,95 +521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 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();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: { isDisplayNativeScrollbar: ["sciScrollableDisplayNativeScrollbar", "isDisplayNativeScrollbar"] }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", 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']
+                args: [{ alias: 'viewport', required: true }]
             }] } });
 
 /*
@@ -547,7 +549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
  *
  * ## 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
+ * 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
@@ -569,7 +571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
  * 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.
  *
- * #### Example of adding slotted content to a CSS flex container.
+ * #### Example of adding slotted content to a CSS flex container
  * ```css
  * sci-viewport::part(content) {
  *   display: flex;
@@ -585,11 +587,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
  * }
  * ```
  *
- * ## Styling of scrollbars
+ * ## Styling
  *
- * You can override the following CSS variables to control the appearance of the scrollbar:
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-viewport` component, the following CSS variables can be set directly on the component.
  *
- * - sci-viewport-scrollbar-color:     Sets the color of the scrollbar (by default, uses `rgb(78, 78, 78)`).
+ * - sci-viewport-scrollbar-color:     Sets the color of the scrollbar.
  *
  * ```css
  * sci-viewport {
@@ -775,11 +778,17 @@ class SciViewportComponent {
         return offset;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportComponent, deps: [{ token: i0.ElementRef }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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\" class=\"e2e-vertical\"></sci-scrollbar>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"></sci-scrollbar>\n</ng-container>\n", styles: [":host{--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:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"], dependencies: [{ kind: "directive", type: 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SciViewportComponent, isStandalone: true, selector: "sci-viewport", inputs: { scrollbarStyle: "scrollbarStyle" }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "setViewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "setViewportClient", first: true, predicate: ["viewport_client"], descendants: true, static: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n     cdkScrollable\n     (scroll)=\"onScroll($event)\">\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<ng-container *ngIf=\"scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null\">\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"></sci-scrollbar>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"></sci-scrollbar>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--\\275sci-viewport-scrollbar-color: var(--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:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--\\275sci-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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportComponent, decorators: [{
             type: Component,
-            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\" class=\"e2e-vertical\"></sci-scrollbar>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"></sci-scrollbar>\n</ng-container>\n", styles: [":host{--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:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"] }]
+            args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, standalone: true, imports: [
+                        NgIf,
+                        AsyncPipe,
+                        ScrollingModule,
+                        SciScrollableDirective,
+                        SciScrollbarComponent,
+                    ], template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n     cdkScrollable\n     (scroll)=\"onScroll($event)\">\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<ng-container *ngIf=\"scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null\">\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"></sci-scrollbar>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"></sci-scrollbar>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{--\\275sci-viewport-scrollbar-color: var(--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:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--\\275sci-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 }]
@@ -809,23 +818,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
  */
 class SciViewportModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, declarations: [SciViewportComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, imports: [SciViewportComponent,
             SciScrollbarComponent,
-            SciScrollableDirective], imports: [CommonModule,
-            ScrollingModule], exports: [SciViewportComponent,
+            SciScrollableDirective], exports: [SciViewportComponent,
             SciScrollbarComponent,
             SciScrollableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, imports: [CommonModule,
-            ScrollingModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, imports: [SciViewportComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        ScrollingModule,
-                    ],
-                    declarations: [
                         SciViewportComponent,
                         SciScrollbarComponent,
                         SciScrollableDirective,
@@ -857,5 +860,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SciNativeScrollbarTrackSizeProvider, SciScrollableDirective, SciScrollbarComponent, SciViewportComponent, SciViewportModule };
+export { SciScrollableDirective, SciScrollbarComponent, SciViewportComponent, SciViewportModule };
 //# sourceMappingURL=scion-components-viewport.mjs.map