eru-grid 0.0.52 → 0.0.54

package/fesm2022/eru-grid.mjs

@@ -106,8 +106,9 @@ const INHERITED_FIELD_KEYS = [
     'is_hyp', 'hypl_nm',
     // Scales
     'start_value', 'end_value', 'emoji_value', 'is_perc',
-    // Attachment constraints
+    // Attachment constraints and destination
     'max_files', 'allowed_file_types', 'max_file_size',
+    'storage_name', 'folder_name', 'default_upload',
     // Phone
     'default_country',
     // Cardinality and picker behaviour
@@ -129,18 +130,54 @@ const INHERITED_FIELD_KEYS = [
  * multi-currency dataset, and how wide a date may be spelled — a dense report
  * wants 'dd-MM-yy' where a detail grid over the same field wants the model's.
  *
+ * `label` is here for the same reason: the model's name is the right default
+ * and the right thing to fall back to, but a narrow column, or one whose
+ * meaning is already obvious from its neighbours, often wants a shorter heading
+ * in this grid without renaming the field for every grid that maps it.
+ *
  * Kept INSIDE the inherited list rather than removed from it, because that list
  * is also what eru-studio's properties panel reads to show a bound field's real
  * value; dropping a key there would make the panel and the page disagree.
  */
 /**
- * Datatypes that describe how a column is DRAWN rather than what it holds.
- *
- * A composite shows other columns; a page renders a layout. The data model has
- * no such field type, so a mapped column keeps these instead of inheriting the
- * model's datatype over them (see buildMappedColumnPatch).
+ * The datatypes that used to encode a renderer, kept only to recognise columns
+ * saved that way. Nothing is offered these any more — see `cell_render`, which
+ * replaced them, and `normalizeCellRender`, which migrates them.
  */
 const PRESENTATION_DATATYPES = new Set(['composite', 'page']);
+/**
+ * A column's renderer, migrating the legacy encoding where it was a datatype.
+ *
+ * A column saved that way has already lost the datatype it held — there is
+ * nothing to recover here. A mapped one picks its real type back up from the
+ * data model on the next resolve; an unmapped one falls back to text, which is
+ * what its underlying value was being rendered as anyway.
+ */
+function normalizeCellRender(field) {
+    const explicit = field?.cell_render;
+    if (explicit === 'composite' || explicit === 'page' || explicit === 'default')
+        return explicit;
+    const legacy = String(field?.datatype ?? '');
+    return legacy === 'composite' || legacy === 'page' ? legacy : 'default';
+}
+/**
+ * The datatype that governs how a column's VALUE is formatted.
+ *
+ * Normally that is `datatype`, but a presentation type says how the column is
+ * drawn and not what it holds, so for those the real type comes from
+ * `presentation_base_datatype`. A composite's primary part is the composite
+ * column itself — without this it formatted as an untyped value and a date came
+ * out as its raw stored string.
+ */
+function effectiveValueDatatype(field) {
+    if (!field?.datatype)
+        return undefined;
+    const datatype = normalizeDatatype(field.datatype);
+    if (PRESENTATION_DATATYPES.has(datatype) && field.presentation_base_datatype) {
+        return normalizeDatatype(field.presentation_base_datatype);
+    }
+    return datatype;
+}
 /**
  * Datatypes that colour their own value from the data — a status pill, a
  * priority chip, a progress band.
@@ -157,7 +194,8 @@ const SELF_COLOURED_DATATYPES = new Set(['status', 'priority', 'tag', 'progress'
  */
 const ACTION_COLUMN_MIN_WIDTH = 56;
 const SEEDED_FIELD_KEYS = [
-    'dynamic_number', 'display_number_as', 'symbol_field', 'date_format',
+    'dynamic_number', 'display_number_as', 'symbol_field', 'date_format', 'label',
+    'storage_name', 'folder_name', 'default_upload',
 ];
 /**
  * Datatype aliases the data model emits that mean an existing DataTypes value.
@@ -736,8 +774,6 @@ const DATA_TYPES = [
     'tag',
     'rating',
     'website',
-    'composite',
-    'page',
 ];
 /**
  * Colour tokens a grid column may pick, mirroring eru-studio's picker but over
@@ -974,12 +1010,108 @@ function formatNumberValue(value, cfg, options) {
         maximumFractionDigits: decimalPlaces,
     })}`;
 }
+/**
+ * The canonical stored form of a date: `yyyy-MM-dd`, in LOCAL time.
+ *
+ * Built from the local getters rather than `toISOString()`, which converts to
+ * UTC and would move a date picked late in the day to the next (or previous)
+ * one. This is the shape a value is stored in, whatever pattern the column
+ * chooses to display it under, and it matches eru-studio's date component.
+ */
+function toDateOnlyString(date) {
+    if (!date || isNaN(date.getTime()))
+        return '';
+    const pad = (n) => (n < 10 ? `0${n}` : String(n));
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+/**
+ * The canonical stored form of a datetime: `yyyy-MM-dd HH:mm:ss`, in LOCAL
+ * time — the date-only form plus a 24-hour clock, with seconds always present
+ * so the stored shape does not depend on the display pattern.
+ */
+function toDateTimeString(date) {
+    if (!date || isNaN(date.getTime()))
+        return '';
+    const pad = (n) => (n < 10 ? `0${n}` : String(n));
+    return `${toDateOnlyString(date)} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
+/**
+ * Render a datetime with a token pattern (`dd-MMM-yyyy hh:mm:ss`).
+ *
+ * The date half goes through formatDateWithPattern, so `MMM` yields a month
+ * name — the datetime cell used to build its own numeric date string and had no
+ * `MMM` branch at all, which is why picking DD-MMM-YYYY HH:MM:SS still rendered
+ * digits. The time half is 24-hour, with seconds only when the pattern asks.
+ */
+function formatDateTimeWithPattern(date, pattern) {
+    if (!date || isNaN(date.getTime()))
+        return '';
+    const normalized = normalizeDateTimeFormat(pattern) || 'dd-MM-yyyy hh:mm';
+    const timeAt = normalized.toLowerCase().indexOf('hh');
+    const datePart = timeAt === -1 ? normalized : normalized.slice(0, timeAt).trimEnd();
+    const timePart = timeAt === -1 ? '' : normalized.slice(timeAt).toLowerCase();
+    const dateText = formatDateWithPattern(date, datePart);
+    if (!timePart)
+        return dateText;
+    const pad = (n) => (n < 10 ? `0${n}` : String(n));
+    const time = timePart.includes('ss')
+        ? `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+        : `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+    return `${dateText} ${time}`;
+}
+/**
+ * Best-effort parse of a stored datetime value, keeping the time.
+ *
+ * Distinct from parseCellDate, which deliberately pins a bare ISO date to local
+ * midnight so a date column never shifts a day across timezones — correct
+ * there, but it threw the clock away, so a datetime column could never show
+ * anything but 00:00.
+ *
+ * An ISO timestamp is tried first and handed to the platform parser: it is
+ * unambiguous, it carries an offset, and letting a `dd-MM-yyyy` column pattern
+ * see it first would read `2026-09-05` as day 2026. A timestamp with an offset
+ * (`...Z`) therefore reads back as the local wall-clock time of that instant.
+ */
+function parseCellDateTime(value, pattern) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    if (value instanceof Date)
+        return isNaN(value.getTime()) ? null : value;
+    const text = String(value).trim();
+    if (/^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/.test(text)) {
+        const iso = new Date(text);
+        if (!isNaN(iso.getTime()))
+            return iso;
+    }
+    if (pattern) {
+        // Split the stored value the same way the pattern is split: date half,
+        // then a HH:mm[:ss] time half.
+        const bits = text.split(/\s+/);
+        const normalized = normalizeDateTimeFormat(pattern);
+        const timeAt = normalized.toLowerCase().indexOf('hh');
+        const datePattern = timeAt === -1 ? normalized : normalized.slice(0, timeAt).trimEnd();
+        // A date pattern may itself contain spaces (`dd MMM yyyy`), so the time is
+        // the last segment when it looks like a clock, and the date is the rest.
+        const hasTime = bits.length > 1 && /^\d{1,2}:\d{2}(:\d{2})?$/.test(bits[bits.length - 1]);
+        const datePart = (hasTime ? bits.slice(0, -1) : bits).join(' ');
+        const date = parseDateWithPattern(datePart, datePattern);
+        if (date) {
+            if (hasTime) {
+                const [h, m, sec = 0] = bits[bits.length - 1].split(':').map(Number);
+                date.setHours(h || 0, m || 0, sec || 0, 0);
+            }
+            return date;
+        }
+    }
+    const parsed = new Date(text);
+    return isNaN(parsed.getTime()) ? null : parsed;
+}
 /**
  * Best-effort parse of a stored date value, trying the column's own pattern
  * before falling back to ISO and then the platform parser. Returns null rather
  * than an Invalid Date so callers can render an empty cell.
  */
-function parseCellDate(value, pattern) {
+function parseCellDate(value, pattern, keepTime = false) {
     if (value === null || value === undefined || value === '')
         return null;
     if (value instanceof Date)
@@ -990,9 +1122,22 @@ function parseCellDate(value, pattern) {
         if (viaPattern)
             return viaPattern;
     }
-    const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(text);
-    if (iso)
-        return new Date(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]));
+    // `keepTime` is off by default so a date field, and the before/after rules,
+    // keep comparing at midnight the way they always have. A datetime asks for it:
+    // this branch used to capture the calendar part alone, so every ISO timestamp
+    // came back at 00:00 and formatCellValue printed that as the time — a
+    // composite's 10:16 part read "00:00" while the same field read correctly in
+    // its own column.
+    //
+    // The components are taken literally rather than through Date's own ISO
+    // handling, which would shift a `Z` value into the viewer's zone and could
+    // land it on a different day than the one the value spells out.
+    const iso = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/.exec(text);
+    if (iso) {
+        return keepTime
+            ? new Date(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]), Number(iso[4] ?? 0), Number(iso[5] ?? 0), Number(iso[6] ?? 0))
+            : new Date(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]));
+    }
     const parsed = new Date(text);
     return isNaN(parsed.getTime()) ? null : parsed;
 }
@@ -1007,7 +1152,7 @@ function parseCellDate(value, pattern) {
 function formatCellValue(value, field) {
     if (value === null || value === undefined || value === '')
         return '';
-    const datatype = field?.datatype ? normalizeDatatype(field.datatype) : undefined;
+    const datatype = effectiveValueDatatype(field);
     switch (datatype) {
         case 'number':
             return formatNumberValue(value, field);
@@ -1021,7 +1166,7 @@ function formatCellValue(value, field) {
         case 'datetime': {
             const pattern = normalizeDateTimeFormat(field?.date_format) || 'dd-MM-yyyy hh:mm';
             const datePart = pattern.split(/\s+(?=hh)/i)[0];
-            const date = parseCellDate(value, datePart);
+            const date = parseCellDate(value, datePart, true);
             if (!date)
                 return String(value);
             const pad = (n) => (n < 10 ? `0${n}` : String(n));
@@ -1143,7 +1288,10 @@ class PivotTransformService {
         const enableColumnSubtotals = gridConfiguration?.config?.enableColumnSubtotals ?? false;
         const enableGrandTotal = gridConfiguration?.config?.enableGrandTotal ?? false;
         const enableColumnGrandTotal = gridConfiguration?.config?.enableColumnGrandTotal ?? false;
-        if (enableRowSubtotals || enableColumnSubtotals || enableGrandTotal || enableColumnGrandTotal) {
+        // Nothing to total when there are no rows — a grand total of an empty set
+        // would render a row of zeros under a result that has no data.
+        if (pivotRows.length > 0 &&
+            (enableRowSubtotals || enableColumnSubtotals || enableGrandTotal || enableColumnGrandTotal)) {
             pivotRows = this.addSubtotals(pivotRows, configuration, pivotColumns, gridConfiguration, sourceData);
         }
         // Step 5: Generate column definitions (including subtotal columns)
@@ -3696,6 +3844,17 @@ const NULL_GROUP_KEY = '__NULL_GROUP__';
 function toGroupKey(groupId) {
     return groupId === null || groupId === undefined ? NULL_GROUP_KEY : groupId;
 }
+/**
+ * The id a row is selected by. Entity rows carry `entity_id`; array/query rows
+ * that were given a synthetic key carry `id`. Every read and write of the
+ * selection set must go through this — the checkbox used to store `row.id`
+ * while the checked-state read `row.entity_id`, so ticking an entity row put
+ * `undefined` in the set and the box never rendered checked.
+ */
+function rowSelectionKey(row) {
+    const id = row?.entity_id ?? row?.id;
+    return id === null || id === undefined ? '' : String(id);
+}
 class EruGridStore {
     // Inject services
     gridConfigService = inject(GridConfigService);
@@ -3707,6 +3866,11 @@ class EruGridStore {
     _rows = signal([], ...(ngDevMode ? [{ debugName: "_rows" }] : []));
     _groupRows = signal(new Map(), ...(ngDevMode ? [{ debugName: "_groupRows" }] : []));
     _selectedRowIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "_selectedRowIds" }] : []));
+    // "All N matching records are selected", the second stage of the header
+    // checkbox. The grid only ever holds the pages it has loaded, so this flag is
+    // the only way to say the user meant the whole result set: consumers send
+    // their filter criteria instead of the id list when it is set.
+    _selectAllMatching = signal(false, ...(ngDevMode ? [{ debugName: "_selectAllMatching" }] : []));
     // The single "active" board card (last clicked) — stored by row-object
     // reference so it works for any data source (entity rows have entity_id,
     // query rows may not). Drives the board-card selected-state highlight;
@@ -3735,6 +3899,11 @@ class EruGridStore {
     // Pivot-specific signals
     _pivotConfiguration = signal(null, ...(ngDevMode ? [{ debugName: "_pivotConfiguration" }] : []));
     _pivotResult = signal(null, ...(ngDevMode ? [{ debugName: "_pivotResult" }] : []));
+    /**
+     * Widths for generated pivot leaves that have no field to hold them.
+     * Keyed by leaf name — see updateColumnWidth.
+     */
+    _pivotLeafWidths = signal(new Map(), ...(ngDevMode ? [{ debugName: "_pivotLeafWidths" }] : []));
     _drilldown = signal(null, ...(ngDevMode ? [{ debugName: "_drilldown" }] : []));
     _actionClick = signal(null, ...(ngDevMode ? [{ debugName: "_actionClick" }] : []));
     _columnResize = signal(null, ...(ngDevMode ? [{ debugName: "_columnResize" }] : []));
@@ -3813,6 +3982,7 @@ class EruGridStore {
         return result;
     }, ...(ngDevMode ? [{ debugName: "groupRowsSummary" }] : []));
     selectedRowIds = this._selectedRowIds.asReadonly();
+    selectAllMatching = this._selectAllMatching.asReadonly();
     activeBoardRow = this._activeBoardRow.asReadonly();
     configuration = this._configuration.asReadonly();
     isLoading = this._isLoading.asReadonly();
@@ -3823,6 +3993,7 @@ class EruGridStore {
     // Pivot-specific readonly signals
     pivotConfiguration = this._pivotConfiguration.asReadonly();
     pivotResult = this._pivotResult.asReadonly();
+    pivotLeafWidths = this._pivotLeafWidths.asReadonly();
     drilldown = this._drilldown.asReadonly();
     actionClick = this._actionClick.asReadonly();
     columnResize = this._columnResize.asReadonly();
@@ -3838,7 +4009,35 @@ class EruGridStore {
     // Excel-download request readonly signal (exposed to consumers)
     excelDownloadRequest = this._excelDownloadRequest.asReadonly();
     // Computed properties
-    selectedRows = computed(() => this.rows().filter(row => this.selectedRowIds().has(row.entity_id)), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    /**
+     * Every row currently in memory that can be selected, deduped by selection key.
+     *
+     * Selection has to read both row stores: `_rows` is only populated when the
+     * consumer mirrors data in via setRows()/addRows(), while the grouped,
+     * server-paginated renderer fills `_groupRows` through addRowsForGroup(). The
+     * select-all handler read `rows()` alone, which is empty in the normal paged
+     * path — so select-all was a no-op there.
+     */
+    selectableRows = computed(() => {
+        const seen = new Set();
+        const out = [];
+        const push = (row) => {
+            const id = rowSelectionKey(row);
+            if (!id || seen.has(id))
+                return;
+            seen.add(id);
+            out.push(row);
+        };
+        this.rows().forEach(push);
+        this.groupRows().forEach(rows => rows.forEach(push));
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "selectableRows" }] : []));
+    selectedRows = computed(() => this.selectableRows().filter(row => this.selectedRowIds().has(rowSelectionKey(row))), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    /**
+     * How many records the current groups say exist server-side, loaded or not.
+     * This is the "all N matching" number the select-all banner offers.
+     */
+    totalMatchingCount = computed(() => this.groups().reduce((sum, group) => sum + (group.totalRowCount || 0), 0), ...(ngDevMode ? [{ debugName: "totalMatchingCount" }] : []));
     totalSelectedCount = computed(() => this.selectedRowIds().size, ...(ngDevMode ? [{ debugName: "totalSelectedCount" }] : []));
     hasSelection = computed(() => this.selectedRowIds().size > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
     expandedGroups = computed(() => this.groups().filter(group => group.isExpanded), ...(ngDevMode ? [{ debugName: "expandedGroups" }] : []));
@@ -3926,7 +4125,14 @@ class EruGridStore {
             // Resolve data-model datatype aliases (r_status -> status) once here, so
             // every downstream switch, validator and design-panel lookup sees the
             // canonical value.
-            datatype: normalizeDatatype(column.datatype),
+            datatype: normalizeDatatype(
+            // A column saved under the old encoding carries 'composite'/'page' in
+            // the datatype slot. normalizeCellRender has just read the renderer off
+            // it; leaving the value there would keep it out of every datatype
+            // switch, so it falls back to text. A mapped column overwrites this
+            // with its real type on the next resolve.
+            PRESENTATION_DATATYPES.has(String(column.datatype)) ? 'textbox' : column.datatype),
+            cell_render: normalizeCellRender(column),
             field_size: this.columnConstraintsService.getDefaultFieldSize(column, config)
         }));
         // Sort columns by grid_index to ensure proper order in table mode
@@ -4018,6 +4224,28 @@ class EruGridStore {
     getConfiguration() {
         return this.configuration();
     }
+    /**
+     * Reorder by column name rather than by rendered position.
+     *
+     * The header renders `displayColumns` — `columns()` minus the hidden columns
+     * and minus the group-by field — so the `$index` of a header cell is not the
+     * index of that column in `_columns`. Passing the rendered index straight to
+     * `reorderColumns` moved whichever column occupied that slot in the full
+     * list, which is why dragging a column near the end appeared to move its
+     * neighbour instead. Names survive every filter, so resolve them here.
+     */
+    reorderColumnsByName(fromName, toName) {
+        const currentColumns = this.columns();
+        const fromIndex = currentColumns.findIndex(col => col.name === fromName);
+        const toIndex = currentColumns.findIndex(col => col.name === toName);
+        // Pivot mode renders generated column definitions that do not exist in
+        // `_columns`; there is nothing to reorder in that case.
+        if (fromIndex === -1 || toIndex === -1) {
+            console.error('Unknown column in reorder', { fromName, toName });
+            return;
+        }
+        this.reorderColumns(fromIndex, toIndex);
+    }
     reorderColumns(fromIndex, toIndex) {
         const currentColumns = [...this.columns()];
         if (fromIndex < 0 || fromIndex >= currentColumns.length ||
@@ -4182,8 +4410,20 @@ class EruGridStore {
             });
             return;
         }
-        const columns = this.columns().map(col => col.name === owner ? { ...col, field_size: field_size } : col);
-        this._columns.set(columns);
+        const columns = this.columns();
+        if (!columns.some(col => col.name === owner)) {
+            // A pivot dimension the grid has no column for — the author put a field
+            // in the pivot's rows that is not in the column set. There is no owner to
+            // hold the width, so it is held against the leaf name. Without this the
+            // resize reached the cells (the directive styles them directly) but
+            // nothing else: the next change detection re-asserted the old width, and
+            // the table total, which is summed from the leaves, never moved.
+            const next = new Map(this._pivotLeafWidths());
+            next.set(owner, field_size);
+            this._pivotLeafWidths.set(next);
+            return;
+        }
+        this._columns.set(columns.map(col => (col.name === owner ? { ...col, field_size: field_size } : col)));
     }
     setCellValueChange(change) {
         this._cellValueChange.set(change);
@@ -4289,18 +4529,35 @@ class EruGridStore {
     }
     selectAllRowsInGroup(groupId) {
         const selectedRowIds = new Set(this.selectedRowIds());
-        const groupRows = this.getRowsForGroup(groupId);
-        groupRows.forEach(row => selectedRowIds.add(row.entity_id));
+        this.getRowsForGroup(groupId).forEach(row => {
+            const id = rowSelectionKey(row);
+            if (id)
+                selectedRowIds.add(id);
+        });
         this._selectedRowIds.set(selectedRowIds);
     }
     deselectAllRowsInGroup(groupId) {
         const selectedRowIds = new Set(this.selectedRowIds());
-        const groupRows = this.getRowsForGroup(groupId);
-        groupRows.forEach(row => selectedRowIds.delete(row.entity_id));
+        this.getRowsForGroup(groupId).forEach(row => selectedRowIds.delete(rowSelectionKey(row)));
+        this._selectedRowIds.set(selectedRowIds);
+    }
+    /** Select every row loaded so far, across all groups. Stage one of select-all. */
+    selectAllLoadedRows() {
+        const selectedRowIds = new Set(this.selectedRowIds());
+        this.selectableRows().forEach(row => selectedRowIds.add(rowSelectionKey(row)));
         this._selectedRowIds.set(selectedRowIds);
     }
+    /**
+     * Stage two of select-all: the user accepted "select all N matching". The set
+     * of ids is left as-is (it still only holds what is loaded) — the flag is what
+     * tells the consumer to act on the filter rather than on the ids.
+     */
+    setSelectAllMatching(value) {
+        this._selectAllMatching.set(value);
+    }
     clearSelection() {
         this._selectedRowIds.set(new Set());
+        this._selectAllMatching.set(false);
     }
     // Configuration methods
     setConfiguration(configuration) {
@@ -4411,7 +4668,7 @@ class EruGridStore {
     isGroupSelected(groupId) {
         const groupRows = this.getRowsForGroup(groupId);
         return groupRows.length > 0 &&
-            groupRows.every(row => this.selectedRowIds().has(row.entity_id));
+            groupRows.every(row => this.selectedRowIds().has(rowSelectionKey(row)));
     }
     getRowsForGroup(groupId) {
         const key = toGroupKey(groupId);
@@ -4483,9 +4740,18 @@ class EruGridStore {
             this._groupRows().forEach(rows => allGroupRows.push(...rows));
             sourceData = allGroupRows;
         }
-        if (!pivotConfig || sourceData.length === 0) {
+        if (!pivotConfig)
             return;
-        }
+        // No source rows still goes through the transform, producing a pivot with
+        // the row-dimension columns and no data rows.
+        //
+        // Two things this must NOT do. Bailing out leaves the previous filter's
+        // rows and subtotals on screen, since the pivot view reads _pivotResult and
+        // not the row stores that were already cleared. Publishing null empties it
+        // but drops the pivot's own column definitions, so displayColumns() falls
+        // back to the raw source columns and an empty pivot reads as a table. The
+        // transform on an empty set yields neither: column values and measures
+        // cannot be derived from nothing, so only the row dimensions remain.
         this.setLoading(true);
         this.setError(null);
         try {
@@ -4759,6 +5025,15 @@ class EruGridStore {
     }
     resetGroupRows() {
         this._groupRows.set(new Map());
+        // A fresh data set invalidates the selection: the ids may not exist under
+        // the new filter/grouping, and an "all N matching" claim was made against
+        // the criteria that just changed. Paging does NOT come through here — it
+        // appends via addRowsForGroup — so a selection still survives scrolling.
+        this.clearSelection();
+        // In pivot mode the view renders from _pivotResult, not from the row
+        // stores, so clearing the rows alone left the old pivot on screen.
+        if (this.isPivotMode())
+            this.transformToPivot();
     }
     /**
      * Add rows for a specific group (called by consumer with API data)
@@ -5089,6 +5364,22 @@ class EruGridService {
     get hasSelection() {
         return this.eruGridStore.hasSelection;
     }
+    get selectedRows() {
+        return this.eruGridStore.selectedRows;
+    }
+    get totalSelectedCount() {
+        return this.eruGridStore.totalSelectedCount;
+    }
+    /** True once the user accepted "select all N matching" — act on the filter, not the ids. */
+    get selectAllMatching() {
+        return this.eruGridStore.selectAllMatching;
+    }
+    get totalMatchingCount() {
+        return this.eruGridStore.totalMatchingCount;
+    }
+    clearSelection() {
+        this.eruGridStore.clearSelection();
+    }
     // Theme management
     get theme() {
         return this.themeService;
@@ -5563,21 +5854,25 @@ class CurrencyComponent {
     }
     onBlur() {
         const value = this.currentValue();
-        const numValue = Number(value);
-        const cfg = this.config();
-        const validation = this.validateField(numValue);
+        // Number('') and Number(null) are both 0, so treating a blank as a number
+        // would emit 0 out of every empty cell the user tabs through. Validation
+        // still runs on NaN, so a mandatory blank is caught.
+        const isBlank = value === null || value === undefined || value === '';
+        const numValue = isBlank ? NaN : Number(value);
+        // Blank goes to validation as-is: it is an empty cell, not the unparseable
+        // number NaN would report it as.
+        const validation = this.validateField(isBlank ? value : numValue);
         if (!validation.isValid && validation.error) {
             this.error.set(validation.error);
             this.validationError.emit(validation.error);
+            return;
         }
-        else {
-            this.error.set('');
-            // Force decimal places as specified in config
-            const decimalPlaces = cfg?.decimal ?? 2;
-            const formattedValue = parseFloat(numValue.toFixed(decimalPlaces));
-            this.currentValue.set(formattedValue);
-            this.blur.emit(formattedValue);
-        }
+        this.error.set('');
+        // `decimal` is DISPLAY precision — the view branch applies it through
+        // formatNumberSignal. Rounding here put the rounded number back into
+        // currentValue, which is the value the cell SAVES, so 10.5 in a 0-decimal
+        // column became 11 for good after any edit.
+        this.blur.emit(isBlank ? null : numValue);
     }
     onValueChange(event) {
         this.currentValue.set(event);
@@ -5706,21 +6001,25 @@ class NumberComponent {
     }
     onBlur() {
         const value = this.currentValue();
-        const numValue = Number(value);
-        const cfg = this.config();
-        const validation = this.validateField(numValue);
+        // Number('') and Number(null) are both 0, so treating a blank as a number
+        // would emit 0 out of every empty cell the user tabs through. Validation
+        // still runs on NaN, so a mandatory blank is caught.
+        const isBlank = value === null || value === undefined || value === '';
+        const numValue = isBlank ? NaN : Number(value);
+        // Blank goes to validation as-is: it is an empty cell, not the unparseable
+        // number NaN would report it as.
+        const validation = this.validateField(isBlank ? value : numValue);
         if (!validation.isValid && validation.error) {
             this.error.set(validation.error);
             this.validationError.emit(validation.error);
+            return;
         }
-        else {
-            this.error.set('');
-            // Force decimal places as specified in config
-            const decimalPlaces = cfg?.decimal ?? 2;
-            const formattedValue = parseFloat(numValue.toFixed(decimalPlaces));
-            this.currentValue.set(formattedValue);
-            this.blur.emit(formattedValue);
-        }
+        this.error.set('');
+        // `decimal` is DISPLAY precision — the view branch applies it through
+        // formatNumberSignal. Rounding here put the rounded number back into
+        // currentValue, which is the value the cell SAVES, so 10.5 in a 0-decimal
+        // column became 11 for good after any edit.
+        this.blur.emit(isBlank ? null : numValue);
     }
     onValueChange(event) {
         this.currentValue.set(event);
@@ -7101,14 +7400,22 @@ class DateComponent {
     }
     onDateChange(date) {
         this.currentValue.set(date ? new Date(date) : null);
-        const formattedDate = date ? this.formatDate(date) : '';
-        this.valueChange.emit(formattedDate);
-        this.dateChange.emit(formattedDate);
+        // The canonical `yyyy-MM-dd`, NOT the column's display pattern. Emitting
+        // the pattern stored '05-Sep-2026' as the value, so the stored shape
+        // changed on every edit and re-reading it depended on the column still
+        // carrying the pattern it was written under. eru-studio's date component
+        // canonicalises the same way (storeValueFor -> toDateOnlyString).
+        const stored = date ? toDateOnlyString(date) : '';
+        this.valueChange.emit(stored);
+        this.dateChange.emit(stored);
     }
     onDrillableClick(event) {
         if (this.isDrillable()) {
             event.stopPropagation();
-            this.drilldownClick.emit(this.getDisplayValue());
+            // The stored value, not the formatted text — a consumer turns a drill
+            // into a filter, and '05-Sep-2026' matches nothing server-side.
+            const value = this.currentValue();
+            this.drilldownClick.emit(value instanceof Date ? toDateOnlyString(value) : (value ?? ''));
         }
     }
     /** Render a date in the column's configured format, via the shared token
@@ -7327,12 +7634,15 @@ class DatetimeComponent {
         effect(() => {
             const value = this.value();
             if (typeof value === 'string' && value) {
-                // Parse datetime string (dd-MM-yyyy HH:mm format)
-                const parsed = this.parseDateTimeString(value);
+                // Any stored shape: the column's own pattern, or an ISO timestamp
+                // straight from the server (`2026-09-05T07:35:40.265175Z`), which the
+                // old whitespace-splitting parser could not read at all — it returned
+                // null and the raw string was rendered verbatim.
+                const parsed = parseCellDateTime(value, this.dtFormat());
                 if (parsed) {
-                    this.selectedDate.set(parsed.date);
-                    this.selectedTime.set(parsed.time);
-                    this.currentValue.set(parsed.date);
+                    this.selectedDate.set(parsed);
+                    this.selectedTime.set(this.formatTime(parsed));
+                    this.currentValue.set(parsed);
                 }
                 else {
                     this.currentValue.set(value);
@@ -7405,29 +7715,26 @@ class DatetimeComponent {
             this.drilldownClick.emit(value);
         }
     }
-    // Column-configured format, e.g. 'dd-mm-yyyy hh:mm:ss'. `date_format` is the
+    // Column-configured format, e.g. 'dd-MMM-yyyy hh:mm:ss'. `date_format` is the
     // key the data model actually persists the datetime pattern under;
-    // `dateTimeFormat` is the legacy alias. Lowercased because the model
-    // uppercases the value on save. Defaults to dd-mm-yyyy hh:mm:ss.
+    // `dateTimeFormat` is the legacy alias. Normalised rather than lowercased —
+    // the model uppercases on save, and lowercasing collapsed `MMM` into `mmm`,
+    // erasing the month-name/minute distinction the token casing carries.
     dtFormat = computed(() => {
         const cfg = this.config();
-        return String(cfg?.date_format || cfg?.dateTimeFormat || 'dd-mm-yyyy hh:mm:ss').toLowerCase();
+        return normalizeDateTimeFormat(cfg?.date_format || cfg?.dateTimeFormat) || 'dd-MM-yyyy hh:mm:ss';
     }, ...(ngDevMode ? [{ debugName: "dtFormat" }] : []));
+    /**
+     * The canonical stored form of an edit: `yyyy-MM-dd HH:mm:ss`.
+     *
+     * It used to be built from the DISPLAY pattern, which made the stored shape
+     * depend on how the column happened to be formatted and dropped the seconds
+     * whenever the pattern had no `ss` — so editing a server timestamp under a
+     * `hh:mm` pattern silently truncated it. Display goes through
+     * formatDateTimeWithPattern; storage is always this one shape.
+     */
     formatDateTime(date) {
-        if (!date)
-            return '';
-        const pad = (n) => n < 10 ? '0' + n : n.toString();
-        const dd = pad(date.getDate());
-        const mm = pad(date.getMonth() + 1);
-        const yyyy = date.getFullYear().toString();
-        const fmt = this.dtFormat();
-        const datePart = fmt.startsWith('mm-dd') ? `${mm}-${dd}-${yyyy}`
-            : fmt.startsWith('yyyy') ? `${yyyy}-${mm}-${dd}`
-                : `${dd}-${mm}-${yyyy}`;
-        const hh = pad(date.getHours());
-        const min = pad(date.getMinutes());
-        const timePart = fmt.includes('ss') ? `${hh}:${min}:${pad(date.getSeconds())}` : `${hh}:${min}`;
-        return `${datePart} ${timePart}`;
+        return toDateTimeString(date);
     }
     formatTime(date) {
         const hours = date.getHours();
@@ -7435,49 +7742,20 @@ class DatetimeComponent {
         const pad = (n) => n < 10 ? '0' + n : n.toString();
         return `${pad(hours)}:${pad(minutes)}`;
     }
-    parseDateTimeString(dateTimeString) {
-        // Tolerant parse: accepts any supported date order (year located by its
-        // 4-digit segment) and a HH:mm or HH:mm:ss time part.
-        const parts = dateTimeString.trim().split(/\s+/);
-        if (parts.length < 2)
-            return null;
-        const dateParts = parts[0].split('-');
-        const timePart = parts[1];
-        if (dateParts.length !== 3)
-            return null;
-        const nums = dateParts.map(p => parseInt(p, 10));
-        if (nums.some(isNaN))
-            return null;
-        const yearIdx = dateParts.findIndex(p => p.length === 4);
-        let year, month, day;
-        if (yearIdx === 0) {
-            [year, month, day] = [nums[0], nums[1] - 1, nums[2]];
-        }
-        else if (this.dtFormat().startsWith('mm-dd')) {
-            [month, day, year] = [nums[0] - 1, nums[1], nums[2]];
-        }
-        else {
-            [day, month, year] = [nums[0], nums[1] - 1, nums[2]];
-        }
-        const timeBits = timePart.split(':').map(t => parseInt(t, 10));
-        if (timeBits.length < 2 || timeBits.some(isNaN))
-            return null;
-        const [hours, minutes, seconds = 0] = timeBits;
-        const date = new Date(year, month, day, hours, minutes, seconds);
-        if (date.getDate() === day && date.getMonth() === month && date.getFullYear() === year) {
-            const pad = (n) => n < 10 ? '0' + n : n.toString();
-            return { date, time: `${pad(hours)}:${pad(minutes)}` };
-        }
-        return null;
-    }
+    /**
+     * Seconds are carried through when the time string has them. The picker only
+     * offers HH:mm, so an untouched value keeps the seconds it arrived with
+     * rather than being silently zeroed on a date-only change.
+     */
     combineDateAndTime(date, time) {
         const timeParts = time.split(':');
         const hours = parseInt(timeParts[0], 10) || 0;
         const minutes = parseInt(timeParts[1], 10) || 0;
+        const seconds = timeParts.length > 2 ? (parseInt(timeParts[2], 10) || 0) : this.selectedDate()?.getSeconds() ?? 0;
         const combined = new Date(date);
         combined.setHours(hours);
         combined.setMinutes(minutes);
-        combined.setSeconds(0);
+        combined.setSeconds(seconds);
         combined.setMilliseconds(0);
         return combined;
     }
@@ -7488,10 +7766,14 @@ class DatetimeComponent {
         const val = this.currentValue();
         if (!val)
             return '';
-        if (typeof val === 'string')
-            return val;
-        if (val instanceof Date) {
-            return this.formatDateTime(val);
+        const pattern = this.dtFormat();
+        if (val instanceof Date)
+            return formatDateTimeWithPattern(val, pattern);
+        // A string only reaches here when it could not be parsed; show it as-is
+        // rather than an empty cell, so a bad stored value stays visible.
+        if (typeof val === 'string') {
+            const parsed = parseCellDateTime(val, pattern);
+            return parsed ? formatDateTimeWithPattern(parsed, pattern) : val;
         }
         return '';
     }
@@ -7589,22 +7871,44 @@ class DurationComponent {
         if (this.childOverlayOpen()) {
             return;
         }
-        const value = this.getCurrentValueInMinutes();
-        this.currentValue.set(value);
-        this.blur.emit(value);
-        this.isOverlayOpen.set(false);
-        this.editModeChange.emit(false);
+        this.commitAndClose();
     }
     onOverlayClick(event) {
         event.stopPropagation();
     }
     onBlur() {
+        this.commitAndClose();
+    }
+    /**
+     * Close the editor, emitting only when the duration actually changed.
+     *
+     * It used to emit unconditionally, and since the editor works in minutes that
+     * rewrote the stored representation on a no-op: a cell holding '02:30' became
+     * 150 merely by opening the overlay and dismissing it. Opening a cell is not
+     * an edit.
+     */
+    commitAndClose() {
         const value = this.getCurrentValueInMinutes();
-        this.currentValue.set(value);
-        this.blur.emit(value);
+        if (value !== this.storedMinutes()) {
+            this.currentValue.set(value);
+            this.blur.emit(value);
+        }
         this.isOverlayOpen.set(false);
         this.editModeChange.emit(false);
     }
+    /** The incoming value in minutes, for comparison against an edit. */
+    storedMinutes() {
+        const value = this.value();
+        if (value === null || value === undefined || value === '')
+            return null;
+        if (typeof value === 'number')
+            return value;
+        const text = String(value);
+        if (this.isTimeFormat(text))
+            return this.timeToMinutes(text);
+        const num = parseInt(text, 10);
+        return isNaN(num) ? null : num;
+    }
     onDrillableClick(event) {
         if (this.isDrillable()) {
             event.stopPropagation();
@@ -8097,7 +8401,29 @@ class ProgressComponent {
     editModeChange = new EventEmitter();
     // Internal state
     currentValue = signal(0, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
-    // Computed value that always returns a number (defaults to 0)
+    /** Configured scale, defaulting to the 0-100 percentage scale. */
+    scaleMin = computed(() => {
+        const v = Number(this.config()?.start_value);
+        return Number.isFinite(v) ? v : 0;
+    }, ...(ngDevMode ? [{ debugName: "scaleMin" }] : []));
+    scaleMax = computed(() => {
+        const v = Number(this.config()?.end_value);
+        return Number.isFinite(v) && v > this.scaleMin() ? v : 100;
+    }, ...(ngDevMode ? [{ debugName: "scaleMax" }] : []));
+    /**
+     * The value the slider edits — the raw stored number, only coerced when it is
+     * not a number at all.
+     *
+     * Deliberately NOT displayValue(): that clamps to the scale for the bar, and
+     * seeding the control with it meant a stored 150 opened the slider at 100 and
+     * the first drag wrote the clamp back as the real value.
+     */
+    editValue = computed(() => {
+        const val = this.currentValue();
+        const num = typeof val === 'number' ? val : Number(val);
+        return Number.isFinite(num) ? num : this.scaleMin();
+    }, ...(ngDevMode ? [{ debugName: "editValue" }] : []));
+    // Bar geometry only — clamped to the scale so the fill never overflows.
     displayValue = computed(() => {
         const val = this.currentValue();
         // Handle null, undefined, or invalid numbers - default to 0
@@ -8107,12 +8433,23 @@ class ProgressComponent {
         // Convert to number if needed
         const numVal = typeof val === 'number' ? val : Number(val);
         // Handle NaN or invalid numbers
-        if (isNaN(numVal) || numVal < 0) {
-            return 0;
+        if (isNaN(numVal)) {
+            return this.scaleMin();
         }
-        // Clamp between 0 and 100
-        return Math.max(0, Math.min(100, numVal));
+        // Clamp to the configured scale
+        return Math.max(this.scaleMin(), Math.min(this.scaleMax(), numVal));
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    /**
+     * Bar fill as a percentage of the configured scale. The bar's width is always
+     * 0-100% of its track, whatever units the column counts in — a 3 on a 0-5
+     * scale fills 60%, not 3%.
+     */
+    fillPercent = computed(() => {
+        const span = this.scaleMax() - this.scaleMin();
+        if (span <= 0)
+            return 0;
+        return ((this.displayValue() - this.scaleMin()) / span) * 100;
+    }, ...(ngDevMode ? [{ debugName: "fillPercent" }] : []));
     // Bar colour from the column's configured value ranges (e.g. 0-20 green).
     // Applies in both editable and view/disabled modes. Null when no range
     // matches, so the bar falls back to the default theme colour.
@@ -8141,24 +8478,18 @@ class ProgressComponent {
         // Sync signal-based input with internal state
         effect(() => {
             const value = this.value();
-            // Always set to 0 if null/undefined/NaN/invalid, otherwise use the value
-            if (value === null || value === undefined || isNaN(value) || value < 0) {
-                this.currentValue.set(0);
-            }
-            else {
-                this.currentValue.set(value);
-            }
+            // Only a non-number is coerced. A stored value outside the scale — a 150
+            // on a 0-100 column, or a negative — is kept as it is and merely drawn
+            // clamped, so opening the cell cannot quietly replace it.
+            this.currentValue.set(value === null || value === undefined || isNaN(value) ? this.scaleMin() : value);
         });
     }
     ngOnInit() {
         // Initialize value if provided, otherwise default to 0
         const initialValue = this.value();
-        if (initialValue === null || initialValue === undefined || isNaN(initialValue) || initialValue < 0) {
-            this.currentValue.set(0);
-        }
-        else {
-            this.currentValue.set(initialValue);
-        }
+        this.currentValue.set(initialValue === null || initialValue === undefined || isNaN(initialValue)
+            ? this.scaleMin()
+            : initialValue);
     }
     onActivate() {
         if (this.isEditable()) {
@@ -8187,11 +8518,11 @@ class ProgressComponent {
         return cfg[property];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ProgressComponent, isStandalone: true, selector: "eru-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, fieldSize: { classPropertyName: "fieldSize", publicName: "fieldSize", isSignal: true, isRequired: false, transformFunction: null }, eruGridStore: { classPropertyName: "eruGridStore", publicName: "eruGridStore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus", drilldownClick: "drilldownClick", editModeChange: "editModeChange" }, ngImport: i0, template: "@if (isActive()) {\n<div class=\"progress-input-container\"\n  [style.--mat-slider-active-track-color]=\"barColor()\"\n  [style.--mat-slider-disabled-active-track-color]=\"barColor()\"\n  [style.--mat-slider-with-tick-marks-active-container-color]=\"barColor()\"\n  [style.--mat-slider-handle-color]=\"barColor()\"\n  [style.--mat-slider-focus-handle-color]=\"barColor()\"\n  [style.--mat-slider-hover-handle-color]=\"barColor()\"\n  [style.--mat-slider-disabled-handle-color]=\"barColor()\"\n  [style.--mat-slider-ripple-color]=\"barColor()\"\n  (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{valueLabel()}}</span>\n  <!-- Only ever one of these on screen (the active cell), so it keeps the\n       tick marks and the rest of its appearance exactly as before. -->\n  <mat-slider\n    class=\"progress-slider\"\n    [min]=\"0\"\n    [max]=\"100\"\n    [step]=\"1\"\n    [discrete]=\"true\"\n    [showTickMarks]=\"true\"\n    [disabled]=\"!isEditable()\">\n    <input\n      matSliderThumb\n      [ngModel]=\"displayValue()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n      [disabled]=\"!isEditable()\">\n  </mat-slider>\n</div>\n} @else {\n<!-- Read-only: a plain track + fill rather than a disabled mat-slider.\n     The slider mounted here even when the cell was not being edited, and with\n     step=1 over 0-100 its tick marks alone were 101 DOM nodes per cell \u2014 on a\n     25-row grid that was 2,525 nodes and the single largest cost in rendering\n     the table. It also read as interactive when it was not: the thumb invited\n     a drag that did nothing. Double-click still activates, which mounts the\n     real slider above. -->\n<div class=\"progress-view-container\" (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{valueLabel()}}</span>\n  <div class=\"progress-view-track\">\n    <div class=\"progress-view-fill\" [style.width.%]=\"displayValue()\"\n      [style.background]=\"barColor()\"></div>\n  </div>\n</div>\n}\n", styles: [":root{--mat-slider-with-overlap-handle-outline-color: var(--grid-primary, #6750a4) !important;--mat-slider-with-tick-marks-active-container-color: var(--grid-primary, #6750a4) !important;--mat-slider-handle-height: 12px;--mat-slider-handle-width: 12px;--mat-slider-disabled-active-track-color: var(--grid-primary, #6750a4);--mat-slider-active-track-color: var(--grid-primary, #6750a4)}:host{display:block;height:100%;width:100%}.progress-bar-container{width:100%;height:100%;min-height:30px;position:relative;background:#e0e0e0;border-radius:4px;cursor:pointer}.progress-bar{height:100%;background:var(--grid-primary, #6750a4);transition:width .3s;border-radius:4px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--grid-on-surface, #1d1b20);pointer-events:none;z-index:1}.drillable-value{color:inherit;text-decoration:underline;cursor:pointer;pointer-events:auto}.drillable-value:hover{opacity:.8}.progress-input-container{display:flex;flex-direction:row-reverse;align-items:center;padding:4px;width:100%;box-sizing:border-box;overflow:visible;max-height:30px}.progress-input-container.disabled{cursor:pointer}.progress-input-container.disabled .progress-slider{pointer-events:none}.progress-view-container{display:flex;flex-direction:row-reverse;align-items:center;gap:8px;padding:4px;width:100%;box-sizing:border-box;max-height:30px;cursor:pointer}.progress-view-track{flex:1 1 0%;min-width:0;height:4px;border-radius:2px;background:var(--grid-surface-variant, #e0e0e0);overflow:hidden}.progress-view-fill{height:100%;border-radius:2px;background:var(--grid-primary, #6750a4);transition:width .3s}.progress-value{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--grid-on-surface, #1d1b20);flex:0 0 auto;min-width:35px;text-align:right;white-space:nowrap;flex-shrink:0}.progress-slider{flex:1 1 0%;min-width:0!important;max-width:100%!important;overflow:visible}.progress-slider .mdc-slider__track{left:0!important}.progress-slider .mdc-slider{padding-left:0!important;margin-left:0!important}.progress-slider .mdc-slider__value-indicator,.progress-slider .mdc-slider__value-indicator-container{display:none!important;visibility:hidden!important}.progress-slider .mdc-slider__thumb:before,.progress-slider .mdc-slider__thumb:after{display:none!important;content:none!important}.progress-slider .mdc-slider__thumb-knob:before,.progress-slider .mdc-slider__thumb-knob:after{display:none!important;content:none!important}.progress-slider [class*=value-indicator],.progress-slider [class*=tooltip]{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$4.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$4.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ProgressComponent, isStandalone: true, selector: "eru-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, fieldSize: { classPropertyName: "fieldSize", publicName: "fieldSize", isSignal: true, isRequired: false, transformFunction: null }, eruGridStore: { classPropertyName: "eruGridStore", publicName: "eruGridStore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus", drilldownClick: "drilldownClick", editModeChange: "editModeChange" }, ngImport: i0, template: "@if (isActive()) {\n<div class=\"progress-input-container\"\n  [style.--mat-slider-active-track-color]=\"barColor()\"\n  [style.--mat-slider-disabled-active-track-color]=\"barColor()\"\n  [style.--mat-slider-with-tick-marks-active-container-color]=\"barColor()\"\n  [style.--mat-slider-handle-color]=\"barColor()\"\n  [style.--mat-slider-focus-handle-color]=\"barColor()\"\n  [style.--mat-slider-hover-handle-color]=\"barColor()\"\n  [style.--mat-slider-disabled-handle-color]=\"barColor()\"\n  [style.--mat-slider-ripple-color]=\"barColor()\"\n  (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{valueLabel()}}</span>\n  <!-- Only ever one of these on screen (the active cell), so it keeps the\n       tick marks and the rest of its appearance exactly as before. -->\n  <mat-slider\n    class=\"progress-slider\"\n    [min]=\"scaleMin()\"\n    [max]=\"scaleMax()\"\n    [step]=\"1\"\n    [discrete]=\"true\"\n    [showTickMarks]=\"true\"\n    [disabled]=\"!isEditable()\">\n    <input\n      matSliderThumb\n      [ngModel]=\"editValue()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n      [disabled]=\"!isEditable()\">\n  </mat-slider>\n</div>\n} @else {\n<!-- Read-only: a plain track + fill rather than a disabled mat-slider.\n     The slider mounted here even when the cell was not being edited, and with\n     step=1 over 0-100 its tick marks alone were 101 DOM nodes per cell \u2014 on a\n     25-row grid that was 2,525 nodes and the single largest cost in rendering\n     the table. It also read as interactive when it was not: the thumb invited\n     a drag that did nothing. Double-click still activates, which mounts the\n     real slider above. -->\n<div class=\"progress-view-container\" (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{valueLabel()}}</span>\n  <div class=\"progress-view-track\">\n    <div class=\"progress-view-fill\" [style.width.%]=\"fillPercent()\"\n      [style.background]=\"barColor()\"></div>\n  </div>\n</div>\n}\n", styles: [":root{--mat-slider-with-overlap-handle-outline-color: var(--grid-primary, #6750a4) !important;--mat-slider-with-tick-marks-active-container-color: var(--grid-primary, #6750a4) !important;--mat-slider-handle-height: 12px;--mat-slider-handle-width: 12px;--mat-slider-disabled-active-track-color: var(--grid-primary, #6750a4);--mat-slider-active-track-color: var(--grid-primary, #6750a4)}:host{display:block;height:100%;width:100%}.progress-bar-container{width:100%;height:100%;min-height:30px;position:relative;background:#e0e0e0;border-radius:4px;cursor:pointer}.progress-bar{height:100%;background:var(--grid-primary, #6750a4);transition:width .3s;border-radius:4px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--grid-on-surface, #1d1b20);pointer-events:none;z-index:1}.drillable-value{color:inherit;text-decoration:underline;cursor:pointer;pointer-events:auto}.drillable-value:hover{opacity:.8}.progress-input-container{display:flex;flex-direction:row-reverse;align-items:center;padding:4px;width:100%;box-sizing:border-box;overflow:visible;max-height:30px}.progress-input-container.disabled{cursor:pointer}.progress-input-container.disabled .progress-slider{pointer-events:none}.progress-view-container{display:flex;flex-direction:row-reverse;align-items:center;gap:8px;padding:4px;width:100%;box-sizing:border-box;max-height:30px;cursor:pointer}.progress-view-track{flex:1 1 0%;min-width:0;height:4px;border-radius:2px;background:var(--grid-surface-variant, #e0e0e0);overflow:hidden}.progress-view-fill{height:100%;border-radius:2px;background:var(--grid-primary, #6750a4);transition:width .3s}.progress-value{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--grid-on-surface, #1d1b20);flex:0 0 auto;min-width:35px;text-align:right;white-space:nowrap;flex-shrink:0}.progress-slider{flex:1 1 0%;min-width:0!important;max-width:100%!important;overflow:visible}.progress-slider .mdc-slider__track{left:0!important}.progress-slider .mdc-slider{padding-left:0!important;margin-left:0!important}.progress-slider .mdc-slider__value-indicator,.progress-slider .mdc-slider__value-indicator-container{display:none!important;visibility:hidden!important}.progress-slider .mdc-slider__thumb:before,.progress-slider .mdc-slider__thumb:after{display:none!important;content:none!important}.progress-slider .mdc-slider__thumb-knob:before,.progress-slider .mdc-slider__thumb-knob:after{display:none!important;content:none!important}.progress-slider [class*=value-indicator],.progress-slider [class*=tooltip]{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$4.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$4.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eru-progress', standalone: true, imports: [FormsModule, MatSliderModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (isActive()) {\n<div class=\"progress-input-container\"\n  [style.--mat-slider-active-track-color]=\"barColor()\"\n  [style.--mat-slider-disabled-active-track-color]=\"barColor()\"\n  [style.--mat-slider-with-tick-marks-active-container-color]=\"barColor()\"\n  [style.--mat-slider-handle-color]=\"barColor()\"\n  [style.--mat-slider-focus-handle-color]=\"barColor()\"\n  [style.--mat-slider-hover-handle-color]=\"barColor()\"\n  [style.--mat-slider-disabled-handle-color]=\"barColor()\"\n  [style.--mat-slider-ripple-color]=\"barColor()\"\n  (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{valueLabel()}}</span>\n  <!-- Only ever one of these on screen (the active cell), so it keeps the\n       tick marks and the rest of its appearance exactly as before. -->\n  <mat-slider\n    class=\"progress-slider\"\n    [min]=\"0\"\n    [max]=\"100\"\n    [step]=\"1\"\n    [discrete]=\"true\"\n    [showTickMarks]=\"true\"\n    [disabled]=\"!isEditable()\">\n    <input\n      matSliderThumb\n      [ngModel]=\"displayValue()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n      [disabled]=\"!isEditable()\">\n  </mat-slider>\n</div>\n} @else {\n<!-- Read-only: a plain track + fill rather than a disabled mat-slider.\n     The slider mounted here even when the cell was not being edited, and with\n     step=1 over 0-100 its tick marks alone were 101 DOM nodes per cell \u2014 on a\n     25-row grid that was 2,525 nodes and the single largest cost in rendering\n     the table. It also read as interactive when it was not: the thumb invited\n     a drag that did nothing. Double-click still activates, which mounts the\n     real slider above. -->\n<div class=\"progress-view-container\" (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{valueLabel()}}</span>\n  <div class=\"progress-view-track\">\n    <div class=\"progress-view-fill\" [style.width.%]=\"displayValue()\"\n      [style.background]=\"barColor()\"></div>\n  </div>\n</div>\n}\n", styles: [":root{--mat-slider-with-overlap-handle-outline-color: var(--grid-primary, #6750a4) !important;--mat-slider-with-tick-marks-active-container-color: var(--grid-primary, #6750a4) !important;--mat-slider-handle-height: 12px;--mat-slider-handle-width: 12px;--mat-slider-disabled-active-track-color: var(--grid-primary, #6750a4);--mat-slider-active-track-color: var(--grid-primary, #6750a4)}:host{display:block;height:100%;width:100%}.progress-bar-container{width:100%;height:100%;min-height:30px;position:relative;background:#e0e0e0;border-radius:4px;cursor:pointer}.progress-bar{height:100%;background:var(--grid-primary, #6750a4);transition:width .3s;border-radius:4px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--grid-on-surface, #1d1b20);pointer-events:none;z-index:1}.drillable-value{color:inherit;text-decoration:underline;cursor:pointer;pointer-events:auto}.drillable-value:hover{opacity:.8}.progress-input-container{display:flex;flex-direction:row-reverse;align-items:center;padding:4px;width:100%;box-sizing:border-box;overflow:visible;max-height:30px}.progress-input-container.disabled{cursor:pointer}.progress-input-container.disabled .progress-slider{pointer-events:none}.progress-view-container{display:flex;flex-direction:row-reverse;align-items:center;gap:8px;padding:4px;width:100%;box-sizing:border-box;max-height:30px;cursor:pointer}.progress-view-track{flex:1 1 0%;min-width:0;height:4px;border-radius:2px;background:var(--grid-surface-variant, #e0e0e0);overflow:hidden}.progress-view-fill{height:100%;border-radius:2px;background:var(--grid-primary, #6750a4);transition:width .3s}.progress-value{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--grid-on-surface, #1d1b20);flex:0 0 auto;min-width:35px;text-align:right;white-space:nowrap;flex-shrink:0}.progress-slider{flex:1 1 0%;min-width:0!important;max-width:100%!important;overflow:visible}.progress-slider .mdc-slider__track{left:0!important}.progress-slider .mdc-slider{padding-left:0!important;margin-left:0!important}.progress-slider .mdc-slider__value-indicator,.progress-slider .mdc-slider__value-indicator-container{display:none!important;visibility:hidden!important}.progress-slider .mdc-slider__thumb:before,.progress-slider .mdc-slider__thumb:after{display:none!important;content:none!important}.progress-slider .mdc-slider__thumb-knob:before,.progress-slider .mdc-slider__thumb-knob:after{display:none!important;content:none!important}.progress-slider [class*=value-indicator],.progress-slider [class*=tooltip]{display:none!important}\n"] }]
+            args: [{ selector: 'eru-progress', standalone: true, imports: [FormsModule, MatSliderModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (isActive()) {\n<div class=\"progress-input-container\"\n  [style.--mat-slider-active-track-color]=\"barColor()\"\n  [style.--mat-slider-disabled-active-track-color]=\"barColor()\"\n  [style.--mat-slider-with-tick-marks-active-container-color]=\"barColor()\"\n  [style.--mat-slider-handle-color]=\"barColor()\"\n  [style.--mat-slider-focus-handle-color]=\"barColor()\"\n  [style.--mat-slider-hover-handle-color]=\"barColor()\"\n  [style.--mat-slider-disabled-handle-color]=\"barColor()\"\n  [style.--mat-slider-ripple-color]=\"barColor()\"\n  (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{valueLabel()}}</span>\n  <!-- Only ever one of these on screen (the active cell), so it keeps the\n       tick marks and the rest of its appearance exactly as before. -->\n  <mat-slider\n    class=\"progress-slider\"\n    [min]=\"scaleMin()\"\n    [max]=\"scaleMax()\"\n    [step]=\"1\"\n    [discrete]=\"true\"\n    [showTickMarks]=\"true\"\n    [disabled]=\"!isEditable()\">\n    <input\n      matSliderThumb\n      [ngModel]=\"editValue()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (blur)=\"onBlur()\"\n      [disabled]=\"!isEditable()\">\n  </mat-slider>\n</div>\n} @else {\n<!-- Read-only: a plain track + fill rather than a disabled mat-slider.\n     The slider mounted here even when the cell was not being edited, and with\n     step=1 over 0-100 its tick marks alone were 101 DOM nodes per cell \u2014 on a\n     25-row grid that was 2,525 nodes and the single largest cost in rendering\n     the table. It also read as interactive when it was not: the thumb invited\n     a drag that did nothing. Double-click still activates, which mounts the\n     real slider above. -->\n<div class=\"progress-view-container\" (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{valueLabel()}}</span>\n  <div class=\"progress-view-track\">\n    <div class=\"progress-view-fill\" [style.width.%]=\"fillPercent()\"\n      [style.background]=\"barColor()\"></div>\n  </div>\n</div>\n}\n", styles: [":root{--mat-slider-with-overlap-handle-outline-color: var(--grid-primary, #6750a4) !important;--mat-slider-with-tick-marks-active-container-color: var(--grid-primary, #6750a4) !important;--mat-slider-handle-height: 12px;--mat-slider-handle-width: 12px;--mat-slider-disabled-active-track-color: var(--grid-primary, #6750a4);--mat-slider-active-track-color: var(--grid-primary, #6750a4)}:host{display:block;height:100%;width:100%}.progress-bar-container{width:100%;height:100%;min-height:30px;position:relative;background:#e0e0e0;border-radius:4px;cursor:pointer}.progress-bar{height:100%;background:var(--grid-primary, #6750a4);transition:width .3s;border-radius:4px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--grid-on-surface, #1d1b20);pointer-events:none;z-index:1}.drillable-value{color:inherit;text-decoration:underline;cursor:pointer;pointer-events:auto}.drillable-value:hover{opacity:.8}.progress-input-container{display:flex;flex-direction:row-reverse;align-items:center;padding:4px;width:100%;box-sizing:border-box;overflow:visible;max-height:30px}.progress-input-container.disabled{cursor:pointer}.progress-input-container.disabled .progress-slider{pointer-events:none}.progress-view-container{display:flex;flex-direction:row-reverse;align-items:center;gap:8px;padding:4px;width:100%;box-sizing:border-box;max-height:30px;cursor:pointer}.progress-view-track{flex:1 1 0%;min-width:0;height:4px;border-radius:2px;background:var(--grid-surface-variant, #e0e0e0);overflow:hidden}.progress-view-fill{height:100%;border-radius:2px;background:var(--grid-primary, #6750a4);transition:width .3s}.progress-value{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--grid-on-surface, #1d1b20);flex:0 0 auto;min-width:35px;text-align:right;white-space:nowrap;flex-shrink:0}.progress-slider{flex:1 1 0%;min-width:0!important;max-width:100%!important;overflow:visible}.progress-slider .mdc-slider__track{left:0!important}.progress-slider .mdc-slider{padding-left:0!important;margin-left:0!important}.progress-slider .mdc-slider__value-indicator,.progress-slider .mdc-slider__value-indicator-container{display:none!important;visibility:hidden!important}.progress-slider .mdc-slider__thumb:before,.progress-slider .mdc-slider__thumb:after{display:none!important;content:none!important}.progress-slider .mdc-slider__thumb-knob:before,.progress-slider .mdc-slider__thumb-knob:after{display:none!important;content:none!important}.progress-slider [class*=value-indicator],.progress-slider [class*=tooltip]{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], isDrillable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDrillable", required: false }] }], columnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidth", required: false }] }], fieldSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSize", required: false }] }], eruGridStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "eruGridStore", required: false }] }], valueChange: [{
                 type: Output
             }], blur: [{
@@ -10453,6 +10784,8 @@ class AttachmentComponent {
     drilldownClick = new EventEmitter();
     editModeChange = new EventEmitter();
     fileAdded = new EventEmitter();
+    /** The file's contents and where it is meant to go, for a host that uploads. */
+    fileUpload = new EventEmitter();
     fileDeleted = new EventEmitter();
     fileViewed = new EventEmitter();
     // Internal state
@@ -10664,8 +10997,14 @@ class AttachmentComponent {
         reader.readAsDataURL(file);
     }
     uploadFile(base64String, fileName) {
-        // This can be extended to call an upload service
-        // For now, just emit the file data
+        const cfg = this.config();
+        this.fileUpload.emit({
+            fileName,
+            file: base64String,
+            storage_name: cfg.storageName ?? '',
+            folder_name: cfg.folderName ?? '',
+            default_upload: cfg.defaultUpload !== false,
+        });
     }
     viewFile(file, event) {
         if (event) {
@@ -10722,7 +11061,7 @@ class AttachmentComponent {
         return file;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AttachmentComponent, isStandalone: true, selector: "eru-attachment", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, eruGridStore: { classPropertyName: "eruGridStore", publicName: "eruGridStore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus", drilldownClick: "drilldownClick", editModeChange: "editModeChange", fileAdded: "fileAdded", fileDeleted: "fileDeleted", fileViewed: "fileViewed" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-overlay-container\">\n  <div \n    class=\"attachment-cell-wrapper\"\n    cdkOverlayOrigin \n    #attachmentTrigger=\"cdkOverlayOrigin\"\n    [class.attachment-display-editable]=\"isEditable() && !isActive()\"\n    [class.attachment-display-viewable]=\"!isEditable() && hasFiles()\"\n    (dblclick)=\"onActivate()\">\n    @if(hasFiles()) {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    } @else {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n                stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n              stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template \n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOverlayOpen() && (isActive() || !isEditable())\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'attachment-backdrop'\"\n    (backdropClick)=\"onOverlayBackdropClick()\"\n    (detach)=\"closeOverlay()\">\n    <div \n      class=\"attachment-menu-overlay\" \n      [style.width.px]=\"columnWidth() || config().columnWidth || 300\" \n      [style.min-width.px]=\"300\"\n      (click)=\"onOverlayClick($event)\">\n      <div class=\"attachment-container\" (click)=\"$event.stopPropagation()\">\n        @if (rejectionMessage()) {\n          <div class=\"attachment-rejection\" role=\"alert\">{{ rejectionMessage() }}</div>\n        }\n        @if (isEditable()) {\n          <!-- Header Section -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Add or Drag files</span>\n            <button\n              mat-flat-button\n              (click)=\"onUploadClick(); $event.stopPropagation()\"\n              class=\"attachment-upload-btn\"\n              [disabled]=\"config().disabled\">\n              Upload\n            </button>\n          </div>\n\n          <!-- Drop zone -->\n          <div\n            class=\"attachment-drop-zone\"\n            (drop)=\"onFileDrop($event)\"\n            (dragover)=\"onDragOver($event)\"\n            (dragleave)=\"onDragLeave($event)\"\n            (paste)=\"onPaste($event)\"\n            (click)=\"onUploadClick(); $event.stopPropagation()\"\n            [class.dragging]=\"isDragging()\">\n            <div class=\"attachment-drop-content\">\n              <div class=\"attachment-drop-icon\">+</div>\n              <div class=\"attachment-drop-text\">\n                <div class=\"primary-text\">Click to upload or drag files here</div>\n                <div class=\"secondary-text\">Support multiple files</div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Hidden file input -->\n          <input\n            #fileInput\n            type=\"file\"\n            multiple\n            (change)=\"onFileInputChange($event)\"\n            style=\"display: none;\">\n        } @else {\n          <!-- Read-only header -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Attachments</span>\n          </div>\n        }\n\n        <!-- File list -->\n        @if (hasFiles()) {\n          <div class=\"attachment-file-list\">\n            @for (file of currentValue(); track $index) {\n              <div class=\"attachment-file-item\">\n                <div class=\"file-info\">\n                  <mat-icon class=\"file-status-icon done-icon\">check_circle</mat-icon>\n                  <span class=\"file-name\">{{ getFileName(file) }}</span>\n                </div>\n                <div class=\"file-actions\">\n                  <button\n                    mat-icon-button\n                    class=\"file-action-btn\"\n                    (click)=\"viewFile(file, $event)\"\n                    title=\"View\"\n                    type=\"button\">\n                    <mat-icon>visibility</mat-icon>\n                  </button>\n                  @if (isEditable()) {\n                    <button\n                      mat-icon-button\n                      class=\"file-action-btn\"\n                      (click)=\"deleteFile(file, $event)\"\n                      title=\"Delete\"\n                      type=\"button\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n", styles: [".attachment-rejection{padding:8px 10px;margin-bottom:8px;border-radius:6px;background:#fef2f2;color:var(--cell-color, #b91c1c);font-size:var(--cell-font-size, 12px);line-height:1.4}.attachment-overlay-container{width:100%;height:100%}.attachment-cell-wrapper{display:flex;align-items:center;justify-content:center;padding:4px;min-height:32px;cursor:default}.attachment-cell-wrapper.attachment-display-editable{cursor:pointer}.attachment-cell-wrapper.attachment-display-editable:hover{background-color:#0000000a}.attachment-cell-wrapper.attachment-display-viewable{cursor:pointer}.attachment-cell-wrapper.attachment-display-viewable:hover{background-color:#0000000a}.cell-attachment-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.drillable-value{display:flex;align-items:center;justify-content:center;cursor:pointer}.drillable-value svg{text-decoration:none}.drillable-value:hover{opacity:.8}.attachment-backdrop{background:transparent}.attachment-menu-overlay{background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;position:relative;z-index:1000}.attachment-container{padding:16px}.attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.attachment-title{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}.attachment-upload-btn{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px))!important;min-width:50px}.attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-drop-icon{font-size:var(--cell-font-size, 48px);color:var(--cell-color, var(--grid-primary, #6750a4));font-weight:var(--cell-font-weight, 300);line-height:1}.attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 14px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));font-weight:var(--cell-font-weight, 400);margin:0}.attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 12px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));margin-top:4px;display:block}.attachment-file-list{display:block;margin-top:16px;max-height:300px;overflow-y:auto}.attachment-file-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;margin-bottom:8px;background:var(--grid-surface-variant, #e7e0ec);transition:background-color .2s}.attachment-file-item:hover{background:var(--grid-surface-container, #f3edf7)}.file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.file-status-icon{font-size:var(--cell-font-size, 18px)!important;width:18px!important;height:18px!important;flex-shrink:0}.file-status-icon.done-icon{color:var(--cell-color, #22C55E)}.file-name{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));color:var(--cell-color, var(--grid-on-surface, #1c1b1f));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions{display:flex;gap:8px;flex-shrink:0}.file-action-btn{width:28px!important;height:28px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center}.file-action-btn .mat-icon{font-size:var(--cell-font-size, 18px);width:18px;height:18px;color:var(--cell-color, var(--grid-on-surface-variant, #49454f))}.file-action-btn:hover .mat-icon{color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AttachmentComponent, isStandalone: true, selector: "eru-attachment", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, eruGridStore: { classPropertyName: "eruGridStore", publicName: "eruGridStore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus", drilldownClick: "drilldownClick", editModeChange: "editModeChange", fileAdded: "fileAdded", fileUpload: "fileUpload", fileDeleted: "fileDeleted", fileViewed: "fileViewed" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-overlay-container\">\n  <div \n    class=\"attachment-cell-wrapper\"\n    cdkOverlayOrigin \n    #attachmentTrigger=\"cdkOverlayOrigin\"\n    [class.attachment-display-editable]=\"isEditable() && !isActive()\"\n    [class.attachment-display-viewable]=\"!isEditable() && hasFiles()\"\n    (dblclick)=\"onActivate()\">\n    @if(hasFiles()) {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n                stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M19 12.5C19 14.985 15.866 17 12 17C8.134 17 5 14.985 5 12.5C5 10.015 8.134 8 12 8C15.866 8 19 10.015 19 12.5Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M13.75 12.5001C13.7716 13.1394 13.4429 13.7397 12.8925 14.0657C12.3422 14.3918 11.6578 14.3918 11.1075 14.0657C10.5571 13.7397 10.2284 13.1394 10.25 12.5001C10.2284 11.8608 10.5571 11.2606 11.1075 10.9345C11.6578 10.6084 12.3422 10.6084 12.8925 10.9345C13.4429 11.2606 13.7716 11.8608 13.75 12.5001V12.5001Z\"\n              stroke=\"#7C818C\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    } @else {\n      <div class=\"cell-attachment-container\">\n        @if (isDrillable() && !isActive()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n                stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </span>\n        } @else {\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M14.67 11.053L10.68 15.315C10.3416 15.6932 9.85986 15.9119 9.35236 15.9178C8.84487 15.9237 8.35821 15.7162 8.01104 15.346C7.24412 14.5454 7.257 13.2788 8.04004 12.494L13.399 6.763C13.9902 6.10491 14.8315 5.72677 15.7161 5.72163C16.6006 5.71649 17.4463 6.08482 18.045 6.736C19.3222 8.14736 19.3131 10.2995 18.024 11.7L12.342 17.771C11.5334 18.5827 10.4265 19.0261 9.28113 18.9971C8.13575 18.9682 7.05268 18.4695 6.28604 17.618C4.5337 15.6414 4.57705 12.6549 6.38604 10.73L11.753 5\"\n              stroke=\"#363B44\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template \n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"attachmentTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOverlayOpen() && (isActive() || !isEditable())\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'attachment-backdrop'\"\n    (backdropClick)=\"onOverlayBackdropClick()\"\n    (detach)=\"closeOverlay()\">\n    <div \n      class=\"attachment-menu-overlay\" \n      [style.width.px]=\"columnWidth() || config().columnWidth || 300\" \n      [style.min-width.px]=\"300\"\n      (click)=\"onOverlayClick($event)\">\n      <div class=\"attachment-container\" (click)=\"$event.stopPropagation()\">\n        @if (rejectionMessage()) {\n          <div class=\"attachment-rejection\" role=\"alert\">{{ rejectionMessage() }}</div>\n        }\n        @if (isEditable()) {\n          <!-- Header Section -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Add or Drag files</span>\n            <button\n              mat-flat-button\n              (click)=\"onUploadClick(); $event.stopPropagation()\"\n              class=\"attachment-upload-btn\"\n              [disabled]=\"config().disabled\">\n              Upload\n            </button>\n          </div>\n\n          <!-- Drop zone -->\n          <div\n            class=\"attachment-drop-zone\"\n            (drop)=\"onFileDrop($event)\"\n            (dragover)=\"onDragOver($event)\"\n            (dragleave)=\"onDragLeave($event)\"\n            (paste)=\"onPaste($event)\"\n            (click)=\"onUploadClick(); $event.stopPropagation()\"\n            [class.dragging]=\"isDragging()\">\n            <div class=\"attachment-drop-content\">\n              <div class=\"attachment-drop-icon\">+</div>\n              <div class=\"attachment-drop-text\">\n                <div class=\"primary-text\">Click to upload or drag files here</div>\n                <div class=\"secondary-text\">Support multiple files</div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Hidden file input -->\n          <input\n            #fileInput\n            type=\"file\"\n            multiple\n            (change)=\"onFileInputChange($event)\"\n            style=\"display: none;\">\n        } @else {\n          <!-- Read-only header -->\n          <div class=\"attachment-header\">\n            <span class=\"attachment-title\">Attachments</span>\n          </div>\n        }\n\n        <!-- File list -->\n        @if (hasFiles()) {\n          <div class=\"attachment-file-list\">\n            @for (file of currentValue(); track $index) {\n              <div class=\"attachment-file-item\">\n                <div class=\"file-info\">\n                  <mat-icon class=\"file-status-icon done-icon\">check_circle</mat-icon>\n                  <span class=\"file-name\">{{ getFileName(file) }}</span>\n                </div>\n                <div class=\"file-actions\">\n                  <button\n                    mat-icon-button\n                    class=\"file-action-btn\"\n                    (click)=\"viewFile(file, $event)\"\n                    title=\"View\"\n                    type=\"button\">\n                    <mat-icon>visibility</mat-icon>\n                  </button>\n                  @if (isEditable()) {\n                    <button\n                      mat-icon-button\n                      class=\"file-action-btn\"\n                      (click)=\"deleteFile(file, $event)\"\n                      title=\"Delete\"\n                      type=\"button\">\n                      <mat-icon>delete_outline</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n", styles: [".attachment-rejection{padding:8px 10px;margin-bottom:8px;border-radius:6px;background:#fef2f2;color:var(--cell-color, #b91c1c);font-size:var(--cell-font-size, 12px);line-height:1.4}.attachment-overlay-container{width:100%;height:100%}.attachment-cell-wrapper{display:flex;align-items:center;justify-content:center;padding:4px;min-height:32px;cursor:default}.attachment-cell-wrapper.attachment-display-editable{cursor:pointer}.attachment-cell-wrapper.attachment-display-editable:hover{background-color:#0000000a}.attachment-cell-wrapper.attachment-display-viewable{cursor:pointer}.attachment-cell-wrapper.attachment-display-viewable:hover{background-color:#0000000a}.cell-attachment-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.drillable-value{display:flex;align-items:center;justify-content:center;cursor:pointer}.drillable-value svg{text-decoration:none}.drillable-value:hover{opacity:.8}.attachment-backdrop{background:transparent}.attachment-menu-overlay{background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;position:relative;z-index:1000}.attachment-container{padding:16px}.attachment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.attachment-title{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));font-weight:var(--cell-font-weight, 500);color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}.attachment-upload-btn{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px))!important;min-width:50px}.attachment-drop-zone{border:2px dashed var(--grid-outline-variant, #cac4d0);border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--grid-surface-variant, #e7e0ec);margin:16px 0}.attachment-drop-zone:hover{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7)}.attachment-drop-zone.dragging{border-color:var(--grid-primary, #6750a4);background:var(--grid-surface-container, #f3edf7);transform:scale(1.01)}.attachment-drop-content{display:flex;flex-direction:column;align-items:center;gap:12px}.attachment-drop-icon{font-size:var(--cell-font-size, 48px);color:var(--cell-color, var(--grid-primary, #6750a4));font-weight:var(--cell-font-weight, 300);line-height:1}.attachment-drop-text .primary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 14px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));font-weight:var(--cell-font-weight, 400);margin:0}.attachment-drop-text .secondary-text{font-family:var(--grid-font-family, \"Poppins\");font-size:var(--cell-font-size, 12px);color:var(--cell-color, var(--grid-on-surface-variant, #49454f));margin-top:4px;display:block}.attachment-file-list{display:block;margin-top:16px;max-height:300px;overflow-y:auto}.attachment-file-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;margin-bottom:8px;background:var(--grid-surface-variant, #e7e0ec);transition:background-color .2s}.attachment-file-item:hover{background:var(--grid-surface-container, #f3edf7)}.file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.file-status-icon{font-size:var(--cell-font-size, 18px)!important;width:18px!important;height:18px!important;flex-shrink:0}.file-status-icon.done-icon{color:var(--cell-color, #22C55E)}.file-name{font-size:var(--cell-font-size, var(--grid-font-size-body, 12px));color:var(--cell-color, var(--grid-on-surface, #1c1b1f));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions{display:flex;gap:8px;flex-shrink:0}.file-action-btn{width:28px!important;height:28px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center}.file-action-btn .mat-icon{font-size:var(--cell-font-size, 18px);width:18px;height:18px;color:var(--cell-color, var(--grid-on-surface-variant, #49454f))}.file-action-btn:hover .mat-icon{color:var(--cell-color, var(--grid-on-surface, #1c1b1f))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
@@ -10746,6 +11085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 type: Output
             }], fileAdded: [{
                 type: Output
+            }], fileUpload: [{
+                type: Output
             }], fileDeleted: [{
                 type: Output
             }], fileViewed: [{
@@ -10773,6 +11114,11 @@ class CompositeComponent {
     drilldownClick = output();
     inline = computed(() => this.column()?.composite_direction === 'inline', ...(ngDevMode ? [{ debugName: "inline" }] : []));
     separator = computed(() => this.column()?.composite_separator ?? '', ...(ngDevMode ? [{ debugName: "separator" }] : []));
+    /** Which side each part's label sits on, or 'none' for bare values. */
+    labelPosition = computed(() => {
+        const p = this.column()?.composite_label_position;
+        return p === 'left' || p === 'right' ? p : 'none';
+    }, ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
     primaryCss = computed(() => cellTextStyleToCss(this.column()?.cell_style), ...(ngDevMode ? [{ debugName: "primaryCss" }] : []));
     secondaryCss = computed(() => cellTextStyleToCss(this.column()?.cell_style_secondary ?? DEFAULT_SECONDARY_STYLE), ...(ngDevMode ? [{ debugName: "secondaryCss" }] : []));
     /**
@@ -10787,11 +11133,17 @@ class CompositeComponent {
         const names = (column.composite_fields || []).filter(Boolean);
         const byName = new Map((this.columns() || []).map(field => [field.name, field]));
         const row = this.row();
-        const parts = names.map(name => {
+        const labels = column.composite_labels || [];
+        const parts = names.map((name, index) => {
             const field = byName.get(name);
+            // Blank means no label for THIS part, never the field's own label as a
+            // fallback: a composite is usually built from columns whose labels are
+            // what the header already says, so falling back printed "Upload Date"
+            // in front of the upload date. Labelling one part and not another is a
+            // normal thing to want.
             return {
                 name,
-                label: field?.label || name,
+                label: String(labels[index] ?? '').trim(),
                 text: formatCellValue(readRowValue(row, name), field),
             };
         });
@@ -10808,11 +11160,11 @@ class CompositeComponent {
         this.drilldownClick.emit(part.text);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CompositeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CompositeComponent, isStandalone: true, selector: "eru-composite", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drilldownClick: "drilldownClick" }, ngImport: i0, template: "<div class=\"eru-composite\" [class.eru-composite--inline]=\"inline()\">\n  @for (part of parts(); track part.name; let first = $first; let last = $last) {\n  <span class=\"eru-composite__part\" [class.eru-composite__part--secondary]=\"!first\"\n    [class.eru-composite__part--drillable]=\"isDrillable() && first\" [ngStyle]=\"first ? primaryCss() : secondaryCss()\"\n    [title]=\"part.text\" (click)=\"onDrilldown($event, part)\">{{ part.text }}</span>\n  @if (inline() && !last && separator()) {\n  <span class=\"eru-composite__sep\" [ngStyle]=\"secondaryCss()\">{{ separator() }}</span>\n  }\n  }\n</div>\n", styles: [".eru-composite{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;width:100%;height:100%;line-height:1.3;box-sizing:border-box;padding:0 var(--grid-cell-inset-x, 8px)}.eru-composite--inline{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:4px}.eru-composite__part{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eru-composite__part--drillable{color:var(--grid-primary);cursor:pointer;text-decoration:underline}.eru-composite__sep{flex:0 0 auto}.eru-composite__part--secondary{line-height:1.15}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CompositeComponent, isStandalone: true, selector: "eru-composite", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drilldownClick: "drilldownClick" }, ngImport: i0, template: "<div class=\"eru-composite\" [class.eru-composite--inline]=\"inline()\"\n  [class.eru-composite--labelled]=\"labelPosition() !== 'none'\">\n  @for (part of parts(); track part.name; let first = $first; let last = $last) {\n  <span class=\"eru-composite__slot\">\n    @if (labelPosition() === 'left' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"secondaryCss()\">{{ part.label }}</span>\n    }\n    <span class=\"eru-composite__part\" [class.eru-composite__part--secondary]=\"!first\"\n      [class.eru-composite__part--drillable]=\"isDrillable() && first\" [ngStyle]=\"first ? primaryCss() : secondaryCss()\"\n      [title]=\"part.text\" (click)=\"onDrilldown($event, part)\">{{ part.text }}</span>\n    @if (labelPosition() === 'right' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"secondaryCss()\">{{ part.label }}</span>\n    }\n  </span>\n  @if (inline() && !last && separator()) {\n  <span class=\"eru-composite__sep\" [ngStyle]=\"secondaryCss()\">{{ separator() }}</span>\n  }\n  }\n</div>\n", styles: [".eru-composite{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;width:100%;height:100%;line-height:1.3;box-sizing:border-box;padding:0 var(--grid-cell-inset-x, 8px)}.eru-composite--inline{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:4px}.eru-composite__part{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eru-composite__part--drillable{color:var(--grid-primary);cursor:pointer;text-decoration:underline}.eru-composite__sep{flex:0 0 auto}.eru-composite__part--secondary{line-height:1.15}.eru-composite__slot{display:contents}.eru-composite--labelled .eru-composite__slot{display:inline-flex;align-items:baseline;gap:4px;min-width:0}.eru-composite__label{flex:0 0 auto;white-space:nowrap;opacity:.75}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CompositeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eru-composite', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eru-composite\" [class.eru-composite--inline]=\"inline()\">\n  @for (part of parts(); track part.name; let first = $first; let last = $last) {\n  <span class=\"eru-composite__part\" [class.eru-composite__part--secondary]=\"!first\"\n    [class.eru-composite__part--drillable]=\"isDrillable() && first\" [ngStyle]=\"first ? primaryCss() : secondaryCss()\"\n    [title]=\"part.text\" (click)=\"onDrilldown($event, part)\">{{ part.text }}</span>\n  @if (inline() && !last && separator()) {\n  <span class=\"eru-composite__sep\" [ngStyle]=\"secondaryCss()\">{{ separator() }}</span>\n  }\n  }\n</div>\n", styles: [".eru-composite{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;width:100%;height:100%;line-height:1.3;box-sizing:border-box;padding:0 var(--grid-cell-inset-x, 8px)}.eru-composite--inline{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:4px}.eru-composite__part{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eru-composite__part--drillable{color:var(--grid-primary);cursor:pointer;text-decoration:underline}.eru-composite__sep{flex:0 0 auto}.eru-composite__part--secondary{line-height:1.15}\n"] }]
+            args: [{ selector: 'eru-composite', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eru-composite\" [class.eru-composite--inline]=\"inline()\"\n  [class.eru-composite--labelled]=\"labelPosition() !== 'none'\">\n  @for (part of parts(); track part.name; let first = $first; let last = $last) {\n  <span class=\"eru-composite__slot\">\n    @if (labelPosition() === 'left' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"secondaryCss()\">{{ part.label }}</span>\n    }\n    <span class=\"eru-composite__part\" [class.eru-composite__part--secondary]=\"!first\"\n      [class.eru-composite__part--drillable]=\"isDrillable() && first\" [ngStyle]=\"first ? primaryCss() : secondaryCss()\"\n      [title]=\"part.text\" (click)=\"onDrilldown($event, part)\">{{ part.text }}</span>\n    @if (labelPosition() === 'right' && part.label) {\n    <span class=\"eru-composite__label\" [ngStyle]=\"secondaryCss()\">{{ part.label }}</span>\n    }\n  </span>\n  @if (inline() && !last && separator()) {\n  <span class=\"eru-composite__sep\" [ngStyle]=\"secondaryCss()\">{{ separator() }}</span>\n  }\n  }\n</div>\n", styles: [".eru-composite{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;width:100%;height:100%;line-height:1.3;box-sizing:border-box;padding:0 var(--grid-cell-inset-x, 8px)}.eru-composite--inline{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:4px}.eru-composite__part{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eru-composite__part--drillable{color:var(--grid-primary);cursor:pointer;text-decoration:underline}.eru-composite__sep{flex:0 0 auto}.eru-composite__part--secondary{line-height:1.15}.eru-composite__slot{display:contents}.eru-composite--labelled .eru-composite__slot{display:inline-flex;align-items:baseline;gap:4px;min-width:0}.eru-composite__label{flex:0 0 auto;white-space:nowrap;opacity:.75}\n"] }]
         }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], isDrillable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDrillable", required: false }] }], drilldownClick: [{ type: i0.Output, args: ["drilldownClick"] }] } });
 const DEFAULT_SECONDARY_STYLE = {
     font_size: 11,
@@ -10884,8 +11236,14 @@ class DataCellComponent {
      * applies them per part — setting the primary here as well would leak its
      * weight onto the secondary value, which only overrides size and colour.
      */
+    /**
+     * Which renderer draws this cell. Read off the column rather than taken as an
+     * input so every existing `<data-cell>` call site keeps working — they all
+     * already pass `column`.
+     */
+    cellRender = computed(() => normalizeCellRender(this.column()), ...(ngDevMode ? [{ debugName: "cellRender" }] : []));
     containerStyle = computed(() => {
-        if (this.columnDatatype() === 'composite')
+        if (this.cellRender() === 'composite')
             return {};
         const base = cellTextStyleToCss(this.column()?.cell_style);
         return { ...base, ...this.ruleStyle() };
@@ -11365,9 +11723,29 @@ class DataCellComponent {
             maxFiles: config?.max_files,
             allowedFileTypes: config?.allowed_file_types,
             maxFileSize: config?.max_file_size,
-            columnWidth: config?.column_width || this.currentColumnWidth()
+            columnWidth: config?.column_width || this.currentColumnWidth(),
+            storageName: config?.storage_name || '',
+            folderName: this.resolvedFolderName(config?.folder_name),
+            defaultUpload: config?.default_upload !== false
         };
     }, ...(ngDevMode ? [{ debugName: "getAttachmentConfig" }] : []));
+    /**
+     * `folder_name` on the column names a SIBLING field; the folder is that
+     * field's value on THIS row, so an attachment column files each record under
+     * its own key. Resolved here rather than in the attachment component so the
+     * component never has to know how a row nests its values.
+     */
+    resolvedFolderName(fieldName) {
+        const name = String(fieldName || '').trim();
+        if (!name)
+            return '';
+        const r = this.row();
+        const fromEntityData = r?.entity_data && typeof r.entity_data === 'object'
+            ? r.entity_data[name]
+            : undefined;
+        const raw = fromEntityData !== undefined ? fromEntityData : r?.[name];
+        return raw === undefined || raw === null ? '' : String(raw).trim();
+    }
     onAttachmentBlur(value) {
         this.currentValue.set(value);
         this.eruGridStore().setActiveCell(null);
@@ -11617,15 +11995,19 @@ class DataCellComponent {
     onNumberBlur() {
         const value = this.currentValue();
         // An empty cell stays empty. Number('') and Number(null) are both 0, so
-        // rounding unconditionally would write 0 into every blank numeric cell the
-        // user tabs through. Validation still runs, so a mandatory blank is caught.
+        // coercing unconditionally would treat every blank numeric cell the user
+        // tabs through as 0. Validation still runs, so a mandatory blank is caught.
         const isBlank = value === null || value === undefined || value === '';
         const numValue = isBlank ? NaN : Number(value);
         this.validateField(numValue);
+        // The value is stored as the NUMBER the user typed. `decimal` is display
+        // precision and belongs to the view branch alone: rounding here wrote the
+        // rounded value into currentValue — which is what deactivation persists —
+        // so 10.5 in a 0-decimal column was saved as 11 and the real value was
+        // gone. It also flipped the stored type to string, since toFixed returns
+        // one.
         if (!isBlank && !isNaN(numValue) && !this.error()) {
-            const config = this.columnCellConfiguration();
-            const decimalPlaces = config?.decimal || 0;
-            this.currentValue.set(numValue.toFixed(decimalPlaces));
+            this.currentValue.set(numValue);
         }
     }
     getPriorityIcon = computed(() => {
@@ -12370,7 +12752,7 @@ class DataCellComponent {
                 useValue: cellValidators
             },
             ...MATERIAL_PROVIDERS
-        ], viewQueries: [{ propertyName: "attachmentTrigger", first: true, predicate: ["attachmentTrigger"], descendants: true }, { propertyName: "singleSelectTrigger", first: true, predicate: ["singleSelectTrigger"], descendants: true }, { propertyName: "multiSelectTrigger", first: true, predicate: ["multiSelectTrigger"], descendants: true }, { propertyName: "peopleTrigger", first: true, predicate: ["peopleTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"container\" [ngStyle]=\"containerStyle()\">\n  @switch (columnDatatype()) {\n  @case ('textbox') {\n  <eru-textbox [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTextboxBlur($event)\"\n    (editModeChange)=\"onTextboxEditModeChange($event)\" (drilldownClick)=\"onTextboxDrilldown($event)\">\n  </eru-textbox>\n  }\n  @case ('currency') {\n  <eru-currency [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\" [row]=\"row()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [replaceZeroValue]=\"replaceZeroValue\" (valueChange)=\"onValueChange($event)\" (blur)=\"onCurrencyBlur($event)\"\n    (editModeChange)=\"onCurrencyEditModeChange($event)\" (drilldownClick)=\"onCurrencyDrilldown($event)\">\n  </eru-currency>\n  }\n  @case ('number') {\n  <eru-number [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [replaceZeroValue]=\"replaceZeroValue\" (valueChange)=\"onValueChange($event)\" (blur)=\"onNumberBlurHandler($event)\"\n    (editModeChange)=\"onNumberEditModeChange($event)\" (drilldownClick)=\"onNumberDrilldown($event)\">\n  </eru-number>\n  }\n  @case ('location') {\n  <eru-location [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onLocationBlurHandler($event)\"\n    (editModeChange)=\"onLocationEditModeChange($event)\" (drilldownClick)=\"onLocationDrilldown($event)\">\n  </eru-location>\n  }\n  @case ('email') {\n  <eru-email [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onEmailBlurHandler($event)\"\n    (editModeChange)=\"onEmailEditModeChange($event)\" (drilldownClick)=\"onEmailDrilldown($event)\">\n  </eru-email>\n  }\n  @case ('textarea') {\n  <eru-textarea [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTextareaBlur($event)\"\n    (editModeChange)=\"onTextareaEditModeChange($event)\" (drilldownClick)=\"onTextareaDrilldown($event)\">\n  </eru-textarea>\n  }\n  @case ('website') {\n  <eru-website [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onWebsiteBlur($event)\"\n    (editModeChange)=\"onWebsiteEditModeChange($event)\" (drilldownClick)=\"onWebsiteDrilldown($event)\">\n  </eru-website>\n  }\n  <!--  @case ('dropdown_multi_select') {\n      <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" #multiSelectTrigger\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}</span>\n        } @else {\n          {{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}\n        }\n      </div>\n    } -->\n\n  <!-- @case ('dropdown_single_select') {\n    <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" cdkOverlayOrigin #singleSelectTrigger=\"cdkOverlayOrigin\"\n    [class.cell-display-text-editable]=\"isEditable()\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n      } @else {\n        {{currentValue()}}\n      }\n    </div>\n  } -->\n\n  @case ('checkbox') {\n  <eru-checkbox [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onCheckboxBlur($event)\"\n    (editModeChange)=\"onCheckboxEditModeChange($event)\" (drilldownClick)=\"onCheckboxDrilldown($event)\">\n  </eru-checkbox>\n  }\n\n  @case ('people') {\n  <eru-people [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [personCardTemplate]=\"personCardTemplate()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPeopleBlur($event)\" (editModeChange)=\"onPeopleEditModeChange($event)\"\n    (drilldownClick)=\"onPeopleDrilldown($event)\">\n  </eru-people>\n  }\n\n\n  @case ('date') {\n  <eru-date [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (editModeChange)=\"onDateEditModeChange($event)\"\n    (drilldownClick)=\"onDateDrilldown($event)\">\n  </eru-date>\n  }\n\n  @case ('datetime') {\n  <eru-datetime [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\"\n    (editModeChange)=\"onDatetimeEditModeChange($event)\" (drilldownClick)=\"onDatetimeDrilldown($event)\">\n  </eru-datetime>\n  }\n\n  @case ('time') {\n  <!-- The time-picker component existed but had no datatype and no case here, so\n       a time field fell through to the plain-text renderer.\n\n       Mounted only while the cell is being edited, matching date/datetime. It\n       carries a mat-form-field, and rendering one per row costs a form field on\n       every visible time cell to show what is really just \"HH:mm\" text. The two\n       other places that embed eru-time-picker (duration, datetime) already only\n       mount it inside their own open editors. -->\n  @if (isActive()) {\n  <eru-time-picker [value]=\"(currentValue() ?? '') + ''\"\n    [disabled]=\"!isEditable() || mode() !== 'table'\"\n    [placeholder]=\"'HH:mm'\"\n    (valueChange)=\"onValueChange($event)\">\n  </eru-time-picker>\n  } @else {\n  <div class=\"time-display\" [class.time-display-editable]=\"isEditable() && mode() === 'table'\"\n    (dblclick)=\"onTimeActivate()\">{{currentValue() || ''}}</div>\n  }\n  }\n\n  @case ('duration') {\n  <eru-duration [value]=\"currentValue()\" [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onDurationBlur($event)\"\n    (editModeChange)=\"onDurationEditModeChange($event)\" (drilldownClick)=\"onDurationDrilldown($event)\">\n  </eru-duration>\n  }\n\n\n  @case ('priority') {\n  <eru-priority [value]=\"currentValue()\" [config]=\"getPriorityConfig()\" [eruGridStore]=\"eruGridStore()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPriorityBlur($event)\" (editModeChange)=\"onPriorityEditModeChange($event)\"\n    (drilldownClick)=\"onPriorityDrilldown($event)\">\n  </eru-priority>\n  }\n  @case ('progress') {\n  <eru-progress [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    (valueChange)=\"onValueChange($event)\" (blur)=\"onProgressBlur($event)\" (focus)=\"onProgressFocus()\"\n    (editModeChange)=\"onProgressEditModeChange($event)\" (drilldownClick)=\"onProgressDrilldown($event)\">\n  </eru-progress>\n  }\n\n  @case ('rating') {\n  <eru-rating [value]=\"currentValue()\" [config]=\"getRatingConfig()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" (valueChange)=\"onValueChange($event)\" (editModeChange)=\"onRatingEditModeChange($event)\">\n  </eru-rating>\n  }\n\n  @case ('status') {\n  <eru-status [value]=\"currentValue()\" [config]=\"getStatusConfig()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\"\n    [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onStatusBlur($event)\"\n    (editModeChange)=\"onStatusEditModeChange($event)\" (drilldownClick)=\"onStatusDrilldown($event)\">\n  </eru-status>\n  }\n\n  @case ('tag') {\n  <eru-tag [value]=\"currentValue()\" [config]=\"getTagConfig()\" [eruGridStore]=\"eruGridStore()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTagBlur($event)\"\n    (editModeChange)=\"onTagEditModeChange($event)\" (drilldownClick)=\"onTagDrilldown($event)\">\n  </eru-tag>\n  }\n\n  @case ('phone') {\n  <eru-phone [value]=\"currentValue()\" [defaultCountry]=\"columnCellConfiguration()?.default_country || 'US'\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPhoneBlur($event)\" (editModeChange)=\"onPhoneEditModeChange($event)\"\n    (drilldownClick)=\"onPhoneDrilldown($event)\">\n  </eru-phone>\n  }\n\n  @case ('dropdown_single_select') {\n  <eru-select [value]=\"currentValue()\" [config]=\"getSelectConfig()\" [row]=\"row()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [multiple]=\"false\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\"\n    [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onSelectBlur($event)\" (editModeChange)=\"onSelectEditModeChange($event)\"\n    (drilldownClick)=\"onSelectDrilldown($event)\">\n  </eru-select>\n  }\n  @case ('dropdown_multi_select') {\n  <eru-select [value]=\"currentValue()\" [config]=\"getSelectConfig()\" [row]=\"row()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [multiple]=\"true\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\"\n    [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onSelectBlur($event)\" (editModeChange)=\"onSelectEditModeChange($event)\"\n    (drilldownClick)=\"onSelectDrilldown($event)\">\n  </eru-select>\n  }\n\n  @case ('attachment') {\n  <eru-attachment [value]=\"currentValue()\" [config]=\"getAttachmentConfig()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onAttachmentBlur($event)\" (editModeChange)=\"onAttachmentEditModeChange($event)\"\n    (drilldownClick)=\"onAttachmentDrilldown($event)\">\n  </eru-attachment>\n  }\n  @case ('composite') {\n  <eru-composite [row]=\"row()\" [column]=\"column()\" [columns]=\"siblingColumns()\" [isDrillable]=\"canDrill()\"\n    (drilldownClick)=\"onCompositeDrilldown($event)\">\n  </eru-composite>\n  }\n  @case ('page') {\n  @if (cellTemplate()) {\n  <ng-container *ngTemplateOutlet=\"cellTemplate()!; context: cellTemplateContext()\"></ng-container>\n  } @else {\n  <div class=\"cell-default-display\">{{value()}}</div>\n  }\n  }\n  @default {\n  <div class=\"cell-default-display\">\n    @if (canDrill()) {\n    <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{value()}}</span>\n    } @else {\n    {{value()}}\n    }\n  </div>\n  }\n  }\n\n</div>\n\n\n<!-- <ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"singleSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_single_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_single_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" (click)=\"$event.stopPropagation()\" [ngModel]=\"optionSearchText()\"\n          (ngModelChange)=\"optionSearchText.set($event)\">\n      </mat-form-field>\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"'None'\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of filteredOptions(); track option.value || option.name) {\n        <li [cdkOption]=\"option.value || option.name\" class=\"listbox-option notext-overflow\">\n          {{option.label || option.name}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template> -->\n\n<!-- <ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"multiSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_multi_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_multi_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n          <div class=\"listbox-container\">\n        <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n          <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\"\n           (ngModelChange)=\"optionSearchText.set($event)\" (click)=\"$event.stopPropagation()\">\n        </mat-form-field>\n        \n        <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\n          <mat-checkbox \n            [checked]=\"isAllSelected()\" \n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll($event.checked)\">\n            <span class=\"select-all-text\">Select All</span>\n          </mat-checkbox>\n        </div>\n        \n        <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n          (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\" (click)=\"$event.stopPropagation()\">\n        <li [cdkOption]=\"'None'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('None')\" (click)=\"$event.stopPropagation();appendMultiSelect('None')\"></mat-checkbox>\n            <span class=\"option-text\">None</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 1')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 1')\"></mat-checkbox>\n            <span class=\"option-text\">option 1</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 2')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 2')\"></mat-checkbox>\n            <span class=\"option-text\">option 2</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 3')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 3')\"></mat-checkbox>\n            <span class=\"option-text\">option 3</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 4')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 4')\"></mat-checkbox>\n            <span class=\"option-text\">option 4</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 5'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 5')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 5')\"></mat-checkbox>\n            <span class=\"option-text\">option 5</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 6'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 6')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 6')\"></mat-checkbox>\n            <span class=\"option-text\">option 6</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 7'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 7')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 7')\"></mat-checkbox>\n            <span class=\"option-text\">option 7</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 8'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 8')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 8')\"></mat-checkbox>\n            <span class=\"option-text\">option 8</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 9'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 9')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 9')\"></mat-checkbox>\n            <span class=\"option-text\">option 9</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 10'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 10')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 10')\"></mat-checkbox>\n            <span class=\"option-text\">option 10</span>\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected(option.value)\" (click)=\"$event.stopPropagation();appendMultiSelect(option.value)\"></mat-checkbox>\n            <span class=\"option-text\">{{option.label}}</span>\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template> -->", styles: [":host{display:block;height:100%;width:100%;position:relative;overflow:hidden!important}.container{height:calc(100% - 2px);width:calc(100% - 2px);position:relative!important;overflow:hidden!important;max-width:100%!important;box-sizing:border-box!important}.container .cell-display-text{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.inputRef{height:inherit;width:inherit;border:none}.inputRef:focus{outline:none}.cell-checkbox{text-align:center}.cell-form-field{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-outline,.cell-form-field .mat-mdc-form-field-subscript-wrapper,.cell-form-field .mat-mdc-form-field-text-suffix{display:none!important}.cell-form-field .mat-mdc-form-field-wrapper,.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{width:100%!important;height:100%!important;padding:0!important;margin:0!important;min-height:auto!important;border-top:none!important}.cell-form-field input[matInput]{width:100%!important;height:100%!important;padding:2px!important;margin:0!important;border:none!important;outline:none!important;background:transparent!important;font-size:14px!important;line-height:normal!important;box-sizing:border-box!important;max-width:none!important;min-width:0!important;flex:none!important}.dropdown-menu{width:100%}.cell-display-text-editable{cursor:pointer!important}.cell-display-text{width:100%!important;height:100%!important;min-height:20px!important;display:block!important;padding:4px 8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:var(--grid-font-size-body, 12px)!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;border:none!important;outline:none!important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;box-sizing:border-box!important;transition:background-color .2s ease!important;line-height:1.4!important}.cell-display-text,.cell-display-text>*{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.cell-display-text:empty:before{content:\"Click to select\"!important;color:var(--grid-on-surface-variant, #49454f)!important;font-style:italic!important}.cell-display-number{text-align:var(--grid-number-text-align, right)}.aggregation .cell-display-number{text-align:var(--grid-aggregation-text-align, right)}.assignee-avatars{display:flex;align-items:center;padding:4px 8px;min-height:20px}.no-assignees{color:var(--grid-on-surface-variant, #49454f);font-style:italic;font-size:12px}.option-content{display:flex;align-items:center;gap:8px;width:100%}.option-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}.option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkmark{color:var(--grid-primary, #6750a4);font-weight:700;font-size:14px;flex-shrink:0}.drillable-value{color:var(--grid-primary, #6750a4);text-decoration:underline;text-decoration-color:var(--grid-primary, #6750a4);text-decoration-thickness:1px;text-underline-offset:2px;transition:all .2s ease}.drillable-link{cursor:pointer;padding:4px}.time-display{width:100%;height:100%;min-height:20px;display:block;padding:4px 8px;font-family:var(--grid-font-family, \"Poppins\");font-size:var(--grid-font-size-body, 12px);color:var(--grid-on-surface, #1d1b20);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.time-display-editable{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSliderModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: CurrencyComponent, selector: "eru-currency", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "replaceZeroValue", "placeholder", "row"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: NumberComponent, selector: "eru-number", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "replaceZeroValue", "placeholder"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: TextboxComponent, selector: "eru-textbox", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: EmailComponent, selector: "eru-email", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "placeholder", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: TextareaComponent, selector: "eru-textarea", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: WebsiteComponent, selector: "eru-website", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: LocationComponent, selector: "eru-location", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: CheckboxComponent, selector: "eru-checkbox", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "label"], outputs: ["valueChange", "change", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: DateComponent, selector: "eru-date", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "placeholder"], outputs: ["valueChange", "dateChange", "drilldownClick", "editModeChange"] }, { kind: "component", type: DatetimeComponent, selector: "eru-datetime", inputs: ["value", "isEditable", "isActive", "isDrillable", "placeholder", "config"], outputs: ["valueChange", "datetimeChange", "drilldownClick", "editModeChange"] }, { kind: "component", type: DurationComponent, selector: "eru-duration", inputs: ["value", "isEditable", "isActive", "isDrillable", "placeholder"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: PhoneComponent, selector: "eru-phone", inputs: ["value", "defaultCountry", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: ProgressComponent, selector: "eru-progress", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: RatingComponent, selector: "eru-rating", inputs: ["value", "config", "isEditable", "isActive"], outputs: ["valueChange", "editModeChange"] }, { kind: "component", type: SelectComponent, selector: "eru-select", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "multiple", "eruGridStore", "row"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: StatusComponent, selector: "eru-status", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: TagComponent, selector: "eru-tag", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange", "newTagAdded"] }, { kind: "component", type: PeopleComponent, selector: "eru-people", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "eruGridStore", "personCardTemplate"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: PriorityComponent, selector: "eru-priority", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: AttachmentComponent, selector: "eru-attachment", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange", "fileAdded", "fileDeleted", "fileViewed"] }, { kind: "component", type: TimePickerComponent, selector: "eru-time-picker", inputs: ["value", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: CompositeComponent, selector: "eru-composite", inputs: ["row", "column", "columns", "isDrillable"], outputs: ["drilldownClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "attachmentTrigger", first: true, predicate: ["attachmentTrigger"], descendants: true }, { propertyName: "singleSelectTrigger", first: true, predicate: ["singleSelectTrigger"], descendants: true }, { propertyName: "multiSelectTrigger", first: true, predicate: ["multiSelectTrigger"], descendants: true }, { propertyName: "peopleTrigger", first: true, predicate: ["peopleTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"container\" [ngStyle]=\"containerStyle()\">\n  <!-- How the cell is drawn is a separate axis from what it holds: a composite\n       or page column keeps its own datatype (and its formatting controls), so\n       the renderer is chosen before the datatype switch, not inside it. -->\n  @if (cellRender() === 'composite') {\n  <eru-composite [row]=\"row()\" [column]=\"column()\" [columns]=\"siblingColumns()\" [isDrillable]=\"canDrill()\"\n    (drilldownClick)=\"onCompositeDrilldown($event)\">\n  </eru-composite>\n  } @else if (cellRender() === 'page') {\n  @if (cellTemplate()) {\n  <ng-container *ngTemplateOutlet=\"cellTemplate()!; context: cellTemplateContext()\"></ng-container>\n  } @else {\n  <div class=\"cell-default-display\">{{value()}}</div>\n  }\n  } @else {\n  @switch (columnDatatype()) {\n  @case ('textbox') {\n  <eru-textbox [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTextboxBlur($event)\"\n    (editModeChange)=\"onTextboxEditModeChange($event)\" (drilldownClick)=\"onTextboxDrilldown($event)\">\n  </eru-textbox>\n  }\n  @case ('currency') {\n  <eru-currency [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\" [row]=\"row()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [replaceZeroValue]=\"replaceZeroValue\" (valueChange)=\"onValueChange($event)\" (blur)=\"onCurrencyBlur($event)\"\n    (editModeChange)=\"onCurrencyEditModeChange($event)\" (drilldownClick)=\"onCurrencyDrilldown($event)\">\n  </eru-currency>\n  }\n  @case ('number') {\n  <eru-number [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [replaceZeroValue]=\"replaceZeroValue\" (valueChange)=\"onValueChange($event)\" (blur)=\"onNumberBlurHandler($event)\"\n    (editModeChange)=\"onNumberEditModeChange($event)\" (drilldownClick)=\"onNumberDrilldown($event)\">\n  </eru-number>\n  }\n  @case ('location') {\n  <eru-location [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onLocationBlurHandler($event)\"\n    (editModeChange)=\"onLocationEditModeChange($event)\" (drilldownClick)=\"onLocationDrilldown($event)\">\n  </eru-location>\n  }\n  @case ('email') {\n  <eru-email [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onEmailBlurHandler($event)\"\n    (editModeChange)=\"onEmailEditModeChange($event)\" (drilldownClick)=\"onEmailDrilldown($event)\">\n  </eru-email>\n  }\n  @case ('textarea') {\n  <eru-textarea [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTextareaBlur($event)\"\n    (editModeChange)=\"onTextareaEditModeChange($event)\" (drilldownClick)=\"onTextareaDrilldown($event)\">\n  </eru-textarea>\n  }\n  @case ('website') {\n  <eru-website [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onWebsiteBlur($event)\"\n    (editModeChange)=\"onWebsiteEditModeChange($event)\" (drilldownClick)=\"onWebsiteDrilldown($event)\">\n  </eru-website>\n  }\n  <!--  @case ('dropdown_multi_select') {\n      <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" #multiSelectTrigger\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}</span>\n        } @else {\n          {{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}\n        }\n      </div>\n    } -->\n\n  <!-- @case ('dropdown_single_select') {\n    <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" cdkOverlayOrigin #singleSelectTrigger=\"cdkOverlayOrigin\"\n    [class.cell-display-text-editable]=\"isEditable()\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n      } @else {\n        {{currentValue()}}\n      }\n    </div>\n  } -->\n\n  @case ('checkbox') {\n  <eru-checkbox [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onCheckboxBlur($event)\"\n    (editModeChange)=\"onCheckboxEditModeChange($event)\" (drilldownClick)=\"onCheckboxDrilldown($event)\">\n  </eru-checkbox>\n  }\n\n  @case ('people') {\n  <eru-people [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [personCardTemplate]=\"personCardTemplate()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPeopleBlur($event)\" (editModeChange)=\"onPeopleEditModeChange($event)\"\n    (drilldownClick)=\"onPeopleDrilldown($event)\">\n  </eru-people>\n  }\n\n\n  @case ('date') {\n  <eru-date [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (editModeChange)=\"onDateEditModeChange($event)\"\n    (drilldownClick)=\"onDateDrilldown($event)\">\n  </eru-date>\n  }\n\n  @case ('datetime') {\n  <eru-datetime [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\"\n    (editModeChange)=\"onDatetimeEditModeChange($event)\" (drilldownClick)=\"onDatetimeDrilldown($event)\">\n  </eru-datetime>\n  }\n\n  @case ('time') {\n  <!-- The time-picker component existed but had no datatype and no case here, so\n       a time field fell through to the plain-text renderer.\n\n       Mounted only while the cell is being edited, matching date/datetime. It\n       carries a mat-form-field, and rendering one per row costs a form field on\n       every visible time cell to show what is really just \"HH:mm\" text. The two\n       other places that embed eru-time-picker (duration, datetime) already only\n       mount it inside their own open editors. -->\n  @if (isActive()) {\n  <eru-time-picker [value]=\"(currentValue() ?? '') + ''\"\n    [disabled]=\"!isEditable() || mode() !== 'table'\"\n    [placeholder]=\"'HH:mm'\"\n    (valueChange)=\"onValueChange($event)\">\n  </eru-time-picker>\n  } @else {\n  <div class=\"time-display\" [class.time-display-editable]=\"isEditable() && mode() === 'table'\"\n    (dblclick)=\"onTimeActivate()\">{{currentValue() || ''}}</div>\n  }\n  }\n\n  @case ('duration') {\n  <eru-duration [value]=\"currentValue()\" [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onDurationBlur($event)\"\n    (editModeChange)=\"onDurationEditModeChange($event)\" (drilldownClick)=\"onDurationDrilldown($event)\">\n  </eru-duration>\n  }\n\n\n  @case ('priority') {\n  <eru-priority [value]=\"currentValue()\" [config]=\"getPriorityConfig()\" [eruGridStore]=\"eruGridStore()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPriorityBlur($event)\" (editModeChange)=\"onPriorityEditModeChange($event)\"\n    (drilldownClick)=\"onPriorityDrilldown($event)\">\n  </eru-priority>\n  }\n  @case ('progress') {\n  <eru-progress [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    (valueChange)=\"onValueChange($event)\" (blur)=\"onProgressBlur($event)\" (focus)=\"onProgressFocus()\"\n    (editModeChange)=\"onProgressEditModeChange($event)\" (drilldownClick)=\"onProgressDrilldown($event)\">\n  </eru-progress>\n  }\n\n  @case ('rating') {\n  <eru-rating [value]=\"currentValue()\" [config]=\"getRatingConfig()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" (valueChange)=\"onValueChange($event)\" (editModeChange)=\"onRatingEditModeChange($event)\">\n  </eru-rating>\n  }\n\n  @case ('status') {\n  <eru-status [value]=\"currentValue()\" [config]=\"getStatusConfig()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\"\n    [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onStatusBlur($event)\"\n    (editModeChange)=\"onStatusEditModeChange($event)\" (drilldownClick)=\"onStatusDrilldown($event)\">\n  </eru-status>\n  }\n\n  @case ('tag') {\n  <eru-tag [value]=\"currentValue()\" [config]=\"getTagConfig()\" [eruGridStore]=\"eruGridStore()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTagBlur($event)\"\n    (editModeChange)=\"onTagEditModeChange($event)\" (drilldownClick)=\"onTagDrilldown($event)\">\n  </eru-tag>\n  }\n\n  @case ('phone') {\n  <eru-phone [value]=\"currentValue()\" [defaultCountry]=\"columnCellConfiguration()?.default_country || 'US'\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPhoneBlur($event)\" (editModeChange)=\"onPhoneEditModeChange($event)\"\n    (drilldownClick)=\"onPhoneDrilldown($event)\">\n  </eru-phone>\n  }\n\n  @case ('dropdown_single_select') {\n  <eru-select [value]=\"currentValue()\" [config]=\"getSelectConfig()\" [row]=\"row()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [multiple]=\"false\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\"\n    [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onSelectBlur($event)\" (editModeChange)=\"onSelectEditModeChange($event)\"\n    (drilldownClick)=\"onSelectDrilldown($event)\">\n  </eru-select>\n  }\n  @case ('dropdown_multi_select') {\n  <eru-select [value]=\"currentValue()\" [config]=\"getSelectConfig()\" [row]=\"row()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [multiple]=\"true\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\"\n    [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onSelectBlur($event)\" (editModeChange)=\"onSelectEditModeChange($event)\"\n    (drilldownClick)=\"onSelectDrilldown($event)\">\n  </eru-select>\n  }\n\n  @case ('attachment') {\n  <eru-attachment [value]=\"currentValue()\" [config]=\"getAttachmentConfig()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onAttachmentBlur($event)\" (editModeChange)=\"onAttachmentEditModeChange($event)\"\n    (drilldownClick)=\"onAttachmentDrilldown($event)\">\n  </eru-attachment>\n  }\n  @default {\n  <div class=\"cell-default-display\">\n    @if (canDrill()) {\n    <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{value()}}</span>\n    } @else {\n    {{value()}}\n    }\n  </div>\n  }\n  }\n  }\n\n</div>\n\n\n<!-- <ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"singleSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_single_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_single_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" (click)=\"$event.stopPropagation()\" [ngModel]=\"optionSearchText()\"\n          (ngModelChange)=\"optionSearchText.set($event)\">\n      </mat-form-field>\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"'None'\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of filteredOptions(); track option.value || option.name) {\n        <li [cdkOption]=\"option.value || option.name\" class=\"listbox-option notext-overflow\">\n          {{option.label || option.name}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template> -->\n\n<!-- <ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"multiSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_multi_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_multi_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n          <div class=\"listbox-container\">\n        <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n          <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\"\n           (ngModelChange)=\"optionSearchText.set($event)\" (click)=\"$event.stopPropagation()\">\n        </mat-form-field>\n        \n        <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\n          <mat-checkbox \n            [checked]=\"isAllSelected()\" \n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll($event.checked)\">\n            <span class=\"select-all-text\">Select All</span>\n          </mat-checkbox>\n        </div>\n        \n        <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n          (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\" (click)=\"$event.stopPropagation()\">\n        <li [cdkOption]=\"'None'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('None')\" (click)=\"$event.stopPropagation();appendMultiSelect('None')\"></mat-checkbox>\n            <span class=\"option-text\">None</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 1')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 1')\"></mat-checkbox>\n            <span class=\"option-text\">option 1</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 2')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 2')\"></mat-checkbox>\n            <span class=\"option-text\">option 2</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 3')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 3')\"></mat-checkbox>\n            <span class=\"option-text\">option 3</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 4')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 4')\"></mat-checkbox>\n            <span class=\"option-text\">option 4</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 5'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 5')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 5')\"></mat-checkbox>\n            <span class=\"option-text\">option 5</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 6'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 6')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 6')\"></mat-checkbox>\n            <span class=\"option-text\">option 6</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 7'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 7')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 7')\"></mat-checkbox>\n            <span class=\"option-text\">option 7</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 8'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 8')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 8')\"></mat-checkbox>\n            <span class=\"option-text\">option 8</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 9'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 9')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 9')\"></mat-checkbox>\n            <span class=\"option-text\">option 9</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 10'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 10')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 10')\"></mat-checkbox>\n            <span class=\"option-text\">option 10</span>\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected(option.value)\" (click)=\"$event.stopPropagation();appendMultiSelect(option.value)\"></mat-checkbox>\n            <span class=\"option-text\">{{option.label}}</span>\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template> -->", styles: [":host{display:block;height:100%;width:100%;position:relative;overflow:hidden!important}.container{height:calc(100% - 2px);width:calc(100% - 2px);position:relative!important;overflow:hidden!important;max-width:100%!important;box-sizing:border-box!important}.container .cell-display-text{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.inputRef{height:inherit;width:inherit;border:none}.inputRef:focus{outline:none}.cell-checkbox{text-align:center}.cell-form-field{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-outline,.cell-form-field .mat-mdc-form-field-subscript-wrapper,.cell-form-field .mat-mdc-form-field-text-suffix{display:none!important}.cell-form-field .mat-mdc-form-field-wrapper,.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{width:100%!important;height:100%!important;padding:0!important;margin:0!important;min-height:auto!important;border-top:none!important}.cell-form-field input[matInput]{width:100%!important;height:100%!important;padding:2px!important;margin:0!important;border:none!important;outline:none!important;background:transparent!important;font-size:14px!important;line-height:normal!important;box-sizing:border-box!important;max-width:none!important;min-width:0!important;flex:none!important}.dropdown-menu{width:100%}.cell-display-text-editable{cursor:pointer!important}.cell-display-text{width:100%!important;height:100%!important;min-height:20px!important;display:block!important;padding:4px 8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:var(--grid-font-size-body, 12px)!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;border:none!important;outline:none!important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;box-sizing:border-box!important;transition:background-color .2s ease!important;line-height:1.4!important}.cell-display-text,.cell-display-text>*{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.cell-display-text:empty:before{content:\"Click to select\"!important;color:var(--grid-on-surface-variant, #49454f)!important;font-style:italic!important}.cell-display-number{text-align:var(--grid-number-text-align, right)}.aggregation .cell-display-number{text-align:var(--grid-aggregation-text-align, right)}.assignee-avatars{display:flex;align-items:center;padding:4px 8px;min-height:20px}.no-assignees{color:var(--grid-on-surface-variant, #49454f);font-style:italic;font-size:12px}.option-content{display:flex;align-items:center;gap:8px;width:100%}.option-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}.option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkmark{color:var(--grid-primary, #6750a4);font-weight:700;font-size:14px;flex-shrink:0}.drillable-value{color:var(--grid-primary, #6750a4);text-decoration:underline;text-decoration-color:var(--grid-primary, #6750a4);text-decoration-thickness:1px;text-underline-offset:2px;transition:all .2s ease}.drillable-link{cursor:pointer;padding:4px}.time-display{width:100%;height:100%;min-height:20px;display:block;padding:4px 8px;font-family:var(--grid-font-family, \"Poppins\");font-size:var(--grid-font-size-body, 12px);color:var(--grid-on-surface, #1d1b20);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.time-display-editable{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSliderModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: CurrencyComponent, selector: "eru-currency", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "replaceZeroValue", "placeholder", "row"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: NumberComponent, selector: "eru-number", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "replaceZeroValue", "placeholder"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: TextboxComponent, selector: "eru-textbox", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: EmailComponent, selector: "eru-email", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "placeholder", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: TextareaComponent, selector: "eru-textarea", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: WebsiteComponent, selector: "eru-website", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: LocationComponent, selector: "eru-location", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore", "externalError"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "validationError", "editModeChange"] }, { kind: "component", type: CheckboxComponent, selector: "eru-checkbox", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "label"], outputs: ["valueChange", "change", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: DateComponent, selector: "eru-date", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "placeholder"], outputs: ["valueChange", "dateChange", "drilldownClick", "editModeChange"] }, { kind: "component", type: DatetimeComponent, selector: "eru-datetime", inputs: ["value", "isEditable", "isActive", "isDrillable", "placeholder", "config"], outputs: ["valueChange", "datetimeChange", "drilldownClick", "editModeChange"] }, { kind: "component", type: DurationComponent, selector: "eru-duration", inputs: ["value", "isEditable", "isActive", "isDrillable", "placeholder"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: PhoneComponent, selector: "eru-phone", inputs: ["value", "defaultCountry", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: ProgressComponent, selector: "eru-progress", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: RatingComponent, selector: "eru-rating", inputs: ["value", "config", "isEditable", "isActive"], outputs: ["valueChange", "editModeChange"] }, { kind: "component", type: SelectComponent, selector: "eru-select", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "multiple", "eruGridStore", "row"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: StatusComponent, selector: "eru-status", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: TagComponent, selector: "eru-tag", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange", "newTagAdded"] }, { kind: "component", type: PeopleComponent, selector: "eru-people", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "eruGridStore", "personCardTemplate"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: PriorityComponent, selector: "eru-priority", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "fieldSize", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange"] }, { kind: "component", type: AttachmentComponent, selector: "eru-attachment", inputs: ["value", "config", "isEditable", "isActive", "isDrillable", "columnWidth", "eruGridStore"], outputs: ["valueChange", "blur", "focus", "drilldownClick", "editModeChange", "fileAdded", "fileUpload", "fileDeleted", "fileViewed"] }, { kind: "component", type: TimePickerComponent, selector: "eru-time-picker", inputs: ["value", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: CompositeComponent, selector: "eru-composite", inputs: ["row", "column", "columns", "isDrillable"], outputs: ["drilldownClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DataCellComponent, decorators: [{
             type: Component,
@@ -12419,7 +12801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         ...MATERIAL_PROVIDERS
                     ], host: {
                         'class': 'data-cell-component'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"container\" [ngStyle]=\"containerStyle()\">\n  @switch (columnDatatype()) {\n  @case ('textbox') {\n  <eru-textbox [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTextboxBlur($event)\"\n    (editModeChange)=\"onTextboxEditModeChange($event)\" (drilldownClick)=\"onTextboxDrilldown($event)\">\n  </eru-textbox>\n  }\n  @case ('currency') {\n  <eru-currency [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\" [row]=\"row()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [replaceZeroValue]=\"replaceZeroValue\" (valueChange)=\"onValueChange($event)\" (blur)=\"onCurrencyBlur($event)\"\n    (editModeChange)=\"onCurrencyEditModeChange($event)\" (drilldownClick)=\"onCurrencyDrilldown($event)\">\n  </eru-currency>\n  }\n  @case ('number') {\n  <eru-number [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [replaceZeroValue]=\"replaceZeroValue\" (valueChange)=\"onValueChange($event)\" (blur)=\"onNumberBlurHandler($event)\"\n    (editModeChange)=\"onNumberEditModeChange($event)\" (drilldownClick)=\"onNumberDrilldown($event)\">\n  </eru-number>\n  }\n  @case ('location') {\n  <eru-location [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onLocationBlurHandler($event)\"\n    (editModeChange)=\"onLocationEditModeChange($event)\" (drilldownClick)=\"onLocationDrilldown($event)\">\n  </eru-location>\n  }\n  @case ('email') {\n  <eru-email [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onEmailBlurHandler($event)\"\n    (editModeChange)=\"onEmailEditModeChange($event)\" (drilldownClick)=\"onEmailDrilldown($event)\">\n  </eru-email>\n  }\n  @case ('textarea') {\n  <eru-textarea [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTextareaBlur($event)\"\n    (editModeChange)=\"onTextareaEditModeChange($event)\" (drilldownClick)=\"onTextareaDrilldown($event)\">\n  </eru-textarea>\n  }\n  @case ('website') {\n  <eru-website [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onWebsiteBlur($event)\"\n    (editModeChange)=\"onWebsiteEditModeChange($event)\" (drilldownClick)=\"onWebsiteDrilldown($event)\">\n  </eru-website>\n  }\n  <!--  @case ('dropdown_multi_select') {\n      <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" #multiSelectTrigger\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}</span>\n        } @else {\n          {{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}\n        }\n      </div>\n    } -->\n\n  <!-- @case ('dropdown_single_select') {\n    <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" cdkOverlayOrigin #singleSelectTrigger=\"cdkOverlayOrigin\"\n    [class.cell-display-text-editable]=\"isEditable()\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n      } @else {\n        {{currentValue()}}\n      }\n    </div>\n  } -->\n\n  @case ('checkbox') {\n  <eru-checkbox [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onCheckboxBlur($event)\"\n    (editModeChange)=\"onCheckboxEditModeChange($event)\" (drilldownClick)=\"onCheckboxDrilldown($event)\">\n  </eru-checkbox>\n  }\n\n  @case ('people') {\n  <eru-people [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [personCardTemplate]=\"personCardTemplate()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPeopleBlur($event)\" (editModeChange)=\"onPeopleEditModeChange($event)\"\n    (drilldownClick)=\"onPeopleDrilldown($event)\">\n  </eru-people>\n  }\n\n\n  @case ('date') {\n  <eru-date [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (editModeChange)=\"onDateEditModeChange($event)\"\n    (drilldownClick)=\"onDateDrilldown($event)\">\n  </eru-date>\n  }\n\n  @case ('datetime') {\n  <eru-datetime [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\"\n    (editModeChange)=\"onDatetimeEditModeChange($event)\" (drilldownClick)=\"onDatetimeDrilldown($event)\">\n  </eru-datetime>\n  }\n\n  @case ('time') {\n  <!-- The time-picker component existed but had no datatype and no case here, so\n       a time field fell through to the plain-text renderer.\n\n       Mounted only while the cell is being edited, matching date/datetime. It\n       carries a mat-form-field, and rendering one per row costs a form field on\n       every visible time cell to show what is really just \"HH:mm\" text. The two\n       other places that embed eru-time-picker (duration, datetime) already only\n       mount it inside their own open editors. -->\n  @if (isActive()) {\n  <eru-time-picker [value]=\"(currentValue() ?? '') + ''\"\n    [disabled]=\"!isEditable() || mode() !== 'table'\"\n    [placeholder]=\"'HH:mm'\"\n    (valueChange)=\"onValueChange($event)\">\n  </eru-time-picker>\n  } @else {\n  <div class=\"time-display\" [class.time-display-editable]=\"isEditable() && mode() === 'table'\"\n    (dblclick)=\"onTimeActivate()\">{{currentValue() || ''}}</div>\n  }\n  }\n\n  @case ('duration') {\n  <eru-duration [value]=\"currentValue()\" [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onDurationBlur($event)\"\n    (editModeChange)=\"onDurationEditModeChange($event)\" (drilldownClick)=\"onDurationDrilldown($event)\">\n  </eru-duration>\n  }\n\n\n  @case ('priority') {\n  <eru-priority [value]=\"currentValue()\" [config]=\"getPriorityConfig()\" [eruGridStore]=\"eruGridStore()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPriorityBlur($event)\" (editModeChange)=\"onPriorityEditModeChange($event)\"\n    (drilldownClick)=\"onPriorityDrilldown($event)\">\n  </eru-priority>\n  }\n  @case ('progress') {\n  <eru-progress [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    (valueChange)=\"onValueChange($event)\" (blur)=\"onProgressBlur($event)\" (focus)=\"onProgressFocus()\"\n    (editModeChange)=\"onProgressEditModeChange($event)\" (drilldownClick)=\"onProgressDrilldown($event)\">\n  </eru-progress>\n  }\n\n  @case ('rating') {\n  <eru-rating [value]=\"currentValue()\" [config]=\"getRatingConfig()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" (valueChange)=\"onValueChange($event)\" (editModeChange)=\"onRatingEditModeChange($event)\">\n  </eru-rating>\n  }\n\n  @case ('status') {\n  <eru-status [value]=\"currentValue()\" [config]=\"getStatusConfig()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\"\n    [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onStatusBlur($event)\"\n    (editModeChange)=\"onStatusEditModeChange($event)\" (drilldownClick)=\"onStatusDrilldown($event)\">\n  </eru-status>\n  }\n\n  @case ('tag') {\n  <eru-tag [value]=\"currentValue()\" [config]=\"getTagConfig()\" [eruGridStore]=\"eruGridStore()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTagBlur($event)\"\n    (editModeChange)=\"onTagEditModeChange($event)\" (drilldownClick)=\"onTagDrilldown($event)\">\n  </eru-tag>\n  }\n\n  @case ('phone') {\n  <eru-phone [value]=\"currentValue()\" [defaultCountry]=\"columnCellConfiguration()?.default_country || 'US'\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPhoneBlur($event)\" (editModeChange)=\"onPhoneEditModeChange($event)\"\n    (drilldownClick)=\"onPhoneDrilldown($event)\">\n  </eru-phone>\n  }\n\n  @case ('dropdown_single_select') {\n  <eru-select [value]=\"currentValue()\" [config]=\"getSelectConfig()\" [row]=\"row()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [multiple]=\"false\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\"\n    [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onSelectBlur($event)\" (editModeChange)=\"onSelectEditModeChange($event)\"\n    (drilldownClick)=\"onSelectDrilldown($event)\">\n  </eru-select>\n  }\n  @case ('dropdown_multi_select') {\n  <eru-select [value]=\"currentValue()\" [config]=\"getSelectConfig()\" [row]=\"row()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [multiple]=\"true\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\"\n    [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onSelectBlur($event)\" (editModeChange)=\"onSelectEditModeChange($event)\"\n    (drilldownClick)=\"onSelectDrilldown($event)\">\n  </eru-select>\n  }\n\n  @case ('attachment') {\n  <eru-attachment [value]=\"currentValue()\" [config]=\"getAttachmentConfig()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onAttachmentBlur($event)\" (editModeChange)=\"onAttachmentEditModeChange($event)\"\n    (drilldownClick)=\"onAttachmentDrilldown($event)\">\n  </eru-attachment>\n  }\n  @case ('composite') {\n  <eru-composite [row]=\"row()\" [column]=\"column()\" [columns]=\"siblingColumns()\" [isDrillable]=\"canDrill()\"\n    (drilldownClick)=\"onCompositeDrilldown($event)\">\n  </eru-composite>\n  }\n  @case ('page') {\n  @if (cellTemplate()) {\n  <ng-container *ngTemplateOutlet=\"cellTemplate()!; context: cellTemplateContext()\"></ng-container>\n  } @else {\n  <div class=\"cell-default-display\">{{value()}}</div>\n  }\n  }\n  @default {\n  <div class=\"cell-default-display\">\n    @if (canDrill()) {\n    <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{value()}}</span>\n    } @else {\n    {{value()}}\n    }\n  </div>\n  }\n  }\n\n</div>\n\n\n<!-- <ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"singleSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_single_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_single_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" (click)=\"$event.stopPropagation()\" [ngModel]=\"optionSearchText()\"\n          (ngModelChange)=\"optionSearchText.set($event)\">\n      </mat-form-field>\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"'None'\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of filteredOptions(); track option.value || option.name) {\n        <li [cdkOption]=\"option.value || option.name\" class=\"listbox-option notext-overflow\">\n          {{option.label || option.name}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template> -->\n\n<!-- <ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"multiSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_multi_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_multi_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n          <div class=\"listbox-container\">\n        <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n          <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\"\n           (ngModelChange)=\"optionSearchText.set($event)\" (click)=\"$event.stopPropagation()\">\n        </mat-form-field>\n        \n        <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\n          <mat-checkbox \n            [checked]=\"isAllSelected()\" \n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll($event.checked)\">\n            <span class=\"select-all-text\">Select All</span>\n          </mat-checkbox>\n        </div>\n        \n        <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n          (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\" (click)=\"$event.stopPropagation()\">\n        <li [cdkOption]=\"'None'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('None')\" (click)=\"$event.stopPropagation();appendMultiSelect('None')\"></mat-checkbox>\n            <span class=\"option-text\">None</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 1')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 1')\"></mat-checkbox>\n            <span class=\"option-text\">option 1</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 2')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 2')\"></mat-checkbox>\n            <span class=\"option-text\">option 2</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 3')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 3')\"></mat-checkbox>\n            <span class=\"option-text\">option 3</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 4')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 4')\"></mat-checkbox>\n            <span class=\"option-text\">option 4</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 5'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 5')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 5')\"></mat-checkbox>\n            <span class=\"option-text\">option 5</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 6'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 6')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 6')\"></mat-checkbox>\n            <span class=\"option-text\">option 6</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 7'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 7')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 7')\"></mat-checkbox>\n            <span class=\"option-text\">option 7</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 8'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 8')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 8')\"></mat-checkbox>\n            <span class=\"option-text\">option 8</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 9'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 9')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 9')\"></mat-checkbox>\n            <span class=\"option-text\">option 9</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 10'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 10')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 10')\"></mat-checkbox>\n            <span class=\"option-text\">option 10</span>\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected(option.value)\" (click)=\"$event.stopPropagation();appendMultiSelect(option.value)\"></mat-checkbox>\n            <span class=\"option-text\">{{option.label}}</span>\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template> -->", styles: [":host{display:block;height:100%;width:100%;position:relative;overflow:hidden!important}.container{height:calc(100% - 2px);width:calc(100% - 2px);position:relative!important;overflow:hidden!important;max-width:100%!important;box-sizing:border-box!important}.container .cell-display-text{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.inputRef{height:inherit;width:inherit;border:none}.inputRef:focus{outline:none}.cell-checkbox{text-align:center}.cell-form-field{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-outline,.cell-form-field .mat-mdc-form-field-subscript-wrapper,.cell-form-field .mat-mdc-form-field-text-suffix{display:none!important}.cell-form-field .mat-mdc-form-field-wrapper,.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{width:100%!important;height:100%!important;padding:0!important;margin:0!important;min-height:auto!important;border-top:none!important}.cell-form-field input[matInput]{width:100%!important;height:100%!important;padding:2px!important;margin:0!important;border:none!important;outline:none!important;background:transparent!important;font-size:14px!important;line-height:normal!important;box-sizing:border-box!important;max-width:none!important;min-width:0!important;flex:none!important}.dropdown-menu{width:100%}.cell-display-text-editable{cursor:pointer!important}.cell-display-text{width:100%!important;height:100%!important;min-height:20px!important;display:block!important;padding:4px 8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:var(--grid-font-size-body, 12px)!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;border:none!important;outline:none!important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;box-sizing:border-box!important;transition:background-color .2s ease!important;line-height:1.4!important}.cell-display-text,.cell-display-text>*{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.cell-display-text:empty:before{content:\"Click to select\"!important;color:var(--grid-on-surface-variant, #49454f)!important;font-style:italic!important}.cell-display-number{text-align:var(--grid-number-text-align, right)}.aggregation .cell-display-number{text-align:var(--grid-aggregation-text-align, right)}.assignee-avatars{display:flex;align-items:center;padding:4px 8px;min-height:20px}.no-assignees{color:var(--grid-on-surface-variant, #49454f);font-style:italic;font-size:12px}.option-content{display:flex;align-items:center;gap:8px;width:100%}.option-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}.option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkmark{color:var(--grid-primary, #6750a4);font-weight:700;font-size:14px;flex-shrink:0}.drillable-value{color:var(--grid-primary, #6750a4);text-decoration:underline;text-decoration-color:var(--grid-primary, #6750a4);text-decoration-thickness:1px;text-underline-offset:2px;transition:all .2s ease}.drillable-link{cursor:pointer;padding:4px}.time-display{width:100%;height:100%;min-height:20px;display:block;padding:4px 8px;font-family:var(--grid-font-family, \"Poppins\");font-size:var(--grid-font-size-body, 12px);color:var(--grid-on-surface, #1d1b20);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.time-display-editable{cursor:pointer}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"container\" [ngStyle]=\"containerStyle()\">\n  <!-- How the cell is drawn is a separate axis from what it holds: a composite\n       or page column keeps its own datatype (and its formatting controls), so\n       the renderer is chosen before the datatype switch, not inside it. -->\n  @if (cellRender() === 'composite') {\n  <eru-composite [row]=\"row()\" [column]=\"column()\" [columns]=\"siblingColumns()\" [isDrillable]=\"canDrill()\"\n    (drilldownClick)=\"onCompositeDrilldown($event)\">\n  </eru-composite>\n  } @else if (cellRender() === 'page') {\n  @if (cellTemplate()) {\n  <ng-container *ngTemplateOutlet=\"cellTemplate()!; context: cellTemplateContext()\"></ng-container>\n  } @else {\n  <div class=\"cell-default-display\">{{value()}}</div>\n  }\n  } @else {\n  @switch (columnDatatype()) {\n  @case ('textbox') {\n  <eru-textbox [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTextboxBlur($event)\"\n    (editModeChange)=\"onTextboxEditModeChange($event)\" (drilldownClick)=\"onTextboxDrilldown($event)\">\n  </eru-textbox>\n  }\n  @case ('currency') {\n  <eru-currency [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\" [row]=\"row()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [replaceZeroValue]=\"replaceZeroValue\" (valueChange)=\"onValueChange($event)\" (blur)=\"onCurrencyBlur($event)\"\n    (editModeChange)=\"onCurrencyEditModeChange($event)\" (drilldownClick)=\"onCurrencyDrilldown($event)\">\n  </eru-currency>\n  }\n  @case ('number') {\n  <eru-number [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [replaceZeroValue]=\"replaceZeroValue\" (valueChange)=\"onValueChange($event)\" (blur)=\"onNumberBlurHandler($event)\"\n    (editModeChange)=\"onNumberEditModeChange($event)\" (drilldownClick)=\"onNumberDrilldown($event)\">\n  </eru-number>\n  }\n  @case ('location') {\n  <eru-location [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onLocationBlurHandler($event)\"\n    (editModeChange)=\"onLocationEditModeChange($event)\" (drilldownClick)=\"onLocationDrilldown($event)\">\n  </eru-location>\n  }\n  @case ('email') {\n  <eru-email [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onEmailBlurHandler($event)\"\n    (editModeChange)=\"onEmailEditModeChange($event)\" (drilldownClick)=\"onEmailDrilldown($event)\">\n  </eru-email>\n  }\n  @case ('textarea') {\n  <eru-textarea [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTextareaBlur($event)\"\n    (editModeChange)=\"onTextareaEditModeChange($event)\" (drilldownClick)=\"onTextareaDrilldown($event)\">\n  </eru-textarea>\n  }\n  @case ('website') {\n  <eru-website [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    [externalError]=\"error()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onWebsiteBlur($event)\"\n    (editModeChange)=\"onWebsiteEditModeChange($event)\" (drilldownClick)=\"onWebsiteDrilldown($event)\">\n  </eru-website>\n  }\n  <!--  @case ('dropdown_multi_select') {\n      <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" #multiSelectTrigger\n      [class.cell-display-text-editable]=\"isEditable()\">\n        @if (drillable()) {\n          <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}</span>\n        } @else {\n          {{formattedMultiSelectValue(currentColumnWidth()) || 'Click to select'}}\n        }\n      </div>\n    } -->\n\n  <!-- @case ('dropdown_single_select') {\n    <div class=\"cell-display-text\" (dblclick)=\"toggleOverlayMenu($event)\" cdkOverlayOrigin #singleSelectTrigger=\"cdkOverlayOrigin\"\n    [class.cell-display-text-editable]=\"isEditable()\">\n      @if (drillable()) {\n        <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{currentValue()}}</span>\n      } @else {\n        {{currentValue()}}\n      }\n    </div>\n  } -->\n\n  @case ('checkbox') {\n  <eru-checkbox [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onCheckboxBlur($event)\"\n    (editModeChange)=\"onCheckboxEditModeChange($event)\" (drilldownClick)=\"onCheckboxDrilldown($event)\">\n  </eru-checkbox>\n  }\n\n  @case ('people') {\n  <eru-people [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [personCardTemplate]=\"personCardTemplate()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPeopleBlur($event)\" (editModeChange)=\"onPeopleEditModeChange($event)\"\n    (drilldownClick)=\"onPeopleDrilldown($event)\">\n  </eru-people>\n  }\n\n\n  @case ('date') {\n  <eru-date [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (editModeChange)=\"onDateEditModeChange($event)\"\n    (drilldownClick)=\"onDateDrilldown($event)\">\n  </eru-date>\n  }\n\n  @case ('datetime') {\n  <eru-datetime [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\"\n    (editModeChange)=\"onDatetimeEditModeChange($event)\" (drilldownClick)=\"onDatetimeDrilldown($event)\">\n  </eru-datetime>\n  }\n\n  @case ('time') {\n  <!-- The time-picker component existed but had no datatype and no case here, so\n       a time field fell through to the plain-text renderer.\n\n       Mounted only while the cell is being edited, matching date/datetime. It\n       carries a mat-form-field, and rendering one per row costs a form field on\n       every visible time cell to show what is really just \"HH:mm\" text. The two\n       other places that embed eru-time-picker (duration, datetime) already only\n       mount it inside their own open editors. -->\n  @if (isActive()) {\n  <eru-time-picker [value]=\"(currentValue() ?? '') + ''\"\n    [disabled]=\"!isEditable() || mode() !== 'table'\"\n    [placeholder]=\"'HH:mm'\"\n    (valueChange)=\"onValueChange($event)\">\n  </eru-time-picker>\n  } @else {\n  <div class=\"time-display\" [class.time-display-editable]=\"isEditable() && mode() === 'table'\"\n    (dblclick)=\"onTimeActivate()\">{{currentValue() || ''}}</div>\n  }\n  }\n\n  @case ('duration') {\n  <eru-duration [value]=\"currentValue()\" [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\"\n    [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onDurationBlur($event)\"\n    (editModeChange)=\"onDurationEditModeChange($event)\" (drilldownClick)=\"onDurationDrilldown($event)\">\n  </eru-duration>\n  }\n\n\n  @case ('priority') {\n  <eru-priority [value]=\"currentValue()\" [config]=\"getPriorityConfig()\" [eruGridStore]=\"eruGridStore()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPriorityBlur($event)\" (editModeChange)=\"onPriorityEditModeChange($event)\"\n    (drilldownClick)=\"onPriorityDrilldown($event)\">\n  </eru-priority>\n  }\n  @case ('progress') {\n  <eru-progress [value]=\"currentValue()\" [config]=\"columnCellConfiguration()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\"\n    (valueChange)=\"onValueChange($event)\" (blur)=\"onProgressBlur($event)\" (focus)=\"onProgressFocus()\"\n    (editModeChange)=\"onProgressEditModeChange($event)\" (drilldownClick)=\"onProgressDrilldown($event)\">\n  </eru-progress>\n  }\n\n  @case ('rating') {\n  <eru-rating [value]=\"currentValue()\" [config]=\"getRatingConfig()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" (valueChange)=\"onValueChange($event)\" (editModeChange)=\"onRatingEditModeChange($event)\">\n  </eru-rating>\n  }\n\n  @case ('status') {\n  <eru-status [value]=\"currentValue()\" [config]=\"getStatusConfig()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\"\n    [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onStatusBlur($event)\"\n    (editModeChange)=\"onStatusEditModeChange($event)\" (drilldownClick)=\"onStatusDrilldown($event)\">\n  </eru-status>\n  }\n\n  @case ('tag') {\n  <eru-tag [value]=\"currentValue()\" [config]=\"getTagConfig()\" [eruGridStore]=\"eruGridStore()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\" (valueChange)=\"onValueChange($event)\" (blur)=\"onTagBlur($event)\"\n    (editModeChange)=\"onTagEditModeChange($event)\" (drilldownClick)=\"onTagDrilldown($event)\">\n  </eru-tag>\n  }\n\n  @case ('phone') {\n  <eru-phone [value]=\"currentValue()\" [defaultCountry]=\"columnCellConfiguration()?.default_country || 'US'\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [fieldSize]=\"fieldSize()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onPhoneBlur($event)\" (editModeChange)=\"onPhoneEditModeChange($event)\"\n    (drilldownClick)=\"onPhoneDrilldown($event)\">\n  </eru-phone>\n  }\n\n  @case ('dropdown_single_select') {\n  <eru-select [value]=\"currentValue()\" [config]=\"getSelectConfig()\" [row]=\"row()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [multiple]=\"false\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\"\n    [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onSelectBlur($event)\" (editModeChange)=\"onSelectEditModeChange($event)\"\n    (drilldownClick)=\"onSelectDrilldown($event)\">\n  </eru-select>\n  }\n  @case ('dropdown_multi_select') {\n  <eru-select [value]=\"currentValue()\" [config]=\"getSelectConfig()\" [row]=\"row()\" [isEditable]=\"isEditable() && mode() === 'table'\"\n    [isActive]=\"isActive()\" [multiple]=\"true\" [isDrillable]=\"canDrill()\" [columnWidth]=\"currentColumnWidth()\"\n    [fieldSize]=\"fieldSize()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onSelectBlur($event)\" (editModeChange)=\"onSelectEditModeChange($event)\"\n    (drilldownClick)=\"onSelectDrilldown($event)\">\n  </eru-select>\n  }\n\n  @case ('attachment') {\n  <eru-attachment [value]=\"currentValue()\" [config]=\"getAttachmentConfig()\"\n    [isEditable]=\"isEditable() && mode() === 'table'\" [isActive]=\"isActive()\" [isDrillable]=\"canDrill()\"\n    [columnWidth]=\"currentColumnWidth()\" [eruGridStore]=\"eruGridStore()\" (valueChange)=\"onValueChange($event)\"\n    (blur)=\"onAttachmentBlur($event)\" (editModeChange)=\"onAttachmentEditModeChange($event)\"\n    (drilldownClick)=\"onAttachmentDrilldown($event)\">\n  </eru-attachment>\n  }\n  @default {\n  <div class=\"cell-default-display\">\n    @if (canDrill()) {\n    <span class=\"drillable-value\" (click)=\"onDrillableClick($event)\">{{value()}}</span>\n    } @else {\n    {{value()}}\n    }\n  </div>\n  }\n  }\n  }\n\n</div>\n\n\n<!-- <ng-template cdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"singleSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_single_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_single_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n    <div class=\"listbox-container\">\n      <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n        <input matInput type=\"search\" placeholder=\"Search...\" (click)=\"$event.stopPropagation()\" [ngModel]=\"optionSearchText()\"\n          (ngModelChange)=\"optionSearchText.set($event)\">\n      </mat-form-field>\n      <ul cdkListbox [ngModel]=\"currentValue()\" (ngModelChange)=\"selectedSingleSelect($event)\"\n        aria-labelledby=\"listbox-label\" class=\"listbox\">\n        <li [cdkOption]=\"'None'\" class=\"listbox-option notext-overflow\">\n          None\n        </li>\n        @for (option of filteredOptions(); track option.value || option.name) {\n        <li [cdkOption]=\"option.value || option.name\" class=\"listbox-option notext-overflow\">\n          {{option.label || option.name}}\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template> -->\n\n<!-- <ng-template \ncdkConnectedOverlay\n[cdkConnectedOverlayOrigin]=\"multiSelectTrigger\"\n[cdkConnectedOverlayOpen]=\"showOverlayMenu('dropdown_multi_select')\"\n(detach)=\"isOpen = showOverlayMenu('dropdown_multi_select')\">\n  <div class=\"dropdown-menu\" cdkMenu [style.width.px]=\"currentColumnWidth()\" (closed)=\"singleOptionClosed()\">\n          <div class=\"listbox-container\">\n        <mat-form-field appearance=\"outline\" class=\"search-form-field\">\n          <input matInput type=\"search\" placeholder=\"Search...\" [ngModel]=\"optionSearchText()\"\n           (ngModelChange)=\"optionSearchText.set($event)\" (click)=\"$event.stopPropagation()\">\n        </mat-form-field>\n        \n        <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\n          <mat-checkbox \n            [checked]=\"isAllSelected()\" \n            [indeterminate]=\"isIndeterminate()\"\n            (change)=\"toggleSelectAll($event.checked)\">\n            <span class=\"select-all-text\">Select All</span>\n          </mat-checkbox>\n        </div>\n        \n        <ul cdkListboxMultiple=\"true\" cdkListboxUseActiveDescendant cdkListbox [ngModel]=\"currentValue()\"\n          (ngModelChange)=\"selectedMultiSelect($event)\" aria-labelledby=\"listbox-labssel\" class=\"listbox\" (click)=\"$event.stopPropagation()\">\n        <li [cdkOption]=\"'None'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('None')\" (click)=\"$event.stopPropagation();appendMultiSelect('None')\"></mat-checkbox>\n            <span class=\"option-text\">None</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 1'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 1')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 1')\"></mat-checkbox>\n            <span class=\"option-text\">option 1</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 2'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 2')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 2')\"></mat-checkbox>\n            <span class=\"option-text\">option 2</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 3'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 3')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 3')\"></mat-checkbox>\n            <span class=\"option-text\">option 3</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 4'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 4')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 4')\"></mat-checkbox>\n            <span class=\"option-text\">option 4</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 5'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 5')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 5')\"></mat-checkbox>\n            <span class=\"option-text\">option 5</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 6'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 6')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 6')\"></mat-checkbox>\n            <span class=\"option-text\">option 6</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 7'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 7')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 7')\"></mat-checkbox>\n            <span class=\"option-text\">option 7</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 8'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 8')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 8')\"></mat-checkbox>\n            <span class=\"option-text\">option 8</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 9'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 9')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 9')\"></mat-checkbox>\n            <span class=\"option-text\">option 9</span>\n          </div>\n        </li>\n        <li [cdkOption]=\"'option 10'\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected('option 10')\" (click)=\"$event.stopPropagation();appendMultiSelect('option 10')\"></mat-checkbox>\n            <span class=\"option-text\">option 10</span>\n          </div>\n        </li>\n        @for (option of filteredOptions(); track option) {\n        <li [cdkOption]=\"option.value\" class=\"multi-listbox-option notext-overflow\">\n          <div class=\"option-content\">\n            <mat-checkbox [checked]=\"isOptionSelected(option.value)\" (click)=\"$event.stopPropagation();appendMultiSelect(option.value)\"></mat-checkbox>\n            <span class=\"option-text\">{{option.label}}</span>\n          </div>\n        </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template> -->", styles: [":host{display:block;height:100%;width:100%;position:relative;overflow:hidden!important}.container{height:calc(100% - 2px);width:calc(100% - 2px);position:relative!important;overflow:hidden!important;max-width:100%!important;box-sizing:border-box!important}.container .cell-display-text{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.inputRef{height:inherit;width:inherit;border:none}.inputRef:focus{outline:none}.cell-checkbox{text-align:center}.cell-form-field{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-outline,.cell-form-field .mat-mdc-form-field-subscript-wrapper,.cell-form-field .mat-mdc-form-field-text-suffix{display:none!important}.cell-form-field .mat-mdc-form-field-wrapper,.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex{width:100%!important;height:100%!important;padding:0!important;margin:0!important}.cell-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{width:100%!important;height:100%!important;padding:0!important;margin:0!important;min-height:auto!important;border-top:none!important}.cell-form-field input[matInput]{width:100%!important;height:100%!important;padding:2px!important;margin:0!important;border:none!important;outline:none!important;background:transparent!important;font-size:14px!important;line-height:normal!important;box-sizing:border-box!important;max-width:none!important;min-width:0!important;flex:none!important}.dropdown-menu{width:100%}.cell-display-text-editable{cursor:pointer!important}.cell-display-text{width:100%!important;height:100%!important;min-height:20px!important;display:block!important;padding:4px 8px!important;font-family:var(--grid-font-family, \"Poppins\")!important;font-size:var(--grid-font-size-body, 12px)!important;color:var(--grid-on-surface, #1d1b20)!important;background:transparent!important;border:none!important;outline:none!important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;box-sizing:border-box!important;transition:background-color .2s ease!important;line-height:1.4!important}.cell-display-text,.cell-display-text>*{text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;max-width:100%!important;width:100%!important;display:block!important}.cell-display-text:empty:before{content:\"Click to select\"!important;color:var(--grid-on-surface-variant, #49454f)!important;font-style:italic!important}.cell-display-number{text-align:var(--grid-number-text-align, right)}.aggregation .cell-display-number{text-align:var(--grid-aggregation-text-align, right)}.assignee-avatars{display:flex;align-items:center;padding:4px 8px;min-height:20px}.no-assignees{color:var(--grid-on-surface-variant, #49454f);font-style:italic;font-size:12px}.option-content{display:flex;align-items:center;gap:8px;width:100%}.option-avatar{width:24px;height:24px;border-radius:50%;background-color:var(--grid-primary, #6750a4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}.option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkmark{color:var(--grid-primary, #6750a4);font-weight:700;font-size:14px;flex-shrink:0}.drillable-value{color:var(--grid-primary, #6750a4);text-decoration:underline;text-decoration-color:var(--grid-primary, #6750a4);text-decoration-thickness:1px;text-underline-offset:2px;transition:all .2s ease}.drillable-link{cursor:pointer;padding:4px}.time-display{width:100%;height:100%;min-height:20px;display:block;padding:4px 8px;font-family:var(--grid-font-family, \"Poppins\");font-size:var(--grid-font-size-body, 12px);color:var(--grid-on-surface, #1d1b20);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.time-display-editable{cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { attachmentTrigger: [{
                 type: ViewChild,
                 args: ['attachmentTrigger']
@@ -12697,7 +13079,15 @@ class ColumnDragDirective {
     el;
     renderer;
     eruGridStore;
-    columnIndex = null;
+    /**
+     * The dragged column's `name`, not its rendered index. The header only ever
+     * renders the *visible* columns (hidden ones and the group-by column are
+     * filtered out of `displayColumns`), so a rendered index does not line up
+     * with the store's full column array — reordering by index moved whichever
+     * column happened to sit at that slot in the unfiltered list. The name is
+     * stable across every filtering layer.
+     */
+    columnKey = null;
     dragEl;
     dragHandle;
     isDragging = false;
@@ -12715,7 +13105,7 @@ class ColumnDragDirective {
         // Find the drag handle element - use setTimeout to ensure it's rendered
         setTimeout(() => {
             this.dragHandle = this.dragEl.querySelector('.column-drag-handle');
-            if (this.columnIndex !== null && this.columnIndex !== undefined) {
+            if (this.columnKey !== null && this.columnKey !== undefined) {
                 // Set draggable attribute on the entire column header
                 this.renderer.setAttribute(this.dragEl, 'draggable', 'true');
                 if (this.dragHandle) {
@@ -12740,8 +13130,8 @@ class ColumnDragDirective {
                 };
                 document.addEventListener('mouseup', this.mouseUpListener);
             }
-            else if (this.columnIndex === null || this.columnIndex === undefined) {
-                // If columnIndex is null, remove draggable attribute
+            else if (this.columnKey === null || this.columnKey === undefined) {
+                // If columnKey is null, remove draggable attribute
                 this.renderer.removeAttribute(this.dragEl, 'draggable');
             }
         }, 0);
@@ -12756,7 +13146,7 @@ class ColumnDragDirective {
         }
     }
     onDragStart(event) {
-        // Only allow drag if it was initiated by the handle OR if we have a valid columnIndex
+        // Only allow drag if it was initiated by the handle OR if we have a valid columnKey
         // Check if event originated from drag handle
         const target = event.target;
         const isFromHandle = target.classList.contains('column-drag-handle') ||
@@ -12766,9 +13156,9 @@ class ColumnDragDirective {
             event.preventDefault();
             return;
         }
-        // Validate column index
-        if (this.columnIndex === null || this.columnIndex === undefined) {
-            console.error('Invalid column index for drag');
+        // Validate column key
+        if (this.columnKey === null || this.columnKey === undefined) {
+            console.error('Invalid column key for drag');
             event.preventDefault();
             return;
         }
@@ -12782,7 +13172,7 @@ class ColumnDragDirective {
                 // Allow moving
                 event.dataTransfer.effectAllowed = 'move';
                 // Set drag data
-                event.dataTransfer.setData('text/plain', this.columnIndex.toString());
+                event.dataTransfer.setData('text/plain', this.columnKey);
                 // Set drag image to the entire column header
                 event.dataTransfer.setDragImage(this.dragEl, 0, 0);
             }
@@ -12808,26 +13198,18 @@ class ColumnDragDirective {
         }
     }
     onDrop(event) {
-        // Validate column index
-        if (this.columnIndex === null || this.columnIndex === undefined) {
-            console.error('Invalid column index for drop');
+        // Validate column key
+        if (this.columnKey === null || this.columnKey === undefined) {
+            console.error('Invalid column key for drop');
             event.preventDefault();
             return;
         }
         event.preventDefault();
-        // Get the dragged column index
-        let fromIndex;
-        try {
-            fromIndex = parseInt(event.dataTransfer?.getData('text/plain') || '0', 10);
-        }
-        catch (error) {
-            console.error('Error parsing drag data', error);
-            return;
-        }
-        const toIndex = this.columnIndex;
+        const fromKey = event.dataTransfer?.getData('text/plain') || '';
+        const toKey = this.columnKey;
         // Reorder columns if different
-        if (fromIndex !== toIndex) {
-            this.eruGridStore.reorderColumns(fromIndex, toIndex);
+        if (fromKey && fromKey !== toKey) {
+            this.eruGridStore.reorderColumnsByName(fromKey, toKey);
         }
     }
     onDragEnd(event) {
@@ -12836,7 +13218,7 @@ class ColumnDragDirective {
         this.isDragging = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ColumnDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: EruGridStore }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: ColumnDragDirective, isStandalone: true, selector: "[columnDraggable]", inputs: { columnIndex: ["columnDraggable", "columnIndex"] }, host: { listeners: { "dragstart": "onDragStart($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "dragend": "onDragEnd($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: ColumnDragDirective, isStandalone: true, selector: "[columnDraggable]", inputs: { columnKey: ["columnDraggable", "columnKey"] }, host: { listeners: { "dragstart": "onDragStart($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "dragend": "onDragEnd($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ColumnDragDirective, decorators: [{
             type: Directive,
@@ -12844,7 +13226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                     selector: '[columnDraggable]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: EruGridStore }], propDecorators: { columnIndex: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: EruGridStore }], propDecorators: { columnKey: [{
                 type: Input,
                 args: ['columnDraggable']
             }], onDragStart: [{
@@ -12870,6 +13252,17 @@ const UNIVERSAL_FIELDS = [
         control: 'select',
         options: DATA_TYPES.map(d => ({ value: d, label: d })),
     },
+    {
+        key: 'cell_render',
+        label: 'Cell rendering',
+        control: 'select',
+        defaultValue: 'default',
+        options: [
+            { value: 'default', label: 'By data type' },
+            { value: 'composite', label: 'Composite (several fields in one cell)' },
+            { value: 'page', label: 'Page layout' },
+        ],
+    },
     { key: 'tool_tip', label: 'Tooltip', control: 'text' },
     { key: 'description', label: 'Description', control: 'text' },
     { key: 'default', label: 'Default value', control: 'text' },
@@ -12911,6 +13304,38 @@ const COMPOSITE_FIELDS = [
         control: 'text',
         showWhen: f => f.composite_direction === 'inline',
     },
+    {
+        key: 'composite_label_position',
+        label: 'Part labels',
+        control: 'select',
+        defaultValue: 'none',
+        options: [
+            { value: 'none', label: 'Hidden' },
+            { value: 'left', label: 'Before the value' },
+            { value: 'right', label: 'After the value' },
+        ],
+    },
+    {
+        key: 'composite_labels',
+        label: 'Primary label',
+        control: 'text_slot',
+        slot: 0,
+        showWhen: f => f.composite_label_position === 'left' || f.composite_label_position === 'right',
+    },
+    {
+        key: 'composite_labels',
+        label: 'Secondary label',
+        control: 'text_slot',
+        slot: 1,
+        showWhen: f => f.composite_label_position === 'left' || f.composite_label_position === 'right',
+    },
+    {
+        key: 'composite_labels',
+        label: 'Third label',
+        control: 'text_slot',
+        slot: 2,
+        showWhen: f => f.composite_label_position === 'left' || f.composite_label_position === 'right',
+    },
     { key: 'cell_style_secondary', label: 'Secondary value style', control: 'text_style' },
 ];
 const PAGE_CELL_FIELDS = [
@@ -13117,6 +13542,9 @@ const DATATYPE_FIELDS = {
         { key: 'max_files', label: 'Max files', control: 'number' },
         { key: 'allowed_file_types', label: 'Allowed types (one per line)', control: 'list' },
         { key: 'max_file_size', label: 'Max file size (bytes)', control: 'number' },
+        { key: 'default_upload', label: 'Default upload', control: 'checkbox', defaultValue: true },
+        { key: 'storage_name', label: 'Storage name', control: 'text', showWhen: f => f.default_upload !== false },
+        { key: 'folder_name', label: 'Folder from field', control: 'text', showWhen: f => f.default_upload !== false },
     ],
     phone: [{ key: 'default_country', label: 'Default country (ISO)', control: 'text' }],
     people: [
@@ -13138,8 +13566,6 @@ const DATATYPE_FIELDS = {
     ],
     textbox: TEXTBOX_FIELDS,
     textarea: TEXTBOX_FIELDS,
-    composite: COMPOSITE_FIELDS,
-    page: PAGE_CELL_FIELDS,
     checkbox: [
         { key: 'value_true', label: 'Stored value when checked', control: 'text' },
         { key: 'value_false', label: 'Stored value when unchecked', control: 'text' },
@@ -13154,25 +13580,36 @@ const DATATYPE_FIELDS = {
  * Datatype choices offered for a column.
  *
  * A mapped column's type belongs to the data model, so the full list would only
- * offer changes that `buildMappedColumnPatch` overwrites on the next resolve.
- * The presentation types are the exception it honours — they say how the column
- * is drawn, not what it holds — so a mapped column is offered its own type plus
- * those, and nothing else.
+ * offer changes that `buildMappedColumnPatch` overwrites on the next resolve —
+ * it is offered its own type and nothing else. Composite and page used to be
+ * the exception here; they are `cell_render` now, a separate axis that a mapped
+ * column is free to set without touching the type it inherits.
  */
 function datatypeOptions(field) {
     const isMapped = !!field.mapped_entity && !!field.mapped_field;
-    const types = isMapped
-        ? DATA_TYPES.filter(d => d === field.datatype || PRESENTATION_DATATYPES.has(d))
-        : DATA_TYPES;
+    const types = isMapped ? DATA_TYPES.filter(d => d === field.datatype) : DATA_TYPES;
     return types.map(d => ({ value: d, label: d }));
 }
+/**
+ * Controls for the chosen renderer, shown alongside — not instead of — the
+ * datatype's own. That is the point of the split: a composite column is still a
+ * currency or a date column underneath, and its symbol, decimals and format stay
+ * editable while the composite is on, and keep their values when it is off.
+ */
+function cellRenderFields(field) {
+    switch (normalizeCellRender(field)) {
+        case 'composite': return COMPOSITE_FIELDS;
+        case 'page': return PAGE_CELL_FIELDS;
+        default: return [];
+    }
+}
 function getMetaFields(field) {
     if (!field)
         return [];
     const extra = field.datatype ? DATATYPE_FIELDS[field.datatype] ?? [] : [];
     const excluded = new Set(field.datatype ? GOVERNANCE_EXCLUSIONS[field.datatype] ?? [] : []);
     const governance = GOVERNANCE_FIELDS.filter(def => !excluded.has(def.key));
-    return [...UNIVERSAL_FIELDS, ...extra, ...governance]
+    return [...UNIVERSAL_FIELDS, ...cellRenderFields(field), ...extra, ...governance]
         .filter(def => !def.showWhen || def.showWhen(field))
         .map(def => (def.key === 'datatype' ? { ...def, options: datatypeOptions(field) } : def));
 }
@@ -13557,9 +13994,14 @@ class ColumnDesignPanelComponent {
         return arr[def.slot ?? 0] ?? null;
     }
     /**
-     * Writes one position of an ordered field list. Trailing empties are dropped
-     * so clearing the third slot leaves a two-part composite rather than a list
-     * with a hole in it, which `parts` would otherwise have to filter.
+     * Writes one position of an ordered list. Trailing empties are dropped so
+     * clearing the third slot leaves a two-part composite rather than a list with
+     * a hole in it, which `parts` would otherwise have to filter.
+     *
+     * Interior holes are only collapsed for a `field_slot`. A `text_slot` list is
+     * read positionally against another one — composite_labels against
+     * composite_fields — so compacting it would slide every later label onto the
+     * wrong part the moment an earlier one was left blank.
      */
     onSlotChange(def, value) {
         const slot = def.slot ?? 0;
@@ -13570,7 +14012,7 @@ class ColumnDesignPanelComponent {
         arr[slot] = value || null;
         while (arr.length > 0 && !arr[arr.length - 1])
             arr.pop();
-        this.patch(def.key, arr.filter(Boolean));
+        this.patch(def.key, def.control === 'text_slot' ? arr.map(v => v ?? '') : arr.filter(Boolean));
     }
     // ── Text-style control ─────────────────────────────────────────────────
     styleValue(key, prop) {
@@ -13609,8 +14051,37 @@ class ColumnDesignPanelComponent {
         this.patch(key, value === '' || value === null ? null : Number(value));
     }
     onSelect(key, value) {
+        if (key === 'datatype') {
+            this.changeDatatype(value);
+            return;
+        }
         this.patch(key, value);
     }
+    /**
+     * Changing a column's datatype, with the presentation types handled specially.
+     *
+     * `composite` and `page` say how the column is DRAWN, not what it holds, so
+     * switching to one must remember the real type — otherwise the value has
+     * nothing to format itself by, which is why a composed date column reverted
+     * to its raw stored string. Switching back to a real type clears the memo.
+     */
+    changeDatatype(value) {
+        const current = this.field();
+        const next = String(value ?? '');
+        const wasPresentation = PRESENTATION_DATATYPES.has(String(current?.datatype ?? ''));
+        const isPresentation = PRESENTATION_DATATYPES.has(next);
+        const name = this.gridStore.selectedDesignColumn();
+        if (!name)
+            return;
+        const patch = { datatype: next };
+        if (isPresentation && !wasPresentation) {
+            patch.presentation_base_datatype = current?.datatype;
+        }
+        else if (!isPresentation) {
+            patch.presentation_base_datatype = null;
+        }
+        this.gridStore.updateColumnMeta(name, patch);
+    }
     onCheckbox(key, checked) {
         this.patch(key, checked);
     }
@@ -13685,7 +14156,7 @@ class ColumnDesignPanelComponent {
         this.gridStore.selectDesignColumn(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ColumnDesignPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ColumnDesignPanelComponent, isStandalone: true, selector: "eru-column-design-panel", ngImport: i0, template: "@if (isOpen()) {\n<div class=\"design-panel-backdrop\" (click)=\"close()\"></div>\n}\n<aside class=\"column-design-panel\" [class.open]=\"isOpen()\">\n  @if (field(); as col) {\n  <header class=\"design-panel-header\">\n    <div class=\"design-panel-title\">\n      <mat-icon>tune</mat-icon>\n      <span>{{ col.label || col.name }}</span>\n    </div>\n    <button mat-icon-button (click)=\"close()\" title=\"Close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </header>\n\n  <div class=\"design-panel-body\">\n    <!-- Which field is being designed. A pivot with one measure renders no\n         measure-name row, so its single header cell stands for the column\n         dimension and the measure at once and can only open one of them; this\n         reaches the other. Also the way to a header too narrow to click, or a\n         hidden column. Only shown when there is more than one thing to pick. -->\n    @if (designTargets().length > 0 && targetCount() > 1) {\n    <div class=\"design-field design-target\">\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Editing</mat-label>\n        <mat-select [ngModel]=\"gridStore.selectedDesignColumn()\"\n          (ngModelChange)=\"gridStore.selectDesignColumn($event)\">\n          @for (group of designTargets(); track group.group) {\n          <mat-optgroup [label]=\"group.group\">\n            @for (target of group.fields; track target.name) {\n            <mat-option [value]=\"target.name\">\n              {{ target.label || target.name }}\n              @if (target.is_hidden) {<span class=\"design-target-hidden\">hidden</span>}\n            </mat-option>\n            }\n          </mat-optgroup>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    }\n\n    <!-- Where this column's metadata comes from: typed in here, or inherited\n         from a field in the host app's data model so it stays defined once. -->\n    <div class=\"design-field design-meta-source\">\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Metadata source</mat-label>\n        <mat-select [ngModel]=\"metaSource()\" (ngModelChange)=\"onMetaSourceChange($event)\">\n          <mat-option value=\"manual\">Defined here</mat-option>\n          <mat-option value=\"entity\">Mapped to data model field</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      @if (metaSource() === 'entity') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Entity</mat-label>\n        <mat-select [ngModel]=\"getValue('mapped_entity')\" (ngModelChange)=\"onEntityChange($event)\"\n          (openedChange)=\"$event && requestEntities()\">\n          @for (opt of entityOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      @if (getValue('mapped_entity')) {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Field</mat-label>\n        <mat-select [ngModel]=\"getValue('mapped_field')\" (ngModelChange)=\"onEntityFieldChange($event)\">\n          @for (opt of entityFieldOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @if (isEntityMapped()) {\n      <p class=\"design-meta-hint\">\n        Colours, options and formatting come from the data model. Edit them there to update\n        every grid that maps this field. The date format, abbreviation, display scale and\n        symbol field start from the model but can be changed here for this grid alone.\n      </p>\n      }\n      }\n    </div>\n\n    @for (def of metaFields(); track trackMetaField(def)) {\n    <div class=\"design-field\" [class.design-field-inherited]=\"isInherited(def.key)\"\n      [title]=\"isInherited(def.key) ? 'Inherited from the mapped data model field' : ''\">\n      @switch (def.control) {\n\n      @case ('text') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onText(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('number') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"number\" [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onNumber(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key) ?? def.defaultValue\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          @for (opt of def.options; track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('field_select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          <mat-option [value]=\"null\">None</mat-option>\n          @for (opt of fieldSelectOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('field_slot') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"slotValue(def)\" (ngModelChange)=\"onSlotChange(def, $event)\">\n          <mat-option [value]=\"null\">None</mat-option>\n          @for (opt of fieldSlotOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('text_style') {\n      <div class=\"text-style-control\">\n        <label class=\"text-style-label\">{{ def.label }}</label>\n        <div class=\"text-style-row\">\n          <mat-form-field appearance=\"outline\" class=\"text-style-number\">\n            <mat-label>Size</mat-label>\n            <input matInput type=\"number\" [ngModel]=\"styleValue(def.key, 'font_size')\"\n              (ngModelChange)=\"onStyleChange(def.key, 'font_size', $event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"text-style-number\">\n            <mat-label>Weight</mat-label>\n            <input matInput type=\"number\" [ngModel]=\"styleValue(def.key, 'font_weight')\"\n              (ngModelChange)=\"onStyleChange(def.key, 'font_weight', $event)\" />\n          </mat-form-field>\n          <mat-checkbox class=\"text-style-check\" [checked]=\"!!styleValue(def.key, 'italic')\"\n            (change)=\"onStyleChange(def.key, 'italic', $event.checked)\">Italic</mat-checkbox>\n        </div>\n\n        @if (!isSelfColoured()) {\n        <div class=\"color-control\">\n          <span class=\"color-control-label\">Text colour</span>\n          <div class=\"color-control-body\">\n          <mat-form-field appearance=\"outline\" class=\"color-token-field\">\n            <mat-select [ngModel]=\"colorToken(styleColor(def.key, 'color'))\"\n              (ngModelChange)=\"onStyleColorEdit(def.key, 'color', { token: $event })\">\n              <mat-option value=\"\">Custom</mat-option>\n              @for (t of colorTokens; track t.value) {\n              <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          @if (!isTokenColor(styleColor(def.key, 'color'))) {\n          <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(styleColor(def.key, 'color'))\"\n            (input)=\"onStyleColorEdit(def.key, 'color', { hex: $any($event.target).value })\" />\n          } @else {\n          <span class=\"color-preview\" [style.background]=\"styleColor(def.key, 'color')\"></span>\n          }\n          <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\"\n            [value]=\"colorAlpha(styleColor(def.key, 'color'))\"\n            (input)=\"onStyleColorEdit(def.key, 'color', { alpha: +$any($event.target).value })\" />\n          <span class=\"color-alpha-value\">{{ colorAlpha(styleColor(def.key, 'color')) }}%</span>\n          @if (styleColor(def.key, 'color')) {\n          <button type=\"button\" class=\"text-style-clear\" (click)=\"clearStyleColor(def.key, 'color')\">Reset</button>\n          } @else {\n          <span class=\"text-style-unset-hint\">theme</span>\n          }\n          </div>\n        </div>\n        }\n\n        <div class=\"color-control\">\n          <span class=\"color-control-label\">{{ isSelfColoured() ? 'Cell background' : 'Background' }}</span>\n          <div class=\"color-control-body\">\n          <mat-form-field appearance=\"outline\" class=\"color-token-field\">\n            <mat-select [ngModel]=\"colorToken(styleColor(def.key, 'background'))\"\n              (ngModelChange)=\"onStyleColorEdit(def.key, 'background', { token: $event })\">\n              <mat-option value=\"\">Custom</mat-option>\n              @for (t of colorTokens; track t.value) {\n              <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          @if (!isTokenColor(styleColor(def.key, 'background'))) {\n          <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(styleColor(def.key, 'background'))\"\n            (input)=\"onStyleColorEdit(def.key, 'background', { hex: $any($event.target).value })\" />\n          } @else {\n          <span class=\"color-preview\" [style.background]=\"styleColor(def.key, 'background')\"></span>\n          }\n          <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\"\n            [value]=\"colorAlpha(styleColor(def.key, 'background'))\"\n            (input)=\"onStyleColorEdit(def.key, 'background', { alpha: +$any($event.target).value })\" />\n          <span class=\"color-alpha-value\">{{ colorAlpha(styleColor(def.key, 'background')) }}%</span>\n          @if (styleColor(def.key, 'background')) {\n          <button type=\"button\" class=\"text-style-clear\" (click)=\"clearStyleColor(def.key, 'background')\">Reset</button>\n          } @else {\n          <span class=\"text-style-unset-hint\">none</span>\n          }\n          </div>\n        </div>\n\n        @if (styleColor(def.key, 'background') && !isSelfColoured()) {\n        <div class=\"text-style-row\">\n          <mat-form-field appearance=\"outline\" class=\"fill-select\">\n            <mat-label>Fill</mat-label>\n            <mat-select [ngModel]=\"styleFill(def.key)\" (ngModelChange)=\"onStyleFill(def.key, $event)\">\n              <mat-option value=\"text\">Behind the text (pill)</mat-option>\n              <mat-option value=\"cell\">Whole cell</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        }\n      </div>\n      }\n\n      @case ('rule_list') {\n      <div class=\"rule-list\">\n        <label class=\"text-style-label\">{{ def.label }}</label>\n        <p class=\"rule-list-hint\">Checked top to bottom \u2014 the first rule that matches wins.</p>\n        @for (rule of ruleItems(def.key); track $index) {\n        <div class=\"rule-row\">\n          <div class=\"rule-row-head\">\n            <mat-form-field appearance=\"outline\" class=\"rule-op\">\n              <mat-label>When</mat-label>\n              <mat-select [ngModel]=\"rule.op || 'between'\" (ngModelChange)=\"updateRule(def.key, $index, 'op', $event)\">\n                @for (o of ruleOperators; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <div class=\"rule-actions\">\n              <button type=\"button\" class=\"rule-btn\" title=\"Move up\" (click)=\"moveRule(def.key, $index, -1)\">\u2191</button>\n              <button type=\"button\" class=\"rule-btn\" title=\"Move down\" (click)=\"moveRule(def.key, $index, 1)\">\u2193</button>\n              <button type=\"button\" class=\"rule-btn rule-btn-remove\" title=\"Remove\" (click)=\"removeRule(def.key, $index)\">\u2715</button>\n            </div>\n          </div>\n          @if (operandCount(rule.op) > 0) {\n          <div class=\"rule-row-operands\">\n            <mat-form-field appearance=\"outline\" class=\"rule-source\">\n              <mat-label>{{ operandCount(rule.op) === 2 ? 'From' : 'Value' }}</mat-label>\n              <mat-select [ngModel]=\"ruleSource(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleSource(def.key, $index, 'from', $event)\">\n                @for (o of operandSources; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (!ruleSource(def.key, $index, 'from')) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Value</mat-label>\n              <input matInput [ngModel]=\"rule.from\" (ngModelChange)=\"updateRule(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            } @else {\n            @if (ruleSourceArg(def.key, $index, 'from'); as arg) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>{{ arg === 'p' ? 'Percentile' : 'N' }}</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleSourceArgValue(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleSourceArg(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            }\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>\u00B1 std dev</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleStddevOffset(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleStddevOffset(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            }\n          </div>\n          @if (operandCount(rule.op) === 2) {\n          <div class=\"rule-row-operands\">\n            <mat-form-field appearance=\"outline\" class=\"rule-source\">\n              <mat-label>To</mat-label>\n              <mat-select [ngModel]=\"ruleSource(def.key, $index, 'to')\"\n                (ngModelChange)=\"onRuleSource(def.key, $index, 'to', $event)\">\n                @for (o of operandSources; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (!ruleSource(def.key, $index, 'to')) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Value</mat-label>\n              <input matInput [ngModel]=\"rule.to\" (ngModelChange)=\"updateRule(def.key, $index, 'to', $event)\" />\n            </mat-form-field>\n            } @else if (ruleSourceArg(def.key, $index, 'to'); as arg) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>{{ arg === 'p' ? 'Percentile' : 'N' }}</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleSourceArgValue(def.key, $index, 'to')\"\n                (ngModelChange)=\"onRuleSourceArg(def.key, $index, 'to', $event)\" />\n            </mat-form-field>\n            }\n          </div>\n          }\n          }\n          <div class=\"rule-row-format\">\n            <span class=\"rule-color-group\">\n              <span class=\"rule-format-label\">Text</span>\n              <!-- Swapped for a read-only preview while a token is in force, as\n                   the column-level control does: with a token set,\n                   composeColorValue returns the token and a hex picked here is\n                   discarded, so an editable swatch invited an edit that\n                   silently did nothing. -->\n              @if (!isTokenColor(rule.color)) {\n              <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(rule.color)\"\n                (input)=\"onRuleColorEdit(def.key, $index, 'color', { hex: $any($event.target).value })\" />\n              } @else {\n              <span class=\"color-preview\" [style.background]=\"rule.color\"></span>\n              }\n              <mat-form-field appearance=\"outline\" class=\"color-token-field rule-token\">\n                <mat-select [ngModel]=\"colorToken(rule.color)\"\n                  (ngModelChange)=\"onRuleColorEdit(def.key, $index, 'color', { token: $event })\">\n                  <mat-option value=\"\">Custom</mat-option>\n                  @for (t of colorTokens; track t.value) {\n                  <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </span>\n            <!-- Grouped so the row wraps between the two colours rather than\n                 through one: the percentage broke onto the next line beside\n                 'Bold' and read as belonging to it. -->\n            <span class=\"rule-color-group\">\n              <span class=\"rule-format-label\">Fill</span>\n              @if (!isTokenColor(rule.background)) {\n              <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(rule.background)\"\n                (input)=\"onRuleColorEdit(def.key, $index, 'background', { hex: $any($event.target).value })\" />\n              } @else {\n              <span class=\"color-preview\" [style.background]=\"rule.background\"></span>\n              }\n              <!-- A fill is as likely to want a theme colour as the text is, and\n                   the alpha slider works for either: composeColorValue wraps a\n                   token in color-mix below 100%. -->\n              <mat-form-field appearance=\"outline\" class=\"color-token-field rule-token\">\n                <mat-select [ngModel]=\"colorToken(rule.background)\"\n                  (ngModelChange)=\"onRuleColorEdit(def.key, $index, 'background', { token: $event })\">\n                  <mat-option value=\"\">Custom</mat-option>\n                  @for (t of colorTokens; track t.value) {\n                  <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <!-- Its own line: the label, swatch and token select already fill\n                   the panel's width, and a token name as long as 'On Secondary\n                   Container' pushed the slider off the right edge. -->\n              <span class=\"rule-alpha-group\">\n                <span class=\"rule-format-label\">Opacity</span>\n                <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\" [value]=\"colorAlpha(rule.background)\"\n                  (input)=\"onRuleColorEdit(def.key, $index, 'background', { alpha: +$any($event.target).value })\" />\n                <span class=\"color-alpha-value\">{{ colorAlpha(rule.background) }}%</span>\n              </span>\n            </span>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bold\"\n              (change)=\"updateRule(def.key, $index, 'bold', $event.checked)\">Bold</mat-checkbox>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"rule.fill === 'text'\"\n              (change)=\"updateRule(def.key, $index, 'fill', $event.checked ? 'text' : 'cell')\">Pill</mat-checkbox>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bar\"\n              (change)=\"updateRule(def.key, $index, 'bar', $event.checked)\">Data bar</mat-checkbox>\n            @if (rule.bar) {\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bar_auto\"\n              (change)=\"updateRule(def.key, $index, 'bar_auto', $event.checked)\">Scale to column</mat-checkbox>\n            }\n          </div>\n          @if (rule.bar && !rule.bar_auto) {\n          <div class=\"rule-row-format\">\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Bar min</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"rule.bar_min\" (ngModelChange)=\"updateRule(def.key, $index, 'bar_min', $event)\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Bar max</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"rule.bar_max\" (ngModelChange)=\"updateRule(def.key, $index, 'bar_max', $event)\" />\n            </mat-form-field>\n          </div>\n          }\n        </div>\n        }\n        <button type=\"button\" class=\"rule-add\" (click)=\"addRule(def.key)\">+ Add rule</button>\n      </div>\n      }\n\n      @case ('checkbox') {\n      <mat-checkbox [checked]=\"isChecked(def)\" (change)=\"onCheckbox(def.key, $event.checked)\">\n        {{ def.label }}\n      </mat-checkbox>\n      }\n\n      @case ('day_chips') {\n      <div class=\"day-chips\">\n        <label class=\"day-chips-label\">{{ def.label }}</label>\n        <div class=\"day-chips-row\">\n          @for (day of weekDays; track day) {\n          <button type=\"button\" class=\"day-chip\" [class.selected]=\"isDaySelected(def.key, day)\"\n            (click)=\"toggleDay(def.key, day)\">{{ day }}</button>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('list') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <textarea matInput rows=\"4\" [ngModel]=\"listText(def.key)\"\n          (ngModelChange)=\"onList(def.key, $event)\"></textarea>\n      </mat-form-field>\n      }\n\n      @case ('color_list') {\n      <div class=\"color-list\">\n        <label class=\"color-list-label\">{{ def.label }}</label>\n        <div class=\"color-list-chips\">\n          @for (opt of colorListItems(def.key); track $index) {\n          <div class=\"color-list-chip\">\n            <input type=\"color\" class=\"color-list-dot\" [value]=\"opt.color || '#9CA3AF'\"\n              (input)=\"onColorListColorChange(def.key, $index, $any($event.target).value)\" title=\"Change colour\" />\n            <span class=\"color-list-name\">{{ opt.name }}</span>\n            <button type=\"button\" class=\"color-list-remove\" (click)=\"removeColorListItem(def.key, $index)\"\n              title=\"Remove\">&times;</button>\n          </div>\n          }\n        </div>\n        <input class=\"color-list-add\" type=\"text\" placeholder=\"Add option, press Enter\"\n          (keydown.enter)=\"addColorListItem(def.key, $any($event.target).value, def.defaultColor || '#9CA3AF'); $any($event.target).value = ''\" />\n      </div>\n      }\n\n      @case ('range_color_list') {\n      <div class=\"range-list\">\n        <label class=\"range-list-label\">{{ def.label }}</label>\n        @for (r of rangeListItems(def.key); track $index) {\n        <div class=\"range-list-row\">\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.from\"\n            (input)=\"onRangeChange(def.key, $index, 'from', $any($event.target).value)\" title=\"From\" />\n          <span class=\"range-list-sep\">\u2013</span>\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.to\"\n            (input)=\"onRangeChange(def.key, $index, 'to', $any($event.target).value)\" title=\"To\" />\n          <input type=\"color\" class=\"range-list-color\" [value]=\"r.color || '#22C55E'\"\n            (input)=\"onRangeColorChange(def.key, $index, $any($event.target).value)\" title=\"Colour\" />\n          <button type=\"button\" class=\"range-list-remove\" (click)=\"removeRangeItem(def.key, $index)\"\n            title=\"Remove\">&times;</button>\n        </div>\n        }\n        <button type=\"button\" class=\"range-list-add\" (click)=\"addRangeItem(def.key)\">+ Add range</button>\n      </div>\n      }\n\n      }\n    </div>\n    }\n  </div>\n  }\n</aside>\n", styles: [".design-panel-backdrop{position:fixed;inset:0;background:#0000002e;z-index:1000}.column-design-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--grid-surface, #fff);box-shadow:-4px 0 16px #00000029;transform:translate(100%);transition:transform .22s ease;z-index:1001;display:flex;flex-direction:column;font-family:var(--grid-font-family, inherit)}.column-design-panel.open{transform:translate(0)}.design-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grid-border-color, #e0e0e0)}.design-panel-header .design-panel-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-panel-body{padding:16px;overflow-y:auto;flex:1}.design-panel-body .design-field{margin-bottom:4px}.design-panel-body .design-field .full-width{width:100%}.design-panel-body .design-field mat-checkbox{display:block;margin:8px 0 16px}.design-panel-body .color-list{margin:4px 0 16px}.design-panel-body .color-list .color-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.design-panel-body .color-list .color-list-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.design-panel-body .color-list .color-list-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:16px;background:var(--grid-surface, #fff);font-size:12px}.design-panel-body .color-list .color-list-dot{width:18px;height:18px;padding:0;border:none;background:none;border-radius:50%;cursor:pointer}.design-panel-body .color-list .color-list-remove{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.design-panel-body .color-list .color-list-remove:hover{color:var(--grid-error, #b3261e)}.design-panel-body .color-list .color-list-add{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.design-panel-body .color-list .color-list-add:focus{border-color:var(--grid-primary, #6750a4)}.range-list{margin:4px 0 16px}.range-list .range-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.range-list .range-list-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.range-list .range-list-num{width:56px;padding:6px 8px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.range-list .range-list-num:focus{border-color:var(--grid-primary, #6750a4)}.range-list .range-list-sep{color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-color{width:28px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;cursor:pointer}.range-list .range-list-remove{margin-left:auto;border:none;background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-remove:hover{color:var(--grid-error, #b3261e)}.range-list .range-list-add{margin-top:2px;padding:6px 10px;border:1px dashed var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;font-size:13px;cursor:pointer;color:var(--grid-primary, #6750a4)}.range-list .range-list-add:hover{background:var(--grid-surface-variant, #f3edf7)}.day-chips{display:flex;flex-direction:column;gap:6px}.day-chips-label{font-size:12px;color:var(--eru-on-surface-variant, #5f6368)}.day-chips-row{display:flex;flex-wrap:wrap;gap:6px}.day-chip{border:1px solid var(--eru-outline, #c4c7c5);background:transparent;border-radius:16px;padding:4px 12px;font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,color .15s,border-color .15s}.day-chip.selected{background:var(--eru-primary, #1a73e8);border-color:var(--eru-primary, #1a73e8);color:#fff}.design-field-inherited{opacity:.55;pointer-events:none}.design-meta-source{padding-bottom:8px;border-bottom:1px solid var(--grid-outline-variant, #e0e0e0);margin-bottom:12px}.design-meta-hint{margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--grid-on-surface-variant, #49454f)}.text-style-control{display:flex;flex-direction:column;gap:6px}.text-style-label{font-size:12px;color:var(--grid-on-surface-variant, #49454f)}.text-style-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.text-style-number{width:96px}.text-style-color{display:flex;align-items:center;gap:6px}.text-style-color input[type=color]{width:32px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:4px;background:none;cursor:pointer}.text-style-color-label{font-size:12px}.text-style-clear{border:none;background:none;padding:0;font-size:11px;color:var(--grid-primary, #6750a4);cursor:pointer}.text-style-color--unset input[type=color]{opacity:.3}.text-style-unset-hint{font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.design-target-hidden{margin-left:6px;padding:1px 6px;border-radius:8px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;background:var(--grid-surface-container-high, #e6e0e9);color:var(--grid-on-surface-variant, #49454f)}.color-control{display:block;margin-top:4px}.color-control-label{display:block;font-size:12px;margin-bottom:2px;color:var(--grid-on-surface-variant, #49454f)}.color-control-body{display:flex;align-items:center;gap:6px;min-width:0}.color-token-field{flex:1 1 auto;min-width:0}.color-swatch{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;border:1px solid var(--grid-outline-variant, #cac4d0);vertical-align:middle}.color-hex{flex:0 0 auto;width:32px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:4px;background:none;cursor:pointer}.color-preview{width:32px;height:28px;border-radius:4px;border:1px solid var(--grid-outline-variant, #cac4d0)}.color-alpha{flex:0 1 68px;min-width:44px}.color-alpha-value{flex:0 0 auto;font-size:11px;min-width:30px;color:var(--grid-on-surface-variant, #49454f)}.color-preview{flex:0 0 auto}.fill-select{width:220px}.rule-list{display:flex;flex-direction:column;gap:8px}.rule-list-hint{margin:0;font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.rule-row{border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}.rule-row-head{display:flex;align-items:center;gap:6px;min-width:0}.rule-row-operands,.rule-row-format{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.rule-actions{margin-left:auto;flex:0 0 auto;display:flex;gap:4px}.rule-op{flex:1 1 auto;min-width:0}.rule-operand{flex:1 1 96px;min-width:88px}.rule-source{flex:1 1 140px;min-width:128px}.rule-token{flex:1 1 96px;min-width:88px}.rule-format-label{font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.rule-color-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px;flex:1 1 100%}.rule-alpha-group{display:flex;align-items:center;gap:6px;flex:1 1 100%}.rule-alpha-group .color-alpha{flex:1 1 auto}.rule-btn{border:1px solid var(--grid-outline-variant, #cac4d0);background:none;border-radius:4px;width:26px;height:26px;cursor:pointer;font-size:12px;line-height:1}.rule-btn-remove{color:var(--grid-error, #b3261e)}.rule-add{align-self:flex-start;border:1px dashed var(--grid-outline, #79747e);background:none;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--grid-primary, #6750a4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ColumnDesignPanelComponent, isStandalone: true, selector: "eru-column-design-panel", ngImport: i0, template: "@if (isOpen()) {\n<div class=\"design-panel-backdrop\" (click)=\"close()\"></div>\n}\n<aside class=\"column-design-panel\" [class.open]=\"isOpen()\">\n  @if (field(); as col) {\n  <header class=\"design-panel-header\">\n    <div class=\"design-panel-title\">\n      <mat-icon>tune</mat-icon>\n      <span>{{ col.label || col.name }}</span>\n    </div>\n    <button mat-icon-button (click)=\"close()\" title=\"Close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </header>\n\n  <div class=\"design-panel-body\">\n    <!-- Which field is being designed. A pivot with one measure renders no\n         measure-name row, so its single header cell stands for the column\n         dimension and the measure at once and can only open one of them; this\n         reaches the other. Also the way to a header too narrow to click, or a\n         hidden column. Only shown when there is more than one thing to pick. -->\n    @if (designTargets().length > 0 && targetCount() > 1) {\n    <div class=\"design-field design-target\">\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Editing</mat-label>\n        <mat-select [ngModel]=\"gridStore.selectedDesignColumn()\"\n          (ngModelChange)=\"gridStore.selectDesignColumn($event)\">\n          @for (group of designTargets(); track group.group) {\n          <mat-optgroup [label]=\"group.group\">\n            @for (target of group.fields; track target.name) {\n            <mat-option [value]=\"target.name\">\n              {{ target.label || target.name }}\n              @if (target.is_hidden) {<span class=\"design-target-hidden\">hidden</span>}\n            </mat-option>\n            }\n          </mat-optgroup>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    }\n\n    <!-- Where this column's metadata comes from: typed in here, or inherited\n         from a field in the host app's data model so it stays defined once. -->\n    <div class=\"design-field design-meta-source\">\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Metadata source</mat-label>\n        <mat-select [ngModel]=\"metaSource()\" (ngModelChange)=\"onMetaSourceChange($event)\">\n          <mat-option value=\"manual\">Defined here</mat-option>\n          <mat-option value=\"entity\">Mapped to data model field</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      @if (metaSource() === 'entity') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Entity</mat-label>\n        <mat-select [ngModel]=\"getValue('mapped_entity')\" (ngModelChange)=\"onEntityChange($event)\"\n          (openedChange)=\"$event && requestEntities()\">\n          @for (opt of entityOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      @if (getValue('mapped_entity')) {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Field</mat-label>\n        <mat-select [ngModel]=\"getValue('mapped_field')\" (ngModelChange)=\"onEntityFieldChange($event)\">\n          @for (opt of entityFieldOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @if (isEntityMapped()) {\n      <p class=\"design-meta-hint\">\n        Colours, options and formatting come from the data model. Edit them there to update\n        every grid that maps this field. The label, date format, abbreviation, display scale\n        and symbol field start from the model but can be changed here for this grid alone.\n      </p>\n      }\n      }\n    </div>\n\n    @for (def of metaFields(); track trackMetaField(def)) {\n    <div class=\"design-field\" [class.design-field-inherited]=\"isInherited(def.key)\"\n      [title]=\"isInherited(def.key) ? 'Inherited from the mapped data model field' : ''\">\n      @switch (def.control) {\n\n      @case ('text') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onText(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('number') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"number\" [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onNumber(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key) ?? def.defaultValue\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          @for (opt of def.options; track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('field_select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          <mat-option [value]=\"null\">None</mat-option>\n          @for (opt of fieldSelectOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('field_slot') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"slotValue(def)\" (ngModelChange)=\"onSlotChange(def, $event)\">\n          <mat-option [value]=\"null\">None</mat-option>\n          @for (opt of fieldSlotOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('text_slot') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"text\" [ngModel]=\"slotValue(def)\" (ngModelChange)=\"onSlotChange(def, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('text_style') {\n      <div class=\"text-style-control\">\n        <label class=\"text-style-label\">{{ def.label }}</label>\n        <div class=\"text-style-row\">\n          <mat-form-field appearance=\"outline\" class=\"text-style-number\">\n            <mat-label>Size</mat-label>\n            <input matInput type=\"number\" [ngModel]=\"styleValue(def.key, 'font_size')\"\n              (ngModelChange)=\"onStyleChange(def.key, 'font_size', $event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"text-style-number\">\n            <mat-label>Weight</mat-label>\n            <input matInput type=\"number\" [ngModel]=\"styleValue(def.key, 'font_weight')\"\n              (ngModelChange)=\"onStyleChange(def.key, 'font_weight', $event)\" />\n          </mat-form-field>\n          <mat-checkbox class=\"text-style-check\" [checked]=\"!!styleValue(def.key, 'italic')\"\n            (change)=\"onStyleChange(def.key, 'italic', $event.checked)\">Italic</mat-checkbox>\n        </div>\n\n        @if (!isSelfColoured()) {\n        <div class=\"color-control\">\n          <span class=\"color-control-label\">Text colour</span>\n          <div class=\"color-control-body\">\n          <mat-form-field appearance=\"outline\" class=\"color-token-field\">\n            <mat-select [ngModel]=\"colorToken(styleColor(def.key, 'color'))\"\n              (ngModelChange)=\"onStyleColorEdit(def.key, 'color', { token: $event })\">\n              <mat-option value=\"\">Custom</mat-option>\n              @for (t of colorTokens; track t.value) {\n              <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          @if (!isTokenColor(styleColor(def.key, 'color'))) {\n          <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(styleColor(def.key, 'color'))\"\n            (input)=\"onStyleColorEdit(def.key, 'color', { hex: $any($event.target).value })\" />\n          } @else {\n          <span class=\"color-preview\" [style.background]=\"styleColor(def.key, 'color')\"></span>\n          }\n          <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\"\n            [value]=\"colorAlpha(styleColor(def.key, 'color'))\"\n            (input)=\"onStyleColorEdit(def.key, 'color', { alpha: +$any($event.target).value })\" />\n          <span class=\"color-alpha-value\">{{ colorAlpha(styleColor(def.key, 'color')) }}%</span>\n          @if (styleColor(def.key, 'color')) {\n          <button type=\"button\" class=\"text-style-clear\" (click)=\"clearStyleColor(def.key, 'color')\">Reset</button>\n          } @else {\n          <span class=\"text-style-unset-hint\">theme</span>\n          }\n          </div>\n        </div>\n        }\n\n        <div class=\"color-control\">\n          <span class=\"color-control-label\">{{ isSelfColoured() ? 'Cell background' : 'Background' }}</span>\n          <div class=\"color-control-body\">\n          <mat-form-field appearance=\"outline\" class=\"color-token-field\">\n            <mat-select [ngModel]=\"colorToken(styleColor(def.key, 'background'))\"\n              (ngModelChange)=\"onStyleColorEdit(def.key, 'background', { token: $event })\">\n              <mat-option value=\"\">Custom</mat-option>\n              @for (t of colorTokens; track t.value) {\n              <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          @if (!isTokenColor(styleColor(def.key, 'background'))) {\n          <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(styleColor(def.key, 'background'))\"\n            (input)=\"onStyleColorEdit(def.key, 'background', { hex: $any($event.target).value })\" />\n          } @else {\n          <span class=\"color-preview\" [style.background]=\"styleColor(def.key, 'background')\"></span>\n          }\n          <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\"\n            [value]=\"colorAlpha(styleColor(def.key, 'background'))\"\n            (input)=\"onStyleColorEdit(def.key, 'background', { alpha: +$any($event.target).value })\" />\n          <span class=\"color-alpha-value\">{{ colorAlpha(styleColor(def.key, 'background')) }}%</span>\n          @if (styleColor(def.key, 'background')) {\n          <button type=\"button\" class=\"text-style-clear\" (click)=\"clearStyleColor(def.key, 'background')\">Reset</button>\n          } @else {\n          <span class=\"text-style-unset-hint\">none</span>\n          }\n          </div>\n        </div>\n\n        @if (styleColor(def.key, 'background') && !isSelfColoured()) {\n        <div class=\"text-style-row\">\n          <mat-form-field appearance=\"outline\" class=\"fill-select\">\n            <mat-label>Fill</mat-label>\n            <mat-select [ngModel]=\"styleFill(def.key)\" (ngModelChange)=\"onStyleFill(def.key, $event)\">\n              <mat-option value=\"text\">Behind the text (pill)</mat-option>\n              <mat-option value=\"cell\">Whole cell</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        }\n      </div>\n      }\n\n      @case ('rule_list') {\n      <div class=\"rule-list\">\n        <label class=\"text-style-label\">{{ def.label }}</label>\n        <p class=\"rule-list-hint\">Checked top to bottom \u2014 the first rule that matches wins.</p>\n        @for (rule of ruleItems(def.key); track $index) {\n        <div class=\"rule-row\">\n          <div class=\"rule-row-head\">\n            <mat-form-field appearance=\"outline\" class=\"rule-op\">\n              <mat-label>When</mat-label>\n              <mat-select [ngModel]=\"rule.op || 'between'\" (ngModelChange)=\"updateRule(def.key, $index, 'op', $event)\">\n                @for (o of ruleOperators; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <div class=\"rule-actions\">\n              <button type=\"button\" class=\"rule-btn\" title=\"Move up\" (click)=\"moveRule(def.key, $index, -1)\">\u2191</button>\n              <button type=\"button\" class=\"rule-btn\" title=\"Move down\" (click)=\"moveRule(def.key, $index, 1)\">\u2193</button>\n              <button type=\"button\" class=\"rule-btn rule-btn-remove\" title=\"Remove\" (click)=\"removeRule(def.key, $index)\">\u2715</button>\n            </div>\n          </div>\n          @if (operandCount(rule.op) > 0) {\n          <div class=\"rule-row-operands\">\n            <mat-form-field appearance=\"outline\" class=\"rule-source\">\n              <mat-label>{{ operandCount(rule.op) === 2 ? 'From' : 'Value' }}</mat-label>\n              <mat-select [ngModel]=\"ruleSource(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleSource(def.key, $index, 'from', $event)\">\n                @for (o of operandSources; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (!ruleSource(def.key, $index, 'from')) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Value</mat-label>\n              <input matInput [ngModel]=\"rule.from\" (ngModelChange)=\"updateRule(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            } @else {\n            @if (ruleSourceArg(def.key, $index, 'from'); as arg) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>{{ arg === 'p' ? 'Percentile' : 'N' }}</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleSourceArgValue(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleSourceArg(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            }\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>\u00B1 std dev</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleStddevOffset(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleStddevOffset(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            }\n          </div>\n          @if (operandCount(rule.op) === 2) {\n          <div class=\"rule-row-operands\">\n            <mat-form-field appearance=\"outline\" class=\"rule-source\">\n              <mat-label>To</mat-label>\n              <mat-select [ngModel]=\"ruleSource(def.key, $index, 'to')\"\n                (ngModelChange)=\"onRuleSource(def.key, $index, 'to', $event)\">\n                @for (o of operandSources; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (!ruleSource(def.key, $index, 'to')) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Value</mat-label>\n              <input matInput [ngModel]=\"rule.to\" (ngModelChange)=\"updateRule(def.key, $index, 'to', $event)\" />\n            </mat-form-field>\n            } @else if (ruleSourceArg(def.key, $index, 'to'); as arg) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>{{ arg === 'p' ? 'Percentile' : 'N' }}</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleSourceArgValue(def.key, $index, 'to')\"\n                (ngModelChange)=\"onRuleSourceArg(def.key, $index, 'to', $event)\" />\n            </mat-form-field>\n            }\n          </div>\n          }\n          }\n          <div class=\"rule-row-format\">\n            <span class=\"rule-color-group\">\n              <span class=\"rule-format-label\">Text</span>\n              <!-- Swapped for a read-only preview while a token is in force, as\n                   the column-level control does: with a token set,\n                   composeColorValue returns the token and a hex picked here is\n                   discarded, so an editable swatch invited an edit that\n                   silently did nothing. -->\n              @if (!isTokenColor(rule.color)) {\n              <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(rule.color)\"\n                (input)=\"onRuleColorEdit(def.key, $index, 'color', { hex: $any($event.target).value })\" />\n              } @else {\n              <span class=\"color-preview\" [style.background]=\"rule.color\"></span>\n              }\n              <mat-form-field appearance=\"outline\" class=\"color-token-field rule-token\">\n                <mat-select [ngModel]=\"colorToken(rule.color)\"\n                  (ngModelChange)=\"onRuleColorEdit(def.key, $index, 'color', { token: $event })\">\n                  <mat-option value=\"\">Custom</mat-option>\n                  @for (t of colorTokens; track t.value) {\n                  <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </span>\n            <!-- Grouped so the row wraps between the two colours rather than\n                 through one: the percentage broke onto the next line beside\n                 'Bold' and read as belonging to it. -->\n            <span class=\"rule-color-group\">\n              <span class=\"rule-format-label\">Fill</span>\n              @if (!isTokenColor(rule.background)) {\n              <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(rule.background)\"\n                (input)=\"onRuleColorEdit(def.key, $index, 'background', { hex: $any($event.target).value })\" />\n              } @else {\n              <span class=\"color-preview\" [style.background]=\"rule.background\"></span>\n              }\n              <!-- A fill is as likely to want a theme colour as the text is, and\n                   the alpha slider works for either: composeColorValue wraps a\n                   token in color-mix below 100%. -->\n              <mat-form-field appearance=\"outline\" class=\"color-token-field rule-token\">\n                <mat-select [ngModel]=\"colorToken(rule.background)\"\n                  (ngModelChange)=\"onRuleColorEdit(def.key, $index, 'background', { token: $event })\">\n                  <mat-option value=\"\">Custom</mat-option>\n                  @for (t of colorTokens; track t.value) {\n                  <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <!-- Its own line: the label, swatch and token select already fill\n                   the panel's width, and a token name as long as 'On Secondary\n                   Container' pushed the slider off the right edge. -->\n              <span class=\"rule-alpha-group\">\n                <span class=\"rule-format-label\">Opacity</span>\n                <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\" [value]=\"colorAlpha(rule.background)\"\n                  (input)=\"onRuleColorEdit(def.key, $index, 'background', { alpha: +$any($event.target).value })\" />\n                <span class=\"color-alpha-value\">{{ colorAlpha(rule.background) }}%</span>\n              </span>\n            </span>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bold\"\n              (change)=\"updateRule(def.key, $index, 'bold', $event.checked)\">Bold</mat-checkbox>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"rule.fill === 'text'\"\n              (change)=\"updateRule(def.key, $index, 'fill', $event.checked ? 'text' : 'cell')\">Pill</mat-checkbox>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bar\"\n              (change)=\"updateRule(def.key, $index, 'bar', $event.checked)\">Data bar</mat-checkbox>\n            @if (rule.bar) {\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bar_auto\"\n              (change)=\"updateRule(def.key, $index, 'bar_auto', $event.checked)\">Scale to column</mat-checkbox>\n            }\n          </div>\n          @if (rule.bar && !rule.bar_auto) {\n          <div class=\"rule-row-format\">\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Bar min</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"rule.bar_min\" (ngModelChange)=\"updateRule(def.key, $index, 'bar_min', $event)\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Bar max</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"rule.bar_max\" (ngModelChange)=\"updateRule(def.key, $index, 'bar_max', $event)\" />\n            </mat-form-field>\n          </div>\n          }\n        </div>\n        }\n        <button type=\"button\" class=\"rule-add\" (click)=\"addRule(def.key)\">+ Add rule</button>\n      </div>\n      }\n\n      @case ('checkbox') {\n      <mat-checkbox [checked]=\"isChecked(def)\" (change)=\"onCheckbox(def.key, $event.checked)\">\n        {{ def.label }}\n      </mat-checkbox>\n      }\n\n      @case ('day_chips') {\n      <div class=\"day-chips\">\n        <label class=\"day-chips-label\">{{ def.label }}</label>\n        <div class=\"day-chips-row\">\n          @for (day of weekDays; track day) {\n          <button type=\"button\" class=\"day-chip\" [class.selected]=\"isDaySelected(def.key, day)\"\n            (click)=\"toggleDay(def.key, day)\">{{ day }}</button>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('list') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <textarea matInput rows=\"4\" [ngModel]=\"listText(def.key)\"\n          (ngModelChange)=\"onList(def.key, $event)\"></textarea>\n      </mat-form-field>\n      }\n\n      @case ('color_list') {\n      <div class=\"color-list\">\n        <label class=\"color-list-label\">{{ def.label }}</label>\n        <div class=\"color-list-chips\">\n          @for (opt of colorListItems(def.key); track $index) {\n          <div class=\"color-list-chip\">\n            <input type=\"color\" class=\"color-list-dot\" [value]=\"opt.color || '#9CA3AF'\"\n              (input)=\"onColorListColorChange(def.key, $index, $any($event.target).value)\" title=\"Change colour\" />\n            <span class=\"color-list-name\">{{ opt.name }}</span>\n            <button type=\"button\" class=\"color-list-remove\" (click)=\"removeColorListItem(def.key, $index)\"\n              title=\"Remove\">&times;</button>\n          </div>\n          }\n        </div>\n        <input class=\"color-list-add\" type=\"text\" placeholder=\"Add option, press Enter\"\n          (keydown.enter)=\"addColorListItem(def.key, $any($event.target).value, def.defaultColor || '#9CA3AF'); $any($event.target).value = ''\" />\n      </div>\n      }\n\n      @case ('range_color_list') {\n      <div class=\"range-list\">\n        <label class=\"range-list-label\">{{ def.label }}</label>\n        @for (r of rangeListItems(def.key); track $index) {\n        <div class=\"range-list-row\">\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.from\"\n            (input)=\"onRangeChange(def.key, $index, 'from', $any($event.target).value)\" title=\"From\" />\n          <span class=\"range-list-sep\">\u2013</span>\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.to\"\n            (input)=\"onRangeChange(def.key, $index, 'to', $any($event.target).value)\" title=\"To\" />\n          <input type=\"color\" class=\"range-list-color\" [value]=\"r.color || '#22C55E'\"\n            (input)=\"onRangeColorChange(def.key, $index, $any($event.target).value)\" title=\"Colour\" />\n          <button type=\"button\" class=\"range-list-remove\" (click)=\"removeRangeItem(def.key, $index)\"\n            title=\"Remove\">&times;</button>\n        </div>\n        }\n        <button type=\"button\" class=\"range-list-add\" (click)=\"addRangeItem(def.key)\">+ Add range</button>\n      </div>\n      }\n\n      }\n    </div>\n    }\n  </div>\n  }\n</aside>\n", styles: [".design-panel-backdrop{position:fixed;inset:0;background:#0000002e;z-index:1000}.column-design-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--grid-surface, #fff);box-shadow:-4px 0 16px #00000029;transform:translate(100%);transition:transform .22s ease;z-index:1001;display:flex;flex-direction:column;font-family:var(--grid-font-family, inherit)}.column-design-panel.open{transform:translate(0)}.design-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grid-border-color, #e0e0e0)}.design-panel-header .design-panel-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-panel-body{padding:16px;overflow-y:auto;flex:1}.design-panel-body .design-field{margin-bottom:4px}.design-panel-body .design-field .full-width{width:100%}.design-panel-body .design-field mat-checkbox{display:block;margin:8px 0 16px}.design-panel-body .color-list{margin:4px 0 16px}.design-panel-body .color-list .color-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.design-panel-body .color-list .color-list-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.design-panel-body .color-list .color-list-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:16px;background:var(--grid-surface, #fff);font-size:12px}.design-panel-body .color-list .color-list-dot{width:18px;height:18px;padding:0;border:none;background:none;border-radius:50%;cursor:pointer}.design-panel-body .color-list .color-list-remove{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.design-panel-body .color-list .color-list-remove:hover{color:var(--grid-error, #b3261e)}.design-panel-body .color-list .color-list-add{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.design-panel-body .color-list .color-list-add:focus{border-color:var(--grid-primary, #6750a4)}.range-list{margin:4px 0 16px}.range-list .range-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.range-list .range-list-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.range-list .range-list-num{width:56px;padding:6px 8px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.range-list .range-list-num:focus{border-color:var(--grid-primary, #6750a4)}.range-list .range-list-sep{color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-color{width:28px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;cursor:pointer}.range-list .range-list-remove{margin-left:auto;border:none;background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-remove:hover{color:var(--grid-error, #b3261e)}.range-list .range-list-add{margin-top:2px;padding:6px 10px;border:1px dashed var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;font-size:13px;cursor:pointer;color:var(--grid-primary, #6750a4)}.range-list .range-list-add:hover{background:var(--grid-surface-variant, #f3edf7)}.day-chips{display:flex;flex-direction:column;gap:6px}.day-chips-label{font-size:12px;color:var(--eru-on-surface-variant, #5f6368)}.day-chips-row{display:flex;flex-wrap:wrap;gap:6px}.day-chip{border:1px solid var(--eru-outline, #c4c7c5);background:transparent;border-radius:16px;padding:4px 12px;font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,color .15s,border-color .15s}.day-chip.selected{background:var(--eru-primary, #1a73e8);border-color:var(--eru-primary, #1a73e8);color:#fff}.design-field-inherited{opacity:.55;pointer-events:none}.design-meta-source{padding-bottom:8px;border-bottom:1px solid var(--grid-outline-variant, #e0e0e0);margin-bottom:12px}.design-meta-hint{margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--grid-on-surface-variant, #49454f)}.text-style-control{display:flex;flex-direction:column;gap:6px}.text-style-label{font-size:12px;color:var(--grid-on-surface-variant, #49454f)}.text-style-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.text-style-number{width:96px}.text-style-color{display:flex;align-items:center;gap:6px}.text-style-color input[type=color]{width:32px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:4px;background:none;cursor:pointer}.text-style-color-label{font-size:12px}.text-style-clear{border:none;background:none;padding:0;font-size:11px;color:var(--grid-primary, #6750a4);cursor:pointer}.text-style-color--unset input[type=color]{opacity:.3}.text-style-unset-hint{font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.design-target-hidden{margin-left:6px;padding:1px 6px;border-radius:8px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;background:var(--grid-surface-container-high, #e6e0e9);color:var(--grid-on-surface-variant, #49454f)}.color-control{display:block;margin-top:4px}.color-control-label{display:block;font-size:12px;margin-bottom:2px;color:var(--grid-on-surface-variant, #49454f)}.color-control-body{display:flex;align-items:center;gap:6px;min-width:0}.color-token-field{flex:1 1 auto;min-width:0}.color-swatch{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;border:1px solid var(--grid-outline-variant, #cac4d0);vertical-align:middle}.color-hex{flex:0 0 auto;width:32px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:4px;background:none;cursor:pointer}.color-preview{width:32px;height:28px;border-radius:4px;border:1px solid var(--grid-outline-variant, #cac4d0)}.color-alpha{flex:0 1 68px;min-width:44px}.color-alpha-value{flex:0 0 auto;font-size:11px;min-width:30px;color:var(--grid-on-surface-variant, #49454f)}.color-preview{flex:0 0 auto}.fill-select{width:220px}.rule-list{display:flex;flex-direction:column;gap:8px}.rule-list-hint{margin:0;font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.rule-row{border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}.rule-row-head{display:flex;align-items:center;gap:6px;min-width:0}.rule-row-operands,.rule-row-format{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.rule-actions{margin-left:auto;flex:0 0 auto;display:flex;gap:4px}.rule-op{flex:1 1 auto;min-width:0}.rule-operand{flex:1 1 96px;min-width:88px}.rule-source{flex:1 1 140px;min-width:128px}.rule-token{flex:1 1 96px;min-width:88px}.rule-format-label{font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.rule-color-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px;flex:1 1 100%}.rule-alpha-group{display:flex;align-items:center;gap:6px;flex:1 1 100%}.rule-alpha-group .color-alpha{flex:1 1 auto}.rule-btn{border:1px solid var(--grid-outline-variant, #cac4d0);background:none;border-radius:4px;width:26px;height:26px;cursor:pointer;font-size:12px;line-height:1}.rule-btn-remove{color:var(--grid-error, #b3261e)}.rule-add{align-self:flex-start;border:1px dashed var(--grid-outline, #79747e);background:none;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--grid-primary, #6750a4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ColumnDesignPanelComponent, decorators: [{
             type: Component,
@@ -13698,7 +14169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         MatCheckboxModule,
                         MatIconModule,
                         MatButtonModule,
-                    ], template: "@if (isOpen()) {\n<div class=\"design-panel-backdrop\" (click)=\"close()\"></div>\n}\n<aside class=\"column-design-panel\" [class.open]=\"isOpen()\">\n  @if (field(); as col) {\n  <header class=\"design-panel-header\">\n    <div class=\"design-panel-title\">\n      <mat-icon>tune</mat-icon>\n      <span>{{ col.label || col.name }}</span>\n    </div>\n    <button mat-icon-button (click)=\"close()\" title=\"Close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </header>\n\n  <div class=\"design-panel-body\">\n    <!-- Which field is being designed. A pivot with one measure renders no\n         measure-name row, so its single header cell stands for the column\n         dimension and the measure at once and can only open one of them; this\n         reaches the other. Also the way to a header too narrow to click, or a\n         hidden column. Only shown when there is more than one thing to pick. -->\n    @if (designTargets().length > 0 && targetCount() > 1) {\n    <div class=\"design-field design-target\">\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Editing</mat-label>\n        <mat-select [ngModel]=\"gridStore.selectedDesignColumn()\"\n          (ngModelChange)=\"gridStore.selectDesignColumn($event)\">\n          @for (group of designTargets(); track group.group) {\n          <mat-optgroup [label]=\"group.group\">\n            @for (target of group.fields; track target.name) {\n            <mat-option [value]=\"target.name\">\n              {{ target.label || target.name }}\n              @if (target.is_hidden) {<span class=\"design-target-hidden\">hidden</span>}\n            </mat-option>\n            }\n          </mat-optgroup>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    }\n\n    <!-- Where this column's metadata comes from: typed in here, or inherited\n         from a field in the host app's data model so it stays defined once. -->\n    <div class=\"design-field design-meta-source\">\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Metadata source</mat-label>\n        <mat-select [ngModel]=\"metaSource()\" (ngModelChange)=\"onMetaSourceChange($event)\">\n          <mat-option value=\"manual\">Defined here</mat-option>\n          <mat-option value=\"entity\">Mapped to data model field</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      @if (metaSource() === 'entity') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Entity</mat-label>\n        <mat-select [ngModel]=\"getValue('mapped_entity')\" (ngModelChange)=\"onEntityChange($event)\"\n          (openedChange)=\"$event && requestEntities()\">\n          @for (opt of entityOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      @if (getValue('mapped_entity')) {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Field</mat-label>\n        <mat-select [ngModel]=\"getValue('mapped_field')\" (ngModelChange)=\"onEntityFieldChange($event)\">\n          @for (opt of entityFieldOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @if (isEntityMapped()) {\n      <p class=\"design-meta-hint\">\n        Colours, options and formatting come from the data model. Edit them there to update\n        every grid that maps this field. The date format, abbreviation, display scale and\n        symbol field start from the model but can be changed here for this grid alone.\n      </p>\n      }\n      }\n    </div>\n\n    @for (def of metaFields(); track trackMetaField(def)) {\n    <div class=\"design-field\" [class.design-field-inherited]=\"isInherited(def.key)\"\n      [title]=\"isInherited(def.key) ? 'Inherited from the mapped data model field' : ''\">\n      @switch (def.control) {\n\n      @case ('text') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onText(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('number') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"number\" [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onNumber(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key) ?? def.defaultValue\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          @for (opt of def.options; track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('field_select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          <mat-option [value]=\"null\">None</mat-option>\n          @for (opt of fieldSelectOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('field_slot') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"slotValue(def)\" (ngModelChange)=\"onSlotChange(def, $event)\">\n          <mat-option [value]=\"null\">None</mat-option>\n          @for (opt of fieldSlotOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('text_style') {\n      <div class=\"text-style-control\">\n        <label class=\"text-style-label\">{{ def.label }}</label>\n        <div class=\"text-style-row\">\n          <mat-form-field appearance=\"outline\" class=\"text-style-number\">\n            <mat-label>Size</mat-label>\n            <input matInput type=\"number\" [ngModel]=\"styleValue(def.key, 'font_size')\"\n              (ngModelChange)=\"onStyleChange(def.key, 'font_size', $event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"text-style-number\">\n            <mat-label>Weight</mat-label>\n            <input matInput type=\"number\" [ngModel]=\"styleValue(def.key, 'font_weight')\"\n              (ngModelChange)=\"onStyleChange(def.key, 'font_weight', $event)\" />\n          </mat-form-field>\n          <mat-checkbox class=\"text-style-check\" [checked]=\"!!styleValue(def.key, 'italic')\"\n            (change)=\"onStyleChange(def.key, 'italic', $event.checked)\">Italic</mat-checkbox>\n        </div>\n\n        @if (!isSelfColoured()) {\n        <div class=\"color-control\">\n          <span class=\"color-control-label\">Text colour</span>\n          <div class=\"color-control-body\">\n          <mat-form-field appearance=\"outline\" class=\"color-token-field\">\n            <mat-select [ngModel]=\"colorToken(styleColor(def.key, 'color'))\"\n              (ngModelChange)=\"onStyleColorEdit(def.key, 'color', { token: $event })\">\n              <mat-option value=\"\">Custom</mat-option>\n              @for (t of colorTokens; track t.value) {\n              <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          @if (!isTokenColor(styleColor(def.key, 'color'))) {\n          <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(styleColor(def.key, 'color'))\"\n            (input)=\"onStyleColorEdit(def.key, 'color', { hex: $any($event.target).value })\" />\n          } @else {\n          <span class=\"color-preview\" [style.background]=\"styleColor(def.key, 'color')\"></span>\n          }\n          <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\"\n            [value]=\"colorAlpha(styleColor(def.key, 'color'))\"\n            (input)=\"onStyleColorEdit(def.key, 'color', { alpha: +$any($event.target).value })\" />\n          <span class=\"color-alpha-value\">{{ colorAlpha(styleColor(def.key, 'color')) }}%</span>\n          @if (styleColor(def.key, 'color')) {\n          <button type=\"button\" class=\"text-style-clear\" (click)=\"clearStyleColor(def.key, 'color')\">Reset</button>\n          } @else {\n          <span class=\"text-style-unset-hint\">theme</span>\n          }\n          </div>\n        </div>\n        }\n\n        <div class=\"color-control\">\n          <span class=\"color-control-label\">{{ isSelfColoured() ? 'Cell background' : 'Background' }}</span>\n          <div class=\"color-control-body\">\n          <mat-form-field appearance=\"outline\" class=\"color-token-field\">\n            <mat-select [ngModel]=\"colorToken(styleColor(def.key, 'background'))\"\n              (ngModelChange)=\"onStyleColorEdit(def.key, 'background', { token: $event })\">\n              <mat-option value=\"\">Custom</mat-option>\n              @for (t of colorTokens; track t.value) {\n              <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          @if (!isTokenColor(styleColor(def.key, 'background'))) {\n          <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(styleColor(def.key, 'background'))\"\n            (input)=\"onStyleColorEdit(def.key, 'background', { hex: $any($event.target).value })\" />\n          } @else {\n          <span class=\"color-preview\" [style.background]=\"styleColor(def.key, 'background')\"></span>\n          }\n          <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\"\n            [value]=\"colorAlpha(styleColor(def.key, 'background'))\"\n            (input)=\"onStyleColorEdit(def.key, 'background', { alpha: +$any($event.target).value })\" />\n          <span class=\"color-alpha-value\">{{ colorAlpha(styleColor(def.key, 'background')) }}%</span>\n          @if (styleColor(def.key, 'background')) {\n          <button type=\"button\" class=\"text-style-clear\" (click)=\"clearStyleColor(def.key, 'background')\">Reset</button>\n          } @else {\n          <span class=\"text-style-unset-hint\">none</span>\n          }\n          </div>\n        </div>\n\n        @if (styleColor(def.key, 'background') && !isSelfColoured()) {\n        <div class=\"text-style-row\">\n          <mat-form-field appearance=\"outline\" class=\"fill-select\">\n            <mat-label>Fill</mat-label>\n            <mat-select [ngModel]=\"styleFill(def.key)\" (ngModelChange)=\"onStyleFill(def.key, $event)\">\n              <mat-option value=\"text\">Behind the text (pill)</mat-option>\n              <mat-option value=\"cell\">Whole cell</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        }\n      </div>\n      }\n\n      @case ('rule_list') {\n      <div class=\"rule-list\">\n        <label class=\"text-style-label\">{{ def.label }}</label>\n        <p class=\"rule-list-hint\">Checked top to bottom \u2014 the first rule that matches wins.</p>\n        @for (rule of ruleItems(def.key); track $index) {\n        <div class=\"rule-row\">\n          <div class=\"rule-row-head\">\n            <mat-form-field appearance=\"outline\" class=\"rule-op\">\n              <mat-label>When</mat-label>\n              <mat-select [ngModel]=\"rule.op || 'between'\" (ngModelChange)=\"updateRule(def.key, $index, 'op', $event)\">\n                @for (o of ruleOperators; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <div class=\"rule-actions\">\n              <button type=\"button\" class=\"rule-btn\" title=\"Move up\" (click)=\"moveRule(def.key, $index, -1)\">\u2191</button>\n              <button type=\"button\" class=\"rule-btn\" title=\"Move down\" (click)=\"moveRule(def.key, $index, 1)\">\u2193</button>\n              <button type=\"button\" class=\"rule-btn rule-btn-remove\" title=\"Remove\" (click)=\"removeRule(def.key, $index)\">\u2715</button>\n            </div>\n          </div>\n          @if (operandCount(rule.op) > 0) {\n          <div class=\"rule-row-operands\">\n            <mat-form-field appearance=\"outline\" class=\"rule-source\">\n              <mat-label>{{ operandCount(rule.op) === 2 ? 'From' : 'Value' }}</mat-label>\n              <mat-select [ngModel]=\"ruleSource(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleSource(def.key, $index, 'from', $event)\">\n                @for (o of operandSources; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (!ruleSource(def.key, $index, 'from')) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Value</mat-label>\n              <input matInput [ngModel]=\"rule.from\" (ngModelChange)=\"updateRule(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            } @else {\n            @if (ruleSourceArg(def.key, $index, 'from'); as arg) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>{{ arg === 'p' ? 'Percentile' : 'N' }}</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleSourceArgValue(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleSourceArg(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            }\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>\u00B1 std dev</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleStddevOffset(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleStddevOffset(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            }\n          </div>\n          @if (operandCount(rule.op) === 2) {\n          <div class=\"rule-row-operands\">\n            <mat-form-field appearance=\"outline\" class=\"rule-source\">\n              <mat-label>To</mat-label>\n              <mat-select [ngModel]=\"ruleSource(def.key, $index, 'to')\"\n                (ngModelChange)=\"onRuleSource(def.key, $index, 'to', $event)\">\n                @for (o of operandSources; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (!ruleSource(def.key, $index, 'to')) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Value</mat-label>\n              <input matInput [ngModel]=\"rule.to\" (ngModelChange)=\"updateRule(def.key, $index, 'to', $event)\" />\n            </mat-form-field>\n            } @else if (ruleSourceArg(def.key, $index, 'to'); as arg) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>{{ arg === 'p' ? 'Percentile' : 'N' }}</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleSourceArgValue(def.key, $index, 'to')\"\n                (ngModelChange)=\"onRuleSourceArg(def.key, $index, 'to', $event)\" />\n            </mat-form-field>\n            }\n          </div>\n          }\n          }\n          <div class=\"rule-row-format\">\n            <span class=\"rule-color-group\">\n              <span class=\"rule-format-label\">Text</span>\n              <!-- Swapped for a read-only preview while a token is in force, as\n                   the column-level control does: with a token set,\n                   composeColorValue returns the token and a hex picked here is\n                   discarded, so an editable swatch invited an edit that\n                   silently did nothing. -->\n              @if (!isTokenColor(rule.color)) {\n              <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(rule.color)\"\n                (input)=\"onRuleColorEdit(def.key, $index, 'color', { hex: $any($event.target).value })\" />\n              } @else {\n              <span class=\"color-preview\" [style.background]=\"rule.color\"></span>\n              }\n              <mat-form-field appearance=\"outline\" class=\"color-token-field rule-token\">\n                <mat-select [ngModel]=\"colorToken(rule.color)\"\n                  (ngModelChange)=\"onRuleColorEdit(def.key, $index, 'color', { token: $event })\">\n                  <mat-option value=\"\">Custom</mat-option>\n                  @for (t of colorTokens; track t.value) {\n                  <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </span>\n            <!-- Grouped so the row wraps between the two colours rather than\n                 through one: the percentage broke onto the next line beside\n                 'Bold' and read as belonging to it. -->\n            <span class=\"rule-color-group\">\n              <span class=\"rule-format-label\">Fill</span>\n              @if (!isTokenColor(rule.background)) {\n              <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(rule.background)\"\n                (input)=\"onRuleColorEdit(def.key, $index, 'background', { hex: $any($event.target).value })\" />\n              } @else {\n              <span class=\"color-preview\" [style.background]=\"rule.background\"></span>\n              }\n              <!-- A fill is as likely to want a theme colour as the text is, and\n                   the alpha slider works for either: composeColorValue wraps a\n                   token in color-mix below 100%. -->\n              <mat-form-field appearance=\"outline\" class=\"color-token-field rule-token\">\n                <mat-select [ngModel]=\"colorToken(rule.background)\"\n                  (ngModelChange)=\"onRuleColorEdit(def.key, $index, 'background', { token: $event })\">\n                  <mat-option value=\"\">Custom</mat-option>\n                  @for (t of colorTokens; track t.value) {\n                  <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <!-- Its own line: the label, swatch and token select already fill\n                   the panel's width, and a token name as long as 'On Secondary\n                   Container' pushed the slider off the right edge. -->\n              <span class=\"rule-alpha-group\">\n                <span class=\"rule-format-label\">Opacity</span>\n                <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\" [value]=\"colorAlpha(rule.background)\"\n                  (input)=\"onRuleColorEdit(def.key, $index, 'background', { alpha: +$any($event.target).value })\" />\n                <span class=\"color-alpha-value\">{{ colorAlpha(rule.background) }}%</span>\n              </span>\n            </span>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bold\"\n              (change)=\"updateRule(def.key, $index, 'bold', $event.checked)\">Bold</mat-checkbox>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"rule.fill === 'text'\"\n              (change)=\"updateRule(def.key, $index, 'fill', $event.checked ? 'text' : 'cell')\">Pill</mat-checkbox>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bar\"\n              (change)=\"updateRule(def.key, $index, 'bar', $event.checked)\">Data bar</mat-checkbox>\n            @if (rule.bar) {\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bar_auto\"\n              (change)=\"updateRule(def.key, $index, 'bar_auto', $event.checked)\">Scale to column</mat-checkbox>\n            }\n          </div>\n          @if (rule.bar && !rule.bar_auto) {\n          <div class=\"rule-row-format\">\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Bar min</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"rule.bar_min\" (ngModelChange)=\"updateRule(def.key, $index, 'bar_min', $event)\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Bar max</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"rule.bar_max\" (ngModelChange)=\"updateRule(def.key, $index, 'bar_max', $event)\" />\n            </mat-form-field>\n          </div>\n          }\n        </div>\n        }\n        <button type=\"button\" class=\"rule-add\" (click)=\"addRule(def.key)\">+ Add rule</button>\n      </div>\n      }\n\n      @case ('checkbox') {\n      <mat-checkbox [checked]=\"isChecked(def)\" (change)=\"onCheckbox(def.key, $event.checked)\">\n        {{ def.label }}\n      </mat-checkbox>\n      }\n\n      @case ('day_chips') {\n      <div class=\"day-chips\">\n        <label class=\"day-chips-label\">{{ def.label }}</label>\n        <div class=\"day-chips-row\">\n          @for (day of weekDays; track day) {\n          <button type=\"button\" class=\"day-chip\" [class.selected]=\"isDaySelected(def.key, day)\"\n            (click)=\"toggleDay(def.key, day)\">{{ day }}</button>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('list') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <textarea matInput rows=\"4\" [ngModel]=\"listText(def.key)\"\n          (ngModelChange)=\"onList(def.key, $event)\"></textarea>\n      </mat-form-field>\n      }\n\n      @case ('color_list') {\n      <div class=\"color-list\">\n        <label class=\"color-list-label\">{{ def.label }}</label>\n        <div class=\"color-list-chips\">\n          @for (opt of colorListItems(def.key); track $index) {\n          <div class=\"color-list-chip\">\n            <input type=\"color\" class=\"color-list-dot\" [value]=\"opt.color || '#9CA3AF'\"\n              (input)=\"onColorListColorChange(def.key, $index, $any($event.target).value)\" title=\"Change colour\" />\n            <span class=\"color-list-name\">{{ opt.name }}</span>\n            <button type=\"button\" class=\"color-list-remove\" (click)=\"removeColorListItem(def.key, $index)\"\n              title=\"Remove\">&times;</button>\n          </div>\n          }\n        </div>\n        <input class=\"color-list-add\" type=\"text\" placeholder=\"Add option, press Enter\"\n          (keydown.enter)=\"addColorListItem(def.key, $any($event.target).value, def.defaultColor || '#9CA3AF'); $any($event.target).value = ''\" />\n      </div>\n      }\n\n      @case ('range_color_list') {\n      <div class=\"range-list\">\n        <label class=\"range-list-label\">{{ def.label }}</label>\n        @for (r of rangeListItems(def.key); track $index) {\n        <div class=\"range-list-row\">\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.from\"\n            (input)=\"onRangeChange(def.key, $index, 'from', $any($event.target).value)\" title=\"From\" />\n          <span class=\"range-list-sep\">\u2013</span>\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.to\"\n            (input)=\"onRangeChange(def.key, $index, 'to', $any($event.target).value)\" title=\"To\" />\n          <input type=\"color\" class=\"range-list-color\" [value]=\"r.color || '#22C55E'\"\n            (input)=\"onRangeColorChange(def.key, $index, $any($event.target).value)\" title=\"Colour\" />\n          <button type=\"button\" class=\"range-list-remove\" (click)=\"removeRangeItem(def.key, $index)\"\n            title=\"Remove\">&times;</button>\n        </div>\n        }\n        <button type=\"button\" class=\"range-list-add\" (click)=\"addRangeItem(def.key)\">+ Add range</button>\n      </div>\n      }\n\n      }\n    </div>\n    }\n  </div>\n  }\n</aside>\n", styles: [".design-panel-backdrop{position:fixed;inset:0;background:#0000002e;z-index:1000}.column-design-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--grid-surface, #fff);box-shadow:-4px 0 16px #00000029;transform:translate(100%);transition:transform .22s ease;z-index:1001;display:flex;flex-direction:column;font-family:var(--grid-font-family, inherit)}.column-design-panel.open{transform:translate(0)}.design-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grid-border-color, #e0e0e0)}.design-panel-header .design-panel-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-panel-body{padding:16px;overflow-y:auto;flex:1}.design-panel-body .design-field{margin-bottom:4px}.design-panel-body .design-field .full-width{width:100%}.design-panel-body .design-field mat-checkbox{display:block;margin:8px 0 16px}.design-panel-body .color-list{margin:4px 0 16px}.design-panel-body .color-list .color-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.design-panel-body .color-list .color-list-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.design-panel-body .color-list .color-list-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:16px;background:var(--grid-surface, #fff);font-size:12px}.design-panel-body .color-list .color-list-dot{width:18px;height:18px;padding:0;border:none;background:none;border-radius:50%;cursor:pointer}.design-panel-body .color-list .color-list-remove{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.design-panel-body .color-list .color-list-remove:hover{color:var(--grid-error, #b3261e)}.design-panel-body .color-list .color-list-add{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.design-panel-body .color-list .color-list-add:focus{border-color:var(--grid-primary, #6750a4)}.range-list{margin:4px 0 16px}.range-list .range-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.range-list .range-list-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.range-list .range-list-num{width:56px;padding:6px 8px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.range-list .range-list-num:focus{border-color:var(--grid-primary, #6750a4)}.range-list .range-list-sep{color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-color{width:28px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;cursor:pointer}.range-list .range-list-remove{margin-left:auto;border:none;background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-remove:hover{color:var(--grid-error, #b3261e)}.range-list .range-list-add{margin-top:2px;padding:6px 10px;border:1px dashed var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;font-size:13px;cursor:pointer;color:var(--grid-primary, #6750a4)}.range-list .range-list-add:hover{background:var(--grid-surface-variant, #f3edf7)}.day-chips{display:flex;flex-direction:column;gap:6px}.day-chips-label{font-size:12px;color:var(--eru-on-surface-variant, #5f6368)}.day-chips-row{display:flex;flex-wrap:wrap;gap:6px}.day-chip{border:1px solid var(--eru-outline, #c4c7c5);background:transparent;border-radius:16px;padding:4px 12px;font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,color .15s,border-color .15s}.day-chip.selected{background:var(--eru-primary, #1a73e8);border-color:var(--eru-primary, #1a73e8);color:#fff}.design-field-inherited{opacity:.55;pointer-events:none}.design-meta-source{padding-bottom:8px;border-bottom:1px solid var(--grid-outline-variant, #e0e0e0);margin-bottom:12px}.design-meta-hint{margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--grid-on-surface-variant, #49454f)}.text-style-control{display:flex;flex-direction:column;gap:6px}.text-style-label{font-size:12px;color:var(--grid-on-surface-variant, #49454f)}.text-style-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.text-style-number{width:96px}.text-style-color{display:flex;align-items:center;gap:6px}.text-style-color input[type=color]{width:32px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:4px;background:none;cursor:pointer}.text-style-color-label{font-size:12px}.text-style-clear{border:none;background:none;padding:0;font-size:11px;color:var(--grid-primary, #6750a4);cursor:pointer}.text-style-color--unset input[type=color]{opacity:.3}.text-style-unset-hint{font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.design-target-hidden{margin-left:6px;padding:1px 6px;border-radius:8px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;background:var(--grid-surface-container-high, #e6e0e9);color:var(--grid-on-surface-variant, #49454f)}.color-control{display:block;margin-top:4px}.color-control-label{display:block;font-size:12px;margin-bottom:2px;color:var(--grid-on-surface-variant, #49454f)}.color-control-body{display:flex;align-items:center;gap:6px;min-width:0}.color-token-field{flex:1 1 auto;min-width:0}.color-swatch{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;border:1px solid var(--grid-outline-variant, #cac4d0);vertical-align:middle}.color-hex{flex:0 0 auto;width:32px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:4px;background:none;cursor:pointer}.color-preview{width:32px;height:28px;border-radius:4px;border:1px solid var(--grid-outline-variant, #cac4d0)}.color-alpha{flex:0 1 68px;min-width:44px}.color-alpha-value{flex:0 0 auto;font-size:11px;min-width:30px;color:var(--grid-on-surface-variant, #49454f)}.color-preview{flex:0 0 auto}.fill-select{width:220px}.rule-list{display:flex;flex-direction:column;gap:8px}.rule-list-hint{margin:0;font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.rule-row{border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}.rule-row-head{display:flex;align-items:center;gap:6px;min-width:0}.rule-row-operands,.rule-row-format{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.rule-actions{margin-left:auto;flex:0 0 auto;display:flex;gap:4px}.rule-op{flex:1 1 auto;min-width:0}.rule-operand{flex:1 1 96px;min-width:88px}.rule-source{flex:1 1 140px;min-width:128px}.rule-token{flex:1 1 96px;min-width:88px}.rule-format-label{font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.rule-color-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px;flex:1 1 100%}.rule-alpha-group{display:flex;align-items:center;gap:6px;flex:1 1 100%}.rule-alpha-group .color-alpha{flex:1 1 auto}.rule-btn{border:1px solid var(--grid-outline-variant, #cac4d0);background:none;border-radius:4px;width:26px;height:26px;cursor:pointer;font-size:12px;line-height:1}.rule-btn-remove{color:var(--grid-error, #b3261e)}.rule-add{align-self:flex-start;border:1px dashed var(--grid-outline, #79747e);background:none;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--grid-primary, #6750a4)}\n"] }]
+                    ], template: "@if (isOpen()) {\n<div class=\"design-panel-backdrop\" (click)=\"close()\"></div>\n}\n<aside class=\"column-design-panel\" [class.open]=\"isOpen()\">\n  @if (field(); as col) {\n  <header class=\"design-panel-header\">\n    <div class=\"design-panel-title\">\n      <mat-icon>tune</mat-icon>\n      <span>{{ col.label || col.name }}</span>\n    </div>\n    <button mat-icon-button (click)=\"close()\" title=\"Close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </header>\n\n  <div class=\"design-panel-body\">\n    <!-- Which field is being designed. A pivot with one measure renders no\n         measure-name row, so its single header cell stands for the column\n         dimension and the measure at once and can only open one of them; this\n         reaches the other. Also the way to a header too narrow to click, or a\n         hidden column. Only shown when there is more than one thing to pick. -->\n    @if (designTargets().length > 0 && targetCount() > 1) {\n    <div class=\"design-field design-target\">\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Editing</mat-label>\n        <mat-select [ngModel]=\"gridStore.selectedDesignColumn()\"\n          (ngModelChange)=\"gridStore.selectDesignColumn($event)\">\n          @for (group of designTargets(); track group.group) {\n          <mat-optgroup [label]=\"group.group\">\n            @for (target of group.fields; track target.name) {\n            <mat-option [value]=\"target.name\">\n              {{ target.label || target.name }}\n              @if (target.is_hidden) {<span class=\"design-target-hidden\">hidden</span>}\n            </mat-option>\n            }\n          </mat-optgroup>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    }\n\n    <!-- Where this column's metadata comes from: typed in here, or inherited\n         from a field in the host app's data model so it stays defined once. -->\n    <div class=\"design-field design-meta-source\">\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Metadata source</mat-label>\n        <mat-select [ngModel]=\"metaSource()\" (ngModelChange)=\"onMetaSourceChange($event)\">\n          <mat-option value=\"manual\">Defined here</mat-option>\n          <mat-option value=\"entity\">Mapped to data model field</mat-option>\n        </mat-select>\n      </mat-form-field>\n\n      @if (metaSource() === 'entity') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Entity</mat-label>\n        <mat-select [ngModel]=\"getValue('mapped_entity')\" (ngModelChange)=\"onEntityChange($event)\"\n          (openedChange)=\"$event && requestEntities()\">\n          @for (opt of entityOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      @if (getValue('mapped_entity')) {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>Field</mat-label>\n        <mat-select [ngModel]=\"getValue('mapped_field')\" (ngModelChange)=\"onEntityFieldChange($event)\">\n          @for (opt of entityFieldOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @if (isEntityMapped()) {\n      <p class=\"design-meta-hint\">\n        Colours, options and formatting come from the data model. Edit them there to update\n        every grid that maps this field. The label, date format, abbreviation, display scale\n        and symbol field start from the model but can be changed here for this grid alone.\n      </p>\n      }\n      }\n    </div>\n\n    @for (def of metaFields(); track trackMetaField(def)) {\n    <div class=\"design-field\" [class.design-field-inherited]=\"isInherited(def.key)\"\n      [title]=\"isInherited(def.key) ? 'Inherited from the mapped data model field' : ''\">\n      @switch (def.control) {\n\n      @case ('text') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onText(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('number') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"number\" [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onNumber(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key) ?? def.defaultValue\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          @for (opt of def.options; track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('field_select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          <mat-option [value]=\"null\">None</mat-option>\n          @for (opt of fieldSelectOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('field_slot') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"slotValue(def)\" (ngModelChange)=\"onSlotChange(def, $event)\">\n          <mat-option [value]=\"null\">None</mat-option>\n          @for (opt of fieldSlotOptions(); track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('text_slot') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"text\" [ngModel]=\"slotValue(def)\" (ngModelChange)=\"onSlotChange(def, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('text_style') {\n      <div class=\"text-style-control\">\n        <label class=\"text-style-label\">{{ def.label }}</label>\n        <div class=\"text-style-row\">\n          <mat-form-field appearance=\"outline\" class=\"text-style-number\">\n            <mat-label>Size</mat-label>\n            <input matInput type=\"number\" [ngModel]=\"styleValue(def.key, 'font_size')\"\n              (ngModelChange)=\"onStyleChange(def.key, 'font_size', $event)\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"text-style-number\">\n            <mat-label>Weight</mat-label>\n            <input matInput type=\"number\" [ngModel]=\"styleValue(def.key, 'font_weight')\"\n              (ngModelChange)=\"onStyleChange(def.key, 'font_weight', $event)\" />\n          </mat-form-field>\n          <mat-checkbox class=\"text-style-check\" [checked]=\"!!styleValue(def.key, 'italic')\"\n            (change)=\"onStyleChange(def.key, 'italic', $event.checked)\">Italic</mat-checkbox>\n        </div>\n\n        @if (!isSelfColoured()) {\n        <div class=\"color-control\">\n          <span class=\"color-control-label\">Text colour</span>\n          <div class=\"color-control-body\">\n          <mat-form-field appearance=\"outline\" class=\"color-token-field\">\n            <mat-select [ngModel]=\"colorToken(styleColor(def.key, 'color'))\"\n              (ngModelChange)=\"onStyleColorEdit(def.key, 'color', { token: $event })\">\n              <mat-option value=\"\">Custom</mat-option>\n              @for (t of colorTokens; track t.value) {\n              <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          @if (!isTokenColor(styleColor(def.key, 'color'))) {\n          <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(styleColor(def.key, 'color'))\"\n            (input)=\"onStyleColorEdit(def.key, 'color', { hex: $any($event.target).value })\" />\n          } @else {\n          <span class=\"color-preview\" [style.background]=\"styleColor(def.key, 'color')\"></span>\n          }\n          <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\"\n            [value]=\"colorAlpha(styleColor(def.key, 'color'))\"\n            (input)=\"onStyleColorEdit(def.key, 'color', { alpha: +$any($event.target).value })\" />\n          <span class=\"color-alpha-value\">{{ colorAlpha(styleColor(def.key, 'color')) }}%</span>\n          @if (styleColor(def.key, 'color')) {\n          <button type=\"button\" class=\"text-style-clear\" (click)=\"clearStyleColor(def.key, 'color')\">Reset</button>\n          } @else {\n          <span class=\"text-style-unset-hint\">theme</span>\n          }\n          </div>\n        </div>\n        }\n\n        <div class=\"color-control\">\n          <span class=\"color-control-label\">{{ isSelfColoured() ? 'Cell background' : 'Background' }}</span>\n          <div class=\"color-control-body\">\n          <mat-form-field appearance=\"outline\" class=\"color-token-field\">\n            <mat-select [ngModel]=\"colorToken(styleColor(def.key, 'background'))\"\n              (ngModelChange)=\"onStyleColorEdit(def.key, 'background', { token: $event })\">\n              <mat-option value=\"\">Custom</mat-option>\n              @for (t of colorTokens; track t.value) {\n              <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          @if (!isTokenColor(styleColor(def.key, 'background'))) {\n          <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(styleColor(def.key, 'background'))\"\n            (input)=\"onStyleColorEdit(def.key, 'background', { hex: $any($event.target).value })\" />\n          } @else {\n          <span class=\"color-preview\" [style.background]=\"styleColor(def.key, 'background')\"></span>\n          }\n          <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\"\n            [value]=\"colorAlpha(styleColor(def.key, 'background'))\"\n            (input)=\"onStyleColorEdit(def.key, 'background', { alpha: +$any($event.target).value })\" />\n          <span class=\"color-alpha-value\">{{ colorAlpha(styleColor(def.key, 'background')) }}%</span>\n          @if (styleColor(def.key, 'background')) {\n          <button type=\"button\" class=\"text-style-clear\" (click)=\"clearStyleColor(def.key, 'background')\">Reset</button>\n          } @else {\n          <span class=\"text-style-unset-hint\">none</span>\n          }\n          </div>\n        </div>\n\n        @if (styleColor(def.key, 'background') && !isSelfColoured()) {\n        <div class=\"text-style-row\">\n          <mat-form-field appearance=\"outline\" class=\"fill-select\">\n            <mat-label>Fill</mat-label>\n            <mat-select [ngModel]=\"styleFill(def.key)\" (ngModelChange)=\"onStyleFill(def.key, $event)\">\n              <mat-option value=\"text\">Behind the text (pill)</mat-option>\n              <mat-option value=\"cell\">Whole cell</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        }\n      </div>\n      }\n\n      @case ('rule_list') {\n      <div class=\"rule-list\">\n        <label class=\"text-style-label\">{{ def.label }}</label>\n        <p class=\"rule-list-hint\">Checked top to bottom \u2014 the first rule that matches wins.</p>\n        @for (rule of ruleItems(def.key); track $index) {\n        <div class=\"rule-row\">\n          <div class=\"rule-row-head\">\n            <mat-form-field appearance=\"outline\" class=\"rule-op\">\n              <mat-label>When</mat-label>\n              <mat-select [ngModel]=\"rule.op || 'between'\" (ngModelChange)=\"updateRule(def.key, $index, 'op', $event)\">\n                @for (o of ruleOperators; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            <div class=\"rule-actions\">\n              <button type=\"button\" class=\"rule-btn\" title=\"Move up\" (click)=\"moveRule(def.key, $index, -1)\">\u2191</button>\n              <button type=\"button\" class=\"rule-btn\" title=\"Move down\" (click)=\"moveRule(def.key, $index, 1)\">\u2193</button>\n              <button type=\"button\" class=\"rule-btn rule-btn-remove\" title=\"Remove\" (click)=\"removeRule(def.key, $index)\">\u2715</button>\n            </div>\n          </div>\n          @if (operandCount(rule.op) > 0) {\n          <div class=\"rule-row-operands\">\n            <mat-form-field appearance=\"outline\" class=\"rule-source\">\n              <mat-label>{{ operandCount(rule.op) === 2 ? 'From' : 'Value' }}</mat-label>\n              <mat-select [ngModel]=\"ruleSource(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleSource(def.key, $index, 'from', $event)\">\n                @for (o of operandSources; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (!ruleSource(def.key, $index, 'from')) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Value</mat-label>\n              <input matInput [ngModel]=\"rule.from\" (ngModelChange)=\"updateRule(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            } @else {\n            @if (ruleSourceArg(def.key, $index, 'from'); as arg) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>{{ arg === 'p' ? 'Percentile' : 'N' }}</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleSourceArgValue(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleSourceArg(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            }\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>\u00B1 std dev</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleStddevOffset(def.key, $index, 'from')\"\n                (ngModelChange)=\"onRuleStddevOffset(def.key, $index, 'from', $event)\" />\n            </mat-form-field>\n            }\n          </div>\n          @if (operandCount(rule.op) === 2) {\n          <div class=\"rule-row-operands\">\n            <mat-form-field appearance=\"outline\" class=\"rule-source\">\n              <mat-label>To</mat-label>\n              <mat-select [ngModel]=\"ruleSource(def.key, $index, 'to')\"\n                (ngModelChange)=\"onRuleSource(def.key, $index, 'to', $event)\">\n                @for (o of operandSources; track o.value) {\n                <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n            @if (!ruleSource(def.key, $index, 'to')) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Value</mat-label>\n              <input matInput [ngModel]=\"rule.to\" (ngModelChange)=\"updateRule(def.key, $index, 'to', $event)\" />\n            </mat-form-field>\n            } @else if (ruleSourceArg(def.key, $index, 'to'); as arg) {\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>{{ arg === 'p' ? 'Percentile' : 'N' }}</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"ruleSourceArgValue(def.key, $index, 'to')\"\n                (ngModelChange)=\"onRuleSourceArg(def.key, $index, 'to', $event)\" />\n            </mat-form-field>\n            }\n          </div>\n          }\n          }\n          <div class=\"rule-row-format\">\n            <span class=\"rule-color-group\">\n              <span class=\"rule-format-label\">Text</span>\n              <!-- Swapped for a read-only preview while a token is in force, as\n                   the column-level control does: with a token set,\n                   composeColorValue returns the token and a hex picked here is\n                   discarded, so an editable swatch invited an edit that\n                   silently did nothing. -->\n              @if (!isTokenColor(rule.color)) {\n              <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(rule.color)\"\n                (input)=\"onRuleColorEdit(def.key, $index, 'color', { hex: $any($event.target).value })\" />\n              } @else {\n              <span class=\"color-preview\" [style.background]=\"rule.color\"></span>\n              }\n              <mat-form-field appearance=\"outline\" class=\"color-token-field rule-token\">\n                <mat-select [ngModel]=\"colorToken(rule.color)\"\n                  (ngModelChange)=\"onRuleColorEdit(def.key, $index, 'color', { token: $event })\">\n                  <mat-option value=\"\">Custom</mat-option>\n                  @for (t of colorTokens; track t.value) {\n                  <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n            </span>\n            <!-- Grouped so the row wraps between the two colours rather than\n                 through one: the percentage broke onto the next line beside\n                 'Bold' and read as belonging to it. -->\n            <span class=\"rule-color-group\">\n              <span class=\"rule-format-label\">Fill</span>\n              @if (!isTokenColor(rule.background)) {\n              <input type=\"color\" class=\"color-hex\" [value]=\"colorHex(rule.background)\"\n                (input)=\"onRuleColorEdit(def.key, $index, 'background', { hex: $any($event.target).value })\" />\n              } @else {\n              <span class=\"color-preview\" [style.background]=\"rule.background\"></span>\n              }\n              <!-- A fill is as likely to want a theme colour as the text is, and\n                   the alpha slider works for either: composeColorValue wraps a\n                   token in color-mix below 100%. -->\n              <mat-form-field appearance=\"outline\" class=\"color-token-field rule-token\">\n                <mat-select [ngModel]=\"colorToken(rule.background)\"\n                  (ngModelChange)=\"onRuleColorEdit(def.key, $index, 'background', { token: $event })\">\n                  <mat-option value=\"\">Custom</mat-option>\n                  @for (t of colorTokens; track t.value) {\n                  <mat-option [value]=\"t.value\"><span class=\"color-swatch\" [style.background]=\"t.value\"></span>{{ t.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <!-- Its own line: the label, swatch and token select already fill\n                   the panel's width, and a token name as long as 'On Secondary\n                   Container' pushed the slider off the right edge. -->\n              <span class=\"rule-alpha-group\">\n                <span class=\"rule-format-label\">Opacity</span>\n                <input type=\"range\" class=\"color-alpha\" min=\"0\" max=\"100\" step=\"1\" [value]=\"colorAlpha(rule.background)\"\n                  (input)=\"onRuleColorEdit(def.key, $index, 'background', { alpha: +$any($event.target).value })\" />\n                <span class=\"color-alpha-value\">{{ colorAlpha(rule.background) }}%</span>\n              </span>\n            </span>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bold\"\n              (change)=\"updateRule(def.key, $index, 'bold', $event.checked)\">Bold</mat-checkbox>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"rule.fill === 'text'\"\n              (change)=\"updateRule(def.key, $index, 'fill', $event.checked ? 'text' : 'cell')\">Pill</mat-checkbox>\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bar\"\n              (change)=\"updateRule(def.key, $index, 'bar', $event.checked)\">Data bar</mat-checkbox>\n            @if (rule.bar) {\n            <mat-checkbox class=\"text-style-check\" [checked]=\"!!rule.bar_auto\"\n              (change)=\"updateRule(def.key, $index, 'bar_auto', $event.checked)\">Scale to column</mat-checkbox>\n            }\n          </div>\n          @if (rule.bar && !rule.bar_auto) {\n          <div class=\"rule-row-format\">\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Bar min</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"rule.bar_min\" (ngModelChange)=\"updateRule(def.key, $index, 'bar_min', $event)\" />\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" class=\"rule-operand\">\n              <mat-label>Bar max</mat-label>\n              <input matInput type=\"number\" [ngModel]=\"rule.bar_max\" (ngModelChange)=\"updateRule(def.key, $index, 'bar_max', $event)\" />\n            </mat-form-field>\n          </div>\n          }\n        </div>\n        }\n        <button type=\"button\" class=\"rule-add\" (click)=\"addRule(def.key)\">+ Add rule</button>\n      </div>\n      }\n\n      @case ('checkbox') {\n      <mat-checkbox [checked]=\"isChecked(def)\" (change)=\"onCheckbox(def.key, $event.checked)\">\n        {{ def.label }}\n      </mat-checkbox>\n      }\n\n      @case ('day_chips') {\n      <div class=\"day-chips\">\n        <label class=\"day-chips-label\">{{ def.label }}</label>\n        <div class=\"day-chips-row\">\n          @for (day of weekDays; track day) {\n          <button type=\"button\" class=\"day-chip\" [class.selected]=\"isDaySelected(def.key, day)\"\n            (click)=\"toggleDay(def.key, day)\">{{ day }}</button>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('list') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <textarea matInput rows=\"4\" [ngModel]=\"listText(def.key)\"\n          (ngModelChange)=\"onList(def.key, $event)\"></textarea>\n      </mat-form-field>\n      }\n\n      @case ('color_list') {\n      <div class=\"color-list\">\n        <label class=\"color-list-label\">{{ def.label }}</label>\n        <div class=\"color-list-chips\">\n          @for (opt of colorListItems(def.key); track $index) {\n          <div class=\"color-list-chip\">\n            <input type=\"color\" class=\"color-list-dot\" [value]=\"opt.color || '#9CA3AF'\"\n              (input)=\"onColorListColorChange(def.key, $index, $any($event.target).value)\" title=\"Change colour\" />\n            <span class=\"color-list-name\">{{ opt.name }}</span>\n            <button type=\"button\" class=\"color-list-remove\" (click)=\"removeColorListItem(def.key, $index)\"\n              title=\"Remove\">&times;</button>\n          </div>\n          }\n        </div>\n        <input class=\"color-list-add\" type=\"text\" placeholder=\"Add option, press Enter\"\n          (keydown.enter)=\"addColorListItem(def.key, $any($event.target).value, def.defaultColor || '#9CA3AF'); $any($event.target).value = ''\" />\n      </div>\n      }\n\n      @case ('range_color_list') {\n      <div class=\"range-list\">\n        <label class=\"range-list-label\">{{ def.label }}</label>\n        @for (r of rangeListItems(def.key); track $index) {\n        <div class=\"range-list-row\">\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.from\"\n            (input)=\"onRangeChange(def.key, $index, 'from', $any($event.target).value)\" title=\"From\" />\n          <span class=\"range-list-sep\">\u2013</span>\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.to\"\n            (input)=\"onRangeChange(def.key, $index, 'to', $any($event.target).value)\" title=\"To\" />\n          <input type=\"color\" class=\"range-list-color\" [value]=\"r.color || '#22C55E'\"\n            (input)=\"onRangeColorChange(def.key, $index, $any($event.target).value)\" title=\"Colour\" />\n          <button type=\"button\" class=\"range-list-remove\" (click)=\"removeRangeItem(def.key, $index)\"\n            title=\"Remove\">&times;</button>\n        </div>\n        }\n        <button type=\"button\" class=\"range-list-add\" (click)=\"addRangeItem(def.key)\">+ Add range</button>\n      </div>\n      }\n\n      }\n    </div>\n    }\n  </div>\n  }\n</aside>\n", styles: [".design-panel-backdrop{position:fixed;inset:0;background:#0000002e;z-index:1000}.column-design-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--grid-surface, #fff);box-shadow:-4px 0 16px #00000029;transform:translate(100%);transition:transform .22s ease;z-index:1001;display:flex;flex-direction:column;font-family:var(--grid-font-family, inherit)}.column-design-panel.open{transform:translate(0)}.design-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grid-border-color, #e0e0e0)}.design-panel-header .design-panel-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-panel-body{padding:16px;overflow-y:auto;flex:1}.design-panel-body .design-field{margin-bottom:4px}.design-panel-body .design-field .full-width{width:100%}.design-panel-body .design-field mat-checkbox{display:block;margin:8px 0 16px}.design-panel-body .color-list{margin:4px 0 16px}.design-panel-body .color-list .color-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.design-panel-body .color-list .color-list-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.design-panel-body .color-list .color-list-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:16px;background:var(--grid-surface, #fff);font-size:12px}.design-panel-body .color-list .color-list-dot{width:18px;height:18px;padding:0;border:none;background:none;border-radius:50%;cursor:pointer}.design-panel-body .color-list .color-list-remove{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.design-panel-body .color-list .color-list-remove:hover{color:var(--grid-error, #b3261e)}.design-panel-body .color-list .color-list-add{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.design-panel-body .color-list .color-list-add:focus{border-color:var(--grid-primary, #6750a4)}.range-list{margin:4px 0 16px}.range-list .range-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.range-list .range-list-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.range-list .range-list-num{width:56px;padding:6px 8px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.range-list .range-list-num:focus{border-color:var(--grid-primary, #6750a4)}.range-list .range-list-sep{color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-color{width:28px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;cursor:pointer}.range-list .range-list-remove{margin-left:auto;border:none;background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-remove:hover{color:var(--grid-error, #b3261e)}.range-list .range-list-add{margin-top:2px;padding:6px 10px;border:1px dashed var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;font-size:13px;cursor:pointer;color:var(--grid-primary, #6750a4)}.range-list .range-list-add:hover{background:var(--grid-surface-variant, #f3edf7)}.day-chips{display:flex;flex-direction:column;gap:6px}.day-chips-label{font-size:12px;color:var(--eru-on-surface-variant, #5f6368)}.day-chips-row{display:flex;flex-wrap:wrap;gap:6px}.day-chip{border:1px solid var(--eru-outline, #c4c7c5);background:transparent;border-radius:16px;padding:4px 12px;font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,color .15s,border-color .15s}.day-chip.selected{background:var(--eru-primary, #1a73e8);border-color:var(--eru-primary, #1a73e8);color:#fff}.design-field-inherited{opacity:.55;pointer-events:none}.design-meta-source{padding-bottom:8px;border-bottom:1px solid var(--grid-outline-variant, #e0e0e0);margin-bottom:12px}.design-meta-hint{margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--grid-on-surface-variant, #49454f)}.text-style-control{display:flex;flex-direction:column;gap:6px}.text-style-label{font-size:12px;color:var(--grid-on-surface-variant, #49454f)}.text-style-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.text-style-number{width:96px}.text-style-color{display:flex;align-items:center;gap:6px}.text-style-color input[type=color]{width:32px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:4px;background:none;cursor:pointer}.text-style-color-label{font-size:12px}.text-style-clear{border:none;background:none;padding:0;font-size:11px;color:var(--grid-primary, #6750a4);cursor:pointer}.text-style-color--unset input[type=color]{opacity:.3}.text-style-unset-hint{font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.design-target-hidden{margin-left:6px;padding:1px 6px;border-radius:8px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;background:var(--grid-surface-container-high, #e6e0e9);color:var(--grid-on-surface-variant, #49454f)}.color-control{display:block;margin-top:4px}.color-control-label{display:block;font-size:12px;margin-bottom:2px;color:var(--grid-on-surface-variant, #49454f)}.color-control-body{display:flex;align-items:center;gap:6px;min-width:0}.color-token-field{flex:1 1 auto;min-width:0}.color-swatch{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;border:1px solid var(--grid-outline-variant, #cac4d0);vertical-align:middle}.color-hex{flex:0 0 auto;width:32px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:4px;background:none;cursor:pointer}.color-preview{width:32px;height:28px;border-radius:4px;border:1px solid var(--grid-outline-variant, #cac4d0)}.color-alpha{flex:0 1 68px;min-width:44px}.color-alpha-value{flex:0 0 auto;font-size:11px;min-width:30px;color:var(--grid-on-surface-variant, #49454f)}.color-preview{flex:0 0 auto}.fill-select{width:220px}.rule-list{display:flex;flex-direction:column;gap:8px}.rule-list-hint{margin:0;font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.rule-row{border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px}.rule-row-head{display:flex;align-items:center;gap:6px;min-width:0}.rule-row-operands,.rule-row-format{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.rule-actions{margin-left:auto;flex:0 0 auto;display:flex;gap:4px}.rule-op{flex:1 1 auto;min-width:0}.rule-operand{flex:1 1 96px;min-width:88px}.rule-source{flex:1 1 140px;min-width:128px}.rule-token{flex:1 1 96px;min-width:88px}.rule-format-label{font-size:11px;color:var(--grid-on-surface-variant, #49454f)}.rule-color-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px;flex:1 1 100%}.rule-alpha-group{display:flex;align-items:center;gap:6px;flex:1 1 100%}.rule-alpha-group .color-alpha{flex:1 1 auto}.rule-btn{border:1px solid var(--grid-outline-variant, #cac4d0);background:none;border-radius:4px;width:26px;height:26px;cursor:pointer;font-size:12px;line-height:1}.rule-btn-remove{color:var(--grid-error, #b3261e)}.rule-add{align-self:flex-start;border:1px dashed var(--grid-outline, #79747e);background:none;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--grid-primary, #6750a4)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -13878,6 +14349,11 @@ class EruGridComponent {
     elementRef = inject(ElementRef);
     breakpointObserver = inject(BreakpointObserver);
     isSmViewport = signal(false, ...(ngDevMode ? [{ debugName: "isSmViewport" }] : []));
+    /** Set once the host ResizeObserver has reported a usable width, after which
+     *  the window media query stops feeding isSmViewport. */
+    hasMeasuredOwnWidth = false;
+    /** Below `md`, matching the media query this replaced. */
+    static SM_VIEWPORT_MAX_WIDTH = 768;
     containerHeight = signal(400, ...(ngDevMode ? [{ debugName: "containerHeight" }] : [])); // Internal tracking for available height
     resizeObserver = null;
     boardViewportObserver = null;
@@ -13995,6 +14471,15 @@ class EruGridComponent {
      */
     onExcelDownloadClick(event) {
         event.stopPropagation();
+        this.requestExcelDownload();
+    }
+    /**
+     * Enqueue an excel-download request without a click. This is the same path
+     * the icon takes, exposed so a host can trigger the export from its own
+     * button — useful when `config.excel_download_icon` is off because the
+     * built-in icon sits in the wrong place for the page.
+     */
+    requestExcelDownload() {
         const timestamp = Date.now();
         this.gridStore.addExcelDownloadRequest({
             id: timestamp,
@@ -14120,7 +14605,6 @@ class EruGridComponent {
         return !!row && this.gridStore.activeBoardRow() === row;
     }
     initialMinHeight = 400;
-    initialTotalWidth = 0;
     viewport;
     groupsViewport;
     groupsScrollContainerEl;
@@ -14131,6 +14615,24 @@ class EruGridComponent {
     groupedRows = computed(() => this.createGroupedRows(), ...(ngDevMode ? [{ debugName: "groupedRows" }] : []));
     columns = computed(() => this.gridStore.displayColumns(), ...(ngDevMode ? [{ debugName: "columns" }] : []));
     selectedRowIds = this.gridStore.selectedRowIds;
+    selectAllMatching = this.gridStore.selectAllMatching;
+    totalMatchingCount = this.gridStore.totalMatchingCount;
+    /**
+     * Show the select-all banner only where it has something to say: either the
+     * user already accepted "all N matching" and needs it reported back, or they
+     * selected everything loaded and there is more behind it to offer. Ticking a
+     * few rows deliberately is not an occasion to offer the whole result set.
+     */
+    showSelectAllBanner = computed(() => {
+        if (this.gridStore.configuration().config?.allowSelection !== true)
+            return false;
+        if (!this.gridStore.hasSelection())
+            return false;
+        if (this.gridStore.selectAllMatching())
+            return true;
+        return this.isAllGroupsSelected() &&
+            this.gridStore.totalMatchingCount() > this.gridStore.totalSelectedCount();
+    }, ...(ngDevMode ? [{ debugName: "showSelectAllBanner" }] : []));
     totalRowCount = computed(() => {
         const groups = this.groups();
         return groups.reduce((sum, group) => sum + group.totalRowCount, 0);
@@ -14261,10 +14763,13 @@ class EruGridComponent {
         const config = this.gridStore.configuration();
         return config?.config?.groupBar ?? true;
     }, ...(ngDevMode ? [{ debugName: "showGroupBar" }] : []));
-    // Excel download icon configuration
+    // Excel download icon configuration. `excel_download` enables the export;
+    // `excel_download_icon` (default true) controls whether the built-in icon is
+    // rendered — off means the host triggers requestExcelDownload() itself.
     showExcelDownload = computed(() => {
         const config = this.gridStore.configuration();
-        return config?.config?.excel_download ?? false;
+        const enabled = config?.config?.excel_download ?? false;
+        return enabled && (config?.config?.excel_download_icon ?? true);
     }, ...(ngDevMode ? [{ debugName: "showExcelDownload" }] : []));
     // Wrap long header labels onto multiple lines instead of truncating (default: true)
     wrapHeaders = computed(() => {
@@ -14404,10 +14909,21 @@ class EruGridComponent {
         this.viewport?.getRenderedRange();
         this.firstTr = this.viewport?.getRenderedRange()?.start || 0;
     }
+    /**
+     * The sum of the rendered column widths — what every table in the grid is
+     * forced to via `--table-total-width`.
+     *
+     * A signal, not a value captured at init. A resize writes the new width to
+     * the column (or, in pivot mode, to the measure the leaf came from), and the
+     * cells and `<col>`s follow it; a cached total does not, so the table stayed
+     * at its old width while its columns changed underneath — leaving the header
+     * and body tables wider or narrower than the columns they contain, and the
+     * horizontal scroll range wrong. Pivot mode also changes its leaf SET as the
+     * data changes, so even without a resize the total goes stale.
+     */
+    totalTableWidth = computed(() => this.getLeafColumns().reduce((total, column) => total + (column?.field_size || 0), 0), ...(ngDevMode ? [{ debugName: "totalTableWidth" }] : []));
     getTotalTableWidth() {
-        const columns = this.getLeafColumns();
-        let totalWidth = columns.reduce((total, column) => total + column.field_size, 0);
-        return totalWidth;
+        return this.totalTableWidth();
     }
     /* getContainerHeight(): number {
       const element = this.rowContainer?.nativeElement;
@@ -14635,7 +15151,6 @@ class EruGridComponent {
                 this.initializeColumnWidths();
                 this.firstDataRowIndex.set(this.maxDepth() + 1);
                 this.initialMinHeight = this.getMinHeightPx();
-                this.initialTotalWidth = this.getTotalTableWidth();
                 this.columnsInitialized.set(true);
             }
         });
@@ -14725,10 +15240,19 @@ class EruGridComponent {
             // SCSS fallback in place.
             setVar('--board-column-height', typeof colH === 'number' ? (colH > 0 ? `${colH}px` : 'none') : undefined);
         });
+        // isSmViewport is measured from the grid's own box, not from a window media
+        // query: a grid rendered in a side panel or a narrow column is narrow no
+        // matter how wide the browser is, and the window query kept it on the full
+        // desktop column set there. Fed by the host ResizeObserver in
+        // ngAfterViewInit; the window query only stands in until the first measure.
         this.breakpointObserver
             .observe('(max-width: 767.98px)')
             .pipe(takeUntilDestroyed())
-            .subscribe(result => this.isSmViewport.set(result.matches));
+            .subscribe(result => {
+            if (this.hasMeasuredOwnWidth)
+                return;
+            this.isSmViewport.set(result.matches);
+        });
         // Sync preset → data-preset attribute on host. Default 'default' unless the
         // user explicitly sets one. User tokens (via applyTokens) still override.
         effect(() => {
@@ -14828,7 +15352,6 @@ class EruGridComponent {
         // initializeGroups() moved to effect in constructor to handle timing
         this.firstDataRowIndex.set(this.maxDepth() + 1);
         this.initialMinHeight = this.getMinHeightPx();
-        this.initialTotalWidth = this.getTotalTableWidth();
     }
     ngAfterViewInit() {
         this.applyTokens();
@@ -14837,6 +15360,16 @@ class EruGridComponent {
         if (typeof ResizeObserver !== 'undefined') {
             this.resizeObserver = new ResizeObserver(entries => {
                 for (const entry of entries) {
+                    const width = entry.contentRect.width;
+                    // 0 is a hidden or not-yet-laid-out host; keep the last real answer
+                    // rather than flipping the whole grid to its mobile column set.
+                    if (width > 0) {
+                        this.hasMeasuredOwnWidth = true;
+                        const isSm = width < EruGridComponent.SM_VIEWPORT_MAX_WIDTH;
+                        if (isSm !== this.isSmViewport()) {
+                            this.ngZone.run(() => this.isSmViewport.set(isSm));
+                        }
+                    }
                     const height = entry.contentRect.height;
                     // Cap at gridHeight to prevent feedback loop: larger viewports → taller host → loop
                     const capped = Math.min(height, this.layoutGridHeight());
@@ -14915,12 +15448,12 @@ class EruGridComponent {
         return this.initialMinHeight;
     }
     getInitialTotalWidth() {
-        return this.initialTotalWidth;
+        return this.totalTableWidth();
     }
     applyCdkWidth() {
         const element = this.rowContainer?.nativeElement;
         if (element) {
-            return element.clientWidth > this.initialTotalWidth;
+            return element.clientWidth > this.totalTableWidth();
         }
         return false;
     }
@@ -15324,6 +15857,7 @@ class EruGridComponent {
         const leaves = pivotResult.headerStructure.leafColumns;
         const aggregations = this.gridStore.configuration()?.pivot?.aggregations || [];
         const sourceColumns = this.gridStore.columns() || [];
+        const leafWidths = this.gridStore.pivotLeafWidths();
         // Carry configuration from the field a leaf came from onto the leaf itself.
         // The pivot transform builds leaves with a handful of hard-coded keys — it
         // types every aggregated column as plain 'number' whatever the measure says,
@@ -15337,15 +15871,20 @@ class EruGridComponent {
             const owner = leaf.aggregationFunction
                 ? aggregations.find(a => a.name === this.designTargetFor(leaf))
                 : sourceColumns.find(c => c.name === leaf.name);
-            if (!owner)
-                return leaf;
             const patch = {};
-            for (const key of EruGridComponent.PIVOT_INHERITED_KEYS) {
-                const value = owner[key];
-                // `false` is meaningful (enableDrilldown), blank/absent is not.
-                if (value !== undefined && value !== null && value !== '')
-                    patch[key] = value;
+            if (owner) {
+                for (const key of EruGridComponent.PIVOT_INHERITED_KEYS) {
+                    const value = owner[key];
+                    // `false` is meaningful (enableDrilldown), blank/absent is not.
+                    if (value !== undefined && value !== null && value !== '')
+                        patch[key] = value;
+                }
             }
+            // A resize of a leaf with no owning field is held against the leaf name
+            // instead — see EruGridStore.updateColumnWidth.
+            const width = leafWidths.get(leaf.name);
+            if (typeof width === 'number' && width > 0)
+                patch.field_size = width;
             return Object.keys(patch).length ? { ...leaf, ...patch } : leaf;
         });
     }
@@ -15417,11 +15956,16 @@ class EruGridComponent {
     toggleRowSelection(event, row) {
         event.stopPropagation();
         const checkbox = event.target;
-        const rowId = row.id;
+        const rowId = rowSelectionKey(row);
+        if (!rowId)
+            return;
         if (checkbox.checked) {
             this.gridStore.selectRow(rowId);
         }
         else {
+            // Unticking one row breaks the "all N matching" claim — what is selected
+            // is no longer the whole result set, so it drops back to a plain id list.
+            this.gridStore.setSelectAllMatching(false);
             this.gridStore.deselectRow(rowId);
         }
     }
@@ -15484,7 +16028,20 @@ class EruGridComponent {
         return [...byKey.values()];
     }, ...(ngDevMode ? [{ debugName: "gridActions" }] : []));
     hasConfiguredActions = computed(() => this.gridActions().length > 0, ...(ngDevMode ? [{ debugName: "hasConfiguredActions" }] : []));
-    actionDisplayType = computed(() => this.gridStore.configuration()?.config?.action_display_type === 'kebab' ? 'kebab' : 'icons', ...(ngDevMode ? [{ debugName: "actionDisplayType" }] : []));
+    actionDisplayType = computed(() => {
+        const configured = this.gridStore.configuration()?.config?.action_display_type;
+        return configured === 'kebab' || configured === 'icons_outlined' ? configured : 'icons';
+    }, ...(ngDevMode ? [{ debugName: "actionDisplayType" }] : []));
+    /**
+     * Icon font for the row-action icons.
+     *
+     * Filled and outlined are two different Material fonts over the same ligature
+     * names, not two ligatures — so the choice is a `fontSet` swap and every
+     * configured action keeps the icon name it was given. Consumers must have the
+     * outlined font loaded; without it mat-icon falls back to the filled face, so
+     * the worst case is the previous look rather than empty boxes.
+     */
+    actionIconFontSet = computed(() => this.actionDisplayType() === 'icons_outlined' ? 'material-icons-outlined' : 'material-icons', ...(ngDevMode ? [{ debugName: "actionIconFontSet" }] : []));
     /**
      * The actions that apply to one row, after each action's
      * `action_visible_condition` is evaluated against that row's values.
@@ -15590,7 +16147,14 @@ class EruGridComponent {
         // a textbox there. Letting the model's datatype win would undo the choice on
         // every resolve, so a mapped column could never be composed. Everything else
         // about the mapping still inherits.
+        //
+        // The model's datatype is not discarded though: it is what the column
+        // actually holds, and the value still has to be formatted by it. Moving it
+        // aside rather than deleting it is what keeps a composed date column's
+        // pattern working.
         if (PRESENTATION_DATATYPES.has(col?.datatype)) {
+            if (patch.datatype)
+                patch.presentation_base_datatype = patch.datatype;
             delete patch.datatype;
         }
         // The data model uppercases the pattern on save ('DD-MM-YYYY'), while the
@@ -15685,15 +16249,28 @@ class EruGridComponent {
     shouldShowActionColumn(position) {
         return this.isActionColumnEnabled() && this.getActionColumnPosition() === position;
     }
+    /**
+     * The header checkbox. Stage one only: it selects the rows loaded so far, and
+     * the banner then offers "select all N matching" for the rest. It cannot
+     * select unloaded pages itself — the grid never holds them.
+     */
     toggleAllGroups(event) {
         const checkbox = event.target;
         if (checkbox.checked) {
-            this.gridStore.rows().forEach(row => this.gridStore.selectRow(row.entity_id || ''));
+            this.gridStore.selectAllLoadedRows();
         }
         else {
             this.gridStore.clearSelection();
         }
     }
+    /** The banner's "select all N matching" — stage two. */
+    selectAllMatchingRows() {
+        this.gridStore.selectAllLoadedRows();
+        this.gridStore.setSelectAllMatching(true);
+    }
+    clearRowSelection() {
+        this.gridStore.clearSelection();
+    }
     isRowSelected(rowId) {
         return rowId ? this.gridStore.isRowSelected(rowId) : false;
     }
@@ -15701,11 +16278,14 @@ class EruGridComponent {
         return this.gridStore.isGroupSelected(groupId);
     }
     isAllGroupsSelected() {
-        const allRows = this.gridStore.rows();
+        const allRows = this.gridStore.selectableRows();
         return allRows.length > 0 &&
-            allRows.every(row => this.gridStore.isRowSelected(row.entity_id || ''));
+            allRows.every(row => this.gridStore.isRowSelected(rowSelectionKey(row)));
     }
     getSelectedRows() {
+        return this.gridStore.selectedRows();
+    }
+    getSelectedRowIds() {
         return Array.from(this.gridStore.selectedRowIds());
     }
     /* private markGroupAsNoMoreRows(groupId: string) {
@@ -16291,7 +16871,7 @@ class EruGridComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EruGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: EruGridComponent, isStandalone: true, selector: "eru-grid", inputs: { gridConfig: "gridConfig", boardCardTemplate: "boardCardTemplate", personCardTemplate: "personCardTemplate", cellTemplate: "cellTemplate", boardCardHeight: "boardCardHeight", boardCardGap: "boardCardGap", boardCardPadding: "boardCardPadding" }, outputs: { rowSelect: "rowSelect", actionClick: "actionClick" }, providers: [EruGridStore, EruGridService,
             ...MATERIAL_PROVIDERS
-        ], viewQueries: [{ propertyName: "rowContainer", first: true, predicate: ["rowContainer"], descendants: true }, { propertyName: "headerScroller", first: true, predicate: ["headerScroller"], descendants: true, read: ElementRef }, { propertyName: "gtScroller", first: true, predicate: ["gtScroller"], descendants: true, read: ElementRef }, { propertyName: "viewport", first: true, predicate: ["vp"], descendants: true }, { propertyName: "groupsViewport", first: true, predicate: ["groupsViewport"], descendants: true }, { propertyName: "groupsScrollContainerEl", first: true, predicate: ["groupsScrollContainer"], descendants: true }, { propertyName: "allViewports", predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "headerScrollers", predicate: ["headerScroller"], descendants: true }], ngImport: i0, template: "<!-- <div style=\"background: #f0f0f0; font-size: 12px; border-bottom: 1px solid #ccc;\">\ncurrentPivotScrollIndex {{currentPivotScrollIndex()}} |\nfirstDataRowIndex {{firstDataRowIndex()}} |\nfirstTr {{firstTr}} |\nmaxDepth {{maxDepth()}}\n</div> -->\n<ng-template #excelDownloadIcon>\n  <svg class=\"excel-download-icon\" title=\"Download Excel\" (click)=\"onExcelDownloadClick($event)\"\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"24px\" height=\"24px\">\n    <path fill=\"#169154\" d=\"M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z\" />\n    <path fill=\"#18482a\" d=\"M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z\" />\n    <path fill=\"#0c8045\" d=\"M14 15.003H29V24.005000000000003H14z\" />\n    <path fill=\"#17472a\" d=\"M14 24.005H29V33.055H14z\" />\n    <g>\n      <path fill=\"#29c27f\" d=\"M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z\" />\n      <path fill=\"#27663f\" d=\"M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z\" />\n      <path fill=\"#19ac65\" d=\"M29 15.003H44V24.005000000000003H29z\" />\n      <path fill=\"#129652\" d=\"M29 24.005H44V33.055H29z\" />\n    </g>\n    <path fill=\"#0c7238\"\n      d=\"M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z\" />\n    <path fill=\"#fff\"\n      d=\"M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z\" />\n  </svg>\n</ng-template>\n\n<div class=\"incremental-row-container eru-grid\" #rowContainer [class.pivot-mode]=\"gridStore.isPivotMode()\"\n  [class.table-mode]=\"!gridStore.isPivotMode() && !isBoardMode()\" [class.board-mode-host]=\"isBoardMode()\">\n  <eru-column-design-panel></eru-column-design-panel>\n  <!-- Pivot Mode Template -->\n  @if (gridStore.isPivotMode()) {\n  <ng-container>\n    <div class=\"pivot-container\" style=\"display: flex; flex-direction: column; height: 100%;\"\n      [style]=\"'--table-min-height: ' + getInitialMinHeightPx() + 'px; --table-total-width: ' + getInitialTotalWidth() + 'px'\">\n      @if(showExcelDownload()) {\n      <div class=\"excel-download-bar\">\n        <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n      </div>\n      }\n      <!-- Debug info for first visible row -->\n\n\n      <div class=\"pivot-single-table\"\n        style=\"height: 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column;\">\n        @if (freezeHeader()) {\n        <div #headerScroller class=\"header-shell\">\n          <table class=\"eru-grid-table pivot-table\"\n            [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <!-- Column Groups for consistent width -->\n            <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n            <ng-container *ngTemplateOutlet=\"pivotTableHead\"></ng-container>\n            @if(grandTotalPosition() === 'before' && freezeGrandTotal()) {\n            <ng-container *ngTemplateOutlet=\"pivotGrandTotal\"></ng-container>\n            }\n          </table>\n        </div>\n        }\n        <!-- Virtual Scrolled Table Body -->\n        <div>\n          <cdk-virtual-scroll-viewport #vp [itemSize]=\"dataRowHeight()\" class=\"viewport pivot-viewport\"\n            [class.apply-cdk-width]=\"applyCdkWidth()\" (scrolledIndexChange)=\"onPivotScroll($event)\"\n            (scroll)=\"onBodyScroll($event)\" style=\"overflow: auto;\">\n            <table class=\"eru-grid-table pivot-table\"\n              [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n              [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n              <!-- Column Groups for consistent width -->\n              <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n              @if (!freezeHeader()) {\n              <ng-container *ngTemplateOutlet=\"pivotTableHead\"></ng-container>\n              }\n              <!-- Table Body with Virtual Scrolling -->\n              <tbody class=\"pivot-tbody\">\n\n                <tr *cdkVirtualFor=\"let pivotRow of gridStore.pivotDisplayData(); \n                           trackBy: trackByPivotRowFn; \n                           let i = index\" class=\"pivot-row\" [class.subtotal-row]=\"pivotRow._isSubtotal\"\n                  [class.grand-total-row]=\"pivotRow._isGrandTotal\"\n                  [class.subtotal-bold]=\"pivotRow._isSubtotal && subTotalStyle() === 'bold'\"\n                  [class.subtotal-italic]=\"pivotRow._isSubtotal && subTotalStyle() === 'italic'\"\n                  [class.subtotal-highlighted]=\"pivotRow._isSubtotal && subTotalStyle() === 'highlighted'\"\n                  [class.grand-total-bold]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'bold'\"\n                  [class.grand-total-italic]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'italic'\"\n                  [class.grand-total-highlighted]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'highlighted'\"\n                  [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\" [style.cursor]=\"cursorOnHover() || null\" [attr.data-pivot-row]=\"i\">\n                  @if ((!pivotRow._isGrandTotal && freezeGrandTotal() ) || (!freezeGrandTotal() )) {\n                  @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n                  <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"pivot-cell\"\n                    [class.row-dimension-cell]=\"isRowDimensionColumn(column.name)\"\n                    [class.column-dimension-cell]=\"!isRowDimensionColumn(column.name)\"\n                    [class.aggregated-value]=\"!isRowDimensionColumn(column.name) && column.datatype === 'number'\"\n                    [class.pivot-repeated-value]=\"isRepeatedDimensionValue(i, column.name)\"\n                    [class.pivot-group-start]=\"isPivotGroupStart(i, column.name)\"\n                    [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n                    [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n                    [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n                    [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 99 : 1\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n                    <div class=\"cell-content pivot-cell-content\">\n                      <data-cell [personCardTemplate]=\"personCardTemplate\" [class.aggregation]=\"!!column.aggregationFunction\" [fieldSize]=\"column.field_size\"\n                        [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\" [value]=\"pivotRow[column.name]\"\n                        [column]=\"column\" [drillable]=\"column.enableDrilldown || false\" [mode]=\"mode()\"\n                        [isEditable]=\"isEditable()\" [id]=\"'pivot_' + i + '_' + column.name\" [eruGridStore]=\"gridStore\"\n                        [row]=\"pivotRow\">\n                      </data-cell>\n                    </div>\n                  </td>\n                  }\n                  } @else {\n                  <td [style.height.px]=\"dataRowHeight()\" [attr.colspan]=\"getLeafColumns().length\"> </td>\n                  }\n                </tr>\n              </tbody>\n            </table>\n          </cdk-virtual-scroll-viewport>\n\n        </div>\n        @if (freezeGrandTotal() && grandTotalPosition() === 'after') {\n        <div #gtScroller class=\"header-shell gt-shell\" [class.adjust-bottom]=\"!applyCdkWidth()\"\n          [class.adjust-bottom-vs]=\"adjustScrollWidth()\">\n          <table class=\"eru-grid-table pivot-table\"\n            [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n            <ng-container *ngTemplateOutlet=\"pivotGrandTotal\"></ng-container>\n\n          </table>\n        </div>\n        }\n\n\n      </div>\n    </div>\n  </ng-container>\n  } @else if (isBoardMode()) {\n  <!-- Board Mode Template -->\n  <div class=\"board-view-container\">\n    @if(showExcelDownload()) {\n    <div class=\"excel-download-bar\">\n      <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n    </div>\n    }\n    @if(showSortBar()) {\n    <div class=\"board-sort-bar\">\n      <span class=\"board-sort-label\">Sort by:</span>\n      @for (entry of gridStore.sortColumns(); track getFieldName(entry)) {\n      <span class=\"board-sort-chip board-sort-chip-active\">\n        <span class=\"board-sort-chip-label\">{{getColumnLabel(entry)}}</span>\n        <span class=\"board-sort-chip-arrow\" (click)=\"onBoardSortChipToggle($event, entry)\">\n          @if(!entry.startsWith('-')) { \u25B2 } @else { \u25BC }\n        </span>\n        @if(gridStore.sortColumns().length > 1) {\n        <span class=\"board-sort-chip-priority\">{{getSortPriority(getFieldName(entry))}}</span>\n        }\n        <span class=\"board-sort-chip-remove\" (click)=\"onBoardSortChipRemove($event, entry)\">\u2715</span>\n      </span>\n      }\n      <button class=\"board-sort-add-btn\" [matMenuTriggerFor]=\"sortFieldMenu\">\n        <mat-icon class=\"board-sort-add-icon\">add</mat-icon> Add field\n      </button>\n      <mat-menu #sortFieldMenu=\"matMenu\" class=\"board-sort-menu\">\n        @for (column of columns(); track column.name) {\n        <button mat-menu-item (click)=\"onBoardSortFieldSelect(column)\"\n          [disabled]=\"getSortDirection(column.name) !== null\">\n          @if(getSortDirection(column.name) !== null) {\n          <mat-icon>check</mat-icon>\n          } @else {\n          <mat-icon></mat-icon>\n          }\n          {{column.label}}\n        </button>\n        }\n      </mat-menu>\n      @if(gridStore.sortColumns().length > 0) {\n      <button class=\"board-sort-clear\" (click)=\"onBoardSortClear()\">\u2715 Clear</button>\n      }\n    </div>\n    }\n    <div class=\"board-columns-wrapper\" [class.board-columns-nowrap]=\"!boardWrapColumns()\">\n      @for (group of groups(); track group.id) {\n      <div class=\"board-column\" [class.board-column-accented]=\"!!boardGroupColor(group)\"\n        [style.--board-group-color]=\"boardGroupColor(group)\">\n        @if (showBoardColumnHeader()) {\n        <div class=\"column-header\">\n          <!-- Render the group value through the same read-only cell renderer a\n               data cell uses, so the grouped field's datatype formats itself\n               (status/tag pills, dates, numbers) instead of printing raw text. -->\n          @if (groupByColumn(); as gcol) {\n            <span class=\"column-header-title column-header-title-cell\">\n              <data-cell\n                [eruGridStore]=\"gridStore\"\n                [column]=\"gcol\"\n                [columnDatatype]=\"gcol.datatype\"\n                [columnName]=\"gcol.name\"\n                [value]=\"group.title\"\n                [id]=\"'board-group-' + group.id\"\n                [fieldSize]=\"0\"\n                [isEditable]=\"false\"\n                [mode]=\"'board-group-header'\">\n              </data-cell>\n            </span>\n          } @else {\n            <span class=\"column-header-title\">{{ group.title }}</span>\n          }\n          <span class=\"column-header-count\">{{ group.currentLoadedRows || 0 }} of {{ group.totalRowCount || 0 }}</span>\n        </div>\n        }\n        <cdk-virtual-scroll-viewport [attr.data-group-id]=\"group.id\" [itemSize]=\"boardCardSlot\" class=\"board-column-body\"\n          [style.height.px]=\"boardColumnBodyHeight(group)\"\n          (scrolledIndexChange)=\"onBoardScrolledIndexChange($event, group)\">\n          <div\n            *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id)(); templateCacheSize: 0\"\n            class=\"board-card-container\"\n            [class.selected]=\"isBoardCardActive(row)\"\n            [class.show-row-lines]=\"showRowLines()\"\n            [style.height.px]=\"boardCardOuterHeight\"\n            [style.padding.px]=\"boardCardPadding\"\n            [style.marginBottom.px]=\"boardCardGap\"\n            [style.cursor]=\"cursorOnHover() || null\"\n            (click)=\"emitRowSelect(row, 'board', group)\">\n            <!-- Custom template when consumer provides boardCardTemplate; default card otherwise -->\n            <ng-container\n              *ngTemplateOutlet=\"boardCardTemplate ?? defaultBoardCard;\n                                 context: { $implicit: row, columns: visibleBoardFields(), group: group }\">\n            </ng-container>\n          </div>\n        </cdk-virtual-scroll-viewport>\n        @if (group.isLoading) {\n        <div class=\"board-ghost-card\">\n          <div class=\"board-ghost-line\"></div>\n          <div class=\"board-ghost-line board-ghost-line--short\"></div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  } @else {\n\n  <!-- Table Mode Template -->\n  @if(showExcelDownload() && !showGroupBar()) {\n  <div class=\"excel-download-bar\">\n    <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n  </div>\n  }\n  <!-- Scrollable groups container \u2014 plain iteration avoids CDK fixed-height estimation errors -->\n  <div #groupsScrollContainer class=\"groups-scroll-container\" (scroll)=\"onGroupsViewportScroll($event)\">\n\n    @for (group of groups(); track trackByGroupFn($index, group); let i = $index) {\n    <div class=\"group-container\"\n      [attr.data-group-id]=\"group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id\">\n      <!-- Combined sticky header with group info and table -->\n      <div style=\"\n        background:var(--grid-surface);\n        position: sticky;\n        top: 0;\n        z-index: 115;\n      \">\n        @if(showGroupBar()) {\n        <div class=\"group-header-row\">\n          <div class=\"custom-collapse-header\" (click)=\"toggleGroupCollapse(group.id)\">\n            <span class=\"collapse-arrow\" [ngClass]=\"{\n              'rotate-arrow': group.isExpanded,\n            }\">\u25BC</span>\n            <span class=\"f-12\">\n              {{ group?.title || \"\" }}\n              {{ group?.currentLoadedRows || 0 }} -\n              {{ group?.totalRowCount || 0 }} rows...</span>\n            @if(groupByField() && isSortable()) {\n            <span class=\"group-sort-indicator\">\n              <span class=\"sort-triangles\">\n                <span class=\"sort-tri sort-tri-up\" [class.sort-tri-active]=\"getSortDirection(groupByField()!) === 'asc'\"\n                  (click)=\"onGroupSortToggle($event, 'asc')\"></span>\n                <span class=\"sort-tri sort-tri-down\"\n                  [class.sort-tri-active]=\"getSortDirection(groupByField()!) === 'desc'\"\n                  (click)=\"onGroupSortToggle($event, 'desc')\"></span>\n              </span>\n            </span>\n            }\n          </div>\n          @if(i === 0 && showExcelDownload()) {\n          <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n          }\n        </div>\n        }\n\n        @if(freezeHeader() && (group.isExpanded || !showGroupBar())) {\n        <div #headerScroller class=\"header-shell\" [attr.data-group-id]=\"'header-shell-' + group.id\"\n          [style]=\"'--table-total-width: ' + getInitialTotalWidth() + 'px'\">\n          <table class=\"eru-grid-table\" [class.freeze-header]=\"freezeHeader()\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <ng-container *ngTemplateOutlet=\"tableColGroup\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n            <!-- Grand Total row after sticky header (position: before) - only for first group -->\n            @if(enableGrandTotal() && grandTotalPosition() === 'before' && hasGrandTotalData() && i === 0) {\n            <tbody>\n              <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n            </tbody>\n            }\n            <!-- Subtotal row after sticky header (position: before) -->\n            @if(enableRowSubtotals() && subtotalPosition() === 'before' && hasSubtotalData(group)) {\n            <tbody>\n              <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n            </tbody>\n            }\n          </table>\n        </div>\n        }\n      </div>\n      @if(group.isExpanded || !showGroupBar()) {\n      <ng-container>\n        <cdk-virtual-scroll-viewport [attr.data-group-id]=\"group.id\" [itemSize]=\"dataRowHeight()\" class=\"viewport table-viewport\"\n          (scrolledIndexChange)=\"onScroll($event, group)\" (scroll)=\"onTableBodyScroll($event)\"\n          [style]=\"'--table-height: ' + getGroupContentHeight(group.id) + 'px; --table-min-height: ' + getGroupContentHeight(group.id) + 'px; --table-total-width: ' + getInitialTotalWidth() + 'px'\">\n          <div class=\"table-wrapper\">\n            <table class=\"eru-grid-table\" [class.show-column-lines]=\"showColumnLines()\"\n              [class.show-row-lines]=\"showRowLines()\">\n              <ng-container *ngTemplateOutlet=\"tableColGroup\"></ng-container>\n              @if(!freezeHeader()) {\n              <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n              }\n              <!-- Grand Total row after normal header (position: before) - only for first group -->\n              @if(!freezeHeader() && enableGrandTotal() && grandTotalPosition() === 'before' &&\n              hasGrandTotalData() && i === 0) {\n              <tbody>\n                <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n              </tbody>\n              }\n              <!-- Subtotal row after normal header (position: before) -->\n              @if(!freezeHeader() && enableRowSubtotals() && subtotalPosition() === 'before' &&\n              hasSubtotalData(group)) {\n              <tbody>\n                <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n              </tbody>\n              }\n              <tbody>\n                @if (columns(); as columnsList) {\n                <!--  <tr *ngIf=\"groupItem.type === 'table-header' && groups().length > 1\" style=\"background:#fafafa\">\n                      @if(gridStore.configuration().config.allowSelection) {\n                        <th class=\"checkbox-column\" style=\"text-align: center;\">\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"isGroupSelected(groupItem.group?.id || '')\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"toggleGroupSelection($event, groupItem.group?.id || '')\"\n                            >\n                        </th>\n                      }\n                      <th *ngFor=\"let column of columns(); trackBy: trackByColumnFn;let i =index\"\n                        style=\"text-align: center;\"\n                        [style.width.px]=\"column.field_size\"\n                        [style.minWidth.px]=\"column.field_size\"\n                        [resizeColumn]=\"true\"\n                        [columnConfig]=\"column\"\n                        [columnDraggable]=\"i\"\n                        class=\"column-header\">\n                        <div class=\"column-drag-handle\"></div>\n                        {{column.label}} {{column.symbol}}\n                      </th>\n                    </tr> -->\n                <!--   @if(getRowsForGroup(group.id).length > 0 && group.isExpanded) { -->\n                <!-- *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id)(); \n          trackBy: trackByRowFn; \n          let i = index\" -->\n                <!--  @for(row of getRowsForGroupSignal(group.id)(); track trackByRowFn($index, row); let i = $index) { -->\n                <ng-container\n                  *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id)(); trackBy: trackByRowFn; let i = index\">\n                <tr class=\"row-item\" [attr.data-row-id]=\"i\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\" [style.cursor]=\"cursorOnHover() || null\" (click)=\"emitRowSelect(row, 'table', group)\">\n                  @if(gridStore.configuration().config.allowSelection) {\n                  <td class=\"checkbox-column\" style=\"text-align: center;\">\n                    <input type=\"checkbox\" [checked]=\"isRowSelected(row?.entity_id)\"\n                      (change)=\"toggleRowSelection($event, row)\">\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('before')) {\n                  <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <ng-container\n                      *ngTemplateOutlet=\"actionCell; context: { $implicit: row, mode: 'table', group: group }\"></ng-container>\n                  </td>\n                  }\n                  @if(hasHiddenColumns()) {\n                  <td class=\"row-expand-toggle\" (click)=\"toggleRowExpand(row, i, $event)\">\n                    <mat-icon class=\"row-expand-icon\" [class.expanded]=\"isRowExpanded(row, i)\">chevron_right</mat-icon>\n                  </td>\n                  }\n                  @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n                  <td #cell [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n                    class=\"data-cell\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\"\n                    [matTooltipClass]=\"'error-message'\" [matTooltip]=\"datacell.error()?'Error: ' + datacell.error():''\"\n                    matTooltipPosition=\"below\">\n                    <div class=\"cell-content\">\n                      <data-cell #datacell [personCardTemplate]=\"personCardTemplate\" [cellTemplate]=\"cellTemplate\" [td]=cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\"\n                        [columnName]=\"column.name\" [value]=\"(row?.['entity_data']?.[column.name] ?? row?.[column.name]) || ''\" [column]=\"column\"\n                        [mode]=\"mode()\" [isEditable]=\"isEditable() && column.editable !== false && column.editable !== 'false'\" [drillable]=\"column.enableDrilldown || false\"\n                        [id]=\"i + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"row\"></data-cell>\n                    </div>\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('after')) {\n                  <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <ng-container\n                      *ngTemplateOutlet=\"actionCell; context: { $implicit: row, mode: 'table', group: group }\"></ng-container>\n                  </td>\n                  }\n                </tr>\n                @if(hasHiddenColumns() && isRowExpanded(row, i)) {\n                <tr class=\"row-detail\">\n                  <td class=\"row-detail-cell\" [attr.colspan]=\"rowDetailColspan()\">\n                    <div class=\"row-detail-grid\">\n                      @for (hiddenCol of hiddenColumns(); track trackByColumnFn($index, hiddenCol)) {\n                      <div class=\"row-detail-field\">\n                        <span class=\"row-detail-label\">{{hiddenCol.label}}</span>\n                        <div class=\"row-detail-value\">\n                          <data-cell [cellTemplate]=\"cellTemplate\" [fieldSize]=\"hiddenCol.field_size\" [columnDatatype]=\"hiddenCol.datatype\"\n                            [columnName]=\"hiddenCol.name\" [value]=\"(row?.['entity_data']?.[hiddenCol.name] ?? row?.[hiddenCol.name]) || ''\"\n                            [column]=\"hiddenCol\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n                            [drillable]=\"hiddenCol.enableDrilldown || false\"\n                            [id]=\"'detail_' + i + '_' + hiddenCol.name\" [eruGridStore]=\"gridStore\" [row]=\"row\"></data-cell>\n                        </div>\n                      </div>\n                      }\n                    </div>\n                  </td>\n                </tr>\n                }\n                </ng-container>\n                <!-- } -->\n                <!-- } -->\n                @if(group.isLoading && (group.isExpanded || !showGroupBar())) {\n                @for(i of [].constructor(ghostRows()); let j = $index; track j) {\n                <tr class=\"ghost-loading-row\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n                  @if(gridStore.configuration().config.allowSelection) {\n                  <td class=\"checkbox-column ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n\n                  }\n                  @if(shouldShowActionColumn('before')) {\n                  <td class=\"action-column ghost-cell-container\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @if(hasHiddenColumns()) {\n                  <td class=\"row-expand-toggle ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n                  <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n                    class=\"ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('after')) {\n                  <td class=\"action-column ghost-cell-container\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                </tr>\n                }\n                }\n                <!-- <tr\n                    *ngIf=\"getRowsForGroup(group.id).length === 0 && !group.isExpanded\"\n                    class=\"group-separator\"\n                    >\n                    <td [attr.colspan]=\"groupSeperatorColSpan()\" class=\"separator-cell\"></td>\n                  </tr> -->\n                <!-- Subtotal row at end of group (position: after) -->\n                @if(enableRowSubtotals() && subtotalPosition() === 'after' && hasSubtotalData(group)) {\n                <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n                }\n                <!-- Grand Total row at end of group (position: after) - only for last group -->\n                @if(enableGrandTotal() && grandTotalPosition() === 'after' && hasGrandTotalData() && i ===\n                groups().length - 1) {\n                <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n                }\n                }\n              </tbody>\n            </table>\n          </div>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n\n<!-- Pivot Table Header Template -->\n<ng-template #pivotTableHead>\n  <thead [class.eru-wrap-headers]=\"wrapHeaders()\">\n    @if (hasNestedHeaders()) {\n    <ng-container>\n      @for (headerRow of getHeaderRows(); track headerRow; let rowIndex = $index) {\n      <tr class=\"pivot-header pivot-header-container\" [class.pivot-header-level]=\"'level-' + rowIndex\">\n        @for (header of headerRow; track trackByHeaderFn($index, header); let colIndex = $index) {\n        <th [attr.colspan]=\"header.colspan\" [attr.rowspan]=\"header.rowspan\"\n          [resizeColumn]=\"isResizablePivotHeader(header)\"\n          [columnConfig]=\"getFieldForPivotHeader(header) || $any(header)\"\n          class=\"column-header pivot-column-header nested-header\"\n          [class.row-dimension-header]=\"isRowDimensionHeader(header)\"\n          [class.column-dimension-header]=\"!isRowDimensionHeader(header)\" [class.expanded]=\"header.isExpanded\"\n          [class.collapsed]=\"!header.isExpanded\" [class.sticky-column]=\"isStickyColumn(header.name, colIndex)\"\n          [class.design-clickable]=\"isDesignMode()\"\n          [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === designTargetFor($any(header))\"\n          [style.position]=\"isStickyColumn(header.name, colIndex) ? 'sticky' : 'static'\"\n          [style.left.px]=\"getStickyColumnLeft(header.name, colIndex)\"\n          [style.z-index]=\"isStickyColumn(header.name, colIndex) ? 100 : 1\"\n          [style.min-height.px]=\"headerRowHeight()\" style=\"height: auto; padding: 8px 6px;\">\n          <div class=\"header-content\">\n\n            <data-cell [fieldSize]=\"header.field_size\" [columnDatatype]=\"header.dataType\" [columnName]=\"header.name\"\n              [value]=\"header.label\" [column]=\"header\" [frozenGrandTotalCell]=\"true\"\n              [drillable]=\"header.enableDrilldown || false\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n              [id]=\"'pivot_' + $index + '_' + header.name\" [eruGridStore]=\"gridStore\" [row]=\"header\">\n            </data-cell>\n            @if(isDesignMode()) {\n            <mat-icon class=\"design-edit-icon\"\n              [title]=\"isAggregationHeader($any(header)) ? 'Edit aggregation' : 'Edit column'\"\n              (click)=\"onHeaderDesignClick($event, $any(header))\">tune</mat-icon>\n            }\n            <!-- <span class=\"header-label header-wrap-text\">{{header.label}}</span> -->\n            <!-- <button *ngIf=\"!isRowDimensionHeader(header)\"\n                  class=\"collapse-toggle-btn\"\n                  [title]=\"header.isExpanded ? 'Collapse group' : 'Expand group'\"\n                  (click)=\"toggleColumnGroup(header.groupKey)\"\n                  type=\"button\">\n                  <span class=\"collapse-icon\">+</span>\n                </button> -->\n          </div>\n        </th>\n        }\n      </tr>\n      }\n    </ng-container>\n    } @else {\n    <!-- Simple header fallback -->\n    <ng-container>\n      <tr class=\"pivot-header\" [class.freeze-header-enabled]=\"freezeHeader()\">\n        @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n        <th [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n          [resizeColumn]=\"gridStore.isFeatureEnabled('columnResizable')\" [columnConfig]=\"column\"\n          class=\"column-header pivot-column-header\" [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n          [class.design-clickable]=\"isDesignMode()\"\n          [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === designTargetFor(column)\"\n          [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n          [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n          [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 100 : 1\"\n          [style.min-height.px]=\"headerRowHeight()\" style=\"height: auto;padding: 8px 6px\">\n          <!-- Label and control laid out as a row: the label truncates, the\n               control keeps its place. Left as a bare text node the long\n               aggregation labels pushed the icon past the cell edge, where\n               `overflow: hidden` clipped it out of sight entirely. -->\n          <div class=\"pivot-header-content\">\n            <!-- Deliberately not `.column-label`: that class carries the\n                 wrap-headers rule, which broke these labels onto one word per\n                 line. This header truncates, as it did before. -->\n            <span class=\"pivot-header-label\">{{column.label}}</span>\n            @if(isDesignMode()) {\n            <mat-icon class=\"design-edit-icon\"\n              [title]=\"isAggregationHeader(column) ? 'Edit aggregation' : 'Edit column'\"\n              (click)=\"onHeaderDesignClick($event, column)\">tune</mat-icon>\n            }\n          </div>\n        </th>\n        }\n      </tr>\n    </ng-container>\n    }\n\n  </thead>\n</ng-template>\n\n<!-- Column Group Template for consistent column widths -->\n<ng-template #pivotColGroup>\n  <colgroup>\n    @for (column of getLeafColumns(); track trackByColumnFn($index, column)) {\n    <col\n      [style]=\"'width: ' + column.field_size + 'px !important; min-width: ' + column.field_size + 'px !important; max-width: ' + column.field_size + 'px !important; --col-width: ' + column.field_size + 'px'\">\n    }\n  </colgroup>\n</ng-template>\n\n<ng-template #pivotGrandTotal>\n  <tbody class=\"pivot-tbody\">\n    @for (pivotRow of gridStore.pivotGrandTotalData(); track trackByPivotRowFn($index, pivotRow); let i = $index) {\n    <tr class=\"pivot-row grand-total-row\"\n      [class.grand-total-bold]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'bold'\"\n      [class.grand-total-italic]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'italic'\"\n      [class.grand-total-highlighted]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'highlighted'\"\n      [style.height.px]=\"50\" [attr.data-pivot-row]=\"i\">\n      <!--   <td colspan=\"20\">{{pivotRow | json}}</td> -->\n      @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n      <td [attr.rowspan]=\"getEffectiveRowspan(i, column.name)\" [style.width.px]=\"column.field_size\"\n        [style.minWidth.px]=\"column.field_size\" class=\"pivot-cell\"\n        [class.row-dimension-cell]=\"isRowDimensionColumn(column.name)\"\n        [class.column-dimension-cell]=\"!isRowDimensionColumn(column.name)\"\n        [class.aggregated-value]=\"!isRowDimensionColumn(column.name) && column.datatype === 'number'\"\n        [class.rowspan-cell]=\"getEffectiveRowspan(i, column.name) || 1 > 1\"\n        [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n        [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n        [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n        [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 99 : 1\" [style.height.px]=\"50\" [attr.xx]=\"i\">\n        <div class=\"cell-content pivot-cell-content\">\n          <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n            [value]=\"getEffectiveCellValue(i,column.name, pivotRow)\" [column]=\"column\" [frozenGrandTotalCell]=\"true\"\n            [drillable]=\"column.enableDrilldown || false\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n            [id]=\"'pivot_' + i + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"pivotRow\">\n          </data-cell>\n        </div>\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</ng-template>\n\n<!-- \u2500\u2500\u2500 Action column cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     One template for both column positions. With no `config.actions` set it\n     falls back to the single more_horiz icon the column has always shown, so\n     grids that only listen to the store's actionClick signal keep working.\n     Context: { $implicit: Row, mode: 'table' | 'board', group?: RowGroup }\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #actionCell let-row let-mode=\"mode\" let-group=\"group\">\n  @if(!hasConfiguredActions()) {\n  <mat-icon (click)=\"onActionClick($event, row, undefined, mode || 'table', group)\">more_horiz</mat-icon>\n  } @else if(actionDisplayType() === 'kebab') {\n  @if(visibleActionsFor(row).length > 0) {\n  <mat-icon class=\"action-kebab\" [matMenuTriggerFor]=\"rowActionMenu\"\n    [matMenuTriggerData]=\"{ row: row, mode: mode || 'table', group: group }\"\n    (click)=\"$event.stopPropagation()\">more_vert</mat-icon>\n  }\n  } @else {\n  <div class=\"action-icons\">\n    @for(action of visibleActionsFor(row); track action.action_name) {\n    <mat-icon class=\"action-icon\" [matTooltip]=\"action.action_name\" matTooltipPosition=\"above\"\n      (click)=\"onActionClick($event, row, action, mode || 'table', group)\">{{action.action_icon || 'play_arrow'}}</mat-icon>\n    }\n  </div>\n  }\n</ng-template>\n\n<!-- Kebab menu shared by every row; the row is passed through matMenuTriggerData. -->\n<mat-menu #rowActionMenu=\"matMenu\" class=\"eru-grid-action-menu\">\n  <ng-template matMenuContent let-row=\"row\" let-mode=\"mode\" let-group=\"group\">\n    @for(action of visibleActionsFor(row); track action.action_name) {\n    <button mat-menu-item (click)=\"onActionClick($event, row, action, mode || 'table', group)\">\n      <mat-icon>{{action.action_icon || 'play_arrow'}}</mat-icon>\n      <span>{{action.action_name}}</span>\n    </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Column Group Template for consistent column widths -->\n<ng-template #tableColGroup>\n  <colgroup>\n    @if(gridStore.configuration().config.allowSelection) {\n    <col style=\"width: 40px; min-width: 40px; max-width: 40px;\">\n    }\n    @if(shouldShowActionColumn('before')) {\n    <col\n      [style]=\"'width: ' + actionColumnWidth() + 'px !important; min-width: ' + actionColumnWidth() + 'px !important; max-width: ' + actionColumnWidth() + 'px !important;'\">\n    }\n    @if(hasHiddenColumns()) {\n    <col style=\"width: 40px !important; min-width: 40px !important; max-width: 40px !important;\">\n    }\n    @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n    <col\n      [style]=\"'width: ' + column.field_size + 'px !important; min-width: ' + column.field_size + 'px !important; max-width: ' + column.field_size + 'px !important; --col-width: ' + column.field_size + 'px'\">\n    }\n    @if(shouldShowActionColumn('after')) {\n    <col\n      [style]=\"'width: ' + actionColumnWidth() + 'px !important; min-width: ' + actionColumnWidth() + 'px !important; max-width: ' + actionColumnWidth() + 'px !important;'\">\n    }\n  </colgroup>\n</ng-template>\n\n\n<ng-template #tableHeader>\n\n  <thead [class.eru-wrap-headers]=\"wrapHeaders()\">\n    <!-- headerRowHeight rides on the row, not the cells: `thead.eru-wrap-headers\n         th { height: auto }` outranks any class-level height we could put on a\n         th, which is why a configured header height was ignored while data rows\n         (inline height on tr.row-item) honoured theirs. On a table row `height`\n         is a minimum, so a wrapped two-line header still grows past it. -->\n    <tr [style.height.px]=\"headerRowHeight()\" [style.minHeight.px]=\"headerRowHeight()\">\n      @if(gridStore.configuration().config.allowSelection) {\n      <th class=\"checkbox-column column-header table-column-header\">\n        <input type=\"checkbox\" [checked]=\"isAllGroupsSelected()\" (change)=\"toggleAllGroups($event)\">\n      </th>\n      }\n      @if(shouldShowActionColumn('before')) {\n      <th class=\"action-column column-header table-column-header\" [style.width.px]=\"actionColumnWidth()\"\n        [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">Action</th>\n      }\n      @if(hasHiddenColumns()) {\n      <th class=\"row-expand-toggle column-header table-column-header\"></th>\n      }\n      @for (column of visibleColumns(); track trackByColumnFn(i, column); let i = $index) {\n      <th [style.width.px]=\"column.field_size\" [resizeColumn]=\"gridStore.isFeatureEnabled('columnResizable')\"\n        [columnConfig]=\"column\" [index]=\"i\"\n        [columnDraggable]=\"gridStore.isFeatureEnabled('columnReorderable') ? i : null\"\n        [style.minWidth.px]=\"column.field_size\" class=\"column-header table-column-header\"\n        [class.sortable-header]=\"isSortable()\"\n        [class.design-clickable]=\"isDesignMode()\"\n        [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === column.name\"\n        [class.sort-asc]=\"isSortable() && getSortDirection(column.name) === 'asc'\"\n        [class.sort-desc]=\"isSortable() && getSortDirection(column.name) === 'desc'\">\n        @if(gridStore.isFeatureEnabled('columnReorderable')) {\n        <div class=\"column-drag-handle\"></div>\n        }\n        <span class=\"column-label\" [title]=\"column.tool_tip || column.description || ''\">{{column.label}}</span>\n        @if(isDesignMode()) {\n        <mat-icon class=\"design-edit-icon\" title=\"Edit column\" (click)=\"onHeaderDesignClick($event, column)\">tune</mat-icon>\n        }\n        @if(isSortable()) {\n        <span class=\"sort-indicator\">\n          <span class=\"sort-triangles\">\n            <span class=\"sort-tri sort-tri-up\" [class.sort-tri-active]=\"getSortDirection(column.name) === 'asc'\"\n              (click)=\"onSortColumn($event, column, 'asc')\"></span>\n            <span class=\"sort-tri sort-tri-down\" [class.sort-tri-active]=\"getSortDirection(column.name) === 'desc'\"\n              (click)=\"onSortColumn($event, column, 'desc')\"></span>\n          </span>\n          @if(getSortPriority(column.name) !== null && gridStore.sortColumns().length > 1) {\n          <span class=\"sort-priority\">{{getSortPriority(column.name)}}</span>\n          }\n        </span>\n        }\n      </th>\n      }\n      @if(shouldShowActionColumn('after')) {\n      <th class=\"action-column column-header table-column-header\" [style.width.px]=\"actionColumnWidth()\"\n        [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">Action</th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<!-- Table Subtotal Row Template -->\n<ng-template #tableSubtotal let-group=\"group\">\n  <tr class=\"subtotal-row\" [class.subtotal-bold]=\"subTotalStyle() === 'bold'\"\n    [class.subtotal-italic]=\"subTotalStyle() === 'italic'\"\n    [class.subtotal-highlighted]=\"subTotalStyle() === 'highlighted'\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n    @if(gridStore.configuration().config.allowSelection) {\n    <td class=\"checkbox-column\"></td>\n    }\n    @if(shouldShowActionColumn('before')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n    @if(hasHiddenColumns()) {\n    <td class=\"row-expand-toggle\"></td>\n    }\n    @for(column of visibleColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n    <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"subtotal-cell\"\n      [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n      <div class=\"cell-content\">\n        @if(colIndex === 0 && getSubtotalValue(group, column.name) === null) {\n        <span class=\"subtotal-label\">{{subtotalLabel()}}</span>\n        } @else {\n        @if(getSubtotalValue(group, column.name) !== null) {\n        <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n          [value]=\"getSubtotalValue(group, column.name)\" [column]=\"column\" [mode]=\"mode()\" [isEditable]=\"false\"\n          [id]=\"'subtotal_' + group.id + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"group.subtotal\">\n        </data-cell>\n        }\n        }\n      </div>\n    </td>\n    }\n    @if(shouldShowActionColumn('after')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n  </tr>\n</ng-template>\n\n<!-- Table Grand Total Row Template -->\n<ng-template #tableGrandTotal>\n  <tr class=\"grand-total-row\" [class.grand-total-bold]=\"grandTotalStyle() === 'bold'\"\n    [class.grand-total-italic]=\"grandTotalStyle() === 'italic'\"\n    [class.grand-total-highlighted]=\"grandTotalStyle() === 'highlighted'\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n    @if(gridStore.configuration().config.allowSelection) {\n    <td class=\"checkbox-column\"></td>\n    }\n    @if(shouldShowActionColumn('before')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n    @if(hasHiddenColumns()) {\n    <td class=\"row-expand-toggle\"></td>\n    }\n    @for(column of visibleColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n    <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"grand-total-cell\"\n      [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n      <div class=\"cell-content\">\n        @if(colIndex === 0 && getGrandTotalValue(column.name) === null) {\n        <span class=\"grand-total-label\">Grand Total</span>\n        } @else {\n        @if(getGrandTotalValue(column.name) !== null) {\n        <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n          [value]=\"getGrandTotalValue(column.name)\" [column]=\"column\" [mode]=\"mode()\" [isEditable]=\"false\"\n          [id]=\"'grandtotal_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"gridStore.rowGrandTotal()\">\n        </data-cell>\n        }\n        }\n      </div>\n    </td>\n    }\n    @if(shouldShowActionColumn('after')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n  </tr>\n</ng-template>\n\n<!-- \u2500\u2500\u2500 Default board card template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Used when no boardCardTemplate is passed to <eru-grid>.\n     Context: { $implicit: Row, columns: Field[], group: RowGroup }\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #defaultBoardCard let-row let-columns=\"columns\" let-group=\"group\">\n  <mat-card class=\"board-card\">\n    <mat-card-content>\n      @for (column of columns; track column.name) {\n      @if ((row?.entity_data?.[column.name] ?? row?.[column.name]) !== undefined) {\n      <div class=\"board-card-field\">\n        <span class=\"board-field-label\">{{ column.label }}</span>\n        <data-cell\n          [fieldSize]=\"column.field_size\"\n          [columnDatatype]=\"column.datatype\"\n          [columnName]=\"column.name\"\n          [column]=\"column\"\n          [value]=\"row?.entity_data?.[column.name] ?? row?.[column.name]\"\n          [id]=\"row?.entity_id + '_' + column.name\"\n          [eruGridStore]=\"gridStore\"\n          [mode]=\"'board'\"\n          [row]=\"row\">\n        </data-cell>\n      </div>\n      }\n      }\n    </mat-card-content>\n    <mat-card-actions align=\"end\">\n      <button mat-icon-button (click)=\"onActionClick($event, row)\">\n        <mat-icon>more_horiz</mat-icon>\n      </button>\n    </mat-card-actions>\n  </mat-card>\n</ng-template>", styles: ["@charset \"UTF-8\";:root{--grid-primary: var(--mat-sys-primary, #6750a4);--grid-on-primary: var(--mat-sys-on-primary, #ffffff);--grid-primary-container: var(--mat-sys-primary-container, #eaddff);--grid-on-primary-container: var(--mat-sys-on-primary-container, #21005d);--grid-secondary: var(--mat-sys-secondary, #625b71);--grid-on-secondary: var(--mat-sys-on-secondary, #ffffff);--grid-secondary-container: var(--mat-sys-secondary-container, #e8def8);--grid-on-secondary-container: var(--mat-sys-on-secondary-container, #1d192b);--grid-tertiary: var(--mat-sys-tertiary, #7d5260);--grid-on-tertiary: var(--mat-sys-on-tertiary, #ffffff);--grid-tertiary-container: var(--mat-sys-tertiary-container, #ffd8e4);--grid-on-tertiary-container: var(--mat-sys-on-tertiary-container, #31111d);--grid-surface: var(--mat-sys-surface, #fef7ff);--grid-surface-variant: var(--mat-sys-surface-variant, #e7e0ec);--grid-surface-container: var(--mat-sys-surface-container, #f3edf7);--grid-surface-container-high: var(--mat-sys-surface-container-high, #ede7f0);--grid-on-surface: var(--mat-sys-on-surface, #1d1b20);--grid-on-surface-variant: var(--mat-sys-on-surface-variant, #49454f);--grid-outline: var(--mat-sys-outline, #79757f);--grid-outline-variant: var(--mat-sys-outline-variant, #cac4d0);--grid-error: var(--mat-sys-error, #ba1a1a);--grid-error-container: var(--mat-sys-error-container, #ffdad6);--grid-base-surface: var(--surface, #ffffff);--grid-base-on-surface: var(--on-surface, #000000);--grid-base-border: var(--border, #e5e7eb);--grid-primary-light: var(--grid-primary-container)}:host,eru-grid{display:block!important;width:100%;height:100%;flex:1 1 0%;max-height:var(--grid-height, none);min-height:var(--grid-min-height, 120px);font-family:var(--grid-font-family);--grid-font-family: \"Poppins\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--grid-font-size-body: 12px;--grid-font-size-caption: 12px !important;--grid-line-height-body: 1;--grid-aggregation-text-align: right;--grid-number-text-align: right;--grid-spacing-xxs: 2px;--grid-spacing-xs: 4px;--grid-spacing-sm: 8px;--grid-spacing-md: 16px;--grid-spacing-lg: 24px;--grid-border-radius: 4px;--grid-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);--grid-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15);--grid-row-hover: var(--grid-surface-variant);--grid-row-selected: var(--grid-surface-container-high);--grid-zebra-odd: transparent;--grid-zebra-even: transparent;--grid-focus-ring: var(--grid-primary);--grid-header-font-weight: 500;--grid-header-text-transform: none;--grid-header-letter-spacing: normal;--grid-header-font-size: var(--grid-font-size-caption);--grid-header-padding-x: 8px;--grid-header-padding-y: 12px;--grid-font-feature-numeric: normal;--grid-cell-padding-x: var(--grid-spacing-xs);--grid-cell-inset-x: 8px;--grid-cell-padding-y: var(--grid-spacing-xxs);--grid-tint-subtle: rgba(0, 0, 0, .025);--grid-tint-soft: rgba(0, 0, 0, .045);--grid-tint-strong: rgba(0, 0, 0, .08);--grid-radius-outer: 0;--grid-shadow-outer: none;--grid-divider-color: var(--grid-outline-variant);--grid-divider-width: 1px;--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface);--grid-pill-radius: 999px;--grid-pill-padding-y: 3px;--grid-pill-padding-x: 10px;--grid-pill-font-size: 11px;--grid-pill-font-weight: 500;--grid-priority-dot-size: 8px;--grid-avatar-size: 24px;--grid-avatar-font-size: 10px;--grid-avatar-font-weight: 600;border-radius:var(--grid-radius-outer);box-shadow:var(--grid-shadow-outer)}eru-grid[data-preset=default]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: uppercase;--grid-header-letter-spacing: .06em;--grid-header-font-size: 11px;--grid-header-padding-y: 12px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 14px;--grid-row-hover: var(--grid-tint-subtle);--grid-divider-color: var(--grid-tint-soft);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=modern]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: none;--grid-header-letter-spacing: normal;--grid-header-font-size: 13px;--grid-header-padding-y: 16px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 16px;--grid-cell-padding-x: 18px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-radius-outer: 12px;--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 4px;--grid-pill-padding-x: 12px}eru-grid[data-preset=compact]{--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface);--grid-header-font-weight: 600;--grid-header-text-transform: none;--grid-header-font-size: 11px;--grid-header-padding-y: 4px;--grid-header-padding-x: 8px;--grid-cell-padding-y: 3px;--grid-cell-padding-x: 8px;--grid-font-size-body: 11px;--grid-row-hover: var(--grid-tint-subtle);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 1px;--grid-pill-padding-x: 6px;--grid-pill-font-size: 10px}eru-grid[data-preset=bold]{--grid-header-bg: var(--grid-surface-container-high);--grid-header-color: var(--grid-on-surface);--grid-header-font-weight: 700;--grid-header-text-transform: none;--grid-header-font-size: 13px;--grid-header-padding-y: 14px;--grid-header-padding-x: 12px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 12px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-strong);--grid-divider-width: 1px;--grid-radius-outer: 2px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=financial]{--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: uppercase;--grid-header-letter-spacing: .08em;--grid-header-font-size: 11px;--grid-header-padding-y: 12px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 14px;--grid-zebra-odd: transparent;--grid-zebra-even: var(--grid-tint-subtle);--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=elevated]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 600;--grid-header-text-transform: none;--grid-header-font-size: 12px;--grid-header-padding-y: 16px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-radius-outer: 16px;--grid-shadow-outer: 0 1px 3px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .07);--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 4px;--grid-pill-padding-x: 12px;overflow:hidden}.group-container{padding-bottom:8px}.column-header.design-clickable .design-edit-icon{font-size:16px;width:16px;height:16px;margin-left:4px;opacity:.45;vertical-align:middle;cursor:pointer}.column-header.design-clickable:hover .design-edit-icon,.column-header.design-clickable .design-edit-icon:hover{opacity:1}.column-header.design-selected{background-color:var(--grid-primary-container, rgba(63, 81, 181, .12))}.pivot-column-header .pivot-header-content{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}.pivot-column-header .pivot-header-content .pivot-header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pivot-column-header .pivot-header-content .design-edit-icon,.pivot-column-header .header-content .design-edit-icon{flex:0 0 auto}.pivot-column-header .header-content data-cell,.pivot-column-header .header-content data-cell *{color:inherit!important}.incremental-row-container{width:100%;height:100%;min-height:var(--grid-min-height, 120px);max-height:none;overflow:auto;position:relative;background-color:var(--grid-surface);border-radius:var(--grid-border-radius);font-family:var(--grid-font-family)}.viewport{height:100%;min-height:300px;overflow-x:auto;overflow-y:auto;background-color:var(--grid-surface);scrollbar-gutter:stable}.viewport.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.groups-viewport{height:100%;min-height:300px}.groups-scroll-container{max-height:var(--grid-height, 600px);overflow-y:auto;overflow-x:hidden}.table-viewport{background-color:var(--grid-surface);height:var(--table-height, auto);min-height:var(--table-min-height, 100px);overflow-x:auto;overflow-y:auto}.pivot-viewport{min-height:var(--table-min-height, 300px);overflow-x:auto;overflow-y:auto;background-color:var(--grid-surface)}.pivot-viewport .cdk-virtual-scroll-content-wrapper{width:auto;height:auto}.table-wrapper{min-width:100%;overflow-x:visible}.incremental-row-container .eru-grid-table,.eru-grid-table{width:100%!important;border-collapse:separate;border-spacing:0;table-layout:fixed!important;background-color:var(--grid-surface);color:var(--grid-on-surface);font-family:var(--grid-font-family);font-size:var(--grid-font-size-body);line-height:var(--grid-line-height-body)}.eru-grid-table th,.eru-grid-table td{text-align:left;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--grid-on-surface);min-width:0;max-width:100%!important;box-sizing:border-box;position:relative}.eru-grid-table th{background-color:var(--grid-header-bg, var(--grid-surface-container))}thead.eru-wrap-headers th{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;height:auto}thead.eru-wrap-headers th .column-label,thead.eru-wrap-headers th .header-label{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word;overflow-wrap:anywhere}.eru-grid-table tbody td{background-color:transparent}.eru-grid-table thead{background-color:var(--grid-header-bg, var(--grid-surface-container));transform:translateZ(0);will-change:transform;backface-visibility:hidden}.eru-grid-table thead.freeze-header-enabled{position:sticky!important;top:0!important;z-index:100!important}.eru-grid-table thead th{background-color:var(--grid-header-bg, var(--grid-surface-container));color:var(--grid-header-color, var(--grid-on-surface));font-family:var(--grid-font-family);font-weight:var(--grid-header-font-weight);font-size:var(--grid-header-font-size)}.checkbox-column{width:50px;min-width:50px;max-width:50px;text-align:center!important;padding-left:0!important;padding-right:0!important;text-overflow:clip!important;background-color:var(--grid-surface-container)}.checkbox-column input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--grid-primary);border-radius:var(--grid-border-radius)}.checkbox-column input[type=checkbox]:focus{outline:2px solid var(--grid-primary);outline-offset:2px}.action-column{text-align:center!important;padding-left:0!important;padding-right:0!important;text-overflow:clip!important;background-color:var(--grid-surface-container)}.action-column mat-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:var(--grid-on-surface-variant);cursor:pointer}.action-column mat-icon:hover{color:var(--grid-primary)}.action-column .action-icons{display:flex;align-items:center;justify-content:center;gap:6px;overflow-x:auto;scrollbar-width:none}.action-column .action-icons::-webkit-scrollbar{display:none}.action-column .action-icon{flex:0 0 auto}.eru-grid-action-menu .mat-mdc-menu-item mat-icon{margin-right:8px;font-size:18px;width:18px;height:18px;line-height:18px;color:var(--grid-on-surface-variant)}.group-header{background-color:var(--grid-surface-container);color:var(--grid-on-surface);font-size:var(--grid-font-size-caption);font-weight:500;border-bottom:1px solid var(--grid-outline);cursor:pointer;transition:background-color .2s ease}.group-header:hover{background-color:var(--grid-surface-container-high)}.group-header .group-title{font-weight:600;color:var(--grid-primary)}.group-header .group-row-count{color:var(--grid-on-surface-variant);font-size:var(--grid-font-size-caption);margin-left:var(--grid-spacing-sm)}.row-item{background-color:var(--grid-surface);transition:background-color .15s ease}.row-item:nth-child(odd){background-color:var(--grid-zebra-odd, var(--grid-surface))}.row-item:nth-child(2n){background-color:var(--grid-zebra-even, var(--grid-surface))}.row-item:hover{background-color:var(--grid-row-hover)}.required-toggle-row{background-color:var(--grid-surface-container, #f3edf7);border-bottom:1px solid var(--grid-outline-variant, #cac4d0)}.required-toggle-row .required-toggle-cell{padding:4px 8px!important;text-align:center;vertical-align:middle;position:relative}.required-toggle-row .required-toggle-cell .required-label{position:absolute;top:2px;left:4px;font-size:10px;color:var(--grid-on-surface-variant, #49454f);font-weight:400;text-transform:lowercase}.required-toggle-row .required-toggle-cell mat-checkbox{display:flex;justify-content:center;align-items:center}.table-column-header{padding:0 var(--grid-header-padding-x);height:var(--grid-header-row-height, auto)}.column-header{font-weight:var(--grid-header-font-weight);text-transform:var(--grid-header-text-transform);letter-spacing:var(--grid-header-letter-spacing);text-align:center!important;font-size:var(--grid-header-font-size);position:relative;-webkit-user-select:none;user-select:none;--grid-header-affordance-space: 0px;--grid-column-resizer-width: 10px;--grid-header-sort-right: calc(var(--grid-column-resizer-width) + 2px);--grid-header-design-right: calc(var(--grid-column-resizer-width) + 2px);background-color:var(--grid-header-bg, var(--grid-surface-container));color:var(--grid-header-color, var(--grid-on-surface))}.column-header:hover{background-color:var(--grid-header-hover-bg, var(--grid-surface-container-high))}.column-drag-handle{position:absolute;left:0;top:0;bottom:0;width:12px;cursor:grab;opacity:0;transition:opacity .2s ease,background-color .2s ease;z-index:2;display:flex;align-items:center;justify-content:center;border-right:1px solid transparent}.column-drag-handle:after{content:\"\\22ee\\22ee\";font-size:14px;color:var(--grid-on-surface-variant);transform:rotate(90deg)}.column-drag-handle:hover{background-color:var(--grid-surface-container-high);border-right-color:var(--grid-outline)}.column-header:hover .column-drag-handle{opacity:1}.column-drag-handle:active{cursor:grabbing}.table-column-header.sortable-header{--grid-header-affordance-space: 20px}.table-column-header.design-clickable{--grid-header-affordance-space: 28px}.table-column-header.sortable-header.design-clickable{--grid-header-affordance-space: 40px;--grid-header-design-right: calc(var(--grid-column-resizer-width) + 13px)}.table-column-header .column-label{display:block;padding-right:var(--grid-header-affordance-space)}.table-column-header .sort-indicator,.table-column-header .design-edit-icon{position:absolute;top:50%;transform:translateY(-50%);margin-left:0}.table-column-header .sort-indicator{right:var(--grid-header-sort-right)}.table-column-header .design-edit-icon{right:var(--grid-header-design-right)}.sortable-header{cursor:pointer}.sortable-header .sort-indicator{display:inline-flex;align-items:center;gap:2px;cursor:pointer;opacity:0;transition:opacity .15s ease}.sortable-header .sort-indicator .sort-triangles{display:flex;flex-direction:column;align-items:center;gap:2px}.sortable-header .sort-indicator .sort-tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;cursor:pointer;transition:border-color .15s ease}.sortable-header .sort-indicator .sort-tri-up{border-bottom:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.sortable-header .sort-indicator .sort-tri-down{border-top:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.sortable-header .sort-indicator .sort-tri-active{opacity:1}.sortable-header .sort-indicator .sort-tri-active.sort-tri-up{border-bottom-color:var(--grid-primary, #6750a4)}.sortable-header .sort-indicator .sort-tri-active.sort-tri-down{border-top-color:var(--grid-primary, #6750a4)}.sortable-header .sort-indicator .sort-priority{font-size:9px;font-weight:600;color:var(--grid-primary, #6750a4);line-height:1;min-width:12px;text-align:center}.sortable-header:hover .sort-indicator,.sortable-header.sort-asc .sort-indicator,.sortable-header.sort-desc .sort-indicator{opacity:1}.sortable-header:hover .sort-indicator .sort-tri:not(.sort-tri-active){opacity:.6}.sort-asc,.sort-desc{background-color:var(--grid-surface-container-low, rgba(103, 80, 164, .04))}.dragging{opacity:1;background-color:var(--grid-surface-container);box-shadow:var(--grid-elevation-2)}.drag-over{background-color:var(--grid-surface-container);border-color:var(--grid-primary)}.data-cell{background-color:transparent;color:var(--grid-on-surface);font-family:var(--grid-font-family);font-size:var(--grid-font-size-body);font-feature-settings:var(--grid-font-feature-numeric);padding:0 var(--grid-cell-padding-x)}.cell-content{align-items:center}.cell-content .mdc-text-field{padding:0px var(--grid-spacing-xxs)!important}.cell-display-text{align-items:center;padding:0px var(--grid-spacing-xs)}.ghost-loading-row{background-color:transparent}.ghost-cell-container{padding:var(--grid-spacing-sm)}.ghost-cell{height:20px;width:100%;background-color:var(--grid-surface-container);animation:pulse 1.5s ease-in-out infinite;border-radius:var(--grid-border-radius)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.column-resizer{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background-color:transparent;transition:background-color .2s ease}.column-resizer:hover{background-color:var(--grid-primary)}.group-separator{height:var(--grid-spacing-sm);background-color:var(--grid-surface-variant)}.group-separator .separator-cell{background-color:var(--grid-surface-variant);border:none;height:var(--grid-spacing-sm)}.error-state{background-color:var(--grid-error-container);color:var(--grid-error);border-color:var(--grid-error)}.error-message{background-color:var(--grid-error);color:#fff;padding:var(--grid-spacing-sm);border-radius:var(--grid-border-radius);font-size:var(--grid-font-size-caption)}.incremental-row-container .eru-grid-table tbody,.incremental-row-container .eru-grid-table{position:relative}.incremental-row-container .eru-grid-table.show-column-lines{border-right:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important;border-top:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table.show-column-lines:not(.freeze-header){border-bottom:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table:not(.show-column-lines){border:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table thead:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:calc(var(--grid-divider-width, 1px) * 2);background-color:var(--grid-divider-color, var(--grid-outline, #e0e0e0));pointer-events:none;z-index:10}.incremental-row-container .eru-grid-table.show-column-lines thead th,.incremental-row-container .eru-grid-table.show-column-lines tbody td{border-left:var(--grid-divider-width, 1px) solid var(--grid-divider-color, var(--grid-outline, #e0e0e0))!important}.incremental-row-container .eru-grid-table.show-row-lines thead th,.incremental-row-container .eru-grid-table.show-row-lines tbody td{border-bottom:var(--grid-divider-width, 1px) solid var(--grid-divider-color, var(--grid-outline, #e0e0e0))!important}@media(max-width:768px){.incremental-row-container{height:600px}.eru-grid-table th,.eru-grid-table td{font-size:var(--grid-font-size-caption)}.checkbox-column{width:40px;min-width:40px;max-width:40px}}@media(prefers-contrast:high){.eru-grid-table th,.eru-grid-table td{border-width:2px}.row-item:hover{border-width:2px;border-color:var(--grid-primary)}}@media(prefers-reduced-motion:reduce){.row-item,.column-drag-handle,.ghost-cell{transition:none;animation:none}}.pivot-table .nested-header{text-align:center;font-weight:600;background:var(--grid-surface-container)}.pivot-table .nested-header.row-dimension-header{background:var(--grid-surface-container);font-weight:600}.pivot-table .pivot-header-leafcols{padding:0;margin:0;height:0}.pivot-table .pivot-header-level.level-0 .nested-header{font-size:14px;padding:12px 8px}.pivot-table .pivot-header-level.level-1 .nested-header{font-size:13px;padding:10px 6px}.pivot-table .pivot-header-level.level-2 .nested-header{font-size:12px;padding:8px 4px}.pivot-table .nested-header:hover{background:var(--grid-surface-variant);color:var(--grid-primary);transition:all .2s ease}.pivot-table .pivot-cell.aggregated-value{font-weight:500;font-family:Roboto Mono,monospace}.pivot-table .pivot-cell-content{display:flex;justify-content:center;align-items:center;min-height:38px}.pivot-table .pivot-repeated-value .cell-content,.pivot-table .pivot-repeated-value .pivot-cell-content{visibility:hidden}.pivot-table .pivot-group-start.row-dimension-cell{border-top:1px solid var(--grid-outline, #79757f)}.pivot-mode .incremental-row-container{display:flex;flex-direction:column;height:auto;max-height:85vh;overflow:auto}.pivot-mode .h-shell{position:relative;width:calc(100% - var(--scrollbar-width, 17px))!important;top:0;z-index:1;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .h-shell::-webkit-scrollbar{display:none}.pivot-mode .gt-shell{position:relative;bottom:50px;flex-shrink:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .gt-shell::-webkit-scrollbar{display:none}.pivot-mode .gt-shell table{border-bottom:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.pivot-mode .gt-shell.adjust-bottom-vs{bottom:66px!important}.pivot-mode .gt-shell.adjust-bottom:not(.adjust-bottom-vs){bottom:calc(66px - var(--scrollbar-width, 17px))!important}.pivot-mode .header-shell{flex-shrink:0;width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .header-shell::-webkit-scrollbar{display:none}.pivot-mode .header-shell.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.pivot-mode .header-shell .eru-grid-table{margin-bottom:0;width:100%;table-layout:fixed}.pivot-mode .header-shell .eru-grid-table thead{background:var(--grid-surface-container)}.pivot-mode .header-shell .eru-grid-table thead th{background:var(--grid-surface-container);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .header-shell .eru-grid-table thead th.sticky-column{position:sticky;background:var(--grid-surface-container);z-index:111}.pivot-mode .header-shell .eru-grid-table tbody td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-container{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.pivot-mode .pivot-table{width:auto!important;min-width:100%!important;table-layout:fixed!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex:none!important;flex-shrink:0!important;flex-grow:0!important}.pivot-mode .pivot-table td,.pivot-mode .pivot-table th{box-sizing:border-box!important;flex:none!important;flex-shrink:0!important;flex-grow:0!important;word-wrap:break-word!important;word-break:break-all!important}.pivot-mode .pivot-table{table-layout:fixed!important;width:100%!important}.pivot-mode .pivot-table *{max-width:var(--col-width)!important;box-sizing:border-box!important}.pivot-mode .pivot-table colgroup{width:100%!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex-basis:var(--col-width)!important;flex:0 0 var(--col-width)!important}.pivot-mode .pivot-table table{width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important}.pivot-mode .pivot-table[style*=--table-total-width]{width:var(--table-total-width)!important;min-width:var(--table-total-width)!important;max-width:var(--table-total-width)!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex:0 0 var(--col-width)!important;flex-basis:var(--col-width)!important;flex-grow:0!important;flex-shrink:0!important;overflow:hidden!important}.pivot-mode .pivot-table tbody td,.pivot-mode .pivot-table thead th{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.pivot-mode .pivot-table .cell-content,.pivot-mode .pivot-table data-cell{width:100%!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important}.pivot-mode .pivot-table table{width:var(--table-total-width)!important;min-width:var(--table-total-width)!important;max-width:var(--table-total-width)!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important;word-wrap:break-word!important;word-break:break-all!important}.pivot-mode .pivot-tbody tr.pivot-row{min-height:var(--grid-data-row-height, 50px)!important;height:var(--grid-data-row-height, 50px)!important}.pivot-mode .pivot-tbody tr.pivot-row:hover{background-color:var(--grid-surface-variant)}.pivot-mode .pivot-tbody tr.pivot-row:nth-child(2n){background-color:#00000005}.pivot-mode .pivot-tbody tr.pivot-row td{min-height:var(--grid-data-row-height, 50px)!important;height:var(--grid-data-row-height, 50px)!important;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-tbody tr.pivot-row td .cell-content{min-height:calc(var(--grid-data-row-height, 50px) - 2px);display:flex;align-items:center;justify-content:center}.pivot-mode .pivot-tbody tr.pivot-row td .cell-content data-cell{width:100%;min-height:calc(var(--grid-data-row-height, 50px) - 4px);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.pivot-mode .pivot-cell{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-cell.aggregated-value{font-weight:500;font-family:Roboto Mono,monospace}.pivot-mode .pivot-cell .cell-content{display:flex;justify-content:center;align-items:center;min-height:var(--grid-header-row-height, 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.pivot-mode .pivot-table .subtotal-row{background-color:var(--grid-surface-container)!important;font-weight:600}.pivot-mode .pivot-table .subtotal-row td{background-color:var(--grid-surface-container);color:var(--grid-on-surface-variant)}.pivot-mode .pivot-table .subtotal-row td:first-child{color:var(--grid-primary)}.pivot-mode .pivot-table .subtotal-row td.aggregated-value{font-weight:500;color:var(--grid-primary)}.pivot-mode .pivot-table .subtotal-row:hover{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .subtotal-row:hover td{background-color:var(--grid-surface-container-high)}.pivot-mode .pivot-table .subtotal-bold td{font-weight:600!important;font-style:normal!important}.pivot-mode .pivot-table .subtotal-bold td.aggregated-value{font-weight:600!important}.pivot-mode .pivot-table .subtotal-italic td{font-style:italic!important}.pivot-mode .pivot-table .subtotal-italic td:first-child{font-weight:600!important}.pivot-mode .pivot-table .subtotal-italic td.aggregated-value{font-style:italic!important;font-weight:500!important}.pivot-mode .pivot-table .subtotal-highlighted{background-color:var(--grid-surface-variant)!important}.pivot-mode .pivot-table .subtotal-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:700!important;font-style:normal!important;color:var(--grid-primary)!important}.pivot-mode .pivot-table .subtotal-highlighted td.aggregated-value{font-weight:500!important;color:var(--grid-primary)!important}.pivot-mode .pivot-table .subtotal-highlighted:hover,.pivot-mode .pivot-table .subtotal-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .grand-total-row{background-color:var(--grid-surface-container-high)!important;font-weight:700;font-size:var(--grid-font-size-body)}.pivot-mode .pivot-table .grand-total-row td{background-color:var(--grid-surface-container-high)!important;color:var(--grid-on-surface)}.pivot-mode .pivot-table .grand-total-row td:first-child{font-style:normal;font-weight:800;color:var(--grid-primary)}.pivot-mode .pivot-table .grand-total-row td.aggregated-value{font-weight:500;color:var(--grid-primary);font-family:Roboto Mono,monospace}.pivot-mode .pivot-table .grand-total-row:hover,.pivot-mode .pivot-table .grand-total-row:hover td{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .grand-total-bold td{font-weight:700!important;font-style:normal!important}.pivot-mode .pivot-table .grand-total-bold td.aggregated-value{font-weight:700!important}.pivot-mode .pivot-table .grand-total-italic td,.pivot-mode .pivot-table .grand-total-italic td.aggregated-value{font-style:italic!important;font-weight:500!important}.pivot-mode .pivot-table .grand-total-highlighted{background-color:var(--grid-primary)!important;box-shadow:var(--grid-elevation-2)!important}.pivot-mode .pivot-table .grand-total-highlighted td{background-color:var(--grid-primary)!important;color:var(--grid-on-primary)!important;font-weight:500!important;font-style:normal!important}.pivot-mode .pivot-table .grand-total-highlighted td.aggregated-value{color:var(--grid-on-primary)!important;font-weight:500!important}.pivot-mode .pivot-table .grand-total-highlighted:hover,.pivot-mode .pivot-table .grand-total-highlighted:hover td{background-color:var(--grid-primary)!important}.pivot-mode .pivot-table .collapsible-header{position:relative}.pivot-mode .pivot-table .collapsible-header .header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--grid-spacing-xs);padding:var(--grid-spacing-xs) var(--grid-spacing-sm)}.pivot-mode .pivot-table .collapsible-header .header-label{flex:1;font-weight:600}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn{background:none;border:none;cursor:pointer;padding:var(--grid-spacing-xxs);margin:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--grid-border-radius);color:var(--grid-on-surface-variant);transition:all .2s ease;font-size:12px;font-weight:600}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn:hover{background-color:var(--grid-surface-container);color:var(--grid-primary);transform:scale(1.1)}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn:focus{outline:2px solid var(--grid-primary);outline-offset:1px}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn .collapse-icon{display:block;line-height:1;font-family:monospace;font-size:14px}.pivot-mode .pivot-table .collapsible-header.expanded .collapse-toggle-btn .collapse-icon{color:var(--grid-primary)}.pivot-mode .pivot-table .collapsible-header.collapsed{background-color:var(--grid-surface-variant)}.pivot-mode .pivot-table .collapsible-header.collapsed .header-label{font-style:italic;color:var(--grid-on-surface-variant)}.pivot-mode .pivot-table .collapsible-header.collapsed .collapse-toggle-btn .collapse-icon{color:var(--grid-outline)}.pivot-mode .pivot-table .collapsible-header:hover{background-color:var(--grid-surface-container)}.pivot-mode .pivot-table .collapsible-header:hover .header-label{color:var(--grid-on-surface)}.pivot-mode .pivot-table .pivot-single-table{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;min-height:var(--table-min-height)!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container{flex-shrink:0;background:var(--grid-surface)!important;overflow-x:auto;overflow-y:hidden;min-height:100px!important;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table{width:auto;min-width:100%;height:auto!important;min-height:100px!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table th{background:var(--grid-surface-container)!important;padding:8px 6px!important;white-space:nowrap;min-width:50px;min-height:40px!important;height:auto!important;position:relative;visibility:visible!important;color:var(--grid-on-surface)!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table th.sticky-column{position:sticky!important;background:var(--grid-surface-container)!important;border-right:2px solid var(--grid-primary)!important;box-shadow:2px 0 4px #0000001a;z-index:101!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container{flex:1;overflow:auto;min-height:300px!important;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-viewport{height:100%!important;width:100%!important;overflow-x:auto!important;overflow-y:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table{width:auto;min-width:100%;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table td,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table td{padding:8px 6px!important;white-space:nowrap;min-width:50px;min-height:32px!important;height:auto!important;background:var(--grid-surface)!important;color:var(--grid-on-surface)!important;visibility:visible!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table td.sticky-column,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table td.sticky-column{position:sticky!important;background:var(--grid-surface-container)!important;border-right:2px solid var(--grid-primary)!important;box-shadow:2px 0 4px #0000001a;z-index:100!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table tbody tr,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table tbody tr{height:auto!important;min-height:50px!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table tbody tr.pivot-row,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table tbody tr.pivot-row{visibility:visible!important;display:table-row!important}.pivot-mode .pivot-table .collapsed-column-group{background-color:var(--grid-surface-container);border-left:3px solid var(--grid-primary)}.pivot-mode .pivot-table .collapsed-column-group:hover{background-color:var(--grid-surface-container-high)}.pivot-row.subtotal-row{background-color:var(--grid-surface-variant);font-weight:500}.pivot-row.subtotal-row.subtotal-bold{font-weight:500}.pivot-row.subtotal-row.subtotal-italic{font-style:italic}.pivot-row.subtotal-row.subtotal-highlighted{background-color:var(--grid-primary);color:var(--grid-on-primary)}.pivot-row.grand-total-row{background-color:var(--grid-surface-container);font-weight:600}.pivot-row.grand-total-row.grand-total-bold{font-weight:800}.pivot-row.grand-total-row.grand-total-italic{font-style:italic}.pivot-row.grand-total-row.grand-total-highlighted{background-color:var(--grid-primary);color:var(--grid-on-primary)}.pivot-row.first-visible-row{background-color:#6750a41a!important;position:relative}.pivot-row.first-visible-row:before{content:\"\\1f441\\fe0f  First Visible\";position:absolute;top:-20px;left:0;background:var(--grid-primary);color:var(--grid-on-primary);padding:2px 6px;font-size:10px;border-radius:2px;z-index:1000}.header-wrap-text{white-space:pre-wrap;word-break:auto-phrase}.group-header-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding-right:12px}.custom-collapse-header{background-color:var(--grid-surface-variant);padding:8px 20px;border-top-left-radius:12px;border-top-right-radius:12px;cursor:pointer;display:flex;width:fit-content;align-items:center;-webkit-user-select:none;user-select:none;min-width:200px;margin-bottom:10px;position:sticky;left:1px;z-index:116}.custom-collapse-header .collapse-arrow{display:inline-block;margin-right:8px;font-size:12px;color:var(--grid-on-surface-variant);transition:transform .2s ease;transform:rotate(0)}.custom-collapse-header .collapse-arrow.rotate-arrow{transform:rotate(270deg)}.custom-collapse-header .f-12{font-size:12px;color:var(--grid-on-surface)}.custom-collapse-header .group-sort-indicator{display:inline-flex;align-items:center;margin-left:8px}.custom-collapse-header .group-sort-indicator .sort-triangles{display:flex;flex-direction:column;align-items:center;gap:2px}.custom-collapse-header .group-sort-indicator .sort-tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;cursor:pointer;transition:border-color .15s ease}.custom-collapse-header .group-sort-indicator .sort-tri-up{border-bottom:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.custom-collapse-header .group-sort-indicator .sort-tri-down{border-top:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.custom-collapse-header .group-sort-indicator .sort-tri-active{opacity:1}.custom-collapse-header .group-sort-indicator .sort-tri-active.sort-tri-up{border-bottom-color:var(--grid-primary, #6750a4)}.custom-collapse-header .group-sort-indicator .sort-tri-active.sort-tri-down{border-top-color:var(--grid-primary, #6750a4)}.excel-download-icon{cursor:pointer}.excel-download-icon:hover{opacity:.75}.excel-download-bar{display:flex;justify-content:flex-end;padding:4px 12px;flex-shrink:0}.table-mode .header-shell{flex-shrink:0;width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.table-mode .header-shell::-webkit-scrollbar{display:none}.table-mode .header-shell.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.table-mode .subtotal-row{background-color:var(--grid-surface-container)!important;font-weight:600}.table-mode .subtotal-row td{background-color:var(--grid-surface-container);color:var(--grid-on-surface-variant)}.table-mode .subtotal-row td:first-child{color:var(--grid-primary)}.table-mode .subtotal-row td.subtotal-cell{font-weight:500}.table-mode .subtotal-row td.subtotal-cell .subtotal-label{font-weight:600;color:var(--grid-primary)}.table-mode .subtotal-row:hover{background-color:var(--grid-surface-container-high)!important}.table-mode .subtotal-row:hover td{background-color:var(--grid-surface-container-high)}.table-mode .subtotal-row.subtotal-bold td{font-weight:600!important;font-style:normal!important}.table-mode .subtotal-row.subtotal-italic td{font-style:italic!important}.table-mode .subtotal-row.subtotal-italic td:first-child{font-weight:600!important}.table-mode .subtotal-row.subtotal-highlighted{background-color:var(--grid-surface-variant)!important}.table-mode .subtotal-row.subtotal-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:700!important;font-style:normal!important;color:var(--grid-primary)!important}.table-mode .subtotal-row.subtotal-highlighted:hover,.table-mode .subtotal-row.subtotal-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.table-mode .grand-total-row{background-color:var(--grid-surface-container-high)!important;font-weight:700}.table-mode .grand-total-row td{background-color:var(--grid-surface-container-high);color:var(--grid-on-surface)}.table-mode .grand-total-row td:first-child{color:var(--grid-primary)}.table-mode .grand-total-row td.grand-total-cell{font-weight:600}.table-mode .grand-total-row td.grand-total-cell .grand-total-label{font-weight:700;color:var(--grid-primary)}.table-mode .grand-total-row:hover{background-color:var(--grid-surface-container-high)!important}.table-mode .grand-total-row:hover td{background-color:var(--grid-surface-container-high)}.table-mode .grand-total-row.grand-total-bold td{font-weight:700!important;font-style:normal!important}.table-mode .grand-total-row.grand-total-italic td{font-style:italic!important}.table-mode .grand-total-row.grand-total-italic td:first-child{font-weight:700!important}.table-mode .grand-total-row.grand-total-highlighted{background-color:var(--grid-surface-variant)!important}.table-mode .grand-total-row.grand-total-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:800!important;font-style:normal!important;color:var(--grid-primary)!important}.table-mode .grand-total-row.grand-total-highlighted:hover,.table-mode .grand-total-row.grand-total-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.table-mode .subtotal-row-shell{width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.table-mode .subtotal-row-shell::-webkit-scrollbar{display:none}.board-mode-host{overflow:hidden;display:flex;flex-direction:column;max-height:var(--grid-height, 600px)}.board-mode-host .board-view-container{display:flex;flex-direction:column;flex:1;min-height:0}.board-mode-host .board-sort-bar{display:flex;align-items:center;gap:6px;padding:8px 16px;flex-shrink:0;border-bottom:1px solid var(--grid-outline-variant, #cac4d0);background:var(--grid-surface, #fffbfe);overflow-x:auto}.board-mode-host .board-sort-bar .board-sort-label{font-size:12px;font-weight:500;color:var(--grid-on-surface-variant, #49454f);white-space:nowrap}.board-mode-host .board-sort-bar .board-sort-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;border:1px solid var(--grid-outline-variant, #cac4d0);background:var(--grid-surface, #fffbfe);color:var(--grid-on-surface, #1d1b20);font-size:12px;white-space:nowrap}.board-mode-host .board-sort-bar .board-sort-chip-active{background:var(--grid-surface-container);border-color:var(--grid-outline, #79757f);color:var(--grid-on-surface, #1d1b20)}.board-mode-host .board-sort-bar .board-sort-chip-label{pointer-events:none}.board-mode-host .board-sort-bar .board-sort-chip-arrow{font-size:10px;line-height:1;cursor:pointer;padding:2px;border-radius:4px}.board-mode-host .board-sort-bar .board-sort-chip-arrow:hover{background:#00000014}.board-mode-host .board-sort-bar .board-sort-chip-priority{font-size:9px;font-weight:700;background:var(--grid-primary, #6750a4);color:var(--grid-on-primary, #ffffff);border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}.board-mode-host .board-sort-bar .board-sort-chip-remove{font-size:10px;cursor:pointer;padding:2px;border-radius:4px;color:var(--grid-on-surface-variant, #49454f)}.board-mode-host .board-sort-bar .board-sort-chip-remove:hover{background:#00000014;color:var(--grid-error, #b3261e)}.board-mode-host .board-sort-bar .board-sort-add-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;border:1px dashed var(--grid-outline-variant, #cac4d0);background:transparent;color:var(--grid-on-surface-variant, #49454f);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease}.board-mode-host .board-sort-bar .board-sort-add-btn .board-sort-add-icon{font-size:14px;width:14px;height:14px}.board-mode-host .board-sort-bar .board-sort-add-btn:hover{background:var(--grid-surface-container-low, #f7f2fa);border-color:var(--grid-primary, #6750a4);color:var(--grid-primary, #6750a4)}.board-mode-host .board-sort-bar .board-sort-clear{display:inline-flex;align-items:center;padding:4px 10px;border-radius:16px;border:1px solid var(--grid-error, #b3261e);background:transparent;color:var(--grid-error, #b3261e);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s ease}.board-mode-host .board-sort-bar .board-sort-clear:hover{background:#b3261e14}.board-mode-host .board-columns-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--board-col-min-width, 300px),var(--board-col-max-width, 1fr)));grid-auto-rows:auto;align-items:start;gap:16px;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;align-content:start;justify-content:start}.board-mode-host .board-columns-wrapper.board-columns-nowrap{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:auto;grid-auto-rows:auto;grid-auto-columns:minmax(var(--board-col-min-width, 300px),var(--board-col-max-width, 1fr));overflow-x:auto;overflow-y:hidden}.board-mode-host .board-column{max-height:var(--board-column-height, 420px);min-width:0;display:flex;flex-direction:column;background:var(--grid-surface-container, #f3edf7);border-radius:12px;min-height:0;overflow:hidden}.board-mode-host .board-column.board-column-accented{border-top:3px solid var(--board-group-color, transparent)}.board-mode-host .board-column .column-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;font-weight:600;flex-shrink:0;background-color:transparent}.board-mode-host .board-column .column-header:hover{background-color:transparent}.board-mode-host .board-column .column-header .column-header-title{font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.2;color:var(--grid-on-surface, #1d1b20);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-mode-host .board-column .column-header .column-header-title-cell{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:clip}.board-mode-host .board-column .column-header .column-header-title-cell data-cell,.board-mode-host .board-column .column-header .column-header-title-cell .data-cell-component,.board-mode-host .board-column .column-header .column-header-title-cell .container{padding:0!important;margin:0!important;border:none!important;background:transparent!important;min-height:0!important;height:auto!important;width:auto!important;max-width:100%!important;overflow:visible!important}.board-mode-host .board-column .column-header .column-header-title-cell .status-display,.board-mode-host .board-column .column-header .column-header-title-cell .status-display-content,.board-mode-host .board-column .column-header .column-header-title-cell .status-text,.board-mode-host .board-column .column-header .column-header-title-cell .tag-display,.board-mode-host .board-column .column-header .column-header-title-cell .tag-text{max-width:none!important;overflow:visible!important;text-overflow:clip!important}.board-mode-host .board-column .column-header .column-header-count{font-size:10px;font-weight:600;color:var(--eru-board-count-color, var(--grid-on-surface-variant, #49454f));background:var(--eru-board-count-bg, var(--grid-surface-variant, #e7e0ec));border-radius:10px;padding:3px 10px;white-space:nowrap;flex-shrink:0}.board-mode-host .board-column-body{flex:0 1 auto;min-height:0}.board-mode-host .board-card-container{box-sizing:border-box;overflow:hidden;border-radius:8px;transition:background-color .15s ease,box-shadow .15s ease}.board-mode-host .board-card-container.show-row-lines{box-shadow:inset 0 0 0 var(--grid-divider-width, 1px) var(--grid-divider-color, var(--grid-outline, #e0e0e0))}.board-mode-host .board-card-container:hover{background-color:var(--eru-board-card-hover-bg, color-mix(in srgb, var(--mat-sys-primary, #1976d2) 8%, transparent))}.board-mode-host .board-card-container.selected{background-color:var(--eru-board-card-selected-bg, color-mix(in srgb, var(--mat-sys-primary, #1976d2) 14%, transparent));box-shadow:inset 0 0 0 2px var(--eru-board-card-selected-outline, var(--mat-sys-primary, #1976d2))}.board-mode-host .board-card{height:calc(100% - 8px);overflow:hidden;cursor:pointer}.board-mode-host .board-card mat-card-title{font-size:13px}.board-mode-host .board-card mat-card-subtitle{font-size:12px}.board-mode-host .board-card-field{display:flex;flex-direction:column;margin-bottom:4px}.board-mode-host .board-field-label{font-size:10px;color:var(--grid-on-surface-variant, #49454f);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.board-mode-host .board-ghost-card{margin:8px;padding:16px;background:var(--grid-surface, #fef7ff);border-radius:8px;animation:board-pulse 1.5s ease-in-out infinite}.board-mode-host .board-ghost-line{height:12px;background:var(--grid-surface-variant, #e7e0ec);border-radius:4px;margin-bottom:8px}.board-mode-host .board-ghost-line--short{width:60%}@keyframes board-pulse{0%,to{opacity:1}50%{opacity:.5}}th.row-expand-toggle,td.row-expand-toggle{width:40px!important;min-width:40px!important;max-width:40px!important;padding:0!important;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box}.row-expand-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:var(--grid-on-surface-variant);transition:transform .15s ease-in-out}.row-expand-icon.expanded{transform:rotate(90deg)}.row-detail{background:var(--grid-surface-container)}.row-detail .row-detail-cell{padding:var(--grid-spacing-sm) var(--grid-spacing-md);border-bottom:1px solid var(--grid-outline-variant)}.row-detail .row-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--grid-spacing-sm) var(--grid-spacing-md)}.row-detail .row-detail-field{display:flex;flex-direction:column;gap:var(--grid-spacing-xxs);min-width:0}.row-detail .row-detail-label{font-size:var(--grid-font-size-caption);color:var(--grid-on-surface-variant);font-weight:500}.row-detail .row-detail-value{min-width:0}.row-detail .row-detail-value data-cell{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: DataCellComponent, selector: "data-cell", inputs: ["eruGridStore", "fieldSize", "columnDatatype", "columnName", "column", "value", "id", "frozenGrandTotalCell", "td", "drillable", "mode", "isEditable", "row", "personCardTemplate", "cellTemplate"], outputs: ["tdChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "index", "columnConfig", "gridConfig"] }, { kind: "directive", type: ColumnDragDirective, selector: "[columnDraggable]", inputs: ["columnDraggable"] }, { kind: "component", type: ColumnDesignPanelComponent, selector: "eru-column-design-panel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "rowContainer", first: true, predicate: ["rowContainer"], descendants: true }, { propertyName: "headerScroller", first: true, predicate: ["headerScroller"], descendants: true, read: ElementRef }, { propertyName: "gtScroller", first: true, predicate: ["gtScroller"], descendants: true, read: ElementRef }, { propertyName: "viewport", first: true, predicate: ["vp"], descendants: true }, { propertyName: "groupsViewport", first: true, predicate: ["groupsViewport"], descendants: true }, { propertyName: "groupsScrollContainerEl", first: true, predicate: ["groupsScrollContainer"], descendants: true }, { propertyName: "allViewports", predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "headerScrollers", predicate: ["headerScroller"], descendants: true }], ngImport: i0, template: "<!-- <div style=\"background: #f0f0f0; font-size: 12px; border-bottom: 1px solid #ccc;\">\ncurrentPivotScrollIndex {{currentPivotScrollIndex()}} |\nfirstDataRowIndex {{firstDataRowIndex()}} |\nfirstTr {{firstTr}} |\nmaxDepth {{maxDepth()}}\n</div> -->\n<ng-template #excelDownloadIcon>\n  <svg class=\"excel-download-icon\" title=\"Download Excel\" (click)=\"onExcelDownloadClick($event)\"\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"24px\" height=\"24px\">\n    <path fill=\"#169154\" d=\"M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z\" />\n    <path fill=\"#18482a\" d=\"M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z\" />\n    <path fill=\"#0c8045\" d=\"M14 15.003H29V24.005000000000003H14z\" />\n    <path fill=\"#17472a\" d=\"M14 24.005H29V33.055H14z\" />\n    <g>\n      <path fill=\"#29c27f\" d=\"M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z\" />\n      <path fill=\"#27663f\" d=\"M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z\" />\n      <path fill=\"#19ac65\" d=\"M29 15.003H44V24.005000000000003H29z\" />\n      <path fill=\"#129652\" d=\"M29 24.005H44V33.055H29z\" />\n    </g>\n    <path fill=\"#0c7238\"\n      d=\"M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z\" />\n    <path fill=\"#fff\"\n      d=\"M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z\" />\n  </svg>\n</ng-template>\n\n<div class=\"incremental-row-container eru-grid\" #rowContainer [class.pivot-mode]=\"gridStore.isPivotMode()\"\n  [class.table-mode]=\"!gridStore.isPivotMode() && !isBoardMode()\" [class.board-mode-host]=\"isBoardMode()\">\n  <eru-column-design-panel></eru-column-design-panel>\n  <!-- Pivot Mode Template -->\n  @if (gridStore.isPivotMode()) {\n  <ng-container>\n    <div class=\"pivot-container\" style=\"display: flex; flex-direction: column; height: 100%;\"\n      [style]=\"'--table-min-height: ' + getInitialMinHeightPx() + 'px; --table-total-width: ' + getInitialTotalWidth() + 'px'\">\n      @if(showExcelDownload()) {\n      <div class=\"excel-download-bar\">\n        <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n      </div>\n      }\n      <!-- Debug info for first visible row -->\n\n\n      <div class=\"pivot-single-table\"\n        style=\"height: 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column;\">\n        @if (freezeHeader()) {\n        <div #headerScroller class=\"header-shell\">\n          <table class=\"eru-grid-table pivot-table\"\n            [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <!-- Column Groups for consistent width -->\n            <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n            <ng-container *ngTemplateOutlet=\"pivotTableHead\"></ng-container>\n            @if(grandTotalPosition() === 'before' && freezeGrandTotal()) {\n            <ng-container *ngTemplateOutlet=\"pivotGrandTotal\"></ng-container>\n            }\n          </table>\n        </div>\n        }\n        <!-- Virtual Scrolled Table Body -->\n        <div>\n          <cdk-virtual-scroll-viewport #vp [itemSize]=\"dataRowHeight()\" class=\"viewport pivot-viewport\"\n            [class.apply-cdk-width]=\"applyCdkWidth()\" (scrolledIndexChange)=\"onPivotScroll($event)\"\n            (scroll)=\"onBodyScroll($event)\" style=\"overflow: auto;\">\n            <table class=\"eru-grid-table pivot-table\"\n              [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n              [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n              <!-- Column Groups for consistent width -->\n              <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n              @if (!freezeHeader()) {\n              <ng-container *ngTemplateOutlet=\"pivotTableHead\"></ng-container>\n              }\n              <!-- Table Body with Virtual Scrolling -->\n              <tbody class=\"pivot-tbody\">\n\n                <tr *cdkVirtualFor=\"let pivotRow of gridStore.pivotDisplayData(); \n                           trackBy: trackByPivotRowFn; \n                           let i = index\" class=\"pivot-row\" [class.subtotal-row]=\"pivotRow._isSubtotal\"\n                  [class.grand-total-row]=\"pivotRow._isGrandTotal\"\n                  [class.subtotal-bold]=\"pivotRow._isSubtotal && subTotalStyle() === 'bold'\"\n                  [class.subtotal-italic]=\"pivotRow._isSubtotal && subTotalStyle() === 'italic'\"\n                  [class.subtotal-highlighted]=\"pivotRow._isSubtotal && subTotalStyle() === 'highlighted'\"\n                  [class.grand-total-bold]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'bold'\"\n                  [class.grand-total-italic]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'italic'\"\n                  [class.grand-total-highlighted]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'highlighted'\"\n                  [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\" [style.cursor]=\"cursorOnHover() || null\" [attr.data-pivot-row]=\"i\">\n                  @if ((!pivotRow._isGrandTotal && freezeGrandTotal() ) || (!freezeGrandTotal() )) {\n                  @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n                  <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"pivot-cell\"\n                    [class.row-dimension-cell]=\"isRowDimensionColumn(column.name)\"\n                    [class.column-dimension-cell]=\"!isRowDimensionColumn(column.name)\"\n                    [class.aggregated-value]=\"!isRowDimensionColumn(column.name) && column.datatype === 'number'\"\n                    [class.pivot-repeated-value]=\"isRepeatedDimensionValue(i, column.name)\"\n                    [class.pivot-group-start]=\"isPivotGroupStart(i, column.name)\"\n                    [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n                    [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n                    [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n                    [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 99 : 1\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n                    <div class=\"cell-content pivot-cell-content\">\n                      <data-cell [personCardTemplate]=\"personCardTemplate\" [class.aggregation]=\"!!column.aggregationFunction\" [fieldSize]=\"column.field_size\"\n                        [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\" [value]=\"pivotRow[column.name]\"\n                        [column]=\"column\" [drillable]=\"column.enableDrilldown || false\" [mode]=\"mode()\"\n                        [isEditable]=\"isEditable()\" [id]=\"'pivot_' + i + '_' + column.name\" [eruGridStore]=\"gridStore\"\n                        [row]=\"pivotRow\">\n                      </data-cell>\n                    </div>\n                  </td>\n                  }\n                  } @else {\n                  <td [style.height.px]=\"dataRowHeight()\" [attr.colspan]=\"getLeafColumns().length\"> </td>\n                  }\n                </tr>\n              </tbody>\n            </table>\n          </cdk-virtual-scroll-viewport>\n\n        </div>\n        @if (freezeGrandTotal() && grandTotalPosition() === 'after') {\n        <div #gtScroller class=\"header-shell gt-shell\" [class.adjust-bottom]=\"!applyCdkWidth()\"\n          [class.adjust-bottom-vs]=\"adjustScrollWidth()\">\n          <table class=\"eru-grid-table pivot-table\"\n            [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n            <ng-container *ngTemplateOutlet=\"pivotGrandTotal\"></ng-container>\n\n          </table>\n        </div>\n        }\n\n\n      </div>\n    </div>\n  </ng-container>\n  } @else if (isBoardMode()) {\n  <!-- Board Mode Template -->\n  <div class=\"board-view-container\">\n    @if(showExcelDownload()) {\n    <div class=\"excel-download-bar\">\n      <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n    </div>\n    }\n    @if(showSortBar()) {\n    <div class=\"board-sort-bar\">\n      <span class=\"board-sort-label\">Sort by:</span>\n      @for (entry of gridStore.sortColumns(); track getFieldName(entry)) {\n      <span class=\"board-sort-chip board-sort-chip-active\">\n        <span class=\"board-sort-chip-label\">{{getColumnLabel(entry)}}</span>\n        <span class=\"board-sort-chip-arrow\" (click)=\"onBoardSortChipToggle($event, entry)\">\n          @if(!entry.startsWith('-')) { \u25B2 } @else { \u25BC }\n        </span>\n        @if(gridStore.sortColumns().length > 1) {\n        <span class=\"board-sort-chip-priority\">{{getSortPriority(getFieldName(entry))}}</span>\n        }\n        <span class=\"board-sort-chip-remove\" (click)=\"onBoardSortChipRemove($event, entry)\">\u2715</span>\n      </span>\n      }\n      <button class=\"board-sort-add-btn\" [matMenuTriggerFor]=\"sortFieldMenu\">\n        <mat-icon class=\"board-sort-add-icon\">add</mat-icon> Add field\n      </button>\n      <mat-menu #sortFieldMenu=\"matMenu\" class=\"board-sort-menu\">\n        @for (column of columns(); track column.name) {\n        <button mat-menu-item (click)=\"onBoardSortFieldSelect(column)\"\n          [disabled]=\"getSortDirection(column.name) !== null\">\n          @if(getSortDirection(column.name) !== null) {\n          <mat-icon>check</mat-icon>\n          } @else {\n          <mat-icon></mat-icon>\n          }\n          {{column.label}}\n        </button>\n        }\n      </mat-menu>\n      @if(gridStore.sortColumns().length > 0) {\n      <button class=\"board-sort-clear\" (click)=\"onBoardSortClear()\">\u2715 Clear</button>\n      }\n    </div>\n    }\n    <div class=\"board-columns-wrapper\" [class.board-columns-nowrap]=\"!boardWrapColumns()\">\n      @for (group of groups(); track group.id) {\n      <div class=\"board-column\" [class.board-column-accented]=\"!!boardGroupColor(group)\"\n        [style.--board-group-color]=\"boardGroupColor(group)\">\n        @if (showBoardColumnHeader()) {\n        <div class=\"column-header\">\n          <!-- Render the group value through the same read-only cell renderer a\n               data cell uses, so the grouped field's datatype formats itself\n               (status/tag pills, dates, numbers) instead of printing raw text. -->\n          @if (groupByColumn(); as gcol) {\n            <span class=\"column-header-title column-header-title-cell\">\n              <data-cell\n                [eruGridStore]=\"gridStore\"\n                [column]=\"gcol\"\n                [columnDatatype]=\"gcol.datatype\"\n                [columnName]=\"gcol.name\"\n                [value]=\"group.title\"\n                [id]=\"'board-group-' + group.id\"\n                [fieldSize]=\"0\"\n                [isEditable]=\"false\"\n                [mode]=\"'board-group-header'\">\n              </data-cell>\n            </span>\n          } @else {\n            <span class=\"column-header-title\">{{ group.title }}</span>\n          }\n          <span class=\"column-header-count\">{{ group.currentLoadedRows || 0 }} of {{ group.totalRowCount || 0 }}</span>\n        </div>\n        }\n        <cdk-virtual-scroll-viewport [attr.data-group-id]=\"group.id\" [itemSize]=\"boardCardSlot\" class=\"board-column-body\"\n          [style.height.px]=\"boardColumnBodyHeight(group)\"\n          (scrolledIndexChange)=\"onBoardScrolledIndexChange($event, group)\">\n          <div\n            *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id)(); templateCacheSize: 0\"\n            class=\"board-card-container\"\n            [class.selected]=\"isBoardCardActive(row)\"\n            [class.show-row-lines]=\"showRowLines()\"\n            [style.height.px]=\"boardCardOuterHeight\"\n            [style.padding.px]=\"boardCardPadding\"\n            [style.marginBottom.px]=\"boardCardGap\"\n            [style.cursor]=\"cursorOnHover() || null\"\n            (click)=\"emitRowSelect(row, 'board', group)\">\n            <!-- Custom template when consumer provides boardCardTemplate; default card otherwise -->\n            <ng-container\n              *ngTemplateOutlet=\"boardCardTemplate ?? defaultBoardCard;\n                                 context: { $implicit: row, columns: visibleBoardFields(), group: group }\">\n            </ng-container>\n          </div>\n        </cdk-virtual-scroll-viewport>\n        @if (group.isLoading) {\n        <div class=\"board-ghost-card\">\n          <div class=\"board-ghost-line\"></div>\n          <div class=\"board-ghost-line board-ghost-line--short\"></div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  } @else {\n\n  <!-- Table Mode Template -->\n  @if(showExcelDownload() && !showGroupBar()) {\n  <div class=\"excel-download-bar\">\n    <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n  </div>\n  }\n  <!-- Select-all banner: the header checkbox can only reach loaded pages, so\n       this is where the user says they meant the whole result set. -->\n  @if(showSelectAllBanner()) {\n  <div class=\"selection-banner\">\n    @if(selectAllMatching()) {\n    <span class=\"selection-banner-text\">All {{ totalMatchingCount() }} matching records are selected.</span>\n    <button type=\"button\" class=\"selection-banner-action\" (click)=\"clearRowSelection()\">Clear selection</button>\n    } @else {\n    <span class=\"selection-banner-text\">{{ gridStore.totalSelectedCount() }} selected on this view.</span>\n    <button type=\"button\" class=\"selection-banner-action\" (click)=\"selectAllMatchingRows()\">Select all {{\n      totalMatchingCount() }} matching</button>\n    }\n  </div>\n  }\n  <!-- Scrollable groups container \u2014 plain iteration avoids CDK fixed-height estimation errors -->\n  <div #groupsScrollContainer class=\"groups-scroll-container\" (scroll)=\"onGroupsViewportScroll($event)\">\n\n    @for (group of groups(); track trackByGroupFn($index, group); let i = $index) {\n    <div class=\"group-container\"\n      [attr.data-group-id]=\"group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id\">\n      <!-- Combined sticky header with group info and table -->\n      <div style=\"\n        background:var(--grid-surface);\n        position: sticky;\n        top: 0;\n        z-index: 115;\n      \">\n        @if(showGroupBar()) {\n        <div class=\"group-header-row\">\n          <div class=\"custom-collapse-header\" (click)=\"toggleGroupCollapse(group.id)\">\n            <span class=\"collapse-arrow\" [ngClass]=\"{\n              'rotate-arrow': group.isExpanded,\n            }\">\u25BC</span>\n            <span class=\"f-12\">\n              {{ group?.title || \"\" }}\n              {{ group?.currentLoadedRows || 0 }} -\n              {{ group?.totalRowCount || 0 }} rows...</span>\n            @if(groupByField() && isSortable()) {\n            <span class=\"group-sort-indicator\">\n              <span class=\"sort-triangles\">\n                <span class=\"sort-tri sort-tri-up\" [class.sort-tri-active]=\"getSortDirection(groupByField()!) === 'asc'\"\n                  (click)=\"onGroupSortToggle($event, 'asc')\"></span>\n                <span class=\"sort-tri sort-tri-down\"\n                  [class.sort-tri-active]=\"getSortDirection(groupByField()!) === 'desc'\"\n                  (click)=\"onGroupSortToggle($event, 'desc')\"></span>\n              </span>\n            </span>\n            }\n          </div>\n          @if(i === 0 && showExcelDownload()) {\n          <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n          }\n        </div>\n        }\n\n        @if(freezeHeader() && (group.isExpanded || !showGroupBar())) {\n        <div #headerScroller class=\"header-shell\" [attr.data-group-id]=\"'header-shell-' + group.id\"\n          [style]=\"'--table-total-width: ' + getInitialTotalWidth() + 'px'\">\n          <table class=\"eru-grid-table\" [class.freeze-header]=\"freezeHeader()\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <ng-container *ngTemplateOutlet=\"tableColGroup\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n            <!-- Grand Total row after sticky header (position: before) - only for first group -->\n            @if(enableGrandTotal() && grandTotalPosition() === 'before' && hasGrandTotalData() && i === 0) {\n            <tbody>\n              <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n            </tbody>\n            }\n            <!-- Subtotal row after sticky header (position: before) -->\n            @if(enableRowSubtotals() && subtotalPosition() === 'before' && hasSubtotalData(group)) {\n            <tbody>\n              <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n            </tbody>\n            }\n          </table>\n        </div>\n        }\n      </div>\n      @if(group.isExpanded || !showGroupBar()) {\n      <ng-container>\n        <cdk-virtual-scroll-viewport [attr.data-group-id]=\"group.id\" [itemSize]=\"dataRowHeight()\" class=\"viewport table-viewport\"\n          (scrolledIndexChange)=\"onScroll($event, group)\" (scroll)=\"onTableBodyScroll($event)\"\n          [style]=\"'--table-height: ' + getGroupContentHeight(group.id) + 'px; --table-min-height: ' + getGroupContentHeight(group.id) + 'px; --table-total-width: ' + getInitialTotalWidth() + 'px'\">\n          <div class=\"table-wrapper\">\n            <table class=\"eru-grid-table\" [class.show-column-lines]=\"showColumnLines()\"\n              [class.show-row-lines]=\"showRowLines()\">\n              <ng-container *ngTemplateOutlet=\"tableColGroup\"></ng-container>\n              @if(!freezeHeader()) {\n              <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n              }\n              <!-- Grand Total row after normal header (position: before) - only for first group -->\n              @if(!freezeHeader() && enableGrandTotal() && grandTotalPosition() === 'before' &&\n              hasGrandTotalData() && i === 0) {\n              <tbody>\n                <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n              </tbody>\n              }\n              <!-- Subtotal row after normal header (position: before) -->\n              @if(!freezeHeader() && enableRowSubtotals() && subtotalPosition() === 'before' &&\n              hasSubtotalData(group)) {\n              <tbody>\n                <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n              </tbody>\n              }\n              <tbody>\n                @if (columns(); as columnsList) {\n                <!--  <tr *ngIf=\"groupItem.type === 'table-header' && groups().length > 1\" style=\"background:#fafafa\">\n                      @if(gridStore.configuration().config.allowSelection) {\n                        <th class=\"checkbox-column\" style=\"text-align: center;\">\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"isGroupSelected(groupItem.group?.id || '')\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"toggleGroupSelection($event, groupItem.group?.id || '')\"\n                            >\n                        </th>\n                      }\n                      <th *ngFor=\"let column of columns(); trackBy: trackByColumnFn;let i =index\"\n                        style=\"text-align: center;\"\n                        [style.width.px]=\"column.field_size\"\n                        [style.minWidth.px]=\"column.field_size\"\n                        [resizeColumn]=\"true\"\n                        [columnConfig]=\"column\"\n                        [columnDraggable]=\"i\"\n                        class=\"column-header\">\n                        <div class=\"column-drag-handle\"></div>\n                        {{column.label}} {{column.symbol}}\n                      </th>\n                    </tr> -->\n                <!--   @if(getRowsForGroup(group.id).length > 0 && group.isExpanded) { -->\n                <!-- *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id)(); \n          trackBy: trackByRowFn; \n          let i = index\" -->\n                <!--  @for(row of getRowsForGroupSignal(group.id)(); track trackByRowFn($index, row); let i = $index) { -->\n                <ng-container\n                  *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id)(); trackBy: trackByRowFn; let i = index\">\n                <tr class=\"row-item\" [attr.data-row-id]=\"i\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\" [style.cursor]=\"cursorOnHover() || null\" (click)=\"emitRowSelect(row, 'table', group)\">\n                  @if(gridStore.configuration().config.allowSelection) {\n                  <td class=\"checkbox-column\" style=\"text-align: center;\">\n                    <input type=\"checkbox\" [checked]=\"isRowSelected(row?.entity_id)\"\n                      (change)=\"toggleRowSelection($event, row)\">\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('before')) {\n                  <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <ng-container\n                      *ngTemplateOutlet=\"actionCell; context: { $implicit: row, mode: 'table', group: group }\"></ng-container>\n                  </td>\n                  }\n                  @if(hasHiddenColumns()) {\n                  <td class=\"row-expand-toggle\" (click)=\"toggleRowExpand(row, i, $event)\">\n                    <mat-icon class=\"row-expand-icon\" [class.expanded]=\"isRowExpanded(row, i)\">chevron_right</mat-icon>\n                  </td>\n                  }\n                  @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n                  <td #cell [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n                    class=\"data-cell\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\"\n                    [matTooltipClass]=\"'error-message'\" [matTooltip]=\"datacell.error()?'Error: ' + datacell.error():''\"\n                    matTooltipPosition=\"below\">\n                    <div class=\"cell-content\">\n                      <data-cell #datacell [personCardTemplate]=\"personCardTemplate\" [cellTemplate]=\"cellTemplate\" [td]=cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\"\n                        [columnName]=\"column.name\" [value]=\"(row?.['entity_data']?.[column.name] ?? row?.[column.name]) || ''\" [column]=\"column\"\n                        [mode]=\"mode()\" [isEditable]=\"isEditable() && column.editable !== false && column.editable !== 'false'\" [drillable]=\"column.enableDrilldown || false\"\n                        [id]=\"i + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"row\"></data-cell>\n                    </div>\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('after')) {\n                  <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <ng-container\n                      *ngTemplateOutlet=\"actionCell; context: { $implicit: row, mode: 'table', group: group }\"></ng-container>\n                  </td>\n                  }\n                </tr>\n                @if(hasHiddenColumns() && isRowExpanded(row, i)) {\n                <tr class=\"row-detail\">\n                  <td class=\"row-detail-cell\" [attr.colspan]=\"rowDetailColspan()\">\n                    <div class=\"row-detail-grid\">\n                      @for (hiddenCol of hiddenColumns(); track trackByColumnFn($index, hiddenCol)) {\n                      <div class=\"row-detail-field\">\n                        <span class=\"row-detail-label\">{{hiddenCol.label}}</span>\n                        <div class=\"row-detail-value\">\n                          <data-cell [cellTemplate]=\"cellTemplate\" [fieldSize]=\"hiddenCol.field_size\" [columnDatatype]=\"hiddenCol.datatype\"\n                            [columnName]=\"hiddenCol.name\" [value]=\"(row?.['entity_data']?.[hiddenCol.name] ?? row?.[hiddenCol.name]) || ''\"\n                            [column]=\"hiddenCol\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n                            [drillable]=\"hiddenCol.enableDrilldown || false\"\n                            [id]=\"'detail_' + i + '_' + hiddenCol.name\" [eruGridStore]=\"gridStore\" [row]=\"row\"></data-cell>\n                        </div>\n                      </div>\n                      }\n                    </div>\n                  </td>\n                </tr>\n                }\n                </ng-container>\n                <!-- } -->\n                <!-- } -->\n                @if(group.isLoading && (group.isExpanded || !showGroupBar())) {\n                @for(i of [].constructor(ghostRows()); let j = $index; track j) {\n                <tr class=\"ghost-loading-row\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n                  @if(gridStore.configuration().config.allowSelection) {\n                  <td class=\"checkbox-column ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n\n                  }\n                  @if(shouldShowActionColumn('before')) {\n                  <td class=\"action-column ghost-cell-container\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @if(hasHiddenColumns()) {\n                  <td class=\"row-expand-toggle ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n                  <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n                    class=\"ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('after')) {\n                  <td class=\"action-column ghost-cell-container\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                </tr>\n                }\n                }\n                <!-- <tr\n                    *ngIf=\"getRowsForGroup(group.id).length === 0 && !group.isExpanded\"\n                    class=\"group-separator\"\n                    >\n                    <td [attr.colspan]=\"groupSeperatorColSpan()\" class=\"separator-cell\"></td>\n                  </tr> -->\n                <!-- Subtotal row at end of group (position: after) -->\n                @if(enableRowSubtotals() && subtotalPosition() === 'after' && hasSubtotalData(group)) {\n                <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n                }\n                <!-- Grand Total row at end of group (position: after) - only for last group -->\n                @if(enableGrandTotal() && grandTotalPosition() === 'after' && hasGrandTotalData() && i ===\n                groups().length - 1) {\n                <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n                }\n                }\n              </tbody>\n            </table>\n          </div>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n\n<!-- Pivot Table Header Template -->\n<ng-template #pivotTableHead>\n  <thead [class.eru-wrap-headers]=\"wrapHeaders()\">\n    @if (hasNestedHeaders()) {\n    <ng-container>\n      @for (headerRow of getHeaderRows(); track headerRow; let rowIndex = $index) {\n      <tr class=\"pivot-header pivot-header-container\" [class.pivot-header-level]=\"'level-' + rowIndex\">\n        @for (header of headerRow; track trackByHeaderFn($index, header); let colIndex = $index) {\n        <th [attr.colspan]=\"header.colspan\" [attr.rowspan]=\"header.rowspan\"\n          [resizeColumn]=\"isResizablePivotHeader(header)\"\n          [columnConfig]=\"getFieldForPivotHeader(header) || $any(header)\"\n          class=\"column-header pivot-column-header nested-header\"\n          [class.row-dimension-header]=\"isRowDimensionHeader(header)\"\n          [class.column-dimension-header]=\"!isRowDimensionHeader(header)\" [class.expanded]=\"header.isExpanded\"\n          [class.collapsed]=\"!header.isExpanded\" [class.sticky-column]=\"isStickyColumn(header.name, colIndex)\"\n          [class.design-clickable]=\"isDesignMode()\"\n          [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === designTargetFor($any(header))\"\n          [style.position]=\"isStickyColumn(header.name, colIndex) ? 'sticky' : 'static'\"\n          [style.left.px]=\"getStickyColumnLeft(header.name, colIndex)\"\n          [style.z-index]=\"isStickyColumn(header.name, colIndex) ? 100 : 1\"\n          [style.min-height.px]=\"headerRowHeight()\" style=\"height: auto; padding: 8px 6px;\">\n          <div class=\"header-content\">\n\n            <data-cell [fieldSize]=\"header.field_size\" [columnDatatype]=\"header.dataType\" [columnName]=\"header.name\"\n              [value]=\"header.label\" [column]=\"header\" [frozenGrandTotalCell]=\"true\"\n              [drillable]=\"header.enableDrilldown || false\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n              [id]=\"'pivot_' + $index + '_' + header.name\" [eruGridStore]=\"gridStore\" [row]=\"header\">\n            </data-cell>\n            @if(isDesignMode()) {\n            <mat-icon class=\"design-edit-icon\"\n              [title]=\"isAggregationHeader($any(header)) ? 'Edit aggregation' : 'Edit column'\"\n              (click)=\"onHeaderDesignClick($event, $any(header))\">tune</mat-icon>\n            }\n            <!-- <span class=\"header-label header-wrap-text\">{{header.label}}</span> -->\n            <!-- <button *ngIf=\"!isRowDimensionHeader(header)\"\n                  class=\"collapse-toggle-btn\"\n                  [title]=\"header.isExpanded ? 'Collapse group' : 'Expand group'\"\n                  (click)=\"toggleColumnGroup(header.groupKey)\"\n                  type=\"button\">\n                  <span class=\"collapse-icon\">+</span>\n                </button> -->\n          </div>\n        </th>\n        }\n      </tr>\n      }\n    </ng-container>\n    } @else {\n    <!-- Simple header fallback -->\n    <ng-container>\n      <tr class=\"pivot-header\" [class.freeze-header-enabled]=\"freezeHeader()\">\n        @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n        <th [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n          [resizeColumn]=\"gridStore.isFeatureEnabled('columnResizable')\" [columnConfig]=\"column\"\n          class=\"column-header pivot-column-header\" [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n          [class.design-clickable]=\"isDesignMode()\"\n          [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === designTargetFor(column)\"\n          [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n          [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n          [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 100 : 1\"\n          [style.min-height.px]=\"headerRowHeight()\" style=\"height: auto;padding: 8px 6px\">\n          <!-- Label and control laid out as a row: the label truncates, the\n               control keeps its place. Left as a bare text node the long\n               aggregation labels pushed the icon past the cell edge, where\n               `overflow: hidden` clipped it out of sight entirely. -->\n          <div class=\"pivot-header-content\">\n            <!-- Deliberately not `.column-label`: that class carries the\n                 wrap-headers rule, which broke these labels onto one word per\n                 line. This header truncates, as it did before. -->\n            <span class=\"pivot-header-label\">{{column.label}}</span>\n            @if(isDesignMode()) {\n            <mat-icon class=\"design-edit-icon\"\n              [title]=\"isAggregationHeader(column) ? 'Edit aggregation' : 'Edit column'\"\n              (click)=\"onHeaderDesignClick($event, column)\">tune</mat-icon>\n            }\n          </div>\n        </th>\n        }\n      </tr>\n    </ng-container>\n    }\n\n  </thead>\n</ng-template>\n\n<!-- Column Group Template for consistent column widths -->\n<ng-template #pivotColGroup>\n  <colgroup>\n    @for (column of getLeafColumns(); track trackByColumnFn($index, column)) {\n    <col\n      [style]=\"'width: ' + column.field_size + 'px !important; min-width: ' + column.field_size + 'px !important; max-width: ' + column.field_size + 'px !important; --col-width: ' + column.field_size + 'px'\">\n    }\n  </colgroup>\n</ng-template>\n\n<ng-template #pivotGrandTotal>\n  <tbody class=\"pivot-tbody\">\n    @for (pivotRow of gridStore.pivotGrandTotalData(); track trackByPivotRowFn($index, pivotRow); let i = $index) {\n    <tr class=\"pivot-row grand-total-row\"\n      [class.grand-total-bold]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'bold'\"\n      [class.grand-total-italic]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'italic'\"\n      [class.grand-total-highlighted]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'highlighted'\"\n      [style.height.px]=\"50\" [attr.data-pivot-row]=\"i\">\n      <!--   <td colspan=\"20\">{{pivotRow | json}}</td> -->\n      @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n      <td [attr.rowspan]=\"getEffectiveRowspan(i, column.name)\" [style.width.px]=\"column.field_size\"\n        [style.minWidth.px]=\"column.field_size\" class=\"pivot-cell\"\n        [class.row-dimension-cell]=\"isRowDimensionColumn(column.name)\"\n        [class.column-dimension-cell]=\"!isRowDimensionColumn(column.name)\"\n        [class.aggregated-value]=\"!isRowDimensionColumn(column.name) && column.datatype === 'number'\"\n        [class.rowspan-cell]=\"getEffectiveRowspan(i, column.name) || 1 > 1\"\n        [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n        [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n        [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n        [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 99 : 1\" [style.height.px]=\"50\" [attr.xx]=\"i\">\n        <div class=\"cell-content pivot-cell-content\">\n          <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n            [value]=\"getEffectiveCellValue(i,column.name, pivotRow)\" [column]=\"column\" [frozenGrandTotalCell]=\"true\"\n            [drillable]=\"column.enableDrilldown || false\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n            [id]=\"'pivot_' + i + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"pivotRow\">\n          </data-cell>\n        </div>\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</ng-template>\n\n<!-- \u2500\u2500\u2500 Action column cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     One template for both column positions. With no `config.actions` set it\n     falls back to the single more_horiz icon the column has always shown, so\n     grids that only listen to the store's actionClick signal keep working.\n     Context: { $implicit: Row, mode: 'table' | 'board', group?: RowGroup }\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #actionCell let-row let-mode=\"mode\" let-group=\"group\">\n  @if(!hasConfiguredActions()) {\n  <mat-icon (click)=\"onActionClick($event, row, undefined, mode || 'table', group)\">more_horiz</mat-icon>\n  } @else if(actionDisplayType() === 'kebab') {\n  @if(visibleActionsFor(row).length > 0) {\n  <mat-icon class=\"action-kebab\" [matMenuTriggerFor]=\"rowActionMenu\"\n    [matMenuTriggerData]=\"{ row: row, mode: mode || 'table', group: group }\"\n    (click)=\"$event.stopPropagation()\">more_vert</mat-icon>\n  }\n  } @else {\n  <div class=\"action-icons\">\n    @for(action of visibleActionsFor(row); track action.action_name) {\n    <mat-icon class=\"action-icon\" [fontSet]=\"actionIconFontSet()\" [matTooltip]=\"action.action_name\"\n      matTooltipPosition=\"above\"\n      (click)=\"onActionClick($event, row, action, mode || 'table', group)\">{{action.action_icon || 'play_arrow'}}</mat-icon>\n    }\n  </div>\n  }\n</ng-template>\n\n<!-- Kebab menu shared by every row; the row is passed through matMenuTriggerData. -->\n<mat-menu #rowActionMenu=\"matMenu\" class=\"eru-grid-action-menu\">\n  <ng-template matMenuContent let-row=\"row\" let-mode=\"mode\" let-group=\"group\">\n    @for(action of visibleActionsFor(row); track action.action_name) {\n    <button mat-menu-item (click)=\"onActionClick($event, row, action, mode || 'table', group)\">\n      <mat-icon>{{action.action_icon || 'play_arrow'}}</mat-icon>\n      <span>{{action.action_name}}</span>\n    </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Column Group Template for consistent column widths -->\n<ng-template #tableColGroup>\n  <colgroup>\n    @if(gridStore.configuration().config.allowSelection) {\n    <col style=\"width: 40px; min-width: 40px; max-width: 40px;\">\n    }\n    @if(shouldShowActionColumn('before')) {\n    <col\n      [style]=\"'width: ' + actionColumnWidth() + 'px !important; min-width: ' + actionColumnWidth() + 'px !important; max-width: ' + actionColumnWidth() + 'px !important;'\">\n    }\n    @if(hasHiddenColumns()) {\n    <col style=\"width: 40px !important; min-width: 40px !important; max-width: 40px !important;\">\n    }\n    @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n    <col\n      [style]=\"'width: ' + column.field_size + 'px !important; min-width: ' + column.field_size + 'px !important; max-width: ' + column.field_size + 'px !important; --col-width: ' + column.field_size + 'px'\">\n    }\n    @if(shouldShowActionColumn('after')) {\n    <col\n      [style]=\"'width: ' + actionColumnWidth() + 'px !important; min-width: ' + actionColumnWidth() + 'px !important; max-width: ' + actionColumnWidth() + 'px !important;'\">\n    }\n  </colgroup>\n</ng-template>\n\n\n<ng-template #tableHeader>\n\n  <thead [class.eru-wrap-headers]=\"wrapHeaders()\">\n    <!-- headerRowHeight rides on the row, not the cells: `thead.eru-wrap-headers\n         th { height: auto }` outranks any class-level height we could put on a\n         th, which is why a configured header height was ignored while data rows\n         (inline height on tr.row-item) honoured theirs. On a table row `height`\n         is a minimum, so a wrapped two-line header still grows past it. -->\n    <tr [style.height.px]=\"headerRowHeight()\" [style.minHeight.px]=\"headerRowHeight()\">\n      @if(gridStore.configuration().config.allowSelection) {\n      <th class=\"checkbox-column column-header table-column-header\">\n        <input type=\"checkbox\" [checked]=\"isAllGroupsSelected()\"\n          [indeterminate]=\"!isAllGroupsSelected() && gridStore.hasSelection()\" (change)=\"toggleAllGroups($event)\">\n      </th>\n      }\n      @if(shouldShowActionColumn('before')) {\n      <th class=\"action-column column-header table-column-header\" [style.width.px]=\"actionColumnWidth()\"\n        [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">Action</th>\n      }\n      @if(hasHiddenColumns()) {\n      <th class=\"row-expand-toggle column-header table-column-header\"></th>\n      }\n      @for (column of visibleColumns(); track trackByColumnFn(i, column); let i = $index) {\n      <th [style.width.px]=\"column.field_size\" [resizeColumn]=\"gridStore.isFeatureEnabled('columnResizable')\"\n        [columnConfig]=\"column\" [index]=\"i\"\n        [columnDraggable]=\"gridStore.isFeatureEnabled('columnReorderable') ? column.name : null\"\n        [style.minWidth.px]=\"column.field_size\" class=\"column-header table-column-header\"\n        [class.sortable-header]=\"isSortable()\"\n        [class.design-clickable]=\"isDesignMode()\"\n        [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === column.name\"\n        [class.sort-asc]=\"isSortable() && getSortDirection(column.name) === 'asc'\"\n        [class.sort-desc]=\"isSortable() && getSortDirection(column.name) === 'desc'\">\n        @if(gridStore.isFeatureEnabled('columnReorderable')) {\n        <div class=\"column-drag-handle\"></div>\n        }\n        <span class=\"column-label\" [title]=\"column.tool_tip || column.description || ''\">{{column.label}}</span>\n        @if(isDesignMode()) {\n        <mat-icon class=\"design-edit-icon\" title=\"Edit column\" (click)=\"onHeaderDesignClick($event, column)\">tune</mat-icon>\n        }\n        @if(isSortable()) {\n        <span class=\"sort-indicator\">\n          <span class=\"sort-triangles\">\n            <span class=\"sort-tri sort-tri-up\" [class.sort-tri-active]=\"getSortDirection(column.name) === 'asc'\"\n              (click)=\"onSortColumn($event, column, 'asc')\"></span>\n            <span class=\"sort-tri sort-tri-down\" [class.sort-tri-active]=\"getSortDirection(column.name) === 'desc'\"\n              (click)=\"onSortColumn($event, column, 'desc')\"></span>\n          </span>\n          @if(getSortPriority(column.name) !== null && gridStore.sortColumns().length > 1) {\n          <span class=\"sort-priority\">{{getSortPriority(column.name)}}</span>\n          }\n        </span>\n        }\n      </th>\n      }\n      @if(shouldShowActionColumn('after')) {\n      <th class=\"action-column column-header table-column-header\" [style.width.px]=\"actionColumnWidth()\"\n        [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">Action</th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<!-- Table Subtotal Row Template -->\n<ng-template #tableSubtotal let-group=\"group\">\n  <tr class=\"subtotal-row\" [class.subtotal-bold]=\"subTotalStyle() === 'bold'\"\n    [class.subtotal-italic]=\"subTotalStyle() === 'italic'\"\n    [class.subtotal-highlighted]=\"subTotalStyle() === 'highlighted'\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n    @if(gridStore.configuration().config.allowSelection) {\n    <td class=\"checkbox-column\"></td>\n    }\n    @if(shouldShowActionColumn('before')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n    @if(hasHiddenColumns()) {\n    <td class=\"row-expand-toggle\"></td>\n    }\n    @for(column of visibleColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n    <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"subtotal-cell\"\n      [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n      <div class=\"cell-content\">\n        @if(colIndex === 0 && getSubtotalValue(group, column.name) === null) {\n        <span class=\"subtotal-label\">{{subtotalLabel()}}</span>\n        } @else {\n        @if(getSubtotalValue(group, column.name) !== null) {\n        <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n          [value]=\"getSubtotalValue(group, column.name)\" [column]=\"column\" [mode]=\"mode()\" [isEditable]=\"false\"\n          [id]=\"'subtotal_' + group.id + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"group.subtotal\">\n        </data-cell>\n        }\n        }\n      </div>\n    </td>\n    }\n    @if(shouldShowActionColumn('after')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n  </tr>\n</ng-template>\n\n<!-- Table Grand Total Row Template -->\n<ng-template #tableGrandTotal>\n  <tr class=\"grand-total-row\" [class.grand-total-bold]=\"grandTotalStyle() === 'bold'\"\n    [class.grand-total-italic]=\"grandTotalStyle() === 'italic'\"\n    [class.grand-total-highlighted]=\"grandTotalStyle() === 'highlighted'\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n    @if(gridStore.configuration().config.allowSelection) {\n    <td class=\"checkbox-column\"></td>\n    }\n    @if(shouldShowActionColumn('before')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n    @if(hasHiddenColumns()) {\n    <td class=\"row-expand-toggle\"></td>\n    }\n    @for(column of visibleColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n    <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"grand-total-cell\"\n      [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n      <div class=\"cell-content\">\n        @if(colIndex === 0 && getGrandTotalValue(column.name) === null) {\n        <span class=\"grand-total-label\">Grand Total</span>\n        } @else {\n        @if(getGrandTotalValue(column.name) !== null) {\n        <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n          [value]=\"getGrandTotalValue(column.name)\" [column]=\"column\" [mode]=\"mode()\" [isEditable]=\"false\"\n          [id]=\"'grandtotal_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"gridStore.rowGrandTotal()\">\n        </data-cell>\n        }\n        }\n      </div>\n    </td>\n    }\n    @if(shouldShowActionColumn('after')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n  </tr>\n</ng-template>\n\n<!-- \u2500\u2500\u2500 Default board card template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Used when no boardCardTemplate is passed to <eru-grid>.\n     Context: { $implicit: Row, columns: Field[], group: RowGroup }\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #defaultBoardCard let-row let-columns=\"columns\" let-group=\"group\">\n  <mat-card class=\"board-card\">\n    <mat-card-content>\n      @for (column of columns; track column.name) {\n      @if ((row?.entity_data?.[column.name] ?? row?.[column.name]) !== undefined) {\n      <div class=\"board-card-field\">\n        <span class=\"board-field-label\">{{ column.label }}</span>\n        <data-cell\n          [fieldSize]=\"column.field_size\"\n          [columnDatatype]=\"column.datatype\"\n          [columnName]=\"column.name\"\n          [column]=\"column\"\n          [value]=\"row?.entity_data?.[column.name] ?? row?.[column.name]\"\n          [id]=\"row?.entity_id + '_' + column.name\"\n          [eruGridStore]=\"gridStore\"\n          [mode]=\"'board'\"\n          [row]=\"row\">\n        </data-cell>\n      </div>\n      }\n      }\n    </mat-card-content>\n    <mat-card-actions align=\"end\">\n      <button mat-icon-button (click)=\"onActionClick($event, row)\">\n        <mat-icon>more_horiz</mat-icon>\n      </button>\n    </mat-card-actions>\n  </mat-card>\n</ng-template>", styles: ["@charset \"UTF-8\";:root{--grid-primary: var(--mat-sys-primary, #6750a4);--grid-on-primary: var(--mat-sys-on-primary, #ffffff);--grid-primary-container: var(--mat-sys-primary-container, #eaddff);--grid-on-primary-container: var(--mat-sys-on-primary-container, #21005d);--grid-secondary: var(--mat-sys-secondary, #625b71);--grid-on-secondary: var(--mat-sys-on-secondary, #ffffff);--grid-secondary-container: var(--mat-sys-secondary-container, #e8def8);--grid-on-secondary-container: var(--mat-sys-on-secondary-container, #1d192b);--grid-tertiary: var(--mat-sys-tertiary, #7d5260);--grid-on-tertiary: var(--mat-sys-on-tertiary, #ffffff);--grid-tertiary-container: var(--mat-sys-tertiary-container, #ffd8e4);--grid-on-tertiary-container: var(--mat-sys-on-tertiary-container, #31111d);--grid-surface: var(--mat-sys-surface, #fef7ff);--grid-surface-variant: var(--mat-sys-surface-variant, #e7e0ec);--grid-surface-container: var(--mat-sys-surface-container, #f3edf7);--grid-surface-container-high: var(--mat-sys-surface-container-high, #ede7f0);--grid-on-surface: var(--mat-sys-on-surface, #1d1b20);--grid-on-surface-variant: var(--mat-sys-on-surface-variant, #49454f);--grid-outline: var(--mat-sys-outline, #79757f);--grid-outline-variant: var(--mat-sys-outline-variant, #cac4d0);--grid-error: var(--mat-sys-error, #ba1a1a);--grid-error-container: var(--mat-sys-error-container, #ffdad6);--grid-base-surface: var(--surface, #ffffff);--grid-base-on-surface: var(--on-surface, #000000);--grid-base-border: var(--border, #e5e7eb);--grid-primary-light: var(--grid-primary-container)}:host,eru-grid{display:block!important;width:100%;height:100%;flex:1 1 0%;max-height:var(--grid-height, none);min-height:var(--grid-min-height, 120px);font-family:var(--grid-font-family);--grid-font-family: \"Poppins\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--grid-font-size-body: 12px;--grid-font-size-caption: 12px !important;--grid-line-height-body: 1;--grid-aggregation-text-align: right;--grid-number-text-align: right;--grid-spacing-xxs: 2px;--grid-spacing-xs: 4px;--grid-spacing-sm: 8px;--grid-spacing-md: 16px;--grid-spacing-lg: 24px;--grid-border-radius: 4px;--grid-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);--grid-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15);--grid-row-hover: var(--grid-surface-variant);--grid-row-selected: var(--grid-surface-container-high);--grid-zebra-odd: transparent;--grid-zebra-even: transparent;--grid-focus-ring: var(--grid-primary);--grid-header-font-weight: 500;--grid-header-text-transform: none;--grid-header-letter-spacing: normal;--grid-header-font-size: var(--grid-font-size-caption);--grid-header-padding-x: 8px;--grid-header-padding-y: 12px;--grid-font-feature-numeric: normal;--grid-cell-padding-x: var(--grid-spacing-xs);--grid-cell-inset-x: 8px;--grid-cell-padding-y: var(--grid-spacing-xxs);--grid-tint-subtle: rgba(0, 0, 0, .025);--grid-tint-soft: rgba(0, 0, 0, .045);--grid-tint-strong: rgba(0, 0, 0, .08);--grid-radius-outer: 0;--grid-shadow-outer: none;--grid-divider-color: var(--grid-outline-variant);--grid-divider-width: 1px;--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface);--grid-pill-radius: 999px;--grid-pill-padding-y: 3px;--grid-pill-padding-x: 10px;--grid-pill-font-size: 11px;--grid-pill-font-weight: 500;--grid-priority-dot-size: 8px;--grid-avatar-size: 24px;--grid-avatar-font-size: 10px;--grid-avatar-font-weight: 600;border-radius:var(--grid-radius-outer);box-shadow:var(--grid-shadow-outer)}eru-grid[data-preset=default]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: uppercase;--grid-header-letter-spacing: .06em;--grid-header-font-size: 11px;--grid-header-padding-y: 12px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 14px;--grid-row-hover: var(--grid-tint-subtle);--grid-divider-color: var(--grid-tint-soft);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=modern]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: none;--grid-header-letter-spacing: normal;--grid-header-font-size: 13px;--grid-header-padding-y: 16px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 16px;--grid-cell-padding-x: 18px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-radius-outer: 12px;--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 4px;--grid-pill-padding-x: 12px}eru-grid[data-preset=compact]{--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface);--grid-header-font-weight: 600;--grid-header-text-transform: none;--grid-header-font-size: 11px;--grid-header-padding-y: 4px;--grid-header-padding-x: 8px;--grid-cell-padding-y: 3px;--grid-cell-padding-x: 8px;--grid-font-size-body: 11px;--grid-row-hover: var(--grid-tint-subtle);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 1px;--grid-pill-padding-x: 6px;--grid-pill-font-size: 10px}eru-grid[data-preset=bold]{--grid-header-bg: var(--grid-surface-container-high);--grid-header-color: var(--grid-on-surface);--grid-header-font-weight: 700;--grid-header-text-transform: none;--grid-header-font-size: 13px;--grid-header-padding-y: 14px;--grid-header-padding-x: 12px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 12px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-strong);--grid-divider-width: 1px;--grid-radius-outer: 2px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=financial]{--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: uppercase;--grid-header-letter-spacing: .08em;--grid-header-font-size: 11px;--grid-header-padding-y: 12px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 14px;--grid-zebra-odd: transparent;--grid-zebra-even: var(--grid-tint-subtle);--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=elevated]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 600;--grid-header-text-transform: none;--grid-header-font-size: 12px;--grid-header-padding-y: 16px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-radius-outer: 16px;--grid-shadow-outer: 0 1px 3px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .07);--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 4px;--grid-pill-padding-x: 12px;overflow:hidden}.group-container{padding-bottom:8px}.column-header.design-clickable .design-edit-icon{font-size:16px;width:16px;height:16px;margin-left:4px;opacity:.45;vertical-align:middle;cursor:pointer}.column-header.design-clickable:hover .design-edit-icon,.column-header.design-clickable .design-edit-icon:hover{opacity:1}.column-header.design-selected{background-color:var(--grid-primary-container, rgba(63, 81, 181, .12))}.pivot-column-header .pivot-header-content{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}.pivot-column-header .pivot-header-content .pivot-header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pivot-column-header .pivot-header-content .design-edit-icon,.pivot-column-header .header-content .design-edit-icon{flex:0 0 auto}.pivot-column-header .header-content data-cell,.pivot-column-header .header-content data-cell *{color:inherit!important}.incremental-row-container{width:100%;height:100%;min-height:var(--grid-min-height, 120px);max-height:none;overflow:auto;position:relative;background-color:var(--grid-surface);border-radius:var(--grid-border-radius);font-family:var(--grid-font-family)}.viewport{height:100%;min-height:300px;overflow-x:auto;overflow-y:auto;background-color:var(--grid-surface);scrollbar-gutter:stable}.viewport.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.groups-viewport{height:100%;min-height:300px}.groups-scroll-container{max-height:var(--grid-height, 600px);overflow-y:auto;overflow-x:hidden}.table-viewport{background-color:var(--grid-surface);height:var(--table-height, auto);min-height:var(--table-min-height, 100px);overflow-x:auto;overflow-y:auto}.pivot-viewport{min-height:var(--table-min-height, 300px);overflow-x:auto;overflow-y:auto;background-color:var(--grid-surface)}.pivot-viewport .cdk-virtual-scroll-content-wrapper{width:auto;height:auto}.table-wrapper{min-width:100%;overflow-x:visible}.incremental-row-container .eru-grid-table,.eru-grid-table{width:100%!important;border-collapse:separate;border-spacing:0;table-layout:fixed!important;background-color:var(--grid-surface);color:var(--grid-on-surface);font-family:var(--grid-font-family);font-size:var(--grid-font-size-body);line-height:var(--grid-line-height-body)}.eru-grid-table th,.eru-grid-table td{text-align:left;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--grid-on-surface);min-width:0;max-width:100%!important;box-sizing:border-box;position:relative}.eru-grid-table th{background-color:var(--grid-header-bg, var(--grid-surface-container))}thead.eru-wrap-headers th{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;height:auto}thead.eru-wrap-headers th .column-label,thead.eru-wrap-headers th .header-label{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word;overflow-wrap:anywhere}.eru-grid-table tbody td{background-color:transparent}.eru-grid-table thead{background-color:var(--grid-header-bg, var(--grid-surface-container));transform:translateZ(0);will-change:transform;backface-visibility:hidden}.eru-grid-table thead.freeze-header-enabled{position:sticky!important;top:0!important;z-index:100!important}.eru-grid-table thead th{background-color:var(--grid-header-bg, var(--grid-surface-container));color:var(--grid-header-color, var(--grid-on-surface));font-family:var(--grid-font-family);font-weight:var(--grid-header-font-weight);font-size:var(--grid-header-font-size)}.checkbox-column{width:50px;min-width:50px;max-width:50px;text-align:center!important;padding-left:0!important;padding-right:0!important;text-overflow:clip!important;background-color:var(--grid-surface-container)}.checkbox-column input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--grid-primary);border-radius:var(--grid-border-radius)}.checkbox-column input[type=checkbox]:focus{outline:2px solid var(--grid-primary);outline-offset:2px}.action-column{text-align:center!important;padding-left:0!important;padding-right:0!important;text-overflow:clip!important;background-color:var(--grid-surface-container)}.action-column mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--grid-outline);cursor:pointer}.action-column mat-icon:hover{color:var(--grid-primary)}.action-column .action-icons{display:flex;align-items:center;justify-content:center;gap:6px;overflow-x:auto;scrollbar-width:none}.action-column .action-icons::-webkit-scrollbar{display:none}.action-column .action-icon{flex:0 0 auto}.eru-grid-action-menu .mat-mdc-menu-item mat-icon{margin-right:8px;font-size:18px;width:18px;height:18px;line-height:18px;color:var(--grid-on-surface-variant)}.group-header{background-color:var(--grid-surface-container);color:var(--grid-on-surface);font-size:var(--grid-font-size-caption);font-weight:500;border-bottom:1px solid var(--grid-outline);cursor:pointer;transition:background-color .2s ease}.group-header:hover{background-color:var(--grid-surface-container-high)}.group-header .group-title{font-weight:600;color:var(--grid-primary)}.group-header .group-row-count{color:var(--grid-on-surface-variant);font-size:var(--grid-font-size-caption);margin-left:var(--grid-spacing-sm)}.row-item{background-color:var(--grid-surface);transition:background-color .15s ease}.row-item:nth-child(odd){background-color:var(--grid-zebra-odd, var(--grid-surface))}.row-item:nth-child(2n){background-color:var(--grid-zebra-even, var(--grid-surface))}.row-item:hover{background-color:var(--grid-row-hover)}.required-toggle-row{background-color:var(--grid-surface-container, #f3edf7);border-bottom:1px solid var(--grid-outline-variant, #cac4d0)}.required-toggle-row .required-toggle-cell{padding:4px 8px!important;text-align:center;vertical-align:middle;position:relative}.required-toggle-row .required-toggle-cell .required-label{position:absolute;top:2px;left:4px;font-size:10px;color:var(--grid-on-surface-variant, #49454f);font-weight:400;text-transform:lowercase}.required-toggle-row .required-toggle-cell mat-checkbox{display:flex;justify-content:center;align-items:center}.table-column-header{padding:0 var(--grid-header-padding-x);height:var(--grid-header-row-height, auto)}.column-header{font-weight:var(--grid-header-font-weight);text-transform:var(--grid-header-text-transform);letter-spacing:var(--grid-header-letter-spacing);text-align:center!important;font-size:var(--grid-header-font-size);position:relative;-webkit-user-select:none;user-select:none;--grid-header-affordance-space: 0px;--grid-column-resizer-width: 10px;--grid-header-sort-right: calc(var(--grid-column-resizer-width) + 2px);--grid-header-design-right: calc(var(--grid-column-resizer-width) + 2px);background-color:var(--grid-header-bg, var(--grid-surface-container));color:var(--grid-header-color, var(--grid-on-surface))}.column-header:hover{background-color:var(--grid-header-hover-bg, var(--grid-surface-container-high))}.column-drag-handle{position:absolute;left:0;top:0;bottom:0;width:12px;cursor:grab;opacity:0;transition:opacity .2s ease,background-color .2s ease;z-index:2;display:flex;align-items:center;justify-content:center;border-right:1px solid transparent}.column-drag-handle:after{content:\"\\22ee\\22ee\";font-size:14px;color:var(--grid-on-surface-variant);transform:rotate(90deg)}.column-drag-handle:hover{background-color:var(--grid-surface-container-high);border-right-color:var(--grid-outline)}.column-header:hover .column-drag-handle{opacity:1}.column-drag-handle:active{cursor:grabbing}.table-column-header.sortable-header{--grid-header-affordance-space: 20px}.table-column-header.design-clickable{--grid-header-affordance-space: 28px}.table-column-header.sortable-header.design-clickable{--grid-header-affordance-space: 40px;--grid-header-design-right: calc(var(--grid-column-resizer-width) + 13px)}.table-column-header .column-label{display:block;padding-right:var(--grid-header-affordance-space)}.table-column-header .sort-indicator,.table-column-header .design-edit-icon{position:absolute;top:50%;transform:translateY(-50%);margin-left:0}.table-column-header .sort-indicator{right:var(--grid-header-sort-right)}.table-column-header .design-edit-icon{right:var(--grid-header-design-right)}.sortable-header{cursor:pointer}.sortable-header .sort-indicator{display:inline-flex;align-items:center;gap:2px;cursor:pointer;opacity:0;transition:opacity .15s ease}.sortable-header .sort-indicator .sort-triangles{display:flex;flex-direction:column;align-items:center;gap:2px}.sortable-header .sort-indicator .sort-tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;cursor:pointer;transition:border-color .15s ease}.sortable-header .sort-indicator .sort-tri-up{border-bottom:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.sortable-header .sort-indicator .sort-tri-down{border-top:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.sortable-header .sort-indicator .sort-tri-active{opacity:1}.sortable-header .sort-indicator .sort-tri-active.sort-tri-up{border-bottom-color:var(--grid-primary, #6750a4)}.sortable-header .sort-indicator .sort-tri-active.sort-tri-down{border-top-color:var(--grid-primary, #6750a4)}.sortable-header .sort-indicator .sort-priority{font-size:9px;font-weight:600;color:var(--grid-primary, #6750a4);line-height:1;min-width:12px;text-align:center}.sortable-header:hover .sort-indicator,.sortable-header.sort-asc .sort-indicator,.sortable-header.sort-desc .sort-indicator{opacity:1}.sortable-header:hover .sort-indicator .sort-tri:not(.sort-tri-active){opacity:.6}.sort-asc,.sort-desc{background-color:var(--grid-surface-container-low, rgba(103, 80, 164, .04))}.dragging{opacity:1;background-color:var(--grid-surface-container);box-shadow:var(--grid-elevation-2)}.drag-over{background-color:var(--grid-surface-container);border-color:var(--grid-primary)}.data-cell{background-color:transparent;color:var(--grid-on-surface);font-family:var(--grid-font-family);font-size:var(--grid-font-size-body);font-feature-settings:var(--grid-font-feature-numeric);padding:0 var(--grid-cell-padding-x)}.cell-content{align-items:center}.cell-content .mdc-text-field{padding:0px var(--grid-spacing-xxs)!important}.cell-display-text{align-items:center;padding:0px var(--grid-spacing-xs)}.ghost-loading-row{background-color:transparent}.ghost-cell-container{padding:var(--grid-spacing-sm)}.ghost-cell{height:20px;width:100%;background-color:var(--grid-surface-container);animation:pulse 1.5s ease-in-out infinite;border-radius:var(--grid-border-radius)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.column-resizer{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background-color:transparent;transition:background-color .2s ease}.column-resizer:hover{background-color:var(--grid-primary)}.group-separator{height:var(--grid-spacing-sm);background-color:var(--grid-surface-variant)}.group-separator .separator-cell{background-color:var(--grid-surface-variant);border:none;height:var(--grid-spacing-sm)}.error-state{background-color:var(--grid-error-container);color:var(--grid-error);border-color:var(--grid-error)}.error-message{background-color:var(--grid-error);color:#fff;padding:var(--grid-spacing-sm);border-radius:var(--grid-border-radius);font-size:var(--grid-font-size-caption)}.incremental-row-container .eru-grid-table tbody,.incremental-row-container .eru-grid-table{position:relative}.incremental-row-container .eru-grid-table.show-column-lines{border-right:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important;border-top:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table.show-column-lines:not(.freeze-header){border-bottom:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table:not(.show-column-lines){border:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table thead:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:calc(var(--grid-divider-width, 1px) * 2);background-color:var(--grid-divider-color, var(--grid-outline, #e0e0e0));pointer-events:none;z-index:10}.incremental-row-container .eru-grid-table.show-column-lines thead th,.incremental-row-container .eru-grid-table.show-column-lines tbody td{border-left:var(--grid-divider-width, 1px) solid var(--grid-divider-color, var(--grid-outline, #e0e0e0))!important}.incremental-row-container .eru-grid-table.show-row-lines thead th,.incremental-row-container .eru-grid-table.show-row-lines tbody td{border-bottom:var(--grid-divider-width, 1px) solid var(--grid-divider-color, var(--grid-outline, #e0e0e0))!important}@media(max-width:768px){.incremental-row-container{height:600px}.eru-grid-table th,.eru-grid-table td{font-size:var(--grid-font-size-caption)}.checkbox-column{width:40px;min-width:40px;max-width:40px}}@media(prefers-contrast:high){.eru-grid-table th,.eru-grid-table td{border-width:2px}.row-item:hover{border-width:2px;border-color:var(--grid-primary)}}@media(prefers-reduced-motion:reduce){.row-item,.column-drag-handle,.ghost-cell{transition:none;animation:none}}.pivot-table .nested-header{text-align:center;font-weight:600;background:var(--grid-surface-container)}.pivot-table .nested-header.row-dimension-header{background:var(--grid-surface-container);font-weight:600}.pivot-table .pivot-header-leafcols{padding:0;margin:0;height:0}.pivot-table .pivot-header-level.level-0 .nested-header{font-size:14px;padding:12px 8px}.pivot-table .pivot-header-level.level-1 .nested-header{font-size:13px;padding:10px 6px}.pivot-table .pivot-header-level.level-2 .nested-header{font-size:12px;padding:8px 4px}.pivot-table .nested-header:hover{background:var(--grid-surface-variant);color:var(--grid-primary);transition:all .2s ease}.pivot-table .pivot-cell.aggregated-value{font-weight:500;font-family:Roboto Mono,monospace}.pivot-table .pivot-cell-content{display:flex;justify-content:center;align-items:center;min-height:38px}.pivot-table .pivot-repeated-value .cell-content,.pivot-table .pivot-repeated-value .pivot-cell-content{visibility:hidden}.pivot-table .pivot-group-start.row-dimension-cell{border-top:1px solid var(--grid-outline, #79757f)}.pivot-mode .incremental-row-container{display:flex;flex-direction:column;height:auto;max-height:85vh;overflow:auto}.pivot-mode .h-shell{position:relative;width:calc(100% - var(--scrollbar-width, 17px))!important;top:0;z-index:1;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .h-shell::-webkit-scrollbar{display:none}.pivot-mode .gt-shell{position:relative;bottom:50px;flex-shrink:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .gt-shell::-webkit-scrollbar{display:none}.pivot-mode .gt-shell table{border-bottom:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.pivot-mode .gt-shell.adjust-bottom-vs{bottom:66px!important}.pivot-mode .gt-shell.adjust-bottom:not(.adjust-bottom-vs){bottom:calc(66px - var(--scrollbar-width, 17px))!important}.pivot-mode .header-shell{flex-shrink:0;width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .header-shell::-webkit-scrollbar{display:none}.pivot-mode .header-shell.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.pivot-mode .header-shell .eru-grid-table{margin-bottom:0;width:100%;table-layout:fixed}.pivot-mode .header-shell .eru-grid-table thead{background:var(--grid-surface-container)}.pivot-mode .header-shell .eru-grid-table thead th{background:var(--grid-surface-container);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .header-shell .eru-grid-table thead th.sticky-column{position:sticky;background:var(--grid-surface-container);z-index:111}.pivot-mode .header-shell .eru-grid-table tbody td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-container{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.pivot-mode .pivot-table{width:auto!important;min-width:100%!important;table-layout:fixed!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex:none!important;flex-shrink:0!important;flex-grow:0!important}.pivot-mode .pivot-table td,.pivot-mode .pivot-table th{box-sizing:border-box!important;flex:none!important;flex-shrink:0!important;flex-grow:0!important;word-wrap:break-word!important;word-break:break-all!important}.pivot-mode .pivot-table{table-layout:fixed!important;width:100%!important}.pivot-mode .pivot-table *{max-width:var(--col-width)!important;box-sizing:border-box!important}.pivot-mode .pivot-table colgroup{width:100%!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex-basis:var(--col-width)!important;flex:0 0 var(--col-width)!important}.pivot-mode .pivot-table table{width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important}.pivot-mode .pivot-table[style*=--table-total-width]{width:var(--table-total-width)!important;min-width:var(--table-total-width)!important;max-width:var(--table-total-width)!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex:0 0 var(--col-width)!important;flex-basis:var(--col-width)!important;flex-grow:0!important;flex-shrink:0!important;overflow:hidden!important}.pivot-mode .pivot-table tbody td,.pivot-mode .pivot-table thead th{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.pivot-mode .pivot-table .cell-content,.pivot-mode .pivot-table data-cell{width:100%!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important}.pivot-mode .pivot-table table{width:var(--table-total-width)!important;min-width:var(--table-total-width)!important;max-width:var(--table-total-width)!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important;word-wrap:break-word!important;word-break:break-all!important}.pivot-mode .pivot-tbody tr.pivot-row{min-height:var(--grid-data-row-height, 50px)!important;height:var(--grid-data-row-height, 50px)!important}.pivot-mode .pivot-tbody tr.pivot-row:hover{background-color:var(--grid-surface-variant)}.pivot-mode .pivot-tbody tr.pivot-row:nth-child(2n){background-color:#00000005}.pivot-mode .pivot-tbody tr.pivot-row td{min-height:var(--grid-data-row-height, 50px)!important;height:var(--grid-data-row-height, 50px)!important;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-tbody tr.pivot-row td .cell-content{min-height:calc(var(--grid-data-row-height, 50px) - 2px);display:flex;align-items:center;justify-content:center}.pivot-mode .pivot-tbody tr.pivot-row td .cell-content data-cell{width:100%;min-height:calc(var(--grid-data-row-height, 50px) - 4px);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.pivot-mode .pivot-cell{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-cell.aggregated-value{font-weight:500;font-family:Roboto Mono,monospace}.pivot-mode .pivot-cell .cell-content{display:flex;justify-content:center;align-items:center;min-height:var(--grid-header-row-height, 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.pivot-mode .pivot-table .subtotal-row{background-color:var(--grid-surface-container)!important;font-weight:600}.pivot-mode .pivot-table .subtotal-row td{background-color:var(--grid-surface-container);color:var(--grid-on-surface-variant)}.pivot-mode .pivot-table .subtotal-row td:first-child{color:var(--grid-primary)}.pivot-mode .pivot-table .subtotal-row td.aggregated-value{font-weight:500;color:var(--grid-primary)}.pivot-mode .pivot-table .subtotal-row:hover{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .subtotal-row:hover td{background-color:var(--grid-surface-container-high)}.pivot-mode .pivot-table .subtotal-bold td{font-weight:600!important;font-style:normal!important}.pivot-mode .pivot-table .subtotal-bold td.aggregated-value{font-weight:600!important}.pivot-mode .pivot-table .subtotal-italic td{font-style:italic!important}.pivot-mode .pivot-table .subtotal-italic td:first-child{font-weight:600!important}.pivot-mode .pivot-table .subtotal-italic td.aggregated-value{font-style:italic!important;font-weight:500!important}.pivot-mode .pivot-table .subtotal-highlighted{background-color:var(--grid-surface-variant)!important}.pivot-mode .pivot-table .subtotal-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:700!important;font-style:normal!important;color:var(--grid-primary)!important}.pivot-mode .pivot-table .subtotal-highlighted td.aggregated-value{font-weight:500!important;color:var(--grid-primary)!important}.pivot-mode .pivot-table .subtotal-highlighted:hover,.pivot-mode .pivot-table .subtotal-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .grand-total-row{background-color:var(--grid-surface-container-high)!important;font-weight:700;font-size:var(--grid-font-size-body)}.pivot-mode .pivot-table .grand-total-row td{background-color:var(--grid-surface-container-high)!important;color:var(--grid-on-surface)}.pivot-mode .pivot-table .grand-total-row td:first-child{font-style:normal;font-weight:800;color:var(--grid-primary)}.pivot-mode .pivot-table .grand-total-row td.aggregated-value{font-weight:500;color:var(--grid-primary);font-family:Roboto Mono,monospace}.pivot-mode .pivot-table .grand-total-row:hover,.pivot-mode .pivot-table .grand-total-row:hover td{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .grand-total-bold td{font-weight:700!important;font-style:normal!important}.pivot-mode .pivot-table .grand-total-bold td.aggregated-value{font-weight:700!important}.pivot-mode .pivot-table .grand-total-italic td,.pivot-mode .pivot-table .grand-total-italic td.aggregated-value{font-style:italic!important;font-weight:500!important}.pivot-mode .pivot-table .grand-total-highlighted{background-color:var(--grid-primary)!important;box-shadow:var(--grid-elevation-2)!important}.pivot-mode .pivot-table .grand-total-highlighted td{background-color:var(--grid-primary)!important;color:var(--grid-on-primary)!important;font-weight:500!important;font-style:normal!important}.pivot-mode .pivot-table .grand-total-highlighted td.aggregated-value{color:var(--grid-on-primary)!important;font-weight:500!important}.pivot-mode .pivot-table .grand-total-highlighted:hover,.pivot-mode .pivot-table .grand-total-highlighted:hover td{background-color:var(--grid-primary)!important}.pivot-mode .pivot-table .collapsible-header{position:relative}.pivot-mode .pivot-table .collapsible-header .header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--grid-spacing-xs);padding:var(--grid-spacing-xs) var(--grid-spacing-sm)}.pivot-mode .pivot-table .collapsible-header .header-label{flex:1;font-weight:600}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn{background:none;border:none;cursor:pointer;padding:var(--grid-spacing-xxs);margin:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--grid-border-radius);color:var(--grid-on-surface-variant);transition:all .2s ease;font-size:12px;font-weight:600}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn:hover{background-color:var(--grid-surface-container);color:var(--grid-primary);transform:scale(1.1)}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn:focus{outline:2px solid var(--grid-primary);outline-offset:1px}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn .collapse-icon{display:block;line-height:1;font-family:monospace;font-size:14px}.pivot-mode .pivot-table .collapsible-header.expanded .collapse-toggle-btn .collapse-icon{color:var(--grid-primary)}.pivot-mode .pivot-table .collapsible-header.collapsed{background-color:var(--grid-surface-variant)}.pivot-mode .pivot-table .collapsible-header.collapsed .header-label{font-style:italic;color:var(--grid-on-surface-variant)}.pivot-mode .pivot-table .collapsible-header.collapsed .collapse-toggle-btn .collapse-icon{color:var(--grid-outline)}.pivot-mode .pivot-table .collapsible-header:hover{background-color:var(--grid-surface-container)}.pivot-mode .pivot-table .collapsible-header:hover .header-label{color:var(--grid-on-surface)}.pivot-mode .pivot-table .pivot-single-table{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;min-height:var(--table-min-height)!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container{flex-shrink:0;background:var(--grid-surface)!important;overflow-x:auto;overflow-y:hidden;min-height:100px!important;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table{width:auto;min-width:100%;height:auto!important;min-height:100px!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table th{background:var(--grid-surface-container)!important;padding:8px 6px!important;white-space:nowrap;min-width:50px;min-height:40px!important;height:auto!important;position:relative;visibility:visible!important;color:var(--grid-on-surface)!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table th.sticky-column{position:sticky!important;background:var(--grid-surface-container)!important;border-right:2px solid var(--grid-primary)!important;box-shadow:2px 0 4px #0000001a;z-index:101!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container{flex:1;overflow:auto;min-height:300px!important;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-viewport{height:100%!important;width:100%!important;overflow-x:auto!important;overflow-y:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table{width:auto;min-width:100%;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table td,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table td{padding:8px 6px!important;white-space:nowrap;min-width:50px;min-height:32px!important;height:auto!important;background:var(--grid-surface)!important;color:var(--grid-on-surface)!important;visibility:visible!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table td.sticky-column,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table td.sticky-column{position:sticky!important;background:var(--grid-surface-container)!important;border-right:2px solid var(--grid-primary)!important;box-shadow:2px 0 4px #0000001a;z-index:100!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table tbody tr,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table tbody tr{height:auto!important;min-height:50px!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table tbody tr.pivot-row,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table tbody tr.pivot-row{visibility:visible!important;display:table-row!important}.pivot-mode .pivot-table .collapsed-column-group{background-color:var(--grid-surface-container);border-left:3px solid var(--grid-primary)}.pivot-mode .pivot-table .collapsed-column-group:hover{background-color:var(--grid-surface-container-high)}.pivot-row.subtotal-row{background-color:var(--grid-surface-variant);font-weight:500}.pivot-row.subtotal-row.subtotal-bold{font-weight:500}.pivot-row.subtotal-row.subtotal-italic{font-style:italic}.pivot-row.subtotal-row.subtotal-highlighted{background-color:var(--grid-primary);color:var(--grid-on-primary)}.pivot-row.grand-total-row{background-color:var(--grid-surface-container);font-weight:600}.pivot-row.grand-total-row.grand-total-bold{font-weight:800}.pivot-row.grand-total-row.grand-total-italic{font-style:italic}.pivot-row.grand-total-row.grand-total-highlighted{background-color:var(--grid-primary);color:var(--grid-on-primary)}.pivot-row.first-visible-row{background-color:#6750a41a!important;position:relative}.pivot-row.first-visible-row:before{content:\"\\1f441\\fe0f  First Visible\";position:absolute;top:-20px;left:0;background:var(--grid-primary);color:var(--grid-on-primary);padding:2px 6px;font-size:10px;border-radius:2px;z-index:1000}.header-wrap-text{white-space:pre-wrap;word-break:auto-phrase}.group-header-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding-right:12px}.custom-collapse-header{background-color:var(--grid-surface-variant);padding:8px 20px;border-top-left-radius:12px;border-top-right-radius:12px;cursor:pointer;display:flex;width:fit-content;align-items:center;-webkit-user-select:none;user-select:none;min-width:200px;margin-bottom:10px;position:sticky;left:1px;z-index:116}.custom-collapse-header .collapse-arrow{display:inline-block;margin-right:8px;font-size:12px;color:var(--grid-on-surface-variant);transition:transform .2s ease;transform:rotate(0)}.custom-collapse-header .collapse-arrow.rotate-arrow{transform:rotate(270deg)}.custom-collapse-header .f-12{font-size:12px;color:var(--grid-on-surface)}.custom-collapse-header .group-sort-indicator{display:inline-flex;align-items:center;margin-left:8px}.custom-collapse-header .group-sort-indicator .sort-triangles{display:flex;flex-direction:column;align-items:center;gap:2px}.custom-collapse-header .group-sort-indicator .sort-tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;cursor:pointer;transition:border-color .15s ease}.custom-collapse-header .group-sort-indicator .sort-tri-up{border-bottom:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.custom-collapse-header .group-sort-indicator .sort-tri-down{border-top:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.custom-collapse-header .group-sort-indicator .sort-tri-active{opacity:1}.custom-collapse-header .group-sort-indicator .sort-tri-active.sort-tri-up{border-bottom-color:var(--grid-primary, #6750a4)}.custom-collapse-header .group-sort-indicator .sort-tri-active.sort-tri-down{border-top-color:var(--grid-primary, #6750a4)}.excel-download-icon{cursor:pointer}.excel-download-icon:hover{opacity:.75}.excel-download-bar{display:flex;justify-content:flex-end;padding:4px 12px;flex-shrink:0}.table-mode .header-shell{flex-shrink:0;width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.table-mode .header-shell::-webkit-scrollbar{display:none}.table-mode .header-shell.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.table-mode .subtotal-row{background-color:var(--grid-surface-container)!important;font-weight:600}.table-mode .subtotal-row td{background-color:var(--grid-surface-container);color:var(--grid-on-surface-variant)}.table-mode .subtotal-row td:first-child{color:var(--grid-primary)}.table-mode .subtotal-row td.subtotal-cell{font-weight:500}.table-mode .subtotal-row td.subtotal-cell .subtotal-label{font-weight:600;color:var(--grid-primary);padding-left:var(--grid-cell-padding-x)}.table-mode .subtotal-row:hover{background-color:var(--grid-surface-container-high)!important}.table-mode .subtotal-row:hover td{background-color:var(--grid-surface-container-high)}.table-mode .subtotal-row.subtotal-bold td{font-weight:600!important;font-style:normal!important}.table-mode .subtotal-row.subtotal-italic td{font-style:italic!important}.table-mode .subtotal-row.subtotal-italic td:first-child{font-weight:600!important}.table-mode .subtotal-row.subtotal-highlighted{background-color:var(--grid-surface-variant)!important}.table-mode .subtotal-row.subtotal-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:700!important;font-style:normal!important;color:var(--grid-primary)!important}.table-mode .subtotal-row.subtotal-highlighted:hover,.table-mode .subtotal-row.subtotal-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.table-mode .grand-total-row{background-color:var(--grid-surface-container-high)!important;font-weight:700}.table-mode .grand-total-row td{background-color:var(--grid-surface-container-high);color:var(--grid-on-surface)}.table-mode .grand-total-row td:first-child{color:var(--grid-primary)}.table-mode .grand-total-row td.grand-total-cell{font-weight:600}.table-mode .grand-total-row td.grand-total-cell .grand-total-label{font-weight:700;color:var(--grid-primary);padding-left:var(--grid-cell-padding-x)}.table-mode .grand-total-row:hover{background-color:var(--grid-surface-container-high)!important}.table-mode .grand-total-row:hover td{background-color:var(--grid-surface-container-high)}.table-mode .grand-total-row.grand-total-bold td{font-weight:700!important;font-style:normal!important}.table-mode .grand-total-row.grand-total-italic td{font-style:italic!important}.table-mode .grand-total-row.grand-total-italic td:first-child{font-weight:700!important}.table-mode .grand-total-row.grand-total-highlighted{background-color:var(--grid-surface-variant)!important}.table-mode .grand-total-row.grand-total-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:800!important;font-style:normal!important;color:var(--grid-primary)!important}.table-mode .grand-total-row.grand-total-highlighted:hover,.table-mode .grand-total-row.grand-total-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.table-mode .subtotal-row-shell{width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.table-mode .subtotal-row-shell::-webkit-scrollbar{display:none}.board-mode-host{overflow:hidden;display:flex;flex-direction:column;max-height:var(--grid-height, 600px)}.board-mode-host .board-view-container{display:flex;flex-direction:column;flex:1;min-height:0}.board-mode-host .board-sort-bar{display:flex;align-items:center;gap:6px;padding:8px 16px;flex-shrink:0;border-bottom:1px solid var(--grid-outline-variant, #cac4d0);background:var(--grid-surface, #fffbfe);overflow-x:auto}.board-mode-host .board-sort-bar .board-sort-label{font-size:12px;font-weight:500;color:var(--grid-on-surface-variant, #49454f);white-space:nowrap}.board-mode-host .board-sort-bar .board-sort-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;border:1px solid var(--grid-outline-variant, #cac4d0);background:var(--grid-surface, #fffbfe);color:var(--grid-on-surface, #1d1b20);font-size:12px;white-space:nowrap}.board-mode-host .board-sort-bar .board-sort-chip-active{background:var(--grid-surface-container);border-color:var(--grid-outline, #79757f);color:var(--grid-on-surface, #1d1b20)}.board-mode-host .board-sort-bar .board-sort-chip-label{pointer-events:none}.board-mode-host .board-sort-bar .board-sort-chip-arrow{font-size:10px;line-height:1;cursor:pointer;padding:2px;border-radius:4px}.board-mode-host .board-sort-bar .board-sort-chip-arrow:hover{background:#00000014}.board-mode-host .board-sort-bar .board-sort-chip-priority{font-size:9px;font-weight:700;background:var(--grid-primary, #6750a4);color:var(--grid-on-primary, #ffffff);border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}.board-mode-host .board-sort-bar .board-sort-chip-remove{font-size:10px;cursor:pointer;padding:2px;border-radius:4px;color:var(--grid-on-surface-variant, #49454f)}.board-mode-host .board-sort-bar .board-sort-chip-remove:hover{background:#00000014;color:var(--grid-error, #b3261e)}.board-mode-host .board-sort-bar .board-sort-add-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;border:1px dashed var(--grid-outline-variant, #cac4d0);background:transparent;color:var(--grid-on-surface-variant, #49454f);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease}.board-mode-host .board-sort-bar .board-sort-add-btn .board-sort-add-icon{font-size:14px;width:14px;height:14px}.board-mode-host .board-sort-bar .board-sort-add-btn:hover{background:var(--grid-surface-container-low, #f7f2fa);border-color:var(--grid-primary, #6750a4);color:var(--grid-primary, #6750a4)}.board-mode-host .board-sort-bar .board-sort-clear{display:inline-flex;align-items:center;padding:4px 10px;border-radius:16px;border:1px solid var(--grid-error, #b3261e);background:transparent;color:var(--grid-error, #b3261e);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s ease}.board-mode-host .board-sort-bar .board-sort-clear:hover{background:#b3261e14}.board-mode-host .board-columns-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--board-col-min-width, 300px),var(--board-col-max-width, 1fr)));grid-auto-rows:auto;align-items:start;gap:16px;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;align-content:start;justify-content:start}.board-mode-host .board-columns-wrapper.board-columns-nowrap{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:auto;grid-auto-rows:auto;grid-auto-columns:minmax(var(--board-col-min-width, 300px),var(--board-col-max-width, 1fr));overflow-x:auto;overflow-y:hidden}.board-mode-host .board-column{max-height:var(--board-column-height, 420px);min-width:0;display:flex;flex-direction:column;background:var(--grid-surface-container, #f3edf7);border-radius:12px;min-height:0;overflow:hidden}.board-mode-host .board-column.board-column-accented{border-top:3px solid var(--board-group-color, transparent)}.board-mode-host .board-column .column-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;font-weight:600;flex-shrink:0;background-color:transparent}.board-mode-host .board-column .column-header:hover{background-color:transparent}.board-mode-host .board-column .column-header .column-header-title{font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.2;color:var(--grid-on-surface, #1d1b20);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-mode-host .board-column .column-header .column-header-title-cell{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:clip}.board-mode-host .board-column .column-header .column-header-title-cell data-cell,.board-mode-host .board-column .column-header .column-header-title-cell .data-cell-component,.board-mode-host .board-column .column-header .column-header-title-cell .container{padding:0!important;margin:0!important;border:none!important;background:transparent!important;min-height:0!important;height:auto!important;width:auto!important;max-width:100%!important;overflow:visible!important}.board-mode-host .board-column .column-header .column-header-title-cell .status-display,.board-mode-host .board-column .column-header .column-header-title-cell .status-display-content,.board-mode-host .board-column .column-header .column-header-title-cell .status-text,.board-mode-host .board-column .column-header .column-header-title-cell .tag-display,.board-mode-host .board-column .column-header .column-header-title-cell .tag-text{max-width:none!important;overflow:visible!important;text-overflow:clip!important}.board-mode-host .board-column .column-header .column-header-count{font-size:10px;font-weight:600;color:var(--eru-board-count-color, var(--grid-on-surface-variant, #49454f));background:var(--eru-board-count-bg, var(--grid-surface-variant, #e7e0ec));border-radius:10px;padding:3px 10px;white-space:nowrap;flex-shrink:0}.board-mode-host .board-column-body{flex:0 1 auto;min-height:0}.board-mode-host .board-card-container{box-sizing:border-box;overflow:hidden;border-radius:8px;transition:background-color .15s ease,box-shadow .15s ease}.board-mode-host .board-card-container.show-row-lines{box-shadow:inset 0 0 0 var(--grid-divider-width, 1px) var(--grid-divider-color, var(--grid-outline, #e0e0e0))}.board-mode-host .board-card-container:hover{background-color:var(--eru-board-card-hover-bg, color-mix(in srgb, var(--mat-sys-primary, #1976d2) 8%, transparent))}.board-mode-host .board-card-container.selected{background-color:var(--eru-board-card-selected-bg, color-mix(in srgb, var(--mat-sys-primary, #1976d2) 14%, transparent));box-shadow:inset 0 0 0 2px var(--eru-board-card-selected-outline, var(--mat-sys-primary, #1976d2))}.board-mode-host .board-card{height:calc(100% - 8px);overflow:hidden;cursor:pointer}.board-mode-host .board-card mat-card-title{font-size:13px}.board-mode-host .board-card mat-card-subtitle{font-size:12px}.board-mode-host .board-card-field{display:flex;flex-direction:column;margin-bottom:4px}.board-mode-host .board-field-label{font-size:10px;color:var(--grid-on-surface-variant, #49454f);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.board-mode-host .board-ghost-card{margin:8px;padding:16px;background:var(--grid-surface, #fef7ff);border-radius:8px;animation:board-pulse 1.5s ease-in-out infinite}.board-mode-host .board-ghost-line{height:12px;background:var(--grid-surface-variant, #e7e0ec);border-radius:4px;margin-bottom:8px}.board-mode-host .board-ghost-line--short{width:60%}@keyframes board-pulse{0%,to{opacity:1}50%{opacity:.5}}th.row-expand-toggle,td.row-expand-toggle{width:40px!important;min-width:40px!important;max-width:40px!important;padding:0!important;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box}.row-expand-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:var(--grid-on-surface-variant);transition:transform .15s ease-in-out}.row-expand-icon.expanded{transform:rotate(90deg)}.row-detail{background:var(--grid-surface-container)}.row-detail .row-detail-cell{padding:var(--grid-spacing-sm) var(--grid-spacing-md);border-bottom:1px solid var(--grid-outline-variant)}.row-detail .row-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--grid-spacing-sm) var(--grid-spacing-md)}.row-detail .row-detail-field{display:flex;flex-direction:column;gap:var(--grid-spacing-xxs);min-width:0}.row-detail .row-detail-label{font-size:var(--grid-font-size-caption);color:var(--grid-on-surface-variant);font-weight:500}.row-detail .row-detail-value{min-width:0}.row-detail .row-detail-value data-cell{display:block;width:100%}.selection-banner{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;background:#eef4ff;border-bottom:1px solid #c7d8f5;color:#1a3a6b}.selection-banner-action{background:none;border:none;padding:0;font:inherit;color:#1558d6;font-weight:600;cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: DataCellComponent, selector: "data-cell", inputs: ["eruGridStore", "fieldSize", "columnDatatype", "columnName", "column", "value", "id", "frozenGrandTotalCell", "td", "drillable", "mode", "isEditable", "row", "personCardTemplate", "cellTemplate"], outputs: ["tdChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "index", "columnConfig", "gridConfig"] }, { kind: "directive", type: ColumnDragDirective, selector: "[columnDraggable]", inputs: ["columnDraggable"] }, { kind: "component", type: ColumnDesignPanelComponent, selector: "eru-column-design-panel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EruGridComponent, decorators: [{
             type: Component,
@@ -16311,7 +16891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         ResizeColumnDirective,
                         ColumnDragDirective,
                         ColumnDesignPanelComponent
-                    ], template: "<!-- <div style=\"background: #f0f0f0; font-size: 12px; border-bottom: 1px solid #ccc;\">\ncurrentPivotScrollIndex {{currentPivotScrollIndex()}} |\nfirstDataRowIndex {{firstDataRowIndex()}} |\nfirstTr {{firstTr}} |\nmaxDepth {{maxDepth()}}\n</div> -->\n<ng-template #excelDownloadIcon>\n  <svg class=\"excel-download-icon\" title=\"Download Excel\" (click)=\"onExcelDownloadClick($event)\"\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"24px\" height=\"24px\">\n    <path fill=\"#169154\" d=\"M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z\" />\n    <path fill=\"#18482a\" d=\"M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z\" />\n    <path fill=\"#0c8045\" d=\"M14 15.003H29V24.005000000000003H14z\" />\n    <path fill=\"#17472a\" d=\"M14 24.005H29V33.055H14z\" />\n    <g>\n      <path fill=\"#29c27f\" d=\"M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z\" />\n      <path fill=\"#27663f\" d=\"M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z\" />\n      <path fill=\"#19ac65\" d=\"M29 15.003H44V24.005000000000003H29z\" />\n      <path fill=\"#129652\" d=\"M29 24.005H44V33.055H29z\" />\n    </g>\n    <path fill=\"#0c7238\"\n      d=\"M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z\" />\n    <path fill=\"#fff\"\n      d=\"M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z\" />\n  </svg>\n</ng-template>\n\n<div class=\"incremental-row-container eru-grid\" #rowContainer [class.pivot-mode]=\"gridStore.isPivotMode()\"\n  [class.table-mode]=\"!gridStore.isPivotMode() && !isBoardMode()\" [class.board-mode-host]=\"isBoardMode()\">\n  <eru-column-design-panel></eru-column-design-panel>\n  <!-- Pivot Mode Template -->\n  @if (gridStore.isPivotMode()) {\n  <ng-container>\n    <div class=\"pivot-container\" style=\"display: flex; flex-direction: column; height: 100%;\"\n      [style]=\"'--table-min-height: ' + getInitialMinHeightPx() + 'px; --table-total-width: ' + getInitialTotalWidth() + 'px'\">\n      @if(showExcelDownload()) {\n      <div class=\"excel-download-bar\">\n        <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n      </div>\n      }\n      <!-- Debug info for first visible row -->\n\n\n      <div class=\"pivot-single-table\"\n        style=\"height: 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column;\">\n        @if (freezeHeader()) {\n        <div #headerScroller class=\"header-shell\">\n          <table class=\"eru-grid-table pivot-table\"\n            [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <!-- Column Groups for consistent width -->\n            <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n            <ng-container *ngTemplateOutlet=\"pivotTableHead\"></ng-container>\n            @if(grandTotalPosition() === 'before' && freezeGrandTotal()) {\n            <ng-container *ngTemplateOutlet=\"pivotGrandTotal\"></ng-container>\n            }\n          </table>\n        </div>\n        }\n        <!-- Virtual Scrolled Table Body -->\n        <div>\n          <cdk-virtual-scroll-viewport #vp [itemSize]=\"dataRowHeight()\" class=\"viewport pivot-viewport\"\n            [class.apply-cdk-width]=\"applyCdkWidth()\" (scrolledIndexChange)=\"onPivotScroll($event)\"\n            (scroll)=\"onBodyScroll($event)\" style=\"overflow: auto;\">\n            <table class=\"eru-grid-table pivot-table\"\n              [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n              [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n              <!-- Column Groups for consistent width -->\n              <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n              @if (!freezeHeader()) {\n              <ng-container *ngTemplateOutlet=\"pivotTableHead\"></ng-container>\n              }\n              <!-- Table Body with Virtual Scrolling -->\n              <tbody class=\"pivot-tbody\">\n\n                <tr *cdkVirtualFor=\"let pivotRow of gridStore.pivotDisplayData(); \n                           trackBy: trackByPivotRowFn; \n                           let i = index\" class=\"pivot-row\" [class.subtotal-row]=\"pivotRow._isSubtotal\"\n                  [class.grand-total-row]=\"pivotRow._isGrandTotal\"\n                  [class.subtotal-bold]=\"pivotRow._isSubtotal && subTotalStyle() === 'bold'\"\n                  [class.subtotal-italic]=\"pivotRow._isSubtotal && subTotalStyle() === 'italic'\"\n                  [class.subtotal-highlighted]=\"pivotRow._isSubtotal && subTotalStyle() === 'highlighted'\"\n                  [class.grand-total-bold]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'bold'\"\n                  [class.grand-total-italic]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'italic'\"\n                  [class.grand-total-highlighted]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'highlighted'\"\n                  [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\" [style.cursor]=\"cursorOnHover() || null\" [attr.data-pivot-row]=\"i\">\n                  @if ((!pivotRow._isGrandTotal && freezeGrandTotal() ) || (!freezeGrandTotal() )) {\n                  @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n                  <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"pivot-cell\"\n                    [class.row-dimension-cell]=\"isRowDimensionColumn(column.name)\"\n                    [class.column-dimension-cell]=\"!isRowDimensionColumn(column.name)\"\n                    [class.aggregated-value]=\"!isRowDimensionColumn(column.name) && column.datatype === 'number'\"\n                    [class.pivot-repeated-value]=\"isRepeatedDimensionValue(i, column.name)\"\n                    [class.pivot-group-start]=\"isPivotGroupStart(i, column.name)\"\n                    [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n                    [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n                    [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n                    [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 99 : 1\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n                    <div class=\"cell-content pivot-cell-content\">\n                      <data-cell [personCardTemplate]=\"personCardTemplate\" [class.aggregation]=\"!!column.aggregationFunction\" [fieldSize]=\"column.field_size\"\n                        [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\" [value]=\"pivotRow[column.name]\"\n                        [column]=\"column\" [drillable]=\"column.enableDrilldown || false\" [mode]=\"mode()\"\n                        [isEditable]=\"isEditable()\" [id]=\"'pivot_' + i + '_' + column.name\" [eruGridStore]=\"gridStore\"\n                        [row]=\"pivotRow\">\n                      </data-cell>\n                    </div>\n                  </td>\n                  }\n                  } @else {\n                  <td [style.height.px]=\"dataRowHeight()\" [attr.colspan]=\"getLeafColumns().length\"> </td>\n                  }\n                </tr>\n              </tbody>\n            </table>\n          </cdk-virtual-scroll-viewport>\n\n        </div>\n        @if (freezeGrandTotal() && grandTotalPosition() === 'after') {\n        <div #gtScroller class=\"header-shell gt-shell\" [class.adjust-bottom]=\"!applyCdkWidth()\"\n          [class.adjust-bottom-vs]=\"adjustScrollWidth()\">\n          <table class=\"eru-grid-table pivot-table\"\n            [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n            <ng-container *ngTemplateOutlet=\"pivotGrandTotal\"></ng-container>\n\n          </table>\n        </div>\n        }\n\n\n      </div>\n    </div>\n  </ng-container>\n  } @else if (isBoardMode()) {\n  <!-- Board Mode Template -->\n  <div class=\"board-view-container\">\n    @if(showExcelDownload()) {\n    <div class=\"excel-download-bar\">\n      <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n    </div>\n    }\n    @if(showSortBar()) {\n    <div class=\"board-sort-bar\">\n      <span class=\"board-sort-label\">Sort by:</span>\n      @for (entry of gridStore.sortColumns(); track getFieldName(entry)) {\n      <span class=\"board-sort-chip board-sort-chip-active\">\n        <span class=\"board-sort-chip-label\">{{getColumnLabel(entry)}}</span>\n        <span class=\"board-sort-chip-arrow\" (click)=\"onBoardSortChipToggle($event, entry)\">\n          @if(!entry.startsWith('-')) { \u25B2 } @else { \u25BC }\n        </span>\n        @if(gridStore.sortColumns().length > 1) {\n        <span class=\"board-sort-chip-priority\">{{getSortPriority(getFieldName(entry))}}</span>\n        }\n        <span class=\"board-sort-chip-remove\" (click)=\"onBoardSortChipRemove($event, entry)\">\u2715</span>\n      </span>\n      }\n      <button class=\"board-sort-add-btn\" [matMenuTriggerFor]=\"sortFieldMenu\">\n        <mat-icon class=\"board-sort-add-icon\">add</mat-icon> Add field\n      </button>\n      <mat-menu #sortFieldMenu=\"matMenu\" class=\"board-sort-menu\">\n        @for (column of columns(); track column.name) {\n        <button mat-menu-item (click)=\"onBoardSortFieldSelect(column)\"\n          [disabled]=\"getSortDirection(column.name) !== null\">\n          @if(getSortDirection(column.name) !== null) {\n          <mat-icon>check</mat-icon>\n          } @else {\n          <mat-icon></mat-icon>\n          }\n          {{column.label}}\n        </button>\n        }\n      </mat-menu>\n      @if(gridStore.sortColumns().length > 0) {\n      <button class=\"board-sort-clear\" (click)=\"onBoardSortClear()\">\u2715 Clear</button>\n      }\n    </div>\n    }\n    <div class=\"board-columns-wrapper\" [class.board-columns-nowrap]=\"!boardWrapColumns()\">\n      @for (group of groups(); track group.id) {\n      <div class=\"board-column\" [class.board-column-accented]=\"!!boardGroupColor(group)\"\n        [style.--board-group-color]=\"boardGroupColor(group)\">\n        @if (showBoardColumnHeader()) {\n        <div class=\"column-header\">\n          <!-- Render the group value through the same read-only cell renderer a\n               data cell uses, so the grouped field's datatype formats itself\n               (status/tag pills, dates, numbers) instead of printing raw text. -->\n          @if (groupByColumn(); as gcol) {\n            <span class=\"column-header-title column-header-title-cell\">\n              <data-cell\n                [eruGridStore]=\"gridStore\"\n                [column]=\"gcol\"\n                [columnDatatype]=\"gcol.datatype\"\n                [columnName]=\"gcol.name\"\n                [value]=\"group.title\"\n                [id]=\"'board-group-' + group.id\"\n                [fieldSize]=\"0\"\n                [isEditable]=\"false\"\n                [mode]=\"'board-group-header'\">\n              </data-cell>\n            </span>\n          } @else {\n            <span class=\"column-header-title\">{{ group.title }}</span>\n          }\n          <span class=\"column-header-count\">{{ group.currentLoadedRows || 0 }} of {{ group.totalRowCount || 0 }}</span>\n        </div>\n        }\n        <cdk-virtual-scroll-viewport [attr.data-group-id]=\"group.id\" [itemSize]=\"boardCardSlot\" class=\"board-column-body\"\n          [style.height.px]=\"boardColumnBodyHeight(group)\"\n          (scrolledIndexChange)=\"onBoardScrolledIndexChange($event, group)\">\n          <div\n            *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id)(); templateCacheSize: 0\"\n            class=\"board-card-container\"\n            [class.selected]=\"isBoardCardActive(row)\"\n            [class.show-row-lines]=\"showRowLines()\"\n            [style.height.px]=\"boardCardOuterHeight\"\n            [style.padding.px]=\"boardCardPadding\"\n            [style.marginBottom.px]=\"boardCardGap\"\n            [style.cursor]=\"cursorOnHover() || null\"\n            (click)=\"emitRowSelect(row, 'board', group)\">\n            <!-- Custom template when consumer provides boardCardTemplate; default card otherwise -->\n            <ng-container\n              *ngTemplateOutlet=\"boardCardTemplate ?? defaultBoardCard;\n                                 context: { $implicit: row, columns: visibleBoardFields(), group: group }\">\n            </ng-container>\n          </div>\n        </cdk-virtual-scroll-viewport>\n        @if (group.isLoading) {\n        <div class=\"board-ghost-card\">\n          <div class=\"board-ghost-line\"></div>\n          <div class=\"board-ghost-line board-ghost-line--short\"></div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  } @else {\n\n  <!-- Table Mode Template -->\n  @if(showExcelDownload() && !showGroupBar()) {\n  <div class=\"excel-download-bar\">\n    <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n  </div>\n  }\n  <!-- Scrollable groups container \u2014 plain iteration avoids CDK fixed-height estimation errors -->\n  <div #groupsScrollContainer class=\"groups-scroll-container\" (scroll)=\"onGroupsViewportScroll($event)\">\n\n    @for (group of groups(); track trackByGroupFn($index, group); let i = $index) {\n    <div class=\"group-container\"\n      [attr.data-group-id]=\"group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id\">\n      <!-- Combined sticky header with group info and table -->\n      <div style=\"\n        background:var(--grid-surface);\n        position: sticky;\n        top: 0;\n        z-index: 115;\n      \">\n        @if(showGroupBar()) {\n        <div class=\"group-header-row\">\n          <div class=\"custom-collapse-header\" (click)=\"toggleGroupCollapse(group.id)\">\n            <span class=\"collapse-arrow\" [ngClass]=\"{\n              'rotate-arrow': group.isExpanded,\n            }\">\u25BC</span>\n            <span class=\"f-12\">\n              {{ group?.title || \"\" }}\n              {{ group?.currentLoadedRows || 0 }} -\n              {{ group?.totalRowCount || 0 }} rows...</span>\n            @if(groupByField() && isSortable()) {\n            <span class=\"group-sort-indicator\">\n              <span class=\"sort-triangles\">\n                <span class=\"sort-tri sort-tri-up\" [class.sort-tri-active]=\"getSortDirection(groupByField()!) === 'asc'\"\n                  (click)=\"onGroupSortToggle($event, 'asc')\"></span>\n                <span class=\"sort-tri sort-tri-down\"\n                  [class.sort-tri-active]=\"getSortDirection(groupByField()!) === 'desc'\"\n                  (click)=\"onGroupSortToggle($event, 'desc')\"></span>\n              </span>\n            </span>\n            }\n          </div>\n          @if(i === 0 && showExcelDownload()) {\n          <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n          }\n        </div>\n        }\n\n        @if(freezeHeader() && (group.isExpanded || !showGroupBar())) {\n        <div #headerScroller class=\"header-shell\" [attr.data-group-id]=\"'header-shell-' + group.id\"\n          [style]=\"'--table-total-width: ' + getInitialTotalWidth() + 'px'\">\n          <table class=\"eru-grid-table\" [class.freeze-header]=\"freezeHeader()\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <ng-container *ngTemplateOutlet=\"tableColGroup\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n            <!-- Grand Total row after sticky header (position: before) - only for first group -->\n            @if(enableGrandTotal() && grandTotalPosition() === 'before' && hasGrandTotalData() && i === 0) {\n            <tbody>\n              <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n            </tbody>\n            }\n            <!-- Subtotal row after sticky header (position: before) -->\n            @if(enableRowSubtotals() && subtotalPosition() === 'before' && hasSubtotalData(group)) {\n            <tbody>\n              <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n            </tbody>\n            }\n          </table>\n        </div>\n        }\n      </div>\n      @if(group.isExpanded || !showGroupBar()) {\n      <ng-container>\n        <cdk-virtual-scroll-viewport [attr.data-group-id]=\"group.id\" [itemSize]=\"dataRowHeight()\" class=\"viewport table-viewport\"\n          (scrolledIndexChange)=\"onScroll($event, group)\" (scroll)=\"onTableBodyScroll($event)\"\n          [style]=\"'--table-height: ' + getGroupContentHeight(group.id) + 'px; --table-min-height: ' + getGroupContentHeight(group.id) + 'px; --table-total-width: ' + getInitialTotalWidth() + 'px'\">\n          <div class=\"table-wrapper\">\n            <table class=\"eru-grid-table\" [class.show-column-lines]=\"showColumnLines()\"\n              [class.show-row-lines]=\"showRowLines()\">\n              <ng-container *ngTemplateOutlet=\"tableColGroup\"></ng-container>\n              @if(!freezeHeader()) {\n              <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n              }\n              <!-- Grand Total row after normal header (position: before) - only for first group -->\n              @if(!freezeHeader() && enableGrandTotal() && grandTotalPosition() === 'before' &&\n              hasGrandTotalData() && i === 0) {\n              <tbody>\n                <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n              </tbody>\n              }\n              <!-- Subtotal row after normal header (position: before) -->\n              @if(!freezeHeader() && enableRowSubtotals() && subtotalPosition() === 'before' &&\n              hasSubtotalData(group)) {\n              <tbody>\n                <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n              </tbody>\n              }\n              <tbody>\n                @if (columns(); as columnsList) {\n                <!--  <tr *ngIf=\"groupItem.type === 'table-header' && groups().length > 1\" style=\"background:#fafafa\">\n                      @if(gridStore.configuration().config.allowSelection) {\n                        <th class=\"checkbox-column\" style=\"text-align: center;\">\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"isGroupSelected(groupItem.group?.id || '')\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"toggleGroupSelection($event, groupItem.group?.id || '')\"\n                            >\n                        </th>\n                      }\n                      <th *ngFor=\"let column of columns(); trackBy: trackByColumnFn;let i =index\"\n                        style=\"text-align: center;\"\n                        [style.width.px]=\"column.field_size\"\n                        [style.minWidth.px]=\"column.field_size\"\n                        [resizeColumn]=\"true\"\n                        [columnConfig]=\"column\"\n                        [columnDraggable]=\"i\"\n                        class=\"column-header\">\n                        <div class=\"column-drag-handle\"></div>\n                        {{column.label}} {{column.symbol}}\n                      </th>\n                    </tr> -->\n                <!--   @if(getRowsForGroup(group.id).length > 0 && group.isExpanded) { -->\n                <!-- *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id)(); \n          trackBy: trackByRowFn; \n          let i = index\" -->\n                <!--  @for(row of getRowsForGroupSignal(group.id)(); track trackByRowFn($index, row); let i = $index) { -->\n                <ng-container\n                  *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id)(); trackBy: trackByRowFn; let i = index\">\n                <tr class=\"row-item\" [attr.data-row-id]=\"i\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\" [style.cursor]=\"cursorOnHover() || null\" (click)=\"emitRowSelect(row, 'table', group)\">\n                  @if(gridStore.configuration().config.allowSelection) {\n                  <td class=\"checkbox-column\" style=\"text-align: center;\">\n                    <input type=\"checkbox\" [checked]=\"isRowSelected(row?.entity_id)\"\n                      (change)=\"toggleRowSelection($event, row)\">\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('before')) {\n                  <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <ng-container\n                      *ngTemplateOutlet=\"actionCell; context: { $implicit: row, mode: 'table', group: group }\"></ng-container>\n                  </td>\n                  }\n                  @if(hasHiddenColumns()) {\n                  <td class=\"row-expand-toggle\" (click)=\"toggleRowExpand(row, i, $event)\">\n                    <mat-icon class=\"row-expand-icon\" [class.expanded]=\"isRowExpanded(row, i)\">chevron_right</mat-icon>\n                  </td>\n                  }\n                  @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n                  <td #cell [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n                    class=\"data-cell\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\"\n                    [matTooltipClass]=\"'error-message'\" [matTooltip]=\"datacell.error()?'Error: ' + datacell.error():''\"\n                    matTooltipPosition=\"below\">\n                    <div class=\"cell-content\">\n                      <data-cell #datacell [personCardTemplate]=\"personCardTemplate\" [cellTemplate]=\"cellTemplate\" [td]=cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\"\n                        [columnName]=\"column.name\" [value]=\"(row?.['entity_data']?.[column.name] ?? row?.[column.name]) || ''\" [column]=\"column\"\n                        [mode]=\"mode()\" [isEditable]=\"isEditable() && column.editable !== false && column.editable !== 'false'\" [drillable]=\"column.enableDrilldown || false\"\n                        [id]=\"i + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"row\"></data-cell>\n                    </div>\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('after')) {\n                  <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <ng-container\n                      *ngTemplateOutlet=\"actionCell; context: { $implicit: row, mode: 'table', group: group }\"></ng-container>\n                  </td>\n                  }\n                </tr>\n                @if(hasHiddenColumns() && isRowExpanded(row, i)) {\n                <tr class=\"row-detail\">\n                  <td class=\"row-detail-cell\" [attr.colspan]=\"rowDetailColspan()\">\n                    <div class=\"row-detail-grid\">\n                      @for (hiddenCol of hiddenColumns(); track trackByColumnFn($index, hiddenCol)) {\n                      <div class=\"row-detail-field\">\n                        <span class=\"row-detail-label\">{{hiddenCol.label}}</span>\n                        <div class=\"row-detail-value\">\n                          <data-cell [cellTemplate]=\"cellTemplate\" [fieldSize]=\"hiddenCol.field_size\" [columnDatatype]=\"hiddenCol.datatype\"\n                            [columnName]=\"hiddenCol.name\" [value]=\"(row?.['entity_data']?.[hiddenCol.name] ?? row?.[hiddenCol.name]) || ''\"\n                            [column]=\"hiddenCol\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n                            [drillable]=\"hiddenCol.enableDrilldown || false\"\n                            [id]=\"'detail_' + i + '_' + hiddenCol.name\" [eruGridStore]=\"gridStore\" [row]=\"row\"></data-cell>\n                        </div>\n                      </div>\n                      }\n                    </div>\n                  </td>\n                </tr>\n                }\n                </ng-container>\n                <!-- } -->\n                <!-- } -->\n                @if(group.isLoading && (group.isExpanded || !showGroupBar())) {\n                @for(i of [].constructor(ghostRows()); let j = $index; track j) {\n                <tr class=\"ghost-loading-row\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n                  @if(gridStore.configuration().config.allowSelection) {\n                  <td class=\"checkbox-column ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n\n                  }\n                  @if(shouldShowActionColumn('before')) {\n                  <td class=\"action-column ghost-cell-container\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @if(hasHiddenColumns()) {\n                  <td class=\"row-expand-toggle ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n                  <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n                    class=\"ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('after')) {\n                  <td class=\"action-column ghost-cell-container\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                </tr>\n                }\n                }\n                <!-- <tr\n                    *ngIf=\"getRowsForGroup(group.id).length === 0 && !group.isExpanded\"\n                    class=\"group-separator\"\n                    >\n                    <td [attr.colspan]=\"groupSeperatorColSpan()\" class=\"separator-cell\"></td>\n                  </tr> -->\n                <!-- Subtotal row at end of group (position: after) -->\n                @if(enableRowSubtotals() && subtotalPosition() === 'after' && hasSubtotalData(group)) {\n                <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n                }\n                <!-- Grand Total row at end of group (position: after) - only for last group -->\n                @if(enableGrandTotal() && grandTotalPosition() === 'after' && hasGrandTotalData() && i ===\n                groups().length - 1) {\n                <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n                }\n                }\n              </tbody>\n            </table>\n          </div>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n\n<!-- Pivot Table Header Template -->\n<ng-template #pivotTableHead>\n  <thead [class.eru-wrap-headers]=\"wrapHeaders()\">\n    @if (hasNestedHeaders()) {\n    <ng-container>\n      @for (headerRow of getHeaderRows(); track headerRow; let rowIndex = $index) {\n      <tr class=\"pivot-header pivot-header-container\" [class.pivot-header-level]=\"'level-' + rowIndex\">\n        @for (header of headerRow; track trackByHeaderFn($index, header); let colIndex = $index) {\n        <th [attr.colspan]=\"header.colspan\" [attr.rowspan]=\"header.rowspan\"\n          [resizeColumn]=\"isResizablePivotHeader(header)\"\n          [columnConfig]=\"getFieldForPivotHeader(header) || $any(header)\"\n          class=\"column-header pivot-column-header nested-header\"\n          [class.row-dimension-header]=\"isRowDimensionHeader(header)\"\n          [class.column-dimension-header]=\"!isRowDimensionHeader(header)\" [class.expanded]=\"header.isExpanded\"\n          [class.collapsed]=\"!header.isExpanded\" [class.sticky-column]=\"isStickyColumn(header.name, colIndex)\"\n          [class.design-clickable]=\"isDesignMode()\"\n          [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === designTargetFor($any(header))\"\n          [style.position]=\"isStickyColumn(header.name, colIndex) ? 'sticky' : 'static'\"\n          [style.left.px]=\"getStickyColumnLeft(header.name, colIndex)\"\n          [style.z-index]=\"isStickyColumn(header.name, colIndex) ? 100 : 1\"\n          [style.min-height.px]=\"headerRowHeight()\" style=\"height: auto; padding: 8px 6px;\">\n          <div class=\"header-content\">\n\n            <data-cell [fieldSize]=\"header.field_size\" [columnDatatype]=\"header.dataType\" [columnName]=\"header.name\"\n              [value]=\"header.label\" [column]=\"header\" [frozenGrandTotalCell]=\"true\"\n              [drillable]=\"header.enableDrilldown || false\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n              [id]=\"'pivot_' + $index + '_' + header.name\" [eruGridStore]=\"gridStore\" [row]=\"header\">\n            </data-cell>\n            @if(isDesignMode()) {\n            <mat-icon class=\"design-edit-icon\"\n              [title]=\"isAggregationHeader($any(header)) ? 'Edit aggregation' : 'Edit column'\"\n              (click)=\"onHeaderDesignClick($event, $any(header))\">tune</mat-icon>\n            }\n            <!-- <span class=\"header-label header-wrap-text\">{{header.label}}</span> -->\n            <!-- <button *ngIf=\"!isRowDimensionHeader(header)\"\n                  class=\"collapse-toggle-btn\"\n                  [title]=\"header.isExpanded ? 'Collapse group' : 'Expand group'\"\n                  (click)=\"toggleColumnGroup(header.groupKey)\"\n                  type=\"button\">\n                  <span class=\"collapse-icon\">+</span>\n                </button> -->\n          </div>\n        </th>\n        }\n      </tr>\n      }\n    </ng-container>\n    } @else {\n    <!-- Simple header fallback -->\n    <ng-container>\n      <tr class=\"pivot-header\" [class.freeze-header-enabled]=\"freezeHeader()\">\n        @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n        <th [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n          [resizeColumn]=\"gridStore.isFeatureEnabled('columnResizable')\" [columnConfig]=\"column\"\n          class=\"column-header pivot-column-header\" [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n          [class.design-clickable]=\"isDesignMode()\"\n          [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === designTargetFor(column)\"\n          [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n          [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n          [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 100 : 1\"\n          [style.min-height.px]=\"headerRowHeight()\" style=\"height: auto;padding: 8px 6px\">\n          <!-- Label and control laid out as a row: the label truncates, the\n               control keeps its place. Left as a bare text node the long\n               aggregation labels pushed the icon past the cell edge, where\n               `overflow: hidden` clipped it out of sight entirely. -->\n          <div class=\"pivot-header-content\">\n            <!-- Deliberately not `.column-label`: that class carries the\n                 wrap-headers rule, which broke these labels onto one word per\n                 line. This header truncates, as it did before. -->\n            <span class=\"pivot-header-label\">{{column.label}}</span>\n            @if(isDesignMode()) {\n            <mat-icon class=\"design-edit-icon\"\n              [title]=\"isAggregationHeader(column) ? 'Edit aggregation' : 'Edit column'\"\n              (click)=\"onHeaderDesignClick($event, column)\">tune</mat-icon>\n            }\n          </div>\n        </th>\n        }\n      </tr>\n    </ng-container>\n    }\n\n  </thead>\n</ng-template>\n\n<!-- Column Group Template for consistent column widths -->\n<ng-template #pivotColGroup>\n  <colgroup>\n    @for (column of getLeafColumns(); track trackByColumnFn($index, column)) {\n    <col\n      [style]=\"'width: ' + column.field_size + 'px !important; min-width: ' + column.field_size + 'px !important; max-width: ' + column.field_size + 'px !important; --col-width: ' + column.field_size + 'px'\">\n    }\n  </colgroup>\n</ng-template>\n\n<ng-template #pivotGrandTotal>\n  <tbody class=\"pivot-tbody\">\n    @for (pivotRow of gridStore.pivotGrandTotalData(); track trackByPivotRowFn($index, pivotRow); let i = $index) {\n    <tr class=\"pivot-row grand-total-row\"\n      [class.grand-total-bold]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'bold'\"\n      [class.grand-total-italic]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'italic'\"\n      [class.grand-total-highlighted]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'highlighted'\"\n      [style.height.px]=\"50\" [attr.data-pivot-row]=\"i\">\n      <!--   <td colspan=\"20\">{{pivotRow | json}}</td> -->\n      @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n      <td [attr.rowspan]=\"getEffectiveRowspan(i, column.name)\" [style.width.px]=\"column.field_size\"\n        [style.minWidth.px]=\"column.field_size\" class=\"pivot-cell\"\n        [class.row-dimension-cell]=\"isRowDimensionColumn(column.name)\"\n        [class.column-dimension-cell]=\"!isRowDimensionColumn(column.name)\"\n        [class.aggregated-value]=\"!isRowDimensionColumn(column.name) && column.datatype === 'number'\"\n        [class.rowspan-cell]=\"getEffectiveRowspan(i, column.name) || 1 > 1\"\n        [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n        [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n        [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n        [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 99 : 1\" [style.height.px]=\"50\" [attr.xx]=\"i\">\n        <div class=\"cell-content pivot-cell-content\">\n          <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n            [value]=\"getEffectiveCellValue(i,column.name, pivotRow)\" [column]=\"column\" [frozenGrandTotalCell]=\"true\"\n            [drillable]=\"column.enableDrilldown || false\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n            [id]=\"'pivot_' + i + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"pivotRow\">\n          </data-cell>\n        </div>\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</ng-template>\n\n<!-- \u2500\u2500\u2500 Action column cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     One template for both column positions. With no `config.actions` set it\n     falls back to the single more_horiz icon the column has always shown, so\n     grids that only listen to the store's actionClick signal keep working.\n     Context: { $implicit: Row, mode: 'table' | 'board', group?: RowGroup }\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #actionCell let-row let-mode=\"mode\" let-group=\"group\">\n  @if(!hasConfiguredActions()) {\n  <mat-icon (click)=\"onActionClick($event, row, undefined, mode || 'table', group)\">more_horiz</mat-icon>\n  } @else if(actionDisplayType() === 'kebab') {\n  @if(visibleActionsFor(row).length > 0) {\n  <mat-icon class=\"action-kebab\" [matMenuTriggerFor]=\"rowActionMenu\"\n    [matMenuTriggerData]=\"{ row: row, mode: mode || 'table', group: group }\"\n    (click)=\"$event.stopPropagation()\">more_vert</mat-icon>\n  }\n  } @else {\n  <div class=\"action-icons\">\n    @for(action of visibleActionsFor(row); track action.action_name) {\n    <mat-icon class=\"action-icon\" [matTooltip]=\"action.action_name\" matTooltipPosition=\"above\"\n      (click)=\"onActionClick($event, row, action, mode || 'table', group)\">{{action.action_icon || 'play_arrow'}}</mat-icon>\n    }\n  </div>\n  }\n</ng-template>\n\n<!-- Kebab menu shared by every row; the row is passed through matMenuTriggerData. -->\n<mat-menu #rowActionMenu=\"matMenu\" class=\"eru-grid-action-menu\">\n  <ng-template matMenuContent let-row=\"row\" let-mode=\"mode\" let-group=\"group\">\n    @for(action of visibleActionsFor(row); track action.action_name) {\n    <button mat-menu-item (click)=\"onActionClick($event, row, action, mode || 'table', group)\">\n      <mat-icon>{{action.action_icon || 'play_arrow'}}</mat-icon>\n      <span>{{action.action_name}}</span>\n    </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Column Group Template for consistent column widths -->\n<ng-template #tableColGroup>\n  <colgroup>\n    @if(gridStore.configuration().config.allowSelection) {\n    <col style=\"width: 40px; min-width: 40px; max-width: 40px;\">\n    }\n    @if(shouldShowActionColumn('before')) {\n    <col\n      [style]=\"'width: ' + actionColumnWidth() + 'px !important; min-width: ' + actionColumnWidth() + 'px !important; max-width: ' + actionColumnWidth() + 'px !important;'\">\n    }\n    @if(hasHiddenColumns()) {\n    <col style=\"width: 40px !important; min-width: 40px !important; max-width: 40px !important;\">\n    }\n    @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n    <col\n      [style]=\"'width: ' + column.field_size + 'px !important; min-width: ' + column.field_size + 'px !important; max-width: ' + column.field_size + 'px !important; --col-width: ' + column.field_size + 'px'\">\n    }\n    @if(shouldShowActionColumn('after')) {\n    <col\n      [style]=\"'width: ' + actionColumnWidth() + 'px !important; min-width: ' + actionColumnWidth() + 'px !important; max-width: ' + actionColumnWidth() + 'px !important;'\">\n    }\n  </colgroup>\n</ng-template>\n\n\n<ng-template #tableHeader>\n\n  <thead [class.eru-wrap-headers]=\"wrapHeaders()\">\n    <!-- headerRowHeight rides on the row, not the cells: `thead.eru-wrap-headers\n         th { height: auto }` outranks any class-level height we could put on a\n         th, which is why a configured header height was ignored while data rows\n         (inline height on tr.row-item) honoured theirs. On a table row `height`\n         is a minimum, so a wrapped two-line header still grows past it. -->\n    <tr [style.height.px]=\"headerRowHeight()\" [style.minHeight.px]=\"headerRowHeight()\">\n      @if(gridStore.configuration().config.allowSelection) {\n      <th class=\"checkbox-column column-header table-column-header\">\n        <input type=\"checkbox\" [checked]=\"isAllGroupsSelected()\" (change)=\"toggleAllGroups($event)\">\n      </th>\n      }\n      @if(shouldShowActionColumn('before')) {\n      <th class=\"action-column column-header table-column-header\" [style.width.px]=\"actionColumnWidth()\"\n        [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">Action</th>\n      }\n      @if(hasHiddenColumns()) {\n      <th class=\"row-expand-toggle column-header table-column-header\"></th>\n      }\n      @for (column of visibleColumns(); track trackByColumnFn(i, column); let i = $index) {\n      <th [style.width.px]=\"column.field_size\" [resizeColumn]=\"gridStore.isFeatureEnabled('columnResizable')\"\n        [columnConfig]=\"column\" [index]=\"i\"\n        [columnDraggable]=\"gridStore.isFeatureEnabled('columnReorderable') ? i : null\"\n        [style.minWidth.px]=\"column.field_size\" class=\"column-header table-column-header\"\n        [class.sortable-header]=\"isSortable()\"\n        [class.design-clickable]=\"isDesignMode()\"\n        [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === column.name\"\n        [class.sort-asc]=\"isSortable() && getSortDirection(column.name) === 'asc'\"\n        [class.sort-desc]=\"isSortable() && getSortDirection(column.name) === 'desc'\">\n        @if(gridStore.isFeatureEnabled('columnReorderable')) {\n        <div class=\"column-drag-handle\"></div>\n        }\n        <span class=\"column-label\" [title]=\"column.tool_tip || column.description || ''\">{{column.label}}</span>\n        @if(isDesignMode()) {\n        <mat-icon class=\"design-edit-icon\" title=\"Edit column\" (click)=\"onHeaderDesignClick($event, column)\">tune</mat-icon>\n        }\n        @if(isSortable()) {\n        <span class=\"sort-indicator\">\n          <span class=\"sort-triangles\">\n            <span class=\"sort-tri sort-tri-up\" [class.sort-tri-active]=\"getSortDirection(column.name) === 'asc'\"\n              (click)=\"onSortColumn($event, column, 'asc')\"></span>\n            <span class=\"sort-tri sort-tri-down\" [class.sort-tri-active]=\"getSortDirection(column.name) === 'desc'\"\n              (click)=\"onSortColumn($event, column, 'desc')\"></span>\n          </span>\n          @if(getSortPriority(column.name) !== null && gridStore.sortColumns().length > 1) {\n          <span class=\"sort-priority\">{{getSortPriority(column.name)}}</span>\n          }\n        </span>\n        }\n      </th>\n      }\n      @if(shouldShowActionColumn('after')) {\n      <th class=\"action-column column-header table-column-header\" [style.width.px]=\"actionColumnWidth()\"\n        [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">Action</th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<!-- Table Subtotal Row Template -->\n<ng-template #tableSubtotal let-group=\"group\">\n  <tr class=\"subtotal-row\" [class.subtotal-bold]=\"subTotalStyle() === 'bold'\"\n    [class.subtotal-italic]=\"subTotalStyle() === 'italic'\"\n    [class.subtotal-highlighted]=\"subTotalStyle() === 'highlighted'\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n    @if(gridStore.configuration().config.allowSelection) {\n    <td class=\"checkbox-column\"></td>\n    }\n    @if(shouldShowActionColumn('before')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n    @if(hasHiddenColumns()) {\n    <td class=\"row-expand-toggle\"></td>\n    }\n    @for(column of visibleColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n    <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"subtotal-cell\"\n      [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n      <div class=\"cell-content\">\n        @if(colIndex === 0 && getSubtotalValue(group, column.name) === null) {\n        <span class=\"subtotal-label\">{{subtotalLabel()}}</span>\n        } @else {\n        @if(getSubtotalValue(group, column.name) !== null) {\n        <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n          [value]=\"getSubtotalValue(group, column.name)\" [column]=\"column\" [mode]=\"mode()\" [isEditable]=\"false\"\n          [id]=\"'subtotal_' + group.id + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"group.subtotal\">\n        </data-cell>\n        }\n        }\n      </div>\n    </td>\n    }\n    @if(shouldShowActionColumn('after')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n  </tr>\n</ng-template>\n\n<!-- Table Grand Total Row Template -->\n<ng-template #tableGrandTotal>\n  <tr class=\"grand-total-row\" [class.grand-total-bold]=\"grandTotalStyle() === 'bold'\"\n    [class.grand-total-italic]=\"grandTotalStyle() === 'italic'\"\n    [class.grand-total-highlighted]=\"grandTotalStyle() === 'highlighted'\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n    @if(gridStore.configuration().config.allowSelection) {\n    <td class=\"checkbox-column\"></td>\n    }\n    @if(shouldShowActionColumn('before')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n    @if(hasHiddenColumns()) {\n    <td class=\"row-expand-toggle\"></td>\n    }\n    @for(column of visibleColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n    <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"grand-total-cell\"\n      [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n      <div class=\"cell-content\">\n        @if(colIndex === 0 && getGrandTotalValue(column.name) === null) {\n        <span class=\"grand-total-label\">Grand Total</span>\n        } @else {\n        @if(getGrandTotalValue(column.name) !== null) {\n        <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n          [value]=\"getGrandTotalValue(column.name)\" [column]=\"column\" [mode]=\"mode()\" [isEditable]=\"false\"\n          [id]=\"'grandtotal_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"gridStore.rowGrandTotal()\">\n        </data-cell>\n        }\n        }\n      </div>\n    </td>\n    }\n    @if(shouldShowActionColumn('after')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n  </tr>\n</ng-template>\n\n<!-- \u2500\u2500\u2500 Default board card template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Used when no boardCardTemplate is passed to <eru-grid>.\n     Context: { $implicit: Row, columns: Field[], group: RowGroup }\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #defaultBoardCard let-row let-columns=\"columns\" let-group=\"group\">\n  <mat-card class=\"board-card\">\n    <mat-card-content>\n      @for (column of columns; track column.name) {\n      @if ((row?.entity_data?.[column.name] ?? row?.[column.name]) !== undefined) {\n      <div class=\"board-card-field\">\n        <span class=\"board-field-label\">{{ column.label }}</span>\n        <data-cell\n          [fieldSize]=\"column.field_size\"\n          [columnDatatype]=\"column.datatype\"\n          [columnName]=\"column.name\"\n          [column]=\"column\"\n          [value]=\"row?.entity_data?.[column.name] ?? row?.[column.name]\"\n          [id]=\"row?.entity_id + '_' + column.name\"\n          [eruGridStore]=\"gridStore\"\n          [mode]=\"'board'\"\n          [row]=\"row\">\n        </data-cell>\n      </div>\n      }\n      }\n    </mat-card-content>\n    <mat-card-actions align=\"end\">\n      <button mat-icon-button (click)=\"onActionClick($event, row)\">\n        <mat-icon>more_horiz</mat-icon>\n      </button>\n    </mat-card-actions>\n  </mat-card>\n</ng-template>", styles: ["@charset \"UTF-8\";:root{--grid-primary: var(--mat-sys-primary, #6750a4);--grid-on-primary: var(--mat-sys-on-primary, #ffffff);--grid-primary-container: var(--mat-sys-primary-container, #eaddff);--grid-on-primary-container: var(--mat-sys-on-primary-container, #21005d);--grid-secondary: var(--mat-sys-secondary, #625b71);--grid-on-secondary: var(--mat-sys-on-secondary, #ffffff);--grid-secondary-container: var(--mat-sys-secondary-container, #e8def8);--grid-on-secondary-container: var(--mat-sys-on-secondary-container, #1d192b);--grid-tertiary: var(--mat-sys-tertiary, #7d5260);--grid-on-tertiary: var(--mat-sys-on-tertiary, #ffffff);--grid-tertiary-container: var(--mat-sys-tertiary-container, #ffd8e4);--grid-on-tertiary-container: var(--mat-sys-on-tertiary-container, #31111d);--grid-surface: var(--mat-sys-surface, #fef7ff);--grid-surface-variant: var(--mat-sys-surface-variant, #e7e0ec);--grid-surface-container: var(--mat-sys-surface-container, #f3edf7);--grid-surface-container-high: var(--mat-sys-surface-container-high, #ede7f0);--grid-on-surface: var(--mat-sys-on-surface, #1d1b20);--grid-on-surface-variant: var(--mat-sys-on-surface-variant, #49454f);--grid-outline: var(--mat-sys-outline, #79757f);--grid-outline-variant: var(--mat-sys-outline-variant, #cac4d0);--grid-error: var(--mat-sys-error, #ba1a1a);--grid-error-container: var(--mat-sys-error-container, #ffdad6);--grid-base-surface: var(--surface, #ffffff);--grid-base-on-surface: var(--on-surface, #000000);--grid-base-border: var(--border, #e5e7eb);--grid-primary-light: var(--grid-primary-container)}:host,eru-grid{display:block!important;width:100%;height:100%;flex:1 1 0%;max-height:var(--grid-height, none);min-height:var(--grid-min-height, 120px);font-family:var(--grid-font-family);--grid-font-family: \"Poppins\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--grid-font-size-body: 12px;--grid-font-size-caption: 12px !important;--grid-line-height-body: 1;--grid-aggregation-text-align: right;--grid-number-text-align: right;--grid-spacing-xxs: 2px;--grid-spacing-xs: 4px;--grid-spacing-sm: 8px;--grid-spacing-md: 16px;--grid-spacing-lg: 24px;--grid-border-radius: 4px;--grid-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);--grid-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15);--grid-row-hover: var(--grid-surface-variant);--grid-row-selected: var(--grid-surface-container-high);--grid-zebra-odd: transparent;--grid-zebra-even: transparent;--grid-focus-ring: var(--grid-primary);--grid-header-font-weight: 500;--grid-header-text-transform: none;--grid-header-letter-spacing: normal;--grid-header-font-size: var(--grid-font-size-caption);--grid-header-padding-x: 8px;--grid-header-padding-y: 12px;--grid-font-feature-numeric: normal;--grid-cell-padding-x: var(--grid-spacing-xs);--grid-cell-inset-x: 8px;--grid-cell-padding-y: var(--grid-spacing-xxs);--grid-tint-subtle: rgba(0, 0, 0, .025);--grid-tint-soft: rgba(0, 0, 0, .045);--grid-tint-strong: rgba(0, 0, 0, .08);--grid-radius-outer: 0;--grid-shadow-outer: none;--grid-divider-color: var(--grid-outline-variant);--grid-divider-width: 1px;--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface);--grid-pill-radius: 999px;--grid-pill-padding-y: 3px;--grid-pill-padding-x: 10px;--grid-pill-font-size: 11px;--grid-pill-font-weight: 500;--grid-priority-dot-size: 8px;--grid-avatar-size: 24px;--grid-avatar-font-size: 10px;--grid-avatar-font-weight: 600;border-radius:var(--grid-radius-outer);box-shadow:var(--grid-shadow-outer)}eru-grid[data-preset=default]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: uppercase;--grid-header-letter-spacing: .06em;--grid-header-font-size: 11px;--grid-header-padding-y: 12px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 14px;--grid-row-hover: var(--grid-tint-subtle);--grid-divider-color: var(--grid-tint-soft);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=modern]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: none;--grid-header-letter-spacing: normal;--grid-header-font-size: 13px;--grid-header-padding-y: 16px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 16px;--grid-cell-padding-x: 18px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-radius-outer: 12px;--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 4px;--grid-pill-padding-x: 12px}eru-grid[data-preset=compact]{--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface);--grid-header-font-weight: 600;--grid-header-text-transform: none;--grid-header-font-size: 11px;--grid-header-padding-y: 4px;--grid-header-padding-x: 8px;--grid-cell-padding-y: 3px;--grid-cell-padding-x: 8px;--grid-font-size-body: 11px;--grid-row-hover: var(--grid-tint-subtle);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 1px;--grid-pill-padding-x: 6px;--grid-pill-font-size: 10px}eru-grid[data-preset=bold]{--grid-header-bg: var(--grid-surface-container-high);--grid-header-color: var(--grid-on-surface);--grid-header-font-weight: 700;--grid-header-text-transform: none;--grid-header-font-size: 13px;--grid-header-padding-y: 14px;--grid-header-padding-x: 12px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 12px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-strong);--grid-divider-width: 1px;--grid-radius-outer: 2px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=financial]{--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: uppercase;--grid-header-letter-spacing: .08em;--grid-header-font-size: 11px;--grid-header-padding-y: 12px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 14px;--grid-zebra-odd: transparent;--grid-zebra-even: var(--grid-tint-subtle);--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=elevated]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 600;--grid-header-text-transform: none;--grid-header-font-size: 12px;--grid-header-padding-y: 16px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-radius-outer: 16px;--grid-shadow-outer: 0 1px 3px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .07);--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 4px;--grid-pill-padding-x: 12px;overflow:hidden}.group-container{padding-bottom:8px}.column-header.design-clickable .design-edit-icon{font-size:16px;width:16px;height:16px;margin-left:4px;opacity:.45;vertical-align:middle;cursor:pointer}.column-header.design-clickable:hover .design-edit-icon,.column-header.design-clickable .design-edit-icon:hover{opacity:1}.column-header.design-selected{background-color:var(--grid-primary-container, rgba(63, 81, 181, .12))}.pivot-column-header .pivot-header-content{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}.pivot-column-header .pivot-header-content .pivot-header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pivot-column-header .pivot-header-content .design-edit-icon,.pivot-column-header .header-content .design-edit-icon{flex:0 0 auto}.pivot-column-header .header-content data-cell,.pivot-column-header .header-content data-cell *{color:inherit!important}.incremental-row-container{width:100%;height:100%;min-height:var(--grid-min-height, 120px);max-height:none;overflow:auto;position:relative;background-color:var(--grid-surface);border-radius:var(--grid-border-radius);font-family:var(--grid-font-family)}.viewport{height:100%;min-height:300px;overflow-x:auto;overflow-y:auto;background-color:var(--grid-surface);scrollbar-gutter:stable}.viewport.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.groups-viewport{height:100%;min-height:300px}.groups-scroll-container{max-height:var(--grid-height, 600px);overflow-y:auto;overflow-x:hidden}.table-viewport{background-color:var(--grid-surface);height:var(--table-height, auto);min-height:var(--table-min-height, 100px);overflow-x:auto;overflow-y:auto}.pivot-viewport{min-height:var(--table-min-height, 300px);overflow-x:auto;overflow-y:auto;background-color:var(--grid-surface)}.pivot-viewport .cdk-virtual-scroll-content-wrapper{width:auto;height:auto}.table-wrapper{min-width:100%;overflow-x:visible}.incremental-row-container .eru-grid-table,.eru-grid-table{width:100%!important;border-collapse:separate;border-spacing:0;table-layout:fixed!important;background-color:var(--grid-surface);color:var(--grid-on-surface);font-family:var(--grid-font-family);font-size:var(--grid-font-size-body);line-height:var(--grid-line-height-body)}.eru-grid-table th,.eru-grid-table td{text-align:left;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--grid-on-surface);min-width:0;max-width:100%!important;box-sizing:border-box;position:relative}.eru-grid-table th{background-color:var(--grid-header-bg, var(--grid-surface-container))}thead.eru-wrap-headers th{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;height:auto}thead.eru-wrap-headers th .column-label,thead.eru-wrap-headers th .header-label{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word;overflow-wrap:anywhere}.eru-grid-table tbody td{background-color:transparent}.eru-grid-table thead{background-color:var(--grid-header-bg, var(--grid-surface-container));transform:translateZ(0);will-change:transform;backface-visibility:hidden}.eru-grid-table thead.freeze-header-enabled{position:sticky!important;top:0!important;z-index:100!important}.eru-grid-table thead th{background-color:var(--grid-header-bg, var(--grid-surface-container));color:var(--grid-header-color, var(--grid-on-surface));font-family:var(--grid-font-family);font-weight:var(--grid-header-font-weight);font-size:var(--grid-header-font-size)}.checkbox-column{width:50px;min-width:50px;max-width:50px;text-align:center!important;padding-left:0!important;padding-right:0!important;text-overflow:clip!important;background-color:var(--grid-surface-container)}.checkbox-column input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--grid-primary);border-radius:var(--grid-border-radius)}.checkbox-column input[type=checkbox]:focus{outline:2px solid var(--grid-primary);outline-offset:2px}.action-column{text-align:center!important;padding-left:0!important;padding-right:0!important;text-overflow:clip!important;background-color:var(--grid-surface-container)}.action-column mat-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:var(--grid-on-surface-variant);cursor:pointer}.action-column mat-icon:hover{color:var(--grid-primary)}.action-column .action-icons{display:flex;align-items:center;justify-content:center;gap:6px;overflow-x:auto;scrollbar-width:none}.action-column .action-icons::-webkit-scrollbar{display:none}.action-column .action-icon{flex:0 0 auto}.eru-grid-action-menu .mat-mdc-menu-item mat-icon{margin-right:8px;font-size:18px;width:18px;height:18px;line-height:18px;color:var(--grid-on-surface-variant)}.group-header{background-color:var(--grid-surface-container);color:var(--grid-on-surface);font-size:var(--grid-font-size-caption);font-weight:500;border-bottom:1px solid var(--grid-outline);cursor:pointer;transition:background-color .2s ease}.group-header:hover{background-color:var(--grid-surface-container-high)}.group-header .group-title{font-weight:600;color:var(--grid-primary)}.group-header .group-row-count{color:var(--grid-on-surface-variant);font-size:var(--grid-font-size-caption);margin-left:var(--grid-spacing-sm)}.row-item{background-color:var(--grid-surface);transition:background-color .15s ease}.row-item:nth-child(odd){background-color:var(--grid-zebra-odd, var(--grid-surface))}.row-item:nth-child(2n){background-color:var(--grid-zebra-even, var(--grid-surface))}.row-item:hover{background-color:var(--grid-row-hover)}.required-toggle-row{background-color:var(--grid-surface-container, #f3edf7);border-bottom:1px solid var(--grid-outline-variant, #cac4d0)}.required-toggle-row .required-toggle-cell{padding:4px 8px!important;text-align:center;vertical-align:middle;position:relative}.required-toggle-row .required-toggle-cell .required-label{position:absolute;top:2px;left:4px;font-size:10px;color:var(--grid-on-surface-variant, #49454f);font-weight:400;text-transform:lowercase}.required-toggle-row .required-toggle-cell mat-checkbox{display:flex;justify-content:center;align-items:center}.table-column-header{padding:0 var(--grid-header-padding-x);height:var(--grid-header-row-height, auto)}.column-header{font-weight:var(--grid-header-font-weight);text-transform:var(--grid-header-text-transform);letter-spacing:var(--grid-header-letter-spacing);text-align:center!important;font-size:var(--grid-header-font-size);position:relative;-webkit-user-select:none;user-select:none;--grid-header-affordance-space: 0px;--grid-column-resizer-width: 10px;--grid-header-sort-right: calc(var(--grid-column-resizer-width) + 2px);--grid-header-design-right: calc(var(--grid-column-resizer-width) + 2px);background-color:var(--grid-header-bg, var(--grid-surface-container));color:var(--grid-header-color, var(--grid-on-surface))}.column-header:hover{background-color:var(--grid-header-hover-bg, var(--grid-surface-container-high))}.column-drag-handle{position:absolute;left:0;top:0;bottom:0;width:12px;cursor:grab;opacity:0;transition:opacity .2s ease,background-color .2s ease;z-index:2;display:flex;align-items:center;justify-content:center;border-right:1px solid transparent}.column-drag-handle:after{content:\"\\22ee\\22ee\";font-size:14px;color:var(--grid-on-surface-variant);transform:rotate(90deg)}.column-drag-handle:hover{background-color:var(--grid-surface-container-high);border-right-color:var(--grid-outline)}.column-header:hover .column-drag-handle{opacity:1}.column-drag-handle:active{cursor:grabbing}.table-column-header.sortable-header{--grid-header-affordance-space: 20px}.table-column-header.design-clickable{--grid-header-affordance-space: 28px}.table-column-header.sortable-header.design-clickable{--grid-header-affordance-space: 40px;--grid-header-design-right: calc(var(--grid-column-resizer-width) + 13px)}.table-column-header .column-label{display:block;padding-right:var(--grid-header-affordance-space)}.table-column-header .sort-indicator,.table-column-header .design-edit-icon{position:absolute;top:50%;transform:translateY(-50%);margin-left:0}.table-column-header .sort-indicator{right:var(--grid-header-sort-right)}.table-column-header .design-edit-icon{right:var(--grid-header-design-right)}.sortable-header{cursor:pointer}.sortable-header .sort-indicator{display:inline-flex;align-items:center;gap:2px;cursor:pointer;opacity:0;transition:opacity .15s ease}.sortable-header .sort-indicator .sort-triangles{display:flex;flex-direction:column;align-items:center;gap:2px}.sortable-header .sort-indicator .sort-tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;cursor:pointer;transition:border-color .15s ease}.sortable-header .sort-indicator .sort-tri-up{border-bottom:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.sortable-header .sort-indicator .sort-tri-down{border-top:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.sortable-header .sort-indicator .sort-tri-active{opacity:1}.sortable-header .sort-indicator .sort-tri-active.sort-tri-up{border-bottom-color:var(--grid-primary, #6750a4)}.sortable-header .sort-indicator .sort-tri-active.sort-tri-down{border-top-color:var(--grid-primary, #6750a4)}.sortable-header .sort-indicator .sort-priority{font-size:9px;font-weight:600;color:var(--grid-primary, #6750a4);line-height:1;min-width:12px;text-align:center}.sortable-header:hover .sort-indicator,.sortable-header.sort-asc .sort-indicator,.sortable-header.sort-desc .sort-indicator{opacity:1}.sortable-header:hover .sort-indicator .sort-tri:not(.sort-tri-active){opacity:.6}.sort-asc,.sort-desc{background-color:var(--grid-surface-container-low, rgba(103, 80, 164, .04))}.dragging{opacity:1;background-color:var(--grid-surface-container);box-shadow:var(--grid-elevation-2)}.drag-over{background-color:var(--grid-surface-container);border-color:var(--grid-primary)}.data-cell{background-color:transparent;color:var(--grid-on-surface);font-family:var(--grid-font-family);font-size:var(--grid-font-size-body);font-feature-settings:var(--grid-font-feature-numeric);padding:0 var(--grid-cell-padding-x)}.cell-content{align-items:center}.cell-content .mdc-text-field{padding:0px var(--grid-spacing-xxs)!important}.cell-display-text{align-items:center;padding:0px var(--grid-spacing-xs)}.ghost-loading-row{background-color:transparent}.ghost-cell-container{padding:var(--grid-spacing-sm)}.ghost-cell{height:20px;width:100%;background-color:var(--grid-surface-container);animation:pulse 1.5s ease-in-out infinite;border-radius:var(--grid-border-radius)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.column-resizer{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background-color:transparent;transition:background-color .2s ease}.column-resizer:hover{background-color:var(--grid-primary)}.group-separator{height:var(--grid-spacing-sm);background-color:var(--grid-surface-variant)}.group-separator .separator-cell{background-color:var(--grid-surface-variant);border:none;height:var(--grid-spacing-sm)}.error-state{background-color:var(--grid-error-container);color:var(--grid-error);border-color:var(--grid-error)}.error-message{background-color:var(--grid-error);color:#fff;padding:var(--grid-spacing-sm);border-radius:var(--grid-border-radius);font-size:var(--grid-font-size-caption)}.incremental-row-container .eru-grid-table tbody,.incremental-row-container .eru-grid-table{position:relative}.incremental-row-container .eru-grid-table.show-column-lines{border-right:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important;border-top:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table.show-column-lines:not(.freeze-header){border-bottom:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table:not(.show-column-lines){border:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table thead:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:calc(var(--grid-divider-width, 1px) * 2);background-color:var(--grid-divider-color, var(--grid-outline, #e0e0e0));pointer-events:none;z-index:10}.incremental-row-container .eru-grid-table.show-column-lines thead th,.incremental-row-container .eru-grid-table.show-column-lines tbody td{border-left:var(--grid-divider-width, 1px) solid var(--grid-divider-color, var(--grid-outline, #e0e0e0))!important}.incremental-row-container .eru-grid-table.show-row-lines thead th,.incremental-row-container .eru-grid-table.show-row-lines tbody td{border-bottom:var(--grid-divider-width, 1px) solid var(--grid-divider-color, var(--grid-outline, #e0e0e0))!important}@media(max-width:768px){.incremental-row-container{height:600px}.eru-grid-table th,.eru-grid-table td{font-size:var(--grid-font-size-caption)}.checkbox-column{width:40px;min-width:40px;max-width:40px}}@media(prefers-contrast:high){.eru-grid-table th,.eru-grid-table td{border-width:2px}.row-item:hover{border-width:2px;border-color:var(--grid-primary)}}@media(prefers-reduced-motion:reduce){.row-item,.column-drag-handle,.ghost-cell{transition:none;animation:none}}.pivot-table .nested-header{text-align:center;font-weight:600;background:var(--grid-surface-container)}.pivot-table .nested-header.row-dimension-header{background:var(--grid-surface-container);font-weight:600}.pivot-table .pivot-header-leafcols{padding:0;margin:0;height:0}.pivot-table .pivot-header-level.level-0 .nested-header{font-size:14px;padding:12px 8px}.pivot-table .pivot-header-level.level-1 .nested-header{font-size:13px;padding:10px 6px}.pivot-table .pivot-header-level.level-2 .nested-header{font-size:12px;padding:8px 4px}.pivot-table .nested-header:hover{background:var(--grid-surface-variant);color:var(--grid-primary);transition:all .2s ease}.pivot-table .pivot-cell.aggregated-value{font-weight:500;font-family:Roboto Mono,monospace}.pivot-table .pivot-cell-content{display:flex;justify-content:center;align-items:center;min-height:38px}.pivot-table .pivot-repeated-value .cell-content,.pivot-table .pivot-repeated-value .pivot-cell-content{visibility:hidden}.pivot-table .pivot-group-start.row-dimension-cell{border-top:1px solid var(--grid-outline, #79757f)}.pivot-mode .incremental-row-container{display:flex;flex-direction:column;height:auto;max-height:85vh;overflow:auto}.pivot-mode .h-shell{position:relative;width:calc(100% - var(--scrollbar-width, 17px))!important;top:0;z-index:1;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .h-shell::-webkit-scrollbar{display:none}.pivot-mode .gt-shell{position:relative;bottom:50px;flex-shrink:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .gt-shell::-webkit-scrollbar{display:none}.pivot-mode .gt-shell table{border-bottom:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.pivot-mode .gt-shell.adjust-bottom-vs{bottom:66px!important}.pivot-mode .gt-shell.adjust-bottom:not(.adjust-bottom-vs){bottom:calc(66px - var(--scrollbar-width, 17px))!important}.pivot-mode .header-shell{flex-shrink:0;width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .header-shell::-webkit-scrollbar{display:none}.pivot-mode .header-shell.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.pivot-mode .header-shell .eru-grid-table{margin-bottom:0;width:100%;table-layout:fixed}.pivot-mode .header-shell .eru-grid-table thead{background:var(--grid-surface-container)}.pivot-mode .header-shell .eru-grid-table thead th{background:var(--grid-surface-container);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .header-shell .eru-grid-table thead th.sticky-column{position:sticky;background:var(--grid-surface-container);z-index:111}.pivot-mode .header-shell .eru-grid-table tbody td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-container{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.pivot-mode .pivot-table{width:auto!important;min-width:100%!important;table-layout:fixed!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex:none!important;flex-shrink:0!important;flex-grow:0!important}.pivot-mode .pivot-table td,.pivot-mode .pivot-table th{box-sizing:border-box!important;flex:none!important;flex-shrink:0!important;flex-grow:0!important;word-wrap:break-word!important;word-break:break-all!important}.pivot-mode .pivot-table{table-layout:fixed!important;width:100%!important}.pivot-mode .pivot-table *{max-width:var(--col-width)!important;box-sizing:border-box!important}.pivot-mode .pivot-table colgroup{width:100%!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex-basis:var(--col-width)!important;flex:0 0 var(--col-width)!important}.pivot-mode .pivot-table table{width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important}.pivot-mode .pivot-table[style*=--table-total-width]{width:var(--table-total-width)!important;min-width:var(--table-total-width)!important;max-width:var(--table-total-width)!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex:0 0 var(--col-width)!important;flex-basis:var(--col-width)!important;flex-grow:0!important;flex-shrink:0!important;overflow:hidden!important}.pivot-mode .pivot-table tbody td,.pivot-mode .pivot-table thead th{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.pivot-mode .pivot-table .cell-content,.pivot-mode .pivot-table data-cell{width:100%!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important}.pivot-mode .pivot-table table{width:var(--table-total-width)!important;min-width:var(--table-total-width)!important;max-width:var(--table-total-width)!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important;word-wrap:break-word!important;word-break:break-all!important}.pivot-mode .pivot-tbody tr.pivot-row{min-height:var(--grid-data-row-height, 50px)!important;height:var(--grid-data-row-height, 50px)!important}.pivot-mode .pivot-tbody tr.pivot-row:hover{background-color:var(--grid-surface-variant)}.pivot-mode .pivot-tbody tr.pivot-row:nth-child(2n){background-color:#00000005}.pivot-mode .pivot-tbody tr.pivot-row td{min-height:var(--grid-data-row-height, 50px)!important;height:var(--grid-data-row-height, 50px)!important;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-tbody tr.pivot-row td .cell-content{min-height:calc(var(--grid-data-row-height, 50px) - 2px);display:flex;align-items:center;justify-content:center}.pivot-mode .pivot-tbody tr.pivot-row td .cell-content data-cell{width:100%;min-height:calc(var(--grid-data-row-height, 50px) - 4px);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.pivot-mode .pivot-cell{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-cell.aggregated-value{font-weight:500;font-family:Roboto Mono,monospace}.pivot-mode .pivot-cell .cell-content{display:flex;justify-content:center;align-items:center;min-height:var(--grid-header-row-height, 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.pivot-mode .pivot-table .subtotal-row{background-color:var(--grid-surface-container)!important;font-weight:600}.pivot-mode .pivot-table .subtotal-row td{background-color:var(--grid-surface-container);color:var(--grid-on-surface-variant)}.pivot-mode .pivot-table .subtotal-row td:first-child{color:var(--grid-primary)}.pivot-mode .pivot-table .subtotal-row td.aggregated-value{font-weight:500;color:var(--grid-primary)}.pivot-mode .pivot-table .subtotal-row:hover{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .subtotal-row:hover td{background-color:var(--grid-surface-container-high)}.pivot-mode .pivot-table .subtotal-bold td{font-weight:600!important;font-style:normal!important}.pivot-mode .pivot-table .subtotal-bold td.aggregated-value{font-weight:600!important}.pivot-mode .pivot-table .subtotal-italic td{font-style:italic!important}.pivot-mode .pivot-table .subtotal-italic td:first-child{font-weight:600!important}.pivot-mode .pivot-table .subtotal-italic td.aggregated-value{font-style:italic!important;font-weight:500!important}.pivot-mode .pivot-table .subtotal-highlighted{background-color:var(--grid-surface-variant)!important}.pivot-mode .pivot-table .subtotal-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:700!important;font-style:normal!important;color:var(--grid-primary)!important}.pivot-mode .pivot-table .subtotal-highlighted td.aggregated-value{font-weight:500!important;color:var(--grid-primary)!important}.pivot-mode .pivot-table .subtotal-highlighted:hover,.pivot-mode .pivot-table .subtotal-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .grand-total-row{background-color:var(--grid-surface-container-high)!important;font-weight:700;font-size:var(--grid-font-size-body)}.pivot-mode .pivot-table .grand-total-row td{background-color:var(--grid-surface-container-high)!important;color:var(--grid-on-surface)}.pivot-mode .pivot-table .grand-total-row td:first-child{font-style:normal;font-weight:800;color:var(--grid-primary)}.pivot-mode .pivot-table .grand-total-row td.aggregated-value{font-weight:500;color:var(--grid-primary);font-family:Roboto Mono,monospace}.pivot-mode .pivot-table .grand-total-row:hover,.pivot-mode .pivot-table .grand-total-row:hover td{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .grand-total-bold td{font-weight:700!important;font-style:normal!important}.pivot-mode .pivot-table .grand-total-bold td.aggregated-value{font-weight:700!important}.pivot-mode .pivot-table .grand-total-italic td,.pivot-mode .pivot-table .grand-total-italic td.aggregated-value{font-style:italic!important;font-weight:500!important}.pivot-mode .pivot-table .grand-total-highlighted{background-color:var(--grid-primary)!important;box-shadow:var(--grid-elevation-2)!important}.pivot-mode .pivot-table .grand-total-highlighted td{background-color:var(--grid-primary)!important;color:var(--grid-on-primary)!important;font-weight:500!important;font-style:normal!important}.pivot-mode .pivot-table .grand-total-highlighted td.aggregated-value{color:var(--grid-on-primary)!important;font-weight:500!important}.pivot-mode .pivot-table .grand-total-highlighted:hover,.pivot-mode .pivot-table .grand-total-highlighted:hover td{background-color:var(--grid-primary)!important}.pivot-mode .pivot-table .collapsible-header{position:relative}.pivot-mode .pivot-table .collapsible-header .header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--grid-spacing-xs);padding:var(--grid-spacing-xs) var(--grid-spacing-sm)}.pivot-mode .pivot-table .collapsible-header .header-label{flex:1;font-weight:600}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn{background:none;border:none;cursor:pointer;padding:var(--grid-spacing-xxs);margin:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--grid-border-radius);color:var(--grid-on-surface-variant);transition:all .2s ease;font-size:12px;font-weight:600}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn:hover{background-color:var(--grid-surface-container);color:var(--grid-primary);transform:scale(1.1)}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn:focus{outline:2px solid var(--grid-primary);outline-offset:1px}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn .collapse-icon{display:block;line-height:1;font-family:monospace;font-size:14px}.pivot-mode .pivot-table .collapsible-header.expanded .collapse-toggle-btn .collapse-icon{color:var(--grid-primary)}.pivot-mode .pivot-table .collapsible-header.collapsed{background-color:var(--grid-surface-variant)}.pivot-mode .pivot-table .collapsible-header.collapsed .header-label{font-style:italic;color:var(--grid-on-surface-variant)}.pivot-mode .pivot-table .collapsible-header.collapsed .collapse-toggle-btn .collapse-icon{color:var(--grid-outline)}.pivot-mode .pivot-table .collapsible-header:hover{background-color:var(--grid-surface-container)}.pivot-mode .pivot-table .collapsible-header:hover .header-label{color:var(--grid-on-surface)}.pivot-mode .pivot-table .pivot-single-table{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;min-height:var(--table-min-height)!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container{flex-shrink:0;background:var(--grid-surface)!important;overflow-x:auto;overflow-y:hidden;min-height:100px!important;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table{width:auto;min-width:100%;height:auto!important;min-height:100px!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table th{background:var(--grid-surface-container)!important;padding:8px 6px!important;white-space:nowrap;min-width:50px;min-height:40px!important;height:auto!important;position:relative;visibility:visible!important;color:var(--grid-on-surface)!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table th.sticky-column{position:sticky!important;background:var(--grid-surface-container)!important;border-right:2px solid var(--grid-primary)!important;box-shadow:2px 0 4px #0000001a;z-index:101!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container{flex:1;overflow:auto;min-height:300px!important;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-viewport{height:100%!important;width:100%!important;overflow-x:auto!important;overflow-y:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table{width:auto;min-width:100%;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table td,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table td{padding:8px 6px!important;white-space:nowrap;min-width:50px;min-height:32px!important;height:auto!important;background:var(--grid-surface)!important;color:var(--grid-on-surface)!important;visibility:visible!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table td.sticky-column,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table td.sticky-column{position:sticky!important;background:var(--grid-surface-container)!important;border-right:2px solid var(--grid-primary)!important;box-shadow:2px 0 4px #0000001a;z-index:100!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table tbody tr,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table tbody tr{height:auto!important;min-height:50px!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table tbody tr.pivot-row,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table tbody tr.pivot-row{visibility:visible!important;display:table-row!important}.pivot-mode .pivot-table .collapsed-column-group{background-color:var(--grid-surface-container);border-left:3px solid var(--grid-primary)}.pivot-mode .pivot-table .collapsed-column-group:hover{background-color:var(--grid-surface-container-high)}.pivot-row.subtotal-row{background-color:var(--grid-surface-variant);font-weight:500}.pivot-row.subtotal-row.subtotal-bold{font-weight:500}.pivot-row.subtotal-row.subtotal-italic{font-style:italic}.pivot-row.subtotal-row.subtotal-highlighted{background-color:var(--grid-primary);color:var(--grid-on-primary)}.pivot-row.grand-total-row{background-color:var(--grid-surface-container);font-weight:600}.pivot-row.grand-total-row.grand-total-bold{font-weight:800}.pivot-row.grand-total-row.grand-total-italic{font-style:italic}.pivot-row.grand-total-row.grand-total-highlighted{background-color:var(--grid-primary);color:var(--grid-on-primary)}.pivot-row.first-visible-row{background-color:#6750a41a!important;position:relative}.pivot-row.first-visible-row:before{content:\"\\1f441\\fe0f  First Visible\";position:absolute;top:-20px;left:0;background:var(--grid-primary);color:var(--grid-on-primary);padding:2px 6px;font-size:10px;border-radius:2px;z-index:1000}.header-wrap-text{white-space:pre-wrap;word-break:auto-phrase}.group-header-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding-right:12px}.custom-collapse-header{background-color:var(--grid-surface-variant);padding:8px 20px;border-top-left-radius:12px;border-top-right-radius:12px;cursor:pointer;display:flex;width:fit-content;align-items:center;-webkit-user-select:none;user-select:none;min-width:200px;margin-bottom:10px;position:sticky;left:1px;z-index:116}.custom-collapse-header .collapse-arrow{display:inline-block;margin-right:8px;font-size:12px;color:var(--grid-on-surface-variant);transition:transform .2s ease;transform:rotate(0)}.custom-collapse-header .collapse-arrow.rotate-arrow{transform:rotate(270deg)}.custom-collapse-header .f-12{font-size:12px;color:var(--grid-on-surface)}.custom-collapse-header .group-sort-indicator{display:inline-flex;align-items:center;margin-left:8px}.custom-collapse-header .group-sort-indicator .sort-triangles{display:flex;flex-direction:column;align-items:center;gap:2px}.custom-collapse-header .group-sort-indicator .sort-tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;cursor:pointer;transition:border-color .15s ease}.custom-collapse-header .group-sort-indicator .sort-tri-up{border-bottom:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.custom-collapse-header .group-sort-indicator .sort-tri-down{border-top:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.custom-collapse-header .group-sort-indicator .sort-tri-active{opacity:1}.custom-collapse-header .group-sort-indicator .sort-tri-active.sort-tri-up{border-bottom-color:var(--grid-primary, #6750a4)}.custom-collapse-header .group-sort-indicator .sort-tri-active.sort-tri-down{border-top-color:var(--grid-primary, #6750a4)}.excel-download-icon{cursor:pointer}.excel-download-icon:hover{opacity:.75}.excel-download-bar{display:flex;justify-content:flex-end;padding:4px 12px;flex-shrink:0}.table-mode .header-shell{flex-shrink:0;width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.table-mode .header-shell::-webkit-scrollbar{display:none}.table-mode .header-shell.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.table-mode .subtotal-row{background-color:var(--grid-surface-container)!important;font-weight:600}.table-mode .subtotal-row td{background-color:var(--grid-surface-container);color:var(--grid-on-surface-variant)}.table-mode .subtotal-row td:first-child{color:var(--grid-primary)}.table-mode .subtotal-row td.subtotal-cell{font-weight:500}.table-mode .subtotal-row td.subtotal-cell .subtotal-label{font-weight:600;color:var(--grid-primary)}.table-mode .subtotal-row:hover{background-color:var(--grid-surface-container-high)!important}.table-mode .subtotal-row:hover td{background-color:var(--grid-surface-container-high)}.table-mode .subtotal-row.subtotal-bold td{font-weight:600!important;font-style:normal!important}.table-mode .subtotal-row.subtotal-italic td{font-style:italic!important}.table-mode .subtotal-row.subtotal-italic td:first-child{font-weight:600!important}.table-mode .subtotal-row.subtotal-highlighted{background-color:var(--grid-surface-variant)!important}.table-mode .subtotal-row.subtotal-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:700!important;font-style:normal!important;color:var(--grid-primary)!important}.table-mode .subtotal-row.subtotal-highlighted:hover,.table-mode .subtotal-row.subtotal-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.table-mode .grand-total-row{background-color:var(--grid-surface-container-high)!important;font-weight:700}.table-mode .grand-total-row td{background-color:var(--grid-surface-container-high);color:var(--grid-on-surface)}.table-mode .grand-total-row td:first-child{color:var(--grid-primary)}.table-mode .grand-total-row td.grand-total-cell{font-weight:600}.table-mode .grand-total-row td.grand-total-cell .grand-total-label{font-weight:700;color:var(--grid-primary)}.table-mode .grand-total-row:hover{background-color:var(--grid-surface-container-high)!important}.table-mode .grand-total-row:hover td{background-color:var(--grid-surface-container-high)}.table-mode .grand-total-row.grand-total-bold td{font-weight:700!important;font-style:normal!important}.table-mode .grand-total-row.grand-total-italic td{font-style:italic!important}.table-mode .grand-total-row.grand-total-italic td:first-child{font-weight:700!important}.table-mode .grand-total-row.grand-total-highlighted{background-color:var(--grid-surface-variant)!important}.table-mode .grand-total-row.grand-total-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:800!important;font-style:normal!important;color:var(--grid-primary)!important}.table-mode .grand-total-row.grand-total-highlighted:hover,.table-mode .grand-total-row.grand-total-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.table-mode .subtotal-row-shell{width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.table-mode .subtotal-row-shell::-webkit-scrollbar{display:none}.board-mode-host{overflow:hidden;display:flex;flex-direction:column;max-height:var(--grid-height, 600px)}.board-mode-host .board-view-container{display:flex;flex-direction:column;flex:1;min-height:0}.board-mode-host .board-sort-bar{display:flex;align-items:center;gap:6px;padding:8px 16px;flex-shrink:0;border-bottom:1px solid var(--grid-outline-variant, #cac4d0);background:var(--grid-surface, #fffbfe);overflow-x:auto}.board-mode-host .board-sort-bar .board-sort-label{font-size:12px;font-weight:500;color:var(--grid-on-surface-variant, #49454f);white-space:nowrap}.board-mode-host .board-sort-bar .board-sort-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;border:1px solid var(--grid-outline-variant, #cac4d0);background:var(--grid-surface, #fffbfe);color:var(--grid-on-surface, #1d1b20);font-size:12px;white-space:nowrap}.board-mode-host .board-sort-bar .board-sort-chip-active{background:var(--grid-surface-container);border-color:var(--grid-outline, #79757f);color:var(--grid-on-surface, #1d1b20)}.board-mode-host .board-sort-bar .board-sort-chip-label{pointer-events:none}.board-mode-host .board-sort-bar .board-sort-chip-arrow{font-size:10px;line-height:1;cursor:pointer;padding:2px;border-radius:4px}.board-mode-host .board-sort-bar .board-sort-chip-arrow:hover{background:#00000014}.board-mode-host .board-sort-bar .board-sort-chip-priority{font-size:9px;font-weight:700;background:var(--grid-primary, #6750a4);color:var(--grid-on-primary, #ffffff);border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}.board-mode-host .board-sort-bar .board-sort-chip-remove{font-size:10px;cursor:pointer;padding:2px;border-radius:4px;color:var(--grid-on-surface-variant, #49454f)}.board-mode-host .board-sort-bar .board-sort-chip-remove:hover{background:#00000014;color:var(--grid-error, #b3261e)}.board-mode-host .board-sort-bar .board-sort-add-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;border:1px dashed var(--grid-outline-variant, #cac4d0);background:transparent;color:var(--grid-on-surface-variant, #49454f);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease}.board-mode-host .board-sort-bar .board-sort-add-btn .board-sort-add-icon{font-size:14px;width:14px;height:14px}.board-mode-host .board-sort-bar .board-sort-add-btn:hover{background:var(--grid-surface-container-low, #f7f2fa);border-color:var(--grid-primary, #6750a4);color:var(--grid-primary, #6750a4)}.board-mode-host .board-sort-bar .board-sort-clear{display:inline-flex;align-items:center;padding:4px 10px;border-radius:16px;border:1px solid var(--grid-error, #b3261e);background:transparent;color:var(--grid-error, #b3261e);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s ease}.board-mode-host .board-sort-bar .board-sort-clear:hover{background:#b3261e14}.board-mode-host .board-columns-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--board-col-min-width, 300px),var(--board-col-max-width, 1fr)));grid-auto-rows:auto;align-items:start;gap:16px;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;align-content:start;justify-content:start}.board-mode-host .board-columns-wrapper.board-columns-nowrap{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:auto;grid-auto-rows:auto;grid-auto-columns:minmax(var(--board-col-min-width, 300px),var(--board-col-max-width, 1fr));overflow-x:auto;overflow-y:hidden}.board-mode-host .board-column{max-height:var(--board-column-height, 420px);min-width:0;display:flex;flex-direction:column;background:var(--grid-surface-container, #f3edf7);border-radius:12px;min-height:0;overflow:hidden}.board-mode-host .board-column.board-column-accented{border-top:3px solid var(--board-group-color, transparent)}.board-mode-host .board-column .column-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;font-weight:600;flex-shrink:0;background-color:transparent}.board-mode-host .board-column .column-header:hover{background-color:transparent}.board-mode-host .board-column .column-header .column-header-title{font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.2;color:var(--grid-on-surface, #1d1b20);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-mode-host .board-column .column-header .column-header-title-cell{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:clip}.board-mode-host .board-column .column-header .column-header-title-cell data-cell,.board-mode-host .board-column .column-header .column-header-title-cell .data-cell-component,.board-mode-host .board-column .column-header .column-header-title-cell .container{padding:0!important;margin:0!important;border:none!important;background:transparent!important;min-height:0!important;height:auto!important;width:auto!important;max-width:100%!important;overflow:visible!important}.board-mode-host .board-column .column-header .column-header-title-cell .status-display,.board-mode-host .board-column .column-header .column-header-title-cell .status-display-content,.board-mode-host .board-column .column-header .column-header-title-cell .status-text,.board-mode-host .board-column .column-header .column-header-title-cell .tag-display,.board-mode-host .board-column .column-header .column-header-title-cell .tag-text{max-width:none!important;overflow:visible!important;text-overflow:clip!important}.board-mode-host .board-column .column-header .column-header-count{font-size:10px;font-weight:600;color:var(--eru-board-count-color, var(--grid-on-surface-variant, #49454f));background:var(--eru-board-count-bg, var(--grid-surface-variant, #e7e0ec));border-radius:10px;padding:3px 10px;white-space:nowrap;flex-shrink:0}.board-mode-host .board-column-body{flex:0 1 auto;min-height:0}.board-mode-host .board-card-container{box-sizing:border-box;overflow:hidden;border-radius:8px;transition:background-color .15s ease,box-shadow .15s ease}.board-mode-host .board-card-container.show-row-lines{box-shadow:inset 0 0 0 var(--grid-divider-width, 1px) var(--grid-divider-color, var(--grid-outline, #e0e0e0))}.board-mode-host .board-card-container:hover{background-color:var(--eru-board-card-hover-bg, color-mix(in srgb, var(--mat-sys-primary, #1976d2) 8%, transparent))}.board-mode-host .board-card-container.selected{background-color:var(--eru-board-card-selected-bg, color-mix(in srgb, var(--mat-sys-primary, #1976d2) 14%, transparent));box-shadow:inset 0 0 0 2px var(--eru-board-card-selected-outline, var(--mat-sys-primary, #1976d2))}.board-mode-host .board-card{height:calc(100% - 8px);overflow:hidden;cursor:pointer}.board-mode-host .board-card mat-card-title{font-size:13px}.board-mode-host .board-card mat-card-subtitle{font-size:12px}.board-mode-host .board-card-field{display:flex;flex-direction:column;margin-bottom:4px}.board-mode-host .board-field-label{font-size:10px;color:var(--grid-on-surface-variant, #49454f);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.board-mode-host .board-ghost-card{margin:8px;padding:16px;background:var(--grid-surface, #fef7ff);border-radius:8px;animation:board-pulse 1.5s ease-in-out infinite}.board-mode-host .board-ghost-line{height:12px;background:var(--grid-surface-variant, #e7e0ec);border-radius:4px;margin-bottom:8px}.board-mode-host .board-ghost-line--short{width:60%}@keyframes board-pulse{0%,to{opacity:1}50%{opacity:.5}}th.row-expand-toggle,td.row-expand-toggle{width:40px!important;min-width:40px!important;max-width:40px!important;padding:0!important;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box}.row-expand-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:var(--grid-on-surface-variant);transition:transform .15s ease-in-out}.row-expand-icon.expanded{transform:rotate(90deg)}.row-detail{background:var(--grid-surface-container)}.row-detail .row-detail-cell{padding:var(--grid-spacing-sm) var(--grid-spacing-md);border-bottom:1px solid var(--grid-outline-variant)}.row-detail .row-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--grid-spacing-sm) var(--grid-spacing-md)}.row-detail .row-detail-field{display:flex;flex-direction:column;gap:var(--grid-spacing-xxs);min-width:0}.row-detail .row-detail-label{font-size:var(--grid-font-size-caption);color:var(--grid-on-surface-variant);font-weight:500}.row-detail .row-detail-value{min-width:0}.row-detail .row-detail-value data-cell{display:block;width:100%}\n"] }]
+                    ], template: "<!-- <div style=\"background: #f0f0f0; font-size: 12px; border-bottom: 1px solid #ccc;\">\ncurrentPivotScrollIndex {{currentPivotScrollIndex()}} |\nfirstDataRowIndex {{firstDataRowIndex()}} |\nfirstTr {{firstTr}} |\nmaxDepth {{maxDepth()}}\n</div> -->\n<ng-template #excelDownloadIcon>\n  <svg class=\"excel-download-icon\" title=\"Download Excel\" (click)=\"onExcelDownloadClick($event)\"\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"24px\" height=\"24px\">\n    <path fill=\"#169154\" d=\"M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z\" />\n    <path fill=\"#18482a\" d=\"M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z\" />\n    <path fill=\"#0c8045\" d=\"M14 15.003H29V24.005000000000003H14z\" />\n    <path fill=\"#17472a\" d=\"M14 24.005H29V33.055H14z\" />\n    <g>\n      <path fill=\"#29c27f\" d=\"M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z\" />\n      <path fill=\"#27663f\" d=\"M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z\" />\n      <path fill=\"#19ac65\" d=\"M29 15.003H44V24.005000000000003H29z\" />\n      <path fill=\"#129652\" d=\"M29 24.005H44V33.055H29z\" />\n    </g>\n    <path fill=\"#0c7238\"\n      d=\"M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z\" />\n    <path fill=\"#fff\"\n      d=\"M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z\" />\n  </svg>\n</ng-template>\n\n<div class=\"incremental-row-container eru-grid\" #rowContainer [class.pivot-mode]=\"gridStore.isPivotMode()\"\n  [class.table-mode]=\"!gridStore.isPivotMode() && !isBoardMode()\" [class.board-mode-host]=\"isBoardMode()\">\n  <eru-column-design-panel></eru-column-design-panel>\n  <!-- Pivot Mode Template -->\n  @if (gridStore.isPivotMode()) {\n  <ng-container>\n    <div class=\"pivot-container\" style=\"display: flex; flex-direction: column; height: 100%;\"\n      [style]=\"'--table-min-height: ' + getInitialMinHeightPx() + 'px; --table-total-width: ' + getInitialTotalWidth() + 'px'\">\n      @if(showExcelDownload()) {\n      <div class=\"excel-download-bar\">\n        <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n      </div>\n      }\n      <!-- Debug info for first visible row -->\n\n\n      <div class=\"pivot-single-table\"\n        style=\"height: 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column;\">\n        @if (freezeHeader()) {\n        <div #headerScroller class=\"header-shell\">\n          <table class=\"eru-grid-table pivot-table\"\n            [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <!-- Column Groups for consistent width -->\n            <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n            <ng-container *ngTemplateOutlet=\"pivotTableHead\"></ng-container>\n            @if(grandTotalPosition() === 'before' && freezeGrandTotal()) {\n            <ng-container *ngTemplateOutlet=\"pivotGrandTotal\"></ng-container>\n            }\n          </table>\n        </div>\n        }\n        <!-- Virtual Scrolled Table Body -->\n        <div>\n          <cdk-virtual-scroll-viewport #vp [itemSize]=\"dataRowHeight()\" class=\"viewport pivot-viewport\"\n            [class.apply-cdk-width]=\"applyCdkWidth()\" (scrolledIndexChange)=\"onPivotScroll($event)\"\n            (scroll)=\"onBodyScroll($event)\" style=\"overflow: auto;\">\n            <table class=\"eru-grid-table pivot-table\"\n              [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n              [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n              <!-- Column Groups for consistent width -->\n              <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n              @if (!freezeHeader()) {\n              <ng-container *ngTemplateOutlet=\"pivotTableHead\"></ng-container>\n              }\n              <!-- Table Body with Virtual Scrolling -->\n              <tbody class=\"pivot-tbody\">\n\n                <tr *cdkVirtualFor=\"let pivotRow of gridStore.pivotDisplayData(); \n                           trackBy: trackByPivotRowFn; \n                           let i = index\" class=\"pivot-row\" [class.subtotal-row]=\"pivotRow._isSubtotal\"\n                  [class.grand-total-row]=\"pivotRow._isGrandTotal\"\n                  [class.subtotal-bold]=\"pivotRow._isSubtotal && subTotalStyle() === 'bold'\"\n                  [class.subtotal-italic]=\"pivotRow._isSubtotal && subTotalStyle() === 'italic'\"\n                  [class.subtotal-highlighted]=\"pivotRow._isSubtotal && subTotalStyle() === 'highlighted'\"\n                  [class.grand-total-bold]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'bold'\"\n                  [class.grand-total-italic]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'italic'\"\n                  [class.grand-total-highlighted]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'highlighted'\"\n                  [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\" [style.cursor]=\"cursorOnHover() || null\" [attr.data-pivot-row]=\"i\">\n                  @if ((!pivotRow._isGrandTotal && freezeGrandTotal() ) || (!freezeGrandTotal() )) {\n                  @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n                  <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"pivot-cell\"\n                    [class.row-dimension-cell]=\"isRowDimensionColumn(column.name)\"\n                    [class.column-dimension-cell]=\"!isRowDimensionColumn(column.name)\"\n                    [class.aggregated-value]=\"!isRowDimensionColumn(column.name) && column.datatype === 'number'\"\n                    [class.pivot-repeated-value]=\"isRepeatedDimensionValue(i, column.name)\"\n                    [class.pivot-group-start]=\"isPivotGroupStart(i, column.name)\"\n                    [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n                    [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n                    [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n                    [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 99 : 1\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n                    <div class=\"cell-content pivot-cell-content\">\n                      <data-cell [personCardTemplate]=\"personCardTemplate\" [class.aggregation]=\"!!column.aggregationFunction\" [fieldSize]=\"column.field_size\"\n                        [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\" [value]=\"pivotRow[column.name]\"\n                        [column]=\"column\" [drillable]=\"column.enableDrilldown || false\" [mode]=\"mode()\"\n                        [isEditable]=\"isEditable()\" [id]=\"'pivot_' + i + '_' + column.name\" [eruGridStore]=\"gridStore\"\n                        [row]=\"pivotRow\">\n                      </data-cell>\n                    </div>\n                  </td>\n                  }\n                  } @else {\n                  <td [style.height.px]=\"dataRowHeight()\" [attr.colspan]=\"getLeafColumns().length\"> </td>\n                  }\n                </tr>\n              </tbody>\n            </table>\n          </cdk-virtual-scroll-viewport>\n\n        </div>\n        @if (freezeGrandTotal() && grandTotalPosition() === 'after') {\n        <div #gtScroller class=\"header-shell gt-shell\" [class.adjust-bottom]=\"!applyCdkWidth()\"\n          [class.adjust-bottom-vs]=\"adjustScrollWidth()\">\n          <table class=\"eru-grid-table pivot-table\"\n            [style]=\"'width: auto; min-width: 100%; --table-total-width: ' + getInitialTotalWidth() + 'px'\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <ng-container *ngTemplateOutlet=\"pivotColGroup\"></ng-container>\n\n            <ng-container *ngTemplateOutlet=\"pivotGrandTotal\"></ng-container>\n\n          </table>\n        </div>\n        }\n\n\n      </div>\n    </div>\n  </ng-container>\n  } @else if (isBoardMode()) {\n  <!-- Board Mode Template -->\n  <div class=\"board-view-container\">\n    @if(showExcelDownload()) {\n    <div class=\"excel-download-bar\">\n      <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n    </div>\n    }\n    @if(showSortBar()) {\n    <div class=\"board-sort-bar\">\n      <span class=\"board-sort-label\">Sort by:</span>\n      @for (entry of gridStore.sortColumns(); track getFieldName(entry)) {\n      <span class=\"board-sort-chip board-sort-chip-active\">\n        <span class=\"board-sort-chip-label\">{{getColumnLabel(entry)}}</span>\n        <span class=\"board-sort-chip-arrow\" (click)=\"onBoardSortChipToggle($event, entry)\">\n          @if(!entry.startsWith('-')) { \u25B2 } @else { \u25BC }\n        </span>\n        @if(gridStore.sortColumns().length > 1) {\n        <span class=\"board-sort-chip-priority\">{{getSortPriority(getFieldName(entry))}}</span>\n        }\n        <span class=\"board-sort-chip-remove\" (click)=\"onBoardSortChipRemove($event, entry)\">\u2715</span>\n      </span>\n      }\n      <button class=\"board-sort-add-btn\" [matMenuTriggerFor]=\"sortFieldMenu\">\n        <mat-icon class=\"board-sort-add-icon\">add</mat-icon> Add field\n      </button>\n      <mat-menu #sortFieldMenu=\"matMenu\" class=\"board-sort-menu\">\n        @for (column of columns(); track column.name) {\n        <button mat-menu-item (click)=\"onBoardSortFieldSelect(column)\"\n          [disabled]=\"getSortDirection(column.name) !== null\">\n          @if(getSortDirection(column.name) !== null) {\n          <mat-icon>check</mat-icon>\n          } @else {\n          <mat-icon></mat-icon>\n          }\n          {{column.label}}\n        </button>\n        }\n      </mat-menu>\n      @if(gridStore.sortColumns().length > 0) {\n      <button class=\"board-sort-clear\" (click)=\"onBoardSortClear()\">\u2715 Clear</button>\n      }\n    </div>\n    }\n    <div class=\"board-columns-wrapper\" [class.board-columns-nowrap]=\"!boardWrapColumns()\">\n      @for (group of groups(); track group.id) {\n      <div class=\"board-column\" [class.board-column-accented]=\"!!boardGroupColor(group)\"\n        [style.--board-group-color]=\"boardGroupColor(group)\">\n        @if (showBoardColumnHeader()) {\n        <div class=\"column-header\">\n          <!-- Render the group value through the same read-only cell renderer a\n               data cell uses, so the grouped field's datatype formats itself\n               (status/tag pills, dates, numbers) instead of printing raw text. -->\n          @if (groupByColumn(); as gcol) {\n            <span class=\"column-header-title column-header-title-cell\">\n              <data-cell\n                [eruGridStore]=\"gridStore\"\n                [column]=\"gcol\"\n                [columnDatatype]=\"gcol.datatype\"\n                [columnName]=\"gcol.name\"\n                [value]=\"group.title\"\n                [id]=\"'board-group-' + group.id\"\n                [fieldSize]=\"0\"\n                [isEditable]=\"false\"\n                [mode]=\"'board-group-header'\">\n              </data-cell>\n            </span>\n          } @else {\n            <span class=\"column-header-title\">{{ group.title }}</span>\n          }\n          <span class=\"column-header-count\">{{ group.currentLoadedRows || 0 }} of {{ group.totalRowCount || 0 }}</span>\n        </div>\n        }\n        <cdk-virtual-scroll-viewport [attr.data-group-id]=\"group.id\" [itemSize]=\"boardCardSlot\" class=\"board-column-body\"\n          [style.height.px]=\"boardColumnBodyHeight(group)\"\n          (scrolledIndexChange)=\"onBoardScrolledIndexChange($event, group)\">\n          <div\n            *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id)(); templateCacheSize: 0\"\n            class=\"board-card-container\"\n            [class.selected]=\"isBoardCardActive(row)\"\n            [class.show-row-lines]=\"showRowLines()\"\n            [style.height.px]=\"boardCardOuterHeight\"\n            [style.padding.px]=\"boardCardPadding\"\n            [style.marginBottom.px]=\"boardCardGap\"\n            [style.cursor]=\"cursorOnHover() || null\"\n            (click)=\"emitRowSelect(row, 'board', group)\">\n            <!-- Custom template when consumer provides boardCardTemplate; default card otherwise -->\n            <ng-container\n              *ngTemplateOutlet=\"boardCardTemplate ?? defaultBoardCard;\n                                 context: { $implicit: row, columns: visibleBoardFields(), group: group }\">\n            </ng-container>\n          </div>\n        </cdk-virtual-scroll-viewport>\n        @if (group.isLoading) {\n        <div class=\"board-ghost-card\">\n          <div class=\"board-ghost-line\"></div>\n          <div class=\"board-ghost-line board-ghost-line--short\"></div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  } @else {\n\n  <!-- Table Mode Template -->\n  @if(showExcelDownload() && !showGroupBar()) {\n  <div class=\"excel-download-bar\">\n    <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n  </div>\n  }\n  <!-- Select-all banner: the header checkbox can only reach loaded pages, so\n       this is where the user says they meant the whole result set. -->\n  @if(showSelectAllBanner()) {\n  <div class=\"selection-banner\">\n    @if(selectAllMatching()) {\n    <span class=\"selection-banner-text\">All {{ totalMatchingCount() }} matching records are selected.</span>\n    <button type=\"button\" class=\"selection-banner-action\" (click)=\"clearRowSelection()\">Clear selection</button>\n    } @else {\n    <span class=\"selection-banner-text\">{{ gridStore.totalSelectedCount() }} selected on this view.</span>\n    <button type=\"button\" class=\"selection-banner-action\" (click)=\"selectAllMatchingRows()\">Select all {{\n      totalMatchingCount() }} matching</button>\n    }\n  </div>\n  }\n  <!-- Scrollable groups container \u2014 plain iteration avoids CDK fixed-height estimation errors -->\n  <div #groupsScrollContainer class=\"groups-scroll-container\" (scroll)=\"onGroupsViewportScroll($event)\">\n\n    @for (group of groups(); track trackByGroupFn($index, group); let i = $index) {\n    <div class=\"group-container\"\n      [attr.data-group-id]=\"group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id\">\n      <!-- Combined sticky header with group info and table -->\n      <div style=\"\n        background:var(--grid-surface);\n        position: sticky;\n        top: 0;\n        z-index: 115;\n      \">\n        @if(showGroupBar()) {\n        <div class=\"group-header-row\">\n          <div class=\"custom-collapse-header\" (click)=\"toggleGroupCollapse(group.id)\">\n            <span class=\"collapse-arrow\" [ngClass]=\"{\n              'rotate-arrow': group.isExpanded,\n            }\">\u25BC</span>\n            <span class=\"f-12\">\n              {{ group?.title || \"\" }}\n              {{ group?.currentLoadedRows || 0 }} -\n              {{ group?.totalRowCount || 0 }} rows...</span>\n            @if(groupByField() && isSortable()) {\n            <span class=\"group-sort-indicator\">\n              <span class=\"sort-triangles\">\n                <span class=\"sort-tri sort-tri-up\" [class.sort-tri-active]=\"getSortDirection(groupByField()!) === 'asc'\"\n                  (click)=\"onGroupSortToggle($event, 'asc')\"></span>\n                <span class=\"sort-tri sort-tri-down\"\n                  [class.sort-tri-active]=\"getSortDirection(groupByField()!) === 'desc'\"\n                  (click)=\"onGroupSortToggle($event, 'desc')\"></span>\n              </span>\n            </span>\n            }\n          </div>\n          @if(i === 0 && showExcelDownload()) {\n          <ng-container *ngTemplateOutlet=\"excelDownloadIcon\"></ng-container>\n          }\n        </div>\n        }\n\n        @if(freezeHeader() && (group.isExpanded || !showGroupBar())) {\n        <div #headerScroller class=\"header-shell\" [attr.data-group-id]=\"'header-shell-' + group.id\"\n          [style]=\"'--table-total-width: ' + getInitialTotalWidth() + 'px'\">\n          <table class=\"eru-grid-table\" [class.freeze-header]=\"freezeHeader()\"\n            [class.show-column-lines]=\"showColumnLines()\" [class.show-row-lines]=\"showRowLines()\">\n            <ng-container *ngTemplateOutlet=\"tableColGroup\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n            <!-- Grand Total row after sticky header (position: before) - only for first group -->\n            @if(enableGrandTotal() && grandTotalPosition() === 'before' && hasGrandTotalData() && i === 0) {\n            <tbody>\n              <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n            </tbody>\n            }\n            <!-- Subtotal row after sticky header (position: before) -->\n            @if(enableRowSubtotals() && subtotalPosition() === 'before' && hasSubtotalData(group)) {\n            <tbody>\n              <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n            </tbody>\n            }\n          </table>\n        </div>\n        }\n      </div>\n      @if(group.isExpanded || !showGroupBar()) {\n      <ng-container>\n        <cdk-virtual-scroll-viewport [attr.data-group-id]=\"group.id\" [itemSize]=\"dataRowHeight()\" class=\"viewport table-viewport\"\n          (scrolledIndexChange)=\"onScroll($event, group)\" (scroll)=\"onTableBodyScroll($event)\"\n          [style]=\"'--table-height: ' + getGroupContentHeight(group.id) + 'px; --table-min-height: ' + getGroupContentHeight(group.id) + 'px; --table-total-width: ' + getInitialTotalWidth() + 'px'\">\n          <div class=\"table-wrapper\">\n            <table class=\"eru-grid-table\" [class.show-column-lines]=\"showColumnLines()\"\n              [class.show-row-lines]=\"showRowLines()\">\n              <ng-container *ngTemplateOutlet=\"tableColGroup\"></ng-container>\n              @if(!freezeHeader()) {\n              <ng-container *ngTemplateOutlet=\"tableHeader\"></ng-container>\n              }\n              <!-- Grand Total row after normal header (position: before) - only for first group -->\n              @if(!freezeHeader() && enableGrandTotal() && grandTotalPosition() === 'before' &&\n              hasGrandTotalData() && i === 0) {\n              <tbody>\n                <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n              </tbody>\n              }\n              <!-- Subtotal row after normal header (position: before) -->\n              @if(!freezeHeader() && enableRowSubtotals() && subtotalPosition() === 'before' &&\n              hasSubtotalData(group)) {\n              <tbody>\n                <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n              </tbody>\n              }\n              <tbody>\n                @if (columns(); as columnsList) {\n                <!--  <tr *ngIf=\"groupItem.type === 'table-header' && groups().length > 1\" style=\"background:#fafafa\">\n                      @if(gridStore.configuration().config.allowSelection) {\n                        <th class=\"checkbox-column\" style=\"text-align: center;\">\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"isGroupSelected(groupItem.group?.id || '')\"\n                            (click)=\"$event.stopPropagation()\"\n                            (change)=\"toggleGroupSelection($event, groupItem.group?.id || '')\"\n                            >\n                        </th>\n                      }\n                      <th *ngFor=\"let column of columns(); trackBy: trackByColumnFn;let i =index\"\n                        style=\"text-align: center;\"\n                        [style.width.px]=\"column.field_size\"\n                        [style.minWidth.px]=\"column.field_size\"\n                        [resizeColumn]=\"true\"\n                        [columnConfig]=\"column\"\n                        [columnDraggable]=\"i\"\n                        class=\"column-header\">\n                        <div class=\"column-drag-handle\"></div>\n                        {{column.label}} {{column.symbol}}\n                      </th>\n                    </tr> -->\n                <!--   @if(getRowsForGroup(group.id).length > 0 && group.isExpanded) { -->\n                <!-- *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id)(); \n          trackBy: trackByRowFn; \n          let i = index\" -->\n                <!--  @for(row of getRowsForGroupSignal(group.id)(); track trackByRowFn($index, row); let i = $index) { -->\n                <ng-container\n                  *cdkVirtualFor=\"let row of getRowsForGroupSignal(group.id === null || group.id === undefined ? '__NULL_GROUP__' : group.id)(); trackBy: trackByRowFn; let i = index\">\n                <tr class=\"row-item\" [attr.data-row-id]=\"i\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\" [style.cursor]=\"cursorOnHover() || null\" (click)=\"emitRowSelect(row, 'table', group)\">\n                  @if(gridStore.configuration().config.allowSelection) {\n                  <td class=\"checkbox-column\" style=\"text-align: center;\">\n                    <input type=\"checkbox\" [checked]=\"isRowSelected(row?.entity_id)\"\n                      (change)=\"toggleRowSelection($event, row)\">\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('before')) {\n                  <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <ng-container\n                      *ngTemplateOutlet=\"actionCell; context: { $implicit: row, mode: 'table', group: group }\"></ng-container>\n                  </td>\n                  }\n                  @if(hasHiddenColumns()) {\n                  <td class=\"row-expand-toggle\" (click)=\"toggleRowExpand(row, i, $event)\">\n                    <mat-icon class=\"row-expand-icon\" [class.expanded]=\"isRowExpanded(row, i)\">chevron_right</mat-icon>\n                  </td>\n                  }\n                  @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n                  <td #cell [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n                    class=\"data-cell\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\"\n                    [matTooltipClass]=\"'error-message'\" [matTooltip]=\"datacell.error()?'Error: ' + datacell.error():''\"\n                    matTooltipPosition=\"below\">\n                    <div class=\"cell-content\">\n                      <data-cell #datacell [personCardTemplate]=\"personCardTemplate\" [cellTemplate]=\"cellTemplate\" [td]=cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\"\n                        [columnName]=\"column.name\" [value]=\"(row?.['entity_data']?.[column.name] ?? row?.[column.name]) || ''\" [column]=\"column\"\n                        [mode]=\"mode()\" [isEditable]=\"isEditable() && column.editable !== false && column.editable !== 'false'\" [drillable]=\"column.enableDrilldown || false\"\n                        [id]=\"i + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"row\"></data-cell>\n                    </div>\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('after')) {\n                  <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <ng-container\n                      *ngTemplateOutlet=\"actionCell; context: { $implicit: row, mode: 'table', group: group }\"></ng-container>\n                  </td>\n                  }\n                </tr>\n                @if(hasHiddenColumns() && isRowExpanded(row, i)) {\n                <tr class=\"row-detail\">\n                  <td class=\"row-detail-cell\" [attr.colspan]=\"rowDetailColspan()\">\n                    <div class=\"row-detail-grid\">\n                      @for (hiddenCol of hiddenColumns(); track trackByColumnFn($index, hiddenCol)) {\n                      <div class=\"row-detail-field\">\n                        <span class=\"row-detail-label\">{{hiddenCol.label}}</span>\n                        <div class=\"row-detail-value\">\n                          <data-cell [cellTemplate]=\"cellTemplate\" [fieldSize]=\"hiddenCol.field_size\" [columnDatatype]=\"hiddenCol.datatype\"\n                            [columnName]=\"hiddenCol.name\" [value]=\"(row?.['entity_data']?.[hiddenCol.name] ?? row?.[hiddenCol.name]) || ''\"\n                            [column]=\"hiddenCol\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n                            [drillable]=\"hiddenCol.enableDrilldown || false\"\n                            [id]=\"'detail_' + i + '_' + hiddenCol.name\" [eruGridStore]=\"gridStore\" [row]=\"row\"></data-cell>\n                        </div>\n                      </div>\n                      }\n                    </div>\n                  </td>\n                </tr>\n                }\n                </ng-container>\n                <!-- } -->\n                <!-- } -->\n                @if(group.isLoading && (group.isExpanded || !showGroupBar())) {\n                @for(i of [].constructor(ghostRows()); let j = $index; track j) {\n                <tr class=\"ghost-loading-row\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n                  @if(gridStore.configuration().config.allowSelection) {\n                  <td class=\"checkbox-column ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n\n                  }\n                  @if(shouldShowActionColumn('before')) {\n                  <td class=\"action-column ghost-cell-container\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @if(hasHiddenColumns()) {\n                  <td class=\"row-expand-toggle ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n                  <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n                    class=\"ghost-cell-container\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                  @if(shouldShowActionColumn('after')) {\n                  <td class=\"action-column ghost-cell-container\" [style.width.px]=\"actionColumnWidth()\"\n                    [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">\n                    <div class=\"ghost-cell\"></div>\n                  </td>\n                  }\n                </tr>\n                }\n                }\n                <!-- <tr\n                    *ngIf=\"getRowsForGroup(group.id).length === 0 && !group.isExpanded\"\n                    class=\"group-separator\"\n                    >\n                    <td [attr.colspan]=\"groupSeperatorColSpan()\" class=\"separator-cell\"></td>\n                  </tr> -->\n                <!-- Subtotal row at end of group (position: after) -->\n                @if(enableRowSubtotals() && subtotalPosition() === 'after' && hasSubtotalData(group)) {\n                <ng-container *ngTemplateOutlet=\"tableSubtotal; context: { group: group }\"></ng-container>\n                }\n                <!-- Grand Total row at end of group (position: after) - only for last group -->\n                @if(enableGrandTotal() && grandTotalPosition() === 'after' && hasGrandTotalData() && i ===\n                groups().length - 1) {\n                <ng-container *ngTemplateOutlet=\"tableGrandTotal\"></ng-container>\n                }\n                }\n              </tbody>\n            </table>\n          </div>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n\n<!-- Pivot Table Header Template -->\n<ng-template #pivotTableHead>\n  <thead [class.eru-wrap-headers]=\"wrapHeaders()\">\n    @if (hasNestedHeaders()) {\n    <ng-container>\n      @for (headerRow of getHeaderRows(); track headerRow; let rowIndex = $index) {\n      <tr class=\"pivot-header pivot-header-container\" [class.pivot-header-level]=\"'level-' + rowIndex\">\n        @for (header of headerRow; track trackByHeaderFn($index, header); let colIndex = $index) {\n        <th [attr.colspan]=\"header.colspan\" [attr.rowspan]=\"header.rowspan\"\n          [resizeColumn]=\"isResizablePivotHeader(header)\"\n          [columnConfig]=\"getFieldForPivotHeader(header) || $any(header)\"\n          class=\"column-header pivot-column-header nested-header\"\n          [class.row-dimension-header]=\"isRowDimensionHeader(header)\"\n          [class.column-dimension-header]=\"!isRowDimensionHeader(header)\" [class.expanded]=\"header.isExpanded\"\n          [class.collapsed]=\"!header.isExpanded\" [class.sticky-column]=\"isStickyColumn(header.name, colIndex)\"\n          [class.design-clickable]=\"isDesignMode()\"\n          [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === designTargetFor($any(header))\"\n          [style.position]=\"isStickyColumn(header.name, colIndex) ? 'sticky' : 'static'\"\n          [style.left.px]=\"getStickyColumnLeft(header.name, colIndex)\"\n          [style.z-index]=\"isStickyColumn(header.name, colIndex) ? 100 : 1\"\n          [style.min-height.px]=\"headerRowHeight()\" style=\"height: auto; padding: 8px 6px;\">\n          <div class=\"header-content\">\n\n            <data-cell [fieldSize]=\"header.field_size\" [columnDatatype]=\"header.dataType\" [columnName]=\"header.name\"\n              [value]=\"header.label\" [column]=\"header\" [frozenGrandTotalCell]=\"true\"\n              [drillable]=\"header.enableDrilldown || false\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n              [id]=\"'pivot_' + $index + '_' + header.name\" [eruGridStore]=\"gridStore\" [row]=\"header\">\n            </data-cell>\n            @if(isDesignMode()) {\n            <mat-icon class=\"design-edit-icon\"\n              [title]=\"isAggregationHeader($any(header)) ? 'Edit aggregation' : 'Edit column'\"\n              (click)=\"onHeaderDesignClick($event, $any(header))\">tune</mat-icon>\n            }\n            <!-- <span class=\"header-label header-wrap-text\">{{header.label}}</span> -->\n            <!-- <button *ngIf=\"!isRowDimensionHeader(header)\"\n                  class=\"collapse-toggle-btn\"\n                  [title]=\"header.isExpanded ? 'Collapse group' : 'Expand group'\"\n                  (click)=\"toggleColumnGroup(header.groupKey)\"\n                  type=\"button\">\n                  <span class=\"collapse-icon\">+</span>\n                </button> -->\n          </div>\n        </th>\n        }\n      </tr>\n      }\n    </ng-container>\n    } @else {\n    <!-- Simple header fallback -->\n    <ng-container>\n      <tr class=\"pivot-header\" [class.freeze-header-enabled]=\"freezeHeader()\">\n        @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n        <th [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\"\n          [resizeColumn]=\"gridStore.isFeatureEnabled('columnResizable')\" [columnConfig]=\"column\"\n          class=\"column-header pivot-column-header\" [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n          [class.design-clickable]=\"isDesignMode()\"\n          [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === designTargetFor(column)\"\n          [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n          [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n          [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 100 : 1\"\n          [style.min-height.px]=\"headerRowHeight()\" style=\"height: auto;padding: 8px 6px\">\n          <!-- Label and control laid out as a row: the label truncates, the\n               control keeps its place. Left as a bare text node the long\n               aggregation labels pushed the icon past the cell edge, where\n               `overflow: hidden` clipped it out of sight entirely. -->\n          <div class=\"pivot-header-content\">\n            <!-- Deliberately not `.column-label`: that class carries the\n                 wrap-headers rule, which broke these labels onto one word per\n                 line. This header truncates, as it did before. -->\n            <span class=\"pivot-header-label\">{{column.label}}</span>\n            @if(isDesignMode()) {\n            <mat-icon class=\"design-edit-icon\"\n              [title]=\"isAggregationHeader(column) ? 'Edit aggregation' : 'Edit column'\"\n              (click)=\"onHeaderDesignClick($event, column)\">tune</mat-icon>\n            }\n          </div>\n        </th>\n        }\n      </tr>\n    </ng-container>\n    }\n\n  </thead>\n</ng-template>\n\n<!-- Column Group Template for consistent column widths -->\n<ng-template #pivotColGroup>\n  <colgroup>\n    @for (column of getLeafColumns(); track trackByColumnFn($index, column)) {\n    <col\n      [style]=\"'width: ' + column.field_size + 'px !important; min-width: ' + column.field_size + 'px !important; max-width: ' + column.field_size + 'px !important; --col-width: ' + column.field_size + 'px'\">\n    }\n  </colgroup>\n</ng-template>\n\n<ng-template #pivotGrandTotal>\n  <tbody class=\"pivot-tbody\">\n    @for (pivotRow of gridStore.pivotGrandTotalData(); track trackByPivotRowFn($index, pivotRow); let i = $index) {\n    <tr class=\"pivot-row grand-total-row\"\n      [class.grand-total-bold]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'bold'\"\n      [class.grand-total-italic]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'italic'\"\n      [class.grand-total-highlighted]=\"pivotRow._isGrandTotal && grandTotalStyle() === 'highlighted'\"\n      [style.height.px]=\"50\" [attr.data-pivot-row]=\"i\">\n      <!--   <td colspan=\"20\">{{pivotRow | json}}</td> -->\n      @for (column of getLeafColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n      <td [attr.rowspan]=\"getEffectiveRowspan(i, column.name)\" [style.width.px]=\"column.field_size\"\n        [style.minWidth.px]=\"column.field_size\" class=\"pivot-cell\"\n        [class.row-dimension-cell]=\"isRowDimensionColumn(column.name)\"\n        [class.column-dimension-cell]=\"!isRowDimensionColumn(column.name)\"\n        [class.aggregated-value]=\"!isRowDimensionColumn(column.name) && column.datatype === 'number'\"\n        [class.rowspan-cell]=\"getEffectiveRowspan(i, column.name) || 1 > 1\"\n        [class.sticky-column]=\"isStickyColumn(column.name, colIndex)\"\n        [style.position]=\"isStickyColumn(column.name, colIndex) ? 'sticky' : 'static'\"\n        [style.left.px]=\"getStickyColumnLeft(column.name, colIndex)\"\n        [style.z-index]=\"isStickyColumn(column.name, colIndex) ? 99 : 1\" [style.height.px]=\"50\" [attr.xx]=\"i\">\n        <div class=\"cell-content pivot-cell-content\">\n          <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n            [value]=\"getEffectiveCellValue(i,column.name, pivotRow)\" [column]=\"column\" [frozenGrandTotalCell]=\"true\"\n            [drillable]=\"column.enableDrilldown || false\" [mode]=\"mode()\" [isEditable]=\"isEditable()\"\n            [id]=\"'pivot_' + i + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"pivotRow\">\n          </data-cell>\n        </div>\n      </td>\n      }\n    </tr>\n    }\n  </tbody>\n</ng-template>\n\n<!-- \u2500\u2500\u2500 Action column cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     One template for both column positions. With no `config.actions` set it\n     falls back to the single more_horiz icon the column has always shown, so\n     grids that only listen to the store's actionClick signal keep working.\n     Context: { $implicit: Row, mode: 'table' | 'board', group?: RowGroup }\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #actionCell let-row let-mode=\"mode\" let-group=\"group\">\n  @if(!hasConfiguredActions()) {\n  <mat-icon (click)=\"onActionClick($event, row, undefined, mode || 'table', group)\">more_horiz</mat-icon>\n  } @else if(actionDisplayType() === 'kebab') {\n  @if(visibleActionsFor(row).length > 0) {\n  <mat-icon class=\"action-kebab\" [matMenuTriggerFor]=\"rowActionMenu\"\n    [matMenuTriggerData]=\"{ row: row, mode: mode || 'table', group: group }\"\n    (click)=\"$event.stopPropagation()\">more_vert</mat-icon>\n  }\n  } @else {\n  <div class=\"action-icons\">\n    @for(action of visibleActionsFor(row); track action.action_name) {\n    <mat-icon class=\"action-icon\" [fontSet]=\"actionIconFontSet()\" [matTooltip]=\"action.action_name\"\n      matTooltipPosition=\"above\"\n      (click)=\"onActionClick($event, row, action, mode || 'table', group)\">{{action.action_icon || 'play_arrow'}}</mat-icon>\n    }\n  </div>\n  }\n</ng-template>\n\n<!-- Kebab menu shared by every row; the row is passed through matMenuTriggerData. -->\n<mat-menu #rowActionMenu=\"matMenu\" class=\"eru-grid-action-menu\">\n  <ng-template matMenuContent let-row=\"row\" let-mode=\"mode\" let-group=\"group\">\n    @for(action of visibleActionsFor(row); track action.action_name) {\n    <button mat-menu-item (click)=\"onActionClick($event, row, action, mode || 'table', group)\">\n      <mat-icon>{{action.action_icon || 'play_arrow'}}</mat-icon>\n      <span>{{action.action_name}}</span>\n    </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Column Group Template for consistent column widths -->\n<ng-template #tableColGroup>\n  <colgroup>\n    @if(gridStore.configuration().config.allowSelection) {\n    <col style=\"width: 40px; min-width: 40px; max-width: 40px;\">\n    }\n    @if(shouldShowActionColumn('before')) {\n    <col\n      [style]=\"'width: ' + actionColumnWidth() + 'px !important; min-width: ' + actionColumnWidth() + 'px !important; max-width: ' + actionColumnWidth() + 'px !important;'\">\n    }\n    @if(hasHiddenColumns()) {\n    <col style=\"width: 40px !important; min-width: 40px !important; max-width: 40px !important;\">\n    }\n    @for (column of visibleColumns(); track trackByColumnFn($index, column)) {\n    <col\n      [style]=\"'width: ' + column.field_size + 'px !important; min-width: ' + column.field_size + 'px !important; max-width: ' + column.field_size + 'px !important; --col-width: ' + column.field_size + 'px'\">\n    }\n    @if(shouldShowActionColumn('after')) {\n    <col\n      [style]=\"'width: ' + actionColumnWidth() + 'px !important; min-width: ' + actionColumnWidth() + 'px !important; max-width: ' + actionColumnWidth() + 'px !important;'\">\n    }\n  </colgroup>\n</ng-template>\n\n\n<ng-template #tableHeader>\n\n  <thead [class.eru-wrap-headers]=\"wrapHeaders()\">\n    <!-- headerRowHeight rides on the row, not the cells: `thead.eru-wrap-headers\n         th { height: auto }` outranks any class-level height we could put on a\n         th, which is why a configured header height was ignored while data rows\n         (inline height on tr.row-item) honoured theirs. On a table row `height`\n         is a minimum, so a wrapped two-line header still grows past it. -->\n    <tr [style.height.px]=\"headerRowHeight()\" [style.minHeight.px]=\"headerRowHeight()\">\n      @if(gridStore.configuration().config.allowSelection) {\n      <th class=\"checkbox-column column-header table-column-header\">\n        <input type=\"checkbox\" [checked]=\"isAllGroupsSelected()\"\n          [indeterminate]=\"!isAllGroupsSelected() && gridStore.hasSelection()\" (change)=\"toggleAllGroups($event)\">\n      </th>\n      }\n      @if(shouldShowActionColumn('before')) {\n      <th class=\"action-column column-header table-column-header\" [style.width.px]=\"actionColumnWidth()\"\n        [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">Action</th>\n      }\n      @if(hasHiddenColumns()) {\n      <th class=\"row-expand-toggle column-header table-column-header\"></th>\n      }\n      @for (column of visibleColumns(); track trackByColumnFn(i, column); let i = $index) {\n      <th [style.width.px]=\"column.field_size\" [resizeColumn]=\"gridStore.isFeatureEnabled('columnResizable')\"\n        [columnConfig]=\"column\" [index]=\"i\"\n        [columnDraggable]=\"gridStore.isFeatureEnabled('columnReorderable') ? column.name : null\"\n        [style.minWidth.px]=\"column.field_size\" class=\"column-header table-column-header\"\n        [class.sortable-header]=\"isSortable()\"\n        [class.design-clickable]=\"isDesignMode()\"\n        [class.design-selected]=\"isDesignMode() && gridStore.selectedDesignColumn() === column.name\"\n        [class.sort-asc]=\"isSortable() && getSortDirection(column.name) === 'asc'\"\n        [class.sort-desc]=\"isSortable() && getSortDirection(column.name) === 'desc'\">\n        @if(gridStore.isFeatureEnabled('columnReorderable')) {\n        <div class=\"column-drag-handle\"></div>\n        }\n        <span class=\"column-label\" [title]=\"column.tool_tip || column.description || ''\">{{column.label}}</span>\n        @if(isDesignMode()) {\n        <mat-icon class=\"design-edit-icon\" title=\"Edit column\" (click)=\"onHeaderDesignClick($event, column)\">tune</mat-icon>\n        }\n        @if(isSortable()) {\n        <span class=\"sort-indicator\">\n          <span class=\"sort-triangles\">\n            <span class=\"sort-tri sort-tri-up\" [class.sort-tri-active]=\"getSortDirection(column.name) === 'asc'\"\n              (click)=\"onSortColumn($event, column, 'asc')\"></span>\n            <span class=\"sort-tri sort-tri-down\" [class.sort-tri-active]=\"getSortDirection(column.name) === 'desc'\"\n              (click)=\"onSortColumn($event, column, 'desc')\"></span>\n          </span>\n          @if(getSortPriority(column.name) !== null && gridStore.sortColumns().length > 1) {\n          <span class=\"sort-priority\">{{getSortPriority(column.name)}}</span>\n          }\n        </span>\n        }\n      </th>\n      }\n      @if(shouldShowActionColumn('after')) {\n      <th class=\"action-column column-header table-column-header\" [style.width.px]=\"actionColumnWidth()\"\n        [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\">Action</th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<!-- Table Subtotal Row Template -->\n<ng-template #tableSubtotal let-group=\"group\">\n  <tr class=\"subtotal-row\" [class.subtotal-bold]=\"subTotalStyle() === 'bold'\"\n    [class.subtotal-italic]=\"subTotalStyle() === 'italic'\"\n    [class.subtotal-highlighted]=\"subTotalStyle() === 'highlighted'\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n    @if(gridStore.configuration().config.allowSelection) {\n    <td class=\"checkbox-column\"></td>\n    }\n    @if(shouldShowActionColumn('before')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n    @if(hasHiddenColumns()) {\n    <td class=\"row-expand-toggle\"></td>\n    }\n    @for(column of visibleColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n    <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"subtotal-cell\"\n      [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n      <div class=\"cell-content\">\n        @if(colIndex === 0 && getSubtotalValue(group, column.name) === null) {\n        <span class=\"subtotal-label\">{{subtotalLabel()}}</span>\n        } @else {\n        @if(getSubtotalValue(group, column.name) !== null) {\n        <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n          [value]=\"getSubtotalValue(group, column.name)\" [column]=\"column\" [mode]=\"mode()\" [isEditable]=\"false\"\n          [id]=\"'subtotal_' + group.id + '_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"group.subtotal\">\n        </data-cell>\n        }\n        }\n      </div>\n    </td>\n    }\n    @if(shouldShowActionColumn('after')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n  </tr>\n</ng-template>\n\n<!-- Table Grand Total Row Template -->\n<ng-template #tableGrandTotal>\n  <tr class=\"grand-total-row\" [class.grand-total-bold]=\"grandTotalStyle() === 'bold'\"\n    [class.grand-total-italic]=\"grandTotalStyle() === 'italic'\"\n    [class.grand-total-highlighted]=\"grandTotalStyle() === 'highlighted'\" [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n    @if(gridStore.configuration().config.allowSelection) {\n    <td class=\"checkbox-column\"></td>\n    }\n    @if(shouldShowActionColumn('before')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n    @if(hasHiddenColumns()) {\n    <td class=\"row-expand-toggle\"></td>\n    }\n    @for(column of visibleColumns(); track trackByColumnFn($index, column); let colIndex = $index) {\n    <td [style.width.px]=\"column.field_size\" [style.minWidth.px]=\"column.field_size\" class=\"grand-total-cell\"\n      [style.height.px]=\"dataRowHeight()\" [style.minHeight.px]=\"dataRowHeight()\">\n      <div class=\"cell-content\">\n        @if(colIndex === 0 && getGrandTotalValue(column.name) === null) {\n        <span class=\"grand-total-label\">Grand Total</span>\n        } @else {\n        @if(getGrandTotalValue(column.name) !== null) {\n        <data-cell [fieldSize]=\"column.field_size\" [columnDatatype]=\"column.datatype\" [columnName]=\"column.name\"\n          [value]=\"getGrandTotalValue(column.name)\" [column]=\"column\" [mode]=\"mode()\" [isEditable]=\"false\"\n          [id]=\"'grandtotal_' + column.name\" [eruGridStore]=\"gridStore\" [row]=\"gridStore.rowGrandTotal()\">\n        </data-cell>\n        }\n        }\n      </div>\n    </td>\n    }\n    @if(shouldShowActionColumn('after')) {\n    <td class=\"action-column\" [style.width.px]=\"actionColumnWidth()\"\n      [style.minWidth.px]=\"actionColumnWidth()\" [style.maxWidth.px]=\"actionColumnWidth()\"></td>\n    }\n  </tr>\n</ng-template>\n\n<!-- \u2500\u2500\u2500 Default board card template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Used when no boardCardTemplate is passed to <eru-grid>.\n     Context: { $implicit: Row, columns: Field[], group: RowGroup }\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #defaultBoardCard let-row let-columns=\"columns\" let-group=\"group\">\n  <mat-card class=\"board-card\">\n    <mat-card-content>\n      @for (column of columns; track column.name) {\n      @if ((row?.entity_data?.[column.name] ?? row?.[column.name]) !== undefined) {\n      <div class=\"board-card-field\">\n        <span class=\"board-field-label\">{{ column.label }}</span>\n        <data-cell\n          [fieldSize]=\"column.field_size\"\n          [columnDatatype]=\"column.datatype\"\n          [columnName]=\"column.name\"\n          [column]=\"column\"\n          [value]=\"row?.entity_data?.[column.name] ?? row?.[column.name]\"\n          [id]=\"row?.entity_id + '_' + column.name\"\n          [eruGridStore]=\"gridStore\"\n          [mode]=\"'board'\"\n          [row]=\"row\">\n        </data-cell>\n      </div>\n      }\n      }\n    </mat-card-content>\n    <mat-card-actions align=\"end\">\n      <button mat-icon-button (click)=\"onActionClick($event, row)\">\n        <mat-icon>more_horiz</mat-icon>\n      </button>\n    </mat-card-actions>\n  </mat-card>\n</ng-template>", styles: ["@charset \"UTF-8\";:root{--grid-primary: var(--mat-sys-primary, #6750a4);--grid-on-primary: var(--mat-sys-on-primary, #ffffff);--grid-primary-container: var(--mat-sys-primary-container, #eaddff);--grid-on-primary-container: var(--mat-sys-on-primary-container, #21005d);--grid-secondary: var(--mat-sys-secondary, #625b71);--grid-on-secondary: var(--mat-sys-on-secondary, #ffffff);--grid-secondary-container: var(--mat-sys-secondary-container, #e8def8);--grid-on-secondary-container: var(--mat-sys-on-secondary-container, #1d192b);--grid-tertiary: var(--mat-sys-tertiary, #7d5260);--grid-on-tertiary: var(--mat-sys-on-tertiary, #ffffff);--grid-tertiary-container: var(--mat-sys-tertiary-container, #ffd8e4);--grid-on-tertiary-container: var(--mat-sys-on-tertiary-container, #31111d);--grid-surface: var(--mat-sys-surface, #fef7ff);--grid-surface-variant: var(--mat-sys-surface-variant, #e7e0ec);--grid-surface-container: var(--mat-sys-surface-container, #f3edf7);--grid-surface-container-high: var(--mat-sys-surface-container-high, #ede7f0);--grid-on-surface: var(--mat-sys-on-surface, #1d1b20);--grid-on-surface-variant: var(--mat-sys-on-surface-variant, #49454f);--grid-outline: var(--mat-sys-outline, #79757f);--grid-outline-variant: var(--mat-sys-outline-variant, #cac4d0);--grid-error: var(--mat-sys-error, #ba1a1a);--grid-error-container: var(--mat-sys-error-container, #ffdad6);--grid-base-surface: var(--surface, #ffffff);--grid-base-on-surface: var(--on-surface, #000000);--grid-base-border: var(--border, #e5e7eb);--grid-primary-light: var(--grid-primary-container)}:host,eru-grid{display:block!important;width:100%;height:100%;flex:1 1 0%;max-height:var(--grid-height, none);min-height:var(--grid-min-height, 120px);font-family:var(--grid-font-family);--grid-font-family: \"Poppins\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--grid-font-size-body: 12px;--grid-font-size-caption: 12px !important;--grid-line-height-body: 1;--grid-aggregation-text-align: right;--grid-number-text-align: right;--grid-spacing-xxs: 2px;--grid-spacing-xs: 4px;--grid-spacing-sm: 8px;--grid-spacing-md: 16px;--grid-spacing-lg: 24px;--grid-border-radius: 4px;--grid-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);--grid-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15);--grid-row-hover: var(--grid-surface-variant);--grid-row-selected: var(--grid-surface-container-high);--grid-zebra-odd: transparent;--grid-zebra-even: transparent;--grid-focus-ring: var(--grid-primary);--grid-header-font-weight: 500;--grid-header-text-transform: none;--grid-header-letter-spacing: normal;--grid-header-font-size: var(--grid-font-size-caption);--grid-header-padding-x: 8px;--grid-header-padding-y: 12px;--grid-font-feature-numeric: normal;--grid-cell-padding-x: var(--grid-spacing-xs);--grid-cell-inset-x: 8px;--grid-cell-padding-y: var(--grid-spacing-xxs);--grid-tint-subtle: rgba(0, 0, 0, .025);--grid-tint-soft: rgba(0, 0, 0, .045);--grid-tint-strong: rgba(0, 0, 0, .08);--grid-radius-outer: 0;--grid-shadow-outer: none;--grid-divider-color: var(--grid-outline-variant);--grid-divider-width: 1px;--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface);--grid-pill-radius: 999px;--grid-pill-padding-y: 3px;--grid-pill-padding-x: 10px;--grid-pill-font-size: 11px;--grid-pill-font-weight: 500;--grid-priority-dot-size: 8px;--grid-avatar-size: 24px;--grid-avatar-font-size: 10px;--grid-avatar-font-weight: 600;border-radius:var(--grid-radius-outer);box-shadow:var(--grid-shadow-outer)}eru-grid[data-preset=default]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: uppercase;--grid-header-letter-spacing: .06em;--grid-header-font-size: 11px;--grid-header-padding-y: 12px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 14px;--grid-row-hover: var(--grid-tint-subtle);--grid-divider-color: var(--grid-tint-soft);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=modern]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: none;--grid-header-letter-spacing: normal;--grid-header-font-size: 13px;--grid-header-padding-y: 16px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 16px;--grid-cell-padding-x: 18px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-radius-outer: 12px;--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 4px;--grid-pill-padding-x: 12px}eru-grid[data-preset=compact]{--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface);--grid-header-font-weight: 600;--grid-header-text-transform: none;--grid-header-font-size: 11px;--grid-header-padding-y: 4px;--grid-header-padding-x: 8px;--grid-cell-padding-y: 3px;--grid-cell-padding-x: 8px;--grid-font-size-body: 11px;--grid-row-hover: var(--grid-tint-subtle);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 1px;--grid-pill-padding-x: 6px;--grid-pill-font-size: 10px}eru-grid[data-preset=bold]{--grid-header-bg: var(--grid-surface-container-high);--grid-header-color: var(--grid-on-surface);--grid-header-font-weight: 700;--grid-header-text-transform: none;--grid-header-font-size: 13px;--grid-header-padding-y: 14px;--grid-header-padding-x: 12px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 12px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-strong);--grid-divider-width: 1px;--grid-radius-outer: 2px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=financial]{--grid-header-bg: var(--grid-surface-container);--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 500;--grid-header-text-transform: uppercase;--grid-header-letter-spacing: .08em;--grid-header-font-size: 11px;--grid-header-padding-y: 12px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 10px;--grid-cell-padding-x: 14px;--grid-zebra-odd: transparent;--grid-zebra-even: var(--grid-tint-subtle);--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-font-feature-numeric: \"tnum\"}eru-grid[data-preset=elevated]{--grid-header-bg: transparent;--grid-header-color: var(--grid-on-surface-variant);--grid-header-font-weight: 600;--grid-header-text-transform: none;--grid-header-font-size: 12px;--grid-header-padding-y: 16px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-row-hover: var(--grid-tint-soft);--grid-divider-color: var(--grid-tint-subtle);--grid-divider-width: 1px;--grid-radius-outer: 16px;--grid-shadow-outer: 0 1px 3px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .07);--grid-font-feature-numeric: \"tnum\";--grid-pill-padding-y: 4px;--grid-pill-padding-x: 12px;overflow:hidden}.group-container{padding-bottom:8px}.column-header.design-clickable .design-edit-icon{font-size:16px;width:16px;height:16px;margin-left:4px;opacity:.45;vertical-align:middle;cursor:pointer}.column-header.design-clickable:hover .design-edit-icon,.column-header.design-clickable .design-edit-icon:hover{opacity:1}.column-header.design-selected{background-color:var(--grid-primary-container, rgba(63, 81, 181, .12))}.pivot-column-header .pivot-header-content{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}.pivot-column-header .pivot-header-content .pivot-header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pivot-column-header .pivot-header-content .design-edit-icon,.pivot-column-header .header-content .design-edit-icon{flex:0 0 auto}.pivot-column-header .header-content data-cell,.pivot-column-header .header-content data-cell *{color:inherit!important}.incremental-row-container{width:100%;height:100%;min-height:var(--grid-min-height, 120px);max-height:none;overflow:auto;position:relative;background-color:var(--grid-surface);border-radius:var(--grid-border-radius);font-family:var(--grid-font-family)}.viewport{height:100%;min-height:300px;overflow-x:auto;overflow-y:auto;background-color:var(--grid-surface);scrollbar-gutter:stable}.viewport.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.groups-viewport{height:100%;min-height:300px}.groups-scroll-container{max-height:var(--grid-height, 600px);overflow-y:auto;overflow-x:hidden}.table-viewport{background-color:var(--grid-surface);height:var(--table-height, auto);min-height:var(--table-min-height, 100px);overflow-x:auto;overflow-y:auto}.pivot-viewport{min-height:var(--table-min-height, 300px);overflow-x:auto;overflow-y:auto;background-color:var(--grid-surface)}.pivot-viewport .cdk-virtual-scroll-content-wrapper{width:auto;height:auto}.table-wrapper{min-width:100%;overflow-x:visible}.incremental-row-container .eru-grid-table,.eru-grid-table{width:100%!important;border-collapse:separate;border-spacing:0;table-layout:fixed!important;background-color:var(--grid-surface);color:var(--grid-on-surface);font-family:var(--grid-font-family);font-size:var(--grid-font-size-body);line-height:var(--grid-line-height-body)}.eru-grid-table th,.eru-grid-table td{text-align:left;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--grid-on-surface);min-width:0;max-width:100%!important;box-sizing:border-box;position:relative}.eru-grid-table th{background-color:var(--grid-header-bg, var(--grid-surface-container))}thead.eru-wrap-headers th{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;height:auto}thead.eru-wrap-headers th .column-label,thead.eru-wrap-headers th .header-label{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word;overflow-wrap:anywhere}.eru-grid-table tbody td{background-color:transparent}.eru-grid-table thead{background-color:var(--grid-header-bg, var(--grid-surface-container));transform:translateZ(0);will-change:transform;backface-visibility:hidden}.eru-grid-table thead.freeze-header-enabled{position:sticky!important;top:0!important;z-index:100!important}.eru-grid-table thead th{background-color:var(--grid-header-bg, var(--grid-surface-container));color:var(--grid-header-color, var(--grid-on-surface));font-family:var(--grid-font-family);font-weight:var(--grid-header-font-weight);font-size:var(--grid-header-font-size)}.checkbox-column{width:50px;min-width:50px;max-width:50px;text-align:center!important;padding-left:0!important;padding-right:0!important;text-overflow:clip!important;background-color:var(--grid-surface-container)}.checkbox-column input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--grid-primary);border-radius:var(--grid-border-radius)}.checkbox-column input[type=checkbox]:focus{outline:2px solid var(--grid-primary);outline-offset:2px}.action-column{text-align:center!important;padding-left:0!important;padding-right:0!important;text-overflow:clip!important;background-color:var(--grid-surface-container)}.action-column mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--grid-outline);cursor:pointer}.action-column mat-icon:hover{color:var(--grid-primary)}.action-column .action-icons{display:flex;align-items:center;justify-content:center;gap:6px;overflow-x:auto;scrollbar-width:none}.action-column .action-icons::-webkit-scrollbar{display:none}.action-column .action-icon{flex:0 0 auto}.eru-grid-action-menu .mat-mdc-menu-item mat-icon{margin-right:8px;font-size:18px;width:18px;height:18px;line-height:18px;color:var(--grid-on-surface-variant)}.group-header{background-color:var(--grid-surface-container);color:var(--grid-on-surface);font-size:var(--grid-font-size-caption);font-weight:500;border-bottom:1px solid var(--grid-outline);cursor:pointer;transition:background-color .2s ease}.group-header:hover{background-color:var(--grid-surface-container-high)}.group-header .group-title{font-weight:600;color:var(--grid-primary)}.group-header .group-row-count{color:var(--grid-on-surface-variant);font-size:var(--grid-font-size-caption);margin-left:var(--grid-spacing-sm)}.row-item{background-color:var(--grid-surface);transition:background-color .15s ease}.row-item:nth-child(odd){background-color:var(--grid-zebra-odd, var(--grid-surface))}.row-item:nth-child(2n){background-color:var(--grid-zebra-even, var(--grid-surface))}.row-item:hover{background-color:var(--grid-row-hover)}.required-toggle-row{background-color:var(--grid-surface-container, #f3edf7);border-bottom:1px solid var(--grid-outline-variant, #cac4d0)}.required-toggle-row .required-toggle-cell{padding:4px 8px!important;text-align:center;vertical-align:middle;position:relative}.required-toggle-row .required-toggle-cell .required-label{position:absolute;top:2px;left:4px;font-size:10px;color:var(--grid-on-surface-variant, #49454f);font-weight:400;text-transform:lowercase}.required-toggle-row .required-toggle-cell mat-checkbox{display:flex;justify-content:center;align-items:center}.table-column-header{padding:0 var(--grid-header-padding-x);height:var(--grid-header-row-height, auto)}.column-header{font-weight:var(--grid-header-font-weight);text-transform:var(--grid-header-text-transform);letter-spacing:var(--grid-header-letter-spacing);text-align:center!important;font-size:var(--grid-header-font-size);position:relative;-webkit-user-select:none;user-select:none;--grid-header-affordance-space: 0px;--grid-column-resizer-width: 10px;--grid-header-sort-right: calc(var(--grid-column-resizer-width) + 2px);--grid-header-design-right: calc(var(--grid-column-resizer-width) + 2px);background-color:var(--grid-header-bg, var(--grid-surface-container));color:var(--grid-header-color, var(--grid-on-surface))}.column-header:hover{background-color:var(--grid-header-hover-bg, var(--grid-surface-container-high))}.column-drag-handle{position:absolute;left:0;top:0;bottom:0;width:12px;cursor:grab;opacity:0;transition:opacity .2s ease,background-color .2s ease;z-index:2;display:flex;align-items:center;justify-content:center;border-right:1px solid transparent}.column-drag-handle:after{content:\"\\22ee\\22ee\";font-size:14px;color:var(--grid-on-surface-variant);transform:rotate(90deg)}.column-drag-handle:hover{background-color:var(--grid-surface-container-high);border-right-color:var(--grid-outline)}.column-header:hover .column-drag-handle{opacity:1}.column-drag-handle:active{cursor:grabbing}.table-column-header.sortable-header{--grid-header-affordance-space: 20px}.table-column-header.design-clickable{--grid-header-affordance-space: 28px}.table-column-header.sortable-header.design-clickable{--grid-header-affordance-space: 40px;--grid-header-design-right: calc(var(--grid-column-resizer-width) + 13px)}.table-column-header .column-label{display:block;padding-right:var(--grid-header-affordance-space)}.table-column-header .sort-indicator,.table-column-header .design-edit-icon{position:absolute;top:50%;transform:translateY(-50%);margin-left:0}.table-column-header .sort-indicator{right:var(--grid-header-sort-right)}.table-column-header .design-edit-icon{right:var(--grid-header-design-right)}.sortable-header{cursor:pointer}.sortable-header .sort-indicator{display:inline-flex;align-items:center;gap:2px;cursor:pointer;opacity:0;transition:opacity .15s ease}.sortable-header .sort-indicator .sort-triangles{display:flex;flex-direction:column;align-items:center;gap:2px}.sortable-header .sort-indicator .sort-tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;cursor:pointer;transition:border-color .15s ease}.sortable-header .sort-indicator .sort-tri-up{border-bottom:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.sortable-header .sort-indicator .sort-tri-down{border-top:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.sortable-header .sort-indicator .sort-tri-active{opacity:1}.sortable-header .sort-indicator .sort-tri-active.sort-tri-up{border-bottom-color:var(--grid-primary, #6750a4)}.sortable-header .sort-indicator .sort-tri-active.sort-tri-down{border-top-color:var(--grid-primary, #6750a4)}.sortable-header .sort-indicator .sort-priority{font-size:9px;font-weight:600;color:var(--grid-primary, #6750a4);line-height:1;min-width:12px;text-align:center}.sortable-header:hover .sort-indicator,.sortable-header.sort-asc .sort-indicator,.sortable-header.sort-desc .sort-indicator{opacity:1}.sortable-header:hover .sort-indicator .sort-tri:not(.sort-tri-active){opacity:.6}.sort-asc,.sort-desc{background-color:var(--grid-surface-container-low, rgba(103, 80, 164, .04))}.dragging{opacity:1;background-color:var(--grid-surface-container);box-shadow:var(--grid-elevation-2)}.drag-over{background-color:var(--grid-surface-container);border-color:var(--grid-primary)}.data-cell{background-color:transparent;color:var(--grid-on-surface);font-family:var(--grid-font-family);font-size:var(--grid-font-size-body);font-feature-settings:var(--grid-font-feature-numeric);padding:0 var(--grid-cell-padding-x)}.cell-content{align-items:center}.cell-content .mdc-text-field{padding:0px var(--grid-spacing-xxs)!important}.cell-display-text{align-items:center;padding:0px var(--grid-spacing-xs)}.ghost-loading-row{background-color:transparent}.ghost-cell-container{padding:var(--grid-spacing-sm)}.ghost-cell{height:20px;width:100%;background-color:var(--grid-surface-container);animation:pulse 1.5s ease-in-out infinite;border-radius:var(--grid-border-radius)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.column-resizer{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background-color:transparent;transition:background-color .2s ease}.column-resizer:hover{background-color:var(--grid-primary)}.group-separator{height:var(--grid-spacing-sm);background-color:var(--grid-surface-variant)}.group-separator .separator-cell{background-color:var(--grid-surface-variant);border:none;height:var(--grid-spacing-sm)}.error-state{background-color:var(--grid-error-container);color:var(--grid-error);border-color:var(--grid-error)}.error-message{background-color:var(--grid-error);color:#fff;padding:var(--grid-spacing-sm);border-radius:var(--grid-border-radius);font-size:var(--grid-font-size-caption)}.incremental-row-container .eru-grid-table tbody,.incremental-row-container .eru-grid-table{position:relative}.incremental-row-container .eru-grid-table.show-column-lines{border-right:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important;border-top:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table.show-column-lines:not(.freeze-header){border-bottom:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table:not(.show-column-lines){border:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.incremental-row-container .eru-grid-table thead:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:calc(var(--grid-divider-width, 1px) * 2);background-color:var(--grid-divider-color, var(--grid-outline, #e0e0e0));pointer-events:none;z-index:10}.incremental-row-container .eru-grid-table.show-column-lines thead th,.incremental-row-container .eru-grid-table.show-column-lines tbody td{border-left:var(--grid-divider-width, 1px) solid var(--grid-divider-color, var(--grid-outline, #e0e0e0))!important}.incremental-row-container .eru-grid-table.show-row-lines thead th,.incremental-row-container .eru-grid-table.show-row-lines tbody td{border-bottom:var(--grid-divider-width, 1px) solid var(--grid-divider-color, var(--grid-outline, #e0e0e0))!important}@media(max-width:768px){.incremental-row-container{height:600px}.eru-grid-table th,.eru-grid-table td{font-size:var(--grid-font-size-caption)}.checkbox-column{width:40px;min-width:40px;max-width:40px}}@media(prefers-contrast:high){.eru-grid-table th,.eru-grid-table td{border-width:2px}.row-item:hover{border-width:2px;border-color:var(--grid-primary)}}@media(prefers-reduced-motion:reduce){.row-item,.column-drag-handle,.ghost-cell{transition:none;animation:none}}.pivot-table .nested-header{text-align:center;font-weight:600;background:var(--grid-surface-container)}.pivot-table .nested-header.row-dimension-header{background:var(--grid-surface-container);font-weight:600}.pivot-table .pivot-header-leafcols{padding:0;margin:0;height:0}.pivot-table .pivot-header-level.level-0 .nested-header{font-size:14px;padding:12px 8px}.pivot-table .pivot-header-level.level-1 .nested-header{font-size:13px;padding:10px 6px}.pivot-table .pivot-header-level.level-2 .nested-header{font-size:12px;padding:8px 4px}.pivot-table .nested-header:hover{background:var(--grid-surface-variant);color:var(--grid-primary);transition:all .2s ease}.pivot-table .pivot-cell.aggregated-value{font-weight:500;font-family:Roboto Mono,monospace}.pivot-table .pivot-cell-content{display:flex;justify-content:center;align-items:center;min-height:38px}.pivot-table .pivot-repeated-value .cell-content,.pivot-table .pivot-repeated-value .pivot-cell-content{visibility:hidden}.pivot-table .pivot-group-start.row-dimension-cell{border-top:1px solid var(--grid-outline, #79757f)}.pivot-mode .incremental-row-container{display:flex;flex-direction:column;height:auto;max-height:85vh;overflow:auto}.pivot-mode .h-shell{position:relative;width:calc(100% - var(--scrollbar-width, 17px))!important;top:0;z-index:1;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .h-shell::-webkit-scrollbar{display:none}.pivot-mode .gt-shell{position:relative;bottom:50px;flex-shrink:0;overflow-x:hidden;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .gt-shell::-webkit-scrollbar{display:none}.pivot-mode .gt-shell table{border-bottom:var(--grid-outline-width, 1px) solid var(--grid-outline, #e0e0e0)!important}.pivot-mode .gt-shell.adjust-bottom-vs{bottom:66px!important}.pivot-mode .gt-shell.adjust-bottom:not(.adjust-bottom-vs){bottom:calc(66px - var(--scrollbar-width, 17px))!important}.pivot-mode .header-shell{flex-shrink:0;width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.pivot-mode .header-shell::-webkit-scrollbar{display:none}.pivot-mode .header-shell.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.pivot-mode .header-shell .eru-grid-table{margin-bottom:0;width:100%;table-layout:fixed}.pivot-mode .header-shell .eru-grid-table thead{background:var(--grid-surface-container)}.pivot-mode .header-shell .eru-grid-table thead th{background:var(--grid-surface-container);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .header-shell .eru-grid-table thead th.sticky-column{position:sticky;background:var(--grid-surface-container);z-index:111}.pivot-mode .header-shell .eru-grid-table tbody td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-container{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.pivot-mode .pivot-table{width:auto!important;min-width:100%!important;table-layout:fixed!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex:none!important;flex-shrink:0!important;flex-grow:0!important}.pivot-mode .pivot-table td,.pivot-mode .pivot-table th{box-sizing:border-box!important;flex:none!important;flex-shrink:0!important;flex-grow:0!important;word-wrap:break-word!important;word-break:break-all!important}.pivot-mode .pivot-table{table-layout:fixed!important;width:100%!important}.pivot-mode .pivot-table *{max-width:var(--col-width)!important;box-sizing:border-box!important}.pivot-mode .pivot-table colgroup{width:100%!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex-basis:var(--col-width)!important;flex:0 0 var(--col-width)!important}.pivot-mode .pivot-table table{width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important}.pivot-mode .pivot-table[style*=--table-total-width]{width:var(--table-total-width)!important;min-width:var(--table-total-width)!important;max-width:var(--table-total-width)!important}.pivot-mode .pivot-table colgroup col{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;flex:0 0 var(--col-width)!important;flex-basis:var(--col-width)!important;flex-grow:0!important;flex-shrink:0!important;overflow:hidden!important}.pivot-mode .pivot-table tbody td,.pivot-mode .pivot-table thead th{width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.pivot-mode .pivot-table .cell-content,.pivot-mode .pivot-table data-cell{width:100%!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important}.pivot-mode .pivot-table table{width:var(--table-total-width)!important;min-width:var(--table-total-width)!important;max-width:var(--table-total-width)!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important;word-wrap:break-word!important;word-break:break-all!important}.pivot-mode .pivot-tbody tr.pivot-row{min-height:var(--grid-data-row-height, 50px)!important;height:var(--grid-data-row-height, 50px)!important}.pivot-mode .pivot-tbody tr.pivot-row:hover{background-color:var(--grid-surface-variant)}.pivot-mode .pivot-tbody tr.pivot-row:nth-child(2n){background-color:#00000005}.pivot-mode .pivot-tbody tr.pivot-row td{min-height:var(--grid-data-row-height, 50px)!important;height:var(--grid-data-row-height, 50px)!important;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-tbody tr.pivot-row td .cell-content{min-height:calc(var(--grid-data-row-height, 50px) - 2px);display:flex;align-items:center;justify-content:center}.pivot-mode .pivot-tbody tr.pivot-row td .cell-content data-cell{width:100%;min-height:calc(var(--grid-data-row-height, 50px) - 4px);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.pivot-mode .pivot-cell{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--col-width)!important;min-width:var(--col-width)!important;max-width:var(--col-width)!important}.pivot-mode .pivot-cell.aggregated-value{font-weight:500;font-family:Roboto Mono,monospace}.pivot-mode .pivot-cell .cell-content{display:flex;justify-content:center;align-items:center;min-height:var(--grid-header-row-height, 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.pivot-mode .pivot-table .subtotal-row{background-color:var(--grid-surface-container)!important;font-weight:600}.pivot-mode .pivot-table .subtotal-row td{background-color:var(--grid-surface-container);color:var(--grid-on-surface-variant)}.pivot-mode .pivot-table .subtotal-row td:first-child{color:var(--grid-primary)}.pivot-mode .pivot-table .subtotal-row td.aggregated-value{font-weight:500;color:var(--grid-primary)}.pivot-mode .pivot-table .subtotal-row:hover{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .subtotal-row:hover td{background-color:var(--grid-surface-container-high)}.pivot-mode .pivot-table .subtotal-bold td{font-weight:600!important;font-style:normal!important}.pivot-mode .pivot-table .subtotal-bold td.aggregated-value{font-weight:600!important}.pivot-mode .pivot-table .subtotal-italic td{font-style:italic!important}.pivot-mode .pivot-table .subtotal-italic td:first-child{font-weight:600!important}.pivot-mode .pivot-table .subtotal-italic td.aggregated-value{font-style:italic!important;font-weight:500!important}.pivot-mode .pivot-table .subtotal-highlighted{background-color:var(--grid-surface-variant)!important}.pivot-mode .pivot-table .subtotal-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:700!important;font-style:normal!important;color:var(--grid-primary)!important}.pivot-mode .pivot-table .subtotal-highlighted td.aggregated-value{font-weight:500!important;color:var(--grid-primary)!important}.pivot-mode .pivot-table .subtotal-highlighted:hover,.pivot-mode .pivot-table .subtotal-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .grand-total-row{background-color:var(--grid-surface-container-high)!important;font-weight:700;font-size:var(--grid-font-size-body)}.pivot-mode .pivot-table .grand-total-row td{background-color:var(--grid-surface-container-high)!important;color:var(--grid-on-surface)}.pivot-mode .pivot-table .grand-total-row td:first-child{font-style:normal;font-weight:800;color:var(--grid-primary)}.pivot-mode .pivot-table .grand-total-row td.aggregated-value{font-weight:500;color:var(--grid-primary);font-family:Roboto Mono,monospace}.pivot-mode .pivot-table .grand-total-row:hover,.pivot-mode .pivot-table .grand-total-row:hover td{background-color:var(--grid-surface-container-high)!important}.pivot-mode .pivot-table .grand-total-bold td{font-weight:700!important;font-style:normal!important}.pivot-mode .pivot-table .grand-total-bold td.aggregated-value{font-weight:700!important}.pivot-mode .pivot-table .grand-total-italic td,.pivot-mode .pivot-table .grand-total-italic td.aggregated-value{font-style:italic!important;font-weight:500!important}.pivot-mode .pivot-table .grand-total-highlighted{background-color:var(--grid-primary)!important;box-shadow:var(--grid-elevation-2)!important}.pivot-mode .pivot-table .grand-total-highlighted td{background-color:var(--grid-primary)!important;color:var(--grid-on-primary)!important;font-weight:500!important;font-style:normal!important}.pivot-mode .pivot-table .grand-total-highlighted td.aggregated-value{color:var(--grid-on-primary)!important;font-weight:500!important}.pivot-mode .pivot-table .grand-total-highlighted:hover,.pivot-mode .pivot-table .grand-total-highlighted:hover td{background-color:var(--grid-primary)!important}.pivot-mode .pivot-table .collapsible-header{position:relative}.pivot-mode .pivot-table .collapsible-header .header-content{display:flex;align-items:center;justify-content:space-between;gap:var(--grid-spacing-xs);padding:var(--grid-spacing-xs) var(--grid-spacing-sm)}.pivot-mode .pivot-table .collapsible-header .header-label{flex:1;font-weight:600}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn{background:none;border:none;cursor:pointer;padding:var(--grid-spacing-xxs);margin:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--grid-border-radius);color:var(--grid-on-surface-variant);transition:all .2s ease;font-size:12px;font-weight:600}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn:hover{background-color:var(--grid-surface-container);color:var(--grid-primary);transform:scale(1.1)}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn:focus{outline:2px solid var(--grid-primary);outline-offset:1px}.pivot-mode .pivot-table .collapsible-header .collapse-toggle-btn .collapse-icon{display:block;line-height:1;font-family:monospace;font-size:14px}.pivot-mode .pivot-table .collapsible-header.expanded .collapse-toggle-btn .collapse-icon{color:var(--grid-primary)}.pivot-mode .pivot-table .collapsible-header.collapsed{background-color:var(--grid-surface-variant)}.pivot-mode .pivot-table .collapsible-header.collapsed .header-label{font-style:italic;color:var(--grid-on-surface-variant)}.pivot-mode .pivot-table .collapsible-header.collapsed .collapse-toggle-btn .collapse-icon{color:var(--grid-outline)}.pivot-mode .pivot-table .collapsible-header:hover{background-color:var(--grid-surface-container)}.pivot-mode .pivot-table .collapsible-header:hover .header-label{color:var(--grid-on-surface)}.pivot-mode .pivot-table .pivot-single-table{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;min-height:var(--table-min-height)!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container{flex-shrink:0;background:var(--grid-surface)!important;overflow-x:auto;overflow-y:hidden;min-height:100px!important;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table{width:auto;min-width:100%;height:auto!important;min-height:100px!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table th{background:var(--grid-surface-container)!important;padding:8px 6px!important;white-space:nowrap;min-width:50px;min-height:40px!important;height:auto!important;position:relative;visibility:visible!important;color:var(--grid-on-surface)!important}.pivot-mode .pivot-table .pivot-single-table .pivot-header-container .pivot-table th.sticky-column{position:sticky!important;background:var(--grid-surface-container)!important;border-right:2px solid var(--grid-primary)!important;box-shadow:2px 0 4px #0000001a;z-index:101!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container{flex:1;overflow:auto;min-height:300px!important;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-viewport{height:100%!important;width:100%!important;overflow-x:auto!important;overflow-y:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table{width:auto;min-width:100%;height:auto!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table td,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table td{padding:8px 6px!important;white-space:nowrap;min-width:50px;min-height:32px!important;height:auto!important;background:var(--grid-surface)!important;color:var(--grid-on-surface)!important;visibility:visible!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table td.sticky-column,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table td.sticky-column{position:sticky!important;background:var(--grid-surface-container)!important;border-right:2px solid var(--grid-primary)!important;box-shadow:2px 0 4px #0000001a;z-index:100!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table tbody tr,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table tbody tr{height:auto!important;min-height:50px!important}.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-table tbody tr.pivot-row,.pivot-mode .pivot-table .pivot-single-table .pivot-data-container .pivot-data-table tbody tr.pivot-row{visibility:visible!important;display:table-row!important}.pivot-mode .pivot-table .collapsed-column-group{background-color:var(--grid-surface-container);border-left:3px solid var(--grid-primary)}.pivot-mode .pivot-table .collapsed-column-group:hover{background-color:var(--grid-surface-container-high)}.pivot-row.subtotal-row{background-color:var(--grid-surface-variant);font-weight:500}.pivot-row.subtotal-row.subtotal-bold{font-weight:500}.pivot-row.subtotal-row.subtotal-italic{font-style:italic}.pivot-row.subtotal-row.subtotal-highlighted{background-color:var(--grid-primary);color:var(--grid-on-primary)}.pivot-row.grand-total-row{background-color:var(--grid-surface-container);font-weight:600}.pivot-row.grand-total-row.grand-total-bold{font-weight:800}.pivot-row.grand-total-row.grand-total-italic{font-style:italic}.pivot-row.grand-total-row.grand-total-highlighted{background-color:var(--grid-primary);color:var(--grid-on-primary)}.pivot-row.first-visible-row{background-color:#6750a41a!important;position:relative}.pivot-row.first-visible-row:before{content:\"\\1f441\\fe0f  First Visible\";position:absolute;top:-20px;left:0;background:var(--grid-primary);color:var(--grid-on-primary);padding:2px 6px;font-size:10px;border-radius:2px;z-index:1000}.header-wrap-text{white-space:pre-wrap;word-break:auto-phrase}.group-header-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding-right:12px}.custom-collapse-header{background-color:var(--grid-surface-variant);padding:8px 20px;border-top-left-radius:12px;border-top-right-radius:12px;cursor:pointer;display:flex;width:fit-content;align-items:center;-webkit-user-select:none;user-select:none;min-width:200px;margin-bottom:10px;position:sticky;left:1px;z-index:116}.custom-collapse-header .collapse-arrow{display:inline-block;margin-right:8px;font-size:12px;color:var(--grid-on-surface-variant);transition:transform .2s ease;transform:rotate(0)}.custom-collapse-header .collapse-arrow.rotate-arrow{transform:rotate(270deg)}.custom-collapse-header .f-12{font-size:12px;color:var(--grid-on-surface)}.custom-collapse-header .group-sort-indicator{display:inline-flex;align-items:center;margin-left:8px}.custom-collapse-header .group-sort-indicator .sort-triangles{display:flex;flex-direction:column;align-items:center;gap:2px}.custom-collapse-header .group-sort-indicator .sort-tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;cursor:pointer;transition:border-color .15s ease}.custom-collapse-header .group-sort-indicator .sort-tri-up{border-bottom:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.custom-collapse-header .group-sort-indicator .sort-tri-down{border-top:5px solid var(--grid-on-surface-variant, #49454f);opacity:.3}.custom-collapse-header .group-sort-indicator .sort-tri-active{opacity:1}.custom-collapse-header .group-sort-indicator .sort-tri-active.sort-tri-up{border-bottom-color:var(--grid-primary, #6750a4)}.custom-collapse-header .group-sort-indicator .sort-tri-active.sort-tri-down{border-top-color:var(--grid-primary, #6750a4)}.excel-download-icon{cursor:pointer}.excel-download-icon:hover{opacity:.75}.excel-download-bar{display:flex;justify-content:flex-end;padding:4px 12px;flex-shrink:0}.table-mode .header-shell{flex-shrink:0;width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.table-mode .header-shell::-webkit-scrollbar{display:none}.table-mode .header-shell.apply-cdk-width{width:calc(var(--table-total-width) + 10px)!important}.table-mode .subtotal-row{background-color:var(--grid-surface-container)!important;font-weight:600}.table-mode .subtotal-row td{background-color:var(--grid-surface-container);color:var(--grid-on-surface-variant)}.table-mode .subtotal-row td:first-child{color:var(--grid-primary)}.table-mode .subtotal-row td.subtotal-cell{font-weight:500}.table-mode .subtotal-row td.subtotal-cell .subtotal-label{font-weight:600;color:var(--grid-primary);padding-left:var(--grid-cell-padding-x)}.table-mode .subtotal-row:hover{background-color:var(--grid-surface-container-high)!important}.table-mode .subtotal-row:hover td{background-color:var(--grid-surface-container-high)}.table-mode .subtotal-row.subtotal-bold td{font-weight:600!important;font-style:normal!important}.table-mode .subtotal-row.subtotal-italic td{font-style:italic!important}.table-mode .subtotal-row.subtotal-italic td:first-child{font-weight:600!important}.table-mode .subtotal-row.subtotal-highlighted{background-color:var(--grid-surface-variant)!important}.table-mode .subtotal-row.subtotal-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:700!important;font-style:normal!important;color:var(--grid-primary)!important}.table-mode .subtotal-row.subtotal-highlighted:hover,.table-mode .subtotal-row.subtotal-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.table-mode .grand-total-row{background-color:var(--grid-surface-container-high)!important;font-weight:700}.table-mode .grand-total-row td{background-color:var(--grid-surface-container-high);color:var(--grid-on-surface)}.table-mode .grand-total-row td:first-child{color:var(--grid-primary)}.table-mode .grand-total-row td.grand-total-cell{font-weight:600}.table-mode .grand-total-row td.grand-total-cell .grand-total-label{font-weight:700;color:var(--grid-primary);padding-left:var(--grid-cell-padding-x)}.table-mode .grand-total-row:hover{background-color:var(--grid-surface-container-high)!important}.table-mode .grand-total-row:hover td{background-color:var(--grid-surface-container-high)}.table-mode .grand-total-row.grand-total-bold td{font-weight:700!important;font-style:normal!important}.table-mode .grand-total-row.grand-total-italic td{font-style:italic!important}.table-mode .grand-total-row.grand-total-italic td:first-child{font-weight:700!important}.table-mode .grand-total-row.grand-total-highlighted{background-color:var(--grid-surface-variant)!important}.table-mode .grand-total-row.grand-total-highlighted td{background-color:var(--grid-surface-variant)!important;font-weight:800!important;font-style:normal!important;color:var(--grid-primary)!important}.table-mode .grand-total-row.grand-total-highlighted:hover,.table-mode .grand-total-row.grand-total-highlighted:hover td{background-color:var(--grid-surface-container-high)!important}.table-mode .subtotal-row-shell{width:100%;box-sizing:border-box;padding-right:var(--scrollbar-width, 17px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.table-mode .subtotal-row-shell::-webkit-scrollbar{display:none}.board-mode-host{overflow:hidden;display:flex;flex-direction:column;max-height:var(--grid-height, 600px)}.board-mode-host .board-view-container{display:flex;flex-direction:column;flex:1;min-height:0}.board-mode-host .board-sort-bar{display:flex;align-items:center;gap:6px;padding:8px 16px;flex-shrink:0;border-bottom:1px solid var(--grid-outline-variant, #cac4d0);background:var(--grid-surface, #fffbfe);overflow-x:auto}.board-mode-host .board-sort-bar .board-sort-label{font-size:12px;font-weight:500;color:var(--grid-on-surface-variant, #49454f);white-space:nowrap}.board-mode-host .board-sort-bar .board-sort-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;border:1px solid var(--grid-outline-variant, #cac4d0);background:var(--grid-surface, #fffbfe);color:var(--grid-on-surface, #1d1b20);font-size:12px;white-space:nowrap}.board-mode-host .board-sort-bar .board-sort-chip-active{background:var(--grid-surface-container);border-color:var(--grid-outline, #79757f);color:var(--grid-on-surface, #1d1b20)}.board-mode-host .board-sort-bar .board-sort-chip-label{pointer-events:none}.board-mode-host .board-sort-bar .board-sort-chip-arrow{font-size:10px;line-height:1;cursor:pointer;padding:2px;border-radius:4px}.board-mode-host .board-sort-bar .board-sort-chip-arrow:hover{background:#00000014}.board-mode-host .board-sort-bar .board-sort-chip-priority{font-size:9px;font-weight:700;background:var(--grid-primary, #6750a4);color:var(--grid-on-primary, #ffffff);border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}.board-mode-host .board-sort-bar .board-sort-chip-remove{font-size:10px;cursor:pointer;padding:2px;border-radius:4px;color:var(--grid-on-surface-variant, #49454f)}.board-mode-host .board-sort-bar .board-sort-chip-remove:hover{background:#00000014;color:var(--grid-error, #b3261e)}.board-mode-host .board-sort-bar .board-sort-add-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;border:1px dashed var(--grid-outline-variant, #cac4d0);background:transparent;color:var(--grid-on-surface-variant, #49454f);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease}.board-mode-host .board-sort-bar .board-sort-add-btn .board-sort-add-icon{font-size:14px;width:14px;height:14px}.board-mode-host .board-sort-bar .board-sort-add-btn:hover{background:var(--grid-surface-container-low, #f7f2fa);border-color:var(--grid-primary, #6750a4);color:var(--grid-primary, #6750a4)}.board-mode-host .board-sort-bar .board-sort-clear{display:inline-flex;align-items:center;padding:4px 10px;border-radius:16px;border:1px solid var(--grid-error, #b3261e);background:transparent;color:var(--grid-error, #b3261e);font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s ease}.board-mode-host .board-sort-bar .board-sort-clear:hover{background:#b3261e14}.board-mode-host .board-columns-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--board-col-min-width, 300px),var(--board-col-max-width, 1fr)));grid-auto-rows:auto;align-items:start;gap:16px;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;align-content:start;justify-content:start}.board-mode-host .board-columns-wrapper.board-columns-nowrap{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:auto;grid-auto-rows:auto;grid-auto-columns:minmax(var(--board-col-min-width, 300px),var(--board-col-max-width, 1fr));overflow-x:auto;overflow-y:hidden}.board-mode-host .board-column{max-height:var(--board-column-height, 420px);min-width:0;display:flex;flex-direction:column;background:var(--grid-surface-container, #f3edf7);border-radius:12px;min-height:0;overflow:hidden}.board-mode-host .board-column.board-column-accented{border-top:3px solid var(--board-group-color, transparent)}.board-mode-host .board-column .column-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;font-weight:600;flex-shrink:0;background-color:transparent}.board-mode-host .board-column .column-header:hover{background-color:transparent}.board-mode-host .board-column .column-header .column-header-title{font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.2;color:var(--grid-on-surface, #1d1b20);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-mode-host .board-column .column-header .column-header-title-cell{display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:clip}.board-mode-host .board-column .column-header .column-header-title-cell data-cell,.board-mode-host .board-column .column-header .column-header-title-cell .data-cell-component,.board-mode-host .board-column .column-header .column-header-title-cell .container{padding:0!important;margin:0!important;border:none!important;background:transparent!important;min-height:0!important;height:auto!important;width:auto!important;max-width:100%!important;overflow:visible!important}.board-mode-host .board-column .column-header .column-header-title-cell .status-display,.board-mode-host .board-column .column-header .column-header-title-cell .status-display-content,.board-mode-host .board-column .column-header .column-header-title-cell .status-text,.board-mode-host .board-column .column-header .column-header-title-cell .tag-display,.board-mode-host .board-column .column-header .column-header-title-cell .tag-text{max-width:none!important;overflow:visible!important;text-overflow:clip!important}.board-mode-host .board-column .column-header .column-header-count{font-size:10px;font-weight:600;color:var(--eru-board-count-color, var(--grid-on-surface-variant, #49454f));background:var(--eru-board-count-bg, var(--grid-surface-variant, #e7e0ec));border-radius:10px;padding:3px 10px;white-space:nowrap;flex-shrink:0}.board-mode-host .board-column-body{flex:0 1 auto;min-height:0}.board-mode-host .board-card-container{box-sizing:border-box;overflow:hidden;border-radius:8px;transition:background-color .15s ease,box-shadow .15s ease}.board-mode-host .board-card-container.show-row-lines{box-shadow:inset 0 0 0 var(--grid-divider-width, 1px) var(--grid-divider-color, var(--grid-outline, #e0e0e0))}.board-mode-host .board-card-container:hover{background-color:var(--eru-board-card-hover-bg, color-mix(in srgb, var(--mat-sys-primary, #1976d2) 8%, transparent))}.board-mode-host .board-card-container.selected{background-color:var(--eru-board-card-selected-bg, color-mix(in srgb, var(--mat-sys-primary, #1976d2) 14%, transparent));box-shadow:inset 0 0 0 2px var(--eru-board-card-selected-outline, var(--mat-sys-primary, #1976d2))}.board-mode-host .board-card{height:calc(100% - 8px);overflow:hidden;cursor:pointer}.board-mode-host .board-card mat-card-title{font-size:13px}.board-mode-host .board-card mat-card-subtitle{font-size:12px}.board-mode-host .board-card-field{display:flex;flex-direction:column;margin-bottom:4px}.board-mode-host .board-field-label{font-size:10px;color:var(--grid-on-surface-variant, #49454f);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.board-mode-host .board-ghost-card{margin:8px;padding:16px;background:var(--grid-surface, #fef7ff);border-radius:8px;animation:board-pulse 1.5s ease-in-out infinite}.board-mode-host .board-ghost-line{height:12px;background:var(--grid-surface-variant, #e7e0ec);border-radius:4px;margin-bottom:8px}.board-mode-host .board-ghost-line--short{width:60%}@keyframes board-pulse{0%,to{opacity:1}50%{opacity:.5}}th.row-expand-toggle,td.row-expand-toggle{width:40px!important;min-width:40px!important;max-width:40px!important;padding:0!important;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box}.row-expand-icon{font-size:20px;width:20px;height:20px;line-height:20px;color:var(--grid-on-surface-variant);transition:transform .15s ease-in-out}.row-expand-icon.expanded{transform:rotate(90deg)}.row-detail{background:var(--grid-surface-container)}.row-detail .row-detail-cell{padding:var(--grid-spacing-sm) var(--grid-spacing-md);border-bottom:1px solid var(--grid-outline-variant)}.row-detail .row-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--grid-spacing-sm) var(--grid-spacing-md)}.row-detail .row-detail-field{display:flex;flex-direction:column;gap:var(--grid-spacing-xxs);min-width:0}.row-detail .row-detail-label{font-size:var(--grid-font-size-caption);color:var(--grid-on-surface-variant);font-weight:500}.row-detail .row-detail-value{min-width:0}.row-detail .row-detail-value data-cell{display:block;width:100%}.selection-banner{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;background:#eef4ff;border-bottom:1px solid #c7d8f5;color:#1a3a6b}.selection-banner-action{background:none;border:none;padding:0;font:inherit;color:#1558d6;font-weight:600;cursor:pointer;text-decoration:underline}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { allViewports: [{
                 type: ViewChildren,
                 args: [CdkVirtualScrollViewport]
@@ -16453,5 +17033,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_COLUMN_MIN_WIDTH, AttachmentComponent, CELL_RULE_OPERATORS, CheckboxComponent, ChipListComponent, ColumnConstraintsService, CompositeComponent, CurrencyComponent, CustomVirtualScrollStrategy, DATA_TYPES, DATETIME_FORMATS, DATE_FORMATS, DateComponent, DatetimeComponent, DurationComponent, EmailComponent, EruGridComponent, EruGridService, EruGridStore, GRID_COLOR_TOKENS, INHERITED_FIELD_KEYS, LocationComponent, MATERIAL_MODULES, MATERIAL_PROVIDERS, MONTH_SHORT_NAMES, NumberComponent, NumericInputDirective, PRESENTATION_DATATYPES, PRESET_CONFIG_DEFAULTS, PRESET_MANAGED_FIELDS, PeopleComponent, PhoneComponent, PriorityComponent, ProgressComponent, RatingComponent, SEEDED_FIELD_KEYS, SELF_COLOURED_DATATYPES, SelectComponent, StatusComponent, TagComponent, TextareaComponent, TextboxComponent, ThemeService, ThemeToggleComponent, WebsiteComponent, abbreviateNumber, abbreviationScaleFor, cellRuleBarPercent, cellRuleMatches, cellRuleToCss, cellStatAlias, cellTextStyleToCss, collectColumnStatRequests, columnCellRules, composeColorValue, evaluateRowCondition, formatCellValue, formatDateWithPattern, formatNumberValue, hasOwnCellRules, matchCellRule, matchColorRange, normalizeDatatype, normalizeDateFormat, normalizeDateTimeFormat, parseCellDate, parseColorValue, parseDateWithPattern, readRowValue, resolveColumnRules, resolveRowValue, resolveStatValue, statusPillColors, tagPillColors };
+export { ACTION_COLUMN_MIN_WIDTH, AttachmentComponent, CELL_RULE_OPERATORS, CheckboxComponent, ChipListComponent, ColumnConstraintsService, CompositeComponent, CurrencyComponent, CustomVirtualScrollStrategy, DATA_TYPES, DATETIME_FORMATS, DATE_FORMATS, DateComponent, DatetimeComponent, DurationComponent, EmailComponent, EruGridComponent, EruGridService, EruGridStore, GRID_COLOR_TOKENS, INHERITED_FIELD_KEYS, LocationComponent, MATERIAL_MODULES, MATERIAL_PROVIDERS, MONTH_SHORT_NAMES, NumberComponent, NumericInputDirective, PRESENTATION_DATATYPES, PRESET_CONFIG_DEFAULTS, PRESET_MANAGED_FIELDS, PeopleComponent, PhoneComponent, PriorityComponent, ProgressComponent, RatingComponent, SEEDED_FIELD_KEYS, SELF_COLOURED_DATATYPES, SelectComponent, StatusComponent, TagComponent, TextareaComponent, TextboxComponent, ThemeService, ThemeToggleComponent, WebsiteComponent, abbreviateNumber, abbreviationScaleFor, cellRuleBarPercent, cellRuleMatches, cellRuleToCss, cellStatAlias, cellTextStyleToCss, collectColumnStatRequests, columnCellRules, composeColorValue, effectiveValueDatatype, evaluateRowCondition, formatCellValue, formatDateTimeWithPattern, formatDateWithPattern, formatNumberValue, hasOwnCellRules, matchCellRule, matchColorRange, normalizeCellRender, normalizeDatatype, normalizeDateFormat, normalizeDateTimeFormat, parseCellDate, parseCellDateTime, parseColorValue, parseDateWithPattern, readRowValue, resolveColumnRules, resolveRowValue, resolveStatValue, rowSelectionKey, statusPillColors, tagPillColors, toDateOnlyString, toDateTimeString };
 //# sourceMappingURL=eru-grid.mjs.map