@ornery/ui-grid-vanilla 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/main.ts +1 -2
- package/dist/index.d.mts +40 -2
- package/dist/index.d.ts +40 -2
- package/dist/index.js +263 -100
- package/dist/index.mjs +263 -102
- package/package.json +6 -5
- package/src/cell-state-management.test.ts +419 -0
- package/src/events.ts +77 -26
- package/src/framework-slots.ts +18 -0
- package/src/grid-controller.ts +142 -98
- package/src/index.integration.test.ts +27 -10
- package/src/index.test.ts +0 -4
- package/src/index.ts +6 -9
- package/src/keyboard-navigation.test.ts +1 -7
- package/src/patch.ts +118 -1
- package/src/row-edit.test.ts +1 -1
- package/src/ui-grid-standalone.element.ts +79 -1
- package/vitest.config.ts +30 -0
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
// src/index.ts
|
|
2
|
-
import { registerRustWasmGridEngine } from "@ornery/ui-grid-core";
|
|
3
|
-
|
|
4
1
|
// src/ui-grid-standalone.element.ts
|
|
5
2
|
import {
|
|
6
3
|
interpolateGridTemplate
|
|
@@ -129,6 +126,23 @@ var FrameworkSlotBridge = class {
|
|
|
129
126
|
}
|
|
130
127
|
});
|
|
131
128
|
}
|
|
129
|
+
/**
|
|
130
|
+
* Carry forward every previously-known cell slot for `rowId` into the
|
|
131
|
+
* current pending set. Used by the structural patch path when a row's
|
|
132
|
+
* fingerprint matches the previous render's: `stageCell` would normally
|
|
133
|
+
* re-record the slot during cell rendering, but the fingerprint
|
|
134
|
+
* short-circuit skips the render pass for unchanged rows. Without this,
|
|
135
|
+
* `flush()` would diff pending (missing the row's slots) against last
|
|
136
|
+
* (containing them) and emit a spurious `removed` for every cell of the
|
|
137
|
+
* unchanged row, destroying the framework wrappers' projected content.
|
|
138
|
+
*/
|
|
139
|
+
carryRowCells(rowId) {
|
|
140
|
+
for (const [slotName, slot] of this.lastCellSlots) {
|
|
141
|
+
if (slot.rowId === rowId) {
|
|
142
|
+
this.pendingCellSlots.set(slotName, slot);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
132
146
|
stageExpandableRow(row, rowIndex) {
|
|
133
147
|
const slotName = expandableRowSlotName(row);
|
|
134
148
|
this.pendingExpandableRowSlots.set(slotName, {
|
|
@@ -1107,6 +1121,17 @@ function patchBodyRegion(el, root, snapshot, options, labels, templateColumns, v
|
|
|
1107
1121
|
bodyContainer.innerHTML = bodyContent;
|
|
1108
1122
|
}
|
|
1109
1123
|
el.lastItemsFingerprint = itemsFingerprint;
|
|
1124
|
+
el.lastRowStateFingerprints.clear();
|
|
1125
|
+
for (let i = 0; i < itemsToRender.length; i++) {
|
|
1126
|
+
const item = itemsToRender[i];
|
|
1127
|
+
if (!isRowItem(item)) continue;
|
|
1128
|
+
el.lastRowStateFingerprints.set(item.row.id, {
|
|
1129
|
+
fingerprint: buildRowFingerprint(item.row, startIndex + i, snapshot.visibleColumns),
|
|
1130
|
+
entity: item.row.entity
|
|
1131
|
+
});
|
|
1132
|
+
}
|
|
1133
|
+
el.lastEditingCellKey = el.controller?.getEditingCellKey() ?? null;
|
|
1134
|
+
el.lastFocusedCellKey = el.focusedCell ? `${el.focusedCell.rowId} ${el.focusedCell.columnName}` : null;
|
|
1110
1135
|
}
|
|
1111
1136
|
function fingerprintItems(items) {
|
|
1112
1137
|
const parts = [];
|
|
@@ -1125,7 +1150,6 @@ function fingerprintItems(items) {
|
|
|
1125
1150
|
}
|
|
1126
1151
|
function patchExistingRows(el, bodyContainer, snapshot, itemsToRender, startIndex) {
|
|
1127
1152
|
const controller = el.controller;
|
|
1128
|
-
void controller;
|
|
1129
1153
|
const columns = snapshot.visibleColumns;
|
|
1130
1154
|
const groupEls = /* @__PURE__ */ new Map();
|
|
1131
1155
|
const cellEls = /* @__PURE__ */ new Map();
|
|
@@ -1155,6 +1179,11 @@ function patchExistingRows(el, bodyContainer, snapshot, itemsToRender, startInde
|
|
|
1155
1179
|
for (const col of columns) {
|
|
1156
1180
|
templateMarkupMap.set(col.name, getTemplateMarkup2(el, `cell-${col.name}`));
|
|
1157
1181
|
}
|
|
1182
|
+
const visitedRowIds = /* @__PURE__ */ new Set();
|
|
1183
|
+
const editingCellKey = controller.getEditingCellKey();
|
|
1184
|
+
const focusedCellKey = el.focusedCell ? `${el.focusedCell.rowId} ${el.focusedCell.columnName}` : null;
|
|
1185
|
+
const editingMoved = editingCellKey !== el.lastEditingCellKey;
|
|
1186
|
+
const focusedMoved = focusedCellKey !== el.lastFocusedCellKey;
|
|
1158
1187
|
let expandableIndex = 0;
|
|
1159
1188
|
for (let i = 0; i < itemsToRender.length; i++) {
|
|
1160
1189
|
const item = itemsToRender[i];
|
|
@@ -1180,14 +1209,48 @@ function patchExistingRows(el, bodyContainer, snapshot, itemsToRender, startInde
|
|
|
1180
1209
|
}
|
|
1181
1210
|
if (!isRowItem(item)) continue;
|
|
1182
1211
|
const row = item.row;
|
|
1212
|
+
visitedRowIds.add(row.id);
|
|
1183
1213
|
const rowCells = cellEls.get(row.id);
|
|
1184
1214
|
if (!rowCells) continue;
|
|
1215
|
+
const rowFingerprint = buildRowFingerprint(row, displayIndex, columns);
|
|
1216
|
+
const lastEntry = el.lastRowStateFingerprints.get(row.id);
|
|
1217
|
+
const editingTouchesRow = editingCellKey !== null && editingCellKey.startsWith(`${row.id} `) || el.lastEditingCellKey !== null && el.lastEditingCellKey.startsWith(`${row.id} `);
|
|
1218
|
+
const focusedTouchesRow = focusedCellKey !== null && focusedCellKey.startsWith(`${row.id} `) || el.lastFocusedCellKey !== null && el.lastFocusedCellKey.startsWith(`${row.id} `);
|
|
1219
|
+
const canSkip = lastEntry !== void 0 && lastEntry.fingerprint === rowFingerprint && lastEntry.entity === row.entity && !(editingMoved && editingTouchesRow) && !(focusedMoved && focusedTouchesRow);
|
|
1220
|
+
if (canSkip) {
|
|
1221
|
+
el.frameworkSlots.carryRowCells(row.id);
|
|
1222
|
+
continue;
|
|
1223
|
+
}
|
|
1224
|
+
el.lastRowStateFingerprints.set(row.id, { fingerprint: rowFingerprint, entity: row.entity });
|
|
1185
1225
|
for (const column of columns) {
|
|
1186
1226
|
const target = rowCells.get(column.name);
|
|
1187
1227
|
if (!target) continue;
|
|
1188
1228
|
patchBodyCell(el, target, row, column, displayIndex, templateMarkupMap);
|
|
1189
1229
|
}
|
|
1190
1230
|
}
|
|
1231
|
+
if (el.lastRowStateFingerprints.size > visitedRowIds.size) {
|
|
1232
|
+
for (const id of el.lastRowStateFingerprints.keys()) {
|
|
1233
|
+
if (!visitedRowIds.has(id)) el.lastRowStateFingerprints.delete(id);
|
|
1234
|
+
}
|
|
1235
|
+
}
|
|
1236
|
+
el.lastEditingCellKey = editingCellKey;
|
|
1237
|
+
el.lastFocusedCellKey = focusedCellKey;
|
|
1238
|
+
}
|
|
1239
|
+
function buildRowFingerprint(row, displayIndex, visibleColumns) {
|
|
1240
|
+
let flags = 0;
|
|
1241
|
+
if (row.isSelected) flags |= 1;
|
|
1242
|
+
if (row.isFocused) flags |= 2;
|
|
1243
|
+
if (row.expanded) flags |= 4;
|
|
1244
|
+
if (row.isDirty) flags |= 8;
|
|
1245
|
+
if (row.isSaving) flags |= 16;
|
|
1246
|
+
if (row.isError) flags |= 32;
|
|
1247
|
+
if (row.visible) flags |= 64;
|
|
1248
|
+
let invalidBits = "";
|
|
1249
|
+
const entity = row.entity;
|
|
1250
|
+
for (const col of visibleColumns) {
|
|
1251
|
+
invalidBits += entity[`$$invalid${col.name}`] ? "1" : "0";
|
|
1252
|
+
}
|
|
1253
|
+
return `${displayIndex}|${flags}|${row.treeLevel}|${row.height}|${row.expandedRowHeight}|${invalidBits}`;
|
|
1191
1254
|
}
|
|
1192
1255
|
function patchGroupRow(el, target, group) {
|
|
1193
1256
|
const snapshot = el.snapshot;
|
|
@@ -1520,9 +1583,21 @@ function measureAutoColumnWidth(el, columnName) {
|
|
|
1520
1583
|
|
|
1521
1584
|
// src/events.ts
|
|
1522
1585
|
import { canGridMoveColumns as canGridMoveColumns2 } from "@ornery/ui-grid-core";
|
|
1586
|
+
function bodyCellFromEvent(event) {
|
|
1587
|
+
const path = event.composedPath();
|
|
1588
|
+
for (const node of path) {
|
|
1589
|
+
if (node instanceof HTMLElement && node.classList.contains("body-cell")) {
|
|
1590
|
+
if (node.dataset["row"] && node.dataset["column"]) return node;
|
|
1591
|
+
}
|
|
1592
|
+
}
|
|
1593
|
+
return null;
|
|
1594
|
+
}
|
|
1523
1595
|
function observeTemplateSlots(el) {
|
|
1524
1596
|
if (el.templateObserver) return;
|
|
1525
|
-
el.templateObserver = new MutationObserver(() => {
|
|
1597
|
+
el.templateObserver = new MutationObserver((mutations) => {
|
|
1598
|
+
const involvesTemplate = mutationsTouchTemplateSlot(mutations);
|
|
1599
|
+
if (!involvesTemplate) return;
|
|
1600
|
+
el.lastRowStateFingerprints.clear();
|
|
1526
1601
|
if (el.activeOptions) {
|
|
1527
1602
|
el.ensureController(el.buildEffectiveOptions(el.activeOptions));
|
|
1528
1603
|
} else {
|
|
@@ -1536,6 +1611,22 @@ function observeTemplateSlots(el) {
|
|
|
1536
1611
|
attributeFilter: ["slot"]
|
|
1537
1612
|
});
|
|
1538
1613
|
}
|
|
1614
|
+
function mutationsTouchTemplateSlot(mutations) {
|
|
1615
|
+
for (const m of mutations) {
|
|
1616
|
+
if (m.type === "attributes" && m.target instanceof HTMLTemplateElement) {
|
|
1617
|
+
return true;
|
|
1618
|
+
}
|
|
1619
|
+
if (m.type === "childList") {
|
|
1620
|
+
for (const node of m.addedNodes) {
|
|
1621
|
+
if (node instanceof HTMLTemplateElement && node.hasAttribute("slot")) return true;
|
|
1622
|
+
}
|
|
1623
|
+
for (const node of m.removedNodes) {
|
|
1624
|
+
if (node instanceof HTMLTemplateElement && node.hasAttribute("slot")) return true;
|
|
1625
|
+
}
|
|
1626
|
+
}
|
|
1627
|
+
}
|
|
1628
|
+
return false;
|
|
1629
|
+
}
|
|
1539
1630
|
function syncHeaderHorizontalScroll(el, scrollLeft) {
|
|
1540
1631
|
const root = el.shadowRoot;
|
|
1541
1632
|
if (!root) return;
|
|
@@ -1566,7 +1657,7 @@ function bindEvents(el) {
|
|
|
1566
1657
|
root.addEventListener("click", (event) => {
|
|
1567
1658
|
const realTarget = event.composedPath()[0] ?? event.target;
|
|
1568
1659
|
if (!realTarget || !el.controller || !el.snapshot) return;
|
|
1569
|
-
const clickedCell =
|
|
1660
|
+
const clickedCell = bodyCellFromEvent(event);
|
|
1570
1661
|
if (clickedCell && !realTarget.closest('[data-role="editor"]')) {
|
|
1571
1662
|
const rowId = clickedCell.dataset["row"];
|
|
1572
1663
|
const columnName = clickedCell.dataset["column"];
|
|
@@ -1587,11 +1678,8 @@ function bindEvents(el) {
|
|
|
1587
1678
|
handleRowSelectionClick(el, rowId, columnName, event);
|
|
1588
1679
|
}
|
|
1589
1680
|
}
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
);
|
|
1593
|
-
if (checkboxNode) {
|
|
1594
|
-
const rowId = checkboxNode.dataset["row"];
|
|
1681
|
+
if (clickedCell?.dataset["column"] === "selectionRowHeaderCol") {
|
|
1682
|
+
const rowId = clickedCell.dataset["row"];
|
|
1595
1683
|
if (rowId) {
|
|
1596
1684
|
event.stopPropagation();
|
|
1597
1685
|
handleRowHeaderCheckboxClick(el, rowId, event);
|
|
@@ -1683,9 +1771,10 @@ function bindEvents(el) {
|
|
|
1683
1771
|
return;
|
|
1684
1772
|
}
|
|
1685
1773
|
if (action === "benchmark") {
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1774
|
+
void el.controller.gridApi.core.benchmark().then((result) => {
|
|
1775
|
+
el.benchmarkAverage = result.averageMs.toFixed(2);
|
|
1776
|
+
el.render();
|
|
1777
|
+
});
|
|
1689
1778
|
return;
|
|
1690
1779
|
}
|
|
1691
1780
|
if (action === "export-csv") {
|
|
@@ -1693,13 +1782,16 @@ function bindEvents(el) {
|
|
|
1693
1782
|
}
|
|
1694
1783
|
});
|
|
1695
1784
|
root.addEventListener("focusin", (event) => {
|
|
1696
|
-
const
|
|
1697
|
-
if (!target) return;
|
|
1698
|
-
const cell = target.closest(".body-cell[data-row][data-column]");
|
|
1785
|
+
const cell = bodyCellFromEvent(event);
|
|
1699
1786
|
const rowId = cell?.dataset["row"];
|
|
1700
1787
|
const columnName = cell?.dataset["column"];
|
|
1701
1788
|
if (rowId && columnName) {
|
|
1702
|
-
el.focusedCell
|
|
1789
|
+
const previous = el.focusedCell;
|
|
1790
|
+
const next = { rowId, columnName };
|
|
1791
|
+
if (!previous || previous.rowId !== rowId || previous.columnName !== columnName) {
|
|
1792
|
+
el.focusedCell = next;
|
|
1793
|
+
applyFocusedCellClass(el, previous, next);
|
|
1794
|
+
}
|
|
1703
1795
|
}
|
|
1704
1796
|
});
|
|
1705
1797
|
root.addEventListener("focusout", (event) => {
|
|
@@ -1733,7 +1825,7 @@ function bindEvents(el) {
|
|
|
1733
1825
|
if (realTarget.closest(".filter-cell")) return;
|
|
1734
1826
|
const resolved = el.controller.getResolvedSelectionOptions();
|
|
1735
1827
|
if (!resolved.enableRowSelection || !resolved.multiSelect) return;
|
|
1736
|
-
const startCell =
|
|
1828
|
+
const startCell = bodyCellFromEvent(event);
|
|
1737
1829
|
if (!startCell) return;
|
|
1738
1830
|
const startRowId = startCell.dataset["row"];
|
|
1739
1831
|
if (!startRowId) return;
|
|
@@ -1755,9 +1847,7 @@ function bindEvents(el) {
|
|
|
1755
1847
|
else el.controller.unSelectRow(row.entity, event);
|
|
1756
1848
|
};
|
|
1757
1849
|
const handleMove = (moveEvent) => {
|
|
1758
|
-
const
|
|
1759
|
-
const firstEl = path[0];
|
|
1760
|
-
const cell = firstEl?.closest?.(".body-cell[data-row][data-column]");
|
|
1850
|
+
const cell = bodyCellFromEvent(moveEvent);
|
|
1761
1851
|
if (!cell) return;
|
|
1762
1852
|
const rowId = cell.dataset["row"];
|
|
1763
1853
|
if (!rowId) return;
|
|
@@ -1826,7 +1916,7 @@ function bindEvents(el) {
|
|
|
1826
1916
|
return;
|
|
1827
1917
|
}
|
|
1828
1918
|
}
|
|
1829
|
-
const cell =
|
|
1919
|
+
const cell = bodyCellFromEvent(event);
|
|
1830
1920
|
if (!cell) return;
|
|
1831
1921
|
const rowId = cell.dataset["row"];
|
|
1832
1922
|
const columnName = cell.dataset["column"];
|
|
@@ -1838,8 +1928,9 @@ function bindEvents(el) {
|
|
|
1838
1928
|
const keyboardEvent = event;
|
|
1839
1929
|
const target = event.target;
|
|
1840
1930
|
if (!target || !el.controller) return;
|
|
1931
|
+
const onBodyCell = bodyCellFromEvent(event);
|
|
1841
1932
|
const overrides = el.controller.getOptions().keyDownOverrides ?? [];
|
|
1842
|
-
if (overrides.length &&
|
|
1933
|
+
if (overrides.length && onBodyCell) {
|
|
1843
1934
|
for (const override of overrides) {
|
|
1844
1935
|
if (matchesKeyOverride(override, keyboardEvent)) {
|
|
1845
1936
|
el.controller.raiseCellNavKeyEvent("keydown", keyboardEvent);
|
|
@@ -1847,7 +1938,7 @@ function bindEvents(el) {
|
|
|
1847
1938
|
}
|
|
1848
1939
|
}
|
|
1849
1940
|
}
|
|
1850
|
-
if ((keyboardEvent.ctrlKey || keyboardEvent.metaKey) && (keyboardEvent.key === "a" || keyboardEvent.key === "A") &&
|
|
1941
|
+
if ((keyboardEvent.ctrlKey || keyboardEvent.metaKey) && (keyboardEvent.key === "a" || keyboardEvent.key === "A") && onBodyCell) {
|
|
1851
1942
|
const resolved = el.controller.getResolvedSelectionOptions();
|
|
1852
1943
|
if (resolved.enableRowSelection && resolved.multiSelect) {
|
|
1853
1944
|
event.preventDefault();
|
|
@@ -1856,10 +1947,10 @@ function bindEvents(el) {
|
|
|
1856
1947
|
}
|
|
1857
1948
|
}
|
|
1858
1949
|
if (keyboardEvent.key === " " || keyboardEvent.key === "Spacebar") {
|
|
1859
|
-
const
|
|
1860
|
-
const rowId2 =
|
|
1861
|
-
const columnName2 =
|
|
1862
|
-
if (
|
|
1950
|
+
const cell = onBodyCell;
|
|
1951
|
+
const rowId2 = cell?.dataset["row"];
|
|
1952
|
+
const columnName2 = cell?.dataset["column"];
|
|
1953
|
+
if (cell && rowId2 && columnName2) {
|
|
1863
1954
|
const resolved = el.controller.getResolvedSelectionOptions();
|
|
1864
1955
|
if (resolved.enableRowSelection) {
|
|
1865
1956
|
const onCheckboxCol = columnName2 === "selectionRowHeaderCol";
|
|
@@ -1912,10 +2003,9 @@ function bindEvents(el) {
|
|
|
1912
2003
|
}
|
|
1913
2004
|
let rowId;
|
|
1914
2005
|
let columnName;
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
columnName = cell.dataset["column"];
|
|
2006
|
+
if (onBodyCell) {
|
|
2007
|
+
rowId = onBodyCell.dataset["row"];
|
|
2008
|
+
columnName = onBodyCell.dataset["column"];
|
|
1919
2009
|
} else if (el.focusedCell) {
|
|
1920
2010
|
rowId = el.focusedCell.rowId;
|
|
1921
2011
|
columnName = el.focusedCell.columnName;
|
|
@@ -2378,7 +2468,9 @@ var VanillaGridController = class {
|
|
|
2378
2468
|
this.groupByColumns = options.grouping?.groupBy ? [...options.grouping.groupBy] : [];
|
|
2379
2469
|
this.lastOptionsGroupBy = options.grouping?.groupBy ? [...options.grouping.groupBy] : void 0;
|
|
2380
2470
|
this.pinnedColumns = buildInitialPinnedState(options.columnDefs);
|
|
2381
|
-
const declaresPin = options.columnDefs.some(
|
|
2471
|
+
const declaresPin = options.columnDefs.some(
|
|
2472
|
+
(col) => col.pinnedLeft === true || col.pinnedRight === true
|
|
2473
|
+
);
|
|
2382
2474
|
this.lastOptionsPinnedState = declaresPin ? { ...this.pinnedColumns } : void 0;
|
|
2383
2475
|
this.lastOptionsInfiniteScrollUp = options.infiniteScrollUp;
|
|
2384
2476
|
this.lastOptionsInfiniteScrollDown = options.infiniteScrollDown;
|
|
@@ -2420,7 +2512,10 @@ var VanillaGridController = class {
|
|
|
2420
2512
|
excelExport: (rowType, colType) => this.exportExcel(rowType, colType),
|
|
2421
2513
|
buildExcelSheetData: (rowType, colType) => this.buildExcelSheetData(rowType, colType),
|
|
2422
2514
|
getExporterMenuItems: () => this.buildExporterMenuItems(),
|
|
2423
|
-
getExporterOptions: () => ({
|
|
2515
|
+
getExporterOptions: () => ({
|
|
2516
|
+
...this.exporterOverrides,
|
|
2517
|
+
...resolveGridExporterOptions(this.options)
|
|
2518
|
+
}),
|
|
2424
2519
|
setExporterOptions: (overrides) => {
|
|
2425
2520
|
this.exporterOverrides = { ...this.exporterOverrides, ...overrides };
|
|
2426
2521
|
},
|
|
@@ -3280,10 +3375,7 @@ var VanillaGridController = class {
|
|
|
3280
3375
|
return Promise.resolve();
|
|
3281
3376
|
}
|
|
3282
3377
|
infiniteScrollResetScroll(scrollUp, scrollDown) {
|
|
3283
|
-
this.infiniteScrollState = resetInfiniteScrollState(
|
|
3284
|
-
scrollUp ?? false,
|
|
3285
|
-
scrollDown ?? true
|
|
3286
|
-
);
|
|
3378
|
+
this.infiniteScrollState = resetInfiniteScrollState(scrollUp ?? false, scrollDown ?? true);
|
|
3287
3379
|
this.infiniteScrollScrollToTopRequest?.();
|
|
3288
3380
|
}
|
|
3289
3381
|
infiniteScrollSavePercentage() {
|
|
@@ -3321,6 +3413,13 @@ var VanillaGridController = class {
|
|
|
3321
3413
|
setInfiniteScrollResetHandler(handler) {
|
|
3322
3414
|
this.infiniteScrollScrollToTopRequest = handler;
|
|
3323
3415
|
}
|
|
3416
|
+
/** Element-owned render benchmark. When present, `core.benchmark()`
|
|
3417
|
+
* measures the actual render path instead of the controller-only
|
|
3418
|
+
* pipeline builder. */
|
|
3419
|
+
benchmarkRequest = null;
|
|
3420
|
+
setBenchmarkHandler(handler) {
|
|
3421
|
+
this.benchmarkRequest = handler;
|
|
3422
|
+
}
|
|
3324
3423
|
getInfiniteScrollState() {
|
|
3325
3424
|
return this.infiniteScrollState;
|
|
3326
3425
|
}
|
|
@@ -3329,7 +3428,8 @@ var VanillaGridController = class {
|
|
|
3329
3428
|
return this.options.enableColumnResizing !== false;
|
|
3330
3429
|
}
|
|
3331
3430
|
setViewportWidth(width) {
|
|
3332
|
-
|
|
3431
|
+
const adjusted = Math.max(0, Math.floor(width) - 2);
|
|
3432
|
+
this.viewportWidth = adjusted;
|
|
3333
3433
|
}
|
|
3334
3434
|
getViewportWidth() {
|
|
3335
3435
|
return this.viewportWidth;
|
|
@@ -3344,9 +3444,7 @@ var VanillaGridController = class {
|
|
|
3344
3444
|
buildTemplateColumnsWithOverride(columnName, widthPx) {
|
|
3345
3445
|
const widthStr = `${Math.max(88, Math.round(widthPx))}px`;
|
|
3346
3446
|
return buildGridTemplateColumns(
|
|
3347
|
-
this.visibleColumns.map(
|
|
3348
|
-
(c) => c.name === columnName ? { ...c, width: widthStr } : c
|
|
3349
|
-
),
|
|
3447
|
+
this.visibleColumns.map((c) => c.name === columnName ? { ...c, width: widthStr } : c),
|
|
3350
3448
|
this.viewportWidth
|
|
3351
3449
|
);
|
|
3352
3450
|
}
|
|
@@ -3458,6 +3556,12 @@ var VanillaGridController = class {
|
|
|
3458
3556
|
isEditingCell(rowId, columnName) {
|
|
3459
3557
|
return this.editingCell?.rowId === rowId && this.editingCell?.columnName === columnName;
|
|
3460
3558
|
}
|
|
3559
|
+
/** Compact key for the editing cell, or null when no edit is in flight.
|
|
3560
|
+
* Used by the patch path to detect when the editing position moves so it
|
|
3561
|
+
* can force the affected cells through the slow rebuild path. */
|
|
3562
|
+
getEditingCellKey() {
|
|
3563
|
+
return this.editingCell ? `${this.editingCell.rowId} ${this.editingCell.columnName}` : null;
|
|
3564
|
+
}
|
|
3461
3565
|
/**
|
|
3462
3566
|
* Serialise the current grid state. Mirrors `ui.grid.saveState.save`:
|
|
3463
3567
|
* every field is gated by an `options.save*` flag with the old grid's
|
|
@@ -3525,7 +3629,8 @@ var VanillaGridController = class {
|
|
|
3525
3629
|
if (state.collapsedGroups !== void 0) this.collapsedGroups = { ...state.collapsedGroups };
|
|
3526
3630
|
if (state.pinnedColumns !== void 0) this.pinnedColumns = { ...state.pinnedColumns };
|
|
3527
3631
|
if (state.columnOrder !== void 0) this.columnOrder = [...state.columnOrder];
|
|
3528
|
-
if (state.columnWidthOverrides !== void 0)
|
|
3632
|
+
if (state.columnWidthOverrides !== void 0)
|
|
3633
|
+
this.columnWidthOverrides = { ...state.columnWidthOverrides };
|
|
3529
3634
|
if (state.currentPage !== void 0) this.currentPage = state.currentPage;
|
|
3530
3635
|
if (state.pageSize !== void 0) this.pageSize = state.pageSize;
|
|
3531
3636
|
if (state.expandedRows !== void 0) this.expandedRows = { ...state.expandedRows };
|
|
@@ -3713,35 +3818,40 @@ var VanillaGridController = class {
|
|
|
3713
3818
|
this.hiddenRowReasons = next;
|
|
3714
3819
|
this.refresh();
|
|
3715
3820
|
}
|
|
3716
|
-
benchmark(iterations) {
|
|
3821
|
+
async benchmark(iterations) {
|
|
3717
3822
|
const now = () => typeof performance === "undefined" ? Date.now() : performance.now();
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3823
|
+
let result;
|
|
3824
|
+
if (this.benchmarkRequest) {
|
|
3825
|
+
result = await this.benchmarkRequest(iterations);
|
|
3826
|
+
} else {
|
|
3827
|
+
const loops = Math.max(1, iterations ?? this.options.benchmark?.iterations ?? 25);
|
|
3828
|
+
const started = now();
|
|
3829
|
+
let lastResult = this.pipeline;
|
|
3830
|
+
for (let index = 0; index < loops; index += 1) {
|
|
3831
|
+
lastResult = defaultGridEngine.buildPipeline({
|
|
3832
|
+
options: this.options,
|
|
3833
|
+
columns: this.visibleColumns,
|
|
3834
|
+
activeFilters: this.activeFilters,
|
|
3835
|
+
sortState: this.sortState,
|
|
3836
|
+
groupByColumns: this.groupByColumns,
|
|
3837
|
+
collapsedGroups: this.collapsedGroups,
|
|
3838
|
+
hiddenRowReasons: this.hiddenRowReasons,
|
|
3839
|
+
expandedRows: this.expandedRows,
|
|
3840
|
+
expandedTreeRows: this.expandedTreeRows,
|
|
3841
|
+
currentPage: this.currentPage,
|
|
3842
|
+
pageSize: this.pageSize,
|
|
3843
|
+
rowSize: this.getRowSize()
|
|
3844
|
+
});
|
|
3845
|
+
}
|
|
3846
|
+
const elapsedMs = now() - started;
|
|
3847
|
+
result = {
|
|
3848
|
+
iterations: loops,
|
|
3849
|
+
totalMs: elapsedMs,
|
|
3850
|
+
averageMs: elapsedMs / loops,
|
|
3851
|
+
visibleRows: lastResult.visibleRows.length,
|
|
3852
|
+
renderedItems: lastResult.displayItems.length
|
|
3853
|
+
};
|
|
3736
3854
|
}
|
|
3737
|
-
const elapsedMs = now() - started;
|
|
3738
|
-
const result = {
|
|
3739
|
-
iterations: loops,
|
|
3740
|
-
totalMs: elapsedMs,
|
|
3741
|
-
averageMs: elapsedMs / loops,
|
|
3742
|
-
visibleRows: lastResult.visibleRows.length,
|
|
3743
|
-
renderedItems: lastResult.displayItems.length
|
|
3744
|
-
};
|
|
3745
3855
|
this.gridApi.core.raise.benchmarkComplete(result);
|
|
3746
3856
|
return result;
|
|
3747
3857
|
}
|
|
@@ -3788,12 +3898,7 @@ var VanillaGridController = class {
|
|
|
3788
3898
|
if (win?.pdfMake) {
|
|
3789
3899
|
const resolved = this.resolveExporterOptions();
|
|
3790
3900
|
const pdfOpts = resolveGridExporterPdfOptions(this.options);
|
|
3791
|
-
const filename = resolveExporterFilename(
|
|
3792
|
-
pdfOpts.filename,
|
|
3793
|
-
"download.pdf",
|
|
3794
|
-
rowType,
|
|
3795
|
-
colType
|
|
3796
|
-
);
|
|
3901
|
+
const filename = resolveExporterFilename(pdfOpts.filename, "download.pdf", rowType, colType);
|
|
3797
3902
|
const pdf = win.pdfMake.createPdf(doc);
|
|
3798
3903
|
if (resolved.csvFilename || pdfOpts.filename) {
|
|
3799
3904
|
pdf.download(filename);
|
|
@@ -3806,7 +3911,12 @@ var VanillaGridController = class {
|
|
|
3806
3911
|
buildExcelSheetData(rowType = "visible", colType = "visible") {
|
|
3807
3912
|
const exporterOptions = this.resolveExporterOptions();
|
|
3808
3913
|
const columns = colType === "all" ? this.options.columnDefs : this.visibleColumns;
|
|
3809
|
-
return buildGridExcelSheetData(
|
|
3914
|
+
return buildGridExcelSheetData(
|
|
3915
|
+
columns,
|
|
3916
|
+
this.exporterRowsFor(rowType),
|
|
3917
|
+
exporterOptions,
|
|
3918
|
+
colType
|
|
3919
|
+
);
|
|
3810
3920
|
}
|
|
3811
3921
|
exportExcel(rowType = "visible", colType = "visible") {
|
|
3812
3922
|
const sheetData = this.buildExcelSheetData(rowType, colType);
|
|
@@ -3863,11 +3973,7 @@ var VanillaGridController = class {
|
|
|
3863
3973
|
return [this.labels.validateError, ...errors].join("\n");
|
|
3864
3974
|
}
|
|
3865
3975
|
async validateGetInvalidRows() {
|
|
3866
|
-
return validateAllGridRows(
|
|
3867
|
-
this.options.data,
|
|
3868
|
-
this.options.columnDefs,
|
|
3869
|
-
this.validatorRegistry
|
|
3870
|
-
);
|
|
3976
|
+
return validateAllGridRows(this.options.data, this.options.columnDefs, this.validatorRegistry);
|
|
3871
3977
|
}
|
|
3872
3978
|
/** Test hook — exposes the validator registry so consumers can inspect or
|
|
3873
3979
|
* extend it outside of the gridApi surface (e.g. from a controller-level
|
|
@@ -3903,7 +4009,9 @@ var VanillaGridController = class {
|
|
|
3903
4009
|
}
|
|
3904
4010
|
importerImportText(text, type) {
|
|
3905
4011
|
const opts = this.resolveImporterOptions();
|
|
3906
|
-
const asJson = type === "csv" ? null : parseGridImporterJson(text, {
|
|
4012
|
+
const asJson = type === "csv" ? null : parseGridImporterJson(text, {
|
|
4013
|
+
errorCallback: type === "json" ? opts.errorCallback : void 0
|
|
4014
|
+
});
|
|
3907
4015
|
if (asJson && asJson.length > 0) {
|
|
3908
4016
|
const objects2 = buildGridImporterObjectsFromJson(asJson, opts);
|
|
3909
4017
|
this.importerDispatchObjects(objects2);
|
|
@@ -3966,11 +4074,9 @@ var VanillaGridController = class {
|
|
|
3966
4074
|
/** Menu items the importer contributes. Just the single "Import"
|
|
3967
4075
|
* entry when the feature is enabled; returns an empty array otherwise. */
|
|
3968
4076
|
buildImporterMenuItems() {
|
|
3969
|
-
return buildGridImporterMenuItems(
|
|
3970
|
-
this.
|
|
3971
|
-
|
|
3972
|
-
{ importAFile: () => this.importerRequestFile() }
|
|
3973
|
-
);
|
|
4077
|
+
return buildGridImporterMenuItems(this.options, this.labels, {
|
|
4078
|
+
importAFile: () => this.importerRequestFile()
|
|
4079
|
+
});
|
|
3974
4080
|
}
|
|
3975
4081
|
/** Menu items row-edit contributes: "Save changes" + "Retry errored
|
|
3976
4082
|
* rows". Each entry is gated by both a gridOption flag and a runtime
|
|
@@ -3996,14 +4102,10 @@ var VanillaGridController = class {
|
|
|
3996
4102
|
this.rowEditSavePromiseOverrides.set(rowId, savePromise);
|
|
3997
4103
|
}
|
|
3998
4104
|
rowEditGetDirtyRows() {
|
|
3999
|
-
return this.pipeline.visibleRows.filter(
|
|
4000
|
-
(row) => this.rowEditState.dirtyRowIds.has(row.id)
|
|
4001
|
-
);
|
|
4105
|
+
return this.pipeline.visibleRows.filter((row) => this.rowEditState.dirtyRowIds.has(row.id));
|
|
4002
4106
|
}
|
|
4003
4107
|
rowEditGetErrorRows() {
|
|
4004
|
-
return this.pipeline.visibleRows.filter(
|
|
4005
|
-
(row) => this.rowEditState.errorRowIds.has(row.id)
|
|
4006
|
-
);
|
|
4108
|
+
return this.pipeline.visibleRows.filter((row) => this.rowEditState.errorRowIds.has(row.id));
|
|
4007
4109
|
}
|
|
4008
4110
|
rowEditFlushDirtyRows() {
|
|
4009
4111
|
const dirty = [...this.rowEditState.dirtyRowIds].map((id) => this.findRowById(id)).filter((row) => row !== void 0);
|
|
@@ -4089,7 +4191,7 @@ function createVanillaGridController(options) {
|
|
|
4089
4191
|
}
|
|
4090
4192
|
|
|
4091
4193
|
// scss-inline:/home/runner/work/uiGrid/uiGrid/projects/ui-grid-vanilla/src/ui-grid-shell.scss
|
|
4092
|
-
var ui_grid_shell_default = ':host{--_ui-grid-border-color: var(--ui-grid-border-color, var(--app-ui-grid-border-color, #d4d4d8));--_ui-grid-header-background: var( --ui-grid-header-background, var(--app-ui-grid-header-background, #f3f4f6) );--_ui-grid-row-odd: var(--ui-grid-row-odd, var(--app-ui-grid-row-odd, #fcfcfd));--_ui-grid-row-even: var(--ui-grid-row-even, var(--app-ui-grid-row-even, #f7f7f8));--_ui-grid-row-hover: var( --ui-grid-row-hover, var( --app-ui-grid-row-hover, color-mix(in srgb, var(--_ui-grid-accent) 4%, var(--_ui-grid-surface)) ) );--_ui-grid-row-focus-background: var( --ui-grid-row-focus-background, var( --app-ui-grid-row-focus-background, color-mix(in srgb, var(--_ui-grid-accent) 9%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-color: var(--ui-grid-cell-color, var(--app-ui-grid-cell-color, #111827));--_ui-grid-muted-color: var(--ui-grid-muted-color, var(--app-ui-grid-muted-color, #6b7280));--_ui-grid-surface: var(--ui-grid-surface, var(--app-ui-grid-surface, #ffffff));--_ui-grid-radius: var(--ui-grid-radius, var(--app-ui-grid-radius, 4px));--_ui-grid-shadow: var( --ui-grid-shadow, var(--app-ui-grid-shadow, 0 10px 24px rgba(15, 23, 42, 0.08)) );--_ui-grid-header-weight: var(--ui-grid-header-weight, var(--app-ui-grid-header-weight, 700));--_ui-grid-accent: var(--ui-grid-accent, var(--app-ui-grid-accent, #2563eb));--_ui-grid-group-background: var( --ui-grid-group-background, var(--app-ui-grid-group-background, #eceff3) );--_ui-grid-status-active-bg: var( --ui-grid-status-active-bg, var(--app-ui-grid-status-active-bg, rgba(22, 163, 74, 0.14)) );--_ui-grid-status-active-color: var( --ui-grid-status-active-color, var(--app-ui-grid-status-active-color, #166534) );--_ui-grid-status-expansion-bg: var( --ui-grid-status-expansion-bg, var(--app-ui-grid-status-expansion-bg, rgba(37, 99, 235, 0.14)) );--_ui-grid-status-expansion-color: var( --ui-grid-status-expansion-color, var(--app-ui-grid-status-expansion-color, #1d4ed8) );--_ui-grid-status-enterprise-bg: var( --ui-grid-status-enterprise-bg, var(--app-ui-grid-status-enterprise-bg, rgba(15, 118, 110, 0.14)) );--_ui-grid-status-enterprise-color: var( --ui-grid-status-enterprise-color, var(--app-ui-grid-status-enterprise-color, #115e59) );--_ui-grid-status-pilot-bg: var( --ui-grid-status-pilot-bg, var(--app-ui-grid-status-pilot-bg, rgba(234, 88, 12, 0.14)) );--_ui-grid-status-pilot-color: var( --ui-grid-status-pilot-color, var(--app-ui-grid-status-pilot-color, #c2410c) );--_ui-grid-shell-gap: var(--ui-grid-shell-gap, var(--app-ui-grid-shell-gap, 1.5rem));--_ui-grid-hero-gap: var(--ui-grid-hero-gap, var(--app-ui-grid-hero-gap, 1.5rem));--_ui-grid-hero-padding-block: var( --ui-grid-hero-padding-block, var(--app-ui-grid-hero-padding-block, 1rem) );--_ui-grid-eyebrow-margin-block-end: var( --ui-grid-eyebrow-margin-block-end, var(--app-ui-grid-eyebrow-margin-block-end, 0.5rem) );--_ui-grid-eyebrow-letter-spacing: var( --ui-grid-eyebrow-letter-spacing, var(--app-ui-grid-eyebrow-letter-spacing, 0.18em) );--_ui-grid-eyebrow-font-size: var( --ui-grid-eyebrow-font-size, var(--app-ui-grid-eyebrow-font-size, 0.72rem) );--_ui-grid-hero-title-font-size: var( --ui-grid-hero-title-font-size, var(--app-ui-grid-hero-title-font-size, clamp(1.4rem, 2vw, 2rem)) );--_ui-grid-hero-title-line-height: var( --ui-grid-hero-title-line-height, var(--app-ui-grid-hero-title-line-height, 1.1) );--_ui-grid-hero-deck-max-width: var( --ui-grid-hero-deck-max-width, var(--app-ui-grid-hero-deck-max-width, 56ch) );--_ui-grid-hero-deck-margin-block-start: var( --ui-grid-hero-deck-margin-block-start, var(--app-ui-grid-hero-deck-margin-block-start, 0.75rem) );--_ui-grid-hero-actions-gap: var( --ui-grid-hero-actions-gap, var(--app-ui-grid-hero-actions-gap, 1rem) );--_ui-grid-action-radius: var(--ui-grid-action-radius, var(--app-ui-grid-action-radius, 999px));--_ui-grid-action-padding-block: var( --ui-grid-action-padding-block, var(--app-ui-grid-action-padding-block, 0.8rem) );--_ui-grid-action-padding-inline: var( --ui-grid-action-padding-inline, var(--app-ui-grid-action-padding-inline, 1.1rem) );--_ui-grid-stats-card-min-width: var( --ui-grid-stats-card-min-width, var(--app-ui-grid-stats-card-min-width, 8rem) );--_ui-grid-stats-card-padding-block: var( --ui-grid-stats-card-padding-block, var(--app-ui-grid-stats-card-padding-block, 0.85rem) );--_ui-grid-stats-card-padding-inline: var( --ui-grid-stats-card-padding-inline, var(--app-ui-grid-stats-card-padding-inline, 1rem) );--_ui-grid-stats-card-value-font-size: var( --ui-grid-stats-card-value-font-size, var(--app-ui-grid-stats-card-value-font-size, 1.9rem) );--_ui-grid-metrics-gap: var(--ui-grid-metrics-gap, var(--app-ui-grid-metrics-gap, 1rem));--_ui-grid-metric-card-padding-block: var( --ui-grid-metric-card-padding-block, var(--app-ui-grid-metric-card-padding-block, 1rem) );--_ui-grid-metric-card-padding-inline: var( --ui-grid-metric-card-padding-inline, var(--app-ui-grid-metric-card-padding-inline, 1.1rem) );--_ui-grid-metric-value-font-size: var( --ui-grid-metric-value-font-size, var(--app-ui-grid-metric-value-font-size, 1.3rem) );--_ui-grid-toolbar-gap: var(--ui-grid-toolbar-gap, var(--app-ui-grid-toolbar-gap, 1rem));--_ui-grid-toolbar-padding-block: var( --ui-grid-toolbar-padding-block, var(--app-ui-grid-toolbar-padding-block, 1rem) );--_ui-grid-toolbar-padding-inline: var( --ui-grid-toolbar-padding-inline, var(--app-ui-grid-toolbar-padding-inline, 1.25rem) );--_ui-grid-toolbar-inline-gap: var( --ui-grid-toolbar-inline-gap, var(--app-ui-grid-toolbar-inline-gap, 0.4rem) );--_ui-grid-overflow-x: var(--ui-grid-overflow-x, var(--app-ui-grid-overflow-x, auto));--_ui-grid-overflow-y: var(--ui-grid-overflow-y, var(--app-ui-grid-overflow-y, auto));--_ui-grid-header-z-index: var(--ui-grid-header-z-index, var(--app-ui-grid-header-z-index, 3));--_ui-grid-pinned-cell-z-index: var( --ui-grid-pinned-cell-z-index, var(--app-ui-grid-pinned-cell-z-index, 2) );--_ui-grid-pin-menu-open-z-index: var( --ui-grid-pin-menu-open-z-index, var(--app-ui-grid-pin-menu-open-z-index, 8) );--_ui-grid-pin-menu-z-index: var(--ui-grid-pin-menu-z-index, var(--app-ui-grid-pin-menu-z-index, 20));--_ui-grid-header-cell-gap: var( --ui-grid-header-cell-gap, var(--app-ui-grid-header-cell-gap, 0.75rem) );--_ui-grid-header-cell-padding-block: var( --ui-grid-header-cell-padding-block, var(--app-ui-grid-header-cell-padding-block, 0.85rem) );--_ui-grid-header-cell-padding-inline: var( --ui-grid-header-cell-padding-inline, var(--app-ui-grid-header-cell-padding-inline, 1rem) );--_ui-grid-header-cell-background-active: var( --ui-grid-header-cell-background-active, var( --app-ui-grid-header-cell-background-active, color-mix(in srgb, var(--_ui-grid-accent) 8%, var(--_ui-grid-header-background)) ) );--_ui-grid-pinned-divider-shadow-left: var( --ui-grid-pinned-divider-shadow-left, var( --app-ui-grid-pinned-divider-shadow-left, 2px 0 4px rgba(0, 0, 0, 0.06) ) );--_ui-grid-pinned-divider-shadow-right: var( --ui-grid-pinned-divider-shadow-right, var( --app-ui-grid-pinned-divider-shadow-right, -2px 0 4px rgba(0, 0, 0, 0.06) ) );--_ui-grid-pinned-divider-clip-left: var( --ui-grid-pinned-divider-clip-left, var(--app-ui-grid-pinned-divider-clip-left, inset(0 -4px 0 0)) );--_ui-grid-pinned-divider-clip-right: var( --ui-grid-pinned-divider-clip-right, var(--app-ui-grid-pinned-divider-clip-right, inset(0 0 0 -4px)) );--_ui-grid-header-actions-gap: var( --ui-grid-header-actions-gap, var(--app-ui-grid-header-actions-gap, 0.4rem) );--_ui-grid-control-size: var(--ui-grid-control-size, var(--app-ui-grid-control-size, 2rem));--_ui-grid-control-radius: var( --ui-grid-control-radius, var(--app-ui-grid-control-radius, 999px) );--_ui-grid-control-icon-size: var( --ui-grid-control-icon-size, var(--app-ui-grid-control-icon-size, 1rem) );--_ui-grid-control-background: var( --ui-grid-control-background, var(--app-ui-grid-control-background, var(--_ui-grid-surface)) );--_ui-grid-control-border-color: var( --ui-grid-control-border-color, var(--app-ui-grid-control-border-color, var(--_ui-grid-border-color)) );--_ui-grid-control-color: var( --ui-grid-control-color, var(--app-ui-grid-control-color, var(--_ui-grid-muted-color)) );--_ui-grid-control-background-active: var( --ui-grid-control-background-active, var( --app-ui-grid-control-background-active, color-mix(in srgb, var(--_ui-grid-accent) 12%, var(--_ui-grid-surface)) ) );--_ui-grid-control-border-color-active: var( --ui-grid-control-border-color-active, var( --app-ui-grid-control-border-color-active, color-mix(in srgb, var(--_ui-grid-accent) 35%, var(--_ui-grid-border-color)) ) );--_ui-grid-control-color-active: var( --ui-grid-control-color-active, var(--app-ui-grid-control-color-active, var(--_ui-grid-accent)) );--_ui-grid-pin-menu-offset-block-start: var( --ui-grid-pin-menu-offset-block-start, var(--app-ui-grid-pin-menu-offset-block-start, 0.35rem) );--_ui-grid-pin-menu-gap: var(--ui-grid-pin-menu-gap, var(--app-ui-grid-pin-menu-gap, 0.25rem));--_ui-grid-pin-menu-padding: var( --ui-grid-pin-menu-padding, var(--app-ui-grid-pin-menu-padding, 0.25rem) );--_ui-grid-pin-menu-radius: var(--ui-grid-pin-menu-radius, var(--app-ui-grid-pin-menu-radius, 999px));--_ui-grid-pin-menu-shadow: var( --ui-grid-pin-menu-shadow, var( --app-ui-grid-pin-menu-shadow, 0 10px 24px color-mix(in srgb, var(--_ui-grid-cell-color) 10%, transparent) ) );--_ui-grid-pin-menu-action-size: var( --ui-grid-pin-menu-action-size, var(--app-ui-grid-pin-menu-action-size, 1.75rem) );--_ui-grid-pin-control-collapsed-size: var( --ui-grid-pin-control-collapsed-size, var(--app-ui-grid-pin-control-collapsed-size, 1px) );--_ui-grid-pin-control-transition-duration: var( --ui-grid-pin-control-transition-duration, var(--app-ui-grid-pin-control-transition-duration, 160ms) );--_ui-grid-pin-control-transition-easing: var( --ui-grid-pin-control-transition-easing, var(--app-ui-grid-pin-control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)) );--_ui-grid-pin-menu-scale-closed: var( --ui-grid-pin-menu-scale-closed, var(--app-ui-grid-pin-menu-scale-closed, 0.72) );--_ui-grid-filter-cell-padding-block-start: var( --ui-grid-filter-cell-padding-block-start, var(--app-ui-grid-filter-cell-padding-block-start, 0.75rem) );--_ui-grid-filter-cell-padding-block-end: var( --ui-grid-filter-cell-padding-block-end, var(--app-ui-grid-filter-cell-padding-block-end, 1rem) );--_ui-grid-filter-cell-padding-inline: var( --ui-grid-filter-cell-padding-inline, var(--app-ui-grid-filter-cell-padding-inline, 1rem) );--_ui-grid-filter-input-padding-block: var( --ui-grid-filter-input-padding-block, var(--app-ui-grid-filter-input-padding-block, 0.55rem) );--_ui-grid-filter-input-padding-inline: var( --ui-grid-filter-input-padding-inline, var(--app-ui-grid-filter-input-padding-inline, 0.7rem) );--_ui-grid-filter-input-focus-outline: var( --ui-grid-filter-input-focus-outline, var( --app-ui-grid-filter-input-focus-outline, 2px solid color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-body-cell-padding-block: var( --ui-grid-body-cell-padding-block, var(--app-ui-grid-body-cell-padding-block, 0.95rem) );--_ui-grid-body-cell-padding-inline: var( --ui-grid-body-cell-padding-inline, var(--app-ui-grid-body-cell-padding-inline, 1rem) );--_ui-grid-cell-shell-gap: var(--ui-grid-cell-shell-gap, var(--app-ui-grid-cell-shell-gap, 0.55rem));--_ui-grid-row-toggle-size: var(--ui-grid-row-toggle-size, var(--app-ui-grid-row-toggle-size, 1.55rem));--_ui-grid-row-toggle-radius: var( --ui-grid-row-toggle-radius, var(--app-ui-grid-row-toggle-radius, 999px) );--_ui-grid-toggle-icon-size: var( --ui-grid-toggle-icon-size, var(--app-ui-grid-toggle-icon-size, 1.1rem) );--_ui-grid-group-disclosure-icon-size: var( --ui-grid-group-disclosure-icon-size, var(--app-ui-grid-group-disclosure-icon-size, 0.9rem) );--_ui-grid-pagination-icon-size: var( --ui-grid-pagination-icon-size, var(--app-ui-grid-pagination-icon-size, 1.2rem) );--_ui-grid-expandable-row-padding-block: var( --ui-grid-expandable-row-padding-block, var(--app-ui-grid-expandable-row-padding-block, 1rem) );--_ui-grid-expandable-row-padding-inline: var( --ui-grid-expandable-row-padding-inline, var(--app-ui-grid-expandable-row-padding-inline, 1.25rem) );--_ui-grid-expandable-row-background: var( --ui-grid-expandable-row-background, var( --app-ui-grid-expandable-row-background, color-mix(in srgb, var(--_ui-grid-accent) 4%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-focus-background: var( --ui-grid-cell-focus-background, var( --app-ui-grid-cell-focus-background, color-mix(in srgb, var(--_ui-grid-accent) 14%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-focus-ring: var( --ui-grid-cell-focus-ring, var( --app-ui-grid-cell-focus-ring, inset 0 0 0 1px color-mix(in srgb, var(--_ui-grid-accent) 28%, transparent) ) );--_ui-grid-cell-editing-background: var( --ui-grid-cell-editing-background, var( --app-ui-grid-cell-editing-background, color-mix(in srgb, var(--_ui-grid-accent) 7%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-editor-border-color: var( --ui-grid-cell-editor-border-color, var( --app-ui-grid-cell-editor-border-color, color-mix(in srgb, var(--_ui-grid-accent) 45%, var(--_ui-grid-border-color)) ) );--_ui-grid-cell-editor-radius: var( --ui-grid-cell-editor-radius, var(--app-ui-grid-cell-editor-radius, calc(var(--_ui-grid-radius) - 1px)) );--_ui-grid-cell-editor-padding-block: var( --ui-grid-cell-editor-padding-block, var(--app-ui-grid-cell-editor-padding-block, 0.45rem) );--_ui-grid-cell-editor-padding-inline: var( --ui-grid-cell-editor-padding-inline, var(--app-ui-grid-cell-editor-padding-inline, 0.55rem) );--_ui-grid-cell-editor-focus-outline: var( --ui-grid-cell-editor-focus-outline, var( --app-ui-grid-cell-editor-focus-outline, 2px solid color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-group-row-gap: var(--ui-grid-group-row-gap, var(--app-ui-grid-group-row-gap, 0.9rem));--_ui-grid-group-row-padding-block: var( --ui-grid-group-row-padding-block, var(--app-ui-grid-group-row-padding-block, 0.9rem) );--_ui-grid-group-row-padding-inline: var( --ui-grid-group-row-padding-inline, var(--app-ui-grid-group-row-padding-inline, 1rem) );--_ui-grid-drag-preview-shadow: var( --ui-grid-drag-preview-shadow, var(--app-ui-grid-drag-preview-shadow, 0 12px 30px rgba(15, 23, 42, 0.16)) );--_ui-grid-drag-preview-radius: var( --ui-grid-drag-preview-radius, var(--app-ui-grid-drag-preview-radius, 0.9rem) );--_ui-grid-drag-placeholder-opacity: var( --ui-grid-drag-placeholder-opacity, var(--app-ui-grid-drag-placeholder-opacity, 0.3) );--_ui-grid-drag-placeholder-background: var( --ui-grid-drag-placeholder-background, var( --app-ui-grid-drag-placeholder-background, color-mix(in srgb, var(--_ui-grid-accent) 9%, var(--_ui-grid-header-background)) ) );--_ui-grid-drag-placeholder-border: var( --ui-grid-drag-placeholder-border, var( --app-ui-grid-drag-placeholder-border, 1px dashed color-mix(in srgb, var(--_ui-grid-accent) 45%, var(--_ui-grid-border-color)) ) );--_ui-grid-drag-placeholder-shadow: var( --ui-grid-drag-placeholder-shadow, var( --app-ui-grid-drag-placeholder-shadow, inset 0 0 0 1px color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-empty-state-gap: var( --ui-grid-empty-state-gap, var(--app-ui-grid-empty-state-gap, 0.35rem) );--_ui-grid-empty-state-min-height: var( --ui-grid-empty-state-min-height, var(--app-ui-grid-empty-state-min-height, 16rem) );--_ui-grid-empty-state-padding: var( --ui-grid-empty-state-padding, var(--app-ui-grid-empty-state-padding, 2rem) );--_ui-grid-pagination-gap: var(--ui-grid-pagination-gap, var(--app-ui-grid-pagination-gap, 1rem));--_ui-grid-pagination-padding-block: var( --ui-grid-pagination-padding-block, var(--app-ui-grid-pagination-padding-block, 0.85rem) );--_ui-grid-pagination-padding-inline: var( --ui-grid-pagination-padding-inline, var(--app-ui-grid-pagination-padding-inline, 1.25rem) );--_ui-grid-pagination-controls-gap: var( --ui-grid-pagination-controls-gap, var(--app-ui-grid-pagination-controls-gap, 0.75rem) );--_ui-grid-pagination-size-gap: var( --ui-grid-pagination-size-gap, var(--app-ui-grid-pagination-size-gap, 0.4rem) );--_ui-grid-pagination-button-padding-block: var( --ui-grid-pagination-button-padding-block, var(--app-ui-grid-pagination-button-padding-block, 0.45rem) );--_ui-grid-pagination-button-padding-inline: var( --ui-grid-pagination-button-padding-inline, var(--app-ui-grid-pagination-button-padding-inline, 0.8rem) );--_ui-grid-pagination-select-padding-block: var( --ui-grid-pagination-select-padding-block, var(--app-ui-grid-pagination-select-padding-block, 0.35rem) );--_ui-grid-pagination-select-padding-inline: var( --ui-grid-pagination-select-padding-inline, var(--app-ui-grid-pagination-select-padding-inline, 0.55rem) );--_ui-grid-status-pill-padding-block: var( --ui-grid-status-pill-padding-block, var(--app-ui-grid-status-pill-padding-block, 0.2rem) );--_ui-grid-status-pill-padding-inline: var( --ui-grid-status-pill-padding-inline, var(--app-ui-grid-status-pill-padding-inline, 0.55rem) );--_ui-grid-status-pill-radius: var( --ui-grid-status-pill-radius, var(--app-ui-grid-status-pill-radius, 999px) );--_ui-grid-status-pill-font-size: var( --ui-grid-status-pill-font-size, var(--app-ui-grid-status-pill-font-size, 0.85rem) );--_ui-grid-status-pill-default-bg: var( --ui-grid-status-pill-default-bg, var(--app-ui-grid-status-pill-default-bg, rgba(15, 23, 42, 0.07)) );display:block;color:var(--_ui-grid-cell-color)}:host *,:host *::before,:host *::after{--ui-grid-border-color: var(--_ui-grid-border-color);--ui-grid-header-background: var(--_ui-grid-header-background);--ui-grid-row-odd: var(--_ui-grid-row-odd);--ui-grid-row-even: var(--_ui-grid-row-even);--ui-grid-row-hover: var(--_ui-grid-row-hover);--ui-grid-row-focus-background: var(--_ui-grid-row-focus-background);--ui-grid-cell-color: var(--_ui-grid-cell-color);--ui-grid-muted-color: var(--_ui-grid-muted-color);--ui-grid-surface: var(--_ui-grid-surface);--ui-grid-radius: var(--_ui-grid-radius);--ui-grid-shadow: var(--_ui-grid-shadow);--ui-grid-header-weight: var(--_ui-grid-header-weight);--ui-grid-accent: var(--_ui-grid-accent);--ui-grid-group-background: var(--_ui-grid-group-background);--ui-grid-status-active-bg: var(--_ui-grid-status-active-bg);--ui-grid-status-active-color: var(--_ui-grid-status-active-color);--ui-grid-status-expansion-bg: var(--_ui-grid-status-expansion-bg);--ui-grid-status-expansion-color: var(--_ui-grid-status-expansion-color);--ui-grid-status-enterprise-bg: var(--_ui-grid-status-enterprise-bg);--ui-grid-status-enterprise-color: var(--_ui-grid-status-enterprise-color);--ui-grid-status-pilot-bg: var(--_ui-grid-status-pilot-bg);--ui-grid-status-pilot-color: var(--_ui-grid-status-pilot-color);--ui-grid-shell-gap: var(--_ui-grid-shell-gap);--ui-grid-hero-gap: var(--_ui-grid-hero-gap);--ui-grid-hero-padding-block: var(--_ui-grid-hero-padding-block);--ui-grid-eyebrow-margin-block-end: var(--_ui-grid-eyebrow-margin-block-end);--ui-grid-eyebrow-letter-spacing: var(--_ui-grid-eyebrow-letter-spacing);--ui-grid-eyebrow-font-size: var(--_ui-grid-eyebrow-font-size);--ui-grid-hero-title-font-size: var(--_ui-grid-hero-title-font-size);--ui-grid-hero-title-line-height: var(--_ui-grid-hero-title-line-height);--ui-grid-hero-deck-max-width: var(--_ui-grid-hero-deck-max-width);--ui-grid-hero-deck-margin-block-start: var(--_ui-grid-hero-deck-margin-block-start);--ui-grid-hero-actions-gap: var(--_ui-grid-hero-actions-gap);--ui-grid-action-radius: var(--_ui-grid-action-radius);--ui-grid-action-padding-block: var(--_ui-grid-action-padding-block);--ui-grid-action-padding-inline: var(--_ui-grid-action-padding-inline);--ui-grid-stats-card-min-width: var(--_ui-grid-stats-card-min-width);--ui-grid-stats-card-padding-block: var(--_ui-grid-stats-card-padding-block);--ui-grid-stats-card-padding-inline: var(--_ui-grid-stats-card-padding-inline);--ui-grid-stats-card-value-font-size: var(--_ui-grid-stats-card-value-font-size);--ui-grid-metrics-gap: var(--_ui-grid-metrics-gap);--ui-grid-metric-card-padding-block: var(--_ui-grid-metric-card-padding-block);--ui-grid-metric-card-padding-inline: var(--_ui-grid-metric-card-padding-inline);--ui-grid-metric-value-font-size: var(--_ui-grid-metric-value-font-size);--ui-grid-toolbar-gap: var(--_ui-grid-toolbar-gap);--ui-grid-toolbar-padding-block: var(--_ui-grid-toolbar-padding-block);--ui-grid-toolbar-padding-inline: var(--_ui-grid-toolbar-padding-inline);--ui-grid-toolbar-inline-gap: var(--_ui-grid-toolbar-inline-gap);--ui-grid-overflow-x: var(--_ui-grid-overflow-x);--ui-grid-overflow-y: var(--_ui-grid-overflow-y);--ui-grid-header-z-index: var(--_ui-grid-header-z-index);--ui-grid-pinned-cell-z-index: var(--_ui-grid-pinned-cell-z-index);--ui-grid-pin-menu-open-z-index: var(--_ui-grid-pin-menu-open-z-index);--ui-grid-pin-menu-z-index: var(--_ui-grid-pin-menu-z-index);--ui-grid-header-cell-gap: var(--_ui-grid-header-cell-gap);--ui-grid-header-cell-padding-block: var(--_ui-grid-header-cell-padding-block);--ui-grid-header-cell-padding-inline: var(--_ui-grid-header-cell-padding-inline);--ui-grid-header-cell-background-active: var(--_ui-grid-header-cell-background-active);--ui-grid-pinned-divider-shadow-left: var(--_ui-grid-pinned-divider-shadow-left);--ui-grid-pinned-divider-shadow-right: var(--_ui-grid-pinned-divider-shadow-right);--ui-grid-pinned-divider-clip-left: var(--_ui-grid-pinned-divider-clip-left);--ui-grid-pinned-divider-clip-right: var(--_ui-grid-pinned-divider-clip-right);--ui-grid-header-actions-gap: var(--_ui-grid-header-actions-gap);--ui-grid-control-size: var(--_ui-grid-control-size);--ui-grid-control-radius: var(--_ui-grid-control-radius);--ui-grid-control-icon-size: var(--_ui-grid-control-icon-size);--ui-grid-control-background: var(--_ui-grid-control-background);--ui-grid-control-border-color: var(--_ui-grid-control-border-color);--ui-grid-control-color: var(--_ui-grid-control-color);--ui-grid-control-background-active: var(--_ui-grid-control-background-active);--ui-grid-control-border-color-active: var(--_ui-grid-control-border-color-active);--ui-grid-control-color-active: var(--_ui-grid-control-color-active);--ui-grid-pin-menu-offset-block-start: var(--_ui-grid-pin-menu-offset-block-start);--ui-grid-pin-menu-gap: var(--_ui-grid-pin-menu-gap);--ui-grid-pin-menu-padding: var(--_ui-grid-pin-menu-padding);--ui-grid-pin-menu-radius: var(--_ui-grid-pin-menu-radius);--ui-grid-pin-menu-shadow: var(--_ui-grid-pin-menu-shadow);--ui-grid-pin-menu-action-size: var(--_ui-grid-pin-menu-action-size);--ui-grid-pin-control-collapsed-size: var(--_ui-grid-pin-control-collapsed-size);--ui-grid-pin-control-transition-duration: var(--_ui-grid-pin-control-transition-duration);--ui-grid-pin-control-transition-easing: var(--_ui-grid-pin-control-transition-easing);--ui-grid-pin-menu-scale-closed: var(--_ui-grid-pin-menu-scale-closed);--ui-grid-filter-cell-padding-block-start: var(--_ui-grid-filter-cell-padding-block-start);--ui-grid-filter-cell-padding-block-end: var(--_ui-grid-filter-cell-padding-block-end);--ui-grid-filter-cell-padding-inline: var(--_ui-grid-filter-cell-padding-inline);--ui-grid-filter-input-padding-block: var(--_ui-grid-filter-input-padding-block);--ui-grid-filter-input-padding-inline: var(--_ui-grid-filter-input-padding-inline);--ui-grid-filter-input-focus-outline: var(--_ui-grid-filter-input-focus-outline);--ui-grid-body-cell-padding-block: var(--_ui-grid-body-cell-padding-block);--ui-grid-body-cell-padding-inline: var(--_ui-grid-body-cell-padding-inline);--ui-grid-cell-shell-gap: var(--_ui-grid-cell-shell-gap);--ui-grid-row-toggle-size: var(--_ui-grid-row-toggle-size);--ui-grid-row-toggle-radius: var(--_ui-grid-row-toggle-radius);--ui-grid-toggle-icon-size: var(--_ui-grid-toggle-icon-size);--ui-grid-group-disclosure-icon-size: var(--_ui-grid-group-disclosure-icon-size);--ui-grid-pagination-icon-size: var(--_ui-grid-pagination-icon-size);--ui-grid-expandable-row-padding-block: var(--_ui-grid-expandable-row-padding-block);--ui-grid-expandable-row-padding-inline: var(--_ui-grid-expandable-row-padding-inline);--ui-grid-expandable-row-background: var(--_ui-grid-expandable-row-background);--ui-grid-cell-focus-background: var(--_ui-grid-cell-focus-background);--ui-grid-cell-focus-ring: var(--_ui-grid-cell-focus-ring);--ui-grid-cell-editing-background: var(--_ui-grid-cell-editing-background);--ui-grid-cell-editor-border-color: var(--_ui-grid-cell-editor-border-color);--ui-grid-cell-editor-radius: var(--_ui-grid-cell-editor-radius);--ui-grid-cell-editor-padding-block: var(--_ui-grid-cell-editor-padding-block);--ui-grid-cell-editor-padding-inline: var(--_ui-grid-cell-editor-padding-inline);--ui-grid-cell-editor-focus-outline: var(--_ui-grid-cell-editor-focus-outline);--ui-grid-group-row-gap: var(--_ui-grid-group-row-gap);--ui-grid-group-row-padding-block: var(--_ui-grid-group-row-padding-block);--ui-grid-group-row-padding-inline: var(--_ui-grid-group-row-padding-inline);--ui-grid-drag-preview-shadow: var(--_ui-grid-drag-preview-shadow);--ui-grid-drag-preview-radius: var(--_ui-grid-drag-preview-radius);--ui-grid-drag-placeholder-opacity: var(--_ui-grid-drag-placeholder-opacity);--ui-grid-drag-placeholder-background: var(--_ui-grid-drag-placeholder-background);--ui-grid-drag-placeholder-border: var(--_ui-grid-drag-placeholder-border);--ui-grid-drag-placeholder-shadow: var(--_ui-grid-drag-placeholder-shadow);--ui-grid-empty-state-gap: var(--_ui-grid-empty-state-gap);--ui-grid-empty-state-min-height: var(--_ui-grid-empty-state-min-height);--ui-grid-empty-state-padding: var(--_ui-grid-empty-state-padding);--ui-grid-pagination-gap: var(--_ui-grid-pagination-gap);--ui-grid-pagination-padding-block: var(--_ui-grid-pagination-padding-block);--ui-grid-pagination-padding-inline: var(--_ui-grid-pagination-padding-inline);--ui-grid-pagination-controls-gap: var(--_ui-grid-pagination-controls-gap);--ui-grid-pagination-size-gap: var(--_ui-grid-pagination-size-gap);--ui-grid-pagination-button-padding-block: var(--_ui-grid-pagination-button-padding-block);--ui-grid-pagination-button-padding-inline: var(--_ui-grid-pagination-button-padding-inline);--ui-grid-pagination-select-padding-block: var(--_ui-grid-pagination-select-padding-block);--ui-grid-pagination-select-padding-inline: var(--_ui-grid-pagination-select-padding-inline);--ui-grid-status-pill-padding-block: var(--_ui-grid-status-pill-padding-block);--ui-grid-status-pill-padding-inline: var(--_ui-grid-status-pill-padding-inline);--ui-grid-status-pill-radius: var(--_ui-grid-status-pill-radius);--ui-grid-status-pill-font-size: var(--_ui-grid-status-pill-font-size);--ui-grid-status-pill-default-bg: var(--_ui-grid-status-pill-default-bg);box-sizing:border-box}.grid-shell{display:grid;gap:var(--ui-grid-shell-gap)}.grid-hero{display:flex;justify-content:space-between;gap:var(--ui-grid-hero-gap);align-items:end;padding:var(--ui-grid-hero-padding-block) 0;color:var(--ui-grid-cell-color)}.eyebrow{margin:0 0 var(--ui-grid-eyebrow-margin-block-end);text-transform:uppercase;letter-spacing:var(--ui-grid-eyebrow-letter-spacing);font-size:var(--ui-grid-eyebrow-font-size);color:var(--ui-grid-muted-color)}h1{margin:0;font-size:var(--ui-grid-hero-title-font-size);line-height:var(--ui-grid-hero-title-line-height)}.deck{max-width:var(--ui-grid-hero-deck-max-width);margin:var(--ui-grid-hero-deck-margin-block-start) 0 0;color:var(--ui-grid-muted-color)}.hero-actions{display:flex;gap:var(--ui-grid-hero-actions-gap);align-items:center;flex-wrap:wrap}.action{border:0;border-radius:var(--ui-grid-action-radius);padding:var(--ui-grid-action-padding-block) var(--ui-grid-action-padding-inline);font:inherit;cursor:pointer}.action-secondary{background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);border:1px solid var(--ui-grid-border-color)}.stats-card{min-width:var(--ui-grid-stats-card-min-width);padding:var(--ui-grid-stats-card-padding-block) var(--ui-grid-stats-card-padding-inline);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);display:grid}.stats-card span{font-size:var(--ui-grid-stats-card-value-font-size);font-weight:700}.stats-card small{color:var(--ui-grid-muted-color)}.grid-frame{display:grid;grid-template-rows:auto minmax(0, 1fr) auto;height:100%;min-height:0;border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);box-shadow:var(--ui-grid-shadow);overflow:hidden}.metrics-strip{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--ui-grid-metrics-gap)}.metrics-strip article{padding:var(--ui-grid-metric-card-padding-block) var(--ui-grid-metric-card-padding-inline);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);display:grid}.metrics-strip strong{font-size:var(--ui-grid-metric-value-font-size)}.metrics-strip span{color:var(--ui-grid-muted-color)}.grid-toolbar{display:flex;justify-content:space-between;gap:var(--ui-grid-toolbar-gap);padding:var(--ui-grid-toolbar-padding-block) var(--ui-grid-toolbar-padding-inline);align-items:center;background:var(--ui-grid-header-background);border-bottom:1px solid var(--ui-grid-border-color)}.grid-toolbar div{display:flex;gap:var(--ui-grid-toolbar-inline-gap);align-items:baseline}.grid-toolbar p{margin:0;color:var(--ui-grid-muted-color)}.grid-table{position:relative;height:100%;min-height:0;width:100%;min-width:0;display:flex;flex-direction:column;background:var(--ui-grid-surface);overflow-anchor:none}.grid-header-strip,.grid-filter-strip{flex:0 0 auto;position:sticky;z-index:var(--ui-grid-header-z-index);background:var(--ui-grid-surface);overflow:hidden}.grid-header-strip{top:0}.grid-filter-strip{top:var(--ui-grid-header-sticky-top, 0px)}.grid-body-viewport{flex:1 1 auto;min-height:0;overflow-x:auto;overflow-anchor:none;overscroll-behavior-x:none}.header-grid,.filter-grid,.body-grid{display:grid;width:100%;min-width:max-content}.header-cell,.filter-cell,.body-cell,.group-row{min-width:0}.header-cell{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:var(--ui-grid-header-cell-gap);padding:var(--ui-grid-header-cell-padding-block) var(--ui-grid-header-cell-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background);font-weight:var(--ui-grid-header-weight);align-items:center;position:relative}.header-cell.is-active{background:var(--ui-grid-header-cell-background-active)}.header-cell[draggable=true]{cursor:grab}.header-cell.is-dragging{opacity:.6}.header-cell.is-drag-target{background:color-mix(in srgb, var(--ui-grid-accent) 9%, var(--ui-grid-header-background));border:1px dashed color-mix(in srgb, var(--ui-grid-accent) 45%, var(--ui-grid-border-color));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-grid-accent) 18%, transparent)}.header-cell.is-pin-menu-open{z-index:var(--ui-grid-pin-menu-open-z-index)}.header-cell.is-pinned,.filter-cell.is-pinned,.body-cell.is-pinned{position:sticky;z-index:var(--ui-grid-pinned-cell-z-index);background:var(--ui-grid-surface)}.header-cell.is-pinned{background:var(--ui-grid-header-background)}.body-cell.is-pinned.body-cell-odd{background:var(--ui-grid-row-odd)}.body-cell.is-pinned:not(.body-cell-odd){background:var(--ui-grid-row-even)}.header-cell.is-pinned-left-last,.filter-cell.is-pinned-left-last,.body-cell.is-pinned-left-last{box-shadow:var(--ui-grid-pinned-divider-shadow-left);clip-path:var(--ui-grid-pinned-divider-clip-left)}.header-cell.is-pinned-right-first,.filter-cell.is-pinned-right-first,.body-cell.is-pinned-right-first{box-shadow:var(--ui-grid-pinned-divider-shadow-right);clip-path:var(--ui-grid-pinned-divider-clip-right)}.header-label{min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;hyphens:none}.header-actions{display:inline-flex;align-items:center;gap:var(--ui-grid-header-actions-gap);justify-self:end}.column-resizer{position:absolute;top:0;right:-4px;width:8px;height:100%;padding:0;border:0;background:rgba(0,0,0,0);cursor:col-resize;z-index:5}.column-resizer::after{content:"";position:absolute;top:20%;bottom:20%;left:50%;width:2px;transform:translateX(-50%);border-radius:999px;background:color-mix(in srgb, var(--_ui-grid-border-color) 80%, transparent);opacity:0;transition:opacity 120ms ease}.header-cell:hover .column-resizer::after,.column-resizer:focus-visible::after{opacity:1}.pin-control{position:relative;display:inline-grid;place-items:center;justify-items:center;min-width:var(--ui-grid-control-size);overflow:hidden}.header-action,.chip-action{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-grid-control-size);height:var(--ui-grid-control-size);display:flex;border:0;background:var(--ui-grid-control-background);padding:0;font:inherit;border-radius:var(--ui-grid-control-radius);cursor:pointer}.header-action-disabled{cursor:default}.header-action svg,.chip-action svg{width:var(--ui-grid-control-icon-size);height:var(--ui-grid-control-icon-size);fill:currentColor}.header-action{color:var(--ui-grid-control-color);border:1px solid var(--ui-grid-control-border-color)}.header-cell.is-active .header-action{color:var(--ui-grid-control-color-active);border-color:var(--ui-grid-control-border-color-active)}.chip-action{border:1px solid var(--ui-grid-control-border-color);color:var(--ui-grid-control-color)}.chip-action-active{background:var(--ui-grid-control-background-active);border-color:var(--ui-grid-control-border-color-active);color:var(--ui-grid-control-color-active)}.pin-trigger{grid-area:1/1;transform-origin:center;transition:width var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),background-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing)}.pin-menu{grid-area:1/1;z-index:var(--ui-grid-pin-menu-z-index);display:grid;grid-auto-rows:var(--ui-grid-pin-menu-action-size);gap:var(--ui-grid-pin-menu-gap);padding:var(--ui-grid-pin-menu-padding);border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-pin-menu-radius);background:var(--ui-grid-surface);box-shadow:var(--ui-grid-pin-menu-shadow);justify-items:center;align-items:center;width:var(--ui-grid-control-size);max-height:var(--ui-grid-pin-control-collapsed-size);opacity:0;pointer-events:none;transform:scale(var(--ui-grid-pin-menu-scale-closed));transform-origin:center;transition:max-height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),padding var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),box-shadow var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing)}.pin-control-open{align-items:start}.pin-control-open .pin-trigger{width:var(--ui-grid-pin-control-collapsed-size);height:var(--ui-grid-pin-control-collapsed-size);opacity:0;transform:scale(0.72);pointer-events:none}.pin-control-open .pin-menu{max-height:calc(var(--ui-grid-pin-menu-action-size)*2 + var(--ui-grid-pin-menu-gap) + var(--ui-grid-pin-menu-padding)*2);opacity:1;pointer-events:auto;transform:scale(1)}.pin-menu-action{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-grid-pin-menu-action-size);height:var(--ui-grid-pin-menu-action-size);border:0;border-radius:var(--ui-grid-control-radius);background:rgba(0,0,0,0);color:var(--ui-grid-control-color);cursor:pointer}.pin-menu-action:hover,.pin-menu-action:focus-visible{outline:0;background:var(--ui-grid-control-background-active);color:var(--ui-grid-control-color-active)}.pin-menu-action svg{width:var(--ui-grid-control-icon-size);height:var(--ui-grid-control-icon-size);fill:currentColor}.header-cell.cdk-drag-placeholder{background:var(--ui-grid-drag-placeholder-background);border:var(--ui-grid-drag-placeholder-border);box-shadow:var(--ui-grid-drag-placeholder-shadow);opacity:.9}.header-grid.cdk-drop-list-dragging .header-cell:not(.cdk-drag-placeholder){transition:transform 120ms ease,background-color 120ms ease}.body-cell{padding:var(--ui-grid-body-cell-padding-block) var(--ui-grid-body-cell-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);color:var(--ui-grid-cell-color);background:var(--ui-grid-row-even);outline:0}.body-cell.body-cell-odd{background:var(--ui-grid-row-odd)}.cell-shell{display:flex;align-items:center;gap:var(--ui-grid-cell-shell-gap);min-width:0}.cell-value{min-width:0;flex:1 1 auto}.row-toggle{border:1px solid var(--ui-grid-border-color);background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);width:var(--ui-grid-row-toggle-size);height:var(--ui-grid-row-toggle-size);border-radius:var(--ui-grid-row-toggle-radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0;font:inherit}.toggle-icon{width:var(--ui-grid-toggle-icon-size);height:var(--ui-grid-toggle-icon-size);fill:currentColor;pointer-events:none}.group-disclosure-icon{width:var(--ui-grid-group-disclosure-icon-size);height:var(--ui-grid-group-disclosure-icon-size)}.pagination-icon{width:var(--ui-grid-pagination-icon-size);height:var(--ui-grid-pagination-icon-size);fill:currentColor}.expandable-row{padding:var(--ui-grid-expandable-row-padding-block) var(--ui-grid-expandable-row-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-expandable-row-background)}.body-grid>.body-cell:hover:not(.row-focused):not(.cell-focused):not(.cell-editing){background:var(--ui-grid-row-hover);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-grid-accent) 10%, transparent)}.body-cell.row-focused,.body-grid>.body-cell.row-focused{background:var(--ui-grid-row-focus-background)}.body-cell.cell-focused,.body-grid>.body-cell.cell-focused{background:var(--ui-grid-cell-focus-background);box-shadow:var(--ui-grid-cell-focus-ring)}.body-cell.cell-editing,.body-grid>.body-cell.cell-editing{background:var(--ui-grid-cell-editing-background)}.cell-editor{display:block;width:100%;min-width:0;max-width:100%;border:1px solid var(--ui-grid-cell-editor-border-color);border-radius:var(--ui-grid-cell-editor-radius);background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);padding:var(--ui-grid-cell-editor-padding-block) var(--ui-grid-cell-editor-padding-inline);font:inherit}.cell-editor:focus{outline:var(--ui-grid-cell-editor-focus-outline)}.grid-viewport{width:100%}.grid-virtual-spacer{position:relative;width:max-content;min-width:100%}.grid-virtual-body{position:absolute;left:0}.cdk-drag-preview{box-shadow:var(--ui-grid-drag-preview-shadow);border-radius:var(--ui-grid-drag-preview-radius)}.cdk-drag-placeholder{opacity:var(--ui-grid-drag-placeholder-opacity)}.body-cell.align-center{text-align:center}.body-cell.align-end{text-align:right}.empty-state{display:grid;place-items:center;gap:var(--ui-grid-empty-state-gap);min-height:var(--ui-grid-empty-state-min-height);text-align:center;padding:var(--ui-grid-empty-state-padding);color:var(--ui-grid-muted-color);background:var(--ui-grid-surface)}.empty-state p,.empty-state strong{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--ui-grid-status-pill-padding-block) var(--ui-grid-status-pill-padding-inline);border-radius:var(--ui-grid-status-pill-radius);background:var(--ui-grid-status-pill-default-bg);color:var(--ui-grid-cell-color);font-size:var(--ui-grid-status-pill-font-size);font-weight:700}.status-pill-enterprise{background:var(--ui-grid-status-enterprise-bg);color:var(--ui-grid-status-enterprise-color)}.status-pill-active{background:var(--ui-grid-status-active-bg);color:var(--ui-grid-status-active-color)}.status-pill-expansion{background:var(--ui-grid-status-expansion-bg);color:var(--ui-grid-status-expansion-color)}.status-pill-pilot{background:var(--ui-grid-status-pilot-bg);color:var(--ui-grid-status-pilot-color)}@media(max-width: 900px){.metrics-strip{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-hero,.grid-toolbar{grid-template-columns:1fr;display:grid}.hero-actions{justify-content:space-between}}@media(max-width: 640px){.metrics-strip{grid-template-columns:1fr}}.ui-grid-row-selected,.body-cell.ui-grid-row-selected{background:var(--ui-grid-row-selected-bg, var(--app-ui-grid-row-selected-bg, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 22%, var(--ui-grid-surface, #ffffff))));color:var(--ui-grid-row-selected-color, var(--app-ui-grid-row-selected-color, var(--ui-grid-cell-color)))}.body-cell.ui-grid-row-selected.body-cell-odd{background:var(--ui-grid-row-selected-bg-odd, var(--app-ui-grid-row-selected-bg-odd, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 26%, var(--ui-grid-surface, #ffffff))))}.ui-grid-row-focused,.body-cell.ui-grid-row-focused{outline:1px dashed var(--ui-grid-accent, #2563eb);outline-offset:-1px}.body-cell[data-column=selectionRowHeaderCol],.header-cell[data-column=selectionRowHeaderCol],.filter-cell[data-column=selectionRowHeaderCol]{padding:0 !important;cursor:pointer;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center}.body-cell[data-column=selectionRowHeaderCol]>.cell-shell,.body-cell[data-column=selectionRowHeaderCol]>.cell-shell>.cell-content{padding:0 !important;padding-inline-start:0 !important;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.filter-cell[data-column=selectionRowHeaderCol]{padding:0;background:var(--_ui-grid-header-background, var(--ui-grid-header-background, transparent));border-bottom:1px solid var(--_ui-grid-border-color, var(--ui-grid-border-color, transparent))}.ui-grid-selection-row-header-buttons{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer}.ui-grid-selection-checkbox{display:inline-block;width:16px;height:16px;box-sizing:border-box;border:2px solid currentColor;border-radius:3px;background:rgba(0,0,0,0);color:var(--ui-grid-cell-color, currentColor);position:relative;transition:background 120ms ease,border-color 120ms ease,color 120ms ease;opacity:.7}.ui-grid-selection-row-header-buttons:hover .ui-grid-selection-checkbox{opacity:1;color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb))}.ui-grid-selection-checkbox-checked{background:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));border-color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));opacity:1}.ui-grid-selection-checkbox-checked::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border:2px solid var(--ui-grid-surface, var(--_ui-grid-surface, #ffffff));border-top:0;border-left:0;transform:rotate(45deg)}.ui-grid-selection-checkbox-disabled{opacity:.3;cursor:not-allowed}.ui-grid-selection-select-all{display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);border:0;padding:0;margin:0;cursor:pointer;width:100%;height:100%}.ui-grid-selection-select-all:focus-visible{outline:2px solid var(--_ui-grid-accent, var(--ui-grid-accent, #2563eb));outline-offset:-2px}.grid-body-viewport:has([data-column=selectionRowHeaderCol]){user-select:none;-webkit-user-select:none}.body-cell.ui-grid-row-dirty{color:var(--ui-grid-row-dirty-color, var(--app-ui-grid-row-dirty-color, #610B38));background:var(--ui-grid-row-dirty-bg, var(--app-ui-grid-row-dirty-bg, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 8%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-row-saving{color:var(--ui-grid-row-saving-color, var(--app-ui-grid-row-saving-color, #848484)) !important;opacity:var(--ui-grid-row-saving-opacity, 0.75);cursor:progress}.body-cell.ui-grid-row-error{color:var(--ui-grid-row-error-color, var(--app-ui-grid-row-error-color, #FF0000)) !important;background:var(--ui-grid-row-error-bg, var(--app-ui-grid-row-error-bg, color-mix(in srgb, #ff0000 14%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-cell-invalid{position:relative;background:var(--ui-grid-cell-invalid-bg, var(--app-ui-grid-cell-invalid-bg, color-mix(in srgb, #ff0000 10%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-cell-invalid::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 var(--ui-grid-cell-invalid-marker-size, 8px) var(--ui-grid-cell-invalid-marker-size, 8px) 0;border-color:rgba(0,0,0,0) var(--ui-grid-cell-invalid-marker-color, #ff0000) rgba(0,0,0,0) rgba(0,0,0,0);pointer-events:none}.filter-cell{padding:var(--ui-grid-filter-cell-padding-block-start) var(--ui-grid-filter-cell-padding-inline) var(--ui-grid-filter-cell-padding-block-end);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background)}.filter-cell input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);padding:var(--ui-grid-filter-input-padding-block) var(--ui-grid-filter-input-padding-inline);font:inherit}.filter-cell input:focus{outline:var(--ui-grid-filter-input-focus-outline);border-color:var(--ui-grid-accent)}.group-row{display:flex;align-items:center;gap:var(--ui-grid-group-row-gap);border:0;width:100%;padding:var(--ui-grid-group-row-padding-block) var(--ui-grid-group-row-padding-inline);background:var(--ui-grid-group-background);border-bottom:1px solid var(--ui-grid-border-color);color:var(--ui-grid-cell-color);cursor:pointer;text-align:left}.group-row span,.group-row small{color:var(--ui-grid-muted-color)}.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-grid-pagination-gap);padding:var(--ui-grid-pagination-padding-block) var(--ui-grid-pagination-padding-inline);border-top:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background)}.pagination-bar p{margin:0;color:var(--ui-grid-muted-color)}.pagination-controls{display:flex;align-items:center;gap:var(--ui-grid-pagination-controls-gap);flex-wrap:wrap}.pagination-button{padding:var(--ui-grid-pagination-button-padding-block) var(--ui-grid-pagination-button-padding-inline)}.pagination-size{display:inline-flex;align-items:center;gap:var(--ui-grid-pagination-size-gap)}.pagination-size select{border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);padding:var(--ui-grid-pagination-select-padding-block) var(--ui-grid-pagination-select-padding-inline);font:inherit}';
|
|
4194
|
+
var ui_grid_shell_default = ':host{--_ui-grid-border-color: var(--ui-grid-border-color, var(--app-ui-grid-border-color, #d4d4d8));--_ui-grid-header-background: var( --ui-grid-header-background, var(--app-ui-grid-header-background, #f3f4f6) );--_ui-grid-row-odd: var(--ui-grid-row-odd, var(--app-ui-grid-row-odd, #fcfcfd));--_ui-grid-row-even: var(--ui-grid-row-even, var(--app-ui-grid-row-even, #f7f7f8));--_ui-grid-row-hover: var( --ui-grid-row-hover, var( --app-ui-grid-row-hover, color-mix(in srgb, var(--_ui-grid-accent) 4%, var(--_ui-grid-surface)) ) );--_ui-grid-row-focus-background: var( --ui-grid-row-focus-background, var( --app-ui-grid-row-focus-background, color-mix(in srgb, var(--_ui-grid-accent) 9%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-color: var(--ui-grid-cell-color, var(--app-ui-grid-cell-color, #111827));--_ui-grid-muted-color: var(--ui-grid-muted-color, var(--app-ui-grid-muted-color, #6b7280));--_ui-grid-surface: var(--ui-grid-surface, var(--app-ui-grid-surface, #ffffff));--_ui-grid-radius: var(--ui-grid-radius, var(--app-ui-grid-radius, 4px));--_ui-grid-shadow: var( --ui-grid-shadow, var(--app-ui-grid-shadow, 0 10px 24px rgba(15, 23, 42, 0.08)) );--_ui-grid-header-weight: var(--ui-grid-header-weight, var(--app-ui-grid-header-weight, 700));--_ui-grid-accent: var(--ui-grid-accent, var(--app-ui-grid-accent, #2563eb));--_ui-grid-group-background: var( --ui-grid-group-background, var(--app-ui-grid-group-background, #eceff3) );--_ui-grid-status-active-bg: var( --ui-grid-status-active-bg, var(--app-ui-grid-status-active-bg, rgba(22, 163, 74, 0.14)) );--_ui-grid-status-active-color: var( --ui-grid-status-active-color, var(--app-ui-grid-status-active-color, #166534) );--_ui-grid-status-expansion-bg: var( --ui-grid-status-expansion-bg, var(--app-ui-grid-status-expansion-bg, rgba(37, 99, 235, 0.14)) );--_ui-grid-status-expansion-color: var( --ui-grid-status-expansion-color, var(--app-ui-grid-status-expansion-color, #1d4ed8) );--_ui-grid-status-enterprise-bg: var( --ui-grid-status-enterprise-bg, var(--app-ui-grid-status-enterprise-bg, rgba(15, 118, 110, 0.14)) );--_ui-grid-status-enterprise-color: var( --ui-grid-status-enterprise-color, var(--app-ui-grid-status-enterprise-color, #115e59) );--_ui-grid-status-pilot-bg: var( --ui-grid-status-pilot-bg, var(--app-ui-grid-status-pilot-bg, rgba(234, 88, 12, 0.14)) );--_ui-grid-status-pilot-color: var( --ui-grid-status-pilot-color, var(--app-ui-grid-status-pilot-color, #c2410c) );--_ui-grid-shell-gap: var(--ui-grid-shell-gap, var(--app-ui-grid-shell-gap, 1.5rem));--_ui-grid-hero-gap: var(--ui-grid-hero-gap, var(--app-ui-grid-hero-gap, 1.5rem));--_ui-grid-hero-padding-block: var( --ui-grid-hero-padding-block, var(--app-ui-grid-hero-padding-block, 1rem) );--_ui-grid-eyebrow-margin-block-end: var( --ui-grid-eyebrow-margin-block-end, var(--app-ui-grid-eyebrow-margin-block-end, 0.5rem) );--_ui-grid-eyebrow-letter-spacing: var( --ui-grid-eyebrow-letter-spacing, var(--app-ui-grid-eyebrow-letter-spacing, 0.18em) );--_ui-grid-eyebrow-font-size: var( --ui-grid-eyebrow-font-size, var(--app-ui-grid-eyebrow-font-size, 0.72rem) );--_ui-grid-hero-title-font-size: var( --ui-grid-hero-title-font-size, var(--app-ui-grid-hero-title-font-size, clamp(1.4rem, 2vw, 2rem)) );--_ui-grid-hero-title-line-height: var( --ui-grid-hero-title-line-height, var(--app-ui-grid-hero-title-line-height, 1.1) );--_ui-grid-hero-deck-max-width: var( --ui-grid-hero-deck-max-width, var(--app-ui-grid-hero-deck-max-width, 56ch) );--_ui-grid-hero-deck-margin-block-start: var( --ui-grid-hero-deck-margin-block-start, var(--app-ui-grid-hero-deck-margin-block-start, 0.75rem) );--_ui-grid-hero-actions-gap: var( --ui-grid-hero-actions-gap, var(--app-ui-grid-hero-actions-gap, 1rem) );--_ui-grid-action-radius: var(--ui-grid-action-radius, var(--app-ui-grid-action-radius, 999px));--_ui-grid-action-padding-block: var( --ui-grid-action-padding-block, var(--app-ui-grid-action-padding-block, 0.8rem) );--_ui-grid-action-padding-inline: var( --ui-grid-action-padding-inline, var(--app-ui-grid-action-padding-inline, 1.1rem) );--_ui-grid-stats-card-min-width: var( --ui-grid-stats-card-min-width, var(--app-ui-grid-stats-card-min-width, 8rem) );--_ui-grid-stats-card-padding-block: var( --ui-grid-stats-card-padding-block, var(--app-ui-grid-stats-card-padding-block, 0.85rem) );--_ui-grid-stats-card-padding-inline: var( --ui-grid-stats-card-padding-inline, var(--app-ui-grid-stats-card-padding-inline, 1rem) );--_ui-grid-stats-card-value-font-size: var( --ui-grid-stats-card-value-font-size, var(--app-ui-grid-stats-card-value-font-size, 1.9rem) );--_ui-grid-metrics-gap: var(--ui-grid-metrics-gap, var(--app-ui-grid-metrics-gap, 1rem));--_ui-grid-metric-card-padding-block: var( --ui-grid-metric-card-padding-block, var(--app-ui-grid-metric-card-padding-block, 1rem) );--_ui-grid-metric-card-padding-inline: var( --ui-grid-metric-card-padding-inline, var(--app-ui-grid-metric-card-padding-inline, 1.1rem) );--_ui-grid-metric-value-font-size: var( --ui-grid-metric-value-font-size, var(--app-ui-grid-metric-value-font-size, 1.3rem) );--_ui-grid-toolbar-gap: var(--ui-grid-toolbar-gap, var(--app-ui-grid-toolbar-gap, 1rem));--_ui-grid-toolbar-padding-block: var( --ui-grid-toolbar-padding-block, var(--app-ui-grid-toolbar-padding-block, 1rem) );--_ui-grid-toolbar-padding-inline: var( --ui-grid-toolbar-padding-inline, var(--app-ui-grid-toolbar-padding-inline, 1.25rem) );--_ui-grid-toolbar-inline-gap: var( --ui-grid-toolbar-inline-gap, var(--app-ui-grid-toolbar-inline-gap, 0.4rem) );--_ui-grid-overflow-x: var(--ui-grid-overflow-x, var(--app-ui-grid-overflow-x, auto));--_ui-grid-overflow-y: var(--ui-grid-overflow-y, var(--app-ui-grid-overflow-y, auto));--_ui-grid-header-z-index: var(--ui-grid-header-z-index, var(--app-ui-grid-header-z-index, 3));--_ui-grid-pinned-cell-z-index: var( --ui-grid-pinned-cell-z-index, var(--app-ui-grid-pinned-cell-z-index, 2) );--_ui-grid-pin-menu-open-z-index: var( --ui-grid-pin-menu-open-z-index, var(--app-ui-grid-pin-menu-open-z-index, 8) );--_ui-grid-pin-menu-z-index: var(--ui-grid-pin-menu-z-index, var(--app-ui-grid-pin-menu-z-index, 20));--_ui-grid-header-cell-gap: var( --ui-grid-header-cell-gap, var(--app-ui-grid-header-cell-gap, 0.75rem) );--_ui-grid-header-cell-padding-block: var( --ui-grid-header-cell-padding-block, var(--app-ui-grid-header-cell-padding-block, 0.85rem) );--_ui-grid-header-cell-padding-inline: var( --ui-grid-header-cell-padding-inline, var(--app-ui-grid-header-cell-padding-inline, 1rem) );--_ui-grid-header-cell-background-active: var( --ui-grid-header-cell-background-active, var( --app-ui-grid-header-cell-background-active, color-mix(in srgb, var(--_ui-grid-accent) 8%, var(--_ui-grid-header-background)) ) );--_ui-grid-pinned-divider-shadow-left: var( --ui-grid-pinned-divider-shadow-left, var( --app-ui-grid-pinned-divider-shadow-left, 2px 0 4px rgba(0, 0, 0, 0.06) ) );--_ui-grid-pinned-divider-shadow-right: var( --ui-grid-pinned-divider-shadow-right, var( --app-ui-grid-pinned-divider-shadow-right, -2px 0 4px rgba(0, 0, 0, 0.06) ) );--_ui-grid-pinned-divider-clip-left: var( --ui-grid-pinned-divider-clip-left, var(--app-ui-grid-pinned-divider-clip-left, inset(0 -4px 0 0)) );--_ui-grid-pinned-divider-clip-right: var( --ui-grid-pinned-divider-clip-right, var(--app-ui-grid-pinned-divider-clip-right, inset(0 0 0 -4px)) );--_ui-grid-header-actions-gap: var( --ui-grid-header-actions-gap, var(--app-ui-grid-header-actions-gap, 0.4rem) );--_ui-grid-control-size: var(--ui-grid-control-size, var(--app-ui-grid-control-size, 2rem));--_ui-grid-control-radius: var( --ui-grid-control-radius, var(--app-ui-grid-control-radius, 999px) );--_ui-grid-control-icon-size: var( --ui-grid-control-icon-size, var(--app-ui-grid-control-icon-size, 1rem) );--_ui-grid-control-background: var( --ui-grid-control-background, var(--app-ui-grid-control-background, var(--_ui-grid-surface)) );--_ui-grid-control-border-color: var( --ui-grid-control-border-color, var(--app-ui-grid-control-border-color, var(--_ui-grid-border-color)) );--_ui-grid-control-color: var( --ui-grid-control-color, var(--app-ui-grid-control-color, var(--_ui-grid-muted-color)) );--_ui-grid-control-background-active: var( --ui-grid-control-background-active, var( --app-ui-grid-control-background-active, color-mix(in srgb, var(--_ui-grid-accent) 12%, var(--_ui-grid-surface)) ) );--_ui-grid-control-border-color-active: var( --ui-grid-control-border-color-active, var( --app-ui-grid-control-border-color-active, color-mix(in srgb, var(--_ui-grid-accent) 35%, var(--_ui-grid-border-color)) ) );--_ui-grid-control-color-active: var( --ui-grid-control-color-active, var(--app-ui-grid-control-color-active, var(--_ui-grid-accent)) );--_ui-grid-pin-menu-offset-block-start: var( --ui-grid-pin-menu-offset-block-start, var(--app-ui-grid-pin-menu-offset-block-start, 0.35rem) );--_ui-grid-pin-menu-gap: var(--ui-grid-pin-menu-gap, var(--app-ui-grid-pin-menu-gap, 0.25rem));--_ui-grid-pin-menu-padding: var( --ui-grid-pin-menu-padding, var(--app-ui-grid-pin-menu-padding, 0.25rem) );--_ui-grid-pin-menu-radius: var(--ui-grid-pin-menu-radius, var(--app-ui-grid-pin-menu-radius, 999px));--_ui-grid-pin-menu-shadow: var( --ui-grid-pin-menu-shadow, var( --app-ui-grid-pin-menu-shadow, 0 10px 24px color-mix(in srgb, var(--_ui-grid-cell-color) 10%, transparent) ) );--_ui-grid-pin-menu-action-size: var( --ui-grid-pin-menu-action-size, var(--app-ui-grid-pin-menu-action-size, 1.75rem) );--_ui-grid-pin-control-collapsed-size: var( --ui-grid-pin-control-collapsed-size, var(--app-ui-grid-pin-control-collapsed-size, 1px) );--_ui-grid-pin-control-transition-duration: var( --ui-grid-pin-control-transition-duration, var(--app-ui-grid-pin-control-transition-duration, 160ms) );--_ui-grid-pin-control-transition-easing: var( --ui-grid-pin-control-transition-easing, var(--app-ui-grid-pin-control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)) );--_ui-grid-pin-menu-scale-closed: var( --ui-grid-pin-menu-scale-closed, var(--app-ui-grid-pin-menu-scale-closed, 0.72) );--_ui-grid-filter-cell-padding-block-start: var( --ui-grid-filter-cell-padding-block-start, var(--app-ui-grid-filter-cell-padding-block-start, 0.75rem) );--_ui-grid-filter-cell-padding-block-end: var( --ui-grid-filter-cell-padding-block-end, var(--app-ui-grid-filter-cell-padding-block-end, 1rem) );--_ui-grid-filter-cell-padding-inline: var( --ui-grid-filter-cell-padding-inline, var(--app-ui-grid-filter-cell-padding-inline, 1rem) );--_ui-grid-filter-input-padding-block: var( --ui-grid-filter-input-padding-block, var(--app-ui-grid-filter-input-padding-block, 0.55rem) );--_ui-grid-filter-input-padding-inline: var( --ui-grid-filter-input-padding-inline, var(--app-ui-grid-filter-input-padding-inline, 0.7rem) );--_ui-grid-filter-input-focus-outline: var( --ui-grid-filter-input-focus-outline, var( --app-ui-grid-filter-input-focus-outline, 2px solid color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-body-cell-padding-block: var( --ui-grid-body-cell-padding-block, var(--app-ui-grid-body-cell-padding-block, 0.95rem) );--_ui-grid-body-cell-padding-inline: var( --ui-grid-body-cell-padding-inline, var(--app-ui-grid-body-cell-padding-inline, 1rem) );--_ui-grid-cell-shell-gap: var(--ui-grid-cell-shell-gap, var(--app-ui-grid-cell-shell-gap, 0.55rem));--_ui-grid-row-toggle-size: var(--ui-grid-row-toggle-size, var(--app-ui-grid-row-toggle-size, 1.55rem));--_ui-grid-row-toggle-radius: var( --ui-grid-row-toggle-radius, var(--app-ui-grid-row-toggle-radius, 999px) );--_ui-grid-toggle-icon-size: var( --ui-grid-toggle-icon-size, var(--app-ui-grid-toggle-icon-size, 1.1rem) );--_ui-grid-group-disclosure-icon-size: var( --ui-grid-group-disclosure-icon-size, var(--app-ui-grid-group-disclosure-icon-size, 0.9rem) );--_ui-grid-pagination-icon-size: var( --ui-grid-pagination-icon-size, var(--app-ui-grid-pagination-icon-size, 1.2rem) );--_ui-grid-expandable-row-padding-block: var( --ui-grid-expandable-row-padding-block, var(--app-ui-grid-expandable-row-padding-block, 1rem) );--_ui-grid-expandable-row-padding-inline: var( --ui-grid-expandable-row-padding-inline, var(--app-ui-grid-expandable-row-padding-inline, 1.25rem) );--_ui-grid-expandable-row-background: var( --ui-grid-expandable-row-background, var( --app-ui-grid-expandable-row-background, color-mix(in srgb, var(--_ui-grid-accent) 4%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-focus-background: var( --ui-grid-cell-focus-background, var( --app-ui-grid-cell-focus-background, color-mix(in srgb, var(--_ui-grid-accent) 14%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-focus-ring: var( --ui-grid-cell-focus-ring, var( --app-ui-grid-cell-focus-ring, inset 0 0 0 1px color-mix(in srgb, var(--_ui-grid-accent) 28%, transparent) ) );--_ui-grid-cell-editing-background: var( --ui-grid-cell-editing-background, var( --app-ui-grid-cell-editing-background, color-mix(in srgb, var(--_ui-grid-accent) 7%, var(--_ui-grid-surface)) ) );--_ui-grid-cell-editor-border-color: var( --ui-grid-cell-editor-border-color, var( --app-ui-grid-cell-editor-border-color, color-mix(in srgb, var(--_ui-grid-accent) 45%, var(--_ui-grid-border-color)) ) );--_ui-grid-cell-editor-radius: var( --ui-grid-cell-editor-radius, var(--app-ui-grid-cell-editor-radius, calc(var(--_ui-grid-radius) - 1px)) );--_ui-grid-cell-editor-padding-block: var( --ui-grid-cell-editor-padding-block, var(--app-ui-grid-cell-editor-padding-block, 0.45rem) );--_ui-grid-cell-editor-padding-inline: var( --ui-grid-cell-editor-padding-inline, var(--app-ui-grid-cell-editor-padding-inline, 0.55rem) );--_ui-grid-cell-editor-focus-outline: var( --ui-grid-cell-editor-focus-outline, var( --app-ui-grid-cell-editor-focus-outline, 2px solid color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-group-row-gap: var(--ui-grid-group-row-gap, var(--app-ui-grid-group-row-gap, 0.9rem));--_ui-grid-group-row-padding-block: var( --ui-grid-group-row-padding-block, var(--app-ui-grid-group-row-padding-block, 0.9rem) );--_ui-grid-group-row-padding-inline: var( --ui-grid-group-row-padding-inline, var(--app-ui-grid-group-row-padding-inline, 1rem) );--_ui-grid-drag-preview-shadow: var( --ui-grid-drag-preview-shadow, var(--app-ui-grid-drag-preview-shadow, 0 12px 30px rgba(15, 23, 42, 0.16)) );--_ui-grid-drag-preview-radius: var( --ui-grid-drag-preview-radius, var(--app-ui-grid-drag-preview-radius, 0.9rem) );--_ui-grid-drag-placeholder-opacity: var( --ui-grid-drag-placeholder-opacity, var(--app-ui-grid-drag-placeholder-opacity, 0.3) );--_ui-grid-drag-placeholder-background: var( --ui-grid-drag-placeholder-background, var( --app-ui-grid-drag-placeholder-background, color-mix(in srgb, var(--_ui-grid-accent) 9%, var(--_ui-grid-header-background)) ) );--_ui-grid-drag-placeholder-border: var( --ui-grid-drag-placeholder-border, var( --app-ui-grid-drag-placeholder-border, 1px dashed color-mix(in srgb, var(--_ui-grid-accent) 45%, var(--_ui-grid-border-color)) ) );--_ui-grid-drag-placeholder-shadow: var( --ui-grid-drag-placeholder-shadow, var( --app-ui-grid-drag-placeholder-shadow, inset 0 0 0 1px color-mix(in srgb, var(--_ui-grid-accent) 18%, transparent) ) );--_ui-grid-empty-state-gap: var( --ui-grid-empty-state-gap, var(--app-ui-grid-empty-state-gap, 0.35rem) );--_ui-grid-empty-state-min-height: var( --ui-grid-empty-state-min-height, var(--app-ui-grid-empty-state-min-height, 16rem) );--_ui-grid-empty-state-padding: var( --ui-grid-empty-state-padding, var(--app-ui-grid-empty-state-padding, 2rem) );--_ui-grid-pagination-gap: var(--ui-grid-pagination-gap, var(--app-ui-grid-pagination-gap, 1rem));--_ui-grid-pagination-padding-block: var( --ui-grid-pagination-padding-block, var(--app-ui-grid-pagination-padding-block, 0.85rem) );--_ui-grid-pagination-padding-inline: var( --ui-grid-pagination-padding-inline, var(--app-ui-grid-pagination-padding-inline, 1.25rem) );--_ui-grid-pagination-controls-gap: var( --ui-grid-pagination-controls-gap, var(--app-ui-grid-pagination-controls-gap, 0.75rem) );--_ui-grid-pagination-size-gap: var( --ui-grid-pagination-size-gap, var(--app-ui-grid-pagination-size-gap, 0.4rem) );--_ui-grid-pagination-button-padding-block: var( --ui-grid-pagination-button-padding-block, var(--app-ui-grid-pagination-button-padding-block, 0.45rem) );--_ui-grid-pagination-button-padding-inline: var( --ui-grid-pagination-button-padding-inline, var(--app-ui-grid-pagination-button-padding-inline, 0.8rem) );--_ui-grid-pagination-select-padding-block: var( --ui-grid-pagination-select-padding-block, var(--app-ui-grid-pagination-select-padding-block, 0.35rem) );--_ui-grid-pagination-select-padding-inline: var( --ui-grid-pagination-select-padding-inline, var(--app-ui-grid-pagination-select-padding-inline, 0.55rem) );--_ui-grid-status-pill-padding-block: var( --ui-grid-status-pill-padding-block, var(--app-ui-grid-status-pill-padding-block, 0.2rem) );--_ui-grid-status-pill-padding-inline: var( --ui-grid-status-pill-padding-inline, var(--app-ui-grid-status-pill-padding-inline, 0.55rem) );--_ui-grid-status-pill-radius: var( --ui-grid-status-pill-radius, var(--app-ui-grid-status-pill-radius, 999px) );--_ui-grid-status-pill-font-size: var( --ui-grid-status-pill-font-size, var(--app-ui-grid-status-pill-font-size, 0.85rem) );--_ui-grid-status-pill-default-bg: var( --ui-grid-status-pill-default-bg, var(--app-ui-grid-status-pill-default-bg, rgba(15, 23, 42, 0.07)) );display:block;color:var(--_ui-grid-cell-color)}:host *,:host *::before,:host *::after{--ui-grid-border-color: var(--_ui-grid-border-color);--ui-grid-header-background: var(--_ui-grid-header-background);--ui-grid-row-odd: var(--_ui-grid-row-odd);--ui-grid-row-even: var(--_ui-grid-row-even);--ui-grid-row-hover: var(--_ui-grid-row-hover);--ui-grid-row-focus-background: var(--_ui-grid-row-focus-background);--ui-grid-cell-color: var(--_ui-grid-cell-color);--ui-grid-muted-color: var(--_ui-grid-muted-color);--ui-grid-surface: var(--_ui-grid-surface);--ui-grid-radius: var(--_ui-grid-radius);--ui-grid-shadow: var(--_ui-grid-shadow);--ui-grid-header-weight: var(--_ui-grid-header-weight);--ui-grid-accent: var(--_ui-grid-accent);--ui-grid-group-background: var(--_ui-grid-group-background);--ui-grid-status-active-bg: var(--_ui-grid-status-active-bg);--ui-grid-status-active-color: var(--_ui-grid-status-active-color);--ui-grid-status-expansion-bg: var(--_ui-grid-status-expansion-bg);--ui-grid-status-expansion-color: var(--_ui-grid-status-expansion-color);--ui-grid-status-enterprise-bg: var(--_ui-grid-status-enterprise-bg);--ui-grid-status-enterprise-color: var(--_ui-grid-status-enterprise-color);--ui-grid-status-pilot-bg: var(--_ui-grid-status-pilot-bg);--ui-grid-status-pilot-color: var(--_ui-grid-status-pilot-color);--ui-grid-shell-gap: var(--_ui-grid-shell-gap);--ui-grid-hero-gap: var(--_ui-grid-hero-gap);--ui-grid-hero-padding-block: var(--_ui-grid-hero-padding-block);--ui-grid-eyebrow-margin-block-end: var(--_ui-grid-eyebrow-margin-block-end);--ui-grid-eyebrow-letter-spacing: var(--_ui-grid-eyebrow-letter-spacing);--ui-grid-eyebrow-font-size: var(--_ui-grid-eyebrow-font-size);--ui-grid-hero-title-font-size: var(--_ui-grid-hero-title-font-size);--ui-grid-hero-title-line-height: var(--_ui-grid-hero-title-line-height);--ui-grid-hero-deck-max-width: var(--_ui-grid-hero-deck-max-width);--ui-grid-hero-deck-margin-block-start: var(--_ui-grid-hero-deck-margin-block-start);--ui-grid-hero-actions-gap: var(--_ui-grid-hero-actions-gap);--ui-grid-action-radius: var(--_ui-grid-action-radius);--ui-grid-action-padding-block: var(--_ui-grid-action-padding-block);--ui-grid-action-padding-inline: var(--_ui-grid-action-padding-inline);--ui-grid-stats-card-min-width: var(--_ui-grid-stats-card-min-width);--ui-grid-stats-card-padding-block: var(--_ui-grid-stats-card-padding-block);--ui-grid-stats-card-padding-inline: var(--_ui-grid-stats-card-padding-inline);--ui-grid-stats-card-value-font-size: var(--_ui-grid-stats-card-value-font-size);--ui-grid-metrics-gap: var(--_ui-grid-metrics-gap);--ui-grid-metric-card-padding-block: var(--_ui-grid-metric-card-padding-block);--ui-grid-metric-card-padding-inline: var(--_ui-grid-metric-card-padding-inline);--ui-grid-metric-value-font-size: var(--_ui-grid-metric-value-font-size);--ui-grid-toolbar-gap: var(--_ui-grid-toolbar-gap);--ui-grid-toolbar-padding-block: var(--_ui-grid-toolbar-padding-block);--ui-grid-toolbar-padding-inline: var(--_ui-grid-toolbar-padding-inline);--ui-grid-toolbar-inline-gap: var(--_ui-grid-toolbar-inline-gap);--ui-grid-overflow-x: var(--_ui-grid-overflow-x);--ui-grid-overflow-y: var(--_ui-grid-overflow-y);--ui-grid-header-z-index: var(--_ui-grid-header-z-index);--ui-grid-pinned-cell-z-index: var(--_ui-grid-pinned-cell-z-index);--ui-grid-pin-menu-open-z-index: var(--_ui-grid-pin-menu-open-z-index);--ui-grid-pin-menu-z-index: var(--_ui-grid-pin-menu-z-index);--ui-grid-header-cell-gap: var(--_ui-grid-header-cell-gap);--ui-grid-header-cell-padding-block: var(--_ui-grid-header-cell-padding-block);--ui-grid-header-cell-padding-inline: var(--_ui-grid-header-cell-padding-inline);--ui-grid-header-cell-background-active: var(--_ui-grid-header-cell-background-active);--ui-grid-pinned-divider-shadow-left: var(--_ui-grid-pinned-divider-shadow-left);--ui-grid-pinned-divider-shadow-right: var(--_ui-grid-pinned-divider-shadow-right);--ui-grid-pinned-divider-clip-left: var(--_ui-grid-pinned-divider-clip-left);--ui-grid-pinned-divider-clip-right: var(--_ui-grid-pinned-divider-clip-right);--ui-grid-header-actions-gap: var(--_ui-grid-header-actions-gap);--ui-grid-control-size: var(--_ui-grid-control-size);--ui-grid-control-radius: var(--_ui-grid-control-radius);--ui-grid-control-icon-size: var(--_ui-grid-control-icon-size);--ui-grid-control-background: var(--_ui-grid-control-background);--ui-grid-control-border-color: var(--_ui-grid-control-border-color);--ui-grid-control-color: var(--_ui-grid-control-color);--ui-grid-control-background-active: var(--_ui-grid-control-background-active);--ui-grid-control-border-color-active: var(--_ui-grid-control-border-color-active);--ui-grid-control-color-active: var(--_ui-grid-control-color-active);--ui-grid-pin-menu-offset-block-start: var(--_ui-grid-pin-menu-offset-block-start);--ui-grid-pin-menu-gap: var(--_ui-grid-pin-menu-gap);--ui-grid-pin-menu-padding: var(--_ui-grid-pin-menu-padding);--ui-grid-pin-menu-radius: var(--_ui-grid-pin-menu-radius);--ui-grid-pin-menu-shadow: var(--_ui-grid-pin-menu-shadow);--ui-grid-pin-menu-action-size: var(--_ui-grid-pin-menu-action-size);--ui-grid-pin-control-collapsed-size: var(--_ui-grid-pin-control-collapsed-size);--ui-grid-pin-control-transition-duration: var(--_ui-grid-pin-control-transition-duration);--ui-grid-pin-control-transition-easing: var(--_ui-grid-pin-control-transition-easing);--ui-grid-pin-menu-scale-closed: var(--_ui-grid-pin-menu-scale-closed);--ui-grid-filter-cell-padding-block-start: var(--_ui-grid-filter-cell-padding-block-start);--ui-grid-filter-cell-padding-block-end: var(--_ui-grid-filter-cell-padding-block-end);--ui-grid-filter-cell-padding-inline: var(--_ui-grid-filter-cell-padding-inline);--ui-grid-filter-input-padding-block: var(--_ui-grid-filter-input-padding-block);--ui-grid-filter-input-padding-inline: var(--_ui-grid-filter-input-padding-inline);--ui-grid-filter-input-focus-outline: var(--_ui-grid-filter-input-focus-outline);--ui-grid-body-cell-padding-block: var(--_ui-grid-body-cell-padding-block);--ui-grid-body-cell-padding-inline: var(--_ui-grid-body-cell-padding-inline);--ui-grid-cell-shell-gap: var(--_ui-grid-cell-shell-gap);--ui-grid-row-toggle-size: var(--_ui-grid-row-toggle-size);--ui-grid-row-toggle-radius: var(--_ui-grid-row-toggle-radius);--ui-grid-toggle-icon-size: var(--_ui-grid-toggle-icon-size);--ui-grid-group-disclosure-icon-size: var(--_ui-grid-group-disclosure-icon-size);--ui-grid-pagination-icon-size: var(--_ui-grid-pagination-icon-size);--ui-grid-expandable-row-padding-block: var(--_ui-grid-expandable-row-padding-block);--ui-grid-expandable-row-padding-inline: var(--_ui-grid-expandable-row-padding-inline);--ui-grid-expandable-row-background: var(--_ui-grid-expandable-row-background);--ui-grid-cell-focus-background: var(--_ui-grid-cell-focus-background);--ui-grid-cell-focus-ring: var(--_ui-grid-cell-focus-ring);--ui-grid-cell-editing-background: var(--_ui-grid-cell-editing-background);--ui-grid-cell-editor-border-color: var(--_ui-grid-cell-editor-border-color);--ui-grid-cell-editor-radius: var(--_ui-grid-cell-editor-radius);--ui-grid-cell-editor-padding-block: var(--_ui-grid-cell-editor-padding-block);--ui-grid-cell-editor-padding-inline: var(--_ui-grid-cell-editor-padding-inline);--ui-grid-cell-editor-focus-outline: var(--_ui-grid-cell-editor-focus-outline);--ui-grid-group-row-gap: var(--_ui-grid-group-row-gap);--ui-grid-group-row-padding-block: var(--_ui-grid-group-row-padding-block);--ui-grid-group-row-padding-inline: var(--_ui-grid-group-row-padding-inline);--ui-grid-drag-preview-shadow: var(--_ui-grid-drag-preview-shadow);--ui-grid-drag-preview-radius: var(--_ui-grid-drag-preview-radius);--ui-grid-drag-placeholder-opacity: var(--_ui-grid-drag-placeholder-opacity);--ui-grid-drag-placeholder-background: var(--_ui-grid-drag-placeholder-background);--ui-grid-drag-placeholder-border: var(--_ui-grid-drag-placeholder-border);--ui-grid-drag-placeholder-shadow: var(--_ui-grid-drag-placeholder-shadow);--ui-grid-empty-state-gap: var(--_ui-grid-empty-state-gap);--ui-grid-empty-state-min-height: var(--_ui-grid-empty-state-min-height);--ui-grid-empty-state-padding: var(--_ui-grid-empty-state-padding);--ui-grid-pagination-gap: var(--_ui-grid-pagination-gap);--ui-grid-pagination-padding-block: var(--_ui-grid-pagination-padding-block);--ui-grid-pagination-padding-inline: var(--_ui-grid-pagination-padding-inline);--ui-grid-pagination-controls-gap: var(--_ui-grid-pagination-controls-gap);--ui-grid-pagination-size-gap: var(--_ui-grid-pagination-size-gap);--ui-grid-pagination-button-padding-block: var(--_ui-grid-pagination-button-padding-block);--ui-grid-pagination-button-padding-inline: var(--_ui-grid-pagination-button-padding-inline);--ui-grid-pagination-select-padding-block: var(--_ui-grid-pagination-select-padding-block);--ui-grid-pagination-select-padding-inline: var(--_ui-grid-pagination-select-padding-inline);--ui-grid-status-pill-padding-block: var(--_ui-grid-status-pill-padding-block);--ui-grid-status-pill-padding-inline: var(--_ui-grid-status-pill-padding-inline);--ui-grid-status-pill-radius: var(--_ui-grid-status-pill-radius);--ui-grid-status-pill-font-size: var(--_ui-grid-status-pill-font-size);--ui-grid-status-pill-default-bg: var(--_ui-grid-status-pill-default-bg);box-sizing:border-box}:host{isolation:isolate;contain:layout paint}.grid-shell{display:grid;gap:var(--ui-grid-shell-gap)}.grid-hero{display:flex;justify-content:space-between;gap:var(--ui-grid-hero-gap);align-items:end;padding:var(--ui-grid-hero-padding-block) 0;color:var(--ui-grid-cell-color)}.eyebrow{margin:0 0 var(--ui-grid-eyebrow-margin-block-end);text-transform:uppercase;letter-spacing:var(--ui-grid-eyebrow-letter-spacing);font-size:var(--ui-grid-eyebrow-font-size);color:var(--ui-grid-muted-color)}h1{margin:0;font-size:var(--ui-grid-hero-title-font-size);line-height:var(--ui-grid-hero-title-line-height)}.deck{max-width:var(--ui-grid-hero-deck-max-width);margin:var(--ui-grid-hero-deck-margin-block-start) 0 0;color:var(--ui-grid-muted-color)}.hero-actions{display:flex;gap:var(--ui-grid-hero-actions-gap);align-items:center;flex-wrap:wrap}.action{border:0;border-radius:var(--ui-grid-action-radius);padding:var(--ui-grid-action-padding-block) var(--ui-grid-action-padding-inline);font:inherit;cursor:pointer}.action-secondary{background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);border:1px solid var(--ui-grid-border-color)}.stats-card{min-width:var(--ui-grid-stats-card-min-width);padding:var(--ui-grid-stats-card-padding-block) var(--ui-grid-stats-card-padding-inline);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);display:grid}.stats-card span{font-size:var(--ui-grid-stats-card-value-font-size);font-weight:700}.stats-card small{color:var(--ui-grid-muted-color)}.grid-frame{display:grid;grid-template-rows:auto minmax(0, 1fr) auto;height:100%;min-height:0;border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);box-shadow:var(--ui-grid-shadow);overflow:hidden}.metrics-strip{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--ui-grid-metrics-gap)}.metrics-strip article{padding:var(--ui-grid-metric-card-padding-block) var(--ui-grid-metric-card-padding-inline);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);border:1px solid var(--ui-grid-border-color);display:grid}.metrics-strip strong{font-size:var(--ui-grid-metric-value-font-size)}.metrics-strip span{color:var(--ui-grid-muted-color)}.grid-toolbar{display:flex;justify-content:space-between;gap:var(--ui-grid-toolbar-gap);padding:var(--ui-grid-toolbar-padding-block) var(--ui-grid-toolbar-padding-inline);align-items:center;background:var(--ui-grid-header-background);border-bottom:1px solid var(--ui-grid-border-color)}.grid-toolbar div{display:flex;gap:var(--ui-grid-toolbar-inline-gap);align-items:baseline}.grid-toolbar p{margin:0;color:var(--ui-grid-muted-color)}.grid-table{position:relative;height:100%;min-height:0;width:100%;min-width:0;display:flex;flex-direction:column;background:var(--ui-grid-surface);overflow-anchor:none}.grid-header-strip,.grid-filter-strip{flex:0 0 auto;position:sticky;z-index:var(--ui-grid-header-z-index);background:var(--ui-grid-surface);overflow:hidden}.grid-header-strip{top:0}.grid-filter-strip{top:var(--ui-grid-header-sticky-top, 0px)}.grid-body-viewport{flex:1 1 auto;min-height:0;overflow-x:auto;overflow-anchor:none;overscroll-behavior-x:none}.header-grid,.filter-grid,.body-grid{display:grid;width:100%;min-width:max-content}.header-cell,.filter-cell,.body-cell,.group-row{min-width:0}.header-cell{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:var(--ui-grid-header-cell-gap);padding:var(--ui-grid-header-cell-padding-block) var(--ui-grid-header-cell-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background);font-weight:var(--ui-grid-header-weight);align-items:center;position:relative}.header-cell.is-active{background:var(--ui-grid-header-cell-background-active)}.header-cell[draggable=true]{cursor:grab}.header-cell.is-dragging{opacity:.6}.header-cell.is-drag-target{background:color-mix(in srgb, var(--ui-grid-accent) 9%, var(--ui-grid-header-background));border:1px dashed color-mix(in srgb, var(--ui-grid-accent) 45%, var(--ui-grid-border-color));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-grid-accent) 18%, transparent)}.header-cell.is-pin-menu-open{z-index:var(--ui-grid-pin-menu-open-z-index)}.header-cell.is-pinned,.filter-cell.is-pinned,.body-cell.is-pinned{position:sticky;z-index:var(--ui-grid-pinned-cell-z-index);background:var(--ui-grid-surface)}.header-cell.is-pinned{background:var(--ui-grid-header-background)}.body-cell.is-pinned.body-cell-odd{background:var(--ui-grid-row-odd)}.body-cell.is-pinned:not(.body-cell-odd){background:var(--ui-grid-row-even)}.header-cell.is-pinned-left-last,.filter-cell.is-pinned-left-last,.body-cell.is-pinned-left-last{box-shadow:var(--ui-grid-pinned-divider-shadow-left);clip-path:var(--ui-grid-pinned-divider-clip-left)}.header-cell.is-pinned-right-first,.filter-cell.is-pinned-right-first,.body-cell.is-pinned-right-first{box-shadow:var(--ui-grid-pinned-divider-shadow-right);clip-path:var(--ui-grid-pinned-divider-clip-right)}.header-label{min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;hyphens:none}.header-actions{display:inline-flex;align-items:center;gap:var(--ui-grid-header-actions-gap);justify-self:end}.column-resizer{position:absolute;top:0;right:-4px;width:8px;height:100%;padding:0;border:0;background:rgba(0,0,0,0);cursor:col-resize;z-index:5}.column-resizer::after{content:"";position:absolute;top:20%;bottom:20%;left:50%;width:2px;transform:translateX(-50%);border-radius:999px;background:color-mix(in srgb, var(--_ui-grid-border-color) 80%, transparent);opacity:0;transition:opacity 120ms ease}.header-cell:hover .column-resizer::after,.column-resizer:focus-visible::after{opacity:1}.pin-control{position:relative;display:inline-grid;place-items:center;justify-items:center;min-width:var(--ui-grid-control-size);overflow:hidden}.header-action,.chip-action{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-grid-control-size);height:var(--ui-grid-control-size);display:flex;border:0;background:var(--ui-grid-control-background);padding:0;font:inherit;border-radius:var(--ui-grid-control-radius);cursor:pointer}.header-action-disabled{cursor:default}.header-action svg,.chip-action svg{width:var(--ui-grid-control-icon-size);height:var(--ui-grid-control-icon-size);fill:currentColor}.header-action{color:var(--ui-grid-control-color);border:1px solid var(--ui-grid-control-border-color)}.header-cell.is-active .header-action{color:var(--ui-grid-control-color-active);border-color:var(--ui-grid-control-border-color-active)}.chip-action{border:1px solid var(--ui-grid-control-border-color);color:var(--ui-grid-control-color)}.chip-action-active{background:var(--ui-grid-control-background-active);border-color:var(--ui-grid-control-border-color-active);color:var(--ui-grid-control-color-active)}.pin-trigger{grid-area:1/1;transform-origin:center;transition:width var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),background-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing)}.pin-menu{grid-area:1/1;z-index:var(--ui-grid-pin-menu-z-index);display:grid;grid-auto-rows:var(--ui-grid-pin-menu-action-size);gap:var(--ui-grid-pin-menu-gap);padding:var(--ui-grid-pin-menu-padding);border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-pin-menu-radius);background:var(--ui-grid-surface);box-shadow:var(--ui-grid-pin-menu-shadow);justify-items:center;align-items:center;width:var(--ui-grid-control-size);max-height:var(--ui-grid-pin-control-collapsed-size);opacity:0;pointer-events:none;transform:scale(var(--ui-grid-pin-menu-scale-closed));transform-origin:center;transition:max-height var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),opacity var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),transform var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),padding var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),border-color var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing),box-shadow var(--ui-grid-pin-control-transition-duration) var(--ui-grid-pin-control-transition-easing)}.pin-control-open{align-items:start}.pin-control-open .pin-trigger{width:var(--ui-grid-pin-control-collapsed-size);height:var(--ui-grid-pin-control-collapsed-size);opacity:0;transform:scale(0.72);pointer-events:none}.pin-control-open .pin-menu{max-height:calc(var(--ui-grid-pin-menu-action-size)*2 + var(--ui-grid-pin-menu-gap) + var(--ui-grid-pin-menu-padding)*2);opacity:1;pointer-events:auto;transform:scale(1)}.pin-menu-action{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-grid-pin-menu-action-size);height:var(--ui-grid-pin-menu-action-size);border:0;border-radius:var(--ui-grid-control-radius);background:rgba(0,0,0,0);color:var(--ui-grid-control-color);cursor:pointer}.pin-menu-action:hover,.pin-menu-action:focus-visible{outline:0;background:var(--ui-grid-control-background-active);color:var(--ui-grid-control-color-active)}.pin-menu-action svg{width:var(--ui-grid-control-icon-size);height:var(--ui-grid-control-icon-size);fill:currentColor}.body-cell{padding:var(--ui-grid-body-cell-padding-block) var(--ui-grid-body-cell-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);color:var(--ui-grid-cell-color);background:var(--ui-grid-row-even);outline:0}.body-cell.body-cell-odd{background:var(--ui-grid-row-odd)}.cell-shell{display:flex;align-items:center;gap:var(--ui-grid-cell-shell-gap);min-width:0}.cell-value{min-width:0;flex:1 1 auto}.row-toggle{border:1px solid var(--ui-grid-border-color);background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);width:var(--ui-grid-row-toggle-size);height:var(--ui-grid-row-toggle-size);border-radius:var(--ui-grid-row-toggle-radius);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0;font:inherit}.toggle-icon{width:var(--ui-grid-toggle-icon-size);height:var(--ui-grid-toggle-icon-size);fill:currentColor;pointer-events:none}.group-disclosure-icon{width:var(--ui-grid-group-disclosure-icon-size);height:var(--ui-grid-group-disclosure-icon-size)}.pagination-icon{width:var(--ui-grid-pagination-icon-size);height:var(--ui-grid-pagination-icon-size);fill:currentColor}.expandable-row{padding:var(--ui-grid-expandable-row-padding-block) var(--ui-grid-expandable-row-padding-inline);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-expandable-row-background)}.body-grid>.body-cell:hover:not(.row-focused):not(.cell-focused):not(.cell-editing){background:var(--ui-grid-row-hover);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-grid-accent) 10%, transparent)}.body-cell.row-focused,.body-grid>.body-cell.row-focused{background:var(--ui-grid-row-focus-background)}.body-cell.cell-focused,.body-grid>.body-cell.cell-focused{background:var(--ui-grid-cell-focus-background);box-shadow:var(--ui-grid-cell-focus-ring)}.body-cell.cell-editing,.body-grid>.body-cell.cell-editing{background:var(--ui-grid-cell-editing-background)}.cell-editor{display:block;width:100%;min-width:0;max-width:100%;border:1px solid var(--ui-grid-cell-editor-border-color);border-radius:var(--ui-grid-cell-editor-radius);background:var(--ui-grid-surface);color:var(--ui-grid-cell-color);padding:var(--ui-grid-cell-editor-padding-block) var(--ui-grid-cell-editor-padding-inline);font:inherit}.cell-editor:focus{outline:var(--ui-grid-cell-editor-focus-outline)}.grid-viewport{width:100%}.grid-virtual-spacer{position:relative;width:max-content;min-width:100%}.grid-virtual-body{position:absolute;left:0}.body-cell.align-center{text-align:center}.body-cell.align-end{text-align:right}.empty-state{display:grid;place-items:center;gap:var(--ui-grid-empty-state-gap);min-height:var(--ui-grid-empty-state-min-height);text-align:center;padding:var(--ui-grid-empty-state-padding);color:var(--ui-grid-muted-color);background:var(--ui-grid-surface)}.empty-state p,.empty-state strong{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--ui-grid-status-pill-padding-block) var(--ui-grid-status-pill-padding-inline);border-radius:var(--ui-grid-status-pill-radius);background:var(--ui-grid-status-pill-default-bg);color:var(--ui-grid-cell-color);font-size:var(--ui-grid-status-pill-font-size);font-weight:700}.status-pill-enterprise{background:var(--ui-grid-status-enterprise-bg);color:var(--ui-grid-status-enterprise-color)}.status-pill-active{background:var(--ui-grid-status-active-bg);color:var(--ui-grid-status-active-color)}.status-pill-expansion{background:var(--ui-grid-status-expansion-bg);color:var(--ui-grid-status-expansion-color)}.status-pill-pilot{background:var(--ui-grid-status-pilot-bg);color:var(--ui-grid-status-pilot-color)}@media(max-width: 900px){.metrics-strip{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-hero,.grid-toolbar{grid-template-columns:1fr;display:grid}.hero-actions{justify-content:space-between}}@media(max-width: 640px){.metrics-strip{grid-template-columns:1fr}}.ui-grid-row-selected,.body-cell.ui-grid-row-selected{background:var(--ui-grid-row-selected-bg, var(--app-ui-grid-row-selected-bg, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 22%, var(--ui-grid-surface, #ffffff))));color:var(--ui-grid-row-selected-color, var(--app-ui-grid-row-selected-color, var(--ui-grid-cell-color)))}.body-cell.ui-grid-row-selected.body-cell-odd{background:var(--ui-grid-row-selected-bg-odd, var(--app-ui-grid-row-selected-bg-odd, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 26%, var(--ui-grid-surface, #ffffff))))}.ui-grid-row-focused,.body-cell.ui-grid-row-focused{outline:1px dashed var(--ui-grid-accent, #2563eb);outline-offset:-1px}.body-cell[data-column=selectionRowHeaderCol],.header-cell[data-column=selectionRowHeaderCol],.filter-cell[data-column=selectionRowHeaderCol]{padding:0 !important;cursor:pointer;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center}.body-cell[data-column=selectionRowHeaderCol]>.cell-shell,.body-cell[data-column=selectionRowHeaderCol]>.cell-shell>.cell-content{padding:0 !important;padding-inline-start:0 !important;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.filter-cell[data-column=selectionRowHeaderCol]{padding:0;background:var(--_ui-grid-header-background, var(--ui-grid-header-background, transparent));border-bottom:1px solid var(--_ui-grid-border-color, var(--ui-grid-border-color, transparent))}.ui-grid-selection-row-header-buttons{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer}.ui-grid-selection-checkbox{display:inline-block;width:16px;height:16px;box-sizing:border-box;border:2px solid currentColor;border-radius:3px;background:rgba(0,0,0,0);color:var(--ui-grid-cell-color, currentColor);position:relative;transition:background 120ms ease,border-color 120ms ease,color 120ms ease;opacity:.7}.ui-grid-selection-row-header-buttons:hover .ui-grid-selection-checkbox{opacity:1;color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb))}.ui-grid-selection-checkbox-checked{background:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));border-color:var(--ui-grid-accent, var(--_ui-grid-accent, #2563eb));opacity:1}.ui-grid-selection-checkbox-checked::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border:2px solid var(--ui-grid-surface, var(--_ui-grid-surface, #ffffff));border-top:0;border-left:0;transform:rotate(45deg)}.ui-grid-selection-checkbox-disabled{opacity:.3;cursor:not-allowed}.ui-grid-selection-select-all{display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);border:0;padding:0;margin:0;cursor:pointer;width:100%;height:100%}.ui-grid-selection-select-all:focus-visible{outline:2px solid var(--_ui-grid-accent, var(--ui-grid-accent, #2563eb));outline-offset:-2px}.grid-body-viewport:has([data-column=selectionRowHeaderCol]){user-select:none;-webkit-user-select:none}.body-cell.ui-grid-row-dirty{color:var(--ui-grid-row-dirty-color, var(--app-ui-grid-row-dirty-color, #610B38));background:var(--ui-grid-row-dirty-bg, var(--app-ui-grid-row-dirty-bg, color-mix(in srgb, var(--ui-grid-accent, #2563eb) 8%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-row-saving{color:var(--ui-grid-row-saving-color, var(--app-ui-grid-row-saving-color, #848484)) !important;opacity:var(--ui-grid-row-saving-opacity, 0.75);cursor:progress}.body-cell.ui-grid-row-error{color:var(--ui-grid-row-error-color, var(--app-ui-grid-row-error-color, #FF0000)) !important;background:var(--ui-grid-row-error-bg, var(--app-ui-grid-row-error-bg, color-mix(in srgb, #ff0000 14%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-cell-invalid{position:relative;background:var(--ui-grid-cell-invalid-bg, var(--app-ui-grid-cell-invalid-bg, color-mix(in srgb, #ff0000 10%, var(--ui-grid-surface, #ffffff))))}.body-cell.ui-grid-cell-invalid::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 var(--ui-grid-cell-invalid-marker-size, 8px) var(--ui-grid-cell-invalid-marker-size, 8px) 0;border-color:rgba(0,0,0,0) var(--ui-grid-cell-invalid-marker-color, #ff0000) rgba(0,0,0,0) rgba(0,0,0,0);pointer-events:none}.filter-cell{padding:var(--ui-grid-filter-cell-padding-block-start) var(--ui-grid-filter-cell-padding-inline) var(--ui-grid-filter-cell-padding-block-end);border-bottom:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background)}.filter-cell input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);padding:var(--ui-grid-filter-input-padding-block) var(--ui-grid-filter-input-padding-inline);font:inherit}.filter-cell input:focus{outline:var(--ui-grid-filter-input-focus-outline);border-color:var(--ui-grid-accent)}.group-row{display:flex;align-items:center;gap:var(--ui-grid-group-row-gap);border:0;width:100%;padding:var(--ui-grid-group-row-padding-block) var(--ui-grid-group-row-padding-inline);background:var(--ui-grid-group-background);border-bottom:1px solid var(--ui-grid-border-color);color:var(--ui-grid-cell-color);cursor:pointer;text-align:left}.group-row span,.group-row small{color:var(--ui-grid-muted-color)}.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-grid-pagination-gap);padding:var(--ui-grid-pagination-padding-block) var(--ui-grid-pagination-padding-inline);border-top:1px solid var(--ui-grid-border-color);background:var(--ui-grid-header-background)}.pagination-bar p{margin:0;color:var(--ui-grid-muted-color)}.pagination-controls{display:flex;align-items:center;gap:var(--ui-grid-pagination-controls-gap);flex-wrap:wrap}.pagination-button{padding:var(--ui-grid-pagination-button-padding-block) var(--ui-grid-pagination-button-padding-inline)}.pagination-size{display:inline-flex;align-items:center;gap:var(--ui-grid-pagination-size-gap)}.pagination-size select{border:1px solid var(--ui-grid-border-color);border-radius:var(--ui-grid-radius);background:var(--ui-grid-surface);padding:var(--ui-grid-pagination-select-padding-block) var(--ui-grid-pagination-select-padding-inline);font:inherit}';
|
|
4093
4195
|
|
|
4094
4196
|
// src/adopt-styles.ts
|
|
4095
4197
|
var sheetsSupported = null;
|
|
@@ -4829,6 +4931,17 @@ var UiGridStandaloneElement = class extends HTMLElement {
|
|
|
4829
4931
|
lastVirtualOffset = 0;
|
|
4830
4932
|
/** @internal */
|
|
4831
4933
|
lastTotalVirtualHeight = 0;
|
|
4934
|
+
/**
|
|
4935
|
+
* @internal Per-row visual-state fingerprint from the previous patch pass.
|
|
4936
|
+
* The patch path uses this to skip cells whose row state hasn't changed
|
|
4937
|
+
* (selection, expand, dirty/saving/error flags) when the structure
|
|
4938
|
+
* fingerprint matches. Cleared on full re-render.
|
|
4939
|
+
*/
|
|
4940
|
+
lastRowStateFingerprints = /* @__PURE__ */ new Map();
|
|
4941
|
+
/** @internal */
|
|
4942
|
+
lastEditingCellKey = null;
|
|
4943
|
+
/** @internal */
|
|
4944
|
+
lastFocusedCellKey = null;
|
|
4832
4945
|
/**
|
|
4833
4946
|
* @internal Framework-rendered slot bridge. See `./framework-slots.ts`.
|
|
4834
4947
|
*/
|
|
@@ -4871,6 +4984,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
|
|
|
4871
4984
|
*/
|
|
4872
4985
|
setFrameworkRenderedSlots(config) {
|
|
4873
4986
|
if (this.frameworkSlots.configure(config)) {
|
|
4987
|
+
this.lastRowStateFingerprints.clear();
|
|
4874
4988
|
this.render();
|
|
4875
4989
|
}
|
|
4876
4990
|
}
|
|
@@ -5257,8 +5371,49 @@ var UiGridStandaloneElement = class extends HTMLElement {
|
|
|
5257
5371
|
cancelAnimationFrame(this.scrollFrame);
|
|
5258
5372
|
this.scrollFrame = null;
|
|
5259
5373
|
}
|
|
5374
|
+
this.controller?.setBenchmarkHandler(null);
|
|
5260
5375
|
this.frameworkSlots.flushRemovals();
|
|
5261
5376
|
}
|
|
5377
|
+
benchmarkRender(iterations) {
|
|
5378
|
+
const controller = this.controller;
|
|
5379
|
+
const snapshot = this.snapshot;
|
|
5380
|
+
if (!controller || !snapshot) {
|
|
5381
|
+
return Promise.resolve({
|
|
5382
|
+
iterations: 0,
|
|
5383
|
+
totalMs: 0,
|
|
5384
|
+
averageMs: 0,
|
|
5385
|
+
visibleRows: 0,
|
|
5386
|
+
renderedItems: 0
|
|
5387
|
+
});
|
|
5388
|
+
}
|
|
5389
|
+
const now = () => typeof performance === "undefined" ? Date.now() : performance.now();
|
|
5390
|
+
const nextFrame = () => new Promise((resolve) => {
|
|
5391
|
+
if (typeof requestAnimationFrame === "undefined") {
|
|
5392
|
+
setTimeout(resolve, 0);
|
|
5393
|
+
return;
|
|
5394
|
+
}
|
|
5395
|
+
requestAnimationFrame(() => resolve());
|
|
5396
|
+
});
|
|
5397
|
+
const loops = Math.max(1, iterations ?? controller.getOptions().benchmark?.iterations ?? 25);
|
|
5398
|
+
return (async () => {
|
|
5399
|
+
const started = now();
|
|
5400
|
+
for (let index = 0; index < loops; index += 1) {
|
|
5401
|
+
this.render();
|
|
5402
|
+
await nextFrame();
|
|
5403
|
+
}
|
|
5404
|
+
const currentSnapshot = this.snapshot ?? snapshot;
|
|
5405
|
+
const totalMs = now() - started;
|
|
5406
|
+
const result = {
|
|
5407
|
+
iterations: loops,
|
|
5408
|
+
totalMs,
|
|
5409
|
+
averageMs: totalMs / loops,
|
|
5410
|
+
visibleRows: currentSnapshot.pipeline.visibleRows.length,
|
|
5411
|
+
renderedItems: currentSnapshot.pipeline.displayItems.length
|
|
5412
|
+
};
|
|
5413
|
+
controller.gridApi.core.raise.benchmarkComplete(result);
|
|
5414
|
+
return result;
|
|
5415
|
+
})();
|
|
5416
|
+
}
|
|
5262
5417
|
/** @internal */
|
|
5263
5418
|
ensureShadowRoot() {
|
|
5264
5419
|
if (!this.shadowRoot) {
|
|
@@ -5269,6 +5424,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
|
|
|
5269
5424
|
/** @internal */
|
|
5270
5425
|
ensureController(options) {
|
|
5271
5426
|
if (this.controller) {
|
|
5427
|
+
this.controller.setBenchmarkHandler((iterations) => this.benchmarkRender(iterations));
|
|
5272
5428
|
if (this.clientWidth > 0) {
|
|
5273
5429
|
this.controller.setViewportWidth(this.clientWidth);
|
|
5274
5430
|
}
|
|
@@ -5276,6 +5432,7 @@ var UiGridStandaloneElement = class extends HTMLElement {
|
|
|
5276
5432
|
return;
|
|
5277
5433
|
}
|
|
5278
5434
|
this.controller = createVanillaGridController(options);
|
|
5435
|
+
this.controller.setBenchmarkHandler((iterations) => this.benchmarkRender(iterations));
|
|
5279
5436
|
if (this.clientWidth > 0) {
|
|
5280
5437
|
this.controller.setViewportWidth(this.clientWidth);
|
|
5281
5438
|
}
|
|
@@ -5437,6 +5594,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
|
|
|
5437
5594
|
if (!snapshot) {
|
|
5438
5595
|
this.lastStructureKey = null;
|
|
5439
5596
|
this.lastItemsFingerprint = null;
|
|
5597
|
+
this.lastRowStateFingerprints.clear();
|
|
5598
|
+
this.lastEditingCellKey = null;
|
|
5599
|
+
this.lastFocusedCellKey = null;
|
|
5440
5600
|
emptyTemplate({ message: "No grid options provided." }).connect(root);
|
|
5441
5601
|
return;
|
|
5442
5602
|
}
|
|
@@ -5647,6 +5807,9 @@ var UiGridStandaloneElement = class extends HTMLElement {
|
|
|
5647
5807
|
this.lastItemsFingerprint = this.fingerprintItems(plan.itemsToRender);
|
|
5648
5808
|
this.lastVirtualOffset = plan.virtualOffset;
|
|
5649
5809
|
this.lastTotalVirtualHeight = plan.totalVirtualHeight;
|
|
5810
|
+
this.lastRowStateFingerprints.clear();
|
|
5811
|
+
this.lastEditingCellKey = this.controller?.getEditingCellKey() ?? null;
|
|
5812
|
+
this.lastFocusedCellKey = this.focusedCell ? `${this.focusedCell.rowId} ${this.focusedCell.columnName}` : null;
|
|
5650
5813
|
}
|
|
5651
5814
|
renderPatch(plan, root) {
|
|
5652
5815
|
renderPatch(this, plan, root);
|
|
@@ -5859,15 +6022,13 @@ async function defineStandaloneUiGridElement(tagName = "ui-grid-element") {
|
|
|
5859
6022
|
// src/index.ts
|
|
5860
6023
|
async function registerVanillaUiGridRustModule(module, input) {
|
|
5861
6024
|
await module.default(input);
|
|
5862
|
-
registerRustWasmGridEngine({
|
|
5863
|
-
buildPipeline(context) {
|
|
5864
|
-
return module.build_pipeline_js(context);
|
|
5865
|
-
}
|
|
5866
|
-
});
|
|
5867
6025
|
}
|
|
5868
6026
|
async function mountVanillaUiGrid(target, options, rustModule, tagName = "ui-grid-element") {
|
|
5869
6027
|
if (rustModule) {
|
|
5870
|
-
|
|
6028
|
+
try {
|
|
6029
|
+
await registerVanillaUiGridRustModule(rustModule);
|
|
6030
|
+
} catch {
|
|
6031
|
+
}
|
|
5871
6032
|
}
|
|
5872
6033
|
await defineStandaloneUiGridElement(tagName);
|
|
5873
6034
|
const grid = document.createElement(tagName);
|