@scion/components 22.6.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scion/components",
-  "version": "22.6.0",
+  "version": "22.7.0",
   "description": "Provides a collection of Angular components and directives primarily for use in SCION libraries such as `@scion/workbench` and `@scion/microfrontend-platform`. This library is not a comprehensive component library as its focus is on SCION requirements.",
   "license": "EPL-2.0",
   "private": false,
@@ -65,6 +65,10 @@
       "types": "./types/scion-components-throbber.d.ts",
       "default": "./fesm2022/scion-components-throbber.mjs"
     },
+    "./tree": {
+      "types": "./types/scion-components-tree.d.ts",
+      "default": "./fesm2022/scion-components-tree.mjs"
+    },
     "./viewport": {
       "types": "./types/scion-components-viewport.d.ts",
       "default": "./fesm2022/scion-components-viewport.mjs"
@@ -78,7 +82,7 @@
     "@angular/common": "^22.0.0",
     "@angular/animations": "^22.0.0",
     "@angular/cdk": "^22.0.0",
-    "@scion/toolkit": "^2.4.0",
+    "@scion/toolkit": "^2.5.0",
     "rxjs": "^7.8.0"
   },
   "repository": {

package/tree/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/scion-components-tree.mjs",
+  "typings": "../types/scion-components-tree.d.ts"
+}

package/types/scion-components-common.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Signal, Injector, Provider, DestroyableInjector, Binding, Type, TemplateRef, InjectionToken, WritableSignal, ElementRef } from '@angular/core';
+import { Signal, Injector, Provider, DestroyableInjector, Binding, Type, TemplateRef, InjectionToken, WritableSignal, ElementRef, EnvironmentProviders } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ComponentType } from '@angular/cdk/portal';
 
@@ -302,5 +302,25 @@ declare const TOOLTIP_ON_OVERFLOW_DIRECTIVE_SOURCE_ELEMENT: InjectionToken<Maybe
  */
 declare const TOOLTIP_ON_OVERFLOW_DIRECTIVE_ADDITIONAL_TEXT: InjectionToken<MaybeSignal<string | undefined>>;
 
-export { SCI_LOCALE, SciAttributesDirective, SciComponentOutletDirective, SciTooltipOnOverflowDirective, TOOLTIP_ON_OVERFLOW_DIRECTIVE_ADDITIONAL_TEXT, TOOLTIP_ON_OVERFLOW_DIRECTIVE_SOURCE_ELEMENT, coerceSignal, toLazyObservable, ɵSingleActiveInjectorFactory, ɵassertInInjectionContext, ɵcreateDestroyableInjector };
+/**
+ * Provides persistent storage interface.
+ */
+interface SciComponentsStorage {
+    /**
+     * Method invoked to load a value from persisted storage.
+     */
+    load(name: `scion.components:${string}`): Promise<string | null> | string | null;
+    /**
+     * Method invoked to write a value to persisted storage.
+     */
+    store(name: `scion.components:${string}`, value: string): Promise<void> | void;
+}
+declare const SCI_COMPONENTS_STORAGE: InjectionToken<SciComponentsStorage>;
+/**
+ * Defaults to localStorage persistence.
+ * @param storage
+ */
+declare function provideComponentsStorage(storage: Type<SciComponentsStorage>): EnvironmentProviders;
+
+export { SCI_COMPONENTS_STORAGE, SCI_LOCALE, SciAttributesDirective, SciComponentOutletDirective, SciTooltipOnOverflowDirective, TOOLTIP_ON_OVERFLOW_DIRECTIVE_ADDITIONAL_TEXT, TOOLTIP_ON_OVERFLOW_DIRECTIVE_SOURCE_ELEMENT, coerceSignal, provideComponentsStorage, toLazyObservable, ɵSingleActiveInjectorFactory, ɵassertInInjectionContext, ɵcreateDestroyableInjector };
 export type { MaybeSignal, SciComponentDescriptor, SciTemplateDescriptor };