@testgorilla/tgo-ui 11.2.2 → 11.3.0

package/fesm2022/testgorilla-tgo-ui-components-infinite-scroll-table.mjs

@@ -1,143 +1,155 @@
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
-import { NgTemplateOutlet, CommonModule } from '@angular/common';
+import { NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, viewChild, signal, computed, effect, untracked, isDevMode, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { input, booleanAttribute, numberAttribute, output, viewChild, signal, computed, effect, untracked, isDevMode, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Subscription, animationFrameScheduler } from 'rxjs';
+import { auditTime } from 'rxjs/operators';
 import { CheckboxComponent } from '@testgorilla/tgo-ui/components/checkbox';
+import { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
 import { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';
 
-/** Default number of skeleton rows rendered for the initial (full-body) load. */
 const DEFAULT_FIRST_LOAD_SKELETON_COUNT = 10;
-/** Number of skeleton rows appended below existing rows while the next page is fetched. */
-const LOAD_MORE_SKELETON_COUNT = 3;
-/** Default distance (in rows) from the end at which `loadMore` fires. */
+const DEFAULT_LOAD_MORE_SKELETON_COUNT = 3;
 const DEFAULT_LOAD_MORE_THRESHOLD = 5;
-/** Fixed width (px) of the checkbox selection column. Must match `.ui-ist__cell--checkbox` in the SCSS. */
-const CHECKBOX_COLUMN_WIDTH = 56;
 /**
- * A generic, virtualized table with scroll-driven infinite loading.
- *
- * Owns rendering, fixed-height vertical virtualization (CDK), horizontal scroll, a pinned header,
- * sticky first/last columns, first-load and load-more skeletons, and a guarded `loadMore` event.
- * All content and layout come from consumer inputs — nothing domain-specific lives here.
- *
- * Independent of `ui-table`: it reuses only stable leaf primitives (`ui-skeleton`) and duplicates
- * the column/context type shapes so consumers can migrate with a selector swap.
+ * Fallback width for a column that declares none, shared with placeholder columns so both resolve to one
+ * identical width — header/body alignment depends on that.
+ */
+const DEFAULT_COLUMN_WIDTH = '160px';
+/** Elements owning their own click semantics: a click inside one must not also activate the row. */
+const INTERACTIVE_TARGET_SELECTOR = 'a, button, input, select, textarea, [role="button"], [tabindex]';
+/**
+ * A generic, virtualized table with scroll-driven infinite loading. Independent of `ui-table`: it reuses
+ * only stable leaf primitives (`ui-skeleton`) and duplicates the column/context type shapes so consumers
+ * can migrate with a selector swap.
  */
 class InfiniteScrollTableComponent {
     constructor() {
-        /** Rows loaded so far. The consumer appends pages to this array. */
-        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-        /** Column definitions. The first `isSticky` column pins left; the last `isSticky` column pins right. */
-        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         /**
-         * Fixed row height in px — used as the virtualization `itemSize`.
-         * Variable / multi-line row heights are unsupported in this variant.
+         * Rows loaded so far. **Must change by reference** (`[...rows, ...page]`): a signal input cannot observe
+         * `rows.push(...)`, so an in-place append renders nothing and leaves `loadMore` disarmed.
          */
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Fixed row height in px (the virtualization `itemSize`). Variable row heights are unsupported. */
         this.rowHeight = input.required(...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
-        /** Optional stable row identity so recycled rows re-render correctly. Takes precedence over `rowIdKey`. */
+        /** Stable row identity so recycled rows re-render correctly. Takes precedence over `rowIdKey`. */
         this.trackBy = input(...(ngDevMode ? [undefined, { debugName: "trackBy" }] : /* istanbul ignore next */ []));
-        /** Optional key on each row that holds a stable id. Used when `trackBy` is not provided. */
+        /** Key on each row holding a stable id. Used when `trackBy` is not provided. */
         this.rowIdKey = input(...(ngDevMode ? [undefined, { debugName: "rowIdKey" }] : /* istanbul ignore next */ []));
         /**
-         * Accepted for API parity with `ui-table`. In this bounded layout the header is always rendered
-         * above the internal scroll region and stays visible regardless — `.ui-ist` has `overflow: hidden`,
-         * so the header cannot stick to an outer scrolling page. Kept so `ui-table` templates migrate
-         * unchanged. Default `true`.
+         * CDK's rendered buffers. Both default to a multiple of `rowHeight` (~5 and ~10 rows) rather than a
+         * fixed px value, which would mean a different row count at every `rowHeight`.
          */
-        this.stickyHeader = input(true, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.minBufferPx = input(undefined, ...(ngDevMode ? [{ debugName: "minBufferPx" }] : /* istanbul ignore next */ []));
+        this.maxBufferPx = input(undefined, ...(ngDevMode ? [{ debugName: "maxBufferPx" }] : /* istanbul ignore next */ []));
         /** Max height of the internal scroll region (e.g. `'70vh'`). The body shrinks to fit fewer rows. */
         this.maxHeight = input('70vh', ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
-        /** Condensed spacing. */
+        /** Stretch to the parent's height instead of the content's; `maxHeight` becomes a cap, not the target. */
+        this.fillHeight = input(false, { ...(ngDevMode ? { debugName: "fillHeight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isCondensed = input(false, { ...(ngDevMode ? { debugName: "isCondensed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Enables row selection. When `true`, a dedicated checkbox column is prepended (pinned to the left)
-         * and each row's checkbox reflects the row's `selected` property; toggling it emits `selectionChange`.
-         * Selection stays data-driven and consumer-managed, exactly like `ui-table`. Default `false`.
+         * Prepends a left-pinned checkbox column driven by each row's `selected` property. Consumer-managed
+         * (like `ui-table`): toggling only emits `selectionChange`.
          */
         this.selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Makes rows focusable and activatable by click or Enter/Space. Off by default: a read-only table
+         * must not create a tab stop per rendered row or imply interactivity it does not have.
+         */
+        this.rowsClickable = input(false, { ...(ngDevMode ? { debugName: "rowsClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** First-load state: renders a full body of skeleton rows. */
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Appends skeleton rows below the existing rows while the next page is fetched. */
         this.loadingMore = input(false, { ...(ngDevMode ? { debugName: "loadingMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Whether more pages exist. When `false`, `loadMore` never fires and the load-more skeleton is hidden. */
-        this.hasMore = input(false, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Number of skeleton rows for the first-load state. */
+        /** Required, not defaulted: a silent "never load" default would disable the headline behaviour. */
+        this.hasMore = input.required({ ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.skeletonRowCount = input(DEFAULT_FIRST_LOAD_SKELETON_COUNT, ...(ngDevMode ? [{ debugName: "skeletonRowCount" }] : /* istanbul ignore next */ []));
-        /** How many rows from the end trigger `loadMore`. */
+        /** Number of skeleton rows appended below the loaded rows while `loadingMore` is true. */
+        this.loadMoreSkeletonCount = input(DEFAULT_LOAD_MORE_SKELETON_COUNT, ...(ngDevMode ? [{ debugName: "loadMoreSkeletonCount" }] : /* istanbul ignore next */ []));
+        /**
+         * Skeleton placeholder columns for a lazily-loaded column set. They deliberately sit OUTSIDE `columns`,
+         * so they cannot change which column is last and unpin a sticky last column.
+         */
+        this.loadingColumnCount = input(0, { ...(ngDevMode ? { debugName: "loadingColumnCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.loadMoreThreshold = input(DEFAULT_LOAD_MORE_THRESHOLD, ...(ngDevMode ? [{ debugName: "loadMoreThreshold" }] : /* istanbul ignore next */ []));
-        /** Empty-state template, shown when `data` is empty and not loading. */
+        /** Shown when `data` is empty and not loading. */
         this.noDataTemplate = input(...(ngDevMode ? [undefined, { debugName: "noDataTemplate" }] : /* istanbul ignore next */ []));
-        /** Error template, shown when `error` is `true`. Receives `{ $implicit: retry, retry }` as context. */
+        /** Shown when `error` is `true`. Receives `{ $implicit: retry, retry }` as context. */
         this.errorTemplate = input(...(ngDevMode ? [undefined, { debugName: "errorTemplate" }] : /* istanbul ignore next */ []));
-        /** Whether a page fetch failed. */
         this.error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Fires when the user scrolls within `loadMoreThreshold` rows of the end.
-         * Guarded: emits only when `hasMore && !loading && !loadingMore`, and only once per approach.
+         * Shown once `hasMore` goes `false` with rows loaded. Deliberately has NO built-in fallback (unlike
+         * `noDataTemplate` / `errorTemplate`): a single-page list would otherwise flash "no more results".
          */
+        this.endOfListTemplate = input(...(ngDevMode ? [undefined, { debugName: "endOfListTemplate" }] : /* istanbul ignore next */ []));
+        /** Guarded: only when `hasMore && !loading && !loadingMore`, and only once per approach to the end. */
         this.loadMore = output();
-        /** Fires from the error template's retry affordance. */
         this.retry = output();
-        /** Fires when a data row is clicked; payload is the row plus its data index. */
         this.rowClick = output();
-        /**
-         * Fires when a row's selection checkbox is toggled (only when `selectable`). Payload is the row,
-         * its data index, and the new selected state. The consumer updates its data's `selected` property.
-         */
+        /** The consumer is expected to apply `selected` back onto its own data. */
         this.selectionChange = output();
-        /** Fixed width of the checkbox column; exposed so the template can offset a sticky first column. */
-        this.checkboxColumnWidth = CHECKBOX_COLUMN_WIDTH;
         this.viewport = viewChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
         this.headerScroll = viewChild('headerScroll', ...(ngDevMode ? [{ debugName: "headerScroll" }] : /* istanbul ignore next */ []));
-        /** Horizontal-scroll state, mirroring the existing table's `scrollSettings`. */
         this.scrollStart = signal(true, ...(ngDevMode ? [{ debugName: "scrollStart" }] : /* istanbul ignore next */ []));
         this.scrollEnd = signal(false, ...(ngDevMode ? [{ debugName: "scrollEnd" }] : /* istanbul ignore next */ []));
         this.horizontalScroll = signal(false, ...(ngDevMode ? [{ debugName: "horizontalScroll" }] : /* istanbul ignore next */ []));
-        /**
-         * Measured width (px) of the body viewport's vertical scrollbar. Reserved as right padding on the
-         * header so the header's content width exactly equals the body's, keeping every column — including
-         * the last — aligned between header and body regardless of browser/scrollbar behaviour.
-         */
+        /** Reserved as right padding on the header, so its content width exactly equals the body's. */
         this.scrollbarWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollbarWidth" }] : /* istanbul ignore next */ []));
+        /** Added to the viewport height so on a short list the scrollbar doesn't eat into the rows. */
+        this.hScrollbarHeight = signal(0, ...(ngDevMode ? [{ debugName: "hScrollbarHeight" }] : /* istanbul ignore next */ []));
         /**
-         * Measured height (px) of the body viewport's horizontal scrollbar. When a short list also has a
-         * horizontal scrollbar, this is added to the viewport height so the scrollbar doesn't eat into the
-         * rows' vertical space and force a spurious vertical scrollbar. Mirrors `scrollbarWidth`.
+         * Paging latch. Three fields, one rule: `loadMore` emits at most once per page that lands while the
+         * user is inside the trigger zone. `isLoadMoreArmed` is the latch itself, written here and by
+         * `checkLoadMore`; `dataLengthAtEmit` records how long `data` was when the last emission went out, so
+         * "the requested page arrived" is a length comparison rather than a guess about scroll positions;
+         * `firstVisibleIndex` is where the user actually is.
+         *
+         * The invariant that matters: arming and firing must read the SAME trigger zone. They used to derive it
+         * from two different thresholds, which opened bands the latch could never leave.
          */
-        this.hScrollbarHeight = signal(0, ...(ngDevMode ? [{ debugName: "hScrollbarHeight" }] : /* istanbul ignore next */ []));
-        /** Guards `loadMore` to a single emission per approach to the end. */
-        this.loadMoreArmed = true;
+        this.isLoadMoreArmed = true;
+        this.dataLengthAtEmit = 0;
+        /** In-place-mutation detector; see the effect that reads these for the discriminator. */
+        this.wasLoadingMore = false;
+        this.lastDataLength = 0;
+        /** Latches once any non-empty `data` is seen, so only the very first render is exempt from resetting. */
+        this.hasSeenHead = false;
+        /** Previous `loading` value, for spotting the false -> true edge that starts a reset. */
+        this.wasLoading = false;
         /**
-         * True when the browser can drive the header via a CSS scroll timeline (see the SCSS): the header
-         * then tracks the body's horizontal scroll on the compositor, with no per-frame main-thread work.
-         * In that case the JS `scrollLeft` sync is skipped so the offset isn't applied twice; it stays as
-         * the fallback for browsers without scroll-driven animations.
+         * First visible row index, kept current from `viewport.scrolledIndexChange` (no layout read) rather
+         * than `viewport.getRenderedRange().start`, which includes CDK's read-ahead buffer.
          */
-        this.usesScrollTimelineHeaderSync = typeof CSS !== 'undefined' &&
-            CSS !== null &&
-            typeof CSS.supports === 'function' &&
-            CSS.supports('animation-timeline: scroll()');
+        this.firstVisibleIndex = 0;
         this.skeletonTheme = {
-            background: '#F4F4F4',
+            background: 'var(--ui-ist-skeleton-bg)',
             'border-radius': '4px',
             height: '24px',
             'margin-bottom': '0',
         };
-        // Sticky rule mirrors ui-table (positional): the LAST column pins right when it's sticky; any other
-        // sticky column pins left. This way an actions column (always the last column) is always pinned to
-        // the right, even when it's the only sticky column.
-        this.lastStickyKey = computed(() => {
+        // Pinning is positional by contract: only the FIRST column pins left, only the LAST pins right.
+        // `isSticky` elsewhere is ignored (with a dev warning), not applied as `left: 0` — that would overlay
+        // the columns before it.
+        this.stickyStartKey = computed(() => {
             const columns = this.columns();
-            const lastColumn = columns[columns.length - 1];
-            return lastColumn?.isSticky ? lastColumn.key : undefined;
-        }, ...(ngDevMode ? [{ debugName: "lastStickyKey" }] : /* istanbul ignore next */ []));
-        this.firstStickyKey = computed(() => {
+            return columns[0]?.isSticky ? columns[0].key : undefined;
+        }, ...(ngDevMode ? [{ debugName: "stickyStartKey" }] : /* istanbul ignore next */ []));
+        this.stickyEndKey = computed(() => {
             const columns = this.columns();
             const lastIndex = columns.length - 1;
-            return columns.find((column, index) => column.isSticky && index !== lastIndex)?.key;
-        }, ...(ngDevMode ? [{ debugName: "firstStickyKey" }] : /* istanbul ignore next */ []));
-        /** Real rows, with skeleton placeholders in first-load / load-more states, as one virtual list. */
+            // `lastIndex > 0` so a single sticky column pins to the start, not the end.
+            return lastIndex > 0 && columns[lastIndex]?.isSticky ? columns[lastIndex].key : undefined;
+        }, ...(ngDevMode ? [{ debugName: "stickyEndKey" }] : /* istanbul ignore next */ []));
+        this.defaultColumnWidth = DEFAULT_COLUMN_WIDTH;
+        this.effectiveMinBufferPx = computed(() => this.minBufferPx() ?? this.rowHeight() * 5, ...(ngDevMode ? [{ debugName: "effectiveMinBufferPx" }] : /* istanbul ignore next */ []));
+        /**
+         * The `Math.max` is load-bearing: CDK throws in dev mode when `maxBufferPx < minBufferPx`, which a
+         * consumer triggers just by raising `minBufferPx` above the derived default.
+         */
+        this.effectiveMaxBufferPx = computed(() => Math.max(this.maxBufferPx() ?? this.rowHeight() * 10, this.effectiveMinBufferPx()), ...(ngDevMode ? [{ debugName: "effectiveMaxBufferPx" }] : /* istanbul ignore next */ []));
+        /** Stable keys for the placeholder columns, so `@for` can track them across renders. */
+        this.loadingColumns = computed(() => Array.from({ length: Math.max(0, this.loadingColumnCount()) }, (_, index) => `loading-column-${index}`), ...(ngDevMode ? [{ debugName: "loadingColumns" }] : /* istanbul ignore next */ []));
         this.renderRows = computed(() => {
             if (this.loading()) {
                 return Array.from({ length: Math.max(1, this.skeletonRowCount()) }, (_, i) => ({
@@ -147,89 +159,111 @@ class InfiniteScrollTableComponent {
             }
             const rows = this.data().map((item, index) => ({ kind: 'data', item, index }));
             if (this.loadingMore() && this.hasMore()) {
-                for (let i = 0; i < LOAD_MORE_SKELETON_COUNT; i++) {
+                for (let i = 0; i < Math.max(1, this.loadMoreSkeletonCount()); i++) {
                     rows.push({ kind: 'skeleton', id: `skeleton-more-${i}` });
                 }
             }
             return rows;
         }, ...(ngDevMode ? [{ debugName: "renderRows" }] : /* istanbul ignore next */ []));
         this.hasData = computed(() => this.data().length > 0, ...(ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []));
-        /** The virtualized body is shown for the first-load skeletons and whenever there are rows. */
         this.showViewport = computed(() => this.loading() || this.hasData(), ...(ngDevMode ? [{ debugName: "showViewport" }] : /* istanbul ignore next */ []));
-        this.showEmptyState = computed(() => !this.loading() && !this.error() && !this.hasData(), ...(ngDevMode ? [{ debugName: "showEmptyState" }] : /* istanbul ignore next */ []));
+        /**
+         * `loadingMore` counts as loading here too: a consumer that retries a failed first page through the same
+         * flag it uses for every page would otherwise render "no rows" with `aria-busy` set and the live region
+         * announcing a fetch.
+         */
+        this.showEmptyState = computed(() => !this.loading() && !this.loadingMore() && !this.error() && !this.hasData(), ...(ngDevMode ? [{ debugName: "showEmptyState" }] : /* istanbul ignore next */ []));
         this.showErrorState = computed(() => !this.loading() && this.error() && !this.hasData(), ...(ngDevMode ? [{ debugName: "showErrorState" }] : /* istanbul ignore next */ []));
         this.showErrorFooter = computed(() => !this.loading() && this.error() && this.hasData(), ...(ngDevMode ? [{ debugName: "showErrorFooter" }] : /* istanbul ignore next */ []));
         /**
-         * Viewport height shrinks to the content and is capped at `maxHeight` (CSS `min()` mixes units).
-         * When a horizontal scrollbar is present it reserves that scrollbar's measured height on top of the
-         * content, so a short list doesn't overflow and grow a spurious vertical scrollbar. Still capped at
-         * `maxHeight`.
+         * The negative clauses keep this out of slots other states own, and `!loadingMore()` closes a one-tick
+         * flash: a fetch completing and the consumer flipping `hasMore` need not land in the same cycle.
+         */
+        this.showEndOfList = computed(() => this.hasData() && !this.hasMore() && !this.loading() && !this.loadingMore() && !this.error(), ...(ngDevMode ? [{ debugName: "showEndOfList" }] : /* istanbul ignore next */ []));
+        /**
+         * CSS `min()` because the cap mixes units. The scrollbar reserve stops a short list from growing a
+         * spurious vertical scrollbar; fill mode returns `null` so flex owns the sizing and the reserve is moot.
          */
         this.viewportHeight = computed(() => {
+            if (this.fillHeight()) {
+                return null;
+            }
             const contentHeight = this.renderRows().length * this.rowHeight();
             const scrollbarReserve = this.horizontalScroll() ? this.hScrollbarHeight() : 0;
             return `min(${contentHeight + scrollbarReserve}px, ${this.maxHeight()})`;
         }, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
-        /** Screen-reader announcement for the busy states. */
-        this.statusMessage = computed(() => {
+        this.translationContext = 'INFINITE_SCROLL_TABLE.';
+        /** A translation key, resolved in the template: screen-reader users are not all English speakers. */
+        this.statusMessageKey = computed(() => {
             if (this.loading()) {
-                return 'Loading';
+                return `${this.translationContext}LOADING`;
             }
             if (this.loadingMore()) {
-                return 'Loading more rows';
+                return `${this.translationContext}LOADING_MORE`;
             }
             return '';
-        }, ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "statusMessageKey" }] : /* istanbul ignore next */ []));
         this.errorContext = {
-            $implicit: () => this.onRetry(),
-            retry: () => this.onRetry(),
+            $implicit: () => this.emitRetry(),
+            retry: () => this.emitRetry(),
         };
         this.renderRowTrackBy = (index, row) => {
             if (row.kind === 'skeleton') {
                 return row.id;
             }
-            const explicitTrackBy = this.trackBy();
-            if (explicitTrackBy) {
-                return explicitTrackBy(row.index, row.item);
-            }
-            const key = this.rowIdKey();
-            return key ? row.item[key] : row.index;
+            return this.rowIdentity(row.item, row.index);
         };
-        // (Re-)attach scroll listeners whenever the viewport enters or leaves the DOM (empty/error states).
-        // Keyed on `viewport()` only: the setup below reads other signals (through syncHorizontalScroll /
-        // checkLoadMore), so it runs inside `untracked()` to avoid re-running — and tearing down the
-        // subscriptions + ResizeObserver — on every data change or loading toggle.
+        // (Re-)attaches scroll listeners as the viewport enters or leaves the DOM. The setup reads other
+        // signals, so it is `untracked()` — otherwise every data change would tear the listeners down.
         effect(onCleanup => {
             const viewport = this.viewport();
             if (!viewport) {
                 return;
             }
             untracked(() => {
+                // A freshly created CdkVirtualScrollViewport always mounts scrolled to the top, and this field
+                // carries across viewport instances (`@if (showViewport())` destroys and recreates one when `data`
+                // empties and repopulates). Leaving it stale would let `checkLoadMore` fire off a scroll position
+                // belonging to the OLD viewport.
+                this.firstVisibleIndex = 0;
                 const element = viewport.elementRef.nativeElement;
-                // CDK inserts a generic `.cdk-virtual-scroll-content-wrapper` between the viewport
-                // (role="rowgroup") and the rows (role="row"). Mark it presentational so the rows stay
-                // owned by the rowgroup and the table's ARIA tree isn't broken for assistive tech.
+                // Both patch CDK divs that would otherwise break the ARIA table structure: its content wrapper
+                // sits between `role="rowgroup"` and the rows, its spacer is an unlabeled child of the rowgroup.
+                // Both selectors are CDK internals, so the optional chaining would swallow a CDK restructure
+                // silently. The spec asserts both attributes after mount, which is what turns such a change into a
+                // failing test rather than a quietly invalid accessibility tree.
                 element.querySelector('.cdk-virtual-scroll-content-wrapper')?.setAttribute('role', 'presentation');
+                element.querySelector('.cdk-virtual-scroll-spacer')?.setAttribute('aria-hidden', 'true');
                 const subscription = new Subscription();
-                subscription.add(viewport.elementScrolled().subscribe(() => this.syncHorizontalScroll()));
+                // Audited to one animation frame, matching CDK's own scroll handler, so `measureScrollOffset`'s
+                // forced reflow can't run several times per frame and interleave with CDK's DOM writes.
+                subscription.add(viewport
+                    .elementScrolled()
+                    .pipe(auditTime(0, animationFrameScheduler))
+                    .subscribe(() => this.syncHorizontalScroll()));
+                // Neither trigger is redundant: an append changes the rendered range without a scroll, and a scroll
+                // inside the read-ahead buffer moves `firstVisibleIndex` without changing the range.
                 subscription.add(viewport.renderedRangeStream.subscribe(() => this.checkLoadMore()));
-                // Keep the measured scrollbar dimensions current: they change when a scrollbar appears or
-                // disappears (content grows/shrinks) and on viewport resize.
+                subscription.add(viewport.scrolledIndexChange.subscribe(index => {
+                    this.firstVisibleIndex = index;
+                    this.checkLoadMore();
+                }));
+                // `offsetWidth - clientWidth` also counts borders: pure scrollbar only because `.ui-ist__body`
+                // has none, and it must stay borderless.
                 const measureScrollbar = () => {
                     this.scrollbarWidth.set(element.offsetWidth - element.clientWidth);
                     this.hScrollbarHeight.set(element.offsetHeight - element.clientHeight);
-                    this.updateHeaderScrollMetric();
                 };
                 subscription.add(viewport.renderedRangeStream.subscribe(() => measureScrollbar()));
-                // The viewport element's box can also change from things no signal captures — a flex/grid
-                // parent resizing, or a relative `maxHeight` (e.g. `70vh`) reacting to a container change.
-                // CDK caches its measured size, so re-measure the virtual viewport on any box change or it
-                // under-renders (empty tail band). The signal-driven height changes are covered by the
-                // dedicated effect below; this catches the rest.
+                // Covers box changes no signal captures: a flex parent resizing, or a relative `maxHeight`
+                // reacting to its container. Signal-driven height changes are the effect below.
                 let resizeObserver;
                 if (typeof ResizeObserver !== 'undefined') {
                     resizeObserver = new ResizeObserver(() => {
                         measureScrollbar();
+                        // A resize can cross into or out of horizontal overflow without a scroll event, leaving the
+                        // sticky shadows and `viewportHeight()`'s scrollbar reserve stale.
+                        this.syncHorizontalScroll();
                         this.scheduleViewportRemeasure();
                     });
                     resizeObserver.observe(element);
@@ -237,9 +271,8 @@ class InfiniteScrollTableComponent {
                 measureScrollbar();
                 this.syncHorizontalScroll();
                 this.checkLoadMore();
-                // The first syncHorizontalScroll() runs before the CDK viewport lays out its rows, so the
-                // overflow measurement (and the sticky end-shadow) is stale. Re-sync after the next frame,
-                // once layout is settled. Guarded because requestAnimationFrame is browser-only (SSR).
+                // The sync above runs before CDK lays out its rows, so the overflow measurement is stale until
+                // the next frame. Guarded because requestAnimationFrame is browser-only (SSR).
                 let scrollSyncFrame;
                 if (typeof requestAnimationFrame !== 'undefined') {
                     scrollSyncFrame = requestAnimationFrame(() => this.syncHorizontalScroll());
@@ -247,8 +280,7 @@ class InfiniteScrollTableComponent {
                 onCleanup(() => {
                     subscription.unsubscribe();
                     resizeObserver?.disconnect();
-                    // Cancel still-pending frames so they can't fire after the viewport leaves the DOM
-                    // (e.g. flipping to the empty/error state in the same tick).
+                    // Pending frames must not fire after the viewport leaves the DOM.
                     if (scrollSyncFrame !== undefined) {
                         cancelAnimationFrame(scrollSyncFrame);
                     }
@@ -259,31 +291,31 @@ class InfiniteScrollTableComponent {
                 });
             });
         });
-        // Re-measure the CDK viewport whenever its height changes from a signal: data growth (more render
-        // rows), a runtime `rowHeight` change (also changes total content height), or a `maxHeight` change.
-        // `CdkVirtualScrollViewport` caches its measured size and only re-measures on scroll or window
-        // resize, so a runtime height increase would otherwise leave the extra space empty with the tail
-        // rows unrendered until a manual scroll/resize. Reading these signals (not `viewportHeight()`)
-        // keeps the dependency to genuine height inputs and off horizontal-scroll state.
+        // CDK caches its measured size and re-measures only on scroll or window resize, so any signal-driven
+        // height change here (`fillHeight` included: it swaps the `min()` cap for a flex-driven height) would
+        // leave the new space empty with the tail rows unrendered. Read individually rather than via
+        // `viewportHeight()`, to keep the dependency off horizontal-scroll state. `loadingColumnCount` changes
+        // content WIDTH not the box, so the ResizeObserver misses it and only the deferred
+        // `syncHorizontalScroll()` keeps the horizontal-overflow state current.
         effect(() => {
             this.renderRows();
             this.rowHeight();
             this.maxHeight();
             this.columns();
+            this.fillHeight();
+            this.loadingColumnCount();
+            // Adds a 56px checkbox column: content width changes, the box does not.
+            this.selectable();
             this.scheduleViewportRemeasure();
         });
-        // Re-arm the loadMore guard whenever the `data` input changes — a page arrived, or the set was
-        // replaced (filter/search reset, even to a shorter or same-length list). It reads `data()` only,
-        // NOT `loadingMore()`: a failed fetch clears `loadingMore` without changing `data`, so the guard
-        // stays disarmed and never re-fires `loadMore` in a loop (the `error()` guard is a second layer).
+        // A `data` change is the one signal that a requested page landed, so it is where the latch gets its
+        // second chance. See `rearmLoadMoreIfUnreachable` for which cases that covers and why.
         effect(() => {
             this.data();
-            this.loadMoreArmed = true;
+            untracked(() => this.rearmLoadMoreIfUnreachable());
         });
-        // Dev-only: without `trackBy` or `rowIdKey`, row identity falls back to the data index — the
-        // weakest option exactly when rows recycle. If the consumer opts into selection without a stable
-        // id, surface the sharp edge so selection state can't silently attach to the wrong row after a
-        // reorder/prepend.
+        // Dev-only: with selection on and no stable id, identity falls back to the data index, so selection
+        // state can silently attach to the wrong row after a reorder/prepend.
         effect(() => {
             if (isDevMode() && this.selectable() && !this.trackBy() && !this.rowIdKey()) {
                 console.warn('[ui-infinite-scroll-table] `selectable` is enabled without `trackBy` or `rowIdKey`. ' +
@@ -291,65 +323,172 @@ class InfiniteScrollTableComponent {
                     'when rows are reordered or prepended. Provide `trackBy` or `rowIdKey` for stable identity.');
             }
         });
+        // Dev-only: `isSticky` reads like a per-column capability, so name the columns being ignored.
+        effect(() => {
+            if (!isDevMode()) {
+                return;
+            }
+            const columns = this.columns();
+            const lastIndex = columns.length - 1;
+            const ignored = columns
+                .filter((column, index) => column.isSticky && index !== 0 && index !== lastIndex)
+                .map(column => column.key);
+            if (ignored.length > 0) {
+                console.warn('[ui-infinite-scroll-table] `isSticky` is only honoured on the first and last column. ' +
+                    `Ignoring it on: ${ignored.join(', ')}.`);
+            }
+        });
+        // Dev-only: the in-place-append tell is a fetch completing with the SAME array reference AND a GROWN
+        // length. Length is the discriminator — a failed or empty final fetch keeps the reference but not the
+        // growth, and those are legitimate outcomes that must stay silent.
+        effect(() => {
+            const loadingMore = this.loadingMore();
+            const data = this.data();
+            const completedFetch = this.wasLoadingMore && !loadingMore;
+            const sameReference = this.lastDataReference === data;
+            const grew = data.length > this.lastDataLength;
+            this.wasLoadingMore = loadingMore;
+            this.lastDataReference = data;
+            this.lastDataLength = data.length;
+            if (isDevMode() && completedFetch && sameReference && grew) {
+                console.warn('[ui-infinite-scroll-table] `loadingMore` completed without `data` changing reference. ' +
+                    'Append pages with a new array (`[...rows, ...page]`) — a signal input cannot observe an ' +
+                    'in-place `push`, so the new rows will not render and `loadMore` will not fire again.');
+            }
+        });
+        // Two ways a reset is recognised. Entering `loading` is the earlier and better one: the body becomes
+        // skeletons, so the scroll belongs at the top immediately, and by the time the data lands there is
+        // nothing left to jump. The head-identity check then covers a replacement swapped in WITHOUT a loading
+        // pass — that one needs `trackBy` or `rowIdKey`, since the index fallback makes the head always `0`.
+        // Caveat: a newest-first feed that PREPENDS also resets; those consumers should call `scrollToTop()`.
+        effect(onCleanup => {
+            onCleanup(() => this.cancelResetScrollFrame());
+            const data = this.data();
+            const loading = this.loading();
+            const startedLoading = loading && !this.wasLoading;
+            this.wasLoading = loading;
+            const headIdentity = data.length > 0 ? untracked(() => this.rowIdentity(data[0], 0)) : undefined;
+            const replaced = this.hasSeenHead && data.length > 0 && headIdentity !== this.previousHeadIdentity;
+            this.previousHeadIdentity = headIdentity;
+            // Latches once and never clears: a reset usually passes through empty + `loading`, which keeps the
+            // viewport (and its scroll offset) alive, so clearing here would make the repopulation look like a
+            // first render and skip the reset.
+            this.hasSeenHead = this.hasSeenHead || data.length > 0;
+            if (!startedLoading && !replaced) {
+                // A shrink that isn't recognised as a replacement still strands the index past the new end, where
+                // it reads as "at the bottom" and fires `loadMore` for a list the user hasn't seen.
+                this.firstVisibleIndex = Math.min(this.firstVisibleIndex, Math.max(0, data.length - 1));
+                return;
+            }
+            // Synchronously, ahead of the deferred scroll: CDK updates its rendered range for the new length
+            // during this change detection, and that runs `checkLoadMore` while the index still points into the
+            // old, longer list.
+            this.firstVisibleIndex = 0;
+            // Deferred a frame: CDK clamps a scroll request against the size it has already measured. Tracked so
+            // it can be cancelled — a frame must not fire after the viewport leaves the DOM.
+            if (typeof requestAnimationFrame === 'undefined') {
+                untracked(() => this.scrollToTop());
+                return;
+            }
+            this.cancelResetScrollFrame();
+            this.resetScrollFrame = requestAnimationFrame(() => {
+                this.resetScrollFrame = undefined;
+                untracked(() => this.scrollToTop());
+            });
+        });
     }
-    getCellValue(item, key) {
-        return item[key];
+    cancelResetScrollFrame() {
+        if (this.resetScrollFrame !== undefined) {
+            cancelAnimationFrame(this.resetScrollFrame);
+            this.resetScrollFrame = undefined;
+        }
+    }
+    /** No-ops only when no rows are rendered: the empty state, or an error with no rows. */
+    scrollToIndex(index, behavior = 'auto') {
+        this.viewport()?.scrollToIndex(index, behavior);
+    }
+    scrollToTop(behavior = 'auto') {
+        this.viewport()?.scrollToIndex(0, behavior);
     }
     /**
-     * The single authoritative width for a column: its declared width, else its min-width, else the
-     * default. The template applies this identically as `flex-basis`, `min-width` AND `max-width` (with
-     * `flex-grow:0; flex-shrink:0; overflow:hidden`) to the header cell and every body cell, so a column
-     * is exactly this width in both containers — content is clipped and can never widen it. This is what
-     * keeps header and body columns aligned end-to-end regardless of cell content or horizontal scroll.
+     * The single place `T` is widened to its structural contract. Every field read on a row goes through
+     * here, so the assertion exists once instead of at each call site.
      */
+    asRowLike(item) {
+        return item;
+    }
+    getCellValue(item, key) {
+        return this.asRowLike(item)[key];
+    }
+    /** Applied as `flex-basis`, `min-width` AND `max-width` on header and body cells alike — see the SCSS. */
     columnWidth(column) {
-        return column.styles?.width ?? column.styles?.['min-width'] ?? '160px';
+        return column.styles?.width ?? DEFAULT_COLUMN_WIDTH;
     }
-    onRowClick(row) {
-        if (row.kind !== 'data') {
+    emitRowClick(event, row) {
+        if (!this.rowsClickable() || row.kind !== 'data') {
+            return;
+        }
+        if (this.isInteractiveTarget(event) || this.hasTextSelection()) {
             return;
         }
-        this.rowClick.emit({ ...row.item, index: row.index });
+        this.rowClick.emit({ row: row.item, index: row.index });
     }
-    /**
-     * Whether a row should show the selected highlight. Mirrors `ui-table`: only when `selectable` is
-     * enabled and the row's data carries a truthy `selected` property. Skeleton rows are never selected.
-     */
     isRowSelected(row) {
-        return this.selectable() && row.kind === 'data' && Boolean(row.item.selected);
+        return this.selectable() && row.kind === 'data' && Boolean(this.asRowLike(row.item).selected);
     }
-    /** Emits the new selection state when a row's checkbox is toggled. Consumer-managed, like `ui-table`. */
-    onSelectionToggle(row, selected) {
+    emitSelectionChange(row, selected) {
         if (row.kind !== 'data') {
             return;
         }
-        this.selectionChange.emit({
-            ...row.item,
-            index: row.index,
-            selected,
-        });
+        this.selectionChange.emit({ row: row.item, index: row.index, selected });
+    }
+    /** Reads `--ui-ist-checkbox-width` so the offset cannot drift from the checkbox column's own width. */
+    stickyStartLeft(column) {
+        if (column.key !== this.stickyStartKey()) {
+            return null;
+        }
+        return this.selectable() ? 'var(--ui-ist-checkbox-width)' : '0px';
     }
     /**
-     * Left offset (px) for a sticky-start consumer column: when the checkbox column is present it must
-     * sit to the right of it, so the first sticky column is pushed over by the checkbox column width.
+     * Only the outermost start-pinned cell may cast the sticky shadow: the checkbox cell is pinned too, and
+     * shadowing both would drop a shadow across the column beside it.
      */
-    stickyStartOffset(column) {
-        return this.selectable() && column.key === this.firstStickyKey() ? this.checkboxColumnWidth : null;
+    isStickyStartEdge(column) {
+        return column.key === this.stickyStartKey();
     }
-    /** Keyboard equivalent of a row click (Enter/Space) for the currently focused data row. */
-    onRowActivate(event, row) {
+    activateRow(event, row) {
+        if (!this.rowsClickable() || row.kind !== 'data') {
+            return;
+        }
+        if (this.isInteractiveTarget(event)) {
+            return;
+        }
+        // Only after the guards, so a non-clickable table never swallows page-scroll-by-space.
         event.preventDefault();
-        this.onRowClick(row);
+        this.rowClick.emit({ row: row.item, index: row.index });
+    }
+    /** A clickable row matches `[tabindex]` itself, so `currentTarget` must be excluded explicitly. */
+    isInteractiveTarget(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return false;
+        }
+        const interactive = target.closest(INTERACTIVE_TARGET_SELECTOR);
+        return interactive !== null && interactive !== event.currentTarget;
+    }
+    /** Whether the user is selecting text, in which case a click is a selection gesture, not activation. */
+    hasTextSelection() {
+        const selection = typeof window !== 'undefined' ? window.getSelection() : null;
+        return Boolean(selection && !selection.isCollapsed && selection.toString().length > 0);
     }
     /**
-     * Re-measure the CDK virtual viewport after its box may have changed. Deferred to the next frame so
-     * it reads the settled layout and never fires a "ResizeObserver loop limit exceeded" warning when
-     * driven from the ResizeObserver; repeated triggers coalesce to a single measure. The re-measure is
-     * what makes CDK recompute the rendered range to fill a viewport whose height grew at runtime.
+     * Deferred a frame to read the settled layout and never trip "ResizeObserver loop limit exceeded";
+     * repeated triggers coalesce to one measure.
      */
     scheduleViewportRemeasure() {
         if (typeof requestAnimationFrame === 'undefined') {
             this.viewport()?.checkViewportSize();
+            this.settleLoadMore();
             return;
         }
         if (this.remeasureFrame !== undefined) {
@@ -357,26 +496,42 @@ class InfiniteScrollTableComponent {
         }
         this.remeasureFrame = requestAnimationFrame(() => {
             this.remeasureFrame = undefined;
-            // `viewport()` is null in the empty/error states and after teardown, so this safely no-ops.
             this.viewport()?.checkViewportSize();
-            this.updateHeaderScrollMetric();
+            this.syncHorizontalScroll();
+            this.settleLoadMore();
         });
     }
-    updateHeaderScrollMetric() {
-        if (!this.usesScrollTimelineHeaderSync) {
-            return;
-        }
-        const headerScroll = this.headerScroll()?.nativeElement;
-        if (!headerScroll) {
-            return;
-        }
-        const maxScroll = Math.max(0, headerScroll.scrollWidth - headerScroll.clientWidth);
-        headerScroll.style.setProperty('--ui-ist-header-scroll-max', `${maxScroll}px`);
+    /**
+     * The third `checkLoadMore` trigger, and the only one that survives a page landing without a rendered-range
+     * change. CDK emits a range only when the virtual-for LENGTH changes, so a page whose row count exactly
+     * replaces the load-more skeletons (`data + skeletons` before, `data` after) moves nothing CDK watches —
+     * and when the new rows add no scrollable height, no scroll event can ever arrive either. Runs after the
+     * re-measure so the zone is tested against the size CDK just settled on.
+     */
+    settleLoadMore() {
+        this.rearmLoadMoreIfUnreachable();
+        this.checkLoadMore();
     }
-    onRetry() {
+    emitRetry() {
         this.retry.emit();
     }
-    /** Keep the header horizontally aligned with the body and update the sticky-shadow state. */
+    /**
+     * The index fallback is identity-in-name-only — it cannot tell rows apart after a reorder — which is why
+     * the automatic scroll reset cannot work without `trackBy` or `rowIdKey`.
+     */
+    rowIdentity(item, index) {
+        const explicitTrackBy = this.trackBy();
+        if (explicitTrackBy) {
+            return explicitTrackBy(index, item);
+        }
+        const key = this.rowIdKey();
+        return key ? this.asRowLike(item)[key] : index;
+    }
+    /**
+     * Assigning an absolute `scrollLeft` is drift-free by construction: it self-corrects every scroll event
+     * and the browser clamps when the header's maximum is momentarily smaller. A progress-normalized CSS
+     * scroll-timeline cannot guarantee that, which is why it was removed — do not reintroduce one.
+     */
     syncHorizontalScroll() {
         const viewport = this.viewport();
         if (!viewport) {
@@ -385,7 +540,8 @@ class InfiniteScrollTableComponent {
         const left = viewport.measureScrollOffset('left');
         const right = viewport.measureScrollOffset('right');
         const header = this.headerScroll();
-        if (header && !this.usesScrollTimelineHeaderSync) {
+        if (header) {
+            // Rounded: columns are pixel-identical, so a sub-pixel offset misaligns every one of them.
             header.nativeElement.scrollLeft = Math.round(left);
         }
         this.scrollStart.set(left <= 1);
@@ -393,13 +549,62 @@ class InfiniteScrollTableComponent {
         this.horizontalScroll.set(left + right > 1);
     }
     /**
-     * Emits `loadMore` once when the rendered range reaches the trigger zone near the end,
-     * re-arming when the user scrolls back out. Mirrors the app's `ngx-infinite-scroll` semantics.
+     * How many rows the viewport shows. Zero until CDK has measured, which callers must treat as
+     * "unknown" rather than "none".
+     */
+    visibleRowCount() {
+        return Math.ceil((this.viewport()?.getViewportSize() ?? 0) / this.rowHeight());
+    }
+    /**
+     * Rows from the end that count as "approaching it". Capped at a screenful: a threshold wider than the
+     * viewport cannot mean approaching, and uncapped it made the zone unleavable at every scroll position,
+     * which is how an oversized `loadMoreThreshold` used to walk a whole dataset unattended. Clamped at 0 so
+     * a negative value can't push the trigger point past the end and disable paging outright.
      */
+    triggerZoneRows(visibleRows) {
+        const threshold = Math.max(0, this.loadMoreThreshold());
+        // Capped only once the viewport is measured — before that there is no screenful to compare against,
+        // and capping at 0 would silently disable paging on the first pass.
+        return visibleRows > 0 ? Math.min(threshold, visibleRows) : threshold;
+    }
+    /**
+     * The rendered range includes CDK's read-ahead buffer, so measuring it conflates the user reaching the
+     * end with CDK merely pre-rendering it. The visible end has no such slack, so it tracks the user's
+     * actual scroll position instead.
+     */
+    isInTriggerZone(dataLength, visibleRows) {
+        return this.firstVisibleIndex + visibleRows >= dataLength - this.triggerZoneRows(visibleRows);
+    }
+    /**
+     * Re-arms the latch when something other than scrolling has to do it. Two cases, both of which used to
+     * be terminal stalls:
+     *
+     * - **The requested page landed.** `data` grew past its length at the last emission, so that emission is
+     *   spent. Without this, re-arming needed the user to scroll *out* of the zone and back — impossible when
+     *   the page was smaller than the threshold, and impossible to even attempt when the new rows added no
+     *   scrollable height.
+     * - **The zone can't be left.** `visibleEnd` bottoms out at `visibleRows`, so while that floor sits
+     *   inside the zone no amount of scrolling re-arms anything. Also covers a not-yet-measured viewport,
+     *   which must count as unleavable or the first fill never starts.
+     *
+     * Deliberately not driven by `loadingMore` or `error`: a failed fetch clears `loadingMore` without
+     * growing `data`, and must stay disarmed rather than re-fire in a loop.
+     */
+    rearmLoadMoreIfUnreachable() {
+        const dataLength = this.data().length;
+        const visibleRows = this.visibleRowCount();
+        if (dataLength > this.dataLengthAtEmit) {
+            this.isLoadMoreArmed = true;
+            return;
+        }
+        if (visibleRows === 0 || visibleRows >= dataLength - this.triggerZoneRows(visibleRows)) {
+            this.isLoadMoreArmed = true;
+        }
+    }
+    /** Emits at most once per page that lands while the user is inside the trigger zone. */
     checkLoadMore() {
         const viewport = this.viewport();
-        // `error()` is part of the guard so a failed page pauses auto-loading until the consumer clears
-        // the error (e.g. via the retry affordance), instead of immediately re-firing `loadMore`.
+        // `error()` pauses auto-loading until the consumer clears it, rather than instantly re-firing.
         if (!viewport || !this.hasMore() || this.loading() || this.loadingMore() || this.error()) {
             return;
         }
@@ -407,34 +612,34 @@ class InfiniteScrollTableComponent {
         if (dataLength === 0) {
             return;
         }
-        const renderedEnd = viewport.getRenderedRange().end;
-        // Clamp so a negative threshold can't push the trigger point past the end and silently disable
-        // loadMore entirely.
-        const threshold = Math.max(0, this.loadMoreThreshold());
-        const inTriggerZone = renderedEnd >= dataLength - threshold;
-        if (!inTriggerZone) {
-            this.loadMoreArmed = true;
+        if (!this.isInTriggerZone(dataLength, this.visibleRowCount())) {
+            this.isLoadMoreArmed = true;
             return;
         }
-        if (this.loadMoreArmed) {
-            this.loadMoreArmed = false;
+        if (this.isLoadMoreArmed) {
+            this.isLoadMoreArmed = false;
+            this.dataLengthAtEmit = dataLength;
             this.loadMore.emit();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "ui-infinite-scroll-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, isCondensed: { classPropertyName: "isCondensed", publicName: "isCondensed", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null }, loadMoreThreshold: { classPropertyName: "loadMoreThreshold", publicName: "loadMoreThreshold", isSignal: true, isRequired: false, transformFunction: null }, noDataTemplate: { classPropertyName: "noDataTemplate", publicName: "noDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore", retry: "retry", rowClick: "rowClick", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ui-ist\"\n  role=\"table\"\n  [class.ui-ist--condensed]=\"isCondensed()\"\n  [class.ui-ist--scrolled-start]=\"!scrollStart()\"\n  [class.ui-ist--scrolled-end]=\"horizontalScroll() && !scrollEnd()\"\n  [attr.aria-rowcount]=\"hasMore() ? -1 : data().length + 1\"\n  [attr.aria-busy]=\"loading() || loadingMore()\"\n>\n  <!-- Header: a separate element above the viewport. It never scrolls vertically (stays pinned).\n       The outer element reserves the body's vertical-scrollbar width as right padding, so the reserved\n       strip keeps the header background and bottom border; the inner element carries the horizontal\n       scrollLeft synced from the body so columns stay aligned. -->\n  <div\n    class=\"ui-ist__header\"\n    [class.ui-ist__header--sticky]=\"stickyHeader()\"\n    [style.padding-right.px]=\"scrollbarWidth()\"\n    role=\"presentation\"\n  >\n    <div #headerScroll class=\"ui-ist__header-scroll\" role=\"presentation\">\n      <div class=\"ui-ist__row ui-ist__row--header\" role=\"row\" aria-rowindex=\"1\">\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"columnheader\"\n          ></div>\n        }\n        @for (column of columns(); track column.key; let colIndex = $index) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header\"\n            role=\"columnheader\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (column.headerCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ column.title }}</span>\n            }\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Body: the CDK viewport owns BOTH vertical (virtualized) and horizontal scroll, so sticky\n       columns pin against it and the horizontal scrollbar sits at the viewport bottom. -->\n  @if (showViewport()) {\n    <cdk-virtual-scroll-viewport\n      class=\"ui-ist__body\"\n      role=\"rowgroup\"\n      [itemSize]=\"rowHeight()\"\n      [style.height]=\"viewportHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of renderRows(); let rowIndex = index; trackBy: renderRowTrackBy\"\n        class=\"ui-ist__row\"\n        role=\"row\"\n        [class.ui-ist__row--clickable]=\"row.kind === 'data'\"\n        [class.ui-ist__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-selected]=\"isRowSelected(row) ? true : null\"\n        [attr.aria-rowindex]=\"row.kind === 'data' ? row.index + 2 : null\"\n        [attr.aria-hidden]=\"row.kind === 'skeleton' ? true : null\"\n        [attr.tabindex]=\"row.kind === 'data' ? 0 : null\"\n        [style.height.px]=\"rowHeight()\"\n        (click)=\"onRowClick(row)\"\n        (keydown.enter)=\"onRowActivate($event, row)\"\n        (keydown.space)=\"onRowActivate($event, row)\"\n      >\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"cell\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"\n          >\n            @if (row.kind === 'data') {\n              <ui-checkbox\n                [checked]=\"isRowSelected(row)\"\n                [ariaLabel]=\"'Select row ' + (row.index + 1)\"\n                (changed)=\"onSelectionToggle(row, $event)\"\n              ></ui-checkbox>\n            }\n          </div>\n        }\n        @for (column of columns(); track column.key) {\n          <div\n            class=\"ui-ist__cell\"\n            role=\"cell\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (row.kind === 'skeleton') {\n              <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n            } @else if (column.rowCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: row.item, rowIndex: row.index }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ getCellValue(row.item, column.key) }}</span>\n            }\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- Empty and error states render the consumer template in-frame below the header, mirroring how\n       ui-table drops `noDataRowTpl` into the table body. Mid-scroll errors sit below the loaded rows. -->\n  @if (showErrorFooter() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showErrorState() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showEmptyState() && noDataTemplate(); as emptyTpl) {\n    <div class=\"ui-ist__state\">\n      <ng-container *ngTemplateOutlet=\"emptyTpl\"></ng-container>\n    </div>\n  }\n\n  <span class=\"ui-ist__sr-only\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</span>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}.ui-ist{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff}.ui-ist__header{flex:0 0 auto;box-sizing:border-box;overflow:hidden;border-bottom:1px solid #e0e0e0;background:#fff}.ui-ist__header--sticky{position:sticky;top:0;z-index:3}.ui-ist__header-scroll{overflow:hidden}@supports (animation-timeline: scroll()){.ui-ist{timeline-scope:--ui-ist-header-x}.ui-ist__body{scroll-timeline:--ui-ist-header-x x}.ui-ist__row--header .ui-ist__cell--header:not(.ui-ist__cell--sticky-start):not(.ui-ist__cell--sticky-end){animation:ui-ist-header-follow linear both;animation-timeline:--ui-ist-header-x}}@keyframes ui-ist-header-follow{to{transform:translate(calc(-1 * var(--ui-ist-header-scroll-max, 0px)))}}.ui-ist__body{flex:1 1 auto;overflow:auto;scrollbar-width:auto}.ui-ist__body::-webkit-scrollbar{width:8px;height:8px}.ui-ist__body::-webkit-scrollbar-button{display:none}.ui-ist__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:4px}.ui-ist__body::-webkit-scrollbar-track:hover{background-color:#00000026}.ui-ist__row{display:flex;width:max-content;min-width:100%;box-sizing:border-box}.ui-ist__row--header{min-height:56px}.ui-ist__row:not(.ui-ist__row--header){border-bottom:1px solid #d3d3d3}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover{background:#fff2fc}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover .ui-ist__cell{background:#fff2fc}.ui-ist__row--selected .ui-ist__cell{background:#f4f4f4}.ui-ist__cell{flex-grow:0;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;min-width:160px;padding:8px 24px;font-size:14px;line-height:20px;overflow:hidden;background:#fff}.ui-ist__cell--header{background:#fff;font-weight:700;font-size:14px;line-height:16px}.ui-ist__cell--right{justify-content:flex-end;text-align:right}.ui-ist__cell--center{justify-content:center;text-align:center}.ui-ist__cell--sticky-start{position:sticky;left:0;z-index:2}.ui-ist__cell--sticky-end{position:sticky;right:0;z-index:2;order:1}.ui-ist__cell--checkbox{flex:0 0 56px;min-width:56px;justify-content:center;padding:0}.ui-ist__cell--spacer{flex:1 1 auto;min-width:0;padding:0}.ui-ist__cell-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-ist__skeleton{display:block;width:100%}.ui-ist--scrolled-start .ui-ist__cell--sticky-start{box-shadow:24px 8px 24px #24242414}.ui-ist--scrolled-end .ui-ist__cell--sticky-end{box-shadow:0 8px 24px 4px #24242414}.ui-ist__state{padding:8px 24px;font-size:14px;line-height:20px}.ui-ist--condensed .ui-ist__cell{padding:8px 12px}.ui-ist--condensed .ui-ist__cell:first-child{padding-left:24px}.ui-ist--condensed .ui-ist__cell--sticky-end{padding-right:24px}.ui-ist--condensed .ui-ist__cell--spacer{padding:0}.ui-ist__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "ui-infinite-scroll-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillHeight: { classPropertyName: "fillHeight", publicName: "fillHeight", isSignal: true, isRequired: false, transformFunction: null }, isCondensed: { classPropertyName: "isCondensed", publicName: "isCondensed", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, rowsClickable: { classPropertyName: "rowsClickable", publicName: "rowsClickable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: true, transformFunction: null }, skeletonRowCount: { classPropertyName: "skeletonRowCount", publicName: "skeletonRowCount", isSignal: true, isRequired: false, transformFunction: null }, loadMoreSkeletonCount: { classPropertyName: "loadMoreSkeletonCount", publicName: "loadMoreSkeletonCount", isSignal: true, isRequired: false, transformFunction: null }, loadingColumnCount: { classPropertyName: "loadingColumnCount", publicName: "loadingColumnCount", isSignal: true, isRequired: false, transformFunction: null }, loadMoreThreshold: { classPropertyName: "loadMoreThreshold", publicName: "loadMoreThreshold", isSignal: true, isRequired: false, transformFunction: null }, noDataTemplate: { classPropertyName: "noDataTemplate", publicName: "noDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, endOfListTemplate: { classPropertyName: "endOfListTemplate", publicName: "endOfListTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadMore: "loadMore", retry: "retry", rowClick: "rowClick", selectionChange: "selectionChange" }, host: { properties: { "class.ui-ist--fill-host": "fillHeight()" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- role=\"table\", not \"grid\": row access is Tab-only with no arrow-key cell traversal, so \"grid\" would\n     promise 2D keyboard navigation this does not implement. Selection is conveyed by the row's checkbox,\n     not `aria-selected` \u2014 which is valid only on grid/treegrid anyway. -->\n<div\n  class=\"ui-ist\"\n  role=\"table\"\n  [class.ui-ist--condensed]=\"isCondensed()\"\n  [class.ui-ist--scrolled-start]=\"!scrollStart()\"\n  [class.ui-ist--scrolled-end]=\"horizontalScroll() && !scrollEnd()\"\n  [class.ui-ist--fill-height]=\"fillHeight()\"\n  [attr.aria-rowcount]=\"hasMore() ? -1 : data().length + 1\"\n  [attr.aria-busy]=\"loading() || loadingMore()\"\n>\n  <!-- Pinned header, outside the viewport so it never scrolls vertically. The outer element reserves the\n       body's scrollbar width as padding (keeping the background and border across that strip); the inner\n       one carries the horizontal scrollLeft synced from the body. -->\n  <div class=\"ui-ist__header\" [style.padding-right.px]=\"scrollbarWidth()\" role=\"presentation\">\n    <div #headerScroll class=\"ui-ist__header-scroll\" role=\"presentation\">\n      <div class=\"ui-ist__row ui-ist__row--header\" role=\"row\" aria-rowindex=\"1\">\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            [class.ui-ist__cell--sticky-start-edge]=\"!stickyStartKey()\"\n            role=\"columnheader\"\n          ></div>\n        }\n        @for (column of columns(); track column.key; let colIndex = $index) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header\"\n            role=\"columnheader\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === stickyStartKey()\"\n            [class.ui-ist__cell--sticky-start-edge]=\"isStickyStartEdge(column)\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === stickyEndKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left]=\"stickyStartLeft(column)\"\n          >\n            @if (column.headerCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ column.title }}</span>\n            }\n          </div>\n        }\n        @for (loadingKey of loadingColumns(); track loadingKey) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--loading\"\n            role=\"presentation\"\n            aria-hidden=\"true\"\n            [style.flex-basis]=\"defaultColumnWidth\"\n            [style.min-width]=\"defaultColumnWidth\"\n            [style.max-width]=\"defaultColumnWidth\"\n          >\n            <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- The CDK viewport owns BOTH vertical (virtualized) and horizontal scroll, so sticky columns pin\n       against it and the horizontal scrollbar sits at the viewport bottom. -->\n  @if (showViewport()) {\n    <cdk-virtual-scroll-viewport\n      class=\"ui-ist__body\"\n      role=\"rowgroup\"\n      [itemSize]=\"rowHeight()\"\n      [minBufferPx]=\"effectiveMinBufferPx()\"\n      [maxBufferPx]=\"effectiveMaxBufferPx()\"\n      [style.height]=\"viewportHeight()\"\n      [style.max-height]=\"fillHeight() ? maxHeight() : null\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of renderRows(); let rowIndex = index; trackBy: renderRowTrackBy\"\n        class=\"ui-ist__row\"\n        role=\"row\"\n        [class.ui-ist__row--clickable]=\"rowsClickable() && row.kind === 'data'\"\n        [class.ui-ist__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-rowindex]=\"row.kind === 'data' ? row.index + 2 : null\"\n        [attr.aria-hidden]=\"row.kind === 'skeleton' ? true : null\"\n        [attr.tabindex]=\"rowsClickable() && row.kind === 'data' ? 0 : null\"\n        [style.height.px]=\"rowHeight()\"\n        (click)=\"emitRowClick($event, row)\"\n        (keydown.enter)=\"activateRow($event, row)\"\n        (keydown.space)=\"activateRow($event, row)\"\n      >\n        @if (selectable()) {\n          <!-- This `stopPropagation` is what actually stops a checkbox click activating the row: it runs\n               before the click reaches the row's listener, so `isInteractiveTarget` is never consulted on\n               this path. That guard is a real second line of defence (`ui-checkbox` renders a focusable\n               wrapper and a native input, both matching INTERACTIVE_TARGET_SELECTOR), not a substitute. -->\n          <div\n            class=\"ui-ist__cell ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            [class.ui-ist__cell--sticky-start-edge]=\"!stickyStartKey()\"\n            role=\"cell\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"\n          >\n            @if (row.kind === 'data') {\n              <ui-checkbox\n                [checked]=\"isRowSelected(row)\"\n                [ariaLabel]=\"'Select row ' + (row.index + 1)\"\n                (changed)=\"emitSelectionChange(row, $event)\"\n              ></ui-checkbox>\n            }\n          </div>\n        }\n        @for (column of columns(); track column.key) {\n          <div\n            class=\"ui-ist__cell\"\n            role=\"cell\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === stickyStartKey()\"\n            [class.ui-ist__cell--sticky-start-edge]=\"isStickyStartEdge(column)\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === stickyEndKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left]=\"stickyStartLeft(column)\"\n          >\n            @if (row.kind === 'skeleton') {\n              <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n            } @else if (column.rowCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: row.item, rowIndex: row.index }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ getCellValue(row.item, column.key) }}</span>\n            }\n          </div>\n        }\n        @for (loadingKey of loadingColumns(); track loadingKey) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--loading\"\n            role=\"presentation\"\n            aria-hidden=\"true\"\n            [style.flex-basis]=\"defaultColumnWidth\"\n            [style.min-width]=\"defaultColumnWidth\"\n            [style.max-width]=\"defaultColumnWidth\"\n          >\n            <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- `showErrorFooter()` and `showErrorState()` differ only on `hasData()`, so they are mutually\n       exclusive and safe to merge here. Both fall back to a plain-language message, so a failed fetch is\n       never a silent blank box. -->\n  @if (showErrorFooter() || showErrorState()) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      @if (errorTemplate(); as errorTpl) {\n        <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n      } @else {\n        <span>{{ translationContext + 'LOAD_ERROR' | uiTranslate | async }}</span>\n      }\n    </div>\n  }\n\n  @if (showEmptyState()) {\n    <div class=\"ui-ist__state\">\n      @if (noDataTemplate(); as emptyTpl) {\n        <ng-container *ngTemplateOutlet=\"emptyTpl\"></ng-container>\n      } @else {\n        <span>{{ translationContext + 'NO_ROWS' | uiTranslate | async }}</span>\n      }\n    </div>\n  }\n\n  <!-- Opt-in, with no fallback (see `endOfListTemplate`). Not role=\"alert\": reaching the end is not an\n       alert, and `aria-rowcount` already conveys completeness to assistive tech. -->\n  @if (showEndOfList() && endOfListTemplate(); as endTpl) {\n    <div class=\"ui-ist__state\">\n      <ng-container *ngTemplateOutlet=\"endTpl\"></ng-container>\n    </div>\n  }\n\n  <span class=\"ui-ist__sr-only\" role=\"status\" aria-live=\"polite\">\n    @if (statusMessageKey(); as statusKey) {\n      {{ statusKey | uiTranslate | async }}\n    }\n  </span>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}.ui-ist{--ui-ist-checkbox-width: 56px;--ui-ist-skeleton-bg: #f4f4f4;display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff}.ui-ist__header{flex:0 0 auto;box-sizing:border-box;overflow:hidden;border-bottom:1px solid #e0e0e0;background:var(--ui-ist-header-bg, #ffffff)}.ui-ist__header-scroll{overflow:hidden}.ui-ist__body{flex:1 1 auto;overflow:auto;scrollbar-width:auto}.ui-ist__body::-webkit-scrollbar{width:8px;height:8px}.ui-ist__body::-webkit-scrollbar-button{display:none}.ui-ist__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:4px}.ui-ist__body::-webkit-scrollbar-track:hover{background-color:#00000026}.ui-ist__row{display:flex;width:max-content;min-width:100%;box-sizing:border-box}.ui-ist__row--header{min-height:56px}.ui-ist__row:not(.ui-ist__row--header){border-bottom:1px solid #d3d3d3}.ui-ist__row--clickable{cursor:pointer}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover{background:#fff2fc}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover .ui-ist__cell{background:#fff2fc}.ui-ist__row--selected .ui-ist__cell{background:#f4f4f4}.ui-ist__cell{flex-grow:0;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;padding:8px 24px;font-size:14px;line-height:20px;overflow:hidden;background:#fff}.ui-ist__cell--header{background:var(--ui-ist-header-bg, #ffffff);font-weight:700;font-size:14px;line-height:16px}.ui-ist__cell--right{justify-content:flex-end;text-align:right}.ui-ist__cell--center{justify-content:center;text-align:center}.ui-ist__cell--sticky-start{position:sticky;z-index:2}.ui-ist__cell--checkbox.ui-ist__cell--sticky-start{left:0}.ui-ist__cell--sticky-end{position:sticky;right:0;z-index:2;order:1}.ui-ist__cell--checkbox{flex:0 0 var(--ui-ist-checkbox-width);min-width:var(--ui-ist-checkbox-width);justify-content:center;padding:0}.ui-ist__cell--spacer{flex:1 1 auto;min-width:0;padding:0}.ui-ist__row--header .ui-ist__cell--spacer{background:var(--ui-ist-header-bg, #ffffff)}.ui-ist__cell-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-ist__skeleton{display:block;width:100%}.ui-ist--scrolled-start .ui-ist__cell--sticky-start-edge{box-shadow:24px 8px 24px #24242414}.ui-ist--scrolled-end .ui-ist__cell--sticky-end{box-shadow:0 8px 24px 4px #24242414}.ui-ist__state{padding:8px 24px;font-size:14px;line-height:20px}.ui-ist--condensed .ui-ist__cell{padding:8px 12px}.ui-ist--condensed .ui-ist__cell:first-child{padding-left:24px}.ui-ist--condensed .ui-ist__cell--sticky-end{padding-right:24px}.ui-ist--condensed .ui-ist__cell--spacer{padding:0}:host(.ui-ist--fill-host){height:100%}.ui-ist--fill-height{height:100%}.ui-ist--fill-height .ui-ist__body{min-height:0}.ui-ist__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-infinite-scroll-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'ui-infinite-scroll-table', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.ui-ist--fill-host]': 'fillHeight()',
+                    }, imports: [
+                        AsyncPipe,
                         NgTemplateOutlet,
                         CdkVirtualScrollViewport,
                         CdkFixedSizeVirtualScroll,
                         CdkVirtualForOf,
                         SkeletonComponent,
                         CheckboxComponent,
-                    ], template: "<div\n  class=\"ui-ist\"\n  role=\"table\"\n  [class.ui-ist--condensed]=\"isCondensed()\"\n  [class.ui-ist--scrolled-start]=\"!scrollStart()\"\n  [class.ui-ist--scrolled-end]=\"horizontalScroll() && !scrollEnd()\"\n  [attr.aria-rowcount]=\"hasMore() ? -1 : data().length + 1\"\n  [attr.aria-busy]=\"loading() || loadingMore()\"\n>\n  <!-- Header: a separate element above the viewport. It never scrolls vertically (stays pinned).\n       The outer element reserves the body's vertical-scrollbar width as right padding, so the reserved\n       strip keeps the header background and bottom border; the inner element carries the horizontal\n       scrollLeft synced from the body so columns stay aligned. -->\n  <div\n    class=\"ui-ist__header\"\n    [class.ui-ist__header--sticky]=\"stickyHeader()\"\n    [style.padding-right.px]=\"scrollbarWidth()\"\n    role=\"presentation\"\n  >\n    <div #headerScroll class=\"ui-ist__header-scroll\" role=\"presentation\">\n      <div class=\"ui-ist__row ui-ist__row--header\" role=\"row\" aria-rowindex=\"1\">\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"columnheader\"\n          ></div>\n        }\n        @for (column of columns(); track column.key; let colIndex = $index) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header\"\n            role=\"columnheader\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (column.headerCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ column.title }}</span>\n            }\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Body: the CDK viewport owns BOTH vertical (virtualized) and horizontal scroll, so sticky\n       columns pin against it and the horizontal scrollbar sits at the viewport bottom. -->\n  @if (showViewport()) {\n    <cdk-virtual-scroll-viewport\n      class=\"ui-ist__body\"\n      role=\"rowgroup\"\n      [itemSize]=\"rowHeight()\"\n      [style.height]=\"viewportHeight()\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of renderRows(); let rowIndex = index; trackBy: renderRowTrackBy\"\n        class=\"ui-ist__row\"\n        role=\"row\"\n        [class.ui-ist__row--clickable]=\"row.kind === 'data'\"\n        [class.ui-ist__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-selected]=\"isRowSelected(row) ? true : null\"\n        [attr.aria-rowindex]=\"row.kind === 'data' ? row.index + 2 : null\"\n        [attr.aria-hidden]=\"row.kind === 'skeleton' ? true : null\"\n        [attr.tabindex]=\"row.kind === 'data' ? 0 : null\"\n        [style.height.px]=\"rowHeight()\"\n        (click)=\"onRowClick(row)\"\n        (keydown.enter)=\"onRowActivate($event, row)\"\n        (keydown.space)=\"onRowActivate($event, row)\"\n      >\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            role=\"cell\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"\n          >\n            @if (row.kind === 'data') {\n              <ui-checkbox\n                [checked]=\"isRowSelected(row)\"\n                [ariaLabel]=\"'Select row ' + (row.index + 1)\"\n                (changed)=\"onSelectionToggle(row, $event)\"\n              ></ui-checkbox>\n            }\n          </div>\n        }\n        @for (column of columns(); track column.key) {\n          <div\n            class=\"ui-ist__cell\"\n            role=\"cell\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === firstStickyKey()\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === lastStickyKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left.px]=\"stickyStartOffset(column)\"\n          >\n            @if (row.kind === 'skeleton') {\n              <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n            } @else if (column.rowCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: row.item, rowIndex: row.index }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ getCellValue(row.item, column.key) }}</span>\n            }\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- Empty and error states render the consumer template in-frame below the header, mirroring how\n       ui-table drops `noDataRowTpl` into the table body. Mid-scroll errors sit below the loaded rows. -->\n  @if (showErrorFooter() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showErrorState() && errorTemplate(); as errorTpl) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n    </div>\n  }\n\n  @if (showEmptyState() && noDataTemplate(); as emptyTpl) {\n    <div class=\"ui-ist__state\">\n      <ng-container *ngTemplateOutlet=\"emptyTpl\"></ng-container>\n    </div>\n  }\n\n  <span class=\"ui-ist__sr-only\" role=\"status\" aria-live=\"polite\">{{ statusMessage() }}</span>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}.ui-ist{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff}.ui-ist__header{flex:0 0 auto;box-sizing:border-box;overflow:hidden;border-bottom:1px solid #e0e0e0;background:#fff}.ui-ist__header--sticky{position:sticky;top:0;z-index:3}.ui-ist__header-scroll{overflow:hidden}@supports (animation-timeline: scroll()){.ui-ist{timeline-scope:--ui-ist-header-x}.ui-ist__body{scroll-timeline:--ui-ist-header-x x}.ui-ist__row--header .ui-ist__cell--header:not(.ui-ist__cell--sticky-start):not(.ui-ist__cell--sticky-end){animation:ui-ist-header-follow linear both;animation-timeline:--ui-ist-header-x}}@keyframes ui-ist-header-follow{to{transform:translate(calc(-1 * var(--ui-ist-header-scroll-max, 0px)))}}.ui-ist__body{flex:1 1 auto;overflow:auto;scrollbar-width:auto}.ui-ist__body::-webkit-scrollbar{width:8px;height:8px}.ui-ist__body::-webkit-scrollbar-button{display:none}.ui-ist__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:4px}.ui-ist__body::-webkit-scrollbar-track:hover{background-color:#00000026}.ui-ist__row{display:flex;width:max-content;min-width:100%;box-sizing:border-box}.ui-ist__row--header{min-height:56px}.ui-ist__row:not(.ui-ist__row--header){border-bottom:1px solid #d3d3d3}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover{background:#fff2fc}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover .ui-ist__cell{background:#fff2fc}.ui-ist__row--selected .ui-ist__cell{background:#f4f4f4}.ui-ist__cell{flex-grow:0;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;min-width:160px;padding:8px 24px;font-size:14px;line-height:20px;overflow:hidden;background:#fff}.ui-ist__cell--header{background:#fff;font-weight:700;font-size:14px;line-height:16px}.ui-ist__cell--right{justify-content:flex-end;text-align:right}.ui-ist__cell--center{justify-content:center;text-align:center}.ui-ist__cell--sticky-start{position:sticky;left:0;z-index:2}.ui-ist__cell--sticky-end{position:sticky;right:0;z-index:2;order:1}.ui-ist__cell--checkbox{flex:0 0 56px;min-width:56px;justify-content:center;padding:0}.ui-ist__cell--spacer{flex:1 1 auto;min-width:0;padding:0}.ui-ist__cell-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-ist__skeleton{display:block;width:100%}.ui-ist--scrolled-start .ui-ist__cell--sticky-start{box-shadow:24px 8px 24px #24242414}.ui-ist--scrolled-end .ui-ist__cell--sticky-end{box-shadow:0 8px 24px 4px #24242414}.ui-ist__state{padding:8px 24px;font-size:14px;line-height:20px}.ui-ist--condensed .ui-ist__cell{padding:8px 12px}.ui-ist--condensed .ui-ist__cell:first-child{padding-left:24px}.ui-ist--condensed .ui-ist__cell--sticky-end{padding-right:24px}.ui-ist--condensed .ui-ist__cell--spacer{padding:0}.ui-ist__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], isCondensed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCondensed", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMore", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], loadMoreThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreThreshold", required: false }] }], noDataTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], retry: [{ type: i0.Output, args: ["retry"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], headerScroll: [{ type: i0.ViewChild, args: ['headerScroll', { isSignal: true }] }] } });
+                        UiTranslatePipe,
+                    ], template: "<!-- role=\"table\", not \"grid\": row access is Tab-only with no arrow-key cell traversal, so \"grid\" would\n     promise 2D keyboard navigation this does not implement. Selection is conveyed by the row's checkbox,\n     not `aria-selected` \u2014 which is valid only on grid/treegrid anyway. -->\n<div\n  class=\"ui-ist\"\n  role=\"table\"\n  [class.ui-ist--condensed]=\"isCondensed()\"\n  [class.ui-ist--scrolled-start]=\"!scrollStart()\"\n  [class.ui-ist--scrolled-end]=\"horizontalScroll() && !scrollEnd()\"\n  [class.ui-ist--fill-height]=\"fillHeight()\"\n  [attr.aria-rowcount]=\"hasMore() ? -1 : data().length + 1\"\n  [attr.aria-busy]=\"loading() || loadingMore()\"\n>\n  <!-- Pinned header, outside the viewport so it never scrolls vertically. The outer element reserves the\n       body's scrollbar width as padding (keeping the background and border across that strip); the inner\n       one carries the horizontal scrollLeft synced from the body. -->\n  <div class=\"ui-ist__header\" [style.padding-right.px]=\"scrollbarWidth()\" role=\"presentation\">\n    <div #headerScroll class=\"ui-ist__header-scroll\" role=\"presentation\">\n      <div class=\"ui-ist__row ui-ist__row--header\" role=\"row\" aria-rowindex=\"1\">\n        @if (selectable()) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            [class.ui-ist__cell--sticky-start-edge]=\"!stickyStartKey()\"\n            role=\"columnheader\"\n          ></div>\n        }\n        @for (column of columns(); track column.key; let colIndex = $index) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header\"\n            role=\"columnheader\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === stickyStartKey()\"\n            [class.ui-ist__cell--sticky-start-edge]=\"isStickyStartEdge(column)\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === stickyEndKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left]=\"stickyStartLeft(column)\"\n          >\n            @if (column.headerCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ column.title }}</span>\n            }\n          </div>\n        }\n        @for (loadingKey of loadingColumns(); track loadingKey) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--header ui-ist__cell--loading\"\n            role=\"presentation\"\n            aria-hidden=\"true\"\n            [style.flex-basis]=\"defaultColumnWidth\"\n            [style.min-width]=\"defaultColumnWidth\"\n            [style.max-width]=\"defaultColumnWidth\"\n          >\n            <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- The CDK viewport owns BOTH vertical (virtualized) and horizontal scroll, so sticky columns pin\n       against it and the horizontal scrollbar sits at the viewport bottom. -->\n  @if (showViewport()) {\n    <cdk-virtual-scroll-viewport\n      class=\"ui-ist__body\"\n      role=\"rowgroup\"\n      [itemSize]=\"rowHeight()\"\n      [minBufferPx]=\"effectiveMinBufferPx()\"\n      [maxBufferPx]=\"effectiveMaxBufferPx()\"\n      [style.height]=\"viewportHeight()\"\n      [style.max-height]=\"fillHeight() ? maxHeight() : null\"\n    >\n      <div\n        *cdkVirtualFor=\"let row of renderRows(); let rowIndex = index; trackBy: renderRowTrackBy\"\n        class=\"ui-ist__row\"\n        role=\"row\"\n        [class.ui-ist__row--clickable]=\"rowsClickable() && row.kind === 'data'\"\n        [class.ui-ist__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-rowindex]=\"row.kind === 'data' ? row.index + 2 : null\"\n        [attr.aria-hidden]=\"row.kind === 'skeleton' ? true : null\"\n        [attr.tabindex]=\"rowsClickable() && row.kind === 'data' ? 0 : null\"\n        [style.height.px]=\"rowHeight()\"\n        (click)=\"emitRowClick($event, row)\"\n        (keydown.enter)=\"activateRow($event, row)\"\n        (keydown.space)=\"activateRow($event, row)\"\n      >\n        @if (selectable()) {\n          <!-- This `stopPropagation` is what actually stops a checkbox click activating the row: it runs\n               before the click reaches the row's listener, so `isInteractiveTarget` is never consulted on\n               this path. That guard is a real second line of defence (`ui-checkbox` renders a focusable\n               wrapper and a native input, both matching INTERACTIVE_TARGET_SELECTOR), not a substitute. -->\n          <div\n            class=\"ui-ist__cell ui-ist__cell--checkbox ui-ist__cell--sticky-start\"\n            [class.ui-ist__cell--sticky-start-edge]=\"!stickyStartKey()\"\n            role=\"cell\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\"\n          >\n            @if (row.kind === 'data') {\n              <ui-checkbox\n                [checked]=\"isRowSelected(row)\"\n                [ariaLabel]=\"'Select row ' + (row.index + 1)\"\n                (changed)=\"emitSelectionChange(row, $event)\"\n              ></ui-checkbox>\n            }\n          </div>\n        }\n        @for (column of columns(); track column.key) {\n          <div\n            class=\"ui-ist__cell\"\n            role=\"cell\"\n            [class.ui-ist__cell--sticky-start]=\"column.key === stickyStartKey()\"\n            [class.ui-ist__cell--sticky-start-edge]=\"isStickyStartEdge(column)\"\n            [class.ui-ist__cell--sticky-end]=\"column.key === stickyEndKey()\"\n            [class.ui-ist__cell--right]=\"column.styles?.alignment === 'right'\"\n            [class.ui-ist__cell--center]=\"column.styles?.alignment === 'center'\"\n            [style.flex-basis]=\"columnWidth(column)\"\n            [style.min-width]=\"columnWidth(column)\"\n            [style.max-width]=\"columnWidth(column)\"\n            [style.left]=\"stickyStartLeft(column)\"\n          >\n            @if (row.kind === 'skeleton') {\n              <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n            } @else if (column.rowCellTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: row.item, rowIndex: row.index }\"\n              ></ng-container>\n            } @else {\n              <span class=\"ui-ist__cell-text\">{{ getCellValue(row.item, column.key) }}</span>\n            }\n          </div>\n        }\n        @for (loadingKey of loadingColumns(); track loadingKey) {\n          <div\n            class=\"ui-ist__cell ui-ist__cell--loading\"\n            role=\"presentation\"\n            aria-hidden=\"true\"\n            [style.flex-basis]=\"defaultColumnWidth\"\n            [style.min-width]=\"defaultColumnWidth\"\n            [style.max-width]=\"defaultColumnWidth\"\n          >\n            <ui-skeleton class=\"ui-ist__skeleton\" [count]=\"1\" [theme]=\"skeletonTheme\" appearance=\"line\"></ui-skeleton>\n          </div>\n        }\n        <div class=\"ui-ist__cell ui-ist__cell--spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- `showErrorFooter()` and `showErrorState()` differ only on `hasData()`, so they are mutually\n       exclusive and safe to merge here. Both fall back to a plain-language message, so a failed fetch is\n       never a silent blank box. -->\n  @if (showErrorFooter() || showErrorState()) {\n    <div class=\"ui-ist__state\" role=\"alert\">\n      @if (errorTemplate(); as errorTpl) {\n        <ng-container *ngTemplateOutlet=\"errorTpl; context: errorContext\"></ng-container>\n      } @else {\n        <span>{{ translationContext + 'LOAD_ERROR' | uiTranslate | async }}</span>\n      }\n    </div>\n  }\n\n  @if (showEmptyState()) {\n    <div class=\"ui-ist__state\">\n      @if (noDataTemplate(); as emptyTpl) {\n        <ng-container *ngTemplateOutlet=\"emptyTpl\"></ng-container>\n      } @else {\n        <span>{{ translationContext + 'NO_ROWS' | uiTranslate | async }}</span>\n      }\n    </div>\n  }\n\n  <!-- Opt-in, with no fallback (see `endOfListTemplate`). Not role=\"alert\": reaching the end is not an\n       alert, and `aria-rowcount` already conveys completeness to assistive tech. -->\n  @if (showEndOfList() && endOfListTemplate(); as endTpl) {\n    <div class=\"ui-ist__state\">\n      <ng-container *ngTemplateOutlet=\"endTpl\"></ng-container>\n    </div>\n  }\n\n  <span class=\"ui-ist__sr-only\" role=\"status\" aria-live=\"polite\">\n    @if (statusMessageKey(); as statusKey) {\n      {{ statusKey | uiTranslate | async }}\n    }\n  </span>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:block}.ui-ist{--ui-ist-checkbox-width: 56px;--ui-ist-skeleton-bg: #f4f4f4;display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff}.ui-ist__header{flex:0 0 auto;box-sizing:border-box;overflow:hidden;border-bottom:1px solid #e0e0e0;background:var(--ui-ist-header-bg, #ffffff)}.ui-ist__header-scroll{overflow:hidden}.ui-ist__body{flex:1 1 auto;overflow:auto;scrollbar-width:auto}.ui-ist__body::-webkit-scrollbar{width:8px;height:8px}.ui-ist__body::-webkit-scrollbar-button{display:none}.ui-ist__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:4px}.ui-ist__body::-webkit-scrollbar-track:hover{background-color:#00000026}.ui-ist__row{display:flex;width:max-content;min-width:100%;box-sizing:border-box}.ui-ist__row--header{min-height:56px}.ui-ist__row:not(.ui-ist__row--header){border-bottom:1px solid #d3d3d3}.ui-ist__row--clickable{cursor:pointer}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover{background:#fff2fc}.ui-ist__row--clickable:not(.ui-ist__row--selected):hover .ui-ist__cell{background:#fff2fc}.ui-ist__row--selected .ui-ist__cell{background:#f4f4f4}.ui-ist__cell{flex-grow:0;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;padding:8px 24px;font-size:14px;line-height:20px;overflow:hidden;background:#fff}.ui-ist__cell--header{background:var(--ui-ist-header-bg, #ffffff);font-weight:700;font-size:14px;line-height:16px}.ui-ist__cell--right{justify-content:flex-end;text-align:right}.ui-ist__cell--center{justify-content:center;text-align:center}.ui-ist__cell--sticky-start{position:sticky;z-index:2}.ui-ist__cell--checkbox.ui-ist__cell--sticky-start{left:0}.ui-ist__cell--sticky-end{position:sticky;right:0;z-index:2;order:1}.ui-ist__cell--checkbox{flex:0 0 var(--ui-ist-checkbox-width);min-width:var(--ui-ist-checkbox-width);justify-content:center;padding:0}.ui-ist__cell--spacer{flex:1 1 auto;min-width:0;padding:0}.ui-ist__row--header .ui-ist__cell--spacer{background:var(--ui-ist-header-bg, #ffffff)}.ui-ist__cell-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-ist__skeleton{display:block;width:100%}.ui-ist--scrolled-start .ui-ist__cell--sticky-start-edge{box-shadow:24px 8px 24px #24242414}.ui-ist--scrolled-end .ui-ist__cell--sticky-end{box-shadow:0 8px 24px 4px #24242414}.ui-ist__state{padding:8px 24px;font-size:14px;line-height:20px}.ui-ist--condensed .ui-ist__cell{padding:8px 12px}.ui-ist--condensed .ui-ist__cell:first-child{padding-left:24px}.ui-ist--condensed .ui-ist__cell--sticky-end{padding-right:24px}.ui-ist--condensed .ui-ist__cell--spacer{padding:0}:host(.ui-ist--fill-host){height:100%}.ui-ist--fill-height{height:100%}.ui-ist--fill-height .ui-ist__body{min-height:0}.ui-ist__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], minBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minBufferPx", required: false }] }], maxBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxBufferPx", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], fillHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillHeight", required: false }] }], isCondensed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCondensed", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], rowsClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsClickable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMore", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: true }] }], skeletonRowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRowCount", required: false }] }], loadMoreSkeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreSkeletonCount", required: false }] }], loadingColumnCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingColumnCount", required: false }] }], loadMoreThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreThreshold", required: false }] }], noDataTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], endOfListTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endOfListTemplate", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], retry: [{ type: i0.Output, args: ["retry"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], headerScroll: [{ type: i0.ViewChild, args: ['headerScroll', { isSignal: true }] }] } });
 
 class InfiniteScrollTableComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }