@akcelik/strct 5.29.0 → 5.31.0

package/fesm2022/akcelik-strct.mjs

@@ -1098,9 +1098,20 @@ function strctDevWarn(key, message) {
     warned.add(key);
     console.warn(message);
 }
+/**
+ * A diagnostic that keeps its own state (one that collects names and reports
+ * them together, say) registers how to forget it, so the test hook below
+ * stays the one way to reset dev-mode diagnostics.
+ */
+const resetters = new Set();
+function strctOnDevWarnReset(forget) {
+    resetters.add(forget);
+}
 /** Test hook: forget which warnings have fired. Not part of the public API. */
 function resetStrctDevWarnings() {
     warned.clear();
+    for (const forget of resetters)
+        forget();
 }
 
 /**
@@ -15232,6 +15243,37 @@ const DG_LABELS = {
     pageOf: (page, pages) => `Page ${page} of ${pages}`,
     rowsMatch: (shown, total) => `${shown} of ${total} rows match`,
 };
+
+/*
+ * ── The grid's features, as objects (5.30.0) ──────────────────────────────
+ *
+ * The component grew to 54 inputs, which is more than a template can read.
+ * Each cluster of them becomes one object; the flat inputs keep working
+ * through 5.x and dev mode says which object each has moved into, so a
+ * consumer upgrades a screen at a time. They are removed in 6.0.
+ *
+ * What stays flat on purpose: the two-way state (`selectedIds`, `filters`,
+ * `columnState`, `collapsedGroups`, `quickFilter`, `activeRowId`,
+ * `selectedId`), because `[(…)]` cannot bind through a property of an
+ * object; and the grid's core (`columns`, `rows`, `rowId`, `labels`) with the
+ * handful of look flags.
+ */
+/** Flat inputs already named in a deprecation warning, per app run. */
+const warnedFlatInputs = new Set();
+const pendingFlatInputWarnings = new Set();
+let flatInputWarningQueued = false;
+strctOnDevWarnReset(() => {
+    warnedFlatInputs.clear();
+    pendingFlatInputWarnings.clear();
+});
+/**
+ * `virtual` and `pane` take the flag they always took — including the bare
+ * attribute, which arrives as `''` — or the object that replaced their
+ * satellite inputs.
+ */
+function objectOrBoolean(value) {
+    return typeof value === 'object' && value !== null ? value : booleanAttribute(value);
+}
 /**
  * A fully custom group header row:
  *
@@ -15328,28 +15370,25 @@ class StrctDatagrid {
     rows = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     /** Rows per page (0 disables paging). */
-    pageSize = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeFlat = input(0, { ...(ngDevMode ? { debugName: "pageSizeFlat" } : /* istanbul ignore next */ {}), alias: 'pageSize' });
     /** Enable row selection. */
-    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selectableFlat = input(false, { ...(ngDevMode ? { debugName: "selectableFlat" } : /* istanbul ignore next */ {}), alias: 'selectable', transform: booleanAttribute });
     /** Expand a row in place to reveal its detail template below it. */
     expandable = input(false, { ...(ngDevMode ? { debugName: "expandable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Collapse the grid to a single column and open a side detail pane for the
      *  clicked row (distinct from {@link expandable}). */
-    detailPane = input(false, { ...(ngDevMode ? { debugName: "detailPane" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    detailPaneFlat = input(false, { ...(ngDevMode ? { debugName: "detailPaneFlat" } : /* istanbul ignore next */ {}), alias: 'detailPane', transform: booleanAttribute });
     /**
      * How wide the list column is while the pane is open — px or any CSS width.
      * 260px cuts a test name like "Validate Switch Enabled Teaming
      * Configurations" in half and hides its status.
      */
-    paneListWidth = input('260px', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "paneListWidth" }] : /* istanbul ignore next */ []));
+    paneListWidthFlat = input('260px', { ...(ngDevMode ? { debugName: "paneListWidthFlat" } : /* istanbul ignore next */ {}), alias: 'paneListWidth' });
     /**
      * Below this container width (px) the pane takes the list's place, with a
      * way back in its header, rather than squeezing both into a phone.
      */
-    paneTakeoverWidth = input(900, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "paneTakeoverWidth" }] : /* istanbul ignore next */ []));
+    paneTakeoverWidthFlat = input(900, { ...(ngDevMode ? { debugName: "paneTakeoverWidthFlat" } : /* istanbul ignore next */ {}), alias: 'paneTakeoverWidth' });
     /**
      * The row whose pane is open, two-way: a "what to do next" chip opens the
      * finding it settles, a URL fragment deep-links to a test, `null` closes it.
@@ -15373,7 +15412,7 @@ class StrctDatagrid {
     /** Show a column-chooser dropdown in the footer. */
     columnChooser = input(false, { ...(ngDevMode ? { debugName: "columnChooser" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Show a refresh button in the footer. */
-    sync = input(false, { ...(ngDevMode ? { debugName: "sync" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    syncFlat = input(false, { ...(ngDevMode ? { debugName: "syncFlat" } : /* istanbul ignore next */ {}), alias: 'sync', transform: booleanAttribute });
     /** Disable all footer action buttons (sync, column chooser, etc.). */
     footerActionsDisabled = input(false, { ...(ngDevMode ? { debugName: "footerActionsDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
@@ -15389,8 +15428,7 @@ class StrctDatagrid {
      * exactly one row is grid behaviour rather than a column of radios the
      * consumer builds and wires by hand.
      */
-    selectionMode = input('none', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    selectionModeFlat = input('none', { ...(ngDevMode ? { debugName: "selectionModeFlat" } : /* istanbul ignore next */ {}), alias: 'selectionMode' });
     /** Two-way single selection: the row id (per `rowId`), or null. */
     selectedId = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
@@ -15399,30 +15437,22 @@ class StrctDatagrid {
      * it AND say why — shown as the row's tooltip and given to assistive tech as
      * the control's description, following the `hint` convention.
      */
-    rowSelectable = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rowSelectable" }] : /* istanbul ignore next */ []));
+    rowSelectableFlat = input(null, { ...(ngDevMode ? { debugName: "rowSelectableFlat" } : /* istanbul ignore next */ {}), alias: 'rowSelectable' });
     /** No outer border, radius or shadow — for a grid inside a bordered panel. */
     flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** The grid's title, rendered above the header and used as its accessible name. */
     caption = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
-    /**
-     * `'more'` swaps the pager for a count and a Load more button — the shape a
-     * cursor API can answer. The consumer appends rows; the grid does not page.
-     */
-    paging = input('pages', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "paging" }] : /* istanbul ignore next */ []));
     /** Whether there is another slice to ask for. */
-    hasMore = input(false, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hasMoreFlat = input(false, { ...(ngDevMode ? { debugName: "hasMoreFlat" } : /* istanbul ignore next */ {}), alias: 'hasMore', transform: booleanAttribute });
     /** A slice is on its way: the button waits with a spinner. */
-    loadingMore = input(false, { ...(ngDevMode ? { debugName: "loadingMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loadingMoreFlat = input(false, { ...(ngDevMode ? { debugName: "loadingMoreFlat" } : /* istanbul ignore next */ {}), alias: 'loadingMore', transform: booleanAttribute });
     /** The grand total, when the API knows it — "Showing the latest 50 of 812". */
-    moreTotal = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "moreTotal" }] : /* istanbul ignore next */ []));
+    moreTotalFlat = input(null, { ...(ngDevMode ? { debugName: "moreTotalFlat" } : /* istanbul ignore next */ {}), alias: 'moreTotal' });
     /** The user asked for the next slice. */
     loadMore = output();
     /** With `groupBy` and multiple selection: a tri-state checkbox per group. */
-    groupSelect = input(false, { ...(ngDevMode ? { debugName: "groupSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    groupSelectFlat = input(false, { ...(ngDevMode ? { debugName: "groupSelectFlat" } : /* istanbul ignore next */ {}), alias: 'groupSelect', transform: booleanAttribute });
     /**
      * Per-row action menu resolver. When set, each row gets a trailing actions
      * column with a vertical-dots (kebab) button that opens this row's menu.
@@ -15436,8 +15466,7 @@ class StrctDatagrid {
      * `selectable`. Assigning a new array (e.g. when opening a dialog) re-seeds the
      * selection; the user's subsequent toggles are preserved until the next change.
      */
-    initialSelection = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "initialSelection" }] : /* istanbul ignore next */ []));
+    initialSelectionFlat = input(null, { ...(ngDevMode ? { debugName: "initialSelectionFlat" } : /* istanbul ignore next */ {}), alias: 'initialSelection' });
     /**
      * The selection itself, two-way, for `selectionMode="multiple"` — what
      * `selectedId` is for single mode. Write it and the grid checks those rows
@@ -15453,48 +15482,36 @@ class StrctDatagrid {
     /** Effective labels (defaults + overrides). */
     L = computed(() => ({ ...DG_LABELS, ...this.labels() }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "L" }] : /* istanbul ignore next */ []));
-    /**
-     * Virtual scrolling for large data sets: only the rows inside the viewport
-     * (plus a small overscan) are in the DOM — 20k+ rows stay smooth. The scroll
-     * area gets `viewportHeight` and a sticky header. Assumes uniform
-     * `rowHeight`; combine with `expandable` is unsupported.
-     */
-    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Scroll viewport height in px (virtual mode). */
-    viewportHeight = input(360, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    viewportHeightFlat = input(360, { ...(ngDevMode ? { debugName: "viewportHeightFlat" } : /* istanbul ignore next */ {}), alias: 'viewportHeight' });
     /**
      * Bound the grid's own scroll box (px), with a sticky header — what
      * `viewportHeight` does for `virtual`, for every other grid: a grouped
      * picker inside a dialog scrolls instead of growing the page.
      */
-    maxHeight = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    maxHeightFlat = input(null, { ...(ngDevMode ? { debugName: "maxHeightFlat" } : /* istanbul ignore next */ {}), alias: 'maxHeight' });
     /**
      * Show a pencil on an editable cell when it is hovered or focused. A mouse
      * user finds an editable cell by double-clicking one; nothing said so.
      */
     editHint = input(false, { ...(ngDevMode ? { debugName: "editHint" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Uniform row height in px (virtual mode; tune when `compact`). */
-    rowHeight = input(38, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    rowHeightFlat = input(38, { ...(ngDevMode ? { debugName: "rowHeightFlat" } : /* istanbul ignore next */ {}), alias: 'rowHeight' });
     /**
      * Server-side mode: the grid never sorts or slices `rows` itself — it shows
      * them as given and emits `(lazyLoad)` with `{ page, pageSize, sortKey,
      * sortDir }` whenever the user pages or sorts (and once on init). Provide
      * `total` so the pager and count reflect the full server-side set.
      */
-    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    lazyFlat = input(false, { ...(ngDevMode ? { debugName: "lazyFlat" } : /* istanbul ignore next */ {}), alias: 'lazy', transform: booleanAttribute });
     /** Total row count on the server (lazy mode). */
-    total = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    totalFlat = input(null, { ...(ngDevMode ? { debugName: "totalFlat" } : /* istanbul ignore next */ {}), alias: 'total' });
     /**
      * Persist the user's column widths + hidden columns under this key in
      * localStorage (`strct-dg:<key>`), restoring them on init. For full control
      * use the two-way `columnState` instead (both may be combined).
      */
-    stateKey = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stateKey" }] : /* istanbul ignore next */ []));
+    stateKeyFlat = input(null, { ...(ngDevMode ? { debugName: "stateKeyFlat" } : /* istanbul ignore next */ {}), alias: 'stateKey' });
     /** User column preferences (two-way): widths from resize, hidden from the chooser. */
     columnState = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnState" }] : /* istanbul ignore next */ []));
@@ -15505,17 +15522,16 @@ class StrctDatagrid {
      * per distinct value (with a count), respecting the current sort within
      * groups. Paging is bypassed while grouped; not combinable with `virtual`.
      */
-    groupBy = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+    groupByFlat = input(null, { ...(ngDevMode ? { debugName: "groupByFlat" } : /* istanbul ignore next */ {}), alias: 'groupBy' });
     /**
      * The groups themselves, beside `groupBy`: their order, their labels, a
      * tone, a note, whether they start folded and a count of the consumer's
      * own. Values no group mentions follow, in the order the rows arrived.
      */
-    groups = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    groupsFlat = input(null, { ...(ngDevMode ? { debugName: "groupsFlat" } : /* istanbul ignore next */ {}), alias: 'groups' });
     /** Keep a declared group that holds no rows, rather than dropping it. */
-    showEmptyGroups = input(false, { ...(ngDevMode ? { debugName: "showEmptyGroups" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showEmptyGroupsFlat = input(false, { ...(ngDevMode ? { debugName: "showEmptyGroupsFlat" } : /* istanbul ignore next */ {}), alias: 'showEmptyGroups',
+        transform: booleanAttribute });
     /**
      * Which groups are folded, two-way — so a summary counter elsewhere on the
      * page can open the group it counts.
@@ -15538,18 +15554,17 @@ class StrctDatagrid {
     quickFilter = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "quickFilter" }] : /* istanbul ignore next */ []));
     /** Columns the quick term scans. Defaults to every column's `key`. */
-    quickFilterFields = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "quickFilterFields" }] : /* istanbul ignore next */ []));
+    quickFilterFieldsFlat = input(null, { ...(ngDevMode ? { debugName: "quickFilterFieldsFlat" } : /* istanbul ignore next */ {}), alias: 'quickFilterFields' });
     /** Render the built-in quick-filter searchbox in the toolbar. */
-    quickFilterable = input(false, { ...(ngDevMode ? { debugName: "quickFilterable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    quickFilterableFlat = input(false, { ...(ngDevMode ? { debugName: "quickFilterableFlat" } : /* istanbul ignore next */ {}), alias: 'quickFilterable',
+        transform: booleanAttribute });
     /**
      * Where the built-in box sits in the toolbar. `'end'` (default) follows the
      * console convention: action verbs lead on the left, view controls sit at
      * the far right — and the box keeps a stable position across grids whose
      * button sets differ.
      */
-    quickFilterAlign = input('end', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "quickFilterAlign" }] : /* istanbul ignore next */ []));
+    quickFilterAlignFlat = input('end', { ...(ngDevMode ? { debugName: "quickFilterAlignFlat" } : /* istanbul ignore next */ {}), alias: 'quickFilterAlign' });
     /**
      * Tree-grid: the row property holding a row's children array. Rows render
      * hierarchically with indent + carets; sorting applies per sibling level;
@@ -15562,8 +15577,7 @@ class StrctDatagrid {
      * ArrowLeft collapses an expanded one. There is no cell-level navigation —
      * Tab walks the interactive elements inside each row as usual.
      */
-    childrenKey = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "childrenKey" }] : /* istanbul ignore next */ []));
+    childrenKeyFlat = input(null, { ...(ngDevMode ? { debugName: "childrenKeyFlat" } : /* istanbul ignore next */ {}), alias: 'childrenKey' });
     /**
      * `'table'` (the default) is what the grid has always been: a table whose
      * controls each take a tab stop. `'grid'` is the APG grid: the table claims
@@ -15582,8 +15596,7 @@ class StrctDatagrid {
      * file list selects by clicking the row, not a control in it. The row is
      * then the control, so pair it with `interactionMode="grid"`.
      */
-    selectionColumn = input('auto', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectionColumn" }] : /* istanbul ignore next */ []));
+    selectionColumnFlat = input('auto', { ...(ngDevMode ? { debugName: "selectionColumnFlat" } : /* istanbul ignore next */ {}), alias: 'selectionColumn' });
     /**
      * The row was opened: a double-click, or Enter on the focused row in grid
      * mode. Selection is "which rows do I mean"; activation is "go".
@@ -15601,6 +15614,193 @@ class StrctDatagrid {
      *  editor). The grid does not mutate rows — apply the value to your data and
      *  pass the updated array back in. */
     cellEdit = output();
+    // ── The feature objects, and the flat inputs they replace ───────────────
+    // Each resolved signal below keeps the name the rest of the component (and
+    // the template) already uses, so the object is read where the flat input
+    // was. The object wins when it carries the property; otherwise the flat
+    // input answers, as it did before 5.30.0.
+    /** How rows are picked — replaces six flat inputs. */
+    selectionCfg = input({}, { ...(ngDevMode ? { debugName: "selectionCfg" } : /* istanbul ignore next */ {}), alias: 'selection' });
+    /** The detail pane — replaces three. `[pane]` on its own turns it on. */
+    paneFlat = input(false, { ...(ngDevMode ? { debugName: "paneFlat" } : /* istanbul ignore next */ {}), alias: 'pane',
+        transform: objectOrBoolean });
+    paneCfg = computed(() => {
+        const v = this.paneFlat();
+        return typeof v === 'boolean' ? (v ? { enabled: true } : {}) : { enabled: true, ...v };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paneCfg" }] : /* istanbul ignore next */ []));
+    /** How rows are paged. Takes the mode on its own, as before, or the object. */
+    pagingFlat = input('pages', { ...(ngDevMode ? { debugName: "pagingFlat" } : /* istanbul ignore next */ {}), alias: 'paging' });
+    pagingCfg = computed(() => {
+        const v = this.pagingFlat();
+        return typeof v === 'string' ? { mode: v } : v;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagingCfg" }] : /* istanbul ignore next */ []));
+    /** Numbered pages or a "load more" footer. */
+    paging = computed(() => this.pagingCfg().mode ?? 'pages', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paging" }] : /* istanbul ignore next */ []));
+    /** Virtual scrolling. Takes the flag on its own, as before, or the object. */
+    virtualFlat = input(false, { ...(ngDevMode ? { debugName: "virtualFlat" } : /* istanbul ignore next */ {}), alias: 'virtual', transform: objectOrBoolean });
+    virtualCfg = computed(() => {
+        const v = this.virtualFlat();
+        return typeof v === 'boolean' ? (v ? { enabled: true } : {}) : { enabled: true, ...v };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualCfg" }] : /* istanbul ignore next */ []));
+    /** Whether the grid renders only the rows in view. */
+    virtual = computed(() => this.virtualCfg().enabled ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtual" }] : /* istanbul ignore next */ []));
+    /** How rows are grouped — replaces four flat inputs. */
+    groupingCfg = input({}, { ...(ngDevMode ? { debugName: "groupingCfg" } : /* istanbul ignore next */ {}), alias: 'grouping' });
+    /** The quick filter — replaces three flat inputs. */
+    filteringCfg = input({}, { ...(ngDevMode ? { debugName: "filteringCfg" } : /* istanbul ignore next */ {}), alias: 'filtering' });
+    /** Remembered state — replaces `stateKey` and `sync`. */
+    stateCfg = input({}, { ...(ngDevMode ? { debugName: "stateCfg" } : /* istanbul ignore next */ {}), alias: 'state' });
+    /**
+     * The flat inputs this grid is actually given, with the object each has
+     * moved into. "Given" is read as "not its default", which is what a
+     * template can be checked against from inside the component.
+     */
+    flatInputsInUse = [
+        ['pageSize', () => this.pageSizeFlat() !== 0, '[paging].pageSize'],
+        ['selectable', () => this.selectableFlat(), '[selection].enabled'],
+        ['detailPane', () => this.detailPaneFlat(), '[pane].enabled'],
+        ['paneListWidth', () => this.paneListWidthFlat() !== '260px', '[pane].listWidth'],
+        ['paneTakeoverWidth', () => this.paneTakeoverWidthFlat() !== 900, '[pane].takeoverWidth'],
+        ['sync', () => this.syncFlat(), '[state].sync'],
+        ['selectionMode', () => this.selectionModeFlat() !== 'none', '[selection].mode'],
+        ['rowSelectable', () => this.rowSelectableFlat() !== null, '[selection].rowSelectable'],
+        ['hasMore', () => this.hasMoreFlat(), '[paging].hasMore'],
+        ['loadingMore', () => this.loadingMoreFlat(), '[paging].loadingMore'],
+        ['moreTotal', () => this.moreTotalFlat() !== null, '[paging].moreTotal'],
+        ['groupSelect', () => this.groupSelectFlat(), '[selection].groupSelect'],
+        ['initialSelection', () => this.initialSelectionFlat() !== null, '[selection].initial'],
+        ['viewportHeight', () => this.viewportHeightFlat() !== 360, '[virtual].viewportHeight'],
+        ['maxHeight', () => this.maxHeightFlat() !== null, '[virtual].maxHeight'],
+        ['rowHeight', () => this.rowHeightFlat() !== 38, '[virtual].rowHeight'],
+        ['lazy', () => this.lazyFlat(), '[paging].lazy'],
+        ['total', () => this.totalFlat() !== null, '[paging].total'],
+        ['stateKey', () => this.stateKeyFlat() !== null, '[state].key'],
+        ['groupBy', () => this.groupByFlat() !== null, '[grouping].by'],
+        ['groups', () => this.groupsFlat() !== null, '[grouping].groups'],
+        ['showEmptyGroups', () => this.showEmptyGroupsFlat(), '[grouping].showEmpty'],
+        ['quickFilterFields', () => this.quickFilterFieldsFlat() !== null, '[filtering].fields'],
+        ['quickFilterable', () => this.quickFilterableFlat(), '[filtering].quick'],
+        ['quickFilterAlign', () => this.quickFilterAlignFlat() !== 'end', '[filtering].align'],
+        ['childrenKey', () => this.childrenKeyFlat() !== null, '[grouping].childrenKey'],
+        ['selectionColumn', () => this.selectionColumnFlat() !== 'auto', '[selection].column'],
+    ];
+    /**
+     * Dev mode says, once per app run, which flat inputs have moved — a
+     * console line per name would be a wall in a screen with four grids, so
+     * the names are collected and reported together.
+     */
+    reportFlatInputs() {
+        const fresh = this.flatInputsInUse
+            .filter(([name, given]) => given() && !warnedFlatInputs.has(name))
+            .map(([name, , to]) => {
+            warnedFlatInputs.add(name);
+            return `  ${name} → ${to}`;
+        });
+        if (!fresh.length)
+            return;
+        for (const line of fresh)
+            pendingFlatInputWarnings.add(line);
+        if (flatInputWarningQueued)
+            return;
+        flatInputWarningQueued = true;
+        setTimeout(() => {
+            flatInputWarningQueued = false;
+            const lines = [...pendingFlatInputWarnings].sort();
+            pendingFlatInputWarnings.clear();
+            console.warn(`[strct-datagrid] ${lines.length} input(s) have moved into a feature ` +
+                `object and are removed in 6.0. They keep working through 5.x:\n` +
+                lines.join('\n') +
+                `\nThe objects are [selection], [paging], [pane], [virtual], ` +
+                `[grouping], [filtering] and [state]; two-way state ` +
+                `(selectedIds, filters, columnState, …) stays where it is.`);
+        });
+    }
+    /** `[paging].pageSize` when it is set, else the flat `pageSize` (deprecated). */
+    pageSize = computed(() => this.pagingCfg().pageSize ?? this.pageSizeFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** `[selection].enabled` when it is set, else the flat `selectable` (deprecated). */
+    selectable = computed(() => this.selectionCfg().enabled ?? this.selectableFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    /** `[pane].enabled` when it is set, else the flat `detailPane` (deprecated). */
+    detailPane = computed(() => this.paneCfg().enabled ?? this.detailPaneFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "detailPane" }] : /* istanbul ignore next */ []));
+    /** `[pane].listWidth` when it is set, else the flat `paneListWidth` (deprecated). */
+    paneListWidth = computed(() => this.paneCfg().listWidth ?? this.paneListWidthFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paneListWidth" }] : /* istanbul ignore next */ []));
+    /** `[pane].takeoverWidth` when it is set, else the flat `paneTakeoverWidth` (deprecated). */
+    paneTakeoverWidth = computed(() => this.paneCfg().takeoverWidth ?? this.paneTakeoverWidthFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paneTakeoverWidth" }] : /* istanbul ignore next */ []));
+    /** `[state].sync` when it is set, else the flat `sync` (deprecated). */
+    sync = computed(() => this.stateCfg().sync ?? this.syncFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sync" }] : /* istanbul ignore next */ []));
+    /** `[selection].mode` when it is set, else the flat `selectionMode` (deprecated). */
+    selectionMode = computed(() => this.selectionCfg().mode ?? this.selectionModeFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /** `[selection].rowSelectable` when it is set, else the flat `rowSelectable` (deprecated). */
+    rowSelectable = computed(() => this.selectionCfg().rowSelectable ?? this.rowSelectableFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowSelectable" }] : /* istanbul ignore next */ []));
+    /** `[paging].hasMore` when it is set, else the flat `hasMore` (deprecated). */
+    hasMore = computed(() => this.pagingCfg().hasMore ?? this.hasMoreFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+    /** `[paging].loadingMore` when it is set, else the flat `loadingMore` (deprecated). */
+    loadingMore = computed(() => this.pagingCfg().loadingMore ?? this.loadingMoreFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMore" }] : /* istanbul ignore next */ []));
+    /** `[paging].moreTotal` when it is set, else the flat `moreTotal` (deprecated). */
+    moreTotal = computed(() => this.pagingCfg().moreTotal ?? this.moreTotalFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreTotal" }] : /* istanbul ignore next */ []));
+    /** `[selection].groupSelect` when it is set, else the flat `groupSelect` (deprecated). */
+    groupSelect = computed(() => this.selectionCfg().groupSelect ?? this.groupSelectFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupSelect" }] : /* istanbul ignore next */ []));
+    /** `[selection].initial` when it is set, else the flat `initialSelection` (deprecated). */
+    initialSelection = computed(() => this.selectionCfg().initial ?? this.initialSelectionFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialSelection" }] : /* istanbul ignore next */ []));
+    /** `[virtual].viewportHeight` when it is set, else the flat `viewportHeight` (deprecated). */
+    viewportHeight = computed(() => this.virtualCfg().viewportHeight ?? this.viewportHeightFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    /** `[virtual].maxHeight` when it is set, else the flat `maxHeight` (deprecated). */
+    maxHeight = computed(() => this.virtualCfg().maxHeight ?? this.maxHeightFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /** `[virtual].rowHeight` when it is set, else the flat `rowHeight` (deprecated). */
+    rowHeight = computed(() => this.virtualCfg().rowHeight ?? this.rowHeightFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    /** `[paging].lazy` when it is set, else the flat `lazy` (deprecated). */
+    lazy = computed(() => this.pagingCfg().lazy ?? this.lazyFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    /** `[paging].total` when it is set, else the flat `total` (deprecated). */
+    total = computed(() => this.pagingCfg().total ?? this.totalFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    /** `[state].key` when it is set, else the flat `stateKey` (deprecated). */
+    stateKey = computed(() => this.stateCfg().key ?? this.stateKeyFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateKey" }] : /* istanbul ignore next */ []));
+    /** `[grouping].by` when it is set, else the flat `groupBy` (deprecated). */
+    groupBy = computed(() => this.groupingCfg().by ?? this.groupByFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+    /** `[grouping].groups` when it is set, else the flat `groups` (deprecated). */
+    groups = computed(() => this.groupingCfg().groups ?? this.groupsFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** `[grouping].showEmpty` when it is set, else the flat `showEmptyGroups` (deprecated). */
+    showEmptyGroups = computed(() => this.groupingCfg().showEmpty ?? this.showEmptyGroupsFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEmptyGroups" }] : /* istanbul ignore next */ []));
+    /** `[filtering].fields` when it is set, else the flat `quickFilterFields` (deprecated). */
+    quickFilterFields = computed(() => this.filteringCfg().fields ?? this.quickFilterFieldsFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "quickFilterFields" }] : /* istanbul ignore next */ []));
+    /** `[filtering].quick` when it is set, else the flat `quickFilterable` (deprecated). */
+    quickFilterable = computed(() => this.filteringCfg().quick ?? this.quickFilterableFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "quickFilterable" }] : /* istanbul ignore next */ []));
+    /** `[filtering].align` when it is set, else the flat `quickFilterAlign` (deprecated). */
+    quickFilterAlign = computed(() => this.filteringCfg().align ?? this.quickFilterAlignFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "quickFilterAlign" }] : /* istanbul ignore next */ []));
+    /** `[grouping].childrenKey` when it is set, else the flat `childrenKey` (deprecated). */
+    childrenKey = computed(() => this.groupingCfg().childrenKey ?? this.childrenKeyFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childrenKey" }] : /* istanbul ignore next */ []));
+    /** `[selection].column` when it is set, else the flat `selectionColumn` (deprecated). */
+    selectionColumn = computed(() => this.selectionCfg().column ?? this.selectionColumnFlat(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionColumn" }] : /* istanbul ignore next */ []));
     menu = inject(StrctMenuService);
     detailDef = contentChild(StrctRowDetailDef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "detailDef" }] : /* istanbul ignore next */ []));
@@ -17108,6 +17308,12 @@ class StrctDatagrid {
                 this.lazyLoad.emit(state);
             });
         });
+        // The inputs are bound by the first render, so this is where they can be
+        // read and reported.
+        afterNextRender(() => {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode)
+                this.reportFlatInputs();
+        });
         // Below `paneTakeoverWidth` the pane replaces the list. The grid's own
         // width decides, not the viewport: the same grid is wide in a page and
         // narrow in a drawer.
@@ -17612,796 +17818,7 @@ class StrctDatagrid {
         return String(a ?? '').localeCompare(String(b ?? ''), undefined, { numeric: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDatagrid, isStandalone: true, selector: "strct-datagrid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, detailPane: { classPropertyName: "detailPane", publicName: "detailPane", isSignal: true, isRequired: false, transformFunction: null }, paneListWidth: { classPropertyName: "paneListWidth", publicName: "paneListWidth", isSignal: true, isRequired: false, transformFunction: null }, paneTakeoverWidth: { classPropertyName: "paneTakeoverWidth", publicName: "paneTakeoverWidth", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnChooser: { classPropertyName: "columnChooser", publicName: "columnChooser", isSignal: true, isRequired: false, transformFunction: null }, sync: { classPropertyName: "sync", publicName: "sync", isSignal: true, isRequired: false, transformFunction: null }, footerActionsDisabled: { classPropertyName: "footerActionsDisabled", publicName: "footerActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, loadingMore: { classPropertyName: "loadingMore", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, moreTotal: { classPropertyName: "moreTotal", publicName: "moreTotal", isSignal: true, isRequired: false, transformFunction: null }, groupSelect: { classPropertyName: "groupSelect", publicName: "groupSelect", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, editHint: { classPropertyName: "editHint", publicName: "editHint", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, columnState: { classPropertyName: "columnState", publicName: "columnState", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, showEmptyGroups: { classPropertyName: "showEmptyGroups", publicName: "showEmptyGroups", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, quickFilter: { classPropertyName: "quickFilter", publicName: "quickFilter", isSignal: true, isRequired: false, transformFunction: null }, quickFilterFields: { classPropertyName: "quickFilterFields", publicName: "quickFilterFields", isSignal: true, isRequired: false, transformFunction: null }, quickFilterable: { classPropertyName: "quickFilterable", publicName: "quickFilterable", isSignal: true, isRequired: false, transformFunction: null }, quickFilterAlign: { classPropertyName: "quickFilterAlign", publicName: "quickFilterAlign", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, interactionMode: { classPropertyName: "interactionMode", publicName: "interactionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionColumn: { classPropertyName: "selectionColumn", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeRowId: "activeRowIdChange", selectedId: "selectedIdChange", loadMore: "loadMore", selectedIds: "selectedIdsChange", columnState: "columnStateChange", collapsedGroups: "collapsedGroupsChange", filters: "filtersChange", quickFilter: "quickFilterChange", rowActivate: "rowActivate", selectionChange: "selectionChange", syncChange: "syncChange", rowAction: "rowAction", lazyLoad: "lazyLoad", cellEdit: "cellEdit" }, host: { listeners: { "document:click": "onDocClickOverlays($event)", "document:keydown.escape": "onEscapeOverlays($event)" }, properties: { "attr.aria-busy": "loading() || loadingMore() ? \"true\" : null", "class.strct-dg-host--compact": "compact()", "class.strct-dg-host--singleline": "singleLine()", "class.strct-dg-host--virtual": "virtual()", "class.strct-dg-host--bounded": "!virtual() && maxHeight() !== null", "class.strct-dg-host--sticky": "stickyActive()", "class.strct-dg-host--flush": "flush()" }, classAttribute: "strct-dg-host" }, queries: [{ propertyName: "detailDef", first: true, predicate: StrctRowDetailDef, descendants: true, isSignal: true }, { propertyName: "groupHeaderDef", first: true, predicate: StrctGroupHeaderDef, descendants: true, isSignal: true }, { propertyName: "paneTitleDef", first: true, predicate: StrctDetailPaneTitle, descendants: true, isSignal: true }, { propertyName: "actionBarDef", first: true, predicate: StrctDatagridActionBar, descendants: true, isSignal: true }, { propertyName: "actionBarCaptionDef", first: true, predicate: StrctDatagridActionBarCaption, descendants: true, isSignal: true }, { propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: `
-    <!-- One polite region for everything the grid does to itself: sorting,
-         paging and filtering all change the rows without saying so. -->
-    <span class="strct-dg__announcer" role="status" aria-live="polite">{{ announcement() }}</span>
-    @if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {
-      <div class="strct-dg__toolbar">
-        @if (quickFilterable()) {
-          <strct-searchbox
-            class="strct-dg__quickfilter"
-            [class.strct-dg__quickfilter--end]="quickFilterAlign() === 'end'"
-            [placeholder]="L().quickFilter"
-            [ariaLabel]="L().quickFilter"
-            [value]="quickFilter()"
-            (valueChange)="quickFilter.set($event)"
-          />
-          @if (filterNote(); as note) {
-            <span
-              class="strct-dg__filternote"
-              [class.strct-dg__filternote--end]="quickFilterAlign() === 'end'"
-              >{{ note }}</span
-            >
-          }
-        }
-        <span class="strct-dg__actioncaption">
-          <ng-content select="[strctDatagridActionBarCaption]" />
-        </span>
-        <ng-content select="[strctDatagridActionBar]" />
-      </div>
-    }
-
-    @if (hasEditableColumn()) {
-      <!-- What the editable cells point at with aria-describedby: a keyboard
-           user is told the cell can be edited, and how. -->
-      <!-- In flow, not absolutely positioned: an out-of-flow box whose
-           containing block is the page extends the document's scrollable area
-           from wherever the grid happens to sit. 1x1 and clipped is enough. -->
-      <span
-        class="strct-sr-only"
-        style="display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap"
-        [id]="editHintId"
-        >{{ L().editCellInstructions }}</span
-      >
-    }
-
-    @if (bulkHint(); as hint) {
-      <!-- Selecting the page is not selecting the set. Say which one happened,
-           and offer the other. -->
-      <div class="strct-dg__bulk" role="status">
-        <span>{{ hint.text }}</span>
-        <button strct-button variant="flat" size="sm" (click)="hint.run()">
-          {{ hint.action }}
-        </button>
-      </div>
-    }
-    <div
-      class="strct-dg__layout"
-      [class.strct-dg__layout--paned]="paneOpen()"
-      [class.strct-dg__layout--panetakeover]="paneOpen() && narrowPane()"
-      [style.--strct-dg-pane-list-w]="paneListWidth()"
-    >
-      <div
-        class="strct-dg__scroll"
-        tabindex="0"
-        role="region"
-        [attr.aria-label]="L().rows"
-        [style.max-height.px]="virtual() ? viewportHeight() : maxHeight()"
-        (scroll)="virtual() && onScroll($event)"
-      >
-        <table
-          class="strct-dg"
-          [attr.role]="childrenKey() ? 'treegrid' : gridMode() ? 'grid' : null"
-          [attr.aria-rowcount]="ariaRowCount()"
-          [attr.aria-labelledby]="caption() ? captionId : null"
-        >
-          @if (caption()) {
-            <caption class="strct-dg__caption" [id]="captionId">
-              {{
-                caption()
-              }}
-            </caption>
-          }
-          <thead>
-            <tr>
-              <!-- A utility column is still a column: axe reports every empty
-                   header, and a screen-reader user hears nothing where the
-                   detail, expand and select controls are. The name is hidden,
-                   not absent. -->
-              @if (canDetail()) {
-                <th
-                  class="strct-dg__expandcol"
-                  scope="col"
-                  [class.strct-dg__cell--sticky]="stickyActive()"
-                  [style.insetInlineStart.px]="utilLeft('detail')"
-                >
-                  <span class="strct-sr-only">{{ L().detailColumn }}</span>
-                </th>
-              }
-              @if (canExpand()) {
-                <th
-                  class="strct-dg__expandcol"
-                  scope="col"
-                  [class.strct-dg__cell--sticky]="stickyActive()"
-                  [style.insetInlineStart.px]="utilLeft('expand')"
-                >
-                  <span class="strct-sr-only">{{ L().expandColumn }}</span>
-                </th>
-              }
-              @if (hasSelectionColumn()) {
-                <th
-                  class="strct-dg__sel"
-                  scope="col"
-                  [class.strct-dg__cell--sticky]="stickyActive()"
-                  [style.insetInlineStart.px]="utilLeft('sel')"
-                >
-                  @if (mode() === 'multiple') {
-                    <strct-checkbox
-                      [ariaLabel]="L().selectAll"
-                      [checked]="allPageSelected()"
-                      [indeterminate]="somePageSelected()"
-                      (checkedChange)="toggleAll()"
-                    />
-                  } @else {
-                    <span class="strct-sr-only">{{ L().selectColumn }}</span>
-                  }
-                </th>
-              }
-              @for (col of visibleColumns(); track col.key) {
-                <th
-                  scope="col"
-                  [style.text-align]="col.align ?? (col.numeric ? 'end' : 'start')"
-                  [style.width]="colWidth(col.key) ?? col.width ?? null"
-                  [class.strct-dg__th--sortable]="col.sortable"
-                  [class.strct-dg__th--drop]="col.key === dropKey()"
-                  [class.strct-dg__cell--sticky]="isSticky(col)"
-                  [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
-                  [style.insetInlineStart.px]="stickyLeft(col.key)"
-                  [attr.data-col]="col.key"
-                  [attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
-                  [attr.draggable]="reorderable() ? true : null"
-                  (dragstart)="onColDragStart(col.key, $event)"
-                  (dragover)="onColDragOver(col.key, $event)"
-                  (drop)="onColDrop(col.key)"
-                  (dragend)="onColDragEnd()"
-                >
-                  <span class="strct-dg__hd">
-                    <!-- A header that sorts is a button: a th with tabindex is
-                         read as "column header, focusable" and never says it
-                         can be activated. aria-sort stays on the th, which is
-                         what carries the column's sorted state. -->
-                    @if (col.sortable) {
-                      <!-- The button covers most of the header, so it carries
-                           the drag source too: a reorderable column has to be
-                           grabbable where the pointer actually lands. The
-                           event bubbles to the th's own handlers. -->
-                      <button
-                        type="button"
-                        class="strct-dg__sortbtn"
-                        [attr.draggable]="reorderable() ? true : null"
-                        (click)="sortBy(col.key)"
-                      >
-                        {{ col.label }}
-                        <strct-icon
-                          class="strct-dg__sorticon"
-                          [name]="sortIcon(col.key)"
-                          [size]="13"
-                        />
-                      </button>
-                    } @else {
-                      {{ col.label }}
-                    }
-                    @if (col.filterable || col.filterOptions) {
-                      <button
-                        #fbtn
-                        type="button"
-                        class="strct-dg__filterbtn"
-                        [class.strct-dg__filterbtn--active]="hasFilter(col.key)"
-                        [attr.aria-expanded]="filterOpenKey() === col.key"
-                        [attr.aria-label]="L().filterColumn + ': ' + col.label"
-                        (click)="toggleFilterPanel(col.key, $event)"
-                        (keydown.enter)="$event.stopPropagation()"
-                        (keydown.space)="$event.stopPropagation()"
-                      >
-                        <strct-icon name="filter" [size]="12" />
-                      </button>
-                      @if (filterOpenKey() === col.key) {
-                        <div
-                          class="strct-dg__filterpanel"
-                          role="dialog"
-                          [attr.aria-label]="L().filterColumn + ': ' + col.label"
-                          [strctOverlay]="fbtn"
-                          strctOverlayPlacement="bottom-start"
-                          (click)="$event.stopPropagation()"
-                          (keydown.enter)="$event.stopPropagation()"
-                          (keydown.space)="$event.stopPropagation()"
-                        >
-                          @if (col.filterOptions; as opts) {
-                            @for (opt of opts; track $index) {
-                              <label class="strct-dg__filteropt">
-                                <input
-                                  type="checkbox"
-                                  [checked]="optionChecked(col.key, opt)"
-                                  (change)="toggleFilterOption(col.key, opt)"
-                                />
-                                <span>{{ opt }}</span>
-                              </label>
-                            }
-                          } @else {
-                            <input
-                              class="strct-dg__filterinput"
-                              type="text"
-                              [attr.placeholder]="L().filterPlaceholder"
-                              [attr.aria-label]="L().filterColumn + ': ' + col.label"
-                              [value]="textFilter(col.key)"
-                              (input)="setTextFilter(col.key, $any($event.target).value)"
-                            />
-                          }
-                          <button
-                            type="button"
-                            class="strct-dg__filterclear"
-                            [disabled]="!hasFilter(col.key)"
-                            (click)="clearFilter(col.key)"
-                          >
-                            {{ L().clearFilter }}
-                          </button>
-                        </div>
-                      }
-                    }
-                  </span>
-                  @if (resizable() && col.resizable !== false) {
-                    <!-- A separator, not a bare div: a column could only be
-                         resized with a mouse, which is the one input a
-                         console cannot assume. -->
-                    <div
-                      class="strct-dg__resize"
-                      role="separator"
-                      aria-orientation="vertical"
-                      tabindex="0"
-                      [attr.aria-label]="L().resizeColumn(col.label)"
-                      [attr.aria-valuenow]="separatorValue(col.key)"
-                      [attr.aria-valuemin]="40"
-                      (mousedown)="onResizeStart($event, col.key)"
-                      (keydown)="onResizeKey($event, col.key)"
-                      (dblclick)="resetWidth(col.key)"
-                    ></div>
-                  }
-                </th>
-              }
-              @if (canActions()) {
-                <th class="strct-dg__actioncol" scope="col" [attr.aria-label]="L().actions"></th>
-              }
-            </tr>
-          </thead>
-          <!--
-            focusin is the real keyboard path (focus does not bubble from cells);
-            the plain focus binding exists to satisfy mouse-events-have-key-events.
-          -->
-          <tbody
-            (mouseover)="revealIfClipped($event)"
-            (focusin)="revealIfClipped($event)"
-            (focus)="revealIfClipped($event)"
-          >
-            @if (loading()) {
-              @for (_ of [1, 2, 3, 4, 5]; track $index) {
-                <tr class="strct-dg__skeleton-row">
-                  @if (canDetail()) {
-                    <td class="strct-dg__expandcell"></td>
-                  }
-                  @if (canExpand()) {
-                    <td class="strct-dg__expandcell"></td>
-                  }
-                  @if (hasSelectionColumn()) {
-                    <td class="strct-dg__sel"></td>
-                  }
-                  @for (col of visibleColumns(); track col.key) {
-                    <td [style.text-align]="col.align ?? 'start'">
-                      <div class="strct-dg__skeleton-block"></div>
-                    </td>
-                  }
-                  @if (canActions()) {
-                    <td class="strct-dg__actioncell"></td>
-                  }
-                </tr>
-              }
-            } @else {
-              @if (virtual() && topPad() > 0) {
-                <tr class="strct-dg__vspacer" aria-hidden="true">
-                  <td [attr.colspan]="colspan()" [style.height.px]="topPad()"></td>
-                </tr>
-              }
-              @for (it of displayItems(); track itemKey(it)) {
-                @if (it.group; as grp) {
-                  <!-- Group header: distinct value + count, collapsible. -->
-                  <tr class="strct-dg__grouprow">
-                    @if (groupSelect() && mode() === 'multiple') {
-                      <td class="strct-dg__sel">
-                        <strct-checkbox
-                          [ariaLabel]="L().selectAllInGroup(grp.label)"
-                          [checked]="groupAllSelected(grp.key)"
-                          [indeterminate]="groupSomeSelected(grp.key)"
-                          (checkedChange)="toggleGroupSelection(grp.key)"
-                        />
-                      </td>
-                    }
-                    <td
-                      [attr.colspan]="
-                        groupSelect() && mode() === 'multiple' ? colspan() - 1 : colspan()
-                      "
-                    >
-                      <button
-                        type="button"
-                        class="strct-dg__groupbtn"
-                        [attr.aria-expanded]="!grp.collapsed"
-                        (click)="toggleGroup(grp.key)"
-                      >
-                        <span
-                          class="strct-dg__groupchev"
-                          [class.strct-dg__groupchev--open]="!grp.collapsed"
-                        >
-                          <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-                        </span>
-                        @if (groupHeaderDef(); as tpl) {
-                          <!-- The consumer draws the row; the button, its
-                               aria-expanded and the keyboard stay ours. -->
-                          <ng-container
-                            [ngTemplateOutlet]="tpl.template"
-                            [ngTemplateOutletContext]="{
-                              $implicit: grp,
-                              group: grp,
-                              count: grp.count,
-                            }"
-                          />
-                        } @else {
-                          <span
-                            class="strct-dg__grouplabel strct-dg__grouplabel--{{
-                              grp.status ?? 'none'
-                            }}"
-                            >{{ grp.label }}</span
-                          >
-                          <!-- The three spans run together in the button's
-                               name ("Needs your decision1Blocks the join…");
-                               the separators are read, not seen. -->
-                          <span class="strct-dg__announcer">, </span>
-                          <span
-                            class="strct-dg__groupcount strct-dg__groupcount--{{
-                              grp.status ?? 'none'
-                            }}"
-                            >{{ grp.count }}</span
-                          >
-                          <!-- Seen: the chip's number. Heard: the number with
-                               the grid's noun, because "Inconclusive, 3" does
-                               not say three of what. -->
-                          <span class="strct-dg__announcer"> {{ countNoun(grp.count) }}</span>
-                          @if (grp.note) {
-                            <span class="strct-dg__announcer">. </span>
-                            <span class="strct-dg__groupnote">{{ grp.note }}</span>
-                          }
-                        }
-                      </button>
-                    </td>
-                  </tr>
-                } @else {
-                  @let row = it.row!;
-                  <tr
-                    [attr.aria-rowindex]="ariaRowIndex(row)"
-                    [class.strct-dg__row--selected]="isSelected(row)"
-                    [class.strct-dg__row--locked]="lockedReason(row) !== null"
-                    [attr.aria-selected]="mode() === 'none' ? null : isSelected(row)"
-                    [attr.aria-disabled]="lockedReason(row) !== null ? 'true' : null"
-                    [attr.title]="lockedReason(row) || null"
-                    (click)="onRowPick(row)"
-                    [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
-                    [attr.aria-level]="childrenKey() ? treeDepth(row) + 1 : null"
-                    [attr.aria-expanded]="
-                      childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null
-                    "
-                    [attr.tabindex]="
-                      childrenKey()
-                        ? treeRowTabindex(row)
-                        : gridMode()
-                          ? gridRowTabindex(row)
-                          : canDetail()
-                            ? paneRowTabindex(row)
-                            : null
-                    "
-                    (keydown)="
-                      childrenKey()
-                        ? onTreeRowKeydown(row, $event)
-                        : gridMode()
-                          ? onGridRowKeydown(row, $event)
-                          : onPaneRowKeydown(row, $event)
-                    "
-                    (dblclick)="onRowActivate(row)"
-                  >
-                    @if (canDetail()) {
-                      <td
-                        class="strct-dg__expandcell"
-                        [class.strct-dg__cell--sticky]="stickyActive()"
-                        [style.insetInlineStart.px]="utilLeft('detail')"
-                      >
-                        <button
-                          type="button"
-                          [attr.tabindex]="ctlTabindex()"
-                          class="strct-dg__detailbtn"
-                          [class.strct-dg__detailbtn--active]="row === activeRow()"
-                          [attr.aria-expanded]="row === activeRow()"
-                          [attr.aria-label]="L().openDetail"
-                          (click)="openDetail(row)"
-                        >
-                          <strct-icon name="chevronDoubleRight" [size]="13" [strokeWidth]="1.6" />
-                        </button>
-                      </td>
-                    }
-                    @if (canExpand()) {
-                      <td
-                        class="strct-dg__expandcell"
-                        [class.strct-dg__cell--sticky]="stickyActive()"
-                        [style.insetInlineStart.px]="utilLeft('expand')"
-                      >
-                        <button
-                          type="button"
-                          [attr.tabindex]="ctlTabindex()"
-                          class="strct-dg__expandbtn"
-                          [class.strct-dg__expandbtn--open]="isExpanded(row)"
-                          [attr.aria-expanded]="isExpanded(row)"
-                          [attr.aria-label]="L().toggleDetail"
-                          (click)="toggleExpand(row)"
-                        >
-                          <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-                        </button>
-                      </td>
-                    }
-                    @if (hasSelectionColumn()) {
-                      <td
-                        class="strct-dg__sel"
-                        [class.strct-dg__cell--sticky]="stickyActive()"
-                        [style.insetInlineStart.px]="utilLeft('sel')"
-                      >
-                        @if (mode() === 'single') {
-                          <!-- A native radio group: one name per grid, so the
-                               arrow keys move between rows and Space picks,
-                               without the grid inventing its own keyboarding. -->
-                          <input
-                            type="radio"
-                            class="strct-dg__radio"
-                            [name]="radioName"
-                            [attr.aria-label]="selectRowLabel(row)"
-                            [attr.aria-description]="lockedReason(row) || null"
-                            [checked]="isSelected(row)"
-                            [disabled]="lockedReason(row) !== null"
-                            [attr.tabindex]="ctlTabindex()"
-                            (change)="selectSingle(row)"
-                            (click)="$event.stopPropagation()"
-                          />
-                        } @else {
-                          <!-- click fires (and bubbles) before the input's change,
-                               so the modifier is recorded by the time toggleRow runs. -->
-                          <strct-checkbox
-                            [ariaLabel]="selectRowLabel(row)"
-                            [attr.aria-description]="lockedReason(row) || null"
-                            [checked]="isSelected(row)"
-                            [disabled]="lockedReason(row) !== null"
-                            [tabIndex]="ctlTabindex()"
-                            (click)="noteRangeIntent($event); $event.stopPropagation()"
-                            (checkedChange)="toggleRow(row)"
-                          />
-                        }
-                      </td>
-                    }
-                    @for (col of visibleColumns(); track col.key; let colIdx = $index) {
-                      <td
-                        [style.text-align]="col.align ?? (col.numeric ? 'end' : 'start')"
-                        [class.strct-dg__cell--mono]="col.mono"
-                        [class.strct-dg__cell--muted]="col.muted"
-                        [class.strct-dg__cell--numeric]="col.numeric"
-                        [class.strct-dg__cell--sticky]="isSticky(col)"
-                        [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
-                        [class.strct-dg__cell--editable]="col.editable"
-                        [style.insetInlineStart.px]="stickyLeft(col.key)"
-                        [attr.data-edit]="col.editable ? '' : null"
-                        [attr.tabindex]="col.editable ? editCellTabindex(row, col) : null"
-                        [attr.aria-describedby]="col.editable ? editHintId : null"
-                        (dblclick)="col.editable && startEdit(row, col)"
-                        (focus)="col.editable && onEditCellFocus(row, col)"
-                        (keydown)="col.editable && onEditCellKeydown(row, col, $event)"
-                      >
-                        @if (childrenKey() && colIdx === 0) {
-                          <span
-                            class="strct-dg__treepad"
-                            [style.width.px]="treeDepth(row) * 18"
-                            aria-hidden="true"
-                          ></span>
-                          @if (treeHasChildren(row)) {
-                            <button
-                              type="button"
-                              class="strct-dg__treebtn"
-                              [class.strct-dg__treebtn--open]="treeExpanded(row)"
-                              [attr.aria-expanded]="treeExpanded(row)"
-                              [attr.aria-label]="L().toggleChildren"
-                              (click)="toggleTreeRow(row)"
-                            >
-                              <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-                            </button>
-                          } @else {
-                            <span
-                              class="strct-dg__treebtn strct-dg__treebtn--leaf"
-                              aria-hidden="true"
-                            ></span>
-                          }
-                        }
-                        @if (isEditingCell(row, col)) {
-                          @switch (col.editor ?? 'text') {
-                            @case ('select') {
-                              <!-- Choosing is the commit: there is nothing to
-                                   confirm with Enter once an option is picked. -->
-                              <strct-select
-                                class="strct-dg__editselect"
-                                [options]="editorOptionsFor(row, col)"
-                                [listLabel]="L().editCell + ': ' + col.label"
-                                [ngModel]="row[col.key]"
-                                (ngModelChange)="commitValue(row, col, $event)"
-                                (keydown.escape)="cancelEdit($event)"
-                                (click)="$event.stopPropagation()"
-                              />
-                            }
-                            @case ('number') {
-                              <strct-number
-                                class="strct-dg__editnumber"
-                                [ariaLabel]="L().editCell + ': ' + col.label"
-                                [min]="col.editorMin ?? null"
-                                [max]="col.editorMax ?? null"
-                                [step]="col.editorStep ?? 1"
-                                [ngModel]="row[col.key]"
-                                (ngModelChange)="editDraft.set($event)"
-                                (keydown.enter)="commitDraft(row, col, $event)"
-                                (keydown.escape)="cancelEdit($event)"
-                                (focusout)="commitOnLeave(row, col, $event)"
-                                (click)="$event.stopPropagation()"
-                              />
-                            }
-                            @default {
-                              <input
-                                class="strct-dg__editinput"
-                                type="text"
-                                [value]="row[col.key] ?? ''"
-                                [attr.aria-label]="L().editCell + ': ' + col.label"
-                                (keydown.enter)="commitEdit(row, col, $event)"
-                                (keydown.escape)="cancelEdit($event)"
-                                (blur)="commitEdit(row, col, $event)"
-                                (click)="$event.stopPropagation()"
-                              />
-                            }
-                          }
-                        } @else if (cellTemplate(col.key); as tpl) {
-                          <ng-container
-                            [ngTemplateOutlet]="tpl"
-                            [ngTemplateOutletContext]="{
-                              $implicit: row,
-                              row,
-                              value: row[col.key],
-                              column: col,
-                            }"
-                          />
-                        } @else if (isBlank(row, col)) {
-                          <span
-                            class="strct-dg__empty"
-                            [attr.aria-label]="col.emptyLabel || null"
-                            >{{ col.emptyText }}</span
-                          >
-                        } @else {
-                          {{ displayValue(row, col) }}
-                          @if (col.descriptionKey && row[col.descriptionKey]) {
-                            <span class="strct-dg__celldesc">{{ row[col.descriptionKey] }}</span>
-                          }
-                        }
-                        <!-- The affordance a mouse never needed: a cell that
-                             can be edited says so on hover and on focus. -->
-                        @if (col.editable && editHint() && !isEditingCell(row, col)) {
-                          <strct-icon
-                            class="strct-dg__editpencil"
-                            name="pencil"
-                            [size]="12"
-                            [strokeWidth]="1.6"
-                            aria-hidden="true"
-                          />
-                        }
-                      </td>
-                    }
-                    @if (canActions()) {
-                      <td class="strct-dg__actioncell">
-                        <button
-                          type="button"
-                          [attr.tabindex]="ctlTabindex()"
-                          class="strct-dg__kebab"
-                          [attr.aria-label]="L().rowActions"
-                          (click)="openRowMenu(row, $event)"
-                        >
-                          <strct-icon name="dots" [size]="16" />
-                        </button>
-                      </td>
-                    }
-                  </tr>
-                  @if (canExpand() && isExpanded(row)) {
-                    <tr class="strct-dg__detailrow">
-                      <td [attr.colspan]="colspan()">
-                        <div class="strct-dg__detail">
-                          <ng-container
-                            [ngTemplateOutlet]="detailDef()!.template"
-                            [ngTemplateOutletContext]="{ $implicit: row, row }"
-                          />
-                        </div>
-                      </td>
-                    </tr>
-                  }
-                }
-              } @empty {
-                <!-- "Nothing here" and "nothing matches what you typed" are
-                     different states: the second one can be undone, and
-                     saying so is the whole point. -->
-                <tr>
-                  <td class="strct-dg__emptyrow" [attr.colspan]="colspan()">
-                    @if (filteredAway()) {
-                      <strct-empty-state
-                        size="sm"
-                        [titleLevel]="null"
-                        [title]="L().noMatches"
-                        [description]="noMatchesDescription()"
-                      >
-                        <button strct-button variant="flat" size="sm" (click)="clearAllFilters()">
-                          {{ L().clearFilters }}
-                        </button>
-                      </strct-empty-state>
-                    } @else {
-                      <!-- Not a heading: a grid is a region of a page, and an
-                           empty one used to put an <h3> in its outline. -->
-                      <strct-empty-state size="sm" [titleLevel]="null" [title]="emptyText()" />
-                    }
-                  </td>
-                </tr>
-              }
-              @if (virtual() && bottomPad() > 0) {
-                <tr class="strct-dg__vspacer" aria-hidden="true">
-                  <td [attr.colspan]="colspan()" [style.height.px]="bottomPad()"></td>
-                </tr>
-              }
-            }
-          </tbody>
-        </table>
-      </div>
-
-      @if (paneOpen()) {
-        <aside class="strct-dg__pane">
-          <div class="strct-dg__pane-head">
-            @if (narrowPane()) {
-              <!-- The pane has taken the list's place, so there is a way back. -->
-              <button
-                type="button"
-                class="strct-dg__pane-back"
-                [attr.aria-label]="L().backToList"
-                (click)="closePane()"
-              >
-                <strct-icon name="chevronLeft" [size]="13" />
-              </button>
-            }
-            <span class="strct-dg__pane-title">
-              <ng-content select="[strctDetailPaneTitle]" />
-              @if (!paneTitleDef()) {
-                {{ activeRow()![columns()[0].key] }}
-              }
-            </span>
-            <span class="strct-dg__pane-meta">
-              <ng-content select="[strctDetailPaneMeta]" />
-            </span>
-            <span class="strct-dg__pane-actions">
-              <ng-content select="[strctDetailPaneActions]" />
-            </span>
-            <button
-              type="button"
-              class="strct-dg__pane-close"
-              [attr.aria-label]="L().closeDetail"
-              (click)="closePane()"
-            >
-              <strct-icon name="close" [size]="13" />
-            </button>
-          </div>
-          <div class="strct-dg__pane-body">
-            <ng-container
-              [ngTemplateOutlet]="detailDef()!.template"
-              [ngTemplateOutletContext]="{ $implicit: activeRow(), row: activeRow() }"
-            />
-          </div>
-        </aside>
-      }
-    </div>
-
-    @if (showFooter()) {
-      <div class="strct-dg__foot">
-        <div class="strct-dg__foot-left">
-          @if (columnChooser() || sync()) {
-            <div class="strct-dg__actions">
-              <strct-button-group>
-                @if (columnChooser()) {
-                  <button
-                    strct-button
-                    size="sm"
-                    [class.is-open]="chooserOpen()"
-                    [disabled]="footerActionsDisabled()"
-                    [attr.aria-label]="L().chooseColumns"
-                    (click)="toggleChooser($event)"
-                  >
-                    <strct-icon name="settings" [size]="16" />
-                  </button>
-                }
-                @if (sync()) {
-                  <button
-                    strct-button
-                    size="sm"
-                    [disabled]="footerActionsDisabled()"
-                    [attr.aria-label]="L().refresh"
-                    (click)="syncChange.emit()"
-                  >
-                    <strct-icon name="refresh" [size]="16" />
-                  </button>
-                }
-              </strct-button-group>
-              @if (columnChooser() && chooserOpen()) {
-                <div class="strct-dg__chooser-menu">
-                  @for (col of columns(); track col.key) {
-                    <!-- The whole row toggles; the checkbox's own click must not
-                         reach the row or the column would flip twice. -->
-                    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-                    <div
-                      class="strct-dg__chooser-item"
-                      (click)="toggleColumn(col.key, hiddenColumns().has(col.key))"
-                    >
-                      <strct-checkbox
-                        [checked]="!hiddenColumns().has(col.key)"
-                        (checkedChange)="toggleColumn(col.key, $event)"
-                        (click)="$event.stopPropagation()"
-                      />
-                      <span>{{ col.label }}</span>
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          }
-          <span class="strct-dg__count">
-            @if (paging() === 'more') {
-              {{ L().showing(rows().length, moreTotal() ?? undefined) }}
-            } @else {
-              {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}
-            }
-            @if (selectedCount() && mode() !== 'single') {
-              <span class="strct-dg__count-sep">|</span>
-              <span class="strct-dg__count-sel">{{ selectedCount() }} {{ L().selected }}</span>
-            }
-          </span>
-        </div>
-        <div class="strct-dg__foot-right">
-          <!-- A feed that pages by cursor loads more at the end: page numbers
-               are something a cursor API cannot answer. It takes the pager's
-               place — the column chooser, the sync button and the count are
-               the footer's, not the pager's. -->
-          @if (paging() === 'more') {
-            @if (hasMore()) {
-              <button
-                strct-button
-                size="sm"
-                class="strct-dg__more"
-                [disabled]="loadingMore()"
-                (click)="loadMore.emit()"
-              >
-                @if (loadingMore()) {
-                  <strct-spinner size="sm" />
-                }
-                {{ L().loadMore }}
-              </button>
-            }
-          } @else if (pageSize() > 0 && !groupBy()) {
-            <strct-pagination
-              [total]="totalCount()"
-              [pageSize]="pageSize()"
-              [page]="page()"
-              (pageChange)="goToPage($event)"
-            />
-          }
-        </div>
-      </div>
-    }
-  `, isInline: true, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t2)}.strct-dg__bulk{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;padding:7px 12px;border-bottom:1px solid var(--b2);background:var(--acc-s);color:var(--t2);font-size:var(--text-md)}.strct-dg__announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t2)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t2)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t2);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:var(--text-sm);font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__grouplabel--critical{color:var(--critical)}.strct-dg__grouplabel--warning{color:var(--warning)}.strct-dg__grouplabel--success{color:var(--success)}.strct-dg__grouplabel--accent{color:var(--acc)}.strct-dg__grouplabel--neutral,.strct-dg__grouplabel--none{color:var(--t1)}.strct-dg__groupnote{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:4px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg__groupcount--critical{background:var(--critical-bg);color:var(--critical)}.strct-dg__groupcount--warning{background:var(--warning-bg);color:var(--warning)}.strct-dg__groupcount--success{background:var(--success-bg);color:var(--success)}.strct-dg__groupcount--neutral,.strct-dg__groupcount--none{background:var(--bg-3);color:var(--t2)}.strct-dg-host--singleline .strct-dg{border-collapse:separate;border-spacing:0}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:4px;border-start-end-radius:4px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:4px;border-end-end-radius:4px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__sortbtn{display:inline-flex;align-items:center;gap:inherit;padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer}.strct-dg__sortbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel .strct-cb,.strct-dg__sel .strct-dg__radio,.strct-dg__expandbtn{position:relative}.strct-dg__sel .strct-cb:after,.strct-dg__sel .strct-dg__radio:after,.strct-dg__expandbtn:after{content:\"\";position:absolute;inset:-11px -13px;min-width:24px;min-height:24px}.strct-dg-host--compact .strct-dg__sel .strct-cb:after,.strct-dg-host--compact .strct-dg__sel .strct-dg__radio:after,.strct-dg-host--compact .strct-dg__expandbtn:after{inset:-7px -11px}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned>.strct-dg__scroll{flex:0 0 auto;width:var(--strct-dg-pane-list-w, 260px);min-width:var(--strct-dg-pane-list-w, 260px);max-width:var(--strct-dg-pane-list-w, 260px)}.strct-dg__layout--paned>.strct-dg__scroll>.strct-dg{width:100%;min-width:0;max-width:none;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__layout--panetakeover>.strct-dg__scroll{display:none}.strct-dg__layout--panetakeover>.strct-dg__pane{flex:1;min-width:0}.strct-dg__pane-meta,.strct-dg__pane-actions{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-dg__pane-meta:empty,.strct-dg__pane-actions:empty{display:none}.strct-dg__pane-actions{margin-inline-start:auto}.strct-dg__pane-back{display:inline-flex;align-items:center;border:0;background:none;color:var(--t2);cursor:pointer;padding:2px;border-radius:var(--radius-sm)}.strct-dg__row--clickable{cursor:pointer}.strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:4px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t2);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:4px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:3px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:var(--text-sm);cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "mode", "modeLabel", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "pageLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "disabled", "indeterminate", "ariaLabel", "description", "tabIndex"], outputs: ["checkedChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly", "disabled", "disabledReason", "disabledReasonPosition"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctSearchbox, selector: "strct-searchbox", inputs: ["placeholder", "hint", "trigger", "clearable", "ariaLabel", "clearLabel", "value"], outputs: ["valueChange", "search", "activated"] }, { kind: "component", type: StrctSelect, selector: "strct-select", inputs: ["options", "placeholder", "ariaLabel", "listLabel", "emptyText", "disabled", "compareWith"] }, { kind: "component", type: StrctNumber, selector: "strct-number", inputs: ["min", "max", "step", "placeholder", "ariaLabel", "incrementLabel", "decrementLabel", "disabled"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }, { kind: "component", type: StrctEmptyState, selector: "strct-empty-state", inputs: ["variant", "icon", "tone", "title", "titleLevel", "size", "description"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDatagrid, isStandalone: true, selector: "strct-datagrid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, pageSizeFlat: { classPropertyName: "pageSizeFlat", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectableFlat: { classPropertyName: "selectableFlat", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, detailPaneFlat: { classPropertyName: "detailPaneFlat", publicName: "detailPane", isSignal: true, isRequired: false, transformFunction: null }, paneListWidthFlat: { classPropertyName: "paneListWidthFlat", publicName: "paneListWidth", isSignal: true, isRequired: false, transformFunction: null }, paneTakeoverWidthFlat: { classPropertyName: "paneTakeoverWidthFlat", publicName: "paneTakeoverWidth", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, singleLine: { classPropertyName: "singleLine", publicName: "singleLine", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnChooser: { classPropertyName: "columnChooser", publicName: "columnChooser", isSignal: true, isRequired: false, transformFunction: null }, syncFlat: { classPropertyName: "syncFlat", publicName: "sync", isSignal: true, isRequired: false, transformFunction: null }, footerActionsDisabled: { classPropertyName: "footerActionsDisabled", publicName: "footerActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, selectionModeFlat: { classPropertyName: "selectionModeFlat", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, rowSelectableFlat: { classPropertyName: "rowSelectableFlat", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, hasMoreFlat: { classPropertyName: "hasMoreFlat", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreFlat: { classPropertyName: "loadingMoreFlat", publicName: "loadingMore", isSignal: true, isRequired: false, transformFunction: null }, moreTotalFlat: { classPropertyName: "moreTotalFlat", publicName: "moreTotal", isSignal: true, isRequired: false, transformFunction: null }, groupSelectFlat: { classPropertyName: "groupSelectFlat", publicName: "groupSelect", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, initialSelectionFlat: { classPropertyName: "initialSelectionFlat", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, viewportHeightFlat: { classPropertyName: "viewportHeightFlat", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeightFlat: { classPropertyName: "maxHeightFlat", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, editHint: { classPropertyName: "editHint", publicName: "editHint", isSignal: true, isRequired: false, transformFunction: null }, rowHeightFlat: { classPropertyName: "rowHeightFlat", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, lazyFlat: { classPropertyName: "lazyFlat", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalFlat: { classPropertyName: "totalFlat", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, stateKeyFlat: { classPropertyName: "stateKeyFlat", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, columnState: { classPropertyName: "columnState", publicName: "columnState", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, groupByFlat: { classPropertyName: "groupByFlat", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, groupsFlat: { classPropertyName: "groupsFlat", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, showEmptyGroupsFlat: { classPropertyName: "showEmptyGroupsFlat", publicName: "showEmptyGroups", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, quickFilter: { classPropertyName: "quickFilter", publicName: "quickFilter", isSignal: true, isRequired: false, transformFunction: null }, quickFilterFieldsFlat: { classPropertyName: "quickFilterFieldsFlat", publicName: "quickFilterFields", isSignal: true, isRequired: false, transformFunction: null }, quickFilterableFlat: { classPropertyName: "quickFilterableFlat", publicName: "quickFilterable", isSignal: true, isRequired: false, transformFunction: null }, quickFilterAlignFlat: { classPropertyName: "quickFilterAlignFlat", publicName: "quickFilterAlign", isSignal: true, isRequired: false, transformFunction: null }, childrenKeyFlat: { classPropertyName: "childrenKeyFlat", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, interactionMode: { classPropertyName: "interactionMode", publicName: "interactionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionColumnFlat: { classPropertyName: "selectionColumnFlat", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, selectionCfg: { classPropertyName: "selectionCfg", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, paneFlat: { classPropertyName: "paneFlat", publicName: "pane", isSignal: true, isRequired: false, transformFunction: null }, pagingFlat: { classPropertyName: "pagingFlat", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null }, virtualFlat: { classPropertyName: "virtualFlat", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, groupingCfg: { classPropertyName: "groupingCfg", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, filteringCfg: { classPropertyName: "filteringCfg", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, stateCfg: { classPropertyName: "stateCfg", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeRowId: "activeRowIdChange", selectedId: "selectedIdChange", loadMore: "loadMore", selectedIds: "selectedIdsChange", columnState: "columnStateChange", collapsedGroups: "collapsedGroupsChange", filters: "filtersChange", quickFilter: "quickFilterChange", rowActivate: "rowActivate", selectionChange: "selectionChange", syncChange: "syncChange", rowAction: "rowAction", lazyLoad: "lazyLoad", cellEdit: "cellEdit" }, host: { listeners: { "document:click": "onDocClickOverlays($event)", "document:keydown.escape": "onEscapeOverlays($event)" }, properties: { "attr.aria-busy": "loading() || loadingMore() ? \"true\" : null", "class.strct-dg-host--compact": "compact()", "class.strct-dg-host--singleline": "singleLine()", "class.strct-dg-host--virtual": "virtual()", "class.strct-dg-host--bounded": "!virtual() && maxHeight() !== null", "class.strct-dg-host--sticky": "stickyActive()", "class.strct-dg-host--flush": "flush()" }, classAttribute: "strct-dg-host" }, queries: [{ propertyName: "detailDef", first: true, predicate: StrctRowDetailDef, descendants: true, isSignal: true }, { propertyName: "groupHeaderDef", first: true, predicate: StrctGroupHeaderDef, descendants: true, isSignal: true }, { propertyName: "paneTitleDef", first: true, predicate: StrctDetailPaneTitle, descendants: true, isSignal: true }, { propertyName: "actionBarDef", first: true, predicate: StrctDatagridActionBar, descendants: true, isSignal: true }, { propertyName: "actionBarCaptionDef", first: true, predicate: StrctDatagridActionBarCaption, descendants: true, isSignal: true }, { propertyName: "cellDefs", predicate: StrctCellDef, isSignal: true }], ngImport: i0, template: "<!-- One polite region for everything the grid does to itself: sorting,\n     paging and filtering all change the rows without saying so. -->\n<span class=\"strct-dg__announcer\" role=\"status\" aria-live=\"polite\">{{ announcement() }}</span>\n@if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {\n  <div class=\"strct-dg__toolbar\">\n    @if (quickFilterable()) {\n      <strct-searchbox\n        class=\"strct-dg__quickfilter\"\n        [class.strct-dg__quickfilter--end]=\"quickFilterAlign() === 'end'\"\n        [placeholder]=\"L().quickFilter\"\n        [ariaLabel]=\"L().quickFilter\"\n        [value]=\"quickFilter()\"\n        (valueChange)=\"quickFilter.set($event)\"\n      />\n      @if (filterNote(); as note) {\n        <span\n          class=\"strct-dg__filternote\"\n          [class.strct-dg__filternote--end]=\"quickFilterAlign() === 'end'\"\n          >{{ note }}</span\n        >\n      }\n    }\n    <span class=\"strct-dg__actioncaption\">\n      <ng-content select=\"[strctDatagridActionBarCaption]\" />\n    </span>\n    <ng-content select=\"[strctDatagridActionBar]\" />\n  </div>\n}\n\n@if (hasEditableColumn()) {\n  <!-- What the editable cells point at with aria-describedby: a keyboard\n       user is told the cell can be edited, and how. -->\n  <!-- In flow, not absolutely positioned: an out-of-flow box whose\n       containing block is the page extends the document's scrollable area\n       from wherever the grid happens to sit. 1x1 and clipped is enough. -->\n  <span\n    class=\"strct-sr-only\"\n    style=\"\n      display: inline-block;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    \"\n    [id]=\"editHintId\"\n    >{{ L().editCellInstructions }}</span\n  >\n}\n\n@if (bulkHint(); as hint) {\n  <!-- Selecting the page is not selecting the set. Say which one happened,\n       and offer the other. -->\n  <div class=\"strct-dg__bulk\" role=\"status\">\n    <span>{{ hint.text }}</span>\n    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"hint.run()\">\n      {{ hint.action }}\n    </button>\n  </div>\n}\n<div\n  class=\"strct-dg__layout\"\n  [class.strct-dg__layout--paned]=\"paneOpen()\"\n  [class.strct-dg__layout--panetakeover]=\"paneOpen() && narrowPane()\"\n  [style.--strct-dg-pane-list-w]=\"paneListWidth()\"\n>\n  <div\n    class=\"strct-dg__scroll\"\n    tabindex=\"0\"\n    role=\"region\"\n    [attr.aria-label]=\"L().rows\"\n    [style.max-height.px]=\"virtual() ? viewportHeight() : maxHeight()\"\n    (scroll)=\"virtual() && onScroll($event)\"\n  >\n    <table\n      class=\"strct-dg\"\n      [attr.role]=\"childrenKey() ? 'treegrid' : gridMode() ? 'grid' : null\"\n      [attr.aria-rowcount]=\"ariaRowCount()\"\n      [attr.aria-labelledby]=\"caption() ? captionId : null\"\n    >\n      @if (caption()) {\n        <caption class=\"strct-dg__caption\" [id]=\"captionId\">\n          {{\n            caption()\n          }}\n        </caption>\n      }\n      <thead>\n        <tr>\n          <!-- A utility column is still a column: axe reports every empty\n               header, and a screen-reader user hears nothing where the\n               detail, expand and select controls are. The name is hidden,\n               not absent. -->\n          @if (canDetail()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('detail')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().detailColumn }}</span>\n            </th>\n          }\n          @if (canExpand()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('expand')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().expandColumn }}</span>\n            </th>\n          }\n          @if (hasSelectionColumn()) {\n            <th\n              class=\"strct-dg__sel\"\n              scope=\"col\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('sel')\"\n            >\n              @if (mode() === 'multiple') {\n                <strct-checkbox\n                  [ariaLabel]=\"L().selectAll\"\n                  [checked]=\"allPageSelected()\"\n                  [indeterminate]=\"somePageSelected()\"\n                  (checkedChange)=\"toggleAll()\"\n                />\n              } @else {\n                <span class=\"strct-sr-only\">{{ L().selectColumn }}</span>\n              }\n            </th>\n          }\n          @for (col of visibleColumns(); track col.key) {\n            <th\n              scope=\"col\"\n              [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n              [style.width]=\"colWidth(col.key) ?? col.width ?? null\"\n              [class.strct-dg__th--sortable]=\"col.sortable\"\n              [class.strct-dg__th--drop]=\"col.key === dropKey()\"\n              [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n              [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n              [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n              [attr.data-col]=\"col.key\"\n              [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n              [attr.draggable]=\"reorderable() ? true : null\"\n              (dragstart)=\"onColDragStart(col.key, $event)\"\n              (dragover)=\"onColDragOver(col.key, $event)\"\n              (drop)=\"onColDrop(col.key)\"\n              (dragend)=\"onColDragEnd()\"\n            >\n              <span class=\"strct-dg__hd\">\n                <!-- A header that sorts is a button: a th with tabindex is\n                     read as \"column header, focusable\" and never says it\n                     can be activated. aria-sort stays on the th, which is\n                     what carries the column's sorted state. -->\n                @if (col.sortable) {\n                  <!-- The button covers most of the header, so it carries\n                       the drag source too: a reorderable column has to be\n                       grabbable where the pointer actually lands. The\n                       event bubbles to the th's own handlers. -->\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__sortbtn\"\n                    [attr.draggable]=\"reorderable() ? true : null\"\n                    (click)=\"sortBy(col.key)\"\n                  >\n                    {{ col.label }}\n                    <strct-icon class=\"strct-dg__sorticon\" [name]=\"sortIcon(col.key)\" [size]=\"13\" />\n                  </button>\n                } @else {\n                  {{ col.label }}\n                }\n                @if (col.filterable || col.filterOptions) {\n                  <button\n                    #fbtn\n                    type=\"button\"\n                    class=\"strct-dg__filterbtn\"\n                    [class.strct-dg__filterbtn--active]=\"hasFilter(col.key)\"\n                    [attr.aria-expanded]=\"filterOpenKey() === col.key\"\n                    [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                    (click)=\"toggleFilterPanel(col.key, $event)\"\n                    (keydown.enter)=\"$event.stopPropagation()\"\n                    (keydown.space)=\"$event.stopPropagation()\"\n                  >\n                    <strct-icon name=\"filter\" [size]=\"12\" />\n                  </button>\n                  @if (filterOpenKey() === col.key) {\n                    <div\n                      class=\"strct-dg__filterpanel\"\n                      role=\"dialog\"\n                      [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                      [strctOverlay]=\"fbtn\"\n                      strctOverlayPlacement=\"bottom-start\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown.enter)=\"$event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                    >\n                      @if (col.filterOptions; as opts) {\n                        @for (opt of opts; track $index) {\n                          <label class=\"strct-dg__filteropt\">\n                            <input\n                              type=\"checkbox\"\n                              [checked]=\"optionChecked(col.key, opt)\"\n                              (change)=\"toggleFilterOption(col.key, opt)\"\n                            />\n                            <span>{{ opt }}</span>\n                          </label>\n                        }\n                      } @else {\n                        <input\n                          class=\"strct-dg__filterinput\"\n                          type=\"text\"\n                          [attr.placeholder]=\"L().filterPlaceholder\"\n                          [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                          [value]=\"textFilter(col.key)\"\n                          (input)=\"setTextFilter(col.key, $any($event.target).value)\"\n                        />\n                      }\n                      <button\n                        type=\"button\"\n                        class=\"strct-dg__filterclear\"\n                        [disabled]=\"!hasFilter(col.key)\"\n                        (click)=\"clearFilter(col.key)\"\n                      >\n                        {{ L().clearFilter }}\n                      </button>\n                    </div>\n                  }\n                }\n              </span>\n              @if (resizable() && col.resizable !== false) {\n                <!-- A separator, not a bare div: a column could only be\n                     resized with a mouse, which is the one input a\n                     console cannot assume. -->\n                <div\n                  class=\"strct-dg__resize\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"L().resizeColumn(col.label)\"\n                  [attr.aria-valuenow]=\"separatorValue(col.key)\"\n                  [attr.aria-valuemin]=\"40\"\n                  (mousedown)=\"onResizeStart($event, col.key)\"\n                  (keydown)=\"onResizeKey($event, col.key)\"\n                  (dblclick)=\"resetWidth(col.key)\"\n                ></div>\n              }\n            </th>\n          }\n          @if (canActions()) {\n            <th class=\"strct-dg__actioncol\" scope=\"col\" [attr.aria-label]=\"L().actions\"></th>\n          }\n        </tr>\n      </thead>\n      <!--\n        focusin is the real keyboard path (focus does not bubble from cells);\n        the plain focus binding exists to satisfy mouse-events-have-key-events.\n      -->\n      <tbody\n        (mouseover)=\"revealIfClipped($event)\"\n        (focusin)=\"revealIfClipped($event)\"\n        (focus)=\"revealIfClipped($event)\"\n      >\n        @if (loading()) {\n          @for (_ of [1, 2, 3, 4, 5]; track $index) {\n            <tr class=\"strct-dg__skeleton-row\">\n              @if (canDetail()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (canExpand()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (hasSelectionColumn()) {\n                <td class=\"strct-dg__sel\"></td>\n              }\n              @for (col of visibleColumns(); track col.key) {\n                <td [style.text-align]=\"col.align ?? 'start'\">\n                  <div class=\"strct-dg__skeleton-block\"></div>\n                </td>\n              }\n              @if (canActions()) {\n                <td class=\"strct-dg__actioncell\"></td>\n              }\n            </tr>\n          }\n        } @else {\n          @if (virtual() && topPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td>\n            </tr>\n          }\n          @for (it of displayItems(); track itemKey(it)) {\n            @if (it.group; as grp) {\n              <!-- Group header: distinct value + count, collapsible. -->\n              <tr class=\"strct-dg__grouprow\">\n                @if (groupSelect() && mode() === 'multiple') {\n                  <td class=\"strct-dg__sel\">\n                    <strct-checkbox\n                      [ariaLabel]=\"L().selectAllInGroup(grp.label)\"\n                      [checked]=\"groupAllSelected(grp.key)\"\n                      [indeterminate]=\"groupSomeSelected(grp.key)\"\n                      (checkedChange)=\"toggleGroupSelection(grp.key)\"\n                    />\n                  </td>\n                }\n                <td\n                  [attr.colspan]=\"\n                    groupSelect() && mode() === 'multiple' ? colspan() - 1 : colspan()\n                  \"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__groupbtn\"\n                    [attr.aria-expanded]=\"!grp.collapsed\"\n                    (click)=\"toggleGroup(grp.key)\"\n                  >\n                    <span\n                      class=\"strct-dg__groupchev\"\n                      [class.strct-dg__groupchev--open]=\"!grp.collapsed\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </span>\n                    @if (groupHeaderDef(); as tpl) {\n                      <!-- The consumer draws the row; the button, its\n                           aria-expanded and the keyboard stay ours. -->\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: grp,\n                          group: grp,\n                          count: grp.count,\n                        }\"\n                      />\n                    } @else {\n                      <span\n                        class=\"strct-dg__grouplabel strct-dg__grouplabel--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.label }}</span\n                      >\n                      <!-- The three spans run together in the button's\n                           name (\"Needs your decision1Blocks the join\u2026\");\n                           the separators are read, not seen. -->\n                      <span class=\"strct-dg__announcer\">, </span>\n                      <span\n                        class=\"strct-dg__groupcount strct-dg__groupcount--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.count }}</span\n                      >\n                      <!-- Seen: the chip's number. Heard: the number with\n                           the grid's noun, because \"Inconclusive, 3\" does\n                           not say three of what. -->\n                      <span class=\"strct-dg__announcer\"> {{ countNoun(grp.count) }}</span>\n                      @if (grp.note) {\n                        <span class=\"strct-dg__announcer\">. </span>\n                        <span class=\"strct-dg__groupnote\">{{ grp.note }}</span>\n                      }\n                    }\n                  </button>\n                </td>\n              </tr>\n            } @else {\n              @let row = it.row!;\n              <tr\n                [attr.aria-rowindex]=\"ariaRowIndex(row)\"\n                [class.strct-dg__row--selected]=\"isSelected(row)\"\n                [class.strct-dg__row--locked]=\"lockedReason(row) !== null\"\n                [attr.aria-selected]=\"mode() === 'none' ? null : isSelected(row)\"\n                [attr.aria-disabled]=\"lockedReason(row) !== null ? 'true' : null\"\n                [attr.title]=\"lockedReason(row) || null\"\n                (click)=\"onRowPick(row)\"\n                [class.strct-dg__row--active]=\"paneOpen() && row === activeRow()\"\n                [attr.aria-level]=\"childrenKey() ? treeDepth(row) + 1 : null\"\n                [attr.aria-expanded]=\"\n                  childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null\n                \"\n                [attr.tabindex]=\"\n                  childrenKey()\n                    ? treeRowTabindex(row)\n                    : gridMode()\n                      ? gridRowTabindex(row)\n                      : canDetail()\n                        ? paneRowTabindex(row)\n                        : null\n                \"\n                (keydown)=\"\n                  childrenKey()\n                    ? onTreeRowKeydown(row, $event)\n                    : gridMode()\n                      ? onGridRowKeydown(row, $event)\n                      : onPaneRowKeydown(row, $event)\n                \"\n                (dblclick)=\"onRowActivate(row)\"\n              >\n                @if (canDetail()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('detail')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__detailbtn\"\n                      [class.strct-dg__detailbtn--active]=\"row === activeRow()\"\n                      [attr.aria-expanded]=\"row === activeRow()\"\n                      [attr.aria-label]=\"L().openDetail\"\n                      (click)=\"openDetail(row)\"\n                    >\n                      <strct-icon name=\"chevronDoubleRight\" [size]=\"13\" [strokeWidth]=\"1.6\" />\n                    </button>\n                  </td>\n                }\n                @if (canExpand()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('expand')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__expandbtn\"\n                      [class.strct-dg__expandbtn--open]=\"isExpanded(row)\"\n                      [attr.aria-expanded]=\"isExpanded(row)\"\n                      [attr.aria-label]=\"L().toggleDetail\"\n                      (click)=\"toggleExpand(row)\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </button>\n                  </td>\n                }\n                @if (hasSelectionColumn()) {\n                  <td\n                    class=\"strct-dg__sel\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('sel')\"\n                  >\n                    @if (mode() === 'single') {\n                      <!-- A native radio group: one name per grid, so the\n                           arrow keys move between rows and Space picks,\n                           without the grid inventing its own keyboarding. -->\n                      <input\n                        type=\"radio\"\n                        class=\"strct-dg__radio\"\n                        [name]=\"radioName\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [attr.tabindex]=\"ctlTabindex()\"\n                        (change)=\"selectSingle(row)\"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <!-- click fires (and bubbles) before the input's change,\n                           so the modifier is recorded by the time toggleRow runs. -->\n                      <strct-checkbox\n                        [ariaLabel]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [tabIndex]=\"ctlTabindex()\"\n                        (click)=\"noteRangeIntent($event); $event.stopPropagation()\"\n                        (checkedChange)=\"toggleRow(row)\"\n                      />\n                    }\n                  </td>\n                }\n                @for (col of visibleColumns(); track col.key; let colIdx = $index) {\n                  <td\n                    [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n                    [class.strct-dg__cell--mono]=\"col.mono\"\n                    [class.strct-dg__cell--muted]=\"col.muted\"\n                    [class.strct-dg__cell--numeric]=\"col.numeric\"\n                    [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n                    [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n                    [class.strct-dg__cell--editable]=\"col.editable\"\n                    [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n                    [attr.data-edit]=\"col.editable ? '' : null\"\n                    [attr.tabindex]=\"col.editable ? editCellTabindex(row, col) : null\"\n                    [attr.aria-describedby]=\"col.editable ? editHintId : null\"\n                    (dblclick)=\"col.editable && startEdit(row, col)\"\n                    (focus)=\"col.editable && onEditCellFocus(row, col)\"\n                    (keydown)=\"col.editable && onEditCellKeydown(row, col, $event)\"\n                  >\n                    @if (childrenKey() && colIdx === 0) {\n                      <span\n                        class=\"strct-dg__treepad\"\n                        [style.width.px]=\"treeDepth(row) * 18\"\n                        aria-hidden=\"true\"\n                      ></span>\n                      @if (treeHasChildren(row)) {\n                        <button\n                          type=\"button\"\n                          class=\"strct-dg__treebtn\"\n                          [class.strct-dg__treebtn--open]=\"treeExpanded(row)\"\n                          [attr.aria-expanded]=\"treeExpanded(row)\"\n                          [attr.aria-label]=\"L().toggleChildren\"\n                          (click)=\"toggleTreeRow(row)\"\n                        >\n                          <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                        </button>\n                      } @else {\n                        <span\n                          class=\"strct-dg__treebtn strct-dg__treebtn--leaf\"\n                          aria-hidden=\"true\"\n                        ></span>\n                      }\n                    }\n                    @if (isEditingCell(row, col)) {\n                      @switch (col.editor ?? 'text') {\n                        @case ('select') {\n                          <!-- Choosing is the commit: there is nothing to\n                               confirm with Enter once an option is picked. -->\n                          <strct-select\n                            class=\"strct-dg__editselect\"\n                            [options]=\"editorOptionsFor(row, col)\"\n                            [listLabel]=\"L().editCell + ': ' + col.label\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"commitValue(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @case ('number') {\n                          <strct-number\n                            class=\"strct-dg__editnumber\"\n                            [ariaLabel]=\"L().editCell + ': ' + col.label\"\n                            [min]=\"col.editorMin ?? null\"\n                            [max]=\"col.editorMax ?? null\"\n                            [step]=\"col.editorStep ?? 1\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"editDraft.set($event)\"\n                            (keydown.enter)=\"commitDraft(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (focusout)=\"commitOnLeave(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @default {\n                          <input\n                            class=\"strct-dg__editinput\"\n                            type=\"text\"\n                            [value]=\"row[col.key] ?? ''\"\n                            [attr.aria-label]=\"L().editCell + ': ' + col.label\"\n                            (keydown.enter)=\"commitEdit(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (blur)=\"commitEdit(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                      }\n                    } @else if (cellTemplate(col.key); as tpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          value: row[col.key],\n                          column: col,\n                        }\"\n                      />\n                    } @else if (isBlank(row, col)) {\n                      <span class=\"strct-dg__empty\" [attr.aria-label]=\"col.emptyLabel || null\">{{\n                        col.emptyText\n                      }}</span>\n                    } @else {\n                      {{ displayValue(row, col) }}\n                      @if (col.descriptionKey && row[col.descriptionKey]) {\n                        <span class=\"strct-dg__celldesc\">{{ row[col.descriptionKey] }}</span>\n                      }\n                    }\n                    <!-- The affordance a mouse never needed: a cell that\n                         can be edited says so on hover and on focus. -->\n                    @if (col.editable && editHint() && !isEditingCell(row, col)) {\n                      <strct-icon\n                        class=\"strct-dg__editpencil\"\n                        name=\"pencil\"\n                        [size]=\"12\"\n                        [strokeWidth]=\"1.6\"\n                        aria-hidden=\"true\"\n                      />\n                    }\n                  </td>\n                }\n                @if (canActions()) {\n                  <td class=\"strct-dg__actioncell\">\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__kebab\"\n                      [attr.aria-label]=\"L().rowActions\"\n                      (click)=\"openRowMenu(row, $event)\"\n                    >\n                      <strct-icon name=\"dots\" [size]=\"16\" />\n                    </button>\n                  </td>\n                }\n              </tr>\n              @if (canExpand() && isExpanded(row)) {\n                <tr class=\"strct-dg__detailrow\">\n                  <td [attr.colspan]=\"colspan()\">\n                    <div class=\"strct-dg__detail\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"detailDef()!.template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, row }\"\n                      />\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          } @empty {\n            <!-- \"Nothing here\" and \"nothing matches what you typed\" are\n                 different states: the second one can be undone, and\n                 saying so is the whole point. -->\n            <tr>\n              <td class=\"strct-dg__emptyrow\" [attr.colspan]=\"colspan()\">\n                @if (filteredAway()) {\n                  <strct-empty-state\n                    size=\"sm\"\n                    [titleLevel]=\"null\"\n                    [title]=\"L().noMatches\"\n                    [description]=\"noMatchesDescription()\"\n                  >\n                    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"clearAllFilters()\">\n                      {{ L().clearFilters }}\n                    </button>\n                  </strct-empty-state>\n                } @else {\n                  <!-- Not a heading: a grid is a region of a page, and an\n                       empty one used to put an <h3> in its outline. -->\n                  <strct-empty-state size=\"sm\" [titleLevel]=\"null\" [title]=\"emptyText()\" />\n                }\n              </td>\n            </tr>\n          }\n          @if (virtual() && bottomPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (paneOpen()) {\n    <aside class=\"strct-dg__pane\">\n      <div class=\"strct-dg__pane-head\">\n        @if (narrowPane()) {\n          <!-- The pane has taken the list's place, so there is a way back. -->\n          <button\n            type=\"button\"\n            class=\"strct-dg__pane-back\"\n            [attr.aria-label]=\"L().backToList\"\n            (click)=\"closePane()\"\n          >\n            <strct-icon name=\"chevronLeft\" [size]=\"13\" />\n          </button>\n        }\n        <span class=\"strct-dg__pane-title\">\n          <ng-content select=\"[strctDetailPaneTitle]\" />\n          @if (!paneTitleDef()) {\n            {{ activeRow()![columns()[0].key] }}\n          }\n        </span>\n        <span class=\"strct-dg__pane-meta\">\n          <ng-content select=\"[strctDetailPaneMeta]\" />\n        </span>\n        <span class=\"strct-dg__pane-actions\">\n          <ng-content select=\"[strctDetailPaneActions]\" />\n        </span>\n        <button\n          type=\"button\"\n          class=\"strct-dg__pane-close\"\n          [attr.aria-label]=\"L().closeDetail\"\n          (click)=\"closePane()\"\n        >\n          <strct-icon name=\"close\" [size]=\"13\" />\n        </button>\n      </div>\n      <div class=\"strct-dg__pane-body\">\n        <ng-container\n          [ngTemplateOutlet]=\"detailDef()!.template\"\n          [ngTemplateOutletContext]=\"{ $implicit: activeRow(), row: activeRow() }\"\n        />\n      </div>\n    </aside>\n  }\n</div>\n\n@if (showFooter()) {\n  <div class=\"strct-dg__foot\">\n    <div class=\"strct-dg__foot-left\">\n      @if (columnChooser() || sync()) {\n        <div class=\"strct-dg__actions\">\n          <strct-button-group>\n            @if (columnChooser()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [class.is-open]=\"chooserOpen()\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().chooseColumns\"\n                (click)=\"toggleChooser($event)\"\n              >\n                <strct-icon name=\"settings\" [size]=\"16\" />\n              </button>\n            }\n            @if (sync()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().refresh\"\n                (click)=\"syncChange.emit()\"\n              >\n                <strct-icon name=\"refresh\" [size]=\"16\" />\n              </button>\n            }\n          </strct-button-group>\n          @if (columnChooser() && chooserOpen()) {\n            <div class=\"strct-dg__chooser-menu\">\n              @for (col of columns(); track col.key) {\n                <!-- The whole row toggles; the checkbox's own click must not\n                     reach the row or the column would flip twice. -->\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                <div\n                  class=\"strct-dg__chooser-item\"\n                  (click)=\"toggleColumn(col.key, hiddenColumns().has(col.key))\"\n                >\n                  <strct-checkbox\n                    [checked]=\"!hiddenColumns().has(col.key)\"\n                    (checkedChange)=\"toggleColumn(col.key, $event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                  <span>{{ col.label }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <span class=\"strct-dg__count\">\n        @if (paging() === 'more') {\n          {{ L().showing(rows().length, moreTotal() ?? undefined) }}\n        } @else {\n          {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}\n        }\n        @if (selectedCount() && mode() !== 'single') {\n          <span class=\"strct-dg__count-sep\">|</span>\n          <span class=\"strct-dg__count-sel\">{{ selectedCount() }} {{ L().selected }}</span>\n        }\n      </span>\n    </div>\n    <div class=\"strct-dg__foot-right\">\n      <!-- A feed that pages by cursor loads more at the end: page numbers\n           are something a cursor API cannot answer. It takes the pager's\n           place \u2014 the column chooser, the sync button and the count are\n           the footer's, not the pager's. -->\n      @if (paging() === 'more') {\n        @if (hasMore()) {\n          <button\n            strct-button\n            size=\"sm\"\n            class=\"strct-dg__more\"\n            [disabled]=\"loadingMore()\"\n            (click)=\"loadMore.emit()\"\n          >\n            @if (loadingMore()) {\n              <strct-spinner size=\"sm\" />\n            }\n            {{ L().loadMore }}\n          </button>\n        }\n      } @else if (pageSize() > 0 && !groupBy()) {\n        <strct-pagination\n          [total]=\"totalCount()\"\n          [pageSize]=\"pageSize()\"\n          [page]=\"page()\"\n          (pageChange)=\"goToPage($event)\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t2)}.strct-dg__bulk{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;padding:7px 12px;border-bottom:1px solid var(--b2);background:var(--acc-s);color:var(--t2);font-size:var(--text-md)}.strct-dg__announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t2)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t2)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t2);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:var(--text-sm);font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__grouplabel--critical{color:var(--critical)}.strct-dg__grouplabel--warning{color:var(--warning)}.strct-dg__grouplabel--success{color:var(--success)}.strct-dg__grouplabel--accent{color:var(--acc)}.strct-dg__grouplabel--neutral,.strct-dg__grouplabel--none{color:var(--t1)}.strct-dg__groupnote{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:4px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg__groupcount--critical{background:var(--critical-bg);color:var(--critical)}.strct-dg__groupcount--warning{background:var(--warning-bg);color:var(--warning)}.strct-dg__groupcount--success{background:var(--success-bg);color:var(--success)}.strct-dg__groupcount--neutral,.strct-dg__groupcount--none{background:var(--bg-3);color:var(--t2)}.strct-dg-host--singleline .strct-dg{border-collapse:separate;border-spacing:0}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:4px;border-start-end-radius:4px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:4px;border-end-end-radius:4px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__sortbtn{display:inline-flex;align-items:center;gap:inherit;padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer}.strct-dg__sortbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel .strct-cb,.strct-dg__sel .strct-dg__radio,.strct-dg__expandbtn{position:relative}.strct-dg__sel .strct-cb:after,.strct-dg__sel .strct-dg__radio:after,.strct-dg__expandbtn:after{content:\"\";position:absolute;inset:-11px -13px;min-width:24px;min-height:24px}.strct-dg-host--compact .strct-dg__sel .strct-cb:after,.strct-dg-host--compact .strct-dg__sel .strct-dg__radio:after,.strct-dg-host--compact .strct-dg__expandbtn:after{inset:-7px -11px}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned>.strct-dg__scroll{flex:0 0 auto;width:var(--strct-dg-pane-list-w, 260px);min-width:var(--strct-dg-pane-list-w, 260px);max-width:var(--strct-dg-pane-list-w, 260px)}.strct-dg__layout--paned>.strct-dg__scroll>.strct-dg{width:100%;min-width:0;max-width:none;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__layout--panetakeover>.strct-dg__scroll{display:none}.strct-dg__layout--panetakeover>.strct-dg__pane{flex:1;min-width:0}.strct-dg__pane-meta,.strct-dg__pane-actions{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-dg__pane-meta:empty,.strct-dg__pane-actions:empty{display:none}.strct-dg__pane-actions{margin-inline-start:auto}.strct-dg__pane-back{display:inline-flex;align-items:center;border:0;background:none;color:var(--t2);cursor:pointer;padding:2px;border-radius:var(--radius-sm)}.strct-dg__row--clickable{cursor:pointer}.strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:4px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t2);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:4px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:3px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:var(--text-sm);cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "mode", "modeLabel", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctPagination, selector: "strct-pagination", inputs: ["prevLabel", "nextLabel", "regionLabel", "pageLabel", "total", "pageSize", "page"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrctCheckbox, selector: "strct-checkbox", inputs: ["checked", "disabled", "indeterminate", "ariaLabel", "description", "tabIndex"], outputs: ["checkedChange"] }, { kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly", "disabled", "disabledReason", "disabledReasonPosition"] }, { kind: "component", type: StrctButtonGroup, selector: "strct-button-group" }, { kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }, { kind: "component", type: StrctSearchbox, selector: "strct-searchbox", inputs: ["placeholder", "hint", "trigger", "clearable", "ariaLabel", "clearLabel", "value"], outputs: ["valueChange", "search", "activated"] }, { kind: "component", type: StrctSelect, selector: "strct-select", inputs: ["options", "placeholder", "ariaLabel", "listLabel", "emptyText", "disabled", "compareWith"] }, { kind: "component", type: StrctNumber, selector: "strct-number", inputs: ["min", "max", "step", "placeholder", "ariaLabel", "incrementLabel", "decrementLabel", "disabled"] }, { kind: "component", type: StrctSpinner, selector: "strct-spinner", inputs: ["size", "label", "caption"] }, { kind: "component", type: StrctEmptyState, selector: "strct-empty-state", inputs: ["variant", "icon", "tone", "title", "titleLevel", "size", "description"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDatagrid, decorators: [{
             type: Component,
@@ -18419,796 +17836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         StrctSpinner,
                         StrctEmptyState,
                         FormsModule,
-                    ], template: `
-    <!-- One polite region for everything the grid does to itself: sorting,
-         paging and filtering all change the rows without saying so. -->
-    <span class="strct-dg__announcer" role="status" aria-live="polite">{{ announcement() }}</span>
-    @if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {
-      <div class="strct-dg__toolbar">
-        @if (quickFilterable()) {
-          <strct-searchbox
-            class="strct-dg__quickfilter"
-            [class.strct-dg__quickfilter--end]="quickFilterAlign() === 'end'"
-            [placeholder]="L().quickFilter"
-            [ariaLabel]="L().quickFilter"
-            [value]="quickFilter()"
-            (valueChange)="quickFilter.set($event)"
-          />
-          @if (filterNote(); as note) {
-            <span
-              class="strct-dg__filternote"
-              [class.strct-dg__filternote--end]="quickFilterAlign() === 'end'"
-              >{{ note }}</span
-            >
-          }
-        }
-        <span class="strct-dg__actioncaption">
-          <ng-content select="[strctDatagridActionBarCaption]" />
-        </span>
-        <ng-content select="[strctDatagridActionBar]" />
-      </div>
-    }
-
-    @if (hasEditableColumn()) {
-      <!-- What the editable cells point at with aria-describedby: a keyboard
-           user is told the cell can be edited, and how. -->
-      <!-- In flow, not absolutely positioned: an out-of-flow box whose
-           containing block is the page extends the document's scrollable area
-           from wherever the grid happens to sit. 1x1 and clipped is enough. -->
-      <span
-        class="strct-sr-only"
-        style="display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap"
-        [id]="editHintId"
-        >{{ L().editCellInstructions }}</span
-      >
-    }
-
-    @if (bulkHint(); as hint) {
-      <!-- Selecting the page is not selecting the set. Say which one happened,
-           and offer the other. -->
-      <div class="strct-dg__bulk" role="status">
-        <span>{{ hint.text }}</span>
-        <button strct-button variant="flat" size="sm" (click)="hint.run()">
-          {{ hint.action }}
-        </button>
-      </div>
-    }
-    <div
-      class="strct-dg__layout"
-      [class.strct-dg__layout--paned]="paneOpen()"
-      [class.strct-dg__layout--panetakeover]="paneOpen() && narrowPane()"
-      [style.--strct-dg-pane-list-w]="paneListWidth()"
-    >
-      <div
-        class="strct-dg__scroll"
-        tabindex="0"
-        role="region"
-        [attr.aria-label]="L().rows"
-        [style.max-height.px]="virtual() ? viewportHeight() : maxHeight()"
-        (scroll)="virtual() && onScroll($event)"
-      >
-        <table
-          class="strct-dg"
-          [attr.role]="childrenKey() ? 'treegrid' : gridMode() ? 'grid' : null"
-          [attr.aria-rowcount]="ariaRowCount()"
-          [attr.aria-labelledby]="caption() ? captionId : null"
-        >
-          @if (caption()) {
-            <caption class="strct-dg__caption" [id]="captionId">
-              {{
-                caption()
-              }}
-            </caption>
-          }
-          <thead>
-            <tr>
-              <!-- A utility column is still a column: axe reports every empty
-                   header, and a screen-reader user hears nothing where the
-                   detail, expand and select controls are. The name is hidden,
-                   not absent. -->
-              @if (canDetail()) {
-                <th
-                  class="strct-dg__expandcol"
-                  scope="col"
-                  [class.strct-dg__cell--sticky]="stickyActive()"
-                  [style.insetInlineStart.px]="utilLeft('detail')"
-                >
-                  <span class="strct-sr-only">{{ L().detailColumn }}</span>
-                </th>
-              }
-              @if (canExpand()) {
-                <th
-                  class="strct-dg__expandcol"
-                  scope="col"
-                  [class.strct-dg__cell--sticky]="stickyActive()"
-                  [style.insetInlineStart.px]="utilLeft('expand')"
-                >
-                  <span class="strct-sr-only">{{ L().expandColumn }}</span>
-                </th>
-              }
-              @if (hasSelectionColumn()) {
-                <th
-                  class="strct-dg__sel"
-                  scope="col"
-                  [class.strct-dg__cell--sticky]="stickyActive()"
-                  [style.insetInlineStart.px]="utilLeft('sel')"
-                >
-                  @if (mode() === 'multiple') {
-                    <strct-checkbox
-                      [ariaLabel]="L().selectAll"
-                      [checked]="allPageSelected()"
-                      [indeterminate]="somePageSelected()"
-                      (checkedChange)="toggleAll()"
-                    />
-                  } @else {
-                    <span class="strct-sr-only">{{ L().selectColumn }}</span>
-                  }
-                </th>
-              }
-              @for (col of visibleColumns(); track col.key) {
-                <th
-                  scope="col"
-                  [style.text-align]="col.align ?? (col.numeric ? 'end' : 'start')"
-                  [style.width]="colWidth(col.key) ?? col.width ?? null"
-                  [class.strct-dg__th--sortable]="col.sortable"
-                  [class.strct-dg__th--drop]="col.key === dropKey()"
-                  [class.strct-dg__cell--sticky]="isSticky(col)"
-                  [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
-                  [style.insetInlineStart.px]="stickyLeft(col.key)"
-                  [attr.data-col]="col.key"
-                  [attr.aria-sort]="col.sortable ? ariaSort(col.key) : null"
-                  [attr.draggable]="reorderable() ? true : null"
-                  (dragstart)="onColDragStart(col.key, $event)"
-                  (dragover)="onColDragOver(col.key, $event)"
-                  (drop)="onColDrop(col.key)"
-                  (dragend)="onColDragEnd()"
-                >
-                  <span class="strct-dg__hd">
-                    <!-- A header that sorts is a button: a th with tabindex is
-                         read as "column header, focusable" and never says it
-                         can be activated. aria-sort stays on the th, which is
-                         what carries the column's sorted state. -->
-                    @if (col.sortable) {
-                      <!-- The button covers most of the header, so it carries
-                           the drag source too: a reorderable column has to be
-                           grabbable where the pointer actually lands. The
-                           event bubbles to the th's own handlers. -->
-                      <button
-                        type="button"
-                        class="strct-dg__sortbtn"
-                        [attr.draggable]="reorderable() ? true : null"
-                        (click)="sortBy(col.key)"
-                      >
-                        {{ col.label }}
-                        <strct-icon
-                          class="strct-dg__sorticon"
-                          [name]="sortIcon(col.key)"
-                          [size]="13"
-                        />
-                      </button>
-                    } @else {
-                      {{ col.label }}
-                    }
-                    @if (col.filterable || col.filterOptions) {
-                      <button
-                        #fbtn
-                        type="button"
-                        class="strct-dg__filterbtn"
-                        [class.strct-dg__filterbtn--active]="hasFilter(col.key)"
-                        [attr.aria-expanded]="filterOpenKey() === col.key"
-                        [attr.aria-label]="L().filterColumn + ': ' + col.label"
-                        (click)="toggleFilterPanel(col.key, $event)"
-                        (keydown.enter)="$event.stopPropagation()"
-                        (keydown.space)="$event.stopPropagation()"
-                      >
-                        <strct-icon name="filter" [size]="12" />
-                      </button>
-                      @if (filterOpenKey() === col.key) {
-                        <div
-                          class="strct-dg__filterpanel"
-                          role="dialog"
-                          [attr.aria-label]="L().filterColumn + ': ' + col.label"
-                          [strctOverlay]="fbtn"
-                          strctOverlayPlacement="bottom-start"
-                          (click)="$event.stopPropagation()"
-                          (keydown.enter)="$event.stopPropagation()"
-                          (keydown.space)="$event.stopPropagation()"
-                        >
-                          @if (col.filterOptions; as opts) {
-                            @for (opt of opts; track $index) {
-                              <label class="strct-dg__filteropt">
-                                <input
-                                  type="checkbox"
-                                  [checked]="optionChecked(col.key, opt)"
-                                  (change)="toggleFilterOption(col.key, opt)"
-                                />
-                                <span>{{ opt }}</span>
-                              </label>
-                            }
-                          } @else {
-                            <input
-                              class="strct-dg__filterinput"
-                              type="text"
-                              [attr.placeholder]="L().filterPlaceholder"
-                              [attr.aria-label]="L().filterColumn + ': ' + col.label"
-                              [value]="textFilter(col.key)"
-                              (input)="setTextFilter(col.key, $any($event.target).value)"
-                            />
-                          }
-                          <button
-                            type="button"
-                            class="strct-dg__filterclear"
-                            [disabled]="!hasFilter(col.key)"
-                            (click)="clearFilter(col.key)"
-                          >
-                            {{ L().clearFilter }}
-                          </button>
-                        </div>
-                      }
-                    }
-                  </span>
-                  @if (resizable() && col.resizable !== false) {
-                    <!-- A separator, not a bare div: a column could only be
-                         resized with a mouse, which is the one input a
-                         console cannot assume. -->
-                    <div
-                      class="strct-dg__resize"
-                      role="separator"
-                      aria-orientation="vertical"
-                      tabindex="0"
-                      [attr.aria-label]="L().resizeColumn(col.label)"
-                      [attr.aria-valuenow]="separatorValue(col.key)"
-                      [attr.aria-valuemin]="40"
-                      (mousedown)="onResizeStart($event, col.key)"
-                      (keydown)="onResizeKey($event, col.key)"
-                      (dblclick)="resetWidth(col.key)"
-                    ></div>
-                  }
-                </th>
-              }
-              @if (canActions()) {
-                <th class="strct-dg__actioncol" scope="col" [attr.aria-label]="L().actions"></th>
-              }
-            </tr>
-          </thead>
-          <!--
-            focusin is the real keyboard path (focus does not bubble from cells);
-            the plain focus binding exists to satisfy mouse-events-have-key-events.
-          -->
-          <tbody
-            (mouseover)="revealIfClipped($event)"
-            (focusin)="revealIfClipped($event)"
-            (focus)="revealIfClipped($event)"
-          >
-            @if (loading()) {
-              @for (_ of [1, 2, 3, 4, 5]; track $index) {
-                <tr class="strct-dg__skeleton-row">
-                  @if (canDetail()) {
-                    <td class="strct-dg__expandcell"></td>
-                  }
-                  @if (canExpand()) {
-                    <td class="strct-dg__expandcell"></td>
-                  }
-                  @if (hasSelectionColumn()) {
-                    <td class="strct-dg__sel"></td>
-                  }
-                  @for (col of visibleColumns(); track col.key) {
-                    <td [style.text-align]="col.align ?? 'start'">
-                      <div class="strct-dg__skeleton-block"></div>
-                    </td>
-                  }
-                  @if (canActions()) {
-                    <td class="strct-dg__actioncell"></td>
-                  }
-                </tr>
-              }
-            } @else {
-              @if (virtual() && topPad() > 0) {
-                <tr class="strct-dg__vspacer" aria-hidden="true">
-                  <td [attr.colspan]="colspan()" [style.height.px]="topPad()"></td>
-                </tr>
-              }
-              @for (it of displayItems(); track itemKey(it)) {
-                @if (it.group; as grp) {
-                  <!-- Group header: distinct value + count, collapsible. -->
-                  <tr class="strct-dg__grouprow">
-                    @if (groupSelect() && mode() === 'multiple') {
-                      <td class="strct-dg__sel">
-                        <strct-checkbox
-                          [ariaLabel]="L().selectAllInGroup(grp.label)"
-                          [checked]="groupAllSelected(grp.key)"
-                          [indeterminate]="groupSomeSelected(grp.key)"
-                          (checkedChange)="toggleGroupSelection(grp.key)"
-                        />
-                      </td>
-                    }
-                    <td
-                      [attr.colspan]="
-                        groupSelect() && mode() === 'multiple' ? colspan() - 1 : colspan()
-                      "
-                    >
-                      <button
-                        type="button"
-                        class="strct-dg__groupbtn"
-                        [attr.aria-expanded]="!grp.collapsed"
-                        (click)="toggleGroup(grp.key)"
-                      >
-                        <span
-                          class="strct-dg__groupchev"
-                          [class.strct-dg__groupchev--open]="!grp.collapsed"
-                        >
-                          <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-                        </span>
-                        @if (groupHeaderDef(); as tpl) {
-                          <!-- The consumer draws the row; the button, its
-                               aria-expanded and the keyboard stay ours. -->
-                          <ng-container
-                            [ngTemplateOutlet]="tpl.template"
-                            [ngTemplateOutletContext]="{
-                              $implicit: grp,
-                              group: grp,
-                              count: grp.count,
-                            }"
-                          />
-                        } @else {
-                          <span
-                            class="strct-dg__grouplabel strct-dg__grouplabel--{{
-                              grp.status ?? 'none'
-                            }}"
-                            >{{ grp.label }}</span
-                          >
-                          <!-- The three spans run together in the button's
-                               name ("Needs your decision1Blocks the join…");
-                               the separators are read, not seen. -->
-                          <span class="strct-dg__announcer">, </span>
-                          <span
-                            class="strct-dg__groupcount strct-dg__groupcount--{{
-                              grp.status ?? 'none'
-                            }}"
-                            >{{ grp.count }}</span
-                          >
-                          <!-- Seen: the chip's number. Heard: the number with
-                               the grid's noun, because "Inconclusive, 3" does
-                               not say three of what. -->
-                          <span class="strct-dg__announcer"> {{ countNoun(grp.count) }}</span>
-                          @if (grp.note) {
-                            <span class="strct-dg__announcer">. </span>
-                            <span class="strct-dg__groupnote">{{ grp.note }}</span>
-                          }
-                        }
-                      </button>
-                    </td>
-                  </tr>
-                } @else {
-                  @let row = it.row!;
-                  <tr
-                    [attr.aria-rowindex]="ariaRowIndex(row)"
-                    [class.strct-dg__row--selected]="isSelected(row)"
-                    [class.strct-dg__row--locked]="lockedReason(row) !== null"
-                    [attr.aria-selected]="mode() === 'none' ? null : isSelected(row)"
-                    [attr.aria-disabled]="lockedReason(row) !== null ? 'true' : null"
-                    [attr.title]="lockedReason(row) || null"
-                    (click)="onRowPick(row)"
-                    [class.strct-dg__row--active]="paneOpen() && row === activeRow()"
-                    [attr.aria-level]="childrenKey() ? treeDepth(row) + 1 : null"
-                    [attr.aria-expanded]="
-                      childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null
-                    "
-                    [attr.tabindex]="
-                      childrenKey()
-                        ? treeRowTabindex(row)
-                        : gridMode()
-                          ? gridRowTabindex(row)
-                          : canDetail()
-                            ? paneRowTabindex(row)
-                            : null
-                    "
-                    (keydown)="
-                      childrenKey()
-                        ? onTreeRowKeydown(row, $event)
-                        : gridMode()
-                          ? onGridRowKeydown(row, $event)
-                          : onPaneRowKeydown(row, $event)
-                    "
-                    (dblclick)="onRowActivate(row)"
-                  >
-                    @if (canDetail()) {
-                      <td
-                        class="strct-dg__expandcell"
-                        [class.strct-dg__cell--sticky]="stickyActive()"
-                        [style.insetInlineStart.px]="utilLeft('detail')"
-                      >
-                        <button
-                          type="button"
-                          [attr.tabindex]="ctlTabindex()"
-                          class="strct-dg__detailbtn"
-                          [class.strct-dg__detailbtn--active]="row === activeRow()"
-                          [attr.aria-expanded]="row === activeRow()"
-                          [attr.aria-label]="L().openDetail"
-                          (click)="openDetail(row)"
-                        >
-                          <strct-icon name="chevronDoubleRight" [size]="13" [strokeWidth]="1.6" />
-                        </button>
-                      </td>
-                    }
-                    @if (canExpand()) {
-                      <td
-                        class="strct-dg__expandcell"
-                        [class.strct-dg__cell--sticky]="stickyActive()"
-                        [style.insetInlineStart.px]="utilLeft('expand')"
-                      >
-                        <button
-                          type="button"
-                          [attr.tabindex]="ctlTabindex()"
-                          class="strct-dg__expandbtn"
-                          [class.strct-dg__expandbtn--open]="isExpanded(row)"
-                          [attr.aria-expanded]="isExpanded(row)"
-                          [attr.aria-label]="L().toggleDetail"
-                          (click)="toggleExpand(row)"
-                        >
-                          <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-                        </button>
-                      </td>
-                    }
-                    @if (hasSelectionColumn()) {
-                      <td
-                        class="strct-dg__sel"
-                        [class.strct-dg__cell--sticky]="stickyActive()"
-                        [style.insetInlineStart.px]="utilLeft('sel')"
-                      >
-                        @if (mode() === 'single') {
-                          <!-- A native radio group: one name per grid, so the
-                               arrow keys move between rows and Space picks,
-                               without the grid inventing its own keyboarding. -->
-                          <input
-                            type="radio"
-                            class="strct-dg__radio"
-                            [name]="radioName"
-                            [attr.aria-label]="selectRowLabel(row)"
-                            [attr.aria-description]="lockedReason(row) || null"
-                            [checked]="isSelected(row)"
-                            [disabled]="lockedReason(row) !== null"
-                            [attr.tabindex]="ctlTabindex()"
-                            (change)="selectSingle(row)"
-                            (click)="$event.stopPropagation()"
-                          />
-                        } @else {
-                          <!-- click fires (and bubbles) before the input's change,
-                               so the modifier is recorded by the time toggleRow runs. -->
-                          <strct-checkbox
-                            [ariaLabel]="selectRowLabel(row)"
-                            [attr.aria-description]="lockedReason(row) || null"
-                            [checked]="isSelected(row)"
-                            [disabled]="lockedReason(row) !== null"
-                            [tabIndex]="ctlTabindex()"
-                            (click)="noteRangeIntent($event); $event.stopPropagation()"
-                            (checkedChange)="toggleRow(row)"
-                          />
-                        }
-                      </td>
-                    }
-                    @for (col of visibleColumns(); track col.key; let colIdx = $index) {
-                      <td
-                        [style.text-align]="col.align ?? (col.numeric ? 'end' : 'start')"
-                        [class.strct-dg__cell--mono]="col.mono"
-                        [class.strct-dg__cell--muted]="col.muted"
-                        [class.strct-dg__cell--numeric]="col.numeric"
-                        [class.strct-dg__cell--sticky]="isSticky(col)"
-                        [class.strct-dg__cell--sticky-last]="col.key === lastStickyKey()"
-                        [class.strct-dg__cell--editable]="col.editable"
-                        [style.insetInlineStart.px]="stickyLeft(col.key)"
-                        [attr.data-edit]="col.editable ? '' : null"
-                        [attr.tabindex]="col.editable ? editCellTabindex(row, col) : null"
-                        [attr.aria-describedby]="col.editable ? editHintId : null"
-                        (dblclick)="col.editable && startEdit(row, col)"
-                        (focus)="col.editable && onEditCellFocus(row, col)"
-                        (keydown)="col.editable && onEditCellKeydown(row, col, $event)"
-                      >
-                        @if (childrenKey() && colIdx === 0) {
-                          <span
-                            class="strct-dg__treepad"
-                            [style.width.px]="treeDepth(row) * 18"
-                            aria-hidden="true"
-                          ></span>
-                          @if (treeHasChildren(row)) {
-                            <button
-                              type="button"
-                              class="strct-dg__treebtn"
-                              [class.strct-dg__treebtn--open]="treeExpanded(row)"
-                              [attr.aria-expanded]="treeExpanded(row)"
-                              [attr.aria-label]="L().toggleChildren"
-                              (click)="toggleTreeRow(row)"
-                            >
-                              <strct-icon name="chevronRight" [size]="12" [strokeWidth]="1.7" />
-                            </button>
-                          } @else {
-                            <span
-                              class="strct-dg__treebtn strct-dg__treebtn--leaf"
-                              aria-hidden="true"
-                            ></span>
-                          }
-                        }
-                        @if (isEditingCell(row, col)) {
-                          @switch (col.editor ?? 'text') {
-                            @case ('select') {
-                              <!-- Choosing is the commit: there is nothing to
-                                   confirm with Enter once an option is picked. -->
-                              <strct-select
-                                class="strct-dg__editselect"
-                                [options]="editorOptionsFor(row, col)"
-                                [listLabel]="L().editCell + ': ' + col.label"
-                                [ngModel]="row[col.key]"
-                                (ngModelChange)="commitValue(row, col, $event)"
-                                (keydown.escape)="cancelEdit($event)"
-                                (click)="$event.stopPropagation()"
-                              />
-                            }
-                            @case ('number') {
-                              <strct-number
-                                class="strct-dg__editnumber"
-                                [ariaLabel]="L().editCell + ': ' + col.label"
-                                [min]="col.editorMin ?? null"
-                                [max]="col.editorMax ?? null"
-                                [step]="col.editorStep ?? 1"
-                                [ngModel]="row[col.key]"
-                                (ngModelChange)="editDraft.set($event)"
-                                (keydown.enter)="commitDraft(row, col, $event)"
-                                (keydown.escape)="cancelEdit($event)"
-                                (focusout)="commitOnLeave(row, col, $event)"
-                                (click)="$event.stopPropagation()"
-                              />
-                            }
-                            @default {
-                              <input
-                                class="strct-dg__editinput"
-                                type="text"
-                                [value]="row[col.key] ?? ''"
-                                [attr.aria-label]="L().editCell + ': ' + col.label"
-                                (keydown.enter)="commitEdit(row, col, $event)"
-                                (keydown.escape)="cancelEdit($event)"
-                                (blur)="commitEdit(row, col, $event)"
-                                (click)="$event.stopPropagation()"
-                              />
-                            }
-                          }
-                        } @else if (cellTemplate(col.key); as tpl) {
-                          <ng-container
-                            [ngTemplateOutlet]="tpl"
-                            [ngTemplateOutletContext]="{
-                              $implicit: row,
-                              row,
-                              value: row[col.key],
-                              column: col,
-                            }"
-                          />
-                        } @else if (isBlank(row, col)) {
-                          <span
-                            class="strct-dg__empty"
-                            [attr.aria-label]="col.emptyLabel || null"
-                            >{{ col.emptyText }}</span
-                          >
-                        } @else {
-                          {{ displayValue(row, col) }}
-                          @if (col.descriptionKey && row[col.descriptionKey]) {
-                            <span class="strct-dg__celldesc">{{ row[col.descriptionKey] }}</span>
-                          }
-                        }
-                        <!-- The affordance a mouse never needed: a cell that
-                             can be edited says so on hover and on focus. -->
-                        @if (col.editable && editHint() && !isEditingCell(row, col)) {
-                          <strct-icon
-                            class="strct-dg__editpencil"
-                            name="pencil"
-                            [size]="12"
-                            [strokeWidth]="1.6"
-                            aria-hidden="true"
-                          />
-                        }
-                      </td>
-                    }
-                    @if (canActions()) {
-                      <td class="strct-dg__actioncell">
-                        <button
-                          type="button"
-                          [attr.tabindex]="ctlTabindex()"
-                          class="strct-dg__kebab"
-                          [attr.aria-label]="L().rowActions"
-                          (click)="openRowMenu(row, $event)"
-                        >
-                          <strct-icon name="dots" [size]="16" />
-                        </button>
-                      </td>
-                    }
-                  </tr>
-                  @if (canExpand() && isExpanded(row)) {
-                    <tr class="strct-dg__detailrow">
-                      <td [attr.colspan]="colspan()">
-                        <div class="strct-dg__detail">
-                          <ng-container
-                            [ngTemplateOutlet]="detailDef()!.template"
-                            [ngTemplateOutletContext]="{ $implicit: row, row }"
-                          />
-                        </div>
-                      </td>
-                    </tr>
-                  }
-                }
-              } @empty {
-                <!-- "Nothing here" and "nothing matches what you typed" are
-                     different states: the second one can be undone, and
-                     saying so is the whole point. -->
-                <tr>
-                  <td class="strct-dg__emptyrow" [attr.colspan]="colspan()">
-                    @if (filteredAway()) {
-                      <strct-empty-state
-                        size="sm"
-                        [titleLevel]="null"
-                        [title]="L().noMatches"
-                        [description]="noMatchesDescription()"
-                      >
-                        <button strct-button variant="flat" size="sm" (click)="clearAllFilters()">
-                          {{ L().clearFilters }}
-                        </button>
-                      </strct-empty-state>
-                    } @else {
-                      <!-- Not a heading: a grid is a region of a page, and an
-                           empty one used to put an <h3> in its outline. -->
-                      <strct-empty-state size="sm" [titleLevel]="null" [title]="emptyText()" />
-                    }
-                  </td>
-                </tr>
-              }
-              @if (virtual() && bottomPad() > 0) {
-                <tr class="strct-dg__vspacer" aria-hidden="true">
-                  <td [attr.colspan]="colspan()" [style.height.px]="bottomPad()"></td>
-                </tr>
-              }
-            }
-          </tbody>
-        </table>
-      </div>
-
-      @if (paneOpen()) {
-        <aside class="strct-dg__pane">
-          <div class="strct-dg__pane-head">
-            @if (narrowPane()) {
-              <!-- The pane has taken the list's place, so there is a way back. -->
-              <button
-                type="button"
-                class="strct-dg__pane-back"
-                [attr.aria-label]="L().backToList"
-                (click)="closePane()"
-              >
-                <strct-icon name="chevronLeft" [size]="13" />
-              </button>
-            }
-            <span class="strct-dg__pane-title">
-              <ng-content select="[strctDetailPaneTitle]" />
-              @if (!paneTitleDef()) {
-                {{ activeRow()![columns()[0].key] }}
-              }
-            </span>
-            <span class="strct-dg__pane-meta">
-              <ng-content select="[strctDetailPaneMeta]" />
-            </span>
-            <span class="strct-dg__pane-actions">
-              <ng-content select="[strctDetailPaneActions]" />
-            </span>
-            <button
-              type="button"
-              class="strct-dg__pane-close"
-              [attr.aria-label]="L().closeDetail"
-              (click)="closePane()"
-            >
-              <strct-icon name="close" [size]="13" />
-            </button>
-          </div>
-          <div class="strct-dg__pane-body">
-            <ng-container
-              [ngTemplateOutlet]="detailDef()!.template"
-              [ngTemplateOutletContext]="{ $implicit: activeRow(), row: activeRow() }"
-            />
-          </div>
-        </aside>
-      }
-    </div>
-
-    @if (showFooter()) {
-      <div class="strct-dg__foot">
-        <div class="strct-dg__foot-left">
-          @if (columnChooser() || sync()) {
-            <div class="strct-dg__actions">
-              <strct-button-group>
-                @if (columnChooser()) {
-                  <button
-                    strct-button
-                    size="sm"
-                    [class.is-open]="chooserOpen()"
-                    [disabled]="footerActionsDisabled()"
-                    [attr.aria-label]="L().chooseColumns"
-                    (click)="toggleChooser($event)"
-                  >
-                    <strct-icon name="settings" [size]="16" />
-                  </button>
-                }
-                @if (sync()) {
-                  <button
-                    strct-button
-                    size="sm"
-                    [disabled]="footerActionsDisabled()"
-                    [attr.aria-label]="L().refresh"
-                    (click)="syncChange.emit()"
-                  >
-                    <strct-icon name="refresh" [size]="16" />
-                  </button>
-                }
-              </strct-button-group>
-              @if (columnChooser() && chooserOpen()) {
-                <div class="strct-dg__chooser-menu">
-                  @for (col of columns(); track col.key) {
-                    <!-- The whole row toggles; the checkbox's own click must not
-                         reach the row or the column would flip twice. -->
-                    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-                    <div
-                      class="strct-dg__chooser-item"
-                      (click)="toggleColumn(col.key, hiddenColumns().has(col.key))"
-                    >
-                      <strct-checkbox
-                        [checked]="!hiddenColumns().has(col.key)"
-                        (checkedChange)="toggleColumn(col.key, $event)"
-                        (click)="$event.stopPropagation()"
-                      />
-                      <span>{{ col.label }}</span>
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          }
-          <span class="strct-dg__count">
-            @if (paging() === 'more') {
-              {{ L().showing(rows().length, moreTotal() ?? undefined) }}
-            } @else {
-              {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}
-            }
-            @if (selectedCount() && mode() !== 'single') {
-              <span class="strct-dg__count-sep">|</span>
-              <span class="strct-dg__count-sel">{{ selectedCount() }} {{ L().selected }}</span>
-            }
-          </span>
-        </div>
-        <div class="strct-dg__foot-right">
-          <!-- A feed that pages by cursor loads more at the end: page numbers
-               are something a cursor API cannot answer. It takes the pager's
-               place — the column chooser, the sync button and the count are
-               the footer's, not the pager's. -->
-          @if (paging() === 'more') {
-            @if (hasMore()) {
-              <button
-                strct-button
-                size="sm"
-                class="strct-dg__more"
-                [disabled]="loadingMore()"
-                (click)="loadMore.emit()"
-              >
-                @if (loadingMore()) {
-                  <strct-spinner size="sm" />
-                }
-                {{ L().loadMore }}
-              </button>
-            }
-          } @else if (pageSize() > 0 && !groupBy()) {
-            <strct-pagination
-              [total]="totalCount()"
-              [pageSize]="pageSize()"
-              [page]="page()"
-              (pageChange)="goToPage($event)"
-            />
-          }
-        </div>
-      </div>
-    }
-  `, host: {
+                    ], host: {
                         class: 'strct-dg-host',
                         // The skeleton rows say "updating" to the eye; this says it to everyone else.
                         '[attr.aria-busy]': 'loading() || loadingMore() ? "true" : null',
@@ -19218,8 +17846,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-dg-host--bounded]': '!virtual() && maxHeight() !== null',
                         '[class.strct-dg-host--sticky]': 'stickyActive()',
                         '[class.strct-dg-host--flush]': 'flush()',
-                    }, styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t2)}.strct-dg__bulk{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;padding:7px 12px;border-bottom:1px solid var(--b2);background:var(--acc-s);color:var(--t2);font-size:var(--text-md)}.strct-dg__announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t2)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t2)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t2);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:var(--text-sm);font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__grouplabel--critical{color:var(--critical)}.strct-dg__grouplabel--warning{color:var(--warning)}.strct-dg__grouplabel--success{color:var(--success)}.strct-dg__grouplabel--accent{color:var(--acc)}.strct-dg__grouplabel--neutral,.strct-dg__grouplabel--none{color:var(--t1)}.strct-dg__groupnote{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:4px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg__groupcount--critical{background:var(--critical-bg);color:var(--critical)}.strct-dg__groupcount--warning{background:var(--warning-bg);color:var(--warning)}.strct-dg__groupcount--success{background:var(--success-bg);color:var(--success)}.strct-dg__groupcount--neutral,.strct-dg__groupcount--none{background:var(--bg-3);color:var(--t2)}.strct-dg-host--singleline .strct-dg{border-collapse:separate;border-spacing:0}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:4px;border-start-end-radius:4px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:4px;border-end-end-radius:4px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__sortbtn{display:inline-flex;align-items:center;gap:inherit;padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer}.strct-dg__sortbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel .strct-cb,.strct-dg__sel .strct-dg__radio,.strct-dg__expandbtn{position:relative}.strct-dg__sel .strct-cb:after,.strct-dg__sel .strct-dg__radio:after,.strct-dg__expandbtn:after{content:\"\";position:absolute;inset:-11px -13px;min-width:24px;min-height:24px}.strct-dg-host--compact .strct-dg__sel .strct-cb:after,.strct-dg-host--compact .strct-dg__sel .strct-dg__radio:after,.strct-dg-host--compact .strct-dg__expandbtn:after{inset:-7px -11px}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned>.strct-dg__scroll{flex:0 0 auto;width:var(--strct-dg-pane-list-w, 260px);min-width:var(--strct-dg-pane-list-w, 260px);max-width:var(--strct-dg-pane-list-w, 260px)}.strct-dg__layout--paned>.strct-dg__scroll>.strct-dg{width:100%;min-width:0;max-width:none;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__layout--panetakeover>.strct-dg__scroll{display:none}.strct-dg__layout--panetakeover>.strct-dg__pane{flex:1;min-width:0}.strct-dg__pane-meta,.strct-dg__pane-actions{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-dg__pane-meta:empty,.strct-dg__pane-actions:empty{display:none}.strct-dg__pane-actions{margin-inline-start:auto}.strct-dg__pane-back{display:inline-flex;align-items:center;border:0;background:none;color:var(--t2);cursor:pointer;padding:2px;border-radius:var(--radius-sm)}.strct-dg__row--clickable{cursor:pointer}.strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:4px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t2);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:4px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:3px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:var(--text-sm);cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], detailPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailPane", required: false }] }], paneListWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneListWidth", required: false }] }], paneTakeoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneTakeoverWidth", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }, { type: i0.Output, args: ["activeRowIdChange"] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], columnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnChooser", required: false }] }], sync: [{ type: i0.Input, args: [{ isSignal: true, alias: "sync", required: false }] }], footerActionsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerActionsDisabled", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], rowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], paging: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], loadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMore", required: false }] }], moreTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreTotal", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], groupSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSelect", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], editHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "editHint", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }, { type: i0.Output, args: ["columnStateChange"] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], showEmptyGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyGroups", required: false }] }], collapsedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedGroups", required: false }] }, { type: i0.Output, args: ["collapsedGroupsChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], quickFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilter", required: false }] }, { type: i0.Output, args: ["quickFilterChange"] }], quickFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterFields", required: false }] }], quickFilterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterable", required: false }] }], quickFilterAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterAlign", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], interactionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactionMode", required: false }] }], selectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColumn", required: false }] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncChange: [{ type: i0.Output, args: ["syncChange"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], detailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctRowDetailDef), { isSignal: true }] }], groupHeaderDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctGroupHeaderDef), { isSignal: true }] }], paneTitleDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDetailPaneTitle), { isSignal: true }] }], actionBarDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBar), { isSignal: true }] }], actionBarCaptionDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBarCaption), { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }], onDocClickOverlays: [{
+                    }, template: "<!-- One polite region for everything the grid does to itself: sorting,\n     paging and filtering all change the rows without saying so. -->\n<span class=\"strct-dg__announcer\" role=\"status\" aria-live=\"polite\">{{ announcement() }}</span>\n@if (actionBarDef() || quickFilterable() || actionBarCaptionDef()) {\n  <div class=\"strct-dg__toolbar\">\n    @if (quickFilterable()) {\n      <strct-searchbox\n        class=\"strct-dg__quickfilter\"\n        [class.strct-dg__quickfilter--end]=\"quickFilterAlign() === 'end'\"\n        [placeholder]=\"L().quickFilter\"\n        [ariaLabel]=\"L().quickFilter\"\n        [value]=\"quickFilter()\"\n        (valueChange)=\"quickFilter.set($event)\"\n      />\n      @if (filterNote(); as note) {\n        <span\n          class=\"strct-dg__filternote\"\n          [class.strct-dg__filternote--end]=\"quickFilterAlign() === 'end'\"\n          >{{ note }}</span\n        >\n      }\n    }\n    <span class=\"strct-dg__actioncaption\">\n      <ng-content select=\"[strctDatagridActionBarCaption]\" />\n    </span>\n    <ng-content select=\"[strctDatagridActionBar]\" />\n  </div>\n}\n\n@if (hasEditableColumn()) {\n  <!-- What the editable cells point at with aria-describedby: a keyboard\n       user is told the cell can be edited, and how. -->\n  <!-- In flow, not absolutely positioned: an out-of-flow box whose\n       containing block is the page extends the document's scrollable area\n       from wherever the grid happens to sit. 1x1 and clipped is enough. -->\n  <span\n    class=\"strct-sr-only\"\n    style=\"\n      display: inline-block;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    \"\n    [id]=\"editHintId\"\n    >{{ L().editCellInstructions }}</span\n  >\n}\n\n@if (bulkHint(); as hint) {\n  <!-- Selecting the page is not selecting the set. Say which one happened,\n       and offer the other. -->\n  <div class=\"strct-dg__bulk\" role=\"status\">\n    <span>{{ hint.text }}</span>\n    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"hint.run()\">\n      {{ hint.action }}\n    </button>\n  </div>\n}\n<div\n  class=\"strct-dg__layout\"\n  [class.strct-dg__layout--paned]=\"paneOpen()\"\n  [class.strct-dg__layout--panetakeover]=\"paneOpen() && narrowPane()\"\n  [style.--strct-dg-pane-list-w]=\"paneListWidth()\"\n>\n  <div\n    class=\"strct-dg__scroll\"\n    tabindex=\"0\"\n    role=\"region\"\n    [attr.aria-label]=\"L().rows\"\n    [style.max-height.px]=\"virtual() ? viewportHeight() : maxHeight()\"\n    (scroll)=\"virtual() && onScroll($event)\"\n  >\n    <table\n      class=\"strct-dg\"\n      [attr.role]=\"childrenKey() ? 'treegrid' : gridMode() ? 'grid' : null\"\n      [attr.aria-rowcount]=\"ariaRowCount()\"\n      [attr.aria-labelledby]=\"caption() ? captionId : null\"\n    >\n      @if (caption()) {\n        <caption class=\"strct-dg__caption\" [id]=\"captionId\">\n          {{\n            caption()\n          }}\n        </caption>\n      }\n      <thead>\n        <tr>\n          <!-- A utility column is still a column: axe reports every empty\n               header, and a screen-reader user hears nothing where the\n               detail, expand and select controls are. The name is hidden,\n               not absent. -->\n          @if (canDetail()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('detail')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().detailColumn }}</span>\n            </th>\n          }\n          @if (canExpand()) {\n            <th\n              class=\"strct-dg__expandcol\"\n              scope=\"col\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('expand')\"\n            >\n              <span class=\"strct-sr-only\">{{ L().expandColumn }}</span>\n            </th>\n          }\n          @if (hasSelectionColumn()) {\n            <th\n              class=\"strct-dg__sel\"\n              scope=\"col\"\n              [class.strct-dg__cell--sticky]=\"stickyActive()\"\n              [style.insetInlineStart.px]=\"utilLeft('sel')\"\n            >\n              @if (mode() === 'multiple') {\n                <strct-checkbox\n                  [ariaLabel]=\"L().selectAll\"\n                  [checked]=\"allPageSelected()\"\n                  [indeterminate]=\"somePageSelected()\"\n                  (checkedChange)=\"toggleAll()\"\n                />\n              } @else {\n                <span class=\"strct-sr-only\">{{ L().selectColumn }}</span>\n              }\n            </th>\n          }\n          @for (col of visibleColumns(); track col.key) {\n            <th\n              scope=\"col\"\n              [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n              [style.width]=\"colWidth(col.key) ?? col.width ?? null\"\n              [class.strct-dg__th--sortable]=\"col.sortable\"\n              [class.strct-dg__th--drop]=\"col.key === dropKey()\"\n              [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n              [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n              [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n              [attr.data-col]=\"col.key\"\n              [attr.aria-sort]=\"col.sortable ? ariaSort(col.key) : null\"\n              [attr.draggable]=\"reorderable() ? true : null\"\n              (dragstart)=\"onColDragStart(col.key, $event)\"\n              (dragover)=\"onColDragOver(col.key, $event)\"\n              (drop)=\"onColDrop(col.key)\"\n              (dragend)=\"onColDragEnd()\"\n            >\n              <span class=\"strct-dg__hd\">\n                <!-- A header that sorts is a button: a th with tabindex is\n                     read as \"column header, focusable\" and never says it\n                     can be activated. aria-sort stays on the th, which is\n                     what carries the column's sorted state. -->\n                @if (col.sortable) {\n                  <!-- The button covers most of the header, so it carries\n                       the drag source too: a reorderable column has to be\n                       grabbable where the pointer actually lands. The\n                       event bubbles to the th's own handlers. -->\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__sortbtn\"\n                    [attr.draggable]=\"reorderable() ? true : null\"\n                    (click)=\"sortBy(col.key)\"\n                  >\n                    {{ col.label }}\n                    <strct-icon class=\"strct-dg__sorticon\" [name]=\"sortIcon(col.key)\" [size]=\"13\" />\n                  </button>\n                } @else {\n                  {{ col.label }}\n                }\n                @if (col.filterable || col.filterOptions) {\n                  <button\n                    #fbtn\n                    type=\"button\"\n                    class=\"strct-dg__filterbtn\"\n                    [class.strct-dg__filterbtn--active]=\"hasFilter(col.key)\"\n                    [attr.aria-expanded]=\"filterOpenKey() === col.key\"\n                    [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                    (click)=\"toggleFilterPanel(col.key, $event)\"\n                    (keydown.enter)=\"$event.stopPropagation()\"\n                    (keydown.space)=\"$event.stopPropagation()\"\n                  >\n                    <strct-icon name=\"filter\" [size]=\"12\" />\n                  </button>\n                  @if (filterOpenKey() === col.key) {\n                    <div\n                      class=\"strct-dg__filterpanel\"\n                      role=\"dialog\"\n                      [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                      [strctOverlay]=\"fbtn\"\n                      strctOverlayPlacement=\"bottom-start\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown.enter)=\"$event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                    >\n                      @if (col.filterOptions; as opts) {\n                        @for (opt of opts; track $index) {\n                          <label class=\"strct-dg__filteropt\">\n                            <input\n                              type=\"checkbox\"\n                              [checked]=\"optionChecked(col.key, opt)\"\n                              (change)=\"toggleFilterOption(col.key, opt)\"\n                            />\n                            <span>{{ opt }}</span>\n                          </label>\n                        }\n                      } @else {\n                        <input\n                          class=\"strct-dg__filterinput\"\n                          type=\"text\"\n                          [attr.placeholder]=\"L().filterPlaceholder\"\n                          [attr.aria-label]=\"L().filterColumn + ': ' + col.label\"\n                          [value]=\"textFilter(col.key)\"\n                          (input)=\"setTextFilter(col.key, $any($event.target).value)\"\n                        />\n                      }\n                      <button\n                        type=\"button\"\n                        class=\"strct-dg__filterclear\"\n                        [disabled]=\"!hasFilter(col.key)\"\n                        (click)=\"clearFilter(col.key)\"\n                      >\n                        {{ L().clearFilter }}\n                      </button>\n                    </div>\n                  }\n                }\n              </span>\n              @if (resizable() && col.resizable !== false) {\n                <!-- A separator, not a bare div: a column could only be\n                     resized with a mouse, which is the one input a\n                     console cannot assume. -->\n                <div\n                  class=\"strct-dg__resize\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"L().resizeColumn(col.label)\"\n                  [attr.aria-valuenow]=\"separatorValue(col.key)\"\n                  [attr.aria-valuemin]=\"40\"\n                  (mousedown)=\"onResizeStart($event, col.key)\"\n                  (keydown)=\"onResizeKey($event, col.key)\"\n                  (dblclick)=\"resetWidth(col.key)\"\n                ></div>\n              }\n            </th>\n          }\n          @if (canActions()) {\n            <th class=\"strct-dg__actioncol\" scope=\"col\" [attr.aria-label]=\"L().actions\"></th>\n          }\n        </tr>\n      </thead>\n      <!--\n        focusin is the real keyboard path (focus does not bubble from cells);\n        the plain focus binding exists to satisfy mouse-events-have-key-events.\n      -->\n      <tbody\n        (mouseover)=\"revealIfClipped($event)\"\n        (focusin)=\"revealIfClipped($event)\"\n        (focus)=\"revealIfClipped($event)\"\n      >\n        @if (loading()) {\n          @for (_ of [1, 2, 3, 4, 5]; track $index) {\n            <tr class=\"strct-dg__skeleton-row\">\n              @if (canDetail()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (canExpand()) {\n                <td class=\"strct-dg__expandcell\"></td>\n              }\n              @if (hasSelectionColumn()) {\n                <td class=\"strct-dg__sel\"></td>\n              }\n              @for (col of visibleColumns(); track col.key) {\n                <td [style.text-align]=\"col.align ?? 'start'\">\n                  <div class=\"strct-dg__skeleton-block\"></div>\n                </td>\n              }\n              @if (canActions()) {\n                <td class=\"strct-dg__actioncell\"></td>\n              }\n            </tr>\n          }\n        } @else {\n          @if (virtual() && topPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td>\n            </tr>\n          }\n          @for (it of displayItems(); track itemKey(it)) {\n            @if (it.group; as grp) {\n              <!-- Group header: distinct value + count, collapsible. -->\n              <tr class=\"strct-dg__grouprow\">\n                @if (groupSelect() && mode() === 'multiple') {\n                  <td class=\"strct-dg__sel\">\n                    <strct-checkbox\n                      [ariaLabel]=\"L().selectAllInGroup(grp.label)\"\n                      [checked]=\"groupAllSelected(grp.key)\"\n                      [indeterminate]=\"groupSomeSelected(grp.key)\"\n                      (checkedChange)=\"toggleGroupSelection(grp.key)\"\n                    />\n                  </td>\n                }\n                <td\n                  [attr.colspan]=\"\n                    groupSelect() && mode() === 'multiple' ? colspan() - 1 : colspan()\n                  \"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"strct-dg__groupbtn\"\n                    [attr.aria-expanded]=\"!grp.collapsed\"\n                    (click)=\"toggleGroup(grp.key)\"\n                  >\n                    <span\n                      class=\"strct-dg__groupchev\"\n                      [class.strct-dg__groupchev--open]=\"!grp.collapsed\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </span>\n                    @if (groupHeaderDef(); as tpl) {\n                      <!-- The consumer draws the row; the button, its\n                           aria-expanded and the keyboard stay ours. -->\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl.template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: grp,\n                          group: grp,\n                          count: grp.count,\n                        }\"\n                      />\n                    } @else {\n                      <span\n                        class=\"strct-dg__grouplabel strct-dg__grouplabel--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.label }}</span\n                      >\n                      <!-- The three spans run together in the button's\n                           name (\"Needs your decision1Blocks the join\u2026\");\n                           the separators are read, not seen. -->\n                      <span class=\"strct-dg__announcer\">, </span>\n                      <span\n                        class=\"strct-dg__groupcount strct-dg__groupcount--{{\n                          grp.status ?? 'none'\n                        }}\"\n                        >{{ grp.count }}</span\n                      >\n                      <!-- Seen: the chip's number. Heard: the number with\n                           the grid's noun, because \"Inconclusive, 3\" does\n                           not say three of what. -->\n                      <span class=\"strct-dg__announcer\"> {{ countNoun(grp.count) }}</span>\n                      @if (grp.note) {\n                        <span class=\"strct-dg__announcer\">. </span>\n                        <span class=\"strct-dg__groupnote\">{{ grp.note }}</span>\n                      }\n                    }\n                  </button>\n                </td>\n              </tr>\n            } @else {\n              @let row = it.row!;\n              <tr\n                [attr.aria-rowindex]=\"ariaRowIndex(row)\"\n                [class.strct-dg__row--selected]=\"isSelected(row)\"\n                [class.strct-dg__row--locked]=\"lockedReason(row) !== null\"\n                [attr.aria-selected]=\"mode() === 'none' ? null : isSelected(row)\"\n                [attr.aria-disabled]=\"lockedReason(row) !== null ? 'true' : null\"\n                [attr.title]=\"lockedReason(row) || null\"\n                (click)=\"onRowPick(row)\"\n                [class.strct-dg__row--active]=\"paneOpen() && row === activeRow()\"\n                [attr.aria-level]=\"childrenKey() ? treeDepth(row) + 1 : null\"\n                [attr.aria-expanded]=\"\n                  childrenKey() && treeHasChildren(row) ? treeExpanded(row) : null\n                \"\n                [attr.tabindex]=\"\n                  childrenKey()\n                    ? treeRowTabindex(row)\n                    : gridMode()\n                      ? gridRowTabindex(row)\n                      : canDetail()\n                        ? paneRowTabindex(row)\n                        : null\n                \"\n                (keydown)=\"\n                  childrenKey()\n                    ? onTreeRowKeydown(row, $event)\n                    : gridMode()\n                      ? onGridRowKeydown(row, $event)\n                      : onPaneRowKeydown(row, $event)\n                \"\n                (dblclick)=\"onRowActivate(row)\"\n              >\n                @if (canDetail()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('detail')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__detailbtn\"\n                      [class.strct-dg__detailbtn--active]=\"row === activeRow()\"\n                      [attr.aria-expanded]=\"row === activeRow()\"\n                      [attr.aria-label]=\"L().openDetail\"\n                      (click)=\"openDetail(row)\"\n                    >\n                      <strct-icon name=\"chevronDoubleRight\" [size]=\"13\" [strokeWidth]=\"1.6\" />\n                    </button>\n                  </td>\n                }\n                @if (canExpand()) {\n                  <td\n                    class=\"strct-dg__expandcell\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('expand')\"\n                  >\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__expandbtn\"\n                      [class.strct-dg__expandbtn--open]=\"isExpanded(row)\"\n                      [attr.aria-expanded]=\"isExpanded(row)\"\n                      [attr.aria-label]=\"L().toggleDetail\"\n                      (click)=\"toggleExpand(row)\"\n                    >\n                      <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                    </button>\n                  </td>\n                }\n                @if (hasSelectionColumn()) {\n                  <td\n                    class=\"strct-dg__sel\"\n                    [class.strct-dg__cell--sticky]=\"stickyActive()\"\n                    [style.insetInlineStart.px]=\"utilLeft('sel')\"\n                  >\n                    @if (mode() === 'single') {\n                      <!-- A native radio group: one name per grid, so the\n                           arrow keys move between rows and Space picks,\n                           without the grid inventing its own keyboarding. -->\n                      <input\n                        type=\"radio\"\n                        class=\"strct-dg__radio\"\n                        [name]=\"radioName\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [attr.tabindex]=\"ctlTabindex()\"\n                        (change)=\"selectSingle(row)\"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <!-- click fires (and bubbles) before the input's change,\n                           so the modifier is recorded by the time toggleRow runs. -->\n                      <strct-checkbox\n                        [ariaLabel]=\"selectRowLabel(row)\"\n                        [attr.aria-description]=\"lockedReason(row) || null\"\n                        [checked]=\"isSelected(row)\"\n                        [disabled]=\"lockedReason(row) !== null\"\n                        [tabIndex]=\"ctlTabindex()\"\n                        (click)=\"noteRangeIntent($event); $event.stopPropagation()\"\n                        (checkedChange)=\"toggleRow(row)\"\n                      />\n                    }\n                  </td>\n                }\n                @for (col of visibleColumns(); track col.key; let colIdx = $index) {\n                  <td\n                    [style.text-align]=\"col.align ?? (col.numeric ? 'end' : 'start')\"\n                    [class.strct-dg__cell--mono]=\"col.mono\"\n                    [class.strct-dg__cell--muted]=\"col.muted\"\n                    [class.strct-dg__cell--numeric]=\"col.numeric\"\n                    [class.strct-dg__cell--sticky]=\"isSticky(col)\"\n                    [class.strct-dg__cell--sticky-last]=\"col.key === lastStickyKey()\"\n                    [class.strct-dg__cell--editable]=\"col.editable\"\n                    [style.insetInlineStart.px]=\"stickyLeft(col.key)\"\n                    [attr.data-edit]=\"col.editable ? '' : null\"\n                    [attr.tabindex]=\"col.editable ? editCellTabindex(row, col) : null\"\n                    [attr.aria-describedby]=\"col.editable ? editHintId : null\"\n                    (dblclick)=\"col.editable && startEdit(row, col)\"\n                    (focus)=\"col.editable && onEditCellFocus(row, col)\"\n                    (keydown)=\"col.editable && onEditCellKeydown(row, col, $event)\"\n                  >\n                    @if (childrenKey() && colIdx === 0) {\n                      <span\n                        class=\"strct-dg__treepad\"\n                        [style.width.px]=\"treeDepth(row) * 18\"\n                        aria-hidden=\"true\"\n                      ></span>\n                      @if (treeHasChildren(row)) {\n                        <button\n                          type=\"button\"\n                          class=\"strct-dg__treebtn\"\n                          [class.strct-dg__treebtn--open]=\"treeExpanded(row)\"\n                          [attr.aria-expanded]=\"treeExpanded(row)\"\n                          [attr.aria-label]=\"L().toggleChildren\"\n                          (click)=\"toggleTreeRow(row)\"\n                        >\n                          <strct-icon name=\"chevronRight\" [size]=\"12\" [strokeWidth]=\"1.7\" />\n                        </button>\n                      } @else {\n                        <span\n                          class=\"strct-dg__treebtn strct-dg__treebtn--leaf\"\n                          aria-hidden=\"true\"\n                        ></span>\n                      }\n                    }\n                    @if (isEditingCell(row, col)) {\n                      @switch (col.editor ?? 'text') {\n                        @case ('select') {\n                          <!-- Choosing is the commit: there is nothing to\n                               confirm with Enter once an option is picked. -->\n                          <strct-select\n                            class=\"strct-dg__editselect\"\n                            [options]=\"editorOptionsFor(row, col)\"\n                            [listLabel]=\"L().editCell + ': ' + col.label\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"commitValue(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @case ('number') {\n                          <strct-number\n                            class=\"strct-dg__editnumber\"\n                            [ariaLabel]=\"L().editCell + ': ' + col.label\"\n                            [min]=\"col.editorMin ?? null\"\n                            [max]=\"col.editorMax ?? null\"\n                            [step]=\"col.editorStep ?? 1\"\n                            [ngModel]=\"row[col.key]\"\n                            (ngModelChange)=\"editDraft.set($event)\"\n                            (keydown.enter)=\"commitDraft(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (focusout)=\"commitOnLeave(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                        @default {\n                          <input\n                            class=\"strct-dg__editinput\"\n                            type=\"text\"\n                            [value]=\"row[col.key] ?? ''\"\n                            [attr.aria-label]=\"L().editCell + ': ' + col.label\"\n                            (keydown.enter)=\"commitEdit(row, col, $event)\"\n                            (keydown.escape)=\"cancelEdit($event)\"\n                            (blur)=\"commitEdit(row, col, $event)\"\n                            (click)=\"$event.stopPropagation()\"\n                          />\n                        }\n                      }\n                    } @else if (cellTemplate(col.key); as tpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          value: row[col.key],\n                          column: col,\n                        }\"\n                      />\n                    } @else if (isBlank(row, col)) {\n                      <span class=\"strct-dg__empty\" [attr.aria-label]=\"col.emptyLabel || null\">{{\n                        col.emptyText\n                      }}</span>\n                    } @else {\n                      {{ displayValue(row, col) }}\n                      @if (col.descriptionKey && row[col.descriptionKey]) {\n                        <span class=\"strct-dg__celldesc\">{{ row[col.descriptionKey] }}</span>\n                      }\n                    }\n                    <!-- The affordance a mouse never needed: a cell that\n                         can be edited says so on hover and on focus. -->\n                    @if (col.editable && editHint() && !isEditingCell(row, col)) {\n                      <strct-icon\n                        class=\"strct-dg__editpencil\"\n                        name=\"pencil\"\n                        [size]=\"12\"\n                        [strokeWidth]=\"1.6\"\n                        aria-hidden=\"true\"\n                      />\n                    }\n                  </td>\n                }\n                @if (canActions()) {\n                  <td class=\"strct-dg__actioncell\">\n                    <button\n                      type=\"button\"\n                      [attr.tabindex]=\"ctlTabindex()\"\n                      class=\"strct-dg__kebab\"\n                      [attr.aria-label]=\"L().rowActions\"\n                      (click)=\"openRowMenu(row, $event)\"\n                    >\n                      <strct-icon name=\"dots\" [size]=\"16\" />\n                    </button>\n                  </td>\n                }\n              </tr>\n              @if (canExpand() && isExpanded(row)) {\n                <tr class=\"strct-dg__detailrow\">\n                  <td [attr.colspan]=\"colspan()\">\n                    <div class=\"strct-dg__detail\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"detailDef()!.template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, row }\"\n                      />\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          } @empty {\n            <!-- \"Nothing here\" and \"nothing matches what you typed\" are\n                 different states: the second one can be undone, and\n                 saying so is the whole point. -->\n            <tr>\n              <td class=\"strct-dg__emptyrow\" [attr.colspan]=\"colspan()\">\n                @if (filteredAway()) {\n                  <strct-empty-state\n                    size=\"sm\"\n                    [titleLevel]=\"null\"\n                    [title]=\"L().noMatches\"\n                    [description]=\"noMatchesDescription()\"\n                  >\n                    <button strct-button variant=\"flat\" size=\"sm\" (click)=\"clearAllFilters()\">\n                      {{ L().clearFilters }}\n                    </button>\n                  </strct-empty-state>\n                } @else {\n                  <!-- Not a heading: a grid is a region of a page, and an\n                       empty one used to put an <h3> in its outline. -->\n                  <strct-empty-state size=\"sm\" [titleLevel]=\"null\" [title]=\"emptyText()\" />\n                }\n              </td>\n            </tr>\n          }\n          @if (virtual() && bottomPad() > 0) {\n            <tr class=\"strct-dg__vspacer\" aria-hidden=\"true\">\n              <td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (paneOpen()) {\n    <aside class=\"strct-dg__pane\">\n      <div class=\"strct-dg__pane-head\">\n        @if (narrowPane()) {\n          <!-- The pane has taken the list's place, so there is a way back. -->\n          <button\n            type=\"button\"\n            class=\"strct-dg__pane-back\"\n            [attr.aria-label]=\"L().backToList\"\n            (click)=\"closePane()\"\n          >\n            <strct-icon name=\"chevronLeft\" [size]=\"13\" />\n          </button>\n        }\n        <span class=\"strct-dg__pane-title\">\n          <ng-content select=\"[strctDetailPaneTitle]\" />\n          @if (!paneTitleDef()) {\n            {{ activeRow()![columns()[0].key] }}\n          }\n        </span>\n        <span class=\"strct-dg__pane-meta\">\n          <ng-content select=\"[strctDetailPaneMeta]\" />\n        </span>\n        <span class=\"strct-dg__pane-actions\">\n          <ng-content select=\"[strctDetailPaneActions]\" />\n        </span>\n        <button\n          type=\"button\"\n          class=\"strct-dg__pane-close\"\n          [attr.aria-label]=\"L().closeDetail\"\n          (click)=\"closePane()\"\n        >\n          <strct-icon name=\"close\" [size]=\"13\" />\n        </button>\n      </div>\n      <div class=\"strct-dg__pane-body\">\n        <ng-container\n          [ngTemplateOutlet]=\"detailDef()!.template\"\n          [ngTemplateOutletContext]=\"{ $implicit: activeRow(), row: activeRow() }\"\n        />\n      </div>\n    </aside>\n  }\n</div>\n\n@if (showFooter()) {\n  <div class=\"strct-dg__foot\">\n    <div class=\"strct-dg__foot-left\">\n      @if (columnChooser() || sync()) {\n        <div class=\"strct-dg__actions\">\n          <strct-button-group>\n            @if (columnChooser()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [class.is-open]=\"chooserOpen()\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().chooseColumns\"\n                (click)=\"toggleChooser($event)\"\n              >\n                <strct-icon name=\"settings\" [size]=\"16\" />\n              </button>\n            }\n            @if (sync()) {\n              <button\n                strct-button\n                size=\"sm\"\n                [disabled]=\"footerActionsDisabled()\"\n                [attr.aria-label]=\"L().refresh\"\n                (click)=\"syncChange.emit()\"\n              >\n                <strct-icon name=\"refresh\" [size]=\"16\" />\n              </button>\n            }\n          </strct-button-group>\n          @if (columnChooser() && chooserOpen()) {\n            <div class=\"strct-dg__chooser-menu\">\n              @for (col of columns(); track col.key) {\n                <!-- The whole row toggles; the checkbox's own click must not\n                     reach the row or the column would flip twice. -->\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n                <div\n                  class=\"strct-dg__chooser-item\"\n                  (click)=\"toggleColumn(col.key, hiddenColumns().has(col.key))\"\n                >\n                  <strct-checkbox\n                    [checked]=\"!hiddenColumns().has(col.key)\"\n                    (checkedChange)=\"toggleColumn(col.key, $event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                  <span>{{ col.label }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <span class=\"strct-dg__count\">\n        @if (paging() === 'more') {\n          {{ L().showing(rows().length, moreTotal() ?? undefined) }}\n        } @else {\n          {{ totalCount() }} {{ totalCount() === 1 ? L().row : L().rows }}\n        }\n        @if (selectedCount() && mode() !== 'single') {\n          <span class=\"strct-dg__count-sep\">|</span>\n          <span class=\"strct-dg__count-sel\">{{ selectedCount() }} {{ L().selected }}</span>\n        }\n      </span>\n    </div>\n    <div class=\"strct-dg__foot-right\">\n      <!-- A feed that pages by cursor loads more at the end: page numbers\n           are something a cursor API cannot answer. It takes the pager's\n           place \u2014 the column chooser, the sync button and the count are\n           the footer's, not the pager's. -->\n      @if (paging() === 'more') {\n        @if (hasMore()) {\n          <button\n            strct-button\n            size=\"sm\"\n            class=\"strct-dg__more\"\n            [disabled]=\"loadingMore()\"\n            (click)=\"loadMore.emit()\"\n          >\n            @if (loadingMore()) {\n              <strct-spinner size=\"sm\" />\n            }\n            {{ L().loadMore }}\n          </button>\n        }\n      } @else if (pageSize() > 0 && !groupBy()) {\n        <strct-pagination\n          [total]=\"totalCount()\"\n          [pageSize]=\"pageSize()\"\n          [page]=\"page()\"\n          (pageChange)=\"goToPage($event)\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".strct-dg__radio{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}.strct-dg__radio:disabled{cursor:not-allowed}.strct-dg__row--locked .strct-dg__sel{opacity:.55}.strct-dg__actioncaption:empty{display:none}.strct-dg__actioncaption{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--t2)}.strct-dg__bulk{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;padding:7px 12px;border-bottom:1px solid var(--b2);background:var(--acc-s);color:var(--t2);font-size:var(--text-md)}.strct-dg__announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-dg-host{display:block;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-2);box-shadow:var(--shadow-rest)}.strct-dg-host--flush{border:0;border-radius:0;background:transparent;box-shadow:none}.strct-dg__more strct-spinner{margin-inline-end:4px}.strct-dg__caption{caption-side:top;text-align:start;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--t2)}.strct-dg td.strct-dg__cell--mono{font-family:var(--mono);font-size:var(--text-sm)}.strct-dg td.strct-dg__cell--muted{color:var(--t2)}.strct-dg td.strct-dg__cell--numeric{font-variant-numeric:tabular-nums}.strct-dg__empty{color:var(--t2)}.strct-dg__celldesc{display:block;font-size:var(--text-sm);color:var(--t2);line-height:1.3}.strct-dg__scroll{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.strct-dg-host--virtual .strct-dg__scroll,.strct-dg-host--bounded .strct-dg__scroll{overflow-y:auto}.strct-dg-host--virtual .strct-dg thead th,.strct-dg-host--bounded .strct-dg thead th{position:sticky;top:0;z-index:var(--z-raised)}.strct-dg__vspacer td{padding:0;border:0;background:transparent}.strct-dg th[draggable]{cursor:grab}.strct-dg__th--drop{box-shadow:inset 3px 0 0 var(--acc)}.strct-dg__grouprow td{background:var(--bg-2)!important;padding:0}.strct-dg__groupbtn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 13px;border:0;background:transparent;color:var(--t1);font-family:var(--font);font-size:var(--text-sm);font-weight:600;cursor:pointer;text-align:start}.strct-dg__groupbtn:hover{background:var(--bg-3)}.strct-dg__groupbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__groupchev{display:inline-flex;color:var(--t3);transition:transform .15s ease}.strct-dg__groupchev--open{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.strct-dg__groupchev{transition:none}}.strct-dg__grouplabel--critical{color:var(--critical)}.strct-dg__grouplabel--warning{color:var(--warning)}.strct-dg__grouplabel--success{color:var(--success)}.strct-dg__grouplabel--accent{color:var(--acc)}.strct-dg__grouplabel--neutral,.strct-dg__grouplabel--none{color:var(--t1)}.strct-dg__groupnote{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);font-weight:400;color:var(--t2)}.strct-dg__groupcount{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border-radius:4px;background:var(--acc-m);color:var(--acc);font-variant-numeric:tabular-nums}.strct-dg__groupcount--critical{background:var(--critical-bg);color:var(--critical)}.strct-dg__groupcount--warning{background:var(--warning-bg);color:var(--warning)}.strct-dg__groupcount--success{background:var(--success-bg);color:var(--success)}.strct-dg__groupcount--neutral,.strct-dg__groupcount--none{background:var(--bg-3);color:var(--t2)}.strct-dg-host--singleline .strct-dg{border-collapse:separate;border-spacing:0}.strct-dg-host--sticky .strct-dg,.strct-dg-host--virtual .strct-dg,.strct-dg-host--bounded .strct-dg{border-collapse:separate;border-spacing:0;overflow:visible;border-radius:0}.strct-dg-host--sticky .strct-dg{width:max-content;min-width:100%}.strct-dg .strct-dg__cell--sticky{position:sticky;z-index:calc(var(--z-base) + 2)}.strct-dg thead th.strct-dg__cell--sticky{z-index:calc(var(--z-raised) + 1)}.strct-dg .strct-dg__cell--sticky-last:after{content:\"\";position:absolute;top:0;bottom:0;inset-inline-end:-1px;width:7px;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.14),transparent)}[dir=rtl] .strct-dg .strct-dg__cell--sticky-last:after{background:linear-gradient(to left,rgba(0,0,0,.14),transparent)}.strct-dg-host--sticky .strct-dg__expandcol,.strct-dg-host--sticky .strct-dg__expandcell{width:36px;min-width:36px;max-width:36px;box-sizing:border-box}.strct-dg-host--sticky .strct-dg__sel{width:40px;min-width:40px;max-width:40px;box-sizing:border-box}.strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__cell--sticky{background:var(--bg-3)}.strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody tr:hover .strct-dg__cell--sticky{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg-host--sticky tbody .strct-dg__row--selected .strct-dg__cell--sticky{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;background:var(--bg-2)}.strct-dg-host:not(:has(.strct-dg__toolbar)) .strct-dg{border-start-start-radius:4px;border-start-end-radius:4px}.strct-dg-host:not(:has(.strct-dg__foot)) .strct-dg{border-end-start-radius:4px;border-end-end-radius:4px}.strct-dg th,.strct-dg td{padding:9px 13px;text-align:start;border-bottom:1px solid var(--b1)}.strct-dg tbody td{background:var(--bg-1)}[data-theme=dark] .strct-dg tbody td{background:var(--bg-3)}.strct-dg-host--compact .strct-dg th,.strct-dg-host--compact .strct-dg td{padding:5px 11px}.strct-dg-host--singleline .strct-dg tbody tr:not(.strct-dg__detailrow)>td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.strct-dg th{position:relative;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);background:var(--bg-2);white-space:nowrap;-webkit-user-select:none;user-select:none}.strct-dg__th--sortable{cursor:pointer}.strct-dg__th--sortable:hover{color:var(--t1)}.strct-dg__sortbtn{display:inline-flex;align-items:center;gap:inherit;padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer}.strct-dg__sortbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-dg__th--sortable:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__hd{display:inline-flex;align-items:center;gap:5px}.strct-dg__sorticon{color:var(--t3)}.strct-dg__th--sortable:hover .strct-dg__sorticon{color:var(--acc)}.strct-dg__resize{position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:calc(var(--z-base) + 1)}.strct-dg__resize:hover{background:var(--acc)}.strct-dg td{color:var(--t1)}.strct-dg tbody tr:last-child td{border-bottom:0}.strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr:not(.strct-dg__detailrow):hover td{background:linear-gradient(var(--acc-s),var(--acc-s)) var(--bg-3)}.strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--selected td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody tr.strct-dg__row--selected:hover td{background:linear-gradient(var(--acc-s),var(--acc-s)),linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__sel{width:1%;white-space:nowrap}.strct-dg__sel .strct-cb,.strct-dg__sel .strct-dg__radio,.strct-dg__expandbtn{position:relative}.strct-dg__sel .strct-cb:after,.strct-dg__sel .strct-dg__radio:after,.strct-dg__expandbtn:after{content:\"\";position:absolute;inset:-11px -13px;min-width:24px;min-height:24px}.strct-dg-host--compact .strct-dg__sel .strct-cb:after,.strct-dg-host--compact .strct-dg__sel .strct-dg__radio:after,.strct-dg-host--compact .strct-dg__expandbtn:after{inset:-7px -11px}.strct-dg__sel input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}.strct-dg__expandcol,.strct-dg__expandcell{width:1%;white-space:nowrap}.strct-dg__actioncol,.strct-dg__actioncell{width:1%;white-space:nowrap;text-align:end}.strct-dg__kebab{display:inline-flex;padding:4px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__kebab:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:transform .15s ease,color .15s ease}.strct-dg__expandbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__expandbtn--open{transform:rotate(90deg);color:var(--acc)}.strct-dg__detailbtn{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-dg__detailbtn:hover{color:var(--acc);background:var(--bg-3)}.strct-dg__detailbtn--active{color:var(--acc);background:var(--acc-m)}.strct-dg__detailrow td{background:var(--bg-2);padding:0}.strct-dg__detail{padding:14px 16px;font-size:13px;color:var(--t2)}.strct-dg__layout{display:flex;align-items:flex-start;min-width:0}.strct-dg__layout--paned{gap:0}.strct-dg__layout--paned>.strct-dg__scroll{flex:0 0 auto;width:var(--strct-dg-pane-list-w, 260px);min-width:var(--strct-dg-pane-list-w, 260px);max-width:var(--strct-dg-pane-list-w, 260px)}.strct-dg__layout--paned>.strct-dg__scroll>.strct-dg{width:100%;min-width:0;max-width:none;flex-shrink:0;border-start-end-radius:0;border-end-end-radius:0}.strct-dg__layout--panetakeover>.strct-dg__scroll{display:none}.strct-dg__layout--panetakeover>.strct-dg__pane{flex:1;min-width:0}.strct-dg__pane-meta,.strct-dg__pane-actions{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-dg__pane-meta:empty,.strct-dg__pane-actions:empty{display:none}.strct-dg__pane-actions{margin-inline-start:auto}.strct-dg__pane-back{display:inline-flex;align-items:center;border:0;background:none;color:var(--t2);cursor:pointer;padding:2px;border-radius:var(--radius-sm)}.strct-dg__row--clickable{cursor:pointer}.strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-1)}[data-theme=dark] .strct-dg tbody .strct-dg__row--active td{background:linear-gradient(var(--acc-m),var(--acc-m)) var(--bg-3)}.strct-dg__layout--paned .strct-dg__row--active td:last-child{position:relative;padding-inline-end:26px}.strct-dg__layout--paned .strct-dg__row--active td:last-child:after{content:\"\";position:absolute;inset-inline-end:11px;top:50%;width:6px;height:6px;border-top:1.6px solid var(--acc);border-inline-end:1.6px solid var(--acc);transform:translateY(-50%) rotate(45deg)}.strct-dg__pane{flex:1;min-width:0;align-self:stretch;background:var(--bg-1);border:1px solid var(--b2);border-inline-start:2px solid var(--acc);border-radius:4px;border-start-start-radius:0;border-end-start-radius:0;overflow:hidden;animation:strct-dg-pane-in .14s ease}.strct-dg__pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--b1);font-size:13px;font-weight:600;color:var(--t1)}.strct-dg__pane-close{display:inline-flex;padding:3px;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer}.strct-dg__pane-close:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__pane-body{padding:14px 16px;font-size:13px;color:var(--t2)}@keyframes strct-dg-pane-in{0%{opacity:0;transform:translate(8px)}}@keyframes strct-skeleton-pulse{0%,to{opacity:.4}50%{opacity:.7}}.strct-dg__skeleton-block{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-3) 25%,var(--skeleton-hi, var(--acc18)) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:strct-dg-skeleton-sweep 1.1s linear infinite}@keyframes strct-dg-skeleton-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.strct-dg__skeleton-block{animation:none;background:var(--skeleton-hi, var(--acc18))}}.strct-dg__skeleton-row td{border-bottom:1px solid var(--b1)}.strct-dg__empty{text-align:center;color:var(--t2);padding:22px}.strct-dg__quickfilter{min-width:180px;max-width:260px}.strct-dg__quickfilter--end{order:2;margin-inline-start:auto}.strct-dg__filternote--end{order:3}.strct-dg__filternote{font-size:var(--text-sm);color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}.strct-dg__toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--b2)}.strct-dg__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--b2);flex-wrap:wrap}.strct-dg__foot-left,.strct-dg__foot-right{display:flex;align-items:center;gap:12px}.strct-dg__actions{position:relative}.strct-dg__chooser-menu{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;z-index:var(--z-sticky);min-width:180px;background:var(--bg-1);border:1px solid var(--b2);border-radius:4px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px}.strct-dg__chooser-menu--right{inset-inline-start:auto;inset-inline-end:0}.strct-dg__chooser-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;cursor:pointer;font-size:12px;color:var(--t1);transition:background .1s ease;-webkit-user-select:none;user-select:none}.strct-dg__chooser-item:hover{background:var(--bg-3)}.strct-dg__count{font-size:12px;color:var(--t2)}.strct-dg__count-sep{margin:0 8px;color:var(--b2)}.strct-dg__count-sel{color:var(--acc)}.strct-dg__filterbtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:2px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__filterbtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__filterbtn--active{color:var(--acc)}.strct-dg__filterbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filterpanel{position:absolute;z-index:calc(var(--z-dropdown) + 10);display:flex;flex-direction:column;gap:6px;min-width:180px;padding:10px;background:var(--bg-1);border:1px solid var(--b2);border-radius:3px;box-shadow:var(--shh);font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap}.strct-dg__filterinput{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-dg__filterinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__filteropt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t1);cursor:pointer}.strct-dg__filterclear{align-self:flex-start;padding:3px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:transparent;color:var(--t2);font-family:var(--font);font-size:var(--text-sm);cursor:pointer}.strct-dg__filterclear:hover:not(:disabled){color:var(--t1);background:var(--bg-3)}.strct-dg__filterclear:disabled{color:var(--t4);cursor:default}.strct-dg tbody tr[tabindex]:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-dg__treepad{display:inline-block;height:1px;vertical-align:middle}.strct-dg__treebtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-end:4px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--t3);cursor:pointer;vertical-align:middle}.strct-dg__treebtn:hover{color:var(--t1);background:var(--bg-3)}.strct-dg__treebtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-dg__treebtn strct-icon{transition:transform .15s ease}.strct-dg__treebtn--open strct-icon{transform:rotate(90deg)}.strct-dg__treebtn--leaf{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.strct-dg__treebtn strct-icon{transition:none}}.strct-dg__cell--editable{cursor:text;position:relative}.strct-dg__cell--editable:hover{box-shadow:inset 0 0 0 1px var(--b2)}.strct-dg__cell--editable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc50)}.strct-dg__editpencil{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);color:var(--t3);opacity:0;pointer-events:none}td:hover>.strct-dg__editpencil,td:focus-within>.strct-dg__editpencil{opacity:1}.strct-dg__editinput{width:100%;box-sizing:border-box;padding:3px 6px;border:1px solid var(--acc);border-radius:var(--radius-sm);background:var(--bg-1);color:var(--t1);font:inherit}.strct-dg__editselect,.strct-dg__editnumber{display:block;width:100%}.strct-dg__editinput:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], pageSizeFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selectableFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], detailPaneFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailPane", required: false }] }], paneListWidthFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneListWidth", required: false }] }], paneTakeoverWidthFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneTakeoverWidth", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }, { type: i0.Output, args: ["activeRowIdChange"] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], singleLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleLine", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], columnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnChooser", required: false }] }], syncFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "sync", required: false }] }], footerActionsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerActionsDisabled", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], selectionModeFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], rowSelectableFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], hasMoreFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], loadingMoreFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMore", required: false }] }], moreTotalFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreTotal", required: false }] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], groupSelectFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSelect", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], initialSelectionFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], viewportHeightFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], maxHeightFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], editHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "editHint", required: false }] }], rowHeightFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], lazyFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], stateKeyFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }, { type: i0.Output, args: ["columnStateChange"] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], groupByFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], groupsFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], showEmptyGroupsFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyGroups", required: false }] }], collapsedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedGroups", required: false }] }, { type: i0.Output, args: ["collapsedGroupsChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], quickFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilter", required: false }] }, { type: i0.Output, args: ["quickFilterChange"] }], quickFilterFieldsFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterFields", required: false }] }], quickFilterableFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterable", required: false }] }], quickFilterAlignFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilterAlign", required: false }] }], childrenKeyFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], interactionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactionMode", required: false }] }], selectionColumnFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColumn", required: false }] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], syncChange: [{ type: i0.Output, args: ["syncChange"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], selectionCfg: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], paneFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "pane", required: false }] }], pagingFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }], virtualFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], groupingCfg: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], filteringCfg: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], stateCfg: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], detailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctRowDetailDef), { isSignal: true }] }], groupHeaderDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctGroupHeaderDef), { isSignal: true }] }], paneTitleDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDetailPaneTitle), { isSignal: true }] }], actionBarDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBar), { isSignal: true }] }], actionBarCaptionDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDatagridActionBarCaption), { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctCellDef), { isSignal: true }] }], onDocClickOverlays: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }], onEscapeOverlays: [{
@@ -31994,5 +30622,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAccordionPanelMeta, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownGroup, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownItemDescription, StrctDropdownItemIcon, StrctDropdownItemLabel, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeaderAction, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProductSwitcher, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, defaultStateWords, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, placeTooltip, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctShowTooltip, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { DG_LABELS, FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAccordionPanelMeta, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownGroup, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownItemDescription, StrctDropdownItemIcon, StrctDropdownItemLabel, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeaderAction, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProductSwitcher, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, defaultStateWords, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, placeTooltip, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctShowTooltip, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map