@scion/components 22.5.0 → 22.7.0

package/fesm2022/scion-components-tree.mjs

@@ -0,0 +1,306 @@
+import * as i0 from '@angular/core';
+import { assertNotInReactiveContext, assertInInjectionContext, inject, Injector, runInInjectionContext, DestroyRef, input, output, createComponent, inputBinding, computed, outputBinding, ElementRef, EnvironmentInjector, ApplicationRef, Component } from '@angular/core';
+import { ɵSciTable as _SciTable, SciTableComponent, provideTableDatasource, ɵprovideTableDatasource as _provideTableDatasource } from '@scion/components/table';
+
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+class ɵSciTree {
+    activeItem;
+    selectedItems;
+    selectable;
+    _table;
+    constructor(descriptor) {
+        const tableDescriptor = {
+            datasource: descriptor.datasource,
+            selectable: descriptor.selectable,
+            sortable: false,
+            resizable: false,
+            showHeader: false,
+            rowActions: descriptor.nodeActions,
+            rowBindings: (bindings, item, index) => descriptor.nodeBindings?.(bindings, item, index),
+            bufferSize: descriptor.bufferSize,
+            pageSize: descriptor.pageSize,
+            trackBy: descriptor.trackBy,
+            columns: table => {
+                if (typeof descriptor.label === 'function') {
+                    return table.addStringColumn({
+                        value: descriptor.label,
+                        filterable: descriptor.matcher ? { matcher: descriptor.matcher } : undefined,
+                    });
+                }
+                if ('component' in descriptor.label) {
+                    return table.addComponentColumn({
+                        component: descriptor.label.component,
+                        padding: descriptor.label.padding,
+                        filterable: descriptor.matcher ? { matcher: descriptor.matcher } : undefined,
+                    });
+                }
+                if ('template' in descriptor.label) {
+                    return table.addTemplateColumn({
+                        template: descriptor.label.template,
+                        padding: descriptor.label.padding,
+                        filterable: descriptor.matcher ? { matcher: descriptor.matcher } : undefined,
+                    });
+                }
+                throw Error('[TreeConfigurationError] Tree label must be `string`, `SciTreeNodeComponentDescriptor`, or `SciTreeNodeTemplateDescriptor`.');
+            },
+        };
+        this._table = new _SciTable({ ...tableDescriptor, type: 'tree' });
+        this.activeItem = this._table.activeItem;
+        this.selectedItems = this._table.selectedItems;
+        this.selectable = this._table.selectable;
+    }
+    get table() {
+        return this._table;
+    }
+    filter(text) {
+        this._table.filter(text);
+    }
+    select(ids) {
+        this._table.select(ids);
+    }
+    expandAll() {
+        this._table.expandAll();
+    }
+    collapseAll() {
+        this._table.collapseAll();
+    }
+    dispose() {
+        this._table.dispose();
+    }
+}
+
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+function tree(descriptor) {
+    assertNotInReactiveContext(tree, 'Call tree in a non-reactive (non-tracking) context, such as within the untracked() function.');
+    if (!descriptor.injector) {
+        assertInInjectionContext(tree);
+    }
+    const injector = descriptor.injector ?? inject(Injector);
+    const sciTree = runInInjectionContext(injector, () => new ɵSciTree(descriptor));
+    injector.get(DestroyRef).onDestroy(() => sciTree.dispose());
+    return sciTree;
+}
+
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Provides a tree to display a tree structure.
+ *
+ * ### Usage
+ *
+ * Create a tree using the `tree()` function, passing a descriptor to configure the datasource and the display of node labels.
+ *
+ * Use the {@link provideTreeDatasource} function to create a datasource, passing a signal containing the root items and a
+ * function that returns the children of a given item.
+ *
+ * ```ts
+ * import {SciTreeComponent, tree, provideTreeDatasource} from '@scion/components/tree';
+ * import {httpResource} from '@angular/common/http';
+ *
+ * // Load data to display in the tree.
+ * const files = httpResource<File[]>(() => '/api/files', {defaultValue: []});
+ *
+ * // Create the tree and pass data.
+ * const fileTree = tree({
+ *   label: file => file.name,
+ *   datasource: provideTreeDatasource(files.value, file => file.children),
+ * });
+ * ```
+ *
+ * In the HTML, bind the created tree instance to `<sci-tree>` and assign it a name.
+ * The name must start with the `tree:` prefix and is used to store user settings.
+ *
+ * ```html
+ * <sci-tree name="tree:files" [tree]="fileTree"/>
+ * ```
+ *
+ * ### Fixed Node Height
+ *
+ * All nodes in the tree must have equal height, which is `2em` by default. The height can be changed per tree using the CSS variable `--sci-tree-node-height`.
+ *
+ * ```scss
+ * sci-tree {
+ *   --sci-tree-node-height: 30px;
+ * }
+ * ```
+ *
+ * ### Styling
+ *
+ * The appearance of the tree can be customized using the following CSS variables, either globally in the `:root` or at the tree level.
+ *
+ * - `--sci-tree-node-height`
+ * - `--sci-tree-node-indent`
+ * - `--sci-tree-node-background-color-hover`
+ * - `--sci-tree-node-background-color-selected`
+ * - `--sci-tree-node-border-radius`
+ * - `--sci-tree-node-outline-color`
+ * - `--sci-tree-node-outline-width`
+ * - `--sci-tree-node-outline-style`
+ * - `--sci-tree-node-action-background-color`
+ * - `--sci-tree-node-action-background-color-selected`
+ *
+ * @experimental since 22.7.0; API and behavior may change in any version without notice.
+ */
+class SciTreeComponent {
+    /**
+     * Specifies a unique tree identifier, used as the key for storing user preferences.
+     */
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the tree definition and datasource.
+     */
+    tree = input.required({ ...(ngDevMode ? { debugName: "tree" } : /* istanbul ignore next */ {}), transform: (tree) => tree });
+    /**
+     * Emits when the user double-clicks a node or presses `Enter` on selected nodes.
+     */
+    primaryAction = output();
+    constructor() {
+        this.attachVirtualTable();
+    }
+    /**
+     * Creates and attaches a {@link SciTableComponent} using this component as host.
+     */
+    attachVirtualTable() {
+        const componentRef = createComponent(SciTableComponent, {
+            elementInjector: inject(Injector),
+            environmentInjector: inject(EnvironmentInjector),
+            hostElement: inject(ElementRef).nativeElement,
+            bindings: [
+                inputBinding('name', computed(() => this.name())),
+                inputBinding('table', computed(() => this.tree().table)),
+                outputBinding('primaryAction', (event) => this.primaryAction.emit(event)),
+            ],
+        });
+        // Attach component to Angular component tree for change detection.
+        inject(ApplicationRef).attachView(componentRef.hostView);
+        // Destroy component when host is destroyed.
+        inject(DestroyRef).onDestroy(() => componentRef.destroy());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SciTreeComponent, isStandalone: true, selector: "sci-tree", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { primaryAction: "primaryAction" }, ngImport: i0, template: '', isInline: true, styles: [":host{--sci-table-cell-padding-inline: 0px;--sci-table-row-height: var(--sci-tree-node-height);--sci-table-row-indent: var(--sci-tree-node-indent);--sci-table-row-background-color-hover: var(--sci-tree-node-background-color-hover);--sci-table-row-background-color-selected: var(--sci-tree-node-background-color-selected);--sci-table-row-border-radius: var(--sci-tree-node-border-radius);--sci-table-row-outline-color: var(--sci-tree-node-outline-color);--sci-table-row-outline-width: var(--sci-tree-node-outline-width);--sci-table-row-outline-style: var(--sci-tree-node-outline-style);--sci-table-row-action-background-color: var(--sci-tree-node-action-background-color);--sci-table-row-action-background-color-selected: var(--sci-tree-node-action-background-color-selected)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-tree', template: '', styles: [":host{--sci-table-cell-padding-inline: 0px;--sci-table-row-height: var(--sci-tree-node-height);--sci-table-row-indent: var(--sci-tree-node-indent);--sci-table-row-background-color-hover: var(--sci-tree-node-background-color-hover);--sci-table-row-background-color-selected: var(--sci-tree-node-background-color-selected);--sci-table-row-border-radius: var(--sci-tree-node-border-radius);--sci-table-row-outline-color: var(--sci-tree-node-outline-color);--sci-table-row-outline-width: var(--sci-tree-node-outline-width);--sci-table-row-outline-style: var(--sci-tree-node-outline-style);--sci-table-row-action-background-color: var(--sci-tree-node-action-background-color);--sci-table-row-action-background-color-selected: var(--sci-tree-node-action-background-color-selected)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: true }] }], primaryAction: [{ type: i0.Output, args: ["primaryAction"] }] } });
+
+/**
+ * Provides an in-memory datasource for {@link SciTree} with built-in filtering.
+ *
+ * A datasource provides data to {@link SciTree}, passing each item to {@link SciTreeDescriptor.label} for display.
+ *
+ * This datasource requires all data to be loaded upfront. It invokes the passed child selector function for each item
+ * to construct the tree. Data is filtered in memory.
+ *
+ * If using custom labels, a {@link SciTreeDescriptor.matcher} is required to support {@link SciTree.filter}.
+ *
+ * For large datasets requiring pagination or server-side filtering and sorting, prefer implementing a custom datasource using {@link ɵprovideTreeDatasource}.
+ *
+ * IMPORTANT: Custom datasource support is experimental and currently exposed only as `ɵprovideTableDatasource`. The API and behavior may change in any version without notice.
+ *
+ * @example - Usage
+ * ```ts
+ * import {tree, provideTreeDatasource} from '@scion/components/tree';
+ * import {httpResource} from '@angular/common/http';
+ *
+ * const files = httpResource<File[]>(() => '/api/files', {defaultValue: []});
+ *
+ * const fileTree = tree({
+ *   label: file => file.name,
+ *   datasource: provideTreeDatasource(files.value, file => file.children),
+ * });
+ * ```
+ *
+ * @param root - Provides the root items to display in the tree.
+ * @param children - Function returning an item's children, or an empty array if the item has no children or is a leaf.
+ *                   Called eagerly for each item when initializing the tree, inside a reactive context that re-evaluates when tracked signals change.
+ *
+ * @see SciTreeDescriptor.datasource
+ */
+function provideTreeDatasource(root, children) {
+    return provideTableDatasource(root, children);
+}
+/**
+ * Provides a datasource for {@link SciTree}.
+ *
+ * A datasource provides data to {@link SciTree}, passing each item to {@link SciTreeDescriptor.label} for display.
+ * Filtering and sorting must be implemented by the datasource based on the provided filter and sort criteria.
+ *
+ * A tree is a hierarchical structure of nodes, represented by the datasource as a flat list of tree nodes.
+ * Each node references an item and its parent by ID, without containing the item itself. The tree requests items on demand when scrolled into view,
+ * allowing large datasets to be displayed without loading all items upfront. If the entire dataset is available locally, use {@link provideTreeDatasource}.
+ *
+ * {@link SciTree} constructs the tree from the returned nodes, starting with root nodes (nodes without a parent) and appending child nodes in array order.
+ * Child nodes can appear anywhere in the nodes list; they do not need to follow their parent.
+ *
+ * @example - Usage
+ * ```ts
+ * import {tree, provideTreeDatasource} from '@scion/components/tree';
+ * import {SciTreeNode} from '@scion/components/table';
+ * import {httpResource} from '@angular/common/http';
+ * import {toObservable} from '@angular/core/rxjs-interop';
+ *
+ * const files = httpResource<File[]>(() => '/api/files', {defaultValue: []});
+ *
+ * const fileTree = tree<File, string>({
+ *   label: file => file.name,
+ *   datasource: provideTreeDatasource({
+ *     getTreeNodes: query => toObservable(httpResource<SciTreeNode<string>[]>(() => `/api/files?filter=${query.filter}`, {defaultValue: []}).value),
+ *     getItems: guids => toObservable(httpResource<File[]>(() => ({url: `/api/files`, params: {guids}}), {defaultValue: []}).value),
+ *   }),
+ *   trackBy: file => file.guid,
+ * });
+ * ```
+ *
+ * @param datasource - Specifies the datasource.
+ *
+ * @docs-private Not public API. For internal use only.
+ * @experimental since 22.7.0; API and behavior may change in any version without notice.
+ */
+function ɵprovideTreeDatasource(datasource) {
+    return _provideTableDatasource({
+        getTreeTableNodes: query => datasource.getTreeNodes({ filter: query.tableFilter }),
+        getItems: ids => datasource.getItems(ids),
+    });
+}
+
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SciTreeComponent, provideTreeDatasource, tree, ɵprovideTreeDatasource };
+//# sourceMappingURL=scion-components-tree.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scion-components-tree.mjs","sources":["../../../../projects/scion/components/tree/src/ɵtree.model.ts","../../../../projects/scion/components/tree/src/tree.factory.ts","../../../../projects/scion/components/tree/src/tree.component.ts","../../../../projects/scion/components/tree/src/tree-datasource.ts","../../../../projects/scion/components/tree/src/public_api.ts","../../../../projects/scion/components/tree/src/scion-components-tree.ts"],"sourcesContent":["/*\n * Copyright (c) 2018-2026 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 {SciTree, SciTreeDescriptor} from './tree.model';\nimport {SciTableDescriptor, SciTableRowBindingFactory, ɵSciTable, ɵSciTableRowBindingFactory} from '@scion/components/table';\nimport {Signal, WritableSignal} from '@angular/core';\nimport {MaybeArray} from '@scion/toolkit/types';\n\nexport class ɵSciTree<T = unknown, ID = T> implements SciTree<ID> {\n\n  public readonly activeItem: Signal<ID | undefined>;\n  public readonly selectedItems: Signal<Array<ID>>;\n  public readonly selectable: WritableSignal<'single' | 'multi' | false>;\n\n  private readonly _table: ɵSciTable<T, ID>;\n\n  constructor(descriptor: SciTreeDescriptor<T, ID>) {\n    const tableDescriptor: SciTableDescriptor<T, ID> = {\n      datasource: descriptor.datasource,\n      selectable: descriptor.selectable,\n      sortable: false,\n      resizable: false,\n      showHeader: false,\n      rowActions: descriptor.nodeActions,\n      rowBindings: (bindings: SciTableRowBindingFactory, item, index) => descriptor.nodeBindings?.((bindings as ɵSciTableRowBindingFactory), item, index),\n      bufferSize: descriptor.bufferSize,\n      pageSize: descriptor.pageSize,\n      trackBy: descriptor.trackBy,\n      columns: table => {\n        if (typeof descriptor.label === 'function') {\n          return table.addStringColumn({\n            value: descriptor.label,\n            filterable: descriptor.matcher ? {matcher: descriptor.matcher} : undefined,\n          });\n        }\n\n        if ('component' in descriptor.label) {\n          return table.addComponentColumn({\n            component: descriptor.label.component,\n            padding: descriptor.label.padding,\n            filterable: descriptor.matcher ? {matcher: descriptor.matcher} : undefined,\n          });\n        }\n\n        if ('template' in descriptor.label) {\n          return table.addTemplateColumn({\n            template: descriptor.label.template,\n            padding: descriptor.label.padding,\n            filterable: descriptor.matcher ? {matcher: descriptor.matcher} : undefined,\n          });\n        }\n\n        throw Error('[TreeConfigurationError] Tree label must be `string`, `SciTreeNodeComponentDescriptor`, or `SciTreeNodeTemplateDescriptor`.');\n      },\n    };\n\n    this._table = new ɵSciTable<T, ID>({...tableDescriptor, type: 'tree'});\n\n    this.activeItem = this._table.activeItem;\n    this.selectedItems = this._table.selectedItems;\n    this.selectable = this._table.selectable;\n  }\n\n  public get table(): ɵSciTable<T, ID> {\n    return this._table;\n  }\n\n  public filter(text: string | null): void {\n    this._table.filter(text);\n  }\n\n  public select(ids: MaybeArray<ID>): void {\n    this._table.select(ids);\n  }\n\n  public expandAll(): void {\n    this._table.expandAll();\n  }\n\n  public collapseAll(): void {\n    this._table.collapseAll();\n  }\n\n  public dispose(): void {\n    this._table.dispose();\n  }\n}\n","/*\n * Copyright (c) 2018-2026 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 {assertInInjectionContext, assertNotInReactiveContext, DestroyRef, inject, Injector, runInInjectionContext} from '@angular/core';\nimport {SciTree, SciTreeDescriptor} from './tree.model';\nimport {ɵSciTree} from './ɵtree.model';\n\n/**\n * Creates a tree for displaying a tree structure in {@link SciTreeComponent}.\n *\n * Pass a descriptor to configure the datasource and the display of node labels.\n *\n * Use the {@link provideTreeDatasource} function to create a datasource, passing a signal containing the root items and a\n * function that returns the children of a given item.\n *\n * ```ts\n * import {SciTreeComponent, tree, provideTreeDatasource} from '@scion/components/tree';\n * import {httpResource} from '@angular/common/http';\n *\n * // Load data to display in the tree.\n * const files = httpResource<File[]>(() => '/api/files', {defaultValue: []});\n *\n * // Create the tree and pass data.\n * const fileTree = tree({\n *   label: file => file.name,\n *   datasource: provideTreeDatasource(files.value, file => file.children),\n * });\n * ```\n *\n * In the HTML, bind the created tree instance to `<sci-tree>`.\n *\n * ```html\n * <sci-tree name=\"tree:files\" [tree]=\"fileTree\"/>\n * ```\n *\n * Callback functions:\n * - Run in a reactive context and re-evaluate when tracked signals change.\n * - Can call `inject` to get required dependencies. The injection context is destroyed each time the function is called anew.\n *\n * This function:\n * - Must be called within an injection context, or an explicit {@link Injector} passed.\n * - Must be called in a non-reactive (non-tracking) context.\n *\n * @see SciTreeComponent\n * @experimental since 22.7.0; API and behavior may change in any version without notice.\n *\n * @param descriptor - Configures the tree. Requires a datasource and node label function.\n * @return Handle to bind to `<sci-tree>` and interact with the tree.\n */\nexport function tree<T>(descriptor: SciTreeDescriptor<T>): SciTree<T>;\n\n/**\n * Creates a tree for displaying a tree structure in {@link SciTreeComponent}.\n *\n * Pass a descriptor to configure the datasource and the display of node labels.\n *\n * Use the {@link provideTreeDatasource} function to create a datasource, passing a signal containing the root items and a\n * function that returns the children of a given item.\n *\n * ```ts\n * import {SciTreeComponent, tree, provideTreeDatasource} from '@scion/components/tree';\n * import {httpResource} from '@angular/common/http';\n *\n * // Load data to display in the tree.\n * const files = httpResource<File[]>(() => '/api/files', {defaultValue: []});\n *\n * // Create the tree and pass data.\n * const fileTree = tree({\n *   label: file => file.name,\n *   datasource: provideTreeDatasource(files.value, file => file.children),\n * });\n * ```\n *\n * In the HTML, bind the created tree instance to `<sci-tree>`.\n *\n * ```html\n * <sci-tree name=\"tree:files\" [tree]=\"fileTree\"/>\n * ```\n *\n * Callback functions:\n * - Run in a reactive context and re-evaluate when tracked signals change.\n * - Can call `inject` to get required dependencies. The injection context is destroyed each time the function is called anew.\n *\n * This function:\n * - Must be called within an injection context, or an explicit {@link Injector} passed.\n * - Must be called in a non-reactive (non-tracking) context.\n *\n * @see SciTreeComponent\n * @experimental since 22.7.0; API and behavior may change in any version without notice.\n *\n * @param descriptor - Configures the tree. Requires a datasource and node label function.\n * @return Handle to bind to `<sci-tree>` and interact with the tree.\n */\nexport function tree<T, ID = T>(descriptor: SciTreeDescriptor<T, ID> & {trackBy: (item: T) => ID}): SciTree<ID>;\n\nexport function tree<T, ID = T>(descriptor: SciTreeDescriptor<T, ID>): SciTree<ID> {\n  assertNotInReactiveContext(tree, 'Call tree in a non-reactive (non-tracking) context, such as within the untracked() function.');\n\n  if (!descriptor.injector) {\n    assertInInjectionContext(tree);\n  }\n\n  const injector = descriptor.injector ?? inject(Injector);\n  const sciTree = runInInjectionContext(injector, () => new ɵSciTree(descriptor));\n  injector.get(DestroyRef).onDestroy(() => sciTree.dispose());\n\n  return sciTree;\n}\n","/*\n * Copyright (c) 2018-2026 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 {ApplicationRef, Component, computed, createComponent, DestroyRef, ElementRef, EnvironmentInjector, inject, Injector, input, inputBinding, output, outputBinding} from '@angular/core';\nimport {SciTree, SciTreeEvent} from './tree.model';\nimport {ɵSciTree} from './ɵtree.model';\nimport {SciTableComponent, SciTableEvent} from '@scion/components/table';\n\n/**\n * Provides a tree to display a tree structure.\n *\n * ### Usage\n *\n * Create a tree using the `tree()` function, passing a descriptor to configure the datasource and the display of node labels.\n *\n * Use the {@link provideTreeDatasource} function to create a datasource, passing a signal containing the root items and a\n * function that returns the children of a given item.\n *\n * ```ts\n * import {SciTreeComponent, tree, provideTreeDatasource} from '@scion/components/tree';\n * import {httpResource} from '@angular/common/http';\n *\n * // Load data to display in the tree.\n * const files = httpResource<File[]>(() => '/api/files', {defaultValue: []});\n *\n * // Create the tree and pass data.\n * const fileTree = tree({\n *   label: file => file.name,\n *   datasource: provideTreeDatasource(files.value, file => file.children),\n * });\n * ```\n *\n * In the HTML, bind the created tree instance to `<sci-tree>` and assign it a name.\n * The name must start with the `tree:` prefix and is used to store user settings.\n *\n * ```html\n * <sci-tree name=\"tree:files\" [tree]=\"fileTree\"/>\n * ```\n *\n * ### Fixed Node Height\n *\n * All nodes in the tree must have equal height, which is `2em` by default. The height can be changed per tree using the CSS variable `--sci-tree-node-height`.\n *\n * ```scss\n * sci-tree {\n *   --sci-tree-node-height: 30px;\n * }\n * ```\n *\n * ### Styling\n *\n * The appearance of the tree can be customized using the following CSS variables, either globally in the `:root` or at the tree level.\n *\n * - `--sci-tree-node-height`\n * - `--sci-tree-node-indent`\n * - `--sci-tree-node-background-color-hover`\n * - `--sci-tree-node-background-color-selected`\n * - `--sci-tree-node-border-radius`\n * - `--sci-tree-node-outline-color`\n * - `--sci-tree-node-outline-width`\n * - `--sci-tree-node-outline-style`\n * - `--sci-tree-node-action-background-color`\n * - `--sci-tree-node-action-background-color-selected`\n *\n * @experimental since 22.7.0; API and behavior may change in any version without notice.\n */\n@Component({\n  selector: 'sci-tree',\n  template: '',\n  styleUrl: './tree.component.scss',\n})\nexport class SciTreeComponent<T = unknown, ID = T> {\n\n  /**\n   * Specifies a unique tree identifier, used as the key for storing user preferences.\n   */\n  public readonly name = input.required<`tree:${string}`>();\n\n  /**\n   * Specifies the tree definition and datasource.\n   */\n  public readonly tree = input.required({transform: (tree: SciTree<ID>) => tree as ɵSciTree<T, ID>});\n\n  /**\n   * Emits when the user double-clicks a node or presses `Enter` on selected nodes.\n   */\n  public readonly primaryAction = output<SciTreeEvent<ID>>();\n\n  constructor() {\n    this.attachVirtualTable();\n  }\n\n  /**\n   * Creates and attaches a {@link SciTableComponent} using this component as host.\n   */\n  private attachVirtualTable(): void {\n    const componentRef = createComponent(SciTableComponent, {\n      elementInjector: inject(Injector),\n      environmentInjector: inject(EnvironmentInjector),\n      hostElement: inject(ElementRef).nativeElement as HTMLElement,\n      bindings: [\n        inputBinding('name', computed(() => this.name())),\n        inputBinding('table', computed(() => this.tree().table)),\n        outputBinding('primaryAction', (event: SciTableEvent<ID>) => this.primaryAction.emit(event)),\n      ],\n    });\n\n    // Attach component to Angular component tree for change detection.\n    inject(ApplicationRef).attachView(componentRef.hostView);\n\n    // Destroy component when host is destroyed.\n    inject(DestroyRef).onDestroy(() => componentRef.destroy());\n  }\n}\n","import {provideTableDatasource, SciTableDatasourceProvider, SciTreeTableNode, ɵprovideTableDatasource} from '@scion/components/table';\nimport {MaybeAsync} from '@scion/toolkit/types';\nimport {Signal} from '@angular/core';\n\nexport type SciTreeDatasourceProvider<T, ID = never> = SciTableDatasourceProvider<T, ID>;\nexport type SciTreeNode<T> = SciTreeTableNode<T>;\n\n/**\n * Provides an in-memory datasource for {@link SciTree} with built-in filtering.\n *\n * A datasource provides data to {@link SciTree}, passing each item to {@link SciTreeDescriptor.label} for display.\n *\n * This datasource requires all data to be loaded upfront. It invokes the passed child selector function for each item\n * to construct the tree. Data is filtered in memory.\n *\n * If using custom labels, a {@link SciTreeDescriptor.matcher} is required to support {@link SciTree.filter}.\n *\n * For large datasets requiring pagination or server-side filtering and sorting, prefer implementing a custom datasource using {@link ɵprovideTreeDatasource}.\n *\n * IMPORTANT: Custom datasource support is experimental and currently exposed only as `ɵprovideTableDatasource`. The API and behavior may change in any version without notice.\n *\n * @example - Usage\n * ```ts\n * import {tree, provideTreeDatasource} from '@scion/components/tree';\n * import {httpResource} from '@angular/common/http';\n *\n * const files = httpResource<File[]>(() => '/api/files', {defaultValue: []});\n *\n * const fileTree = tree({\n *   label: file => file.name,\n *   datasource: provideTreeDatasource(files.value, file => file.children),\n * });\n * ```\n *\n * @param root - Provides the root items to display in the tree.\n * @param children - Function returning an item's children, or an empty array if the item has no children or is a leaf.\n *                   Called eagerly for each item when initializing the tree, inside a reactive context that re-evaluates when tracked signals change.\n *\n * @see SciTreeDescriptor.datasource\n */\nexport function provideTreeDatasource<T>(root: Signal<T[]>, children: (item: T) => T[]): SciTreeDatasourceProvider<T> {\n  return provideTableDatasource(root, children);\n}\n\n/**\n * Provides a datasource for {@link SciTree}.\n *\n * A datasource provides data to {@link SciTree}, passing each item to {@link SciTreeDescriptor.label} for display.\n * Filtering and sorting must be implemented by the datasource based on the provided filter and sort criteria.\n *\n * A tree is a hierarchical structure of nodes, represented by the datasource as a flat list of tree nodes.\n * Each node references an item and its parent by ID, without containing the item itself. The tree requests items on demand when scrolled into view,\n * allowing large datasets to be displayed without loading all items upfront. If the entire dataset is available locally, use {@link provideTreeDatasource}.\n *\n * {@link SciTree} constructs the tree from the returned nodes, starting with root nodes (nodes without a parent) and appending child nodes in array order.\n * Child nodes can appear anywhere in the nodes list; they do not need to follow their parent.\n *\n * @example - Usage\n * ```ts\n * import {tree, provideTreeDatasource} from '@scion/components/tree';\n * import {SciTreeNode} from '@scion/components/table';\n * import {httpResource} from '@angular/common/http';\n * import {toObservable} from '@angular/core/rxjs-interop';\n *\n * const files = httpResource<File[]>(() => '/api/files', {defaultValue: []});\n *\n * const fileTree = tree<File, string>({\n *   label: file => file.name,\n *   datasource: provideTreeDatasource({\n *     getTreeNodes: query => toObservable(httpResource<SciTreeNode<string>[]>(() => `/api/files?filter=${query.filter}`, {defaultValue: []}).value),\n *     getItems: guids => toObservable(httpResource<File[]>(() => ({url: `/api/files`, params: {guids}}), {defaultValue: []}).value),\n *   }),\n *   trackBy: file => file.guid,\n * });\n * ```\n *\n * @param datasource - Specifies the datasource.\n *\n * @docs-private Not public API. For internal use only.\n * @experimental since 22.7.0; API and behavior may change in any version without notice.\n */\nexport function ɵprovideTreeDatasource<T, ID>(datasource: SciTreeDatasource<T, ID>): SciTableDatasourceProvider<T, ID> {\n  return ɵprovideTableDatasource({\n    getTreeTableNodes: query => datasource.getTreeNodes({filter: query.tableFilter}),\n    getItems: ids => datasource.getItems(ids),\n  });\n}\n\nexport interface SciTreeDatasourceQuery {\n  filter?: string;\n}\n\n/**\n * Represents a datasource for {@link SciTree}.\n *\n * A datasource provides data to {@link SciTree}, passing each item to {@link SciTreeDescriptor.label} for display.\n * Filtering and sorting must be implemented by the datasource based on the provided filter and sort criteria.\n *\n * A tree is a hierarchical structure of nodes, represented by the datasource as a flat list of tree nodes.\n * Each node references an item and its parent by ID, without containing the item itself. The tree requests items on demand when scrolled into view,\n * allowing large datasets to be displayed without loading all items upfront. If the entire dataset is available locally, use {@link provideTreeDatasource}.\n *\n * {@link SciTree} constructs the tree from the returned nodes, starting with root nodes (nodes without a parent) and appending child nodes in array order.\n * Child nodes can appear anywhere in the nodes list; they do not need to follow their parent.\n */\nexport interface SciTreeDatasource<T, ID> {\n\n  /**\n   * Returns a flat list of tree nodes matching the given filter and sort criteria.\n   *\n   * A tree node references an item and its parent by ID, without containing the item itself.\n   *\n   * Child nodes can appear anywhere in the list; they do not need to follow their parent. Siblings are added in the order they appear in the list.\n   *\n   * If a filter is set, return only the directly matching nodes (leaf or intermediate). Do not include their ancestors.\n   */\n  getTreeNodes(query: SciTreeDatasourceQuery): MaybeAsync<SciTreeNode<ID>[]>;\n\n  /**\n   * Resolves items for the specified IDs. Called as nodes scroll into view.\n   */\n  getItems(ids: ID[]): MaybeAsync<T[]>;\n}\n","/*\n * Copyright (c) 2018-2026 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\nexport {tree} from './tree.factory';\nexport {SciTreeComponent} from './tree.component';\nexport {type SciTree, type SciTreeDescriptor, type SciTreeNodeContext} from './tree.model';\nexport {provideTreeDatasource, ɵprovideTreeDatasource, type SciTreeDatasourceQuery, type SciTreeDatasourceProvider, type SciTreeDatasource, type SciTreeNode} from './tree-datasource';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["ɵSciTable","ɵprovideTableDatasource"],"mappings":"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"}

package/fesm2022/scion-components-viewport.mjs

@@ -3,7 +3,7 @@ import { inject, DOCUMENT, NgZone, Injectable, input, ElementRef, Renderer2, com
 import { coerceElement } from '@angular/cdk/coercion';
 import { fromEvent, race, tap, merge, finalize, timer, exhaustMap, of, concatWith, mergeWith, switchMap as switchMap$1, concat, map as map$1 } from 'rxjs';
 import { debounceTime, startWith, map, distinctUntilChanged, takeUntil, withLatestFrom, switchMap } from 'rxjs/operators';
-import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 import { subscribeIn } from '@scion/toolkit/operators';
 import { fromResize$, fromMutation$ } from '@scion/toolkit/observable';
 import { isBetween, clamp } from '@scion/toolkit/util';
@@ -225,24 +225,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  *  SPDX-License-Identifier: EPL-2.0
  */
 /**
- * Renders a vertical or horizontal scrollbar.
+ * Renders a vertical or horizontal scrollbar to scroll an associated viewport.
  *
- * The scrollbar features the following functionality:
- * - allows to move the thumb by mouse
- * - enlarges the thumb if the mouse pointer is near the thumb
- * - allows paging on mousedown on the scroll track
+ * Usage:
+ * ```html
+ * <div class="viewport" #viewport>
+ *   ...
+ * </div>
+ * <sci-scrollbar [viewport]="viewport"/>
+ * ```
+ *
+ * To hide the scrollbar when not hovering the associated viewport, set `opacity` to `0`. Transitions on `opacity` fade the scrollbar in and out.
+ *
+ * ```scss
+ * div.viewport:not(:hover) + sci-scrollbar {
+ *   opacity: 0;
+ * }
+ * ```
  *
  * ### Styling:
  *
- * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `src/styles.scss`.
  * To style a specific `sci-scrollbar` component, the following CSS variables can be set directly on the component.
  *
- * - --sci-scrollbar-color:    Sets the color of the scrollbar.
+ * - --sci-scrollbar-color: Sets the color of the scrollbar.
  *
  * Example:
- *
- * ```css
- *
+ * ```scss
  * sci-scrollbar {
  *   --sci-scrollbar-color: blue;
  * }
@@ -458,7 +467,7 @@ class SciScrollbarComponent {
         return this.vertical() ? this._host.clientHeight : this._host.clientWidth;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SciScrollbarComponent, isStandalone: true, selector: "sci-scrollbar", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.vertical": "vertical()", "class.horizontal": "horizontal()", "class.scrolling": "scrolling()", "class.overflow": "overflow()", "style.--\u0275sci-scrollbar-thumb-position-fr": "thumbPositionFr()", "style.--\u0275sci-scrollbar-thumb-size-fr": "thumbSizeFr()" } }, viewQueries: [{ propertyName: "_thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- scrolltrack for moving the viewport client upwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onThumbMouseDown($event)\">\n  <div class=\"thumb e2e-thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack for moving the viewport client downwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;box-sizing:border-box;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column;width:8px}:host.horizontal{flex-direction:row;height:8px}:host>div.scrolltrack:first-child{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host:not(.overflow){display:none}:host:hover>div.thumb-handle>div.thumb,:host.scrolling>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host:hover>div.thumb-handle>div.thumb.vertical,:host.scrolling>div.thumb-handle>div.thumb.vertical{width:100%}:host:hover>div.thumb-handle>div.thumb.horizontal,:host.scrolling>div.thumb-handle>div.thumb.horizontal{height:100%}:host>div.thumb-handle{display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column;min-height:20px}:host>div.thumb-handle.horizontal{flex-direction:row;min-width:20px}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack:last-child{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SciScrollbarComponent, isStandalone: true, selector: "sci-scrollbar", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.vertical": "vertical()", "class.horizontal": "horizontal()", "class.scrolling": "scrolling()", "class.overflow": "overflow()", "style.--\u0275sci-scrollbar-thumb-position-fr": "thumbPositionFr()", "style.--\u0275sci-scrollbar-thumb-size-fr": "thumbSizeFr()" } }, viewQueries: [{ propertyName: "_thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- scrolltrack for moving the viewport client upwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onThumbMouseDown($event)\">\n  <div class=\"thumb e2e-thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack for moving the viewport client downwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;box-sizing:border-box;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column;width:8px}:host.horizontal{flex-direction:row;height:8px}:host>div.scrolltrack:first-child{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host:not(.overflow){display:none}:host:is(:hover,.scrolling,#sci-reset){opacity:1}:host:hover>div.thumb-handle>div.thumb,:host.scrolling>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host:hover>div.thumb-handle>div.thumb.vertical,:host.scrolling>div.thumb-handle>div.thumb.vertical{width:100%}:host:hover>div.thumb-handle>div.thumb.horizontal,:host.scrolling>div.thumb-handle>div.thumb.horizontal{height:100%}:host>div.thumb-handle{display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column;min-height:20px}:host>div.thumb-handle.horizontal{flex-direction:row;min-width:20px}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack:last-child{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciScrollbarComponent, decorators: [{
             type: Component,
@@ -469,7 +478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class.overflow]': 'overflow()',
                         '[style.--ɵsci-scrollbar-thumb-position-fr]': 'thumbPositionFr()',
                         '[style.--ɵsci-scrollbar-thumb-size-fr]': 'thumbSizeFr()',
-                    }, template: "<!-- scrolltrack for moving the viewport client upwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onThumbMouseDown($event)\">\n  <div class=\"thumb e2e-thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack for moving the viewport client downwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;box-sizing:border-box;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column;width:8px}:host.horizontal{flex-direction:row;height:8px}:host>div.scrolltrack:first-child{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host:not(.overflow){display:none}:host:hover>div.thumb-handle>div.thumb,:host.scrolling>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host:hover>div.thumb-handle>div.thumb.vertical,:host.scrolling>div.thumb-handle>div.thumb.vertical{width:100%}:host:hover>div.thumb-handle>div.thumb.horizontal,:host.scrolling>div.thumb-handle>div.thumb.horizontal{height:100%}:host>div.thumb-handle{display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column;min-height:20px}:host>div.thumb-handle.horizontal{flex-direction:row;min-width:20px}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack:last-child{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}\n"] }]
+                    }, template: "<!-- scrolltrack for moving the viewport client upwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onThumbMouseDown($event)\">\n  <div class=\"thumb e2e-thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack for moving the viewport client downwards (paging) -->\n<div class=\"scrolltrack\" (mousedown)=\"onScrollTrackMouseDown($event)\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;box-sizing:border-box;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column;width:8px}:host.horizontal{flex-direction:row;height:8px}:host>div.scrolltrack:first-child{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host:not(.overflow){display:none}:host:is(:hover,.scrolling,#sci-reset){opacity:1}:host:hover>div.thumb-handle>div.thumb,:host.scrolling>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host:hover>div.thumb-handle>div.thumb.vertical,:host.scrolling>div.thumb-handle>div.thumb.vertical{width:100%}:host:hover>div.thumb-handle>div.thumb.horizontal,:host.scrolling>div.thumb-handle>div.thumb.horizontal{height:100%}:host>div.thumb-handle{display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column;min-height:20px}:host>div.thumb-handle.horizontal{flex-direction:row;min-width:20px}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack:last-child{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], viewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewport", required: true }] }], _thumbElement: [{ type: i0.ViewChild, args: ['thumb_handle', { isSignal: true }] }] } });
 /**
  * Emits whenever the viewport is scrolled.
@@ -584,7 +593,7 @@ function calculateScreenOffset(mousedownEvent) {
  *
  * ## Styling
  *
- * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `src/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.
@@ -763,11 +772,15 @@ class SciViewportComponent {
      */
     computeScrolling(viewport) {
         const zone = inject(NgZone);
-        return toSignal(toObservable(viewport)
-            .pipe(switchMap$1(viewport => fromEvent(viewport.nativeElement, 'scroll', { passive: true }).pipe(subscribeIn(fn => zone.runOutsideAngular(fn)))), tap(event => this.scroll.emit(event)), switchMap$1(() => concat(of(true), timer(150).pipe(map$1(() => false))))), { initialValue: false });
+        return rxResource({
+            defaultValue: false,
+            params: () => viewport().nativeElement,
+            stream: ({ params: viewport }) => fromEvent(viewport, 'scroll', { passive: true })
+                .pipe(tap(event => this.scroll.emit(event)), switchMap$1(() => concat(of(true), timer(150).pipe(map$1(() => false)))), startWith(false), subscribeIn(fn => zone.runOutsideAngular(fn))),
+        }).value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciViewportComponent, isStandalone: true, selector: "sci-viewport", inputs: { scrollbarStyle: { classPropertyName: "scrollbarStyle", publicName: "scrollbarStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "_viewportClient", first: true, predicate: ["viewport_client"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\" #sciScrollable=\"sciScrollable\"\n     cdkScrollable>\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle() === 'on-top' && sciScrollable.isNativeScrollbarCropped()) {\n  <sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport\"/>\n  <sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:is(:not(:hover):not(:active),:host(:not(:hover):not(:active))) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute}:host>sci-scrollbar.vertical{top:2px;right:1px;bottom:2px}:host>sci-scrollbar.horizontal{left:2px;bottom:1px;right:2px}\n"], dependencies: [{ kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"], exportAs: ["sciScrollable"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciViewportComponent, isStandalone: true, selector: "sci-viewport", inputs: { scrollbarStyle: { classPropertyName: "scrollbarStyle", publicName: "scrollbarStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "_viewportClient", first: true, predicate: ["viewport_client"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\" #sciScrollable=\"sciScrollable\"\n     cdkScrollable>\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle() === 'on-top' && sciScrollable.isNativeScrollbarCropped()) {\n  <sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport\"/>\n  <sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>div.viewport:not(:hover)~sci-scrollbar{opacity:0}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute}:host>sci-scrollbar[direction=vscroll]{inset:2px 1px 2px auto}:host>sci-scrollbar[direction=hscroll]{inset:auto 2px 1px}\n"], dependencies: [{ kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"], exportAs: ["sciScrollable"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciViewportComponent, decorators: [{
             type: Component,
@@ -777,7 +790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         CdkScrollable,
                     ], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '(focus)': 'focus()',
-                    }, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\" #sciScrollable=\"sciScrollable\"\n     cdkScrollable>\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle() === 'on-top' && sciScrollable.isNativeScrollbarCropped()) {\n  <sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport\"/>\n  <sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:is(:not(:hover):not(:active),:host(:not(:hover):not(:active))) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute}:host>sci-scrollbar.vertical{top:2px;right:1px;bottom:2px}:host>sci-scrollbar.horizontal{left:2px;bottom:1px;right:2px}\n"] }]
+                    }, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\" #sciScrollable=\"sciScrollable\"\n     cdkScrollable>\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle() === 'on-top' && sciScrollable.isNativeScrollbarCropped()) {\n  <sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport\"/>\n  <sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>div.viewport:not(:hover)~sci-scrollbar{opacity:0}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute}:host>sci-scrollbar[direction=vscroll]{inset:2px 1px 2px auto}:host>sci-scrollbar[direction=hscroll]{inset:auto 2px 1px}\n"] }]
         }], propDecorators: { scrollbarStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarStyle", required: false }] }], scroll: [{ type: i0.Output, args: ["scroll"] }], _viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], _viewportClient: [{ type: i0.ViewChild, args: ['viewport_client', { isSignal: true }] }] } });
 
 /*