@scion/components 22.2.0 → 22.4.0

package/fesm2022/scion-components-table.mjs

@@ -0,0 +1,2337 @@
+import * as i0 from '@angular/core';
+import { computed, signal, InjectionToken, makeEnvironmentProviders, untracked, inject, Injector, linkedSignal, isSignal, runInInjectionContext, NgZone, resource, effect, assertNotInReactiveContext, assertInInjectionContext, DestroyRef, Injectable, input, Component, output, viewChild, Directive, afterNextRender, ElementRef, Pipe, debounced, viewChildren, ViewEncapsulation } from '@angular/core';
+import { coerceSignal, createDestroyableInjector, toLazyObservable, SciComponentOutletDirective, SciAttributesDirective } from '@scion/components/common';
+import { toObservable, rxResource, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Objects, clamp, runSafe, Observables, Arrays } from '@scion/toolkit/util';
+import { fromEvent, switchMap, concat, of, timer, firstValueFrom, defaultIfEmpty, throwError, skip } from 'rxjs';
+import { map, startWith, first } from 'rxjs/operators';
+import { subscribeIn } from '@scion/toolkit/operators';
+import { SciScrollbarComponent } from '@scion/components/viewport';
+import { dimension } from '@scion/components/dimension';
+import { NgTemplateOutlet } from '@angular/common';
+import { SciIconComponent } from '@scion/components/icon';
+import { SciToolbarComponent, contributeMenu, ɵSciMenuService as _SciMenuService } from '@scion/components/menu';
+import { UUID } from '@scion/toolkit/uuid';
+import { SciSplitterComponent } from '@scion/components/splitter';
+import { text, SciTextPipe } from '@scion/components/text';
+import { SciThrobberComponent } from '@scion/components/throbber';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+/*
+ * 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 ɵSciTableColumnFactory {
+    _table;
+    columns = new Array();
+    constructor(_table) {
+        this._table = _table;
+    }
+    addStringColumn(descriptorLike, value) {
+        const descriptor = coerceColumnDescriptor(descriptorLike, value);
+        const column = this.mapToColumn(descriptor);
+        const sortable = descriptor.sortable ?? true;
+        const filterable = descriptor.filterable ?? true;
+        this.columns.push({
+            ...column,
+            type: 'string',
+            value: descriptor.value,
+            sortable: computed(() => this._table.sortable() && !!sortable),
+            filterable: computed(() => this._table.filterable() && !!filterable),
+            compare: typeof sortable === 'object' ? sortable.comparator : (a, b) => a.value.localeCompare(b.value),
+            matches: typeof filterable === 'object' ? filterable.matcher : (text, context) => context.value.toLowerCase().includes(text.toLowerCase()),
+        });
+        return this;
+    }
+    addNumberColumn(descriptorLike, value) {
+        const descriptor = coerceColumnDescriptor(descriptorLike, value);
+        const column = this.mapToColumn(descriptor);
+        this.columns.push({
+            ...column,
+            type: 'number',
+            value: descriptor.value,
+            sortable: computed(() => this._table.sortable() && (descriptor.sortable ?? true)),
+            filterable: computed(() => this._table.filterable() && (descriptor.filterable ?? true)),
+            compare: (a, b) => a.value - b.value,
+            matches: (text, context) => context.value === text,
+        });
+        return this;
+    }
+    addBooleanColumn(descriptorLike, value) {
+        const descriptor = coerceColumnDescriptor(descriptorLike, value);
+        const column = this.mapToColumn(descriptor);
+        this.columns.push({
+            ...column,
+            type: 'boolean',
+            value: descriptor.value,
+            sortable: computed(() => this._table.sortable() && (descriptor.sortable ?? true)),
+            filterable: computed(() => this._table.filterable() && (descriptor.filterable ?? true)),
+            compare: (a, b) => a.value === b.value ? 0 : (a.value ? 1 : -1),
+            matches: (text, context) => context.value === text,
+        });
+        return this;
+    }
+    addComponentColumn(descriptor) {
+        // Require a filter matcher if filterable on an array datasource.
+        if (this._table.isArrayDatasource() && descriptor.filterable === true) {
+            throw Error('[ColumnDefinitionError] Component column requires a filter matcher in order to be filterable.');
+        }
+        // Require a sort comparator if sortable on an array datasource.
+        if (this._table.isArrayDatasource() && descriptor.sortable === true) {
+            throw Error('[ColumnDefinitionError] Component column requires a sort comparator in order to be sortable.');
+        }
+        const column = this.mapToColumn(descriptor);
+        this.columns.push({
+            ...column,
+            type: 'component',
+            component: descriptor.component,
+            sortable: computed(() => this._table.sortable() && !!descriptor.sortable),
+            filterable: computed(() => this._table.filterable() && !!descriptor.filterable),
+            compare: typeof descriptor.sortable === 'object' ? descriptor.sortable.comparator : () => 0,
+            matches: typeof descriptor.filterable === 'object' ? descriptor.filterable.matcher : () => true,
+            padding: descriptor.padding ?? true,
+        });
+        return this;
+    }
+    addTemplateColumn(descriptor) {
+        // Require a filter matcher if filterable on an array datasource.
+        if (this._table.isArrayDatasource() && descriptor.filterable === true) {
+            throw Error('[ColumnDefinitionError] Template column requires a filter matcher in order to be filterable.');
+        }
+        // Require a sort comparator if sortable on an array datasource.
+        if (this._table.isArrayDatasource() && descriptor.sortable === true) {
+            throw Error('[ColumnDefinitionError] Template column requires a sort comparator in order to be sortable.');
+        }
+        const column = this.mapToColumn(descriptor);
+        this.columns.push({
+            ...column,
+            type: 'template',
+            template: descriptor.template,
+            sortable: computed(() => this._table.sortable() && !!descriptor.sortable),
+            filterable: computed(() => this._table.filterable() && !!descriptor.filterable),
+            compare: typeof descriptor.sortable === 'object' ? descriptor.sortable.comparator : () => 0,
+            matches: typeof descriptor.filterable === 'object' ? descriptor.filterable.matcher : () => true,
+            padding: descriptor.padding ?? true,
+        });
+        return this;
+    }
+    /**
+     * Maps given column descriptor to a {@link SciTableColumn}.
+     */
+    mapToColumn(descriptor) {
+        // Require a unique column name.
+        const name = descriptor.name ?? `column:${this.columns.length}`;
+        if (this.columns.find(column => column.name === name)) {
+            throw Error(`[ColumnDefinitionError] Column names must be unique. "${name}" is defined more than once.`);
+        }
+        // Disallow a filter matcher if using a custom datasource.
+        if (!this._table.isArrayDatasource() && typeof descriptor.filterable === 'object') {
+            throw Error('[ColumnDefinitionError] Configuring a filter matcher is not supported for tables using a datasource. Filtering must be done by the datasource.');
+        }
+        // Disallow a sort comparator if using a custom datasource.
+        if (!this._table.isArrayDatasource() && typeof descriptor.sortable === 'object') {
+            throw Error('[ColumnDefinitionError] Configuring a sort comparator is not supported for tables using a datasource. Sorting must be done by the datasource.');
+        }
+        return {
+            name: name,
+            header: coerceSignal(descriptor.header ?? ''),
+            resizable: computed(() => this._table.resizable() && (descriptor.resizable ?? true)),
+            width: computed(() => {
+                const userSettings = this._table.userSettings().columns?.find(column => column.name === name);
+                return userSettings?.width ? `${userSettings.width}px` : descriptor.width ?? '1fr';
+            }),
+            minWidth: descriptor.minWidth ?? 100,
+            resizing: signal(false),
+            padding: true,
+            location: { x: 0, width: 0 }, // set in `SciTableColumnComponent`
+        };
+    }
+}
+function coerceColumnDescriptor(argument1, argument2) {
+    switch (typeof argument1) {
+        case 'string':
+            return { header: argument1, value: argument2 };
+        case 'function':
+            return { value: argument1 };
+        default:
+            return argument1;
+    }
+}
+
+/*
+ * 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
+ */
+/**
+ * Creates a range of integers starting at `start` and ending at `end` (including `end`).
+ */
+function rangeInclusive(start, end) {
+    const range = [];
+    for (let i = start; i <= end; i++) {
+        range.push(i);
+    }
+    return range;
+}
+
+/*
+ * 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
+ */
+const SCI_TABLE_STORAGE = new InjectionToken('SCI_TABLE_STORAGE', { factory: () => ({
+        load: (name) => localStorage.getItem(name),
+        store: (name, value) => localStorage.setItem(name, value),
+    }) });
+/**
+ * Defaults to localStorage persistence.
+ * @param storage
+ */
+function provideTableStorage(storage) {
+    return makeEnvironmentProviders([
+        { provide: SCI_TABLE_STORAGE, useClass: storage },
+    ]);
+}
+
+/*
+ * 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 arrayDatasource(data, columns) {
+    const dataset = new Dataset(data, columns);
+    return markAsArrayDatasource((request) => {
+        dataset.columnFilters.set(request.columnFilters);
+        dataset.tableFilter.set(request.tableFilter);
+        dataset.sortCriteria.set(request.sortCriteria);
+        const totalCount = dataset.count;
+        const items = dataset.slice(request.start, request.end);
+        return toObservable(computed(() => ({
+            totalCount: totalCount(),
+            items: items(),
+        })));
+    });
+}
+/**
+ * Provides a filtered and sorted view on given data.
+ */
+class Dataset {
+    _dataview;
+    columnFilters = signal([], { ...(ngDevMode ? { debugName: "columnFilters" } : /* istanbul ignore next */ {}), equal: Objects.isEqual });
+    sortCriteria = signal([], { ...(ngDevMode ? { debugName: "sortCriteria" } : /* istanbul ignore next */ {}), equal: Objects.isEqual });
+    tableFilter = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableFilter" }] : /* istanbul ignore next */ []));
+    /**
+     * Returns the total count of items matching the current filters and search criteria.
+     */
+    count = computed(() => this._dataview().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    constructor(data, columns) {
+        const dataset = computed(() => data().map(item => ({
+            item,
+            cells: columns().reduce((cells, column) => cells.set(column.name, {
+                column: column,
+                value: 'value' in column ? coerceSignal(untracked(() => column.value(item)), { coerceUndefined: true })() : undefined,
+            }), new Map()),
+        })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataset" }] : /* istanbul ignore next */ []));
+        // Memoize filtered/sorted view; recomputes only when dataset or criteria change, not when scrolling through the view, as sorting is an expensive operation.
+        this._dataview = computed(() => {
+            const rows = dataset();
+            const columnFilters = this.columnFilters();
+            const tableFilter = this.tableFilter();
+            const sortCriteria = this.sortCriteria();
+            // PERF: Do not track signals inside `Array.sort` to avoid Angular signal tracking overhead as the comparator runs repeatedly, degrading performance otherwise.
+            return untracked(() => rows
+                .filter(row => matchesRow(row, columnFilters) && matchesGlobalFilter(row, tableFilter ?? undefined))
+                .sort((a, b) => compareRows(a, b, sortCriteria)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_dataview" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Returns a slice of the filtered and sorted data within the given range (start inclusive, end exclusive).
+     */
+    slice(start, end) {
+        return computed(() => this._dataview().slice(start, end).map(row => row.item));
+    }
+}
+/**
+ * Tests whether a row matches the given global filter.
+ */
+function matchesGlobalFilter(row, filter) {
+    if (!filter?.trim()) {
+        return true;
+    }
+    for (const cell of row.cells.values()) {
+        const text = coerceFilterText(filter, { to: cell.column.type });
+        if (text === undefined) {
+            continue;
+        }
+        if (matchesRow(row, [{ text, columnName: cell.column.name }])) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Tests whether a row matches the given column filters.
+ */
+function matchesRow(row, columnFilters) {
+    if (!columnFilters.length) {
+        return true;
+    }
+    for (const columnFilter of columnFilters) {
+        const cell = row.cells.get(columnFilter.columnName);
+        if (!cell.column.matches(columnFilter.text, { item: row.item, value: cell.value })) { // component and template columns have no value
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Compares two rows based on the given sort criteria.
+ */
+function compareRows(row1, row2, sortCriteria) {
+    if (!sortCriteria.length) {
+        return 0;
+    }
+    for (const criterion of sortCriteria) {
+        const cell1 = row1.cells.get(criterion.columnName);
+        const cell2 = row2.cells.get(criterion.columnName);
+        const comparison = cell1.column.compare({ item: row1.item, value: cell1.value }, { item: row2.item, value: cell2.value });
+        if (comparison !== 0) {
+            const signum = criterion.direction === 'asc' ? 1 : -1;
+            return signum * comparison;
+        }
+    }
+    return 0;
+}
+/**
+ * Checks whether given {@link SciTableDataLoaderFn} represents an {@link arrayDatasource}.
+ */
+function isArrayDatasource(loader) {
+    return ARRAY_DATASOURCE_MARKER in loader;
+}
+/**
+ * Marks given {@link SciTableDataLoaderFn} as an array data source.
+ */
+function markAsArrayDatasource(loader) {
+    Object.defineProperty(loader, ARRAY_DATASOURCE_MARKER, { value: true, writable: false, enumerable: false, configurable: false });
+    return loader;
+}
+/**
+ * Identifies a {@link SciTableDataLoaderFn} as an {@link arrayDatasource}.
+ */
+const ARRAY_DATASOURCE_MARKER = Symbol('ARRAY_DATASOURCE_HINT');
+/**
+ * Coerces the given filter text into the specified column data type.
+ */
+function coerceFilterText(text, options) {
+    switch (options.to) {
+        case 'number': {
+            const number = Number.parseFloat(text);
+            return !Number.isNaN(number) ? number : undefined;
+        }
+        case 'boolean': {
+            if (text === 'true' || text === '1') {
+                return true;
+            }
+            if (text === 'false' || text === '0') {
+                return false;
+            }
+            return undefined;
+        }
+        default: {
+            return text;
+        }
+    }
+}
+
+/*
+ * 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 SciTableCache {
+    _cache = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cache" }] : /* istanbul ignore next */ []));
+    loading = computed(() => this.values().some(entry => entry.rows.isLoading()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = computed(() => this.values().find(entry => entry.rows.error())?.rows.error(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    values = computed(() => [...this._cache().values()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    rowsByIndex = computed(() => this.values()
+        .flatMap(page => page.rows.value())
+        .reduce((acc, row) => acc.set(row.index, row), new Map()), { ...(ngDevMode ? { debugName: "rowsByIndex" } : /* istanbul ignore next */ {}), equal: Objects.isEqual });
+    rowsById = computed(() => this.values()
+        .flatMap(page => page.rows.value())
+        .reduce((acc, row) => row.id !== undefined ? acc.set(row.id, row) : acc, new Map()), { ...(ngDevMode ? { debugName: "rowsById" } : /* istanbul ignore next */ {}), equal: Objects.isEqual });
+    has(key) {
+        return this._cache().has(key);
+    }
+    get(key) {
+        return this._cache().get(key);
+    }
+    set(key, entry) {
+        this._cache.update(cache => {
+            const cacheCopy = new Map(cache);
+            const existing = cacheCopy.get(key);
+            if (existing) {
+                cacheCopy.delete(key);
+                existing.dispose();
+            }
+            cacheCopy.set(key, entry);
+            return cacheCopy;
+        });
+    }
+    /**
+     * Deletes the specified page from the cache, but only if still loading.
+     */
+    deleteIfLoading(key) {
+        const cacheEntry = this._cache().get(key);
+        if (!cacheEntry?.rows.isLoading()) {
+            return;
+        }
+        this._cache.update(cache => {
+            const cacheCopy = new Map(cache);
+            cacheCopy.delete(key);
+            cacheEntry.dispose();
+            return cacheCopy;
+        });
+    }
+    clear() {
+        this._cache.update(cache => {
+            for (const entry of cache.values()) {
+                entry.dispose();
+            }
+            return new Map();
+        });
+    }
+}
+
+/*
+ * 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 provideTableRowBinding(bindings) {
+    return {
+        provide: SCI_TABLE_ROW_BINDING,
+        useValue: bindings,
+        multi: true,
+    };
+}
+class ɵSciTableRowBindingFactory {
+    attributeBindings = new Array();
+    classBindings = new Array();
+    partBindings = new Array();
+    addAttributeBinding(name, value) {
+        if (value !== undefined) {
+            this.attributeBindings.push([name, value]);
+        }
+        return this;
+    }
+    addClassBinding(name) {
+        if (name) {
+            this.classBindings.push(name);
+        }
+        return this;
+    }
+    addPartBinding(name) {
+        if (name) {
+            this.partBindings.push(name);
+        }
+        return this;
+    }
+}
+function coerceTableRowBindings(bindingsFn, item, index) {
+    const factory = computed(() => {
+        const factory = new ɵSciTableRowBindingFactory();
+        bindingsFn.forEach(fn => fn(factory, item, index));
+        return factory;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "factory" }] : /* istanbul ignore next */ []));
+    return {
+        attributes: computed(() => Object.fromEntries(factory().attributeBindings), { equal: Objects.isEqual }),
+        cssClass: computed(() => factory().classBindings, { equal: Objects.isEqual }),
+        part: computed(() => factory().partBindings, { equal: Objects.isEqual }),
+    };
+}
+const SCI_TABLE_ROW_BINDING = new InjectionToken('SCI_TABLE_ROW_BINDING');
+
+/*
+ * 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 ɵSciTable {
+    _tableStorage = inject(SCI_TABLE_STORAGE);
+    _injector = inject(Injector);
+    name = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    columns;
+    rowActions;
+    _rowBindings;
+    _dataLoaderFn;
+    _trackBy;
+    tableViewRef = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableViewRef" }] : /* istanbul ignore next */ []));
+    userSettings;
+    bufferSize;
+    pageSize;
+    filterable;
+    showHeader;
+    wrapHeader;
+    sortable;
+    resizable;
+    selectable;
+    scrollRange;
+    scrollTop;
+    virtualScrollOffset;
+    viewportPageSize;
+    scrolling;
+    resizing = computed(() => this.columns().some(column => column.resizing()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+    sortCriteria = linkedSignal({ ...(ngDevMode ? { debugName: "sortCriteria" } : /* istanbul ignore next */ {}), source: () => this.columns(), // Discard stale criteria on column change.
+        computation: (columns, previous) => previous?.value.filter(criteria => columns.some(column => column.name === criteria.columnName)) ?? [],
+        equal: Objects.isEqual });
+    filterCriteria = linkedSignal({ ...(ngDevMode ? { debugName: "filterCriteria" } : /* istanbul ignore next */ {}), source: () => this.columns(), // Discard stale criteria on column change.
+        computation: (columns, previous) => previous?.value.filter(criteria => columns.some(column => column.name === criteria.columnName)) ?? [],
+        equal: Objects.isEqual });
+    _cache = new SciTableCache();
+    _tableFilter = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tableFilter" }] : /* istanbul ignore next */ []));
+    _selectedItems = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectedItems" }] : /* istanbul ignore next */ []));
+    // Reset total count on criteria change to show skeletons instead of stale data while loading.
+    totalCount = linkedSignal({ ...(ngDevMode ? { debugName: "totalCount" } : /* istanbul ignore next */ {}), source: () => this.criteria(),
+        computation: () => undefined });
+    activeItem = linkedSignal({ ...(ngDevMode ? { debugName: "activeItem" } : /* istanbul ignore next */ {}), source: () => this.criteria(),
+        computation: () => undefined });
+    hoveredIndex = linkedSignal({ ...(ngDevMode ? { debugName: "hoveredIndex" } : /* istanbul ignore next */ {}), source: () => {
+            this.criteria(); // reset on criteria change
+            this.scrolling(); // reset when start scrolling
+        },
+        computation: () => -1 });
+    criteria = computed(() => ({ sort: this.sortCriteria(), filter: this.filterCriteria(), tableFilter: this._tableFilter() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "criteria" }] : /* istanbul ignore next */ []));
+    loading = this._cache.loading;
+    error = this._cache.error;
+    activeRow;
+    hoveredRow = computed(() => this.rowsByIndex().get(this.hoveredIndex()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredRow" }] : /* istanbul ignore next */ []));
+    selectedItems = computed(() => [...this._selectedItems().values()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    selectedIds = computed(() => new Set([...this._selectedItems().keys()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+    rowsByIndex = this._cache.rowsByIndex;
+    rows = this.computeRows();
+    constructor(descriptor) {
+        // TODO [table] Remove after datasource is final. See ɵillegaldatasource.
+        descriptor = { ...descriptor, ɵdatasource: descriptor.ɵdatasource ?? descriptor.datasource };
+        this.bufferSize = descriptor.bufferSize ?? 10;
+        this.pageSize = descriptor.pageSize ?? 50;
+        this.sortable = signal(descriptor.sortable ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
+        this.filterable = signal(descriptor.filterable ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+        this.showHeader = signal(descriptor.showHeader ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+        this.wrapHeader = signal(descriptor.wrapHeader ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wrapHeader" }] : /* istanbul ignore next */ []));
+        this.resizable = signal(descriptor.resizable ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+        this.selectable = signal(descriptor.selectable ?? 'multi', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+        this.userSettings = this.computeUserSettings();
+        this.scrollRange = this.computeScrollRange();
+        this.scrollTop = this.computeScrollTop();
+        this.scrolling = this.computeScrolling();
+        this.virtualScrollOffset = this.computeVirtualScrollOffset();
+        this.viewportPageSize = this.computeViewportPageSize();
+        this.activeRow = this.computeActiveRow();
+        this.columns = this.computeColumns(descriptor);
+        this.rowActions = descriptor.rowActions;
+        this._rowBindings = [
+            ...descriptor.rowBindings ? [descriptor.rowBindings] : [],
+            ...inject(SCI_TABLE_ROW_BINDING, { optional: true }) ?? [],
+        ];
+        this._trackBy = descriptor.trackBy;
+        this._dataLoaderFn = isSignal(descriptor.ɵdatasource) ? arrayDatasource(descriptor.ɵdatasource, this.columns) : descriptor.ɵdatasource;
+        this.installCriteriaWatcher();
+        this.installPageLoader();
+    }
+    /**
+     * Connects {@link SciTableComponent} to the model.
+     */
+    connect(name, viewRef) {
+        this.name.set(name);
+        this.tableViewRef.set(viewRef);
+    }
+    disconnect() {
+        this.name.set(undefined);
+        this.tableViewRef.set(undefined);
+    }
+    computeColumns(descriptor) {
+        // Create separate injection context per factory invocation to clean up allocated resources, like RxJS subscriptions.
+        let injector;
+        return computed(() => {
+            injector?.destroy();
+            injector = createDestroyableInjector({ parent: this._injector });
+            return runInInjectionContext(injector, () => {
+                const tableColumnFactory = new ɵSciTableColumnFactory(this);
+                descriptor.columns(tableColumnFactory);
+                return tableColumnFactory.columns;
+            });
+        });
+    }
+    /**
+     * Computes the rows currently visible in the viewport (+buffer).
+     */
+    computeRows() {
+        return computed(() => {
+            const scrollRange = this.scrollRange();
+            if (!scrollRange) {
+                return [];
+            }
+            const rowsByIndex = this.rowsByIndex();
+            const rowCount = scrollRange.end - scrollRange.start;
+            // Populate rows with cached rows in the range window, fallback to row shell to show skeleton.
+            return untracked(() => Array.from({ length: rowCount }, (_, i) => rowsByIndex.get(scrollRange.start + i) ?? createSyntheticRow(i)));
+        });
+        function createSyntheticRow(index) {
+            return {
+                index,
+                loading: true,
+                active: signal(false).asReadonly(),
+                selected: signal(false).asReadonly(),
+                hovered: signal(false).asReadonly(),
+            };
+        }
+    }
+    /**
+     * Computes the visible row count based on the viewport size.
+     */
+    computeScrollRange() {
+        return computed(() => {
+            const tableViewRef = this.tableViewRef();
+            if (!tableViewRef) {
+                return undefined;
+            }
+            const viewportHeight = tableViewRef.viewportHeight();
+            const itemHeight = tableViewRef.itemHeight();
+            const scrollTop = this.scrollTop();
+            const start = Math.floor(scrollTop / itemHeight);
+            const viewportRowCount = Math.ceil(viewportHeight / itemHeight);
+            const end = Math.min(start + viewportRowCount);
+            const totalCount = this.totalCount() ?? viewportRowCount; // fill viewport if no data loaded yet
+            return {
+                start: clamp(start - this.bufferSize, { min: 0, max: Math.max(0, totalCount - viewportRowCount) }),
+                end: clamp(end + this.bufferSize, { max: totalCount }),
+            };
+        }, { equal: Objects.isEqual });
+    }
+    computeVirtualScrollOffset() {
+        return computed(() => {
+            const itemHeight = this.tableViewRef()?.itemHeight() ?? 0;
+            const totalCount = this.totalCount() ?? 0;
+            const rangeEnd = Math.min(this.scrollRange()?.end ?? 0, this.totalCount() ?? 0);
+            return {
+                top: (this.scrollRange()?.start ?? 0) * itemHeight,
+                bottom: (totalCount - rangeEnd) * itemHeight,
+            };
+        }, { equal: Objects.isEqual });
+    }
+    computeViewportPageSize() {
+        return computed(() => {
+            const itemHeight = this.tableViewRef()?.itemHeight() ?? 0;
+            const viewportHeight = this.tableViewRef()?.viewportHeight() ?? 0;
+            return Math.ceil(viewportHeight / itemHeight);
+        });
+    }
+    /**
+     * Tracks {@link HTMLElement.scrollTop} of the viewport.
+     */
+    computeScrollTop() {
+        const zone = inject(NgZone);
+        return rxResource({
+            defaultValue: 0,
+            params: () => this.tableViewRef()?.viewport,
+            stream: ({ params: viewport }) => fromEvent(viewport, 'scroll', { passive: true })
+                .pipe(map(() => viewport.scrollTop), startWith(viewport.scrollTop), subscribeIn(fn => zone.runOutsideAngular(fn))),
+        }).value;
+    }
+    /**
+     * Tracks whether currently scrolling the viewport.
+     */
+    computeScrolling() {
+        const zone = inject(NgZone);
+        return rxResource({
+            defaultValue: false,
+            params: () => this.tableViewRef()?.viewport,
+            stream: ({ params: viewport }) => fromEvent(viewport, 'scroll', { passive: true })
+                .pipe(switchMap(() => concat(of(true), timer(150).pipe(map(() => false)))), startWith(false), subscribeIn(fn => zone.runOutsideAngular(fn))),
+        }).value;
+    }
+    /**
+     * Loads a range of rows, based on the current sort and filter criteria, into the cache.
+     */
+    async loadRange(start, end) {
+        const sortCriteria = this.sortCriteria();
+        const columnFilters = this.filterCriteria();
+        const tableFilter = this._tableFilter() ?? undefined;
+        // Calculate pages based on row indices and page size.
+        const pages = pagesByRange(start, end, this.pageSize);
+        if (!pages) {
+            return;
+        }
+        // Load pages and wait until completed loading.
+        await Promise.all(pages
+            .map(page => this.loadPage({ page, pageSize: this.pageSize, columnFilters, tableFilter, sortCriteria }))
+            .map(page => firstValueFrom(toLazyObservable(page.loading, { injector: this._injector }).pipe(first(loading => !loading), defaultIfEmpty(true)))));
+    }
+    /**
+     * Loads the requested page from the cache or datasource and returns its loading state with a cancelation handler.
+     */
+    loadPage({ page, pageSize, sortCriteria, columnFilters, tableFilter }) {
+        const pageStart = page * pageSize;
+        const pageEnd = pageStart + pageSize;
+        const cacheKey = `${pageStart}-${pageEnd}`;
+        if (this._cache.has(cacheKey)) {
+            return {
+                loading: this._cache.get(cacheKey).rows.isLoading,
+                cancel: () => this._cache.deleteIfLoading(cacheKey),
+            };
+        }
+        const cacheEntryInjector = createDestroyableInjector({ parent: this._injector });
+        const cacheEntry = {
+            rows: runInInjectionContext(cacheEntryInjector, () => {
+                // Fetch data.
+                const tableResponse$ = runSafe(() => Observables.coerce(this._dataLoaderFn({
+                    start: pageStart,
+                    end: pageEnd,
+                    pageSize,
+                    page,
+                    sortCriteria,
+                    tableFilter,
+                    columnFilters,
+                })), error => throwError(() => error));
+                // Create a resource to track loading and error states.
+                const tableResponse = rxResource({ stream: () => tableResponse$ });
+                // Create a derived resource mapping the response to rows. Must be done in a separate resource to not fetch data anew on column change.
+                const rows = resource({ ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), params: ({ chain }) => {
+                        const items = chain(tableResponse)?.items;
+                        return items && { items, columns: this.columns() };
+                    },
+                    loader: async ({ params }) => this.mapItemsToRow(params.items, params.columns, pageStart),
+                    defaultValue: [] });
+                // Synchronize total row count based on resource state.
+                effect(() => {
+                    switch (rows.status()) {
+                        case 'resolved': {
+                            // Update count only after rows resolve to prevent premature scroll invalidation.
+                            this.totalCount.set(tableResponse.value()?.totalCount);
+                            break;
+                        }
+                        case 'error': {
+                            console.error(rows.error().cause);
+                            // Reset count to scroll to the top so the user sees the error.
+                            this.totalCount.set(0);
+                            break;
+                        }
+                    }
+                });
+                return rows;
+            }),
+            dispose: () => cacheEntryInjector.destroy(),
+            start: pageStart,
+            end: pageEnd,
+        };
+        this._cache.set(cacheKey, cacheEntry);
+        return {
+            loading: cacheEntry.rows.isLoading,
+            cancel: () => this._cache.deleteIfLoading(cacheKey),
+        };
+    }
+    /**
+     * Toggles sort on a column. ASC -> DESC -> No sort
+     *
+     * TODO [ego] Revisit API, do we really want a three-state and implicit toggling logic?
+     */
+    sort(columnName, multi) {
+        // Scroll to the top as soon as sort changes.
+        // Done here explicitly to avoid race-conditions and pages being loaded unnecessarily.
+        this.tableViewRef()?.scrollToTop();
+        this.sortCriteria.update(sortCriteria => {
+            const column = this.columns().find(column => column.name === columnName);
+            if (!column) {
+                throw Error(`[NullColumnError] Column '${columnName}' not found in table '${this.name()}'.`);
+            }
+            const currentSortCriterion = sortCriteria.find(sortCriterion => sortCriterion.columnName === column.name);
+            const otherSortCriteria = sortCriteria.filter(sortCriterion => sortCriterion !== currentSortCriterion);
+            const direction = currentSortCriterion ? (currentSortCriterion.direction === 'asc' ? 'desc' : undefined) : 'asc';
+            if (!direction) {
+                return multi ? otherSortCriteria : [];
+            }
+            const newSortCriterion = { columnName: column.name, direction };
+            return multi ? [...otherSortCriteria, newSortCriterion] : [newSortCriterion];
+        });
+    }
+    filter(text, options) {
+        // Scroll to the top as soon as filter changes.
+        // Done here explicitly to avoid race-conditions and pages being loaded unnecessarily.
+        this.tableViewRef()?.scrollToTop();
+        if (!options) {
+            this._tableFilter.set(text);
+            return;
+        }
+        const column = this.columns().find(column => column.name === options.columnName);
+        if (!column) {
+            throw Error(`[NullColumnError] Column '${options.columnName}' not found in table '${this.name()}'.`);
+        }
+        this.filterCriteria.update(filterCriterion => {
+            const otherFilterCriteria = filterCriterion.filter(filterCriterion => filterCriterion.columnName !== options.columnName);
+            if (text === null) {
+                return otherFilterCriteria;
+            }
+            return otherFilterCriteria.concat({ columnName: column.name, text });
+        });
+    }
+    updateSelectedItems(updateFn) {
+        this._selectedItems.update(updateFn);
+    }
+    /**
+     * Indicates whether the built-in array datasource is used.
+     *
+     * Supports out-of-the-box filtering and sorting for built-in table columns.
+     */
+    isArrayDatasource() {
+        return isArrayDatasource(this._dataLoaderFn);
+    }
+    reset() {
+        this._cache.clear();
+        this.totalCount.set(undefined);
+    }
+    dispose() {
+        this._cache.clear();
+        this.disconnect();
+    }
+    /**
+     * Loads a set of pages on criteria or viewport changes.
+     */
+    installPageLoader() {
+        effect(onCleanup => {
+            const scrollRange = this.scrollRange();
+            const sortCriteria = this.sortCriteria();
+            const columnFilters = this.filterCriteria();
+            const tableFilter = this._tableFilter() ?? undefined;
+            if (!scrollRange) {
+                return;
+            }
+            untracked(() => {
+                // Fall back to load the initial page if range is empty. Otherwise, if the table grows with its content,
+                // no data would ever load because the scroll range remains 0.
+                const pages = pagesByRange(scrollRange.start, scrollRange.end, this.pageSize) ?? [0];
+                pages.forEach(page => {
+                    const pageRef = this.loadPage({
+                        pageSize: this.pageSize,
+                        page,
+                        sortCriteria,
+                        tableFilter,
+                        columnFilters,
+                    });
+                    onCleanup(() => pageRef.cancel());
+                });
+            });
+        });
+    }
+    /**
+     * Resets cache on criteria changes.
+     */
+    installCriteriaWatcher() {
+        toObservable(this.criteria).pipe(skip(1), // skip first emission to avoid race condition with loader on initialization.
+        takeUntilDestroyed()).subscribe(() => {
+            this._cache.clear();
+        });
+    }
+    mapItemsToRow(items, columns, pageStart) {
+        return items.map((item, i) => {
+            const id = this.trackBy(item);
+            const index = pageStart + i;
+            return {
+                id,
+                index,
+                item,
+                loading: false,
+                active: computed(() => item === this.activeItem()),
+                selected: computed(() => this.selectedIds().has(id)),
+                hovered: computed(() => this.hoveredRow()?.index === index),
+                bindings: coerceTableRowBindings(this._rowBindings, item, pageStart + i),
+                cells: columns.map(column => ({
+                    value: column.type !== 'component' && column.type !== 'template' ? coerceSignal(column.value(item)) : undefined,
+                    component: column.type === 'component' ? column.component(item) : undefined,
+                    template: column.type === 'template' ? column.template(item) : undefined,
+                    type: column.type,
+                    column,
+                })),
+            };
+        });
+    }
+    /**
+     * Creates a signal to read and write table user settings.
+     */
+    computeUserSettings() {
+        // Load user settings from storage.
+        const userSettings = resource({ ...(ngDevMode ? { debugName: "userSettings" } : /* istanbul ignore next */ {}), params: () => this.name(),
+            loader: async ({ params: tableName }) => {
+                try {
+                    const serialized = await this._tableStorage.load(`scion.components.${tableName}`);
+                    return serialized ? JSON.parse(serialized) : { columns: [] };
+                }
+                catch (error) {
+                    console.warn(`[SciTable] Failed to load user settings for '${tableName}'.`, error);
+                    return { columns: [] };
+                }
+            },
+            defaultValue: { columns: [] } });
+        // Persist settings to storage.
+        effect(() => {
+            if (userSettings.status() === 'local' && this.name()) {
+                untracked(() => void this._tableStorage.store(`scion.components.${this.name()}`, JSON.stringify(userSettings.value())));
+            }
+        });
+        return userSettings.value;
+    }
+    /**
+     * Call trackBy function or fallback to track by object reference.
+     */
+    trackBy(item) {
+        return this._trackBy?.(item) ?? item;
+    }
+    computeActiveRow() {
+        return computed(() => {
+            const activeItem = this.activeItem();
+            if (activeItem === undefined) {
+                return undefined;
+            }
+            const id = this.trackBy(activeItem);
+            if (id === undefined) {
+                return undefined;
+            }
+            return this._cache.rowsById().get(id);
+        });
+    }
+}
+/**
+ * Gets pages by range and page size, or `null` if empty. End is exclusive.
+ */
+function pagesByRange(start, end, pageSize) {
+    const startPage = Math.floor(start / pageSize);
+    const endPage = Math.floor((end - 1) / pageSize); // `end` is exclusive, so use the last included index (`end - 1`) for page calculation.
+    const pages = rangeInclusive(startPage, endPage);
+    return pages.length ? pages : null;
+}
+const ɵSCI_TABLE = new InjectionToken('ɵSciTable');
+
+/*
+ * 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
+ */
+/**
+ * TODO [table] Remove after datasource is final.
+ *
+ * @docs-private Not public API. For internal use only.
+ * @experimental since 22.3.0; API and behavior may change in any version without notice.
+ */
+function ɵillegaldatasource() {
+    return computed(() => {
+        throw Error('[SciTableError] Illegal state. ɵillegaldatasource should not be used.');
+    });
+}
+
+/*
+ * 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 table(dataOrDescriptor, columnFactoryFn, options) {
+    assertNotInReactiveContext(table, 'Call table in a non-reactive (non-tracking) context, such as within the untracked() function.');
+    const descriptor = isSignal(dataOrDescriptor) ? ({ ɵdatasource: dataOrDescriptor, datasource: ɵillegaldatasource(), columns: columnFactoryFn, injector: options?.injector }) : dataOrDescriptor;
+    if (!descriptor.injector) {
+        assertInInjectionContext(table);
+    }
+    const injector = descriptor.injector ?? inject(Injector);
+    const sciTable = runInInjectionContext(injector, () => new ɵSciTable(descriptor));
+    injector.get(DestroyRef).onDestroy(() => sciTable.dispose());
+    return sciTable;
+}
+
+/*
+ * 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 SciTableSelectionService {
+    _table = inject(ɵSCI_TABLE);
+    async onRowClick(index, event) {
+        const table = this._table();
+        const rowsByIndex = table.rowsByIndex();
+        const row = rowsByIndex.get(index);
+        const item = rowsByIndex.get(index)?.item;
+        const previousFocusedIndex = table.activeRow()?.index ?? -1;
+        table.activeItem.set(item);
+        if (item === undefined || !table.selectable()) {
+            return;
+        }
+        if (table.selectable() === 'single') {
+            table.updateSelectedItems(() => new Map().set(row.id, item));
+            return;
+        }
+        if (event.shiftKey && previousFocusedIndex >= 0) {
+            const start = Math.min(previousFocusedIndex, index);
+            const end = Math.max(previousFocusedIndex, index);
+            await this.selectItems(start, end, { add: true });
+        }
+        else if (event.ctrlKey || event.metaKey) {
+            this.toggleSelectedItem(item);
+        }
+        else {
+            // If no modifier is pressed set the selection to the clicked row.
+            table.updateSelectedItems(() => new Map().set(row.id, item));
+        }
+    }
+    async onArrowUp(event) {
+        event.preventDefault();
+        const table = this._table();
+        const activeIndex = this._table().activeRow()?.index ?? -1;
+        if (activeIndex <= 0) {
+            return;
+        }
+        // Set active item.
+        const startIndex = activeIndex - 1;
+        await this.loadMissingItems(startIndex, startIndex);
+        const startItem = table.rowsByIndex().get(startIndex)?.item;
+        table.activeItem.set(startItem);
+        if (!table.selectable()) {
+            return;
+        }
+        const keyboardEvent = event;
+        const shift = keyboardEvent.shiftKey;
+        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
+        if (shift && ctrlOrMeta) {
+            await this.ctrlShiftUp({ startIndex, activeIndex });
+        }
+        else if (shift) {
+            await this.shiftUp({ startIndex, activeIndex });
+        }
+        else if (ctrlOrMeta) {
+            // Selection remains unchanged.
+        }
+        else {
+            await this.selectItems(startIndex, startIndex);
+        }
+    }
+    async onArrowDown(event) {
+        event.preventDefault();
+        const table = this._table();
+        const activeIndex = this._table().activeRow()?.index ?? -1;
+        const endIndex = Math.min(activeIndex + 1, table.totalCount() - 1);
+        if (endIndex === activeIndex) {
+            return;
+        }
+        // Set active item.
+        await this.loadMissingItems(endIndex, endIndex);
+        const endItem = table.rowsByIndex().get(endIndex)?.item;
+        table.activeItem.set(endItem);
+        if (!table.selectable()) {
+            return;
+        }
+        const keyboardEvent = event;
+        const shift = keyboardEvent.shiftKey;
+        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
+        if (shift && ctrlOrMeta) {
+            await this.ctrlShiftDown({ endIndex, activeIndex });
+        }
+        else if (shift) {
+            await this.shiftDown({ endIndex, activeIndex });
+        }
+        else if (ctrlOrMeta) {
+            // Selection remains unchanged.
+        }
+        else {
+            await this.selectItems(endIndex, endIndex);
+        }
+    }
+    async onPageUp(event) {
+        event.preventDefault();
+        const table = this._table();
+        const activeIndex = this._table().activeRow()?.index ?? -1;
+        if (activeIndex === 0) {
+            return;
+        }
+        // Set active item.
+        const startIndex = Math.max(activeIndex - table.viewportPageSize() + 1, 0);
+        await this.loadMissingItems(startIndex, startIndex);
+        const startItem = table.rowsByIndex().get(startIndex)?.item;
+        table.activeItem.set(startItem);
+        if (!table.selectable()) {
+            return;
+        }
+        const keyboardEvent = event;
+        const shift = keyboardEvent.shiftKey;
+        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
+        if (shift && ctrlOrMeta) {
+            await this.ctrlShiftUp({ startIndex, activeIndex });
+        }
+        else if (shift) {
+            await this.shiftUp({ startIndex, activeIndex });
+        }
+        else if (ctrlOrMeta) {
+            // Selection remains unchanged.
+        }
+        else {
+            await this.selectItems(startIndex, startIndex);
+        }
+    }
+    async onPageDown(event) {
+        event.preventDefault();
+        const table = this._table();
+        const activeIndex = this._table().activeRow()?.index ?? -1;
+        const endIndex = Math.min(activeIndex + table.viewportPageSize() - 1, table.totalCount() - 1);
+        if (endIndex === activeIndex) {
+            return;
+        }
+        // Set active item.
+        await this.loadMissingItems(endIndex, endIndex);
+        const endItem = table.rowsByIndex().get(endIndex)?.item;
+        table.activeItem.set(endItem);
+        if (!table.selectable()) {
+            return;
+        }
+        const keyboardEvent = event;
+        const shift = keyboardEvent.shiftKey;
+        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
+        if (shift && ctrlOrMeta) {
+            await this.ctrlShiftDown({ endIndex, activeIndex });
+        }
+        else if (shift) {
+            await this.shiftDown({ endIndex, activeIndex });
+        }
+        else if (ctrlOrMeta) {
+            // Selection remains unchanged.
+        }
+        else {
+            await this.selectItems(endIndex, endIndex);
+        }
+    }
+    async onHome(event) {
+        event.preventDefault();
+        const table = this._table();
+        const activeIndex = this._table().activeRow()?.index ?? -1;
+        if (activeIndex <= 0) {
+            return;
+        }
+        // Set active item.
+        const startIndex = 0;
+        await this.loadMissingItems(startIndex, startIndex);
+        const startItem = table.rowsByIndex().get(startIndex)?.item;
+        table.activeItem.set(startItem);
+        if (!table.selectable()) {
+            return;
+        }
+        const keyboardEvent = event;
+        const shift = keyboardEvent.shiftKey;
+        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
+        if (shift && ctrlOrMeta) {
+            await this.ctrlShiftUp({ startIndex, activeIndex });
+        }
+        else if (shift) {
+            await this.shiftUp({ startIndex, activeIndex });
+        }
+        else if (ctrlOrMeta) {
+            // Selection remains unchanged.
+        }
+        else {
+            await this.selectItems(startIndex, startIndex);
+        }
+    }
+    async onEnd(event) {
+        event.preventDefault();
+        const table = this._table();
+        const activeIndex = this._table().activeRow()?.index ?? -1;
+        const endIndex = table.totalCount() - 1;
+        if (endIndex === activeIndex) {
+            return;
+        }
+        // TODO [mmu] should active item be set before selection? this way, further methods cant rely on table.activeItem.
+        // But otherwise, loading and setting the active item needs to be done for each case, or once at the end.
+        // Set active item.
+        await this.loadMissingItems(endIndex, endIndex);
+        const endItem = table.rowsByIndex().get(endIndex)?.item;
+        table.activeItem.set(endItem);
+        if (!table.selectable()) {
+            return;
+        }
+        const keyboardEvent = event;
+        const shift = keyboardEvent.shiftKey;
+        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
+        if (shift && ctrlOrMeta) {
+            await this.ctrlShiftDown({ endIndex, activeIndex });
+        }
+        else if (shift) {
+            await this.shiftDown({ endIndex, activeIndex });
+        }
+        else if (ctrlOrMeta) {
+            // Selection remains unchanged.
+        }
+        else {
+            await this.selectItems(endIndex, endIndex);
+        }
+    }
+    onSpace(event) {
+        event.preventDefault();
+        const table = this._table();
+        if (!table.selectable()) {
+            return;
+        }
+        const activeItem = table.activeItem();
+        if (!activeItem) {
+            return;
+        }
+        const keyboardEvent = event;
+        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
+        const activeItemId = table.trackBy(activeItem);
+        if (ctrlOrMeta) {
+            this.toggleSelectedItem(activeItem);
+        }
+        else {
+            table.updateSelectedItems(() => new Map().set(activeItemId, activeItem));
+        }
+    }
+    async onControlA(event) {
+        event.preventDefault();
+        const table = this._table();
+        const totalCount = table.totalCount() ?? 0;
+        if (table.selectable() === 'multi' && totalCount >= 0) {
+            await this.selectItems(0, totalCount - 1);
+        }
+    }
+    // TODO [mmu] Should we add overloads for all variants for better readability, but same logic?
+    // shiftArrowDown
+    // shiftPageDown
+    // ShiftEnd
+    async shiftDown(options) {
+        const table = this._table();
+        const selectedIds = table.selectedIds();
+        const activeIndex = options.activeIndex;
+        const startIndex = activeIndex;
+        const endIndex = options.endIndex;
+        const activeItem = table.rowsByIndex().get(activeIndex).item;
+        const activeItemId = table.trackBy(activeItem);
+        if (table.selectable() === 'single') {
+            await this.selectItems(endIndex, endIndex);
+            return;
+        }
+        if (!selectedIds.has(activeItemId)) {
+            await this.selectItems(startIndex, endIndex);
+            return;
+        }
+        if (this.isSelectionAtBlockStart(activeIndex)) {
+            await this.selectFromBlockStart(startIndex, endIndex);
+            return;
+        }
+        await this.selectItems(startIndex, endIndex, { add: true });
+    }
+    async ctrlShiftDown(options) {
+        const table = this._table();
+        const startIndex = options.activeIndex;
+        const endIndex = options.endIndex;
+        if (table.selectable() === 'single') {
+            await this.selectItems(endIndex, endIndex);
+        }
+        else {
+            await this.selectItems(startIndex, endIndex, { add: true });
+        }
+    }
+    async shiftUp(options) {
+        const table = this._table();
+        const selectedIds = table.selectedIds();
+        const activeIndex = options.activeIndex;
+        const startIndex = options.startIndex;
+        const endIndex = activeIndex;
+        const activeItem = table.rowsByIndex().get(activeIndex).item;
+        const activeItemId = table.trackBy(activeItem);
+        if (table.selectable() === 'single') {
+            await this.selectItems(startIndex, startIndex);
+            return;
+        }
+        if (!selectedIds.has(activeItemId)) {
+            await this.selectItems(startIndex, endIndex);
+            return;
+        }
+        if (this.isSelectionAtBlockEnd(activeIndex)) {
+            await this.selectFromBlockEnd(startIndex, endIndex);
+            return;
+        }
+        await this.selectItems(startIndex, endIndex, { add: true });
+    }
+    async ctrlShiftUp(options) {
+        const table = this._table();
+        const startIndex = options.startIndex;
+        const endIndex = options.activeIndex;
+        if (table.selectable() === 'single') {
+            await this.selectItems(startIndex, startIndex);
+        }
+        else {
+            await this.selectItems(startIndex, endIndex, { add: true });
+        }
+    }
+    isSelectionAtBlockStart(activeIndex) {
+        const table = this._table();
+        const selectedIds = table.selectedIds();
+        const previousItem = table.rowsByIndex().get(activeIndex - 1)?.item;
+        const previousItemId = previousItem ? table.trackBy(previousItem) : undefined;
+        const nextItem = table.rowsByIndex().get(activeIndex + 1)?.item;
+        const nextItemId = nextItem ? table.trackBy(nextItem) : undefined;
+        return !selectedIds.has(previousItemId) && selectedIds.has(nextItemId);
+    }
+    isSelectionAtBlockEnd(activeIndex) {
+        const table = this._table();
+        const selectedIds = table.selectedIds();
+        const previousItem = table.rowsByIndex().get(activeIndex - 1)?.item;
+        const previousItemId = previousItem ? table.trackBy(previousItem) : undefined;
+        const nextItem = table.rowsByIndex().get(activeIndex + 1)?.item;
+        const nextItemId = nextItem ? table.trackBy(nextItem) : undefined;
+        return selectedIds.has(previousItemId) && !selectedIds.has(nextItemId);
+    }
+    async loadMissingItems(startIndex, endIndex) {
+        const table = this._table();
+        const indices = rangeInclusive(startIndex, endIndex + 1);
+        const rows = indices.map(i => table.rowsByIndex().get(i));
+        if (rows.some(row => row?.id === undefined)) {
+            await Promise.race([
+                table.loadRange(startIndex, endIndex + 1),
+                firstValueFrom(timer(5_000)),
+            ]);
+        }
+    }
+    async selectItems(startIndex, endIndex, options) {
+        const table = this._table();
+        const indices = rangeInclusive(startIndex, endIndex);
+        const add = options?.add ?? false;
+        let rows = indices.map(i => table.rowsByIndex().get(i));
+        if (rows.some(row => row?.id === undefined)) {
+            // If not all id's could be found load the missing items.
+            await Promise.race([
+                table.loadRange(startIndex, endIndex),
+                firstValueFrom(timer(5_000)),
+            ]);
+            rows = indices.map(i => table.rowsByIndex().get(i));
+        }
+        table.updateSelectedItems(existing => new Map([
+            ...(add ? existing : []),
+            ...rows
+                .filter((row) => row?.id !== undefined && row.item !== undefined)
+                .map((row) => [row.id, row.item]),
+        ]));
+    }
+    async selectFromBlockStart(startIndex, endIndex) {
+        const table = this._table();
+        await this.loadMissingItems(startIndex, endIndex);
+        const indices = rangeInclusive(startIndex, endIndex);
+        table.updateSelectedItems(selection => {
+            const newSelection = new Map(selection);
+            for (let i = 0; i < indices.length; i++) {
+                const currentIndex = indices[i];
+                const nextIndex = indices[i + 1];
+                const item = table.rowsByIndex().get(currentIndex)?.item;
+                if (!item) {
+                    continue;
+                }
+                const itemId = table.trackBy(item);
+                const nextItem = table.rowsByIndex().get(nextIndex)?.item;
+                const nextItemId = nextItem ? table.trackBy(nextItem) : undefined;
+                if (selection.has(nextItemId)) {
+                    newSelection.delete(itemId);
+                }
+                else {
+                    newSelection.set(itemId, item);
+                }
+            }
+            return newSelection;
+        });
+    }
+    async selectFromBlockEnd(startIndex, endIndex) {
+        const table = this._table();
+        await this.loadMissingItems(startIndex, endIndex);
+        const indices = rangeInclusive(startIndex, endIndex);
+        table.updateSelectedItems(selection => {
+            const newSelection = new Map(selection);
+            for (let i = indices.length - 1; i >= 0; i--) {
+                const currentIndex = indices[i];
+                const previousIndex = indices[i - 1];
+                const item = table.rowsByIndex().get(currentIndex)?.item;
+                if (!item) {
+                    continue;
+                }
+                const itemId = table.trackBy(item);
+                const previousItem = table.rowsByIndex().get(previousIndex)?.item;
+                const previousItemId = previousItem ? table.trackBy(previousItem) : undefined;
+                if (selection.has(previousItemId)) {
+                    newSelection.delete(itemId);
+                }
+                else {
+                    newSelection.set(itemId, item);
+                }
+            }
+            return newSelection;
+        });
+    }
+    toggleSelectedItem(item) {
+        const table = this._table();
+        const id = table.trackBy(item);
+        table.updateSelectedItems(selection => {
+            const next = new Map(selection);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                if (table.selectable() === 'single') {
+                    next.clear();
+                }
+                next.set(id, item);
+            }
+            return next;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableSelectionService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableSelectionService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * 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 SciTableCellComponent {
+    cell = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []));
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    template = this.computeTemplate();
+    templateContext = this.computeTemplateContext();
+    partAttribute = this.computePartAttribute();
+    computeTemplate() {
+        return computed(() => {
+            const cell = this.cell();
+            if (cell.type !== 'template') {
+                return null;
+            }
+            return coerceSignal(cell.template.template)();
+        });
+    }
+    computeTemplateContext() {
+        return computed(() => {
+            const cell = this.cell();
+            const item = this.row().item;
+            if (cell.type !== 'template') {
+                return null;
+            }
+            return {
+                $implicit: item,
+                ...Objects.entries(cell.template.context ?? {}).reduce((context, [key, value]) => ({
+                    ...context,
+                    [key]: coerceSignal(value)?.(), // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+                }), {}),
+            };
+        });
+    }
+    computePartAttribute() {
+        return computed(() => {
+            return [
+                ...Arrays.coerce(this.row().bindings?.part()),
+                this.cell().column.name,
+            ].join(' ');
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableCellComponent, isStandalone: true, selector: "sci-table-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-type": "cell().column.type", "attr.data-column": "cell().column.name", "attr.data-padding": "!cell().column.padding ? false : null", "attr.part": "row().selected() ? null : partAttribute()" } }, ngImport: i0, template: "@let cell = this.cell();\n\n@switch (cell.type) {\n  @case ('template') {\n    <ng-template *ngTemplateOutlet=\"template(); context: templateContext()\"/>\n  }\n  @case ('component') {\n    <ng-container *sciComponentOutlet=\"cell.component\"/>\n  }\n  @case ('boolean') {\n    <!-- TODO [dwi] Use another ligature for icon scion.clear -->\n    <sci-icon class=\"checkbox\">{{cell.value() ? 'scion.checkmark' : 'scion.clear'}}</sci-icon>\n  }\n  @default {\n    {{cell.value()}}\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;position:relative;border-inline:var(--\\275sci-table-cell-padding-inline) solid transparent;align-items:center;overflow:hidden}:host:is([data-type=string],[data-type=number]){display:inline;white-space:nowrap;text-overflow:ellipsis;line-height:var(--\\275sci-table-row-height)}:host[data-type=number]{text-align:end}:host[data-padding=false]{border-inline:none;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "directive", type: SciComponentOutletDirective, selector: "ng-template[sciComponentOutlet]", inputs: ["sciComponentOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-table-cell', host: {
+                        '[attr.data-type]': 'cell().column.type',
+                        '[attr.data-column]': 'cell().column.name',
+                        '[attr.data-padding]': '!cell().column.padding ? false : null',
+                        '[attr.part]': 'row().selected() ? null : partAttribute()', // prevent styling selected rows
+                    }, imports: [
+                        NgTemplateOutlet,
+                        SciIconComponent,
+                        SciComponentOutletDirective,
+                    ], template: "@let cell = this.cell();\n\n@switch (cell.type) {\n  @case ('template') {\n    <ng-template *ngTemplateOutlet=\"template(); context: templateContext()\"/>\n  }\n  @case ('component') {\n    <ng-container *sciComponentOutlet=\"cell.component\"/>\n  }\n  @case ('boolean') {\n    <!-- TODO [dwi] Use another ligature for icon scion.clear -->\n    <sci-icon class=\"checkbox\">{{cell.value() ? 'scion.checkmark' : 'scion.clear'}}</sci-icon>\n  }\n  @default {\n    {{cell.value()}}\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;position:relative;border-inline:var(--\\275sci-table-cell-padding-inline) solid transparent;align-items:center;overflow:hidden}:host:is([data-type=string],[data-type=number]){display:inline;white-space:nowrap;text-overflow:ellipsis;line-height:var(--\\275sci-table-row-height)}:host[data-type=number]{text-align:end}:host[data-padding=false]{border-inline:none;align-items:stretch}\n"] }]
+        }], propDecorators: { cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "cell", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
+
+/*
+ * 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 SciTableRowComponent {
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    primaryAction = output();
+    table = inject(ɵSCI_TABLE);
+    rowActionToolbar = viewChild(SciToolbarComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowActionToolbar" }] : /* istanbul ignore next */ []));
+    rowActionsToolbarName = `toolbar:${UUID.randomUUID()}`;
+    _selectionService = inject(SciTableSelectionService);
+    constructor() {
+        this.contributeRowActions();
+    }
+    onRowClick(event) {
+        if (this.row().loading) {
+            return;
+        }
+        void this._selectionService.onRowClick(this.row().index, event);
+    }
+    onRowDblClick(event) {
+        if (this.row().loading) {
+            return;
+        }
+        this.primaryAction.emit({ sourceEvent: event, items: [this.row().item] });
+    }
+    onRowMouseEnter() {
+        this.table().hoveredIndex.set(this.row().index);
+    }
+    onRowMouseLeave(event) {
+        const next = event.relatedTarget;
+        // Do not unset hovered row when hovering a column resize splitter.
+        if (next instanceof Element && next.closest('sci-splitter')) {
+            return;
+        }
+        this.table().hoveredIndex.set(-1);
+    }
+    onActionToolbarClick(event) {
+        event.stopPropagation(); // prevent selecting the row
+        this.table().activeItem.set(this.row().item);
+    }
+    contributeRowActions() {
+        contributeMenu(this.rowActionsToolbarName, toolbar => {
+            const rowActionsFactoryFn = this.table().rowActions;
+            if (!this.row().loading && rowActionsFactoryFn) {
+                rowActionsFactoryFn(toolbar, this.row().item, this.row().index);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableRowComponent, isStandalone: true, selector: "sci-table-row", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { primaryAction: "primaryAction" }, host: { listeners: { "click": "onRowClick($event)", "dblclick": "onRowDblClick($event)", "mouseenter": "onRowMouseEnter()", "mouseleave": "onRowMouseLeave($event)" }, properties: { "attr.data-active": "row().active() ? '' : null", "attr.data-selected": "row().selected() ? '' : null", "attr.data-hovered": "row().hovered() ? '' : null", "class": "row().bindings?.cssClass?.()" } }, viewQueries: [{ propertyName: "rowActionToolbar", first: true, predicate: SciToolbarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let row = this.row();\n@for (cell of row.cells; track cell.column.name) {\n  <sci-table-cell [cell]=\"cell\" [row]=\"row\"/>\n} @empty {\n  @for (column of table().columns(); track column.name) {\n    <div class=\"skeleton e2e-skeleton\" [attr.data-column]=\"column.name\"></div>\n  }\n}\n\n@let hasRowActions = !!table().rowActions;\n@let isRowHovered = table().hoveredRow() === row;\n@let isRowActionMenuOpen = rowActionToolbar()?.menuOpen();\n\n@if (hasRowActions && (isRowHovered || isRowActionMenuOpen)) {\n  <!--eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <sci-toolbar [name]=\"rowActionsToolbarName\" (click)=\"onActionToolbarClick($event)\" class=\"row-actions\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;grid-template-columns:subgrid;grid-auto-rows:var(--sci-table-row-height);align-items:stretch;-webkit-user-select:none;user-select:none;border-bottom:var(--\\275sci-table-border-size) solid var(--sci-table-gridline-color)}:host[data-hovered]{background-color:var(--sci-table-row-background-color-hover)}:host[data-selected]{background-color:var(--sci-table-row-background-color-selected);--\\275sci-table-row-selected: true}:host[data-hovered]:not([data-selected]){border-radius:var(--sci-table-row-border-radius)}:host:is(:first-child,:not([data-selected])+sci-table-row)[data-selected]{border-top-left-radius:var(--sci-table-row-border-radius);border-top-right-radius:var(--sci-table-row-border-radius)}:host[data-selected]:not(:has(+sci-table-row[data-selected])){border-bottom-left-radius:var(--sci-table-row-border-radius);border-bottom-right-radius:var(--sci-table-row-border-radius)}@container (style(--\\275sci-table-scrolling: true)) or (style(--\\275sci-table-resizing: true)){:host{pointer-events:none}}:host:has(>div.skeleton){pointer-events:none;align-items:center}:host:has(>div.skeleton)>div.skeleton{display:inline-block;position:relative;overflow:hidden;border-radius:var(--sci-corner-small);background-color:var(--sci-color-skeleton-subtle);opacity:0;animation-name:visiblity;animation-duration:0s;animation-delay:50ms;animation-fill-mode:forwards}:host:has(>div.skeleton)>div.skeleton:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(to right,transparent 0,color-mix(in srgb,light-dark(var(--sci-static-color-white),var(--sci-static-color-black)) 30%,transparent) 50%,transparent);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}@keyframes visiblity{to{opacity:1}}:host:has(>div.skeleton)>div.skeleton{height:1em;margin-inline:var(--\\275sci-table-cell-padding-inline)}:host>sci-toolbar.row-actions{position:sticky;right:0;transform:translate(calc(-1 * var(--\\275sci-table-cell-padding-inline)));justify-self:end;align-self:center;border-radius:var(--sci-corner);padding:1px;background-color:var(--\\275sci-table-row-action-background-color);z-index:2;--sci-toolbar-item-background-color-hover: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 85%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--sci-toolbar-item-background-color-active: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 75%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)))}@container not style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color)}}@container style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color-selected)}}:host>sci-toolbar.row-actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: SciTableCellComponent, selector: "sci-table-cell", inputs: ["cell", "row"] }, { kind: "component", type: SciToolbarComponent, selector: "sci-toolbar", inputs: ["name", "orientation", "context", "acceleratorTarget", "popoverViewContainerRef"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-table-row', imports: [
+                        SciTableCellComponent,
+                        SciToolbarComponent,
+                    ], host: {
+                        '[attr.data-active]': `row().active() ? '' : null`,
+                        '[attr.data-selected]': `row().selected() ? '' : null`,
+                        '[attr.data-hovered]': `row().hovered() ? '' : null`,
+                        '[class]': 'row().bindings?.cssClass?.()',
+                        '(click)': 'onRowClick($event)',
+                        '(dblclick)': 'onRowDblClick($event)',
+                        '(mouseenter)': 'onRowMouseEnter()',
+                        '(mouseleave)': 'onRowMouseLeave($event)',
+                    }, template: "@let row = this.row();\n@for (cell of row.cells; track cell.column.name) {\n  <sci-table-cell [cell]=\"cell\" [row]=\"row\"/>\n} @empty {\n  @for (column of table().columns(); track column.name) {\n    <div class=\"skeleton e2e-skeleton\" [attr.data-column]=\"column.name\"></div>\n  }\n}\n\n@let hasRowActions = !!table().rowActions;\n@let isRowHovered = table().hoveredRow() === row;\n@let isRowActionMenuOpen = rowActionToolbar()?.menuOpen();\n\n@if (hasRowActions && (isRowHovered || isRowActionMenuOpen)) {\n  <!--eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <sci-toolbar [name]=\"rowActionsToolbarName\" (click)=\"onActionToolbarClick($event)\" class=\"row-actions\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;grid-template-columns:subgrid;grid-auto-rows:var(--sci-table-row-height);align-items:stretch;-webkit-user-select:none;user-select:none;border-bottom:var(--\\275sci-table-border-size) solid var(--sci-table-gridline-color)}:host[data-hovered]{background-color:var(--sci-table-row-background-color-hover)}:host[data-selected]{background-color:var(--sci-table-row-background-color-selected);--\\275sci-table-row-selected: true}:host[data-hovered]:not([data-selected]){border-radius:var(--sci-table-row-border-radius)}:host:is(:first-child,:not([data-selected])+sci-table-row)[data-selected]{border-top-left-radius:var(--sci-table-row-border-radius);border-top-right-radius:var(--sci-table-row-border-radius)}:host[data-selected]:not(:has(+sci-table-row[data-selected])){border-bottom-left-radius:var(--sci-table-row-border-radius);border-bottom-right-radius:var(--sci-table-row-border-radius)}@container (style(--\\275sci-table-scrolling: true)) or (style(--\\275sci-table-resizing: true)){:host{pointer-events:none}}:host:has(>div.skeleton){pointer-events:none;align-items:center}:host:has(>div.skeleton)>div.skeleton{display:inline-block;position:relative;overflow:hidden;border-radius:var(--sci-corner-small);background-color:var(--sci-color-skeleton-subtle);opacity:0;animation-name:visiblity;animation-duration:0s;animation-delay:50ms;animation-fill-mode:forwards}:host:has(>div.skeleton)>div.skeleton:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(to right,transparent 0,color-mix(in srgb,light-dark(var(--sci-static-color-white),var(--sci-static-color-black)) 30%,transparent) 50%,transparent);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}@keyframes visiblity{to{opacity:1}}:host:has(>div.skeleton)>div.skeleton{height:1em;margin-inline:var(--\\275sci-table-cell-padding-inline)}:host>sci-toolbar.row-actions{position:sticky;right:0;transform:translate(calc(-1 * var(--\\275sci-table-cell-padding-inline)));justify-self:end;align-self:center;border-radius:var(--sci-corner);padding:1px;background-color:var(--\\275sci-table-row-action-background-color);z-index:2;--sci-toolbar-item-background-color-hover: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 85%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--sci-toolbar-item-background-color-active: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 75%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)))}@container not style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color)}}@container style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color-selected)}}:host>sci-toolbar.row-actions:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], primaryAction: [{ type: i0.Output, args: ["primaryAction"] }], rowActionToolbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciToolbarComponent), { isSignal: true }] }] } });
+
+/*
+ * 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 SciTableKeyboardNavigatorDirective {
+    selectionService = inject(SciTableSelectionService);
+    /**
+     * Indicates whether the given keyboard event was triggered from an input element.
+     */
+    isFromInput(event) {
+        if (event.target instanceof Element && event.target.closest('input, textarea, select') !== null) {
+            return true;
+        }
+        if (event.target instanceof HTMLElement && event.target.isContentEditable) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Indicates whether the given keyboard event was triggered from a button.
+     */
+    isFromButton(event) {
+        return event.target instanceof Element && event.target.closest('button') !== null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableKeyboardNavigatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SciTableKeyboardNavigatorDirective, isStandalone: true, selector: "[sciTableKeyboardNavigator]", host: { listeners: { "keydown.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.shift.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.control.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.meta.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.shift.control.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.shift.meta.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.shift.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.control.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.meta.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.shift.control.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.shift.meta.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.space": "isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)", "keydown.control.space": "isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)", "keydown.meta.space": "isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)", "keydown.control.a": "isFromInput($event) || selectionService.onControlA($event)", "keydown.meta.a": "isFromInput($event) || selectionService.onControlA($event)", "keydown.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.shift.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.control.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.shift.control.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.shift.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.control.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.shift.control.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.shift.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.control.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.shift.control.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.shift.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.control.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.shift.control.end": "isFromInput($event) || selectionService.onEnd($event)" }, properties: { "attr.tabindex": "0" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableKeyboardNavigatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sciTableKeyboardNavigator]',
+                    host: {
+                        '[attr.tabindex]': '0', // required for keyboard navigation
+                        '(keydown.arrowUp)': 'isFromInput($event) || selectionService.onArrowUp($event)',
+                        '(keydown.shift.arrowUp)': 'isFromInput($event) || selectionService.onArrowUp($event)',
+                        '(keydown.control.arrowUp)': 'isFromInput($event) || selectionService.onArrowUp($event)',
+                        '(keydown.meta.arrowUp)': 'isFromInput($event) || selectionService.onArrowUp($event)',
+                        '(keydown.shift.control.arrowUp)': 'isFromInput($event) || selectionService.onArrowUp($event)',
+                        '(keydown.shift.meta.arrowUp)': 'isFromInput($event) || selectionService.onArrowUp($event)',
+                        '(keydown.arrowDown)': 'isFromInput($event) || selectionService.onArrowDown($event)',
+                        '(keydown.shift.arrowDown)': 'isFromInput($event) || selectionService.onArrowDown($event)',
+                        '(keydown.control.arrowDown)': 'isFromInput($event) || selectionService.onArrowDown($event)',
+                        '(keydown.meta.arrowDown)': 'isFromInput($event) || selectionService.onArrowDown($event)',
+                        '(keydown.shift.control.arrowDown)': 'isFromInput($event) || selectionService.onArrowDown($event)',
+                        '(keydown.shift.meta.arrowDown)': 'isFromInput($event) || selectionService.onArrowDown($event)',
+                        '(keydown.space)': 'isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)',
+                        '(keydown.control.space)': 'isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)',
+                        '(keydown.meta.space)': 'isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)',
+                        '(keydown.control.a)': 'isFromInput($event) || selectionService.onControlA($event)',
+                        '(keydown.meta.a)': 'isFromInput($event) || selectionService.onControlA($event)',
+                        '(keydown.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
+                        '(keydown.shift.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
+                        '(keydown.control.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
+                        '(keydown.shift.control.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
+                        '(keydown.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
+                        '(keydown.shift.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
+                        '(keydown.control.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
+                        '(keydown.shift.control.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
+                        '(keydown.home)': 'isFromInput($event) || selectionService.onHome($event)',
+                        '(keydown.shift.home)': 'isFromInput($event) || selectionService.onHome($event)',
+                        '(keydown.control.home)': 'isFromInput($event) || selectionService.onHome($event)',
+                        '(keydown.shift.control.home)': 'isFromInput($event) || selectionService.onHome($event)',
+                        '(keydown.end)': 'isFromInput($event) || selectionService.onEnd($event)',
+                        '(keydown.shift.end)': 'isFromInput($event) || selectionService.onEnd($event)',
+                        '(keydown.control.end)': 'isFromInput($event) || selectionService.onEnd($event)',
+                        '(keydown.shift.control.end)': 'isFromInput($event) || selectionService.onEnd($event)',
+                    },
+                }]
+        }] });
+
+class SciTableColumnService {
+    _table = inject(ɵSCI_TABLE);
+    _injector = inject(Injector);
+    /**
+     * State while resizing a column.
+     */
+    _resizingState = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resizingState" }] : /* istanbul ignore next */ []));
+    /**
+     * Provides the calculated CSS `grid-template-columns` value based on configured and resized column widths.
+     */
+    gridTemplateColumns = this.computeGridTemplateColumns();
+    /**
+     * Computes the CSS `grid-template-columns` value.
+     *
+     * Columns are layed out according to their configured widths. While resizing a column, absolute pixel widths are used.
+     */
+    computeGridTemplateColumns() {
+        return computed(() => {
+            return this._table().columns()
+                .map(column => {
+                const width = this._resizingState()?.columnWidths()?.get(column.name) ?? column.width();
+                if (typeof width === 'number') {
+                    return `${width}px`;
+                }
+                if (width.endsWith('fr')) {
+                    return cssMinmax({ min: column.minWidth, max: width });
+                }
+                return width;
+            })
+                .join(' ') || '100%'; // fill full width if no column
+        });
+    }
+    startResize(column) {
+        column.resizing.set(true);
+        this._resizingState.set({ column, columnWidths: signal(undefined) });
+    }
+    resize(columnWidth) {
+        const state = this._resizingState();
+        const clampedWidth = typeof columnWidth === 'number' ? clamp(columnWidth, { min: state.column.minWidth }) : columnWidth;
+        if (clampedWidth !== state.columnWidths()?.get(state.column.name)) {
+            const columnWidths = this.calculateColumnWidths(state.column, clampedWidth);
+            state.columnWidths.set(columnWidths);
+        }
+    }
+    endResize() {
+        const { column } = this._resizingState();
+        // Run on next render to update user settings with effective column widths read from the DOM.
+        afterNextRender(() => {
+            this.updateUserSettings(column);
+            column.resizing.set(false);
+            this._resizingState.set(undefined);
+        }, { injector: this._injector });
+    }
+    /**
+     * Updates user settings with current column widths.
+     */
+    updateUserSettings(resizedColumn) {
+        const resizedColumnIndex = this._table().columns().indexOf(resizedColumn);
+        this._table().userSettings.update(userSettings => ({
+            ...userSettings,
+            columns: this._table().columns().flatMap((column, index) => {
+                const columnSettings = userSettings.columns?.find(it => it.name === column.name);
+                // Store the width of the resized column and all columns to its left.
+                if (index <= resizedColumnIndex) {
+                    return {
+                        ...columnSettings ?? { name: column.name },
+                        width: column.location.width,
+                    };
+                }
+                return columnSettings ?? [];
+            }),
+        }));
+    }
+    /**
+     * Calculates absolute column widths based on the resized column's new width.
+     *
+     * Any remaining viewport space is distributed proportionally among flex-sized columns using their current width ratio.
+     */
+    calculateColumnWidths(columnToResize, newColumnWidth) {
+        const columns = this._table().columns();
+        const columnIndex = columns.indexOf(columnToResize);
+        return columns.reduce((map, column, index) => {
+            if (index < columnIndex) {
+                return map.set(column.name, column.location.width); // columns to the left are fixed
+            }
+            if (index === columnIndex) {
+                return map.set(column.name, newColumnWidth);
+            }
+            return map;
+        }, new Map());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableColumnService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableColumnService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableColumnService, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Creates a minmax() CSS function with the given min/max for use in a CSS grid.
+ */
+function cssMinmax(minmax) {
+    const min = `${minmax.min}px`;
+    const max = typeof minmax.max === 'number' ? `${minmax.max}px` : minmax.max;
+    return `minmax(${min}, ${max})`;
+}
+
+/*
+ * 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 SciTableColumnComponent {
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.injectLocationToColumn();
+    }
+    injectLocationToColumn() {
+        const element = inject(ElementRef).nativeElement;
+        effect(onCleanup => {
+            const column = this.column();
+            untracked(() => {
+                const location = column.location = {
+                    get x() {
+                        return element.getBoundingClientRect().left;
+                    },
+                    get width() {
+                        return element.offsetWidth;
+                    },
+                };
+                onCleanup(() => {
+                    if (column.location === location) {
+                        column.location = { x: 0, width: 0 };
+                    }
+                });
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SciTableColumnComponent, isStandalone: true, selector: "sci-table-column", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-column": "column().name", "style.min-width.px": "column().minWidth" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-table-column',
+                    template: '',
+                    host: {
+                        '[attr.data-column]': 'column().name',
+                        '[style.min-width.px]': 'column().minWidth', // required when resizing the column to its preferred size to not drop below min-width.
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
+
+/*
+ * 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 SciTableColumnsComponent {
+    rows = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    table = inject(ɵSCI_TABLE);
+    _hovered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hovered" }] : /* istanbul ignore next */ []));
+    _columnService = inject(SciTableColumnService);
+    onResizeStart(column) {
+        this._columnService.startResize(column);
+    }
+    onResize(column, event) {
+        const pointerPosition = event.position.clientPos; // TODO [dwi] Change to screen coordinates to work with microfrontends
+        const columnStart = column.location.x - 1; // -1 because splitters are positioned at the end of cell content
+        const newColumnWidth = pointerPosition - columnStart;
+        this._columnService.resize(newColumnWidth);
+    }
+    onResizeEnd() {
+        this._columnService.endResize();
+        // Clear the hovered row when resizing ends outside the splitter (for example, above or below it).
+        if (!this._hovered()) {
+            this.table().hoveredIndex.set(-1);
+        }
+    }
+    /**
+     * Resizes the column to its preferred size.
+     */
+    onPack(column) {
+        this._columnService.startResize(column);
+        this._columnService.resize('min-content');
+        this._columnService.endResize();
+    }
+    onMouseEnter() {
+        this._hovered.set(true);
+    }
+    onMouseLeave() {
+        this._hovered.set(false);
+        // Do not clear the hovered row while dragging the resize handle, or quick movements will accidentally clear it.
+        // If the mouse leaves the splitter during drag (above or below), the hovered row is unset when resizing ends.
+        if (!this.table().resizing()) {
+            this.table().hoveredIndex.set(-1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableColumnsComponent, isStandalone: true, selector: "sci-table-columns", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<!-- Render a resize splitter per resizable column. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  @if (column.resizable()) {\n    <sci-splitter orientation=\"vertical\"\n                  [class.resizing]=\"column.resizing()\"\n                  [attr.data-column]=\"column.name\"\n                  [style.grid-column]=\"i + 1\"\n                  (start)=\"onResizeStart(column)\"\n                  (move)=\"onResize(column, $event)\"\n                  (end)=\"onResizeEnd()\"\n                  (reset)=\"onPack(column)\"\n                  (mouseenter)=\"onMouseEnter()\"\n                  (mouseleave)=\"onMouseLeave()\"/>\n  }\n}\n\n<!-- Render an invisible synthetic column per column to read current widths and set minimum widths. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  <sci-table-column [column]=\"column\" [style.grid-column]=\"i + 1\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:subgrid;overflow-x:clip;pointer-events:none}@container (style(--sci-table-header-column-divider: visible)) and (style(--\\275sci-table-header-visible: true)){:host{--\\275sci-table-header-column-divider-visible: true}}:host:has(>sci-splitter:hover){--\\275sci-column-splitter-hover: true}:host>sci-splitter,:host>sci-table-column{grid-row:1}:host>sci-splitter{--sci-splitter-size: var(--\\275sci-table-border-size);--sci-splitter-size-hover: var(--\\275sci-table-border-size);--sci-splitter-cross-axis-size: 0;--sci-splitter-background-color: var(--\\275sci-table-border-color);justify-self:end;pointer-events:auto}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter{--sci-splitter-cross-axis-start: .5em;--sci-splitter-cross-axis-size: calc(var(--\\275sci-table-header-height) - 2 * var(--sci-splitter-cross-axis-start))}@container style(--\\275sci-table-viewport-client-width >= --\\275sci-table-viewport-width){:host>sci-splitter:last-of-type:not(.resizing):not(:hover){--sci-splitter-cross-axis-size: 0}}}:host>sci-splitter:is(:hover,.resizing){--sci-splitter-background-color: rgb(from var(--\\275sci-table-border-color) r g b / .5);--sci-splitter-cross-axis-size: 100%}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter:is(:hover,.resizing){--sci-splitter-cross-axis-size: auto;--sci-splitter-cross-axis-end: 0}}@container style(--\\275sci-table-resizing: true){:host>sci-splitter:not(.resizing){pointer-events:none}}@container (style(--\\275sci-table-scrolling: true)) and (not style(--\\275sci-table-resizing: true)) and (not style(--\\275sci-column-splitter-hover: true)){:host>sci-splitter{pointer-events:none}}:host>sci-table-column{height:0}\n"], dependencies: [{ kind: "component", type: SciSplitterComponent, selector: "sci-splitter", inputs: ["orientation"], outputs: ["start", "move", "end", "reset"] }, { kind: "component", type: SciTableColumnComponent, selector: "sci-table-column", inputs: ["column"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-table-columns', imports: [
+                        SciSplitterComponent,
+                        SciTableColumnComponent,
+                    ], template: "<!-- Render a resize splitter per resizable column. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  @if (column.resizable()) {\n    <sci-splitter orientation=\"vertical\"\n                  [class.resizing]=\"column.resizing()\"\n                  [attr.data-column]=\"column.name\"\n                  [style.grid-column]=\"i + 1\"\n                  (start)=\"onResizeStart(column)\"\n                  (move)=\"onResize(column, $event)\"\n                  (end)=\"onResizeEnd()\"\n                  (reset)=\"onPack(column)\"\n                  (mouseenter)=\"onMouseEnter()\"\n                  (mouseleave)=\"onMouseLeave()\"/>\n  }\n}\n\n<!-- Render an invisible synthetic column per column to read current widths and set minimum widths. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  <sci-table-column [column]=\"column\" [style.grid-column]=\"i + 1\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:subgrid;overflow-x:clip;pointer-events:none}@container (style(--sci-table-header-column-divider: visible)) and (style(--\\275sci-table-header-visible: true)){:host{--\\275sci-table-header-column-divider-visible: true}}:host:has(>sci-splitter:hover){--\\275sci-column-splitter-hover: true}:host>sci-splitter,:host>sci-table-column{grid-row:1}:host>sci-splitter{--sci-splitter-size: var(--\\275sci-table-border-size);--sci-splitter-size-hover: var(--\\275sci-table-border-size);--sci-splitter-cross-axis-size: 0;--sci-splitter-background-color: var(--\\275sci-table-border-color);justify-self:end;pointer-events:auto}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter{--sci-splitter-cross-axis-start: .5em;--sci-splitter-cross-axis-size: calc(var(--\\275sci-table-header-height) - 2 * var(--sci-splitter-cross-axis-start))}@container style(--\\275sci-table-viewport-client-width >= --\\275sci-table-viewport-width){:host>sci-splitter:last-of-type:not(.resizing):not(:hover){--sci-splitter-cross-axis-size: 0}}}:host>sci-splitter:is(:hover,.resizing){--sci-splitter-background-color: rgb(from var(--\\275sci-table-border-color) r g b / .5);--sci-splitter-cross-axis-size: 100%}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter:is(:hover,.resizing){--sci-splitter-cross-axis-size: auto;--sci-splitter-cross-axis-end: 0}}@container style(--\\275sci-table-resizing: true){:host>sci-splitter:not(.resizing){pointer-events:none}}@container (style(--\\275sci-table-scrolling: true)) and (not style(--\\275sci-table-resizing: true)) and (not style(--\\275sci-column-splitter-hover: true)){:host>sci-splitter{pointer-events:none}}:host>sci-table-column{height:0}\n"] }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }] } });
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for the table viewport provided as slotted content.
+ */
+class SciTableViewportComponent {
+    host = inject(ElementRef).nativeElement;
+    table = inject(ɵSCI_TABLE);
+    viewportHeight = computed(() => {
+        const viewportHeight = this.table().tableViewRef()?.viewportHeight() ?? 0;
+        const headerHeight = this.table().tableViewRef()?.headerHeight() ?? 0;
+        return viewportHeight + headerHeight;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciTableViewportComponent, isStandalone: true, selector: "sci-table-viewport", host: { properties: { "style.--\u0275sci-table-viewport-width": "`${table().tableViewRef()?.viewportWidth() ?? 0}px`", "style.--\u0275sci-table-viewport-height": "`${viewportHeight() ?? 0}px`", "style.--\u0275sci-table-viewport-client-width": "`${table().tableViewRef()?.viewportClientWidth() ?? 0}px`", "style.--\u0275sci-table-viewport-client-height": "`${table().tableViewRef()?.viewportClientHeight() ?? 0}px`", "style.--\u0275sci-table-header-height": "`${table().tableViewRef()?.headerHeight() ?? 0}px`", "style.--\u0275sci-table-cell-padding-inline": "`${table().tableViewRef()?.cellPadding() ?? 0}px`", "style.--\u0275sci-table-row-height": "`${table().tableViewRef()?.itemHeight() ?? 0}px`" } }, ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableViewportComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-table-viewport',
+                    template: '<ng-content/>',
+                    host: {
+                        '[style.--ɵsci-table-viewport-width]': '`${table().tableViewRef()?.viewportWidth() ?? 0}px`',
+                        '[style.--ɵsci-table-viewport-height]': '`${viewportHeight() ?? 0}px`',
+                        '[style.--ɵsci-table-viewport-client-width]': '`${table().tableViewRef()?.viewportClientWidth() ?? 0}px`',
+                        '[style.--ɵsci-table-viewport-client-height]': '`${table().tableViewRef()?.viewportClientHeight() ?? 0}px`',
+                        '[style.--ɵsci-table-header-height]': '`${table().tableViewRef()?.headerHeight() ?? 0}px`',
+                        '[style.--ɵsci-table-cell-padding-inline]': '`${table().tableViewRef()?.cellPadding() ?? 0}px`',
+                        '[style.--ɵsci-table-row-height]': '`${table().tableViewRef()?.itemHeight() ?? 0}px`',
+                    },
+                }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for the table body provided as slotted content.
+ */
+class SciTableGridComponent {
+    table = inject(ɵSCI_TABLE);
+    gridTemplateColumns = inject(SciTableColumnService).gridTemplateColumns;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciTableGridComponent, isStandalone: true, selector: "sci-table-grid", host: { properties: { "style.--\u0275sci-table-columns": "gridTemplateColumns()", "style.--\u0275sci-table-virtual-scroll-offset-top": "`${table().virtualScrollOffset().top}px`", "style.--\u0275sci-table-virtual-scroll-offset-bottom": "`${table().virtualScrollOffset().bottom}px`" } }, providers: [
+            SciTableColumnService,
+        ], ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-table-grid',
+                    template: '<ng-content/>',
+                    providers: [
+                        SciTableColumnService,
+                    ],
+                    host: {
+                        '[style.--ɵsci-table-columns]': 'gridTemplateColumns()',
+                        '[style.--ɵsci-table-virtual-scroll-offset-top]': '`${table().virtualScrollOffset().top}px`',
+                        '[style.--ɵsci-table-virtual-scroll-offset-bottom]': '`${table().virtualScrollOffset().bottom}px`',
+                    },
+                }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for the table body provided as slotted content.
+ */
+class SciTableBodyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciTableBodyComponent, isStandalone: true, selector: "sci-table-body", ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-table-body',
+                    template: '<ng-content/>',
+                }]
+        }] });
+
+/*
+ * 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 SciColumnHeaderComponent {
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    table = inject(ɵSCI_TABLE);
+    header = text(computed(() => this.column().header()));
+    sortDirection = computed(() => this.table().sortCriteria().find(criteria => criteria.columnName === this.column().name)?.direction, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
+    onSort(event) {
+        this.table().sort(this.column().name, event.ctrlKey || event.metaKey);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciColumnHeaderComponent, isStandalone: true, selector: "sci-column-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-column": "column().name", "attr.title": "header()" } }, ngImport: i0, template: "@if (column().sortable()) {\n  <button class=\"sort e2e-sort\"\n          [attr.data-sort-direction]=\"sortDirection()\"\n          (click)=\"onSort($event)\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"header_template\"/>\n\n    <!-- Sort Indicator -->\n    @switch (sortDirection()) {\n      @case ('asc') {\n        <sci-icon>scion.sort_ascending</sci-icon>\n      }\n      @case ('desc') {\n        <sci-icon>scion.sort_descending</sci-icon>\n      }\n      @default {\n        <sci-icon class=\"no-sort\">scion.sort_indicator</sci-icon>\n      }\n    }\n  </button>\n} @else {\n  <ng-container *ngTemplateOutlet=\"header_template\"/>\n}\n\n<ng-template #header_template>\n  <span class=\"header e2e-header\" [class.wrap]=\"table().wrapHeader()\">{{header()}}</span>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:grid;align-items:center}:host:not(:has(button.sort)){padding-inline:var(--\\275sci-table-cell-padding-inline)}:host:is(:focus-visible,:hover){--\\275sci-table-column-header-hover: true}:host>button.sort{all:unset;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5em;padding-inline:var(--\\275sci-table-cell-padding-inline);cursor:var(--sci-table-header-cursor);align-self:stretch}@container not style(--\\275sci-table-column-header-hover: true){:host>button.sort>sci-icon.no-sort{visibility:hidden}}@container style(--\\275sci-table-column-header-hover: true){:host>button.sort{background-color:var(--sci-table-header-background-color-hover)}}:host span.header{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sci-table-header-text-color);font-family:var(--sci-table-header-font-family),sans-serif;font-weight:var(--sci-table-header-font-weight);font-size:var(--sci-table-header-font-size);padding-block:.25em}:host span.header.wrap{white-space:wrap}\n"], dependencies: [{ kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-column-header', imports: [
+                        SciIconComponent,
+                        NgTemplateOutlet,
+                    ], host: {
+                        '[attr.data-column]': 'column().name',
+                        '[attr.title]': 'header()',
+                    }, template: "@if (column().sortable()) {\n  <button class=\"sort e2e-sort\"\n          [attr.data-sort-direction]=\"sortDirection()\"\n          (click)=\"onSort($event)\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"header_template\"/>\n\n    <!-- Sort Indicator -->\n    @switch (sortDirection()) {\n      @case ('asc') {\n        <sci-icon>scion.sort_ascending</sci-icon>\n      }\n      @case ('desc') {\n        <sci-icon>scion.sort_descending</sci-icon>\n      }\n      @default {\n        <sci-icon class=\"no-sort\">scion.sort_indicator</sci-icon>\n      }\n    }\n  </button>\n} @else {\n  <ng-container *ngTemplateOutlet=\"header_template\"/>\n}\n\n<ng-template #header_template>\n  <span class=\"header e2e-header\" [class.wrap]=\"table().wrapHeader()\">{{header()}}</span>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:grid;align-items:center}:host:not(:has(button.sort)){padding-inline:var(--\\275sci-table-cell-padding-inline)}:host:is(:focus-visible,:hover){--\\275sci-table-column-header-hover: true}:host>button.sort{all:unset;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5em;padding-inline:var(--\\275sci-table-cell-padding-inline);cursor:var(--sci-table-header-cursor);align-self:stretch}@container not style(--\\275sci-table-column-header-hover: true){:host>button.sort>sci-icon.no-sort{visibility:hidden}}@container style(--\\275sci-table-column-header-hover: true){:host>button.sort{background-color:var(--sci-table-header-background-color-hover)}}:host span.header{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sci-table-header-text-color);font-family:var(--sci-table-header-font-family),sans-serif;font-weight:var(--sci-table-header-font-weight);font-size:var(--sci-table-header-font-size);padding-block:.25em}:host span.header.wrap{white-space:wrap}\n"] }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
+
+/*
+ * 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 SciColumnFilterBooleanLabelPipe {
+    transform(value) {
+        if (value === true) {
+            return '%scion.components.yes.value';
+        }
+        if (value === false) {
+            return '%scion.components.no.value';
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterBooleanLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterBooleanLabelPipe, isStandalone: true, name: "sciColumnFilterBooleanLabel" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterBooleanLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'sciColumnFilterBooleanLabel' }]
+        }] });
+
+/*
+ * 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 SciColumnFilterComponent {
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    filter = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    input = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    _table = inject(ɵSCI_TABLE);
+    _menuService = inject(_SciMenuService);
+    _injector = inject(Injector);
+    _host = inject(ElementRef).nativeElement;
+    _menu;
+    constructor() {
+        this.bindToModel();
+    }
+    onFilterClick() {
+        if (this.column().type === 'boolean') {
+            this.toggleBooleanMenu();
+        }
+        this.input().nativeElement.focus();
+    }
+    onReset(event) {
+        this.filter.set(null);
+        this.input().nativeElement.focus();
+        event.stopPropagation(); // prevent opening menu
+    }
+    bindToModel() {
+        const filterDebounced = debounced(computed(() => trim(this.filter())), async (value) => {
+            // Debounce only if not empty.
+            if (value !== null && typeof value !== 'boolean') {
+                await firstValueFrom(timer(200));
+            }
+        });
+        effect(() => {
+            const filter = filterDebounced.value();
+            const table = this._table();
+            const column = this.column();
+            untracked(() => {
+                table.filter(filter, { columnName: column.name });
+            });
+        });
+    }
+    toggleBooleanMenu() {
+        // Close menu if already opened.
+        if (this._menu) {
+            this._menu.close();
+            return;
+        }
+        const injector = createDestroyableInjector({ parent: this._injector });
+        runInInjectionContext(injector, () => {
+            // Contribute menu items.
+            contributeMenu('menu:column-filter', menu => menu
+                .addMenuItem({ label: '%scion.components.yes.value', attributes: { 'data-option': 'true' }, onSelect: () => this.filter.set(true) })
+                .addMenuItem({ label: '%scion.components.no.value', attributes: { 'data-option': 'false' }, onSelect: () => this.filter.set(false) }));
+            // Open menu.
+            this._menu = this._menuService.open('menu:column-filter', {
+                anchor: this._host,
+                minWidth: `${this._host.offsetWidth}px`,
+                offset: { y: -1 },
+            });
+            // Close menu when start resizing a column. By default, closes the menu only on mouse up.
+            toObservable(this._table().resizing)
+                .pipe(skip(1))
+                .subscribe(() => this._menu?.close());
+            this._menu.onClose(() => {
+                injector.destroy();
+                // Restore focus manually as it is not restored automatically since opening the popover inside Shadow DOM.
+                // TODO [menu] Consider restore focus manually in Menu API due to restriction in shadow DOM.
+                this.input().nativeElement.focus();
+                this._menu = undefined;
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciColumnFilterComponent, isStandalone: true, selector: "sci-column-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "column().filterable() && onFilterClick()" }, properties: { "attr.data-column": "column().name", "attr.data-disabled": "!column().filterable() ? '' : null" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (column().filterable()) {\n  @let active = filter() !== null && filter() !== '';\n\n  <sci-icon class=\"filter e2e-filter\" [class.active]=\"active\">scion.filter</sci-icon>\n\n  @switch (column().type) {\n    @case ('number') {\n      <input [(ngModel)]=\"filter\" type=\"number\" #input/>\n    }\n    @case ('boolean') {\n      <input [ngModel]=\"(filter() | sciColumnFilterBooleanLabel | sciText)()\" type=\"button\" #input>\n      <sci-icon class=\"chevron\">scion.chevron_down</sci-icon>\n    }\n    @default {\n      <input [(ngModel)]=\"filter\" type=\"text\" #input/>\n    }\n  }\n\n  @if (active) {\n    <button class=\"clear e2e-clear\" (click)=\"onReset($event)\">\n      <sci-icon>scion.clear</sci-icon>\n    </button>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;gap:.5em;align-items:center;padding-inline:var(--\\275sci-table-cell-padding-inline);border-bottom:var(--\\275sci-table-border-size) solid transparent;margin-bottom:-1px;transition:border-bottom-color ease-in-out .15s,color ease-in-out .15s}:host:focus-within:not(:disabled):not(:has(input:disabled)){border-bottom-color:var(--sci-color-accent)}:host>sci-icon.filter.active{color:var(--sci-color-accent)}:host>sci-icon.chevron{--sci-icon-size: var(--sci-button-icon-size)}:host:has(input[type=button]){cursor:var(--sci-button-cursor)}:host:has(input[type=button]):has(button.clear)>sci-icon.chevron{display:none}:host>input{all:unset;flex:auto;align-self:stretch;width:0;min-width:0;color:var(--sci-color-text);appearance:auto;box-sizing:border-box}:host>input[type=number]::-webkit-outer-spin-button,:host>input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}:host>button.clear{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>button.clear:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button.clear:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button.clear:focus:not(:focus-visible){outline:none}:host>button.clear:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button.clear:disabled{color:var(--sci-button-text-color-disabled)}:host>button.clear{padding:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "pipe", type: SciTextPipe, name: "sciText" }, { kind: "pipe", type: SciColumnFilterBooleanLabelPipe, name: "sciColumnFilterBooleanLabel" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-column-filter', imports: [
+                        FormsModule,
+                        SciIconComponent,
+                        SciTextPipe,
+                        SciColumnFilterBooleanLabelPipe,
+                    ], host: {
+                        '[attr.data-column]': 'column().name',
+                        '[attr.data-disabled]': `!column().filterable() ? '' : null`,
+                        '(click)': 'column().filterable() && onFilterClick()',
+                    }, template: "@if (column().filterable()) {\n  @let active = filter() !== null && filter() !== '';\n\n  <sci-icon class=\"filter e2e-filter\" [class.active]=\"active\">scion.filter</sci-icon>\n\n  @switch (column().type) {\n    @case ('number') {\n      <input [(ngModel)]=\"filter\" type=\"number\" #input/>\n    }\n    @case ('boolean') {\n      <input [ngModel]=\"(filter() | sciColumnFilterBooleanLabel | sciText)()\" type=\"button\" #input>\n      <sci-icon class=\"chevron\">scion.chevron_down</sci-icon>\n    }\n    @default {\n      <input [(ngModel)]=\"filter\" type=\"text\" #input/>\n    }\n  }\n\n  @if (active) {\n    <button class=\"clear e2e-clear\" (click)=\"onReset($event)\">\n      <sci-icon>scion.clear</sci-icon>\n    </button>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;gap:.5em;align-items:center;padding-inline:var(--\\275sci-table-cell-padding-inline);border-bottom:var(--\\275sci-table-border-size) solid transparent;margin-bottom:-1px;transition:border-bottom-color ease-in-out .15s,color ease-in-out .15s}:host:focus-within:not(:disabled):not(:has(input:disabled)){border-bottom-color:var(--sci-color-accent)}:host>sci-icon.filter.active{color:var(--sci-color-accent)}:host>sci-icon.chevron{--sci-icon-size: var(--sci-button-icon-size)}:host:has(input[type=button]){cursor:var(--sci-button-cursor)}:host:has(input[type=button]):has(button.clear)>sci-icon.chevron{display:none}:host>input{all:unset;flex:auto;align-self:stretch;width:0;min-width:0;color:var(--sci-color-text);appearance:auto;box-sizing:border-box}:host>input[type=number]::-webkit-outer-spin-button,:host>input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}:host>button.clear{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>button.clear:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button.clear:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button.clear:focus:not(:focus-visible){outline:none}:host>button.clear:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button.clear:disabled{color:var(--sci-button-text-color-disabled)}:host>button.clear{padding:1px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+function trim(value) {
+    return typeof value === 'string' ? value.trim() || null : value;
+}
+
+/*
+ * 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 SciTableHeaderComponent {
+    table = inject(ɵSCI_TABLE);
+    onMouseWheel(event) {
+        // Prevent vertical scrolling on header, but not horizontal scrolling.
+        if (!event.shiftKey) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableHeaderComponent, isStandalone: true, selector: "sci-table-header", host: { listeners: { "wheel": "onMouseWheel($event)" } }, ngImport: i0, template: "@let table = this.table();\n\n@if (table.showHeader()) {\n  @for (column of table.columns(); track column.name) {\n    <sci-column-header [column]=\"column\"/>\n  }\n}\n@if (table.filterable()) {\n  @for (column of table.columns(); track column.name) {\n    <sci-column-filter [column]=\"column\"/>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:subgrid;grid-auto-rows:var(--sci-table-header-height);background-color:var(--sci-table-header-background-color);border-bottom:var(--\\275sci-table-border-size) solid var(--\\275sci-table-border-color);-webkit-user-select:none;user-select:none}@container style(--\\275sci-column-header-visible: true){:host{grid-template-rows:minmax(var(--sci-table-header-height),auto)}}:host>sci-column-filter:first-of-type{grid-column:1}@container style(--\\275sci-table-resizing: true){:host{pointer-events:none}}:host:empty{display:none}\n"], dependencies: [{ kind: "component", type: SciColumnHeaderComponent, selector: "sci-column-header", inputs: ["column"] }, { kind: "component", type: SciColumnFilterComponent, selector: "sci-column-filter", inputs: ["column"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-table-header', host: {
+                        '(wheel)': 'onMouseWheel($event)',
+                    }, imports: [
+                        SciColumnHeaderComponent,
+                        SciColumnFilterComponent,
+                    ], template: "@let table = this.table();\n\n@if (table.showHeader()) {\n  @for (column of table.columns(); track column.name) {\n    <sci-column-header [column]=\"column\"/>\n  }\n}\n@if (table.filterable()) {\n  @for (column of table.columns(); track column.name) {\n    <sci-column-filter [column]=\"column\"/>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:subgrid;grid-auto-rows:var(--sci-table-header-height);background-color:var(--sci-table-header-background-color);border-bottom:var(--\\275sci-table-border-size) solid var(--\\275sci-table-border-color);-webkit-user-select:none;user-select:none}@container style(--\\275sci-column-header-visible: true){:host{grid-template-rows:minmax(var(--sci-table-header-height),auto)}}:host>sci-column-filter:first-of-type{grid-column:1}@container style(--\\275sci-table-resizing: true){:host{pointer-events:none}}:host:empty{display:none}\n"] }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * @experimental since 22.3.0; API and behavior may change in any version without notice.
+ */
+class SciTableComponent {
+    /**
+     * Specifies a unique table identifier, used as the key for storing user preferences.
+     */
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the table definition and datasource.
+     */
+    table = input.required({ ...(ngDevMode ? { debugName: "table" } : /* istanbul ignore next */ {}), transform: (table) => table });
+    /**
+     * Emits when the user double-clicks a row or presses `Enter` on selected rows.
+     */
+    primaryAction = output();
+    _viewport = viewChild.required(SciTableViewportComponent, { ...(ngDevMode ? { debugName: "_viewport" } : /* istanbul ignore next */ {}), read: ElementRef });
+    _viewportClient = viewChild.required(SciTableGridComponent, { ...(ngDevMode ? { debugName: "_viewportClient" } : /* istanbul ignore next */ {}), read: ElementRef });
+    _tableHeader = viewChild(SciTableHeaderComponent, { ...(ngDevMode ? { debugName: "_tableHeader" } : /* istanbul ignore next */ {}), read: ElementRef });
+    _tableBody = viewChild.required(SciTableBodyComponent, { ...(ngDevMode ? { debugName: "_tableBody" } : /* istanbul ignore next */ {}), read: ElementRef });
+    _itemSizeSyntheticElement = viewChild.required('item_size_synthetic_element', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_itemSizeSyntheticElement" }] : /* istanbul ignore next */ []));
+    _cellPaddingSyntheticElement = viewChild.required('cell_padding_synthetic_element', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cellPaddingSyntheticElement" }] : /* istanbul ignore next */ []));
+    rows = viewChildren(SciTableRowComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.connectToModel();
+        this.scrollActiveRowIntoViewport();
+    }
+    onRowPrimaryAction(event) {
+        this.primaryAction.emit(event);
+    }
+    onRetry() {
+        this.table().reset();
+    }
+    connectToModel() {
+        const viewportDimension = dimension(this._viewport);
+        const viewportClientDimension = dimension(this._viewportClient);
+        const tableHeaderDimension = dimension(this._tableHeader);
+        const tableBodyDimension = dimension(this._tableBody);
+        const cellPadding = dimension(this._cellPaddingSyntheticElement);
+        const itemSizeDimension = dimension(this._itemSizeSyntheticElement);
+        effect(onCleanup => {
+            const name = this.name();
+            const table = this.table();
+            const viewport = this._viewport().nativeElement;
+            untracked(() => {
+                table.connect(name, {
+                    viewport: viewport,
+                    viewportHeight: computed(() => viewportDimension().clientHeight - (tableHeaderDimension()?.offsetHeight ?? 0)),
+                    viewportWidth: computed(() => viewportDimension().clientWidth),
+                    viewportClientHeight: computed(() => viewportClientDimension().offsetHeight),
+                    viewportClientWidth: computed(() => tableBodyDimension().offsetWidth), // Use `table-body` instead of `table-grid` because `table-grid` has `min-width: 100%`, thus never shrinking below viewport width.
+                    cellPadding: computed(() => cellPadding().clientWidth),
+                    headerHeight: computed(() => tableHeaderDimension()?.offsetHeight ?? 0),
+                    itemHeight: computed(() => itemSizeDimension().offsetHeight),
+                    scrollToTop: () => viewport.scrollTo({ top: 0 }),
+                });
+                onCleanup(() => table.disconnect());
+            });
+        });
+    }
+    scrollActiveRowIntoViewport() {
+        effect(() => {
+            const activeRow = this.table().activeRow();
+            if (!activeRow) {
+                return;
+            }
+            untracked(() => {
+                const viewport = this._viewport().nativeElement;
+                const viewportHeight = this.table().tableViewRef()?.viewportHeight() ?? 0;
+                const itemHeight = this.table().tableViewRef()?.itemHeight() ?? 0;
+                const activeRowTop = activeRow.index * itemHeight;
+                const activeRowBottom = activeRowTop + itemHeight;
+                const scrollTop = viewport.scrollTop;
+                const scrollBottom = scrollTop + viewportHeight;
+                if (activeRowTop < scrollTop) {
+                    viewport.scrollTop = activeRowTop;
+                }
+                else if (activeRowBottom > scrollBottom) {
+                    viewport.scrollTop = activeRowBottom - viewportHeight;
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableComponent, isStandalone: true, selector: "sci-table", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { primaryAction: "primaryAction" }, host: { properties: { "attr.name": "name()", "style.--\u0275sci-table-scrolling": "table().scrolling() ? `true` : null", "style.--\u0275sci-table-resizing": "table().resizing() ? `true` : null" } }, providers: [
+            provideSciTable(),
+            SciTableSelectionService,
+        ], viewQueries: [{ propertyName: "_viewport", first: true, predicate: SciTableViewportComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_viewportClient", first: true, predicate: SciTableGridComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_tableHeader", first: true, predicate: SciTableHeaderComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_tableBody", first: true, predicate: SciTableBodyComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_itemSizeSyntheticElement", first: true, predicate: ["item_size_synthetic_element"], descendants: true, isSignal: true }, { propertyName: "_cellPaddingSyntheticElement", first: true, predicate: ["cell_padding_synthetic_element"], descendants: true, isSignal: true }, { propertyName: "rows", predicate: SciTableRowComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let table = this.table();\n\n<sci-table-viewport #viewport>\n  <sci-table-grid>\n    <!-- Table header -->\n    @if (table.showHeader() || table.filterable()) {\n      <sci-table-header/>\n    }\n\n    <!-- Table body -->\n    <sci-table-body sciTableKeyboardNavigator>\n      @if (!table.error()) {\n        <!-- Track index to reuse the table row elements -->\n        @for (row of table.rows(); track $index) {\n          <sci-table-row [row]=\"row\" (primaryAction)=\"onRowPrimaryAction($event)\" [sciAttributes]=\"row.bindings?.attributes()\"/>\n        } @empty {\n          <span class=\"message e2e-no-data\">{{('%scion.components.no_items.message' | sciText)()}}</span>\n        }\n      } @else {\n        <span class=\"message e2e-datasource\">\n          {{('%scion.components.datasource_error.message' | sciText)()}}\n\n          <button (click)=\"onRetry()\" class=\"action e2e-datasource-retry\">\n            <!-- TODO [dwi] Replace with SCION icon -->\n            <sci-icon>refresh</sci-icon>\n            <span>{{('%scion.components.retry.label' | sciText)()}}</span>\n          </button>\n        </span>\n      }\n\n      <!-- Render active row outline separately to preserve row border-radius within block selection. -->\n      @if (table.activeRow()) {\n        <div class=\"active-row-outline e2e-active-row-outline\"></div>\n      }\n    </sci-table-body>\n\n    <!-- Render column splitters. -->\n    <sci-table-columns [rows]=\"rows()\"/>\n  </sci-table-grid>\n</sci-table-viewport>\n\n<!-- Scrollbars -->\n<sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport.host\"/>\n<sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport.host\"/>\n\n@if (table.loading()) {\n  <sci-throbber type=\"spinner\"/>\n}\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-row-height`, relative to the table's font size if em-based. -->\n<div class=\"synthetic item-size\" #item_size_synthetic_element></div>\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-cell-padding-inline`, relative to the table's font size if em-based. -->\n<div class=\"synthetic cell-padding\" #cell_padding_synthetic_element></div>\n", styles: ["@charset \"UTF-8\";:host{display:block;overflow:hidden;--\\275sci-table-border-size: 1px;--\\275sci-table-border-color: var(--sci-color-border)}:host:is(:not(:hover):not(:active),:host(:not(:hover):not(:active))) sci-scrollbar:not(.scrolling){opacity:0}:host>sci-table-viewport{display:block;position:relative;height:100%;overflow:auto;scrollbar-width:none;isolation:isolate;box-sizing:border-box;anchor-name:--sci-table-viewport}:host>sci-table-viewport:has(sci-table-header){--\\275sci-table-header-visible: true}:host>sci-table-viewport:has(sci-table-header>sci-column-header){--\\275sci-column-header-visible: true}:host>sci-table-viewport:has(~sci-scrollbar.scrolling){--\\275sci-table-scrolling: true}:host>sci-table-viewport>sci-table-grid{display:grid;grid-template-columns:var(--\\275sci-table-columns, repeat(auto-fit, 100px)) 0;grid-auto-rows:min-content;grid-template-rows:min-content 1fr;width:min-content;min-width:100%;min-height:100%}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid{grid-template-rows:1fr}}:host>sci-table-viewport>sci-table-grid>sci-table-header{z-index:1;grid-row:1;grid-column:1/-1;position:sticky;top:0}:host>sci-table-viewport>sci-table-grid>sci-table-body{anchor-name:--sci-table-body;grid-row:2}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid>sci-table-body{grid-row:1}}:host>sci-table-viewport>sci-table-grid>sci-table-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;grid-auto-rows:var(--sci-table-row-height);outline:none;padding-top:var(--\\275sci-table-virtual-scroll-offset-top);padding-bottom:var(--\\275sci-table-virtual-scroll-offset-bottom)}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row{grid-column:1/-1}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row[data-active]{anchor-name:--sci-table-active-row}:host>sci-table-viewport>sci-table-grid>sci-table-body>div.active-row-outline{position:absolute;top:anchor(--sci-table-active-row top);right:anchor(--sci-table-active-row right);bottom:anchor(--sci-table-active-row bottom);left:anchor(--sci-table-active-row left);border:var(--sci-table-row-outline-width) var(--sci-table-row-outline-style) var(--sci-table-row-outline-color);border-radius:var(--sci-table-row-border-radius);pointer-events:none}:host>sci-table-viewport>sci-table-grid>sci-table-body:not(:has(sci-table-row[data-active]))>div.active-row-outline{display:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{grid-column:1/-1;grid-row:auto/span 2;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:1em;-webkit-user-select:none;user-select:none;white-space:nowrap;color:var(--sci-color-text-subtle)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message:has(button.action){grid-row:auto/span 4}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus:not(:focus-visible){outline:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:disabled{color:var(--sci-button-text-color-disabled)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{border:1px solid var(--sci-color-border);padding:.25em 1em}@container style(--\\275sci-table-viewport-client-width > --\\275sci-table-viewport-width){:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{position:sticky;left:50%;right:50%;width:0}}:host>sci-table-viewport>sci-table-grid>sci-table-body:has(>span.message){z-index:2}:host>sci-table-viewport>sci-table-grid>sci-table-columns{grid-area:1/1/-1/-1;z-index:1;position:sticky;top:0;max-height:var(--\\275sci-table-viewport-height)}:host>sci-scrollbar{position:absolute}:host>sci-scrollbar[direction=vscroll]{top:calc(anchor(--sci-table-body top) + 2px);right:calc(anchor(--sci-table-viewport right) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 2px)}:host>sci-scrollbar[direction=hscroll]{left:calc(anchor(--sci-table-viewport left) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 1px);right:calc(anchor(--sci-table-viewport right) + 2px)}@container style(--\\275sci-table-resizing: true){:host>sci-scrollbar{pointer-events:none}}:host>sci-throbber{--sci-throbber-size: 16px;position:absolute;top:calc(anchor(--sci-table-viewport top) + .5em);right:calc(anchor(--sci-table-viewport right) + .5em)}:host>div.synthetic{position:absolute;pointer-events:none;visibility:hidden}:host>div.synthetic.item-size{height:var(--sci-table-row-height)}:host>div.synthetic.cell-padding{width:var(--sci-table-cell-padding-inline)}\n"], dependencies: [{ kind: "component", type: SciTableViewportComponent, selector: "sci-table-viewport" }, { kind: "component", type: SciTableHeaderComponent, selector: "sci-table-header" }, { kind: "component", type: SciTableGridComponent, selector: "sci-table-grid" }, { kind: "component", type: SciTableBodyComponent, selector: "sci-table-body" }, { kind: "component", type: SciTableRowComponent, selector: "sci-table-row", inputs: ["row"], outputs: ["primaryAction"] }, { kind: "component", type: SciTableColumnsComponent, selector: "sci-table-columns", inputs: ["rows"] }, { kind: "directive", type: SciTableKeyboardNavigatorDirective, selector: "[sciTableKeyboardNavigator]" }, { kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "component", type: SciThrobberComponent, selector: "sci-throbber", inputs: ["type"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "pipe", type: SciTextPipe, name: "sciText" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-table', encapsulation: ViewEncapsulation.ShadowDom, host: {
+                        '[attr.name]': 'name()', // Public API: Enables selecting the table by name in CSS (also if the table has a dynamic name input binding)
+                        '[style.--ɵsci-table-scrolling]': 'table().scrolling() ? `true` : null',
+                        '[style.--ɵsci-table-resizing]': 'table().resizing() ? `true` : null',
+                    }, imports: [
+                        SciTableViewportComponent,
+                        SciTableHeaderComponent,
+                        SciTableGridComponent,
+                        SciTableBodyComponent,
+                        SciTableRowComponent,
+                        SciTableColumnsComponent,
+                        SciTableKeyboardNavigatorDirective,
+                        SciAttributesDirective,
+                        SciScrollbarComponent,
+                        SciTextPipe,
+                        SciThrobberComponent,
+                        SciIconComponent,
+                    ], providers: [
+                        provideSciTable(),
+                        SciTableSelectionService,
+                    ], template: "@let table = this.table();\n\n<sci-table-viewport #viewport>\n  <sci-table-grid>\n    <!-- Table header -->\n    @if (table.showHeader() || table.filterable()) {\n      <sci-table-header/>\n    }\n\n    <!-- Table body -->\n    <sci-table-body sciTableKeyboardNavigator>\n      @if (!table.error()) {\n        <!-- Track index to reuse the table row elements -->\n        @for (row of table.rows(); track $index) {\n          <sci-table-row [row]=\"row\" (primaryAction)=\"onRowPrimaryAction($event)\" [sciAttributes]=\"row.bindings?.attributes()\"/>\n        } @empty {\n          <span class=\"message e2e-no-data\">{{('%scion.components.no_items.message' | sciText)()}}</span>\n        }\n      } @else {\n        <span class=\"message e2e-datasource\">\n          {{('%scion.components.datasource_error.message' | sciText)()}}\n\n          <button (click)=\"onRetry()\" class=\"action e2e-datasource-retry\">\n            <!-- TODO [dwi] Replace with SCION icon -->\n            <sci-icon>refresh</sci-icon>\n            <span>{{('%scion.components.retry.label' | sciText)()}}</span>\n          </button>\n        </span>\n      }\n\n      <!-- Render active row outline separately to preserve row border-radius within block selection. -->\n      @if (table.activeRow()) {\n        <div class=\"active-row-outline e2e-active-row-outline\"></div>\n      }\n    </sci-table-body>\n\n    <!-- Render column splitters. -->\n    <sci-table-columns [rows]=\"rows()\"/>\n  </sci-table-grid>\n</sci-table-viewport>\n\n<!-- Scrollbars -->\n<sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport.host\"/>\n<sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport.host\"/>\n\n@if (table.loading()) {\n  <sci-throbber type=\"spinner\"/>\n}\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-row-height`, relative to the table's font size if em-based. -->\n<div class=\"synthetic item-size\" #item_size_synthetic_element></div>\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-cell-padding-inline`, relative to the table's font size if em-based. -->\n<div class=\"synthetic cell-padding\" #cell_padding_synthetic_element></div>\n", styles: ["@charset \"UTF-8\";:host{display:block;overflow:hidden;--\\275sci-table-border-size: 1px;--\\275sci-table-border-color: var(--sci-color-border)}:host:is(:not(:hover):not(:active),:host(:not(:hover):not(:active))) sci-scrollbar:not(.scrolling){opacity:0}:host>sci-table-viewport{display:block;position:relative;height:100%;overflow:auto;scrollbar-width:none;isolation:isolate;box-sizing:border-box;anchor-name:--sci-table-viewport}:host>sci-table-viewport:has(sci-table-header){--\\275sci-table-header-visible: true}:host>sci-table-viewport:has(sci-table-header>sci-column-header){--\\275sci-column-header-visible: true}:host>sci-table-viewport:has(~sci-scrollbar.scrolling){--\\275sci-table-scrolling: true}:host>sci-table-viewport>sci-table-grid{display:grid;grid-template-columns:var(--\\275sci-table-columns, repeat(auto-fit, 100px)) 0;grid-auto-rows:min-content;grid-template-rows:min-content 1fr;width:min-content;min-width:100%;min-height:100%}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid{grid-template-rows:1fr}}:host>sci-table-viewport>sci-table-grid>sci-table-header{z-index:1;grid-row:1;grid-column:1/-1;position:sticky;top:0}:host>sci-table-viewport>sci-table-grid>sci-table-body{anchor-name:--sci-table-body;grid-row:2}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid>sci-table-body{grid-row:1}}:host>sci-table-viewport>sci-table-grid>sci-table-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;grid-auto-rows:var(--sci-table-row-height);outline:none;padding-top:var(--\\275sci-table-virtual-scroll-offset-top);padding-bottom:var(--\\275sci-table-virtual-scroll-offset-bottom)}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row{grid-column:1/-1}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row[data-active]{anchor-name:--sci-table-active-row}:host>sci-table-viewport>sci-table-grid>sci-table-body>div.active-row-outline{position:absolute;top:anchor(--sci-table-active-row top);right:anchor(--sci-table-active-row right);bottom:anchor(--sci-table-active-row bottom);left:anchor(--sci-table-active-row left);border:var(--sci-table-row-outline-width) var(--sci-table-row-outline-style) var(--sci-table-row-outline-color);border-radius:var(--sci-table-row-border-radius);pointer-events:none}:host>sci-table-viewport>sci-table-grid>sci-table-body:not(:has(sci-table-row[data-active]))>div.active-row-outline{display:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{grid-column:1/-1;grid-row:auto/span 2;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:1em;-webkit-user-select:none;user-select:none;white-space:nowrap;color:var(--sci-color-text-subtle)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message:has(button.action){grid-row:auto/span 4}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus:not(:focus-visible){outline:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:disabled{color:var(--sci-button-text-color-disabled)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{border:1px solid var(--sci-color-border);padding:.25em 1em}@container style(--\\275sci-table-viewport-client-width > --\\275sci-table-viewport-width){:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{position:sticky;left:50%;right:50%;width:0}}:host>sci-table-viewport>sci-table-grid>sci-table-body:has(>span.message){z-index:2}:host>sci-table-viewport>sci-table-grid>sci-table-columns{grid-area:1/1/-1/-1;z-index:1;position:sticky;top:0;max-height:var(--\\275sci-table-viewport-height)}:host>sci-scrollbar{position:absolute}:host>sci-scrollbar[direction=vscroll]{top:calc(anchor(--sci-table-body top) + 2px);right:calc(anchor(--sci-table-viewport right) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 2px)}:host>sci-scrollbar[direction=hscroll]{left:calc(anchor(--sci-table-viewport left) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 1px);right:calc(anchor(--sci-table-viewport right) + 2px)}@container style(--\\275sci-table-resizing: true){:host>sci-scrollbar{pointer-events:none}}:host>sci-throbber{--sci-throbber-size: 16px;position:absolute;top:calc(anchor(--sci-table-viewport top) + .5em);right:calc(anchor(--sci-table-viewport right) + .5em)}:host>div.synthetic{position:absolute;pointer-events:none;visibility:hidden}:host>div.synthetic.item-size{height:var(--sci-table-row-height)}:host>div.synthetic.cell-padding{width:var(--sci-table-cell-padding-inline)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], primaryAction: [{ type: i0.Output, args: ["primaryAction"] }], _viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciTableViewportComponent), { ...{ read: ElementRef }, isSignal: true }] }], _viewportClient: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciTableGridComponent), { ...{ read: ElementRef }, isSignal: true }] }], _tableHeader: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciTableHeaderComponent), { ...{ read: ElementRef }, isSignal: true }] }], _tableBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciTableBodyComponent), { ...{ read: ElementRef }, isSignal: true }] }], _itemSizeSyntheticElement: [{ type: i0.ViewChild, args: ['item_size_synthetic_element', { isSignal: true }] }], _cellPaddingSyntheticElement: [{ type: i0.ViewChild, args: ['cell_padding_synthetic_element', { isSignal: true }] }], rows: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SciTableRowComponent), { isSignal: true }] }] } });
+function provideSciTable() {
+    return {
+        provide: ɵSCI_TABLE,
+        useFactory: () => inject(SciTableComponent).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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SciTableComponent, provideTableRowBinding, provideTableStorage, table, ɵillegaldatasource };
+//# sourceMappingURL=scion-components-table.mjs.map