@alaarab/ogrid-angular-material 2.6.1 → 2.7.0

package/dist/esm/datagrid-table/datagrid-table.component.js

@@ -61,7 +61,9 @@ function DataGridTableComponent_For_11_Conditional_2_Template(rf, ctx) { if (rf
 } }
 function DataGridTableComponent_For_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 23)(1, "div", 24);
+    i0.ɵɵelementStart(0, "th", 23);
+    i0.ɵɵlistener("pointerdown", function DataGridTableComponent_For_11_Conditional_3_Template_th_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onNonDataSurfacePointerDown($event)); })("mousedown", function DataGridTableComponent_For_11_Conditional_3_Template_th_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onNonDataSurfacePointerDown($event)); })("selectstart", function DataGridTableComponent_For_11_Conditional_3_Template_th_selectstart_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onNonDataSurfaceSelectStart($event)); });
+    i0.ɵɵelementStart(1, "div", 24);
     i0.ɵɵtext(2, "#");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 25);
@@ -113,7 +115,7 @@ function DataGridTableComponent_For_11_For_6_Conditional_1_Template(rf, ctx) { i
     const ariaSort_r16 = sortState_r15 === "asc" ? "ascending" : sortState_r15 === "desc" ? "descending" : null;
     const config_r17 = ctx_r2.getFilterConfig(col_r10);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("min-width", ctx_r2.getEffectiveMinWidth(col_r10), "px")("width", colW_r11, "px")("max-width", colW_r11, "px")("cursor", ctx_r2.columnReorderService.isDragging() ? "grabbing" : "grab")("left", pinnedLeft_r13 ? ctx_r2.getPinnedLeftOffset(col_r10.columnId) : null, "px")("right", pinnedRight_r14 ? ctx_r2.getPinnedRightOffset(col_r10.columnId) : null, "px");
+    i0.ɵɵstyleProp("min-width", ctx_r2.getEffectiveMinWidth(col_r10), "px")("width", col_r10.width ?? colW_r11 + "px")("max-width", col_r10.width ? null : colW_r11 + "px")("cursor", ctx_r2.columnReorderService.isDragging() ? "grabbing" : "grab")("left", pinnedLeft_r13 ? ctx_r2.getPinnedLeftOffset(col_r10.columnId) : null, "px")("right", pinnedRight_r14 ? ctx_r2.getPinnedRightOffset(col_r10.columnId) : null, "px");
     i0.ɵɵclassProp("ogrid-datagrid-th--pinned-left", pinnedLeft_r13)("ogrid-datagrid-th--pinned-right", pinnedRight_r14);
     i0.ɵɵattribute("rowSpan", ctx_r2.headerRows().length > 1 ? ctx_r2.headerRows().length - ɵ$index_28_r9 : null)("data-column-id", col_r10.columnId)("aria-sort", ariaSort_r16);
     i0.ɵɵadvance(2);
@@ -177,7 +179,10 @@ function DataGridTableComponent_Conditional_12_For_3_Conditional_4_Template(rf,
     i0.ɵɵattribute("aria-label", "Select row " + (rowIndex_r23 + 1));
 } }
 function DataGridTableComponent_Conditional_12_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 44)(1, "div", 45);
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 44);
+    i0.ɵɵlistener("pointerdown", function DataGridTableComponent_Conditional_12_For_3_Conditional_5_Template_td_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNonDataSurfacePointerDown($event)); })("mousedown", function DataGridTableComponent_Conditional_12_For_3_Conditional_5_Template_td_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNonDataSurfacePointerDown($event)); })("selectstart", function DataGridTableComponent_Conditional_12_For_3_Conditional_5_Template_td_selectstart_0_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNonDataSurfaceSelectStart($event)); });
+    i0.ɵɵelementStart(1, "div", 45);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -195,96 +200,98 @@ function DataGridTableComponent_Conditional_12_For_3_Conditional_6_Template(rf,
     i0.ɵɵstyleProp("width", ctx_r2.vsLeftSpacerWidth(), "px")("min-width", ctx_r2.vsLeftSpacerWidth(), "px")("max-width", ctx_r2.vsLeftSpacerWidth(), "px")("padding", "0");
 } }
 function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
+    const _r27 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 47)(1, "ogrid-mat-inline-cell-editor", 50);
-    i0.ɵɵlistener("commit", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_2_Template_ogrid_mat_inline_cell_editor_commit_1_listener($event) { i0.ɵɵrestoreView(_r25); const colLayout_r26 = i0.ɵɵnextContext().$implicit; const descriptor_r27 = i0.ɵɵreadContextLet(1); const item_r28 = i0.ɵɵnextContext().$implicit; const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.commitEdit(item_r28, colLayout_r26.col.columnId, descriptor_r27.value, $event, rowIndex_r23, descriptor_r27.globalColIndex)); })("cancel", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_2_Template_ogrid_mat_inline_cell_editor_cancel_1_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.cancelEdit()); });
+    i0.ɵɵlistener("commit", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_2_Template_ogrid_mat_inline_cell_editor_commit_1_listener($event) { i0.ɵɵrestoreView(_r27); const colLayout_r28 = i0.ɵɵnextContext().$implicit; const descriptor_r29 = i0.ɵɵreadContextLet(1); const item_r30 = i0.ɵɵnextContext().$implicit; const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.commitEdit(item_r30, colLayout_r28.col.columnId, descriptor_r29.value, $event, rowIndex_r23, descriptor_r29.globalColIndex)); })("cancel", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_2_Template_ogrid_mat_inline_cell_editor_cancel_1_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.cancelEdit()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const colLayout_r26 = i0.ɵɵnextContext().$implicit;
-    const descriptor_r27 = i0.ɵɵreadContextLet(1);
-    const item_r28 = i0.ɵɵnextContext().$implicit;
+    const colLayout_r28 = i0.ɵɵnextContext().$implicit;
+    const descriptor_r29 = i0.ɵɵreadContextLet(1);
+    const item_r30 = i0.ɵɵnextContext().$implicit;
     const rowIndex_r23 = i0.ɵɵreadContextLet(0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", descriptor_r27.value)("item", item_r28)("column", colLayout_r26.col)("rowIndex", rowIndex_r23)("editorType", descriptor_r27.editorType ?? "text");
+    i0.ɵɵproperty("value", descriptor_r29.value)("item", item_r30)("column", colLayout_r28.col)("rowIndex", rowIndex_r23)("editorType", descriptor_r29.editorType ?? "text");
 } }
 function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ogrid-mat-popover-cell-editor", 48);
 } if (rf & 2) {
-    const colLayout_r26 = i0.ɵɵnextContext().$implicit;
-    const descriptor_r27 = i0.ɵɵreadContextLet(1);
-    const item_r28 = i0.ɵɵnextContext().$implicit;
+    const colLayout_r28 = i0.ɵɵnextContext().$implicit;
+    const descriptor_r29 = i0.ɵɵreadContextLet(1);
+    const item_r30 = i0.ɵɵnextContext().$implicit;
     const rowIndex_r23 = i0.ɵɵreadContextLet(0);
     const ctx_r2 = i0.ɵɵnextContext(2);
-    const editorProps_r29 = ctx_r2.buildPopoverEditorProps(item_r28, colLayout_r26.col, descriptor_r27);
-    i0.ɵɵproperty("item", item_r28)("column", colLayout_r26.col)("rowIndex", rowIndex_r23)("globalColIndex", descriptor_r27.globalColIndex)("displayValue", descriptor_r27.displayValue)("editorProps", editorProps_r29)("onCancel", ctx_r2.cancelEdit.bind(ctx_r2));
+    const editorProps_r31 = ctx_r2.buildPopoverEditorProps(item_r30, colLayout_r28.col, descriptor_r29);
+    i0.ɵɵproperty("item", item_r30)("column", colLayout_r28.col)("rowIndex", rowIndex_r23)("globalColIndex", descriptor_r29.globalColIndex)("displayValue", descriptor_r29.displayValue)("editorProps", editorProps_r31)("onCancel", ctx_r2.cancelEdit.bind(ctx_r2));
 } }
 function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
+    const _r33 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 54);
-    i0.ɵɵlistener("change", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_2_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r31); const colLayout_r26 = i0.ɵɵnextContext(2).$implicit; const descriptor_r27 = i0.ɵɵreadContextLet(1); const item_r28 = i0.ɵɵnextContext().$implicit; const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(descriptor_r27.canEditAny ? ctx_r2.commitBooleanEdit(item_r28, colLayout_r26.col.columnId, !!descriptor_r27.displayValue, rowIndex_r23, descriptor_r27.globalColIndex) : null); })("pointerdown", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_2_Template_input_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r31); i0.ɵɵnextContext(2); const descriptor_r27 = i0.ɵɵreadContextLet(1); i0.ɵɵnextContext(); const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onBooleanCheckboxPointerDown($event, rowIndex_r23, descriptor_r27.globalColIndex)); })("click", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_2_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r31); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵlistener("change", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_2_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r33); const colLayout_r28 = i0.ɵɵnextContext(2).$implicit; const descriptor_r29 = i0.ɵɵreadContextLet(1); const item_r30 = i0.ɵɵnextContext().$implicit; const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(descriptor_r29.canEditAny ? ctx_r2.commitBooleanEdit(item_r30, colLayout_r28.col.columnId, !!descriptor_r29.displayValue, rowIndex_r23, descriptor_r29.globalColIndex) : null); })("pointerdown", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_2_Template_input_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r33); i0.ɵɵnextContext(2); const descriptor_r29 = i0.ɵɵreadContextLet(1); i0.ɵɵnextContext(); const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onBooleanCheckboxPointerDown($event, rowIndex_r23, descriptor_r29.globalColIndex)); })("click", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_2_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r33); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const descriptor_r27 = i0.ɵɵreadContextLet(1);
-    i0.ɵɵstyleProp("cursor", descriptor_r27.canEditAny ? "pointer" : "default");
-    i0.ɵɵproperty("checked", !!descriptor_r27.displayValue)("disabled", !descriptor_r27.canEditAny);
-    i0.ɵɵattribute("aria-label", descriptor_r27.displayValue ? "Checked" : "Unchecked");
+    const descriptor_r29 = i0.ɵɵreadContextLet(1);
+    i0.ɵɵstyleProp("cursor", descriptor_r29.canEditAny ? "pointer" : "default");
+    i0.ɵɵproperty("checked", !!descriptor_r29.displayValue)("disabled", !descriptor_r29.canEditAny);
+    i0.ɵɵattribute("aria-label", descriptor_r29.displayValue ? "Checked" : "Unchecked");
 } }
 function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r32 = i0.ɵɵreadContextLet(0);
-    i0.ɵɵtextInterpolate1(" ", content_r32, " ");
+    const content_r34 = i0.ɵɵreadContextLet(0);
+    i0.ɵɵtextInterpolate1(" ", content_r34, " ");
 } }
 function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
+    const _r35 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 55);
-    i0.ɵɵlistener("pointerdown", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_4_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.onFillHandleMouseDown($event)); });
+    i0.ɵɵlistener("pointerdown", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_4_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.onFillHandleMouseDown($event)); });
     i0.ɵɵelementEnd();
 } }
 function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
+    const _r32 = i0.ɵɵgetCurrentView();
     i0.ɵɵdeclareLet(0);
     i0.ɵɵelementStart(1, "div", 51);
-    i0.ɵɵlistener("pointerdown", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template_div_pointerdown_1_listener($event) { i0.ɵɵrestoreView(_r30); i0.ɵɵnextContext(); const descriptor_r27 = i0.ɵɵreadContextLet(1); i0.ɵɵnextContext(); const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCellMouseDown($event, rowIndex_r23, descriptor_r27.globalColIndex)); })("click", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r30); i0.ɵɵnextContext(); const descriptor_r27 = i0.ɵɵreadContextLet(1); i0.ɵɵnextContext(); const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCellClick(rowIndex_r23, descriptor_r27.globalColIndex)); })("contextmenu", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template_div_contextmenu_1_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onCellContextMenu($event)); })("dblclick", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template_div_dblclick_1_listener() { i0.ɵɵrestoreView(_r30); const colLayout_r26 = i0.ɵɵnextContext().$implicit; const descriptor_r27 = i0.ɵɵreadContextLet(1); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(descriptor_r27.canEditAny ? ctx_r2.onCellDblClick(descriptor_r27.rowId, colLayout_r26.col.columnId) : null); });
+    i0.ɵɵlistener("pointerdown", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template_div_pointerdown_1_listener($event) { i0.ɵɵrestoreView(_r32); i0.ɵɵnextContext(); const descriptor_r29 = i0.ɵɵreadContextLet(1); i0.ɵɵnextContext(); const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCellMouseDown($event, rowIndex_r23, descriptor_r29.globalColIndex)); })("click", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r32); i0.ɵɵnextContext(); const descriptor_r29 = i0.ɵɵreadContextLet(1); i0.ɵɵnextContext(); const rowIndex_r23 = i0.ɵɵreadContextLet(0); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCellClick(rowIndex_r23, descriptor_r29.globalColIndex)); })("contextmenu", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template_div_contextmenu_1_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onCellContextMenu($event)); })("dblclick", function DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template_div_dblclick_1_listener() { i0.ɵɵrestoreView(_r32); const colLayout_r28 = i0.ɵɵnextContext().$implicit; const descriptor_r29 = i0.ɵɵreadContextLet(1); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(descriptor_r29.canEditAny ? ctx_r2.onCellDblClick(descriptor_r29.rowId, colLayout_r28.col.columnId) : null); });
     i0.ɵɵconditionalCreate(2, DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_2_Template, 1, 5, "input", 52)(3, DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_3_Template, 1, 1);
     i0.ɵɵconditionalCreate(4, DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Conditional_4_Template, 1, 0, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const colLayout_r26 = i0.ɵɵnextContext().$implicit;
-    const descriptor_r27 = i0.ɵɵreadContextLet(1);
-    const item_r28 = i0.ɵɵnextContext().$implicit;
+    const colLayout_r28 = i0.ɵɵnextContext().$implicit;
+    const descriptor_r29 = i0.ɵɵreadContextLet(1);
+    const item_r30 = i0.ɵɵnextContext().$implicit;
     const rowIndex_r23 = i0.ɵɵreadContextLet(0);
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstoreLet(ctx_r2.resolveCellContent(colLayout_r26.col, item_r28, descriptor_r27.displayValue));
-    const cellStyle_r34 = ctx_r2.resolveCellStyleFn(colLayout_r26.col, item_r28, descriptor_r27.displayValue);
+    i0.ɵɵstoreLet(ctx_r2.resolveCellContent(colLayout_r28.col, item_r30, descriptor_r29.displayValue));
+    const cellStyle_r36 = ctx_r2.resolveCellStyleFn(colLayout_r28.col, item_r30, descriptor_r29.displayValue);
     i0.ɵɵadvance();
-    i0.ɵɵstyleMap(cellStyle_r34 ?? undefined);
-    i0.ɵɵclassProp("ogrid-datagrid-cell--active", descriptor_r27.isActive)("ogrid-datagrid-cell--active-in-range", descriptor_r27.isActive && descriptor_r27.isInRange)("ogrid-datagrid-cell--in-range", descriptor_r27.isInRange && !descriptor_r27.isActive)("ogrid-datagrid-cell--in-cut-range", descriptor_r27.isInCutRange)("ogrid-datagrid-cell--editable", descriptor_r27.canEditAny)("ogrid-datagrid-cell--numeric", colLayout_r26.col.type === "numeric")("ogrid-datagrid-cell--boolean", colLayout_r26.col.type === "boolean");
-    i0.ɵɵattribute("data-row-index", rowIndex_r23)("data-col-index", descriptor_r27.globalColIndex)("data-in-range", descriptor_r27.isInRange ? "true" : null)("tabindex", descriptor_r27.isActive ? 0 : -1)("role", descriptor_r27.canEditAny ? "button" : null);
+    i0.ɵɵstyleMap(cellStyle_r36 ?? undefined);
+    i0.ɵɵclassProp("ogrid-datagrid-cell--active", descriptor_r29.isActive)("ogrid-datagrid-cell--active-in-range", descriptor_r29.isActive && descriptor_r29.isInRange)("ogrid-datagrid-cell--in-range", descriptor_r29.isInRange && !descriptor_r29.isActive)("ogrid-datagrid-cell--in-cut-range", descriptor_r29.isInCutRange)("ogrid-datagrid-cell--editable", descriptor_r29.canEditAny)("ogrid-datagrid-cell--numeric", colLayout_r28.col.type === "numeric")("ogrid-datagrid-cell--boolean", colLayout_r28.col.type === "boolean");
+    i0.ɵɵattribute("data-row-index", rowIndex_r23)("data-col-index", descriptor_r29.globalColIndex)("data-in-range", descriptor_r29.isInRange ? "true" : null)("tabindex", descriptor_r29.isActive ? 0 : -1)("role", descriptor_r29.canEditAny ? "button" : null);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(colLayout_r26.col.type === "boolean" ? 2 : 3);
+    i0.ɵɵconditional(colLayout_r28.col.type === "boolean" ? 2 : 3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(descriptor_r27.canEditAny && descriptor_r27.isSelectionEndCell ? 4 : -1);
+    i0.ɵɵconditional(descriptor_r29.canEditAny && descriptor_r29.isSelectionEndCell ? 4 : -1);
 } }
 function DataGridTableComponent_Conditional_12_For_3_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "td", 46);
+    i0.ɵɵlistener("pointerdown", function DataGridTableComponent_Conditional_12_For_3_For_8_Template_td_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNonDataSurfacePointerDown($event)); })("mousedown", function DataGridTableComponent_Conditional_12_For_3_For_8_Template_td_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNonDataSurfacePointerDown($event)); })("selectstart", function DataGridTableComponent_Conditional_12_For_3_For_8_Template_td_selectstart_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onNonDataSurfaceSelectStart($event)); });
     i0.ɵɵdeclareLet(1);
     i0.ɵɵconditionalCreate(2, DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_2_Template, 2, 5, "div", 47)(3, DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_3_Template, 1, 7, "ogrid-mat-popover-cell-editor", 48)(4, DataGridTableComponent_Conditional_12_For_3_For_8_Conditional_4_Template, 5, 24, "div", 49);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const colLayout_r26 = ctx.$implicit;
-    const item_r28 = i0.ɵɵnextContext().$implicit;
+    const colLayout_r28 = ctx.$implicit;
+    const item_r30 = i0.ɵɵnextContext().$implicit;
     const rowIndex_r23 = i0.ɵɵreadContextLet(0);
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("min-width", colLayout_r26.minWidth, "px")("width", colLayout_r26.width, "px")("max-width", colLayout_r26.width, "px")("left", colLayout_r26.pinnedLeft ? ctx_r2.getPinnedLeftOffset(colLayout_r26.col.columnId) : null, "px")("right", colLayout_r26.pinnedRight ? ctx_r2.getPinnedRightOffset(colLayout_r26.col.columnId) : null, "px");
-    i0.ɵɵclassProp("ogrid-datagrid-td--pinned-left", colLayout_r26.pinnedLeft)("ogrid-datagrid-td--pinned-right", colLayout_r26.pinnedRight);
-    i0.ɵɵattribute("data-column-id", colLayout_r26.col.columnId);
+    i0.ɵɵstyleProp("min-width", colLayout_r28.minWidth, "px")("width", colLayout_r28.cssWidth ?? colLayout_r28.width + "px")("max-width", colLayout_r28.cssWidth ? null : colLayout_r28.width + "px")("left", colLayout_r28.pinnedLeft ? ctx_r2.getPinnedLeftOffset(colLayout_r28.col.columnId) : null, "px")("right", colLayout_r28.pinnedRight ? ctx_r2.getPinnedRightOffset(colLayout_r28.col.columnId) : null, "px");
+    i0.ɵɵclassProp("ogrid-datagrid-td--pinned-left", colLayout_r28.pinnedLeft)("ogrid-datagrid-td--pinned-right", colLayout_r28.pinnedRight);
+    i0.ɵɵattribute("data-column-id", colLayout_r28.col.columnId);
     i0.ɵɵadvance();
-    const descriptor_r35 = i0.ɵɵstoreLet(ctx_r2.getCellDescriptor(item_r28, colLayout_r26.col, rowIndex_r23, ctx_r2.getGlobalColIndex(colLayout_r26.col)));
+    const descriptor_r37 = i0.ɵɵstoreLet(ctx_r2.getCellDescriptor(item_r30, colLayout_r28.col, rowIndex_r23, ctx_r2.getGlobalColIndex(colLayout_r28.col)));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(descriptor_r35.mode === "editing-inline" ? 2 : descriptor_r35.mode === "editing-popover" ? 3 : 4);
+    i0.ɵɵconditional(descriptor_r37.mode === "editing-inline" ? 2 : descriptor_r37.mode === "editing-popover" ? 3 : 4);
 } }
 function DataGridTableComponent_Conditional_12_For_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "td");
@@ -304,17 +311,17 @@ function DataGridTableComponent_Conditional_12_For_3_Template(rf, ctx) { if (rf
     i0.ɵɵconditionalCreate(9, DataGridTableComponent_Conditional_12_For_3_Conditional_9_Template, 1, 8, "td", 40);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r28 = ctx.$implicit;
-    const ɵ$index_83_r36 = ctx.$index;
+    const item_r30 = ctx.$implicit;
+    const ɵ$index_83_r38 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstoreLet(ctx_r2.vsStartIndex() + ɵ$index_83_r36);
+    i0.ɵɵstoreLet(ctx_r2.vsStartIndex() + ɵ$index_83_r38);
     i0.ɵɵadvance();
-    const rowId_r37 = i0.ɵɵstoreLet(ctx_r2.getRowId()(item_r28));
+    const rowId_r39 = i0.ɵɵstoreLet(ctx_r2.getRowId()(item_r30));
     i0.ɵɵadvance();
-    const isSelected_r38 = i0.ɵɵstoreLet(ctx_r2.selectedRowIds().has(rowId_r37));
+    const isSelected_r40 = i0.ɵɵstoreLet(ctx_r2.selectedRowIds().has(rowId_r39));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("ogrid-datagrid-row--selected", isSelected_r38);
-    i0.ɵɵattribute("data-row-id", rowId_r37)("aria-selected", isSelected_r38 || null);
+    i0.ɵɵclassProp("ogrid-datagrid-row--selected", isSelected_r40);
+    i0.ɵɵattribute("data-row-id", rowId_r39)("aria-selected", isSelected_r40 || null);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.hasCheckboxCol() ? 4 : -1);
     i0.ɵɵadvance();
@@ -354,12 +361,12 @@ function DataGridTableComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("containerEl", ctx_r2.tableContainerEl())("references", ctx_r2.formulaReferences())("colOffset", ctx_r2.colOffset());
 } }
 function DataGridTableComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r39 = i0.ɵɵgetCurrentView();
+    const _r41 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 11)(1, "div", 56);
     i0.ɵɵtext(2, "No results found");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 57)(4, "ogrid-empty-state", 58);
-    i0.ɵɵlistener("clearAll", function DataGridTableComponent_Conditional_15_Template_ogrid_empty_state_clearAll_4_listener() { let tmp_5_0; i0.ɵɵrestoreView(_r39); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((tmp_5_0 = ctx_r2.emptyState()) == null ? null : tmp_5_0.onClearAll()); });
+    i0.ɵɵlistener("clearAll", function DataGridTableComponent_Conditional_15_Template_ogrid_empty_state_clearAll_4_listener() { let tmp_5_0; i0.ɵɵrestoreView(_r41); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((tmp_5_0 = ctx_r2.emptyState()) == null ? null : tmp_5_0.onClearAll()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_4_0;
@@ -376,11 +383,11 @@ function DataGridTableComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵstyleProp("left", ctx_r2.columnReorderService.dropIndicatorX(), "px");
 } }
 function DataGridTableComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    const _r40 = i0.ɵɵgetCurrentView();
+    const _r42 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 60);
-    i0.ɵɵlistener("click", function DataGridTableComponent_Conditional_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); })("contextmenu", function DataGridTableComponent_Conditional_17_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(); $event.preventDefault(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); });
+    i0.ɵɵlistener("click", function DataGridTableComponent_Conditional_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); })("contextmenu", function DataGridTableComponent_Conditional_17_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(); $event.preventDefault(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); });
     i0.ɵɵelementStart(1, "ogrid-context-menu", 61);
-    i0.ɵɵlistener("undoAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_undoAction_1_listener() { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUndo()); })("redoAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_redoAction_1_listener() { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRedo()); })("copyAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_copyAction_1_listener() { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleCopy()); })("cutAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_cutAction_1_listener() { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleCut()); })("pasteAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_pasteAction_1_listener() { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handlePaste()); })("selectAllAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_selectAllAction_1_listener() { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleSelectAllCells()); })("closeAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_closeAction_1_listener() { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); });
+    i0.ɵɵlistener("undoAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_undoAction_1_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUndo()); })("redoAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_redoAction_1_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRedo()); })("copyAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_copyAction_1_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleCopy()); })("cutAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_cutAction_1_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleCut()); })("pasteAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_pasteAction_1_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handlePaste()); })("selectAllAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_selectAllAction_1_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleSelectAllCells()); })("closeAction", function DataGridTableComponent_Conditional_17_Template_ogrid_context_menu_closeAction_1_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -391,8 +398,8 @@ function DataGridTableComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ogrid-status-bar", 14);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    const sbConfig_r41 = i0.ɵɵreadContextLet(18);
-    i0.ɵɵproperty("totalCount", sbConfig_r41.totalCount)("filteredCount", sbConfig_r41.filteredCount)("selectedCount", sbConfig_r41.selectedCount ?? ctx_r2.selectedRowIds().size)("selectedCellCount", ctx_r2.selectionCellCount())("aggregation", sbConfig_r41.aggregation)("suppressRowCount", sbConfig_r41.suppressRowCount)("classNames", ctx_r2.statusBarClasses);
+    const sbConfig_r43 = i0.ɵɵreadContextLet(18);
+    i0.ɵɵproperty("totalCount", sbConfig_r43.totalCount)("filteredCount", sbConfig_r43.filteredCount)("selectedCount", sbConfig_r43.selectedCount ?? ctx_r2.selectedRowIds().size)("selectedCellCount", ctx_r2.selectionCellCount())("aggregation", sbConfig_r43.aggregation)("suppressRowCount", sbConfig_r43.suppressRowCount)("classNames", ctx_r2.statusBarClasses);
 } }
 function DataGridTableComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15)(1, "div", 62);
@@ -465,7 +472,7 @@ export class DataGridTableComponent extends BaseDataGridTableComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.wrapperRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableContainerRef = _t.first);
-        } }, inputs: { propsInput: [0, "props", "propsInput"] }, features: [i0.ɵɵProvidersFeature([DataGridStateService, ColumnReorderService, VirtualScrollService]), i0.ɵɵInheritDefinitionFeature], decls: 21, vars: 39, consts: [["wrapperEl", ""], ["tableContainerElRef", ""], [1, "ogrid-datagrid-root"], ["tabindex", "0", "role", "region", "data-ogrid-scroll-container", "", 1, "ogrid-datagrid-wrapper", 3, "pointerdown", "keydown", "scroll", "contextmenu"], [1, "ogrid-datagrid-scroll-wrapper"], [2, "overflow-x", "clip"], ["role", "grid", 1, "ogrid-datagrid-table"], [1, "ogrid-column-letter-row"], [1, "ogrid-datagrid-header-row"], [3, "containerEl", "selectionRange", "copyRange", "cutRange", "colOffset", "columnSizingVersion", "items", "visibleColumns", "columnOrder"], [3, "containerEl", "references", "colOffset"], [1, "ogrid-datagrid-empty"], [1, "ogrid-datagrid-drop-indicator", 3, "left"], [1, "ogrid-datagrid-context-menu-overlay"], [3, "totalCount", "filteredCount", "selectedCount", "selectedCellCount", "aggregation", "suppressRowCount", "classNames"], [1, "ogrid-datagrid-loading-overlay"], [1, "ogrid-column-letter-cell"], [1, "ogrid-datagrid-th", "ogrid-datagrid-checkbox-col"], [1, "ogrid-datagrid-th", 2, "width", "48px", "min-width", "48px", "padding", "0"], [1, "ogrid-datagrid-th", "ogrid-row-number-header", 3, "width", "min-width", "max-width"], [1, "ogrid-datagrid-th", 2, "padding", "0", 3, "width", "min-width"], [1, "ogrid-datagrid-checkbox-wrapper"], ["type", "checkbox", "aria-label", "Select all rows", 3, "change", "checked", "indeterminate"], [1, "ogrid-datagrid-th", "ogrid-row-number-header"], [1, "ogrid-row-number-header-content"], ["role", "separator", "aria-label", "Resize row numbers", 1, "ogrid-datagrid-resize-handle", 3, "pointerdown", "dblclick"], [1, "ogrid-datagrid-th", 2, "padding", "0"], ["scope", "colgroup", 1, "ogrid-datagrid-th", "ogrid-datagrid-group-header"], ["scope", "col", 1, "ogrid-datagrid-th", 3, "ogrid-datagrid-th--pinned-left", "ogrid-datagrid-th--pinned-right", "minWidth", "width", "maxWidth", "cursor", "left", "right"], ["scope", "col", 1, "ogrid-datagrid-th", 3, "pointerdown"], [2, "display", "flex", "align-items", "center", "gap", "4px"], [3, "columnKey", "columnName", "filterType", "isSorted", "isSortedDescending", "onSort", "selectedValues", "onFilterChange", "options", "isLoadingOptions", "textValue", "onTextChange", "selectedUser", "onUserChange", "peopleSearch", "dateValue", "onDateChange"], [3, "columnId", "canPinLeft", "canPinRight", "canUnpin", "currentSort", "isSortable", "isResizable", "handlers"], ["role", "separator", 1, "ogrid-datagrid-resize-handle", 3, "pointerdown", "dblclick"], [1, "ogrid-datagrid-vs-spacer", 3, "height"], [1, "ogrid-datagrid-row", 3, "ogrid-datagrid-row--selected"], [1, "ogrid-datagrid-vs-spacer"], [1, "ogrid-datagrid-row", 3, "click"], [1, "ogrid-datagrid-td", "ogrid-datagrid-checkbox-col"], [1, "ogrid-datagrid-td", "ogrid-row-number-cell", 3, "width", "min-width", "max-width"], [3, "width", "minWidth", "maxWidth", "padding"], [1, "ogrid-datagrid-td", 3, "ogrid-datagrid-td--pinned-left", "ogrid-datagrid-td--pinned-right", "minWidth", "width", "maxWidth", "left", "right"], [1, "ogrid-datagrid-checkbox-wrapper", 3, "click"], ["type", "checkbox", 3, "change", "checked"], [1, "ogrid-datagrid-td", "ogrid-row-number-cell"], [1, "ogrid-row-number-cell-content"], [1, "ogrid-datagrid-td"], [1, "ogrid-editing-cell"], [3, "item", "column", "rowIndex", "globalColIndex", "displayValue", "editorProps", "onCancel"], [1, "ogrid-datagrid-cell", 3, "ogrid-datagrid-cell--active", "ogrid-datagrid-cell--active-in-range", "ogrid-datagrid-cell--in-range", "ogrid-datagrid-cell--in-cut-range", "ogrid-datagrid-cell--editable", "ogrid-datagrid-cell--numeric", "ogrid-datagrid-cell--boolean", "style"], [3, "commit", "cancel", "value", "item", "column", "rowIndex", "editorType"], [1, "ogrid-datagrid-cell", 3, "pointerdown", "click", "contextmenu", "dblclick"], ["type", "checkbox", 2, "margin", "0", "outline", "none", 3, "checked", "disabled", "cursor"], ["aria-label", "Fill handle", 1, "ogrid-datagrid-fill-handle"], ["type", "checkbox", 2, "margin", "0", "outline", "none", 3, "change", "pointerdown", "click", "checked", "disabled"], ["aria-label", "Fill handle", 1, "ogrid-datagrid-fill-handle", 3, "pointerdown"], [1, "ogrid-datagrid-empty__title"], [1, "ogrid-datagrid-empty__message"], [3, "clearAll", "message", "hasActiveFilters", "render"], [1, "ogrid-datagrid-drop-indicator"], [1, "ogrid-datagrid-context-menu-overlay", 3, "click", "contextmenu"], [3, "undoAction", "redoAction", "copyAction", "cutAction", "pasteAction", "selectAllAction", "closeAction", "x", "y", "hasSelection", "canUndoProp", "canRedoProp"], [1, "ogrid-datagrid-loading-inner"], [1, "ogrid-datagrid-spinner"]], template: function DataGridTableComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { propsInput: [0, "props", "propsInput"] }, features: [i0.ɵɵProvidersFeature([DataGridStateService, ColumnReorderService, VirtualScrollService]), i0.ɵɵInheritDefinitionFeature], decls: 21, vars: 39, consts: [["wrapperEl", ""], ["tableContainerElRef", ""], [1, "ogrid-datagrid-root"], ["tabindex", "0", "role", "region", "data-ogrid-scroll-container", "", 1, "ogrid-datagrid-wrapper", 3, "pointerdown", "keydown", "scroll", "contextmenu"], [1, "ogrid-datagrid-scroll-wrapper"], [2, "overflow-x", "clip"], ["role", "grid", 1, "ogrid-datagrid-table"], [1, "ogrid-column-letter-row"], [1, "ogrid-datagrid-header-row"], [3, "containerEl", "selectionRange", "copyRange", "cutRange", "colOffset", "columnSizingVersion", "items", "visibleColumns", "columnOrder"], [3, "containerEl", "references", "colOffset"], [1, "ogrid-datagrid-empty"], [1, "ogrid-datagrid-drop-indicator", 3, "left"], [1, "ogrid-datagrid-context-menu-overlay"], [3, "totalCount", "filteredCount", "selectedCount", "selectedCellCount", "aggregation", "suppressRowCount", "classNames"], [1, "ogrid-datagrid-loading-overlay"], [1, "ogrid-column-letter-cell"], [1, "ogrid-datagrid-th", "ogrid-datagrid-checkbox-col"], [1, "ogrid-datagrid-th", 2, "width", "48px", "min-width", "48px", "padding", "0"], [1, "ogrid-datagrid-th", "ogrid-row-number-header", 3, "width", "min-width", "max-width"], [1, "ogrid-datagrid-th", 2, "padding", "0", 3, "width", "min-width"], [1, "ogrid-datagrid-checkbox-wrapper"], ["type", "checkbox", "aria-label", "Select all rows", 3, "change", "checked", "indeterminate"], [1, "ogrid-datagrid-th", "ogrid-row-number-header", 3, "pointerdown", "mousedown", "selectstart"], [1, "ogrid-row-number-header-content"], ["role", "separator", "aria-label", "Resize row numbers", 1, "ogrid-datagrid-resize-handle", 3, "pointerdown", "dblclick"], [1, "ogrid-datagrid-th", 2, "padding", "0"], ["scope", "colgroup", 1, "ogrid-datagrid-th", "ogrid-datagrid-group-header"], ["scope", "col", 1, "ogrid-datagrid-th", 3, "ogrid-datagrid-th--pinned-left", "ogrid-datagrid-th--pinned-right", "minWidth", "width", "maxWidth", "cursor", "left", "right"], ["scope", "col", 1, "ogrid-datagrid-th", 3, "pointerdown"], [2, "display", "flex", "align-items", "center", "gap", "4px"], [3, "columnKey", "columnName", "filterType", "isSorted", "isSortedDescending", "onSort", "selectedValues", "onFilterChange", "options", "isLoadingOptions", "textValue", "onTextChange", "selectedUser", "onUserChange", "peopleSearch", "dateValue", "onDateChange"], [3, "columnId", "canPinLeft", "canPinRight", "canUnpin", "currentSort", "isSortable", "isResizable", "handlers"], ["role", "separator", 1, "ogrid-datagrid-resize-handle", 3, "pointerdown", "dblclick"], [1, "ogrid-datagrid-vs-spacer", 3, "height"], [1, "ogrid-datagrid-row", 3, "ogrid-datagrid-row--selected"], [1, "ogrid-datagrid-vs-spacer"], [1, "ogrid-datagrid-row", 3, "click"], [1, "ogrid-datagrid-td", "ogrid-datagrid-checkbox-col"], [1, "ogrid-datagrid-td", "ogrid-row-number-cell", 2, "user-select", "none", "-webkit-user-select", "none", 3, "width", "min-width", "max-width"], [3, "width", "minWidth", "maxWidth", "padding"], [1, "ogrid-datagrid-td", 2, "user-select", "none", "-webkit-user-select", "none", 3, "ogrid-datagrid-td--pinned-left", "ogrid-datagrid-td--pinned-right", "minWidth", "width", "maxWidth", "left", "right"], [1, "ogrid-datagrid-checkbox-wrapper", 3, "click"], ["type", "checkbox", 3, "change", "checked"], [1, "ogrid-datagrid-td", "ogrid-row-number-cell", 2, "user-select", "none", "-webkit-user-select", "none", 3, "pointerdown", "mousedown", "selectstart"], [1, "ogrid-row-number-cell-content"], [1, "ogrid-datagrid-td", 2, "user-select", "none", "-webkit-user-select", "none", 3, "pointerdown", "mousedown", "selectstart"], [1, "ogrid-editing-cell"], [3, "item", "column", "rowIndex", "globalColIndex", "displayValue", "editorProps", "onCancel"], [1, "ogrid-datagrid-cell", 3, "ogrid-datagrid-cell--active", "ogrid-datagrid-cell--active-in-range", "ogrid-datagrid-cell--in-range", "ogrid-datagrid-cell--in-cut-range", "ogrid-datagrid-cell--editable", "ogrid-datagrid-cell--numeric", "ogrid-datagrid-cell--boolean", "style"], [3, "commit", "cancel", "value", "item", "column", "rowIndex", "editorType"], [1, "ogrid-datagrid-cell", 3, "pointerdown", "click", "contextmenu", "dblclick"], ["type", "checkbox", 2, "margin", "0", "outline", "none", 3, "checked", "disabled", "cursor"], ["aria-label", "Fill handle", 1, "ogrid-datagrid-fill-handle"], ["type", "checkbox", 2, "margin", "0", "outline", "none", 3, "change", "pointerdown", "click", "checked", "disabled"], ["aria-label", "Fill handle", 1, "ogrid-datagrid-fill-handle", 3, "pointerdown"], [1, "ogrid-datagrid-empty__title"], [1, "ogrid-datagrid-empty__message"], [3, "clearAll", "message", "hasActiveFilters", "render"], [1, "ogrid-datagrid-drop-indicator"], [1, "ogrid-datagrid-context-menu-overlay", 3, "click", "contextmenu"], [3, "undoAction", "redoAction", "copyAction", "cutAction", "pasteAction", "selectAllAction", "closeAction", "x", "y", "hasSelection", "canUndoProp", "canRedoProp"], [1, "ogrid-datagrid-loading-inner"], [1, "ogrid-datagrid-spinner"]], template: function DataGridTableComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3, 0);
             i0.ɵɵlistener("pointerdown", function DataGridTableComponent_Template_div_pointerdown_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onWrapperMouseDown($event)); })("keydown", function DataGridTableComponent_Template_div_keydown_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onGridKeyDown($event)); })("scroll", function DataGridTableComponent_Template_div_scroll_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onWrapperScroll($event)); })("contextmenu", function DataGridTableComponent_Template_div_contextmenu_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.preventDefault()); });
@@ -517,12 +524,12 @@ export class DataGridTableComponent extends BaseDataGridTableComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.menuPosition() ? 17 : -1);
             i0.ɵɵadvance();
-            const sbConfig_r42 = i0.ɵɵstoreLet(ctx.statusBarConfig());
+            const sbConfig_r44 = i0.ɵɵstoreLet(ctx.statusBarConfig());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(sbConfig_r42 ? 19 : -1);
+            i0.ɵɵconditional(sbConfig_r44 ? 19 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoading() ? 20 : -1);
-        } }, dependencies: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, FormulaRefOverlayComponent, InlineCellEditorComponent, PopoverCellEditorComponent], styles: ["\n    :host { display: block; }\n    .ogrid-datagrid-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n    .ogrid-datagrid-wrapper {\n      position: relative; width: 100%; max-width: 100%;\n      overflow-x: hidden; overflow-y: auto; background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      will-change: scroll-position; outline: none;\n    }\n    .ogrid-datagrid-wrapper[data-virtual-scroll] { flex: 1; min-height: 0; }\n    .ogrid-datagrid-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }\n    .ogrid-datagrid-cell--active[data-drag-range] { outline: none; }\n    .ogrid-datagrid-wrapper--fit { width: fit-content; }\n    .ogrid-datagrid-wrapper--overflow-x { overflow-x: auto; }\n    .ogrid-datagrid-wrapper--loading-empty { min-height: 200px; }\n    .ogrid-datagrid-scroll-wrapper { display: flex; flex-direction: column; min-height: 100%; }\n    .ogrid-datagrid-table-wrapper--loading { position: relative; opacity: 0.6; }\n    .ogrid-datagrid-table {\n      width: 100%; min-width: max-content; border-collapse: collapse; table-layout: fixed;\n    }\n    .ogrid-datagrid-table tr th:first-child,\n    .ogrid-datagrid-table tr td:first-child { border-left: none; }\n    .ogrid-datagrid-table tbody tr { height: var(--ogrid-row-height, auto); }\n    .ogrid-datagrid-thead {\n      z-index: 8; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-datagrid-thead th { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-header-row { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-th {\n      font-weight: 600; padding: 6px 10px; text-align: left;\n      font-size: 14px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); z-index: 8;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-sticky-header .ogrid-datagrid-th { position: sticky; top: 0; }\n    .ogrid-datagrid-th:focus-visible {\n      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 11;\n    }\n    .ogrid-datagrid-th--pinned-left {\n      position: sticky; top: 0; left: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;\n      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-th--pinned-right {\n      position: sticky; top: 0; right: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;\n      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-group-header {\n      text-align: center; font-weight: 600; border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); padding: 6px;\n    }\n    .ogrid-datagrid-checkbox-col {\n      width: 48px; min-width: 48px;\n      max-width: 48px; text-align: center;\n    }\n    .ogrid-datagrid-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }\n    .ogrid-row-number-header, .ogrid-row-number-cell {\n      text-align: center;\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); font-weight: 600;\n      font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      position: sticky; left: 0; z-index: 3;\n    }\n    .ogrid-row-number-header { z-index: 4; }\n    .ogrid-row-number-header-content, .ogrid-row-number-cell-content {\n      display: flex; align-items: center; justify-content: center;\n    }\n    .ogrid-datagrid-row { }\n    .ogrid-datagrid-row:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-row--selected { background: var(--ogrid-selected-row-bg, #e6f0fb); }\n    .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.06)); }\n    .ogrid-datagrid-td--pinned-left {\n      position: sticky; left: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;\n      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-td--pinned-right {\n      position: sticky; right: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;\n      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-cell {\n      width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;\n      padding: var(--ogrid-cell-padding, 6px 10px); box-sizing: border-box; overflow: hidden;\n      text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none;\n      font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-cell:focus-visible {\n      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 3;\n    }\n    .ogrid-datagrid-cell--numeric { justify-content: flex-end; text-align: right; }\n    .ogrid-datagrid-cell--boolean { justify-content: flex-start; }\n    .ogrid-datagrid-cell--editable { cursor: cell; }\n    .ogrid-datagrid-cell--active {\n      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;\n      z-index: 2; position: relative; overflow: visible;\n    }\n    .ogrid-datagrid-td:has(> .ogrid-datagrid-cell--active),\n    .ogrid-datagrid-td:has(> .ogrid-editing-cell) { z-index: 2; }\n    .ogrid-datagrid-cell--active-in-range { outline: none; background: var(--ogrid-bg, #fff); }\n    .ogrid-datagrid-cell--in-range { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }\n    .ogrid-datagrid-cell--in-cut-range { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); opacity: 0.7; }\n    .ogrid-datagrid-cell--editing { padding: 0; }\n    .ogrid-editing-cell {\n      width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;\n      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;\n      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: hidden; padding: 0;\n    }\n    .ogrid-datagrid-editor-input {\n      width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection-color, #217346);\n      box-sizing: border-box; font-size: 14px; outline: none; font-family: inherit; line-height: inherit;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-cell--numeric .ogrid-datagrid-editor-input {\n      text-align: right;\n    }\n    .ogrid-datagrid-editor-select {\n      width: 100%; height: 100%; padding: 4px 8px; border: 2px solid var(--ogrid-selection-color, #217346);\n      box-sizing: border-box; font-size: 14px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-fill-handle {\n      position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;\n      background: var(--ogrid-selection-color, #217346);\n      border: 1px solid var(--ogrid-bg, #ffffff); border-radius: 1px;\n      cursor: crosshair; pointer-events: auto; touch-action: none; z-index: 3;\n    }\n    @media (pointer: coarse) {\n      .ogrid-datagrid-fill-handle { width: 14px; height: 14px; right: -7px; bottom: -7px; border-radius: 2px; }\n    }\n    .ogrid-datagrid-resize-handle {\n      position: absolute; top: 0; right: -3px; bottom: 0; width: 8px;\n      cursor: col-resize; user-select: none; touch-action: none;\n    }\n    @media (pointer: coarse) {\n      .ogrid-datagrid-resize-handle { width: 16px; right: -8px; }\n    }\n    .ogrid-datagrid-resize-handle::after {\n      content: ''; position: absolute; top: 4px; right: 3px; bottom: 4px; width: 2px;\n      background: var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 1px; transition: background 0.15s;\n    }\n    .ogrid-datagrid-resize-handle:hover::after { background: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4)); }\n    .ogrid-datagrid-resize-handle:active::after { background: var(--mat-sys-primary, #1976d2); }\n    .ogrid-datagrid-empty {\n      padding: 32px 16px; text-align: center; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-datagrid-empty__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }\n    .ogrid-datagrid-empty__message { font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-datagrid-empty__clear {\n      background: none; border: none; color: var(--mat-sys-primary, #1976d2);\n      cursor: pointer; font-size: inherit; text-decoration: underline; padding: 0;\n    }\n    .ogrid-status-bar {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      width: 100%;\n      min-height: 33px;\n      padding: 6px 12px;\n      box-sizing: border-box;\n      font-size: 12px;\n      line-height: 20px;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n      border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-status-bar-item {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .ogrid-status-bar-item:not(:last-child)::after {\n      content: '';\n      width: 1px;\n      height: 14px;\n      margin-left: 12px;\n      background: var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-status-bar-label {\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n    }\n    .ogrid-status-bar-value {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      font-weight: 600;\n    }\n    .ogrid-datagrid-loading-overlay {\n      position: absolute; inset: 0; z-index: 2;\n      display: flex; align-items: center; justify-content: center;\n      background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));\n    }\n    .ogrid-datagrid-loading-inner {\n      display: flex; flex-direction: column; align-items: center; gap: 8px;\n      padding: 16px; background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-spinner {\n      width: 24px; height: 24px; border: 3px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      border-top-color: var(--mat-sys-primary, #1976d2);\n      border-radius: 50%; animation: ogrid-spin 0.8s linear infinite;\n    }\n    @keyframes ogrid-spin { to { transform: rotate(360deg); } }\n    .ogrid-datagrid-drop-indicator {\n      position: absolute; top: 0; bottom: 0; width: 3px;\n      background: var(--ogrid-selection-color, #217346);\n      pointer-events: none; z-index: 100; transition: left 0.05s;\n    }\n    .ogrid-datagrid-context-menu-overlay {\n      position: fixed; inset: 0; z-index: 1000;\n    }\n    .ogrid-column-letter-cell {\n      text-align: center;\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4));\n      padding: 2px 4px;\n      background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)));\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      user-select: none;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Reveal column menu trigger on header hover without layout shift.\n       The button always takes up space (visibility: hidden); shown when column is hovered. */\n    @media (hover: hover) {\n      th:hover .column-header-menu-trigger { visibility: visible; }\n    }\n\n    /* Angular Material Menu popup dark mode overrides.\n       Double-class selector (0,2,0) beats MUI's single-class (0,1,0) defaults. */\n    .mat-mdc-menu-panel.mat-mdc-menu-panel {\n      background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item:hover:not([disabled]) {\n      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item .mat-mdc-menu-item-text {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n  "], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, FormulaRefOverlayComponent, InlineCellEditorComponent, PopoverCellEditorComponent], styles: ["\n    :host { display: block; }\n    .ogrid-datagrid-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n    .ogrid-datagrid-wrapper {\n      position: relative; width: 100%; max-width: 100%;\n      overflow-x: hidden; overflow-y: auto; background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      will-change: scroll-position; outline: none;\n    }\n    .ogrid-datagrid-wrapper[data-virtual-scroll] { flex: 1; min-height: 0; }\n    .ogrid-datagrid-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }\n    .ogrid-datagrid-cell--active[data-drag-range] { outline: none; }\n    .ogrid-datagrid-wrapper--fit { width: fit-content; }\n    .ogrid-datagrid-wrapper--overflow-x { overflow-x: auto; }\n    .ogrid-datagrid-wrapper--loading-empty { min-height: 200px; }\n    .ogrid-datagrid-scroll-wrapper { display: flex; flex-direction: column; min-height: 100%; }\n    .ogrid-datagrid-table-wrapper--loading { position: relative; opacity: 0.6; }\n    .ogrid-datagrid-table {\n      width: 100%; min-width: max-content; border-collapse: collapse; table-layout: fixed;\n    }\n    .ogrid-datagrid-table tr th:first-child,\n    .ogrid-datagrid-table tr td:first-child { border-left: none; }\n    .ogrid-datagrid-table tbody tr { height: var(--ogrid-row-height, auto); }\n    .ogrid-datagrid-thead {\n      z-index: 8; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-datagrid-thead th { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-header-row { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-th {\n      font-weight: 600; padding: 6px 10px; text-align: left;\n      font-size: 14px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); z-index: 8;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-sticky-header .ogrid-datagrid-th { position: sticky; top: 0; }\n    .ogrid-datagrid-th:focus-visible {\n      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 11;\n    }\n    .ogrid-datagrid-th--pinned-left {\n      position: sticky; top: 0; left: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;\n      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-th--pinned-right {\n      position: sticky; top: 0; right: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;\n      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-group-header {\n      text-align: center; font-weight: 600; border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); padding: 6px;\n    }\n    .ogrid-datagrid-checkbox-col {\n      width: 48px; min-width: 48px;\n      max-width: 48px; text-align: center;\n    }\n    .ogrid-datagrid-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }\n    .ogrid-row-number-header, .ogrid-row-number-cell {\n      text-align: center;\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); font-weight: 600;\n      font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      position: sticky; left: 0; z-index: 3; user-select: none;\n    }\n    .ogrid-row-number-header { z-index: 4; }\n    .ogrid-row-number-header-content, .ogrid-row-number-cell-content {\n      display: flex; align-items: center; justify-content: center;\n    }\n    .ogrid-datagrid-row { }\n    .ogrid-datagrid-row:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-row--selected { background: var(--ogrid-selected-row-bg, #e6f0fb); }\n    .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.06)); }\n    .ogrid-datagrid-td--pinned-left {\n      position: sticky; left: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;\n      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-td--pinned-right {\n      position: sticky; right: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;\n      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-cell {\n      width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;\n      padding: var(--ogrid-cell-padding, 6px 10px); box-sizing: border-box; overflow: hidden;\n      text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none;\n      font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-cell:focus-visible {\n      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 3;\n    }\n    .ogrid-datagrid-cell--numeric { justify-content: flex-end; text-align: right; }\n    .ogrid-datagrid-cell--boolean { justify-content: flex-start; }\n    .ogrid-datagrid-cell--editable { cursor: cell; }\n    .ogrid-datagrid-cell--active {\n      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;\n      z-index: 2; position: relative; overflow: visible;\n    }\n    .ogrid-datagrid-td:has(> .ogrid-datagrid-cell--active),\n    .ogrid-datagrid-td:has(> .ogrid-editing-cell) { z-index: 2; }\n    .ogrid-datagrid-cell--active-in-range { outline: none; background: var(--ogrid-bg, #fff); }\n    .ogrid-datagrid-cell--in-range { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }\n    .ogrid-datagrid-cell--in-cut-range { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); opacity: 0.7; }\n    .ogrid-datagrid-cell--editing { padding: 0; }\n    .ogrid-editing-cell {\n      width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;\n      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;\n      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: hidden; padding: 0;\n    }\n    .ogrid-datagrid-editor-input {\n      width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection-color, #217346);\n      box-sizing: border-box; font-size: 14px; outline: none; font-family: inherit; line-height: inherit;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-cell--numeric .ogrid-datagrid-editor-input {\n      text-align: right;\n    }\n    .ogrid-datagrid-editor-select {\n      width: 100%; height: 100%; padding: 4px 8px; border: 2px solid var(--ogrid-selection-color, #217346);\n      box-sizing: border-box; font-size: 14px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-fill-handle {\n      position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;\n      background: var(--ogrid-selection-color, #217346);\n      border: 1px solid var(--ogrid-bg, #ffffff); border-radius: 1px;\n      cursor: crosshair; pointer-events: auto; touch-action: none; z-index: 3;\n    }\n    @media (pointer: coarse) {\n      .ogrid-datagrid-fill-handle { width: 14px; height: 14px; right: -7px; bottom: -7px; border-radius: 2px; }\n    }\n    .ogrid-datagrid-resize-handle {\n      position: absolute; top: 0; right: -3px; bottom: 0; width: 8px;\n      cursor: col-resize; user-select: none; touch-action: none;\n    }\n    @media (pointer: coarse) {\n      .ogrid-datagrid-resize-handle { width: 16px; right: -8px; }\n    }\n    .ogrid-datagrid-resize-handle::after {\n      content: ''; position: absolute; top: 4px; right: 3px; bottom: 4px; width: 2px;\n      background: var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 1px; transition: background 0.15s;\n    }\n    .ogrid-datagrid-resize-handle:hover::after { background: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4)); }\n    .ogrid-datagrid-resize-handle:active::after { background: var(--mat-sys-primary, #1976d2); }\n    .ogrid-datagrid-empty {\n      padding: 32px 16px; text-align: center; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-datagrid-empty__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }\n    .ogrid-datagrid-empty__message { font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-datagrid-empty__clear {\n      background: none; border: none; color: var(--mat-sys-primary, #1976d2);\n      cursor: pointer; font-size: inherit; text-decoration: underline; padding: 0;\n    }\n    .ogrid-status-bar {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      width: 100%;\n      min-height: 33px;\n      padding: 6px 12px;\n      box-sizing: border-box;\n      font-size: 12px;\n      line-height: 20px;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n      border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-status-bar-item {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .ogrid-status-bar-item:not(:last-child)::after {\n      content: '';\n      width: 1px;\n      height: 14px;\n      margin-left: 12px;\n      background: var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-status-bar-label {\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n    }\n    .ogrid-status-bar-value {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      font-weight: 600;\n    }\n    .ogrid-datagrid-loading-overlay {\n      position: absolute; inset: 0; z-index: 2;\n      display: flex; align-items: center; justify-content: center;\n      background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));\n    }\n    .ogrid-datagrid-loading-inner {\n      display: flex; flex-direction: column; align-items: center; gap: 8px;\n      padding: 16px; background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-spinner {\n      width: 24px; height: 24px; border: 3px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      border-top-color: var(--mat-sys-primary, #1976d2);\n      border-radius: 50%; animation: ogrid-spin 0.8s linear infinite;\n    }\n    @keyframes ogrid-spin { to { transform: rotate(360deg); } }\n    .ogrid-datagrid-drop-indicator {\n      position: absolute; top: 0; bottom: 0; width: 3px;\n      background: var(--ogrid-selection-color, #217346);\n      pointer-events: none; z-index: 100; transition: left 0.05s;\n    }\n    .ogrid-datagrid-context-menu-overlay {\n      position: fixed; inset: 0; z-index: 1000;\n    }\n    .ogrid-column-letter-cell {\n      text-align: center;\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4));\n      padding: 2px 4px;\n      background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)));\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      user-select: none;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Reveal column menu trigger on header hover without layout shift.\n       The button always takes up space (visibility: hidden); shown when column is hovered. */\n    @media (hover: hover) {\n      th:hover .column-header-menu-trigger { visibility: visible; }\n    }\n\n    /* Angular Material Menu popup dark mode overrides.\n       Double-class selector (0,2,0) beats MUI's single-class (0,1,0) defaults. */\n    .mat-mdc-menu-panel.mat-mdc-menu-panel {\n      background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item:hover:not([disabled]) {\n      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item .mat-mdc-menu-item-text {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n  "], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataGridTableComponent, [{
         type: Component,
@@ -592,6 +599,9 @@ export class DataGridTableComponent extends BaseDataGridTableComponent {
                           [style.width.px]="getRowNumberWidth()"
                           [style.min-width.px]="getRowNumberWidth()"
                           [style.max-width.px]="getRowNumberWidth()"
+                          (pointerdown)="onNonDataSurfacePointerDown($event)"
+                          (mousedown)="onNonDataSurfacePointerDown($event)"
+                          (selectstart)="onNonDataSurfaceSelectStart($event)"
                         >
                           <div class="ogrid-row-number-header-content">#</div>
                           <div class="ogrid-datagrid-resize-handle" role="separator" aria-label="Resize row numbers" (pointerdown)="onResizeRowNumber($event)" (dblclick)="$event.stopPropagation()"></div>
@@ -622,8 +632,8 @@ export class DataGridTableComponent extends BaseDataGridTableComponent {
                             [attr.data-column-id]="col.columnId"
                             [attr.aria-sort]="ariaSort"
                             [style.minWidth.px]="getEffectiveMinWidth(col)"
-                            [style.width.px]="colW"
-                            [style.maxWidth.px]="colW"
+                            [style.width]="col.width ?? (colW + 'px')"
+                            [style.maxWidth]="col.width ? null : (colW + 'px')"
                             [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
                             [style.left.px]="pinnedLeft ? getPinnedLeftOffset(col.columnId) : null"
                             [style.right.px]="pinnedRight ? getPinnedRightOffset(col.columnId) : null"
@@ -703,9 +713,13 @@ export class DataGridTableComponent extends BaseDataGridTableComponent {
                         }
                         @if (hasRowNumbersCol()) {
                           <td class="ogrid-datagrid-td ogrid-row-number-cell"
+                            style="user-select: none; -webkit-user-select: none;"
                             [style.width.px]="getRowNumberWidth()"
                             [style.min-width.px]="getRowNumberWidth()"
                             [style.max-width.px]="getRowNumberWidth()"
+                            (pointerdown)="onNonDataSurfacePointerDown($event)"
+                            (mousedown)="onNonDataSurfacePointerDown($event)"
+                            (selectstart)="onNonDataSurfaceSelectStart($event)"
                           >
                             <div class="ogrid-row-number-cell-content">
                               {{ rowNumberOffset() + rowIndex + 1 }}
@@ -718,14 +732,18 @@ export class DataGridTableComponent extends BaseDataGridTableComponent {
                         @for (colLayout of vsColumnLayouts(); track colLayout.col.columnId) {
                           <td
                             class="ogrid-datagrid-td"
+                            style="user-select: none; -webkit-user-select: none;"
                             [attr.data-column-id]="colLayout.col.columnId"
                             [class.ogrid-datagrid-td--pinned-left]="colLayout.pinnedLeft"
                             [class.ogrid-datagrid-td--pinned-right]="colLayout.pinnedRight"
                             [style.minWidth.px]="colLayout.minWidth"
-                            [style.width.px]="colLayout.width"
-                            [style.maxWidth.px]="colLayout.width"
+                            [style.width]="colLayout.cssWidth ?? (colLayout.width + 'px')"
+                            [style.maxWidth]="colLayout.cssWidth ? null : (colLayout.width + 'px')"
                             [style.left.px]="colLayout.pinnedLeft ? getPinnedLeftOffset(colLayout.col.columnId) : null"
                             [style.right.px]="colLayout.pinnedRight ? getPinnedRightOffset(colLayout.col.columnId) : null"
+                            (pointerdown)="onNonDataSurfacePointerDown($event)"
+                            (mousedown)="onNonDataSurfacePointerDown($event)"
+                            (selectstart)="onNonDataSurfaceSelectStart($event)"
                           >
                             @let descriptor = getCellDescriptor(item, colLayout.col, rowIndex, getGlobalColIndex(colLayout.col));
                             @if (descriptor.mode === 'editing-inline') {
@@ -889,7 +907,7 @@ export class DataGridTableComponent extends BaseDataGridTableComponent {
         </div>
       }
     </div>
-  `, styles: ["\n    :host { display: block; }\n    .ogrid-datagrid-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n    .ogrid-datagrid-wrapper {\n      position: relative; width: 100%; max-width: 100%;\n      overflow-x: hidden; overflow-y: auto; background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      will-change: scroll-position; outline: none;\n    }\n    .ogrid-datagrid-wrapper[data-virtual-scroll] { flex: 1; min-height: 0; }\n    .ogrid-datagrid-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }\n    .ogrid-datagrid-cell--active[data-drag-range] { outline: none; }\n    .ogrid-datagrid-wrapper--fit { width: fit-content; }\n    .ogrid-datagrid-wrapper--overflow-x { overflow-x: auto; }\n    .ogrid-datagrid-wrapper--loading-empty { min-height: 200px; }\n    .ogrid-datagrid-scroll-wrapper { display: flex; flex-direction: column; min-height: 100%; }\n    .ogrid-datagrid-table-wrapper--loading { position: relative; opacity: 0.6; }\n    .ogrid-datagrid-table {\n      width: 100%; min-width: max-content; border-collapse: collapse; table-layout: fixed;\n    }\n    .ogrid-datagrid-table tr th:first-child,\n    .ogrid-datagrid-table tr td:first-child { border-left: none; }\n    .ogrid-datagrid-table tbody tr { height: var(--ogrid-row-height, auto); }\n    .ogrid-datagrid-thead {\n      z-index: 8; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-datagrid-thead th { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-header-row { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-th {\n      font-weight: 600; padding: 6px 10px; text-align: left;\n      font-size: 14px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); z-index: 8;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-sticky-header .ogrid-datagrid-th { position: sticky; top: 0; }\n    .ogrid-datagrid-th:focus-visible {\n      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 11;\n    }\n    .ogrid-datagrid-th--pinned-left {\n      position: sticky; top: 0; left: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;\n      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-th--pinned-right {\n      position: sticky; top: 0; right: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;\n      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-group-header {\n      text-align: center; font-weight: 600; border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); padding: 6px;\n    }\n    .ogrid-datagrid-checkbox-col {\n      width: 48px; min-width: 48px;\n      max-width: 48px; text-align: center;\n    }\n    .ogrid-datagrid-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }\n    .ogrid-row-number-header, .ogrid-row-number-cell {\n      text-align: center;\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); font-weight: 600;\n      font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      position: sticky; left: 0; z-index: 3;\n    }\n    .ogrid-row-number-header { z-index: 4; }\n    .ogrid-row-number-header-content, .ogrid-row-number-cell-content {\n      display: flex; align-items: center; justify-content: center;\n    }\n    .ogrid-datagrid-row { }\n    .ogrid-datagrid-row:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-row--selected { background: var(--ogrid-selected-row-bg, #e6f0fb); }\n    .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.06)); }\n    .ogrid-datagrid-td--pinned-left {\n      position: sticky; left: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;\n      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-td--pinned-right {\n      position: sticky; right: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;\n      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-cell {\n      width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;\n      padding: var(--ogrid-cell-padding, 6px 10px); box-sizing: border-box; overflow: hidden;\n      text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none;\n      font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-cell:focus-visible {\n      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 3;\n    }\n    .ogrid-datagrid-cell--numeric { justify-content: flex-end; text-align: right; }\n    .ogrid-datagrid-cell--boolean { justify-content: flex-start; }\n    .ogrid-datagrid-cell--editable { cursor: cell; }\n    .ogrid-datagrid-cell--active {\n      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;\n      z-index: 2; position: relative; overflow: visible;\n    }\n    .ogrid-datagrid-td:has(> .ogrid-datagrid-cell--active),\n    .ogrid-datagrid-td:has(> .ogrid-editing-cell) { z-index: 2; }\n    .ogrid-datagrid-cell--active-in-range { outline: none; background: var(--ogrid-bg, #fff); }\n    .ogrid-datagrid-cell--in-range { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }\n    .ogrid-datagrid-cell--in-cut-range { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); opacity: 0.7; }\n    .ogrid-datagrid-cell--editing { padding: 0; }\n    .ogrid-editing-cell {\n      width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;\n      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;\n      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: hidden; padding: 0;\n    }\n    .ogrid-datagrid-editor-input {\n      width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection-color, #217346);\n      box-sizing: border-box; font-size: 14px; outline: none; font-family: inherit; line-height: inherit;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-cell--numeric .ogrid-datagrid-editor-input {\n      text-align: right;\n    }\n    .ogrid-datagrid-editor-select {\n      width: 100%; height: 100%; padding: 4px 8px; border: 2px solid var(--ogrid-selection-color, #217346);\n      box-sizing: border-box; font-size: 14px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-fill-handle {\n      position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;\n      background: var(--ogrid-selection-color, #217346);\n      border: 1px solid var(--ogrid-bg, #ffffff); border-radius: 1px;\n      cursor: crosshair; pointer-events: auto; touch-action: none; z-index: 3;\n    }\n    @media (pointer: coarse) {\n      .ogrid-datagrid-fill-handle { width: 14px; height: 14px; right: -7px; bottom: -7px; border-radius: 2px; }\n    }\n    .ogrid-datagrid-resize-handle {\n      position: absolute; top: 0; right: -3px; bottom: 0; width: 8px;\n      cursor: col-resize; user-select: none; touch-action: none;\n    }\n    @media (pointer: coarse) {\n      .ogrid-datagrid-resize-handle { width: 16px; right: -8px; }\n    }\n    .ogrid-datagrid-resize-handle::after {\n      content: ''; position: absolute; top: 4px; right: 3px; bottom: 4px; width: 2px;\n      background: var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 1px; transition: background 0.15s;\n    }\n    .ogrid-datagrid-resize-handle:hover::after { background: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4)); }\n    .ogrid-datagrid-resize-handle:active::after { background: var(--mat-sys-primary, #1976d2); }\n    .ogrid-datagrid-empty {\n      padding: 32px 16px; text-align: center; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-datagrid-empty__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }\n    .ogrid-datagrid-empty__message { font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-datagrid-empty__clear {\n      background: none; border: none; color: var(--mat-sys-primary, #1976d2);\n      cursor: pointer; font-size: inherit; text-decoration: underline; padding: 0;\n    }\n    .ogrid-status-bar {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      width: 100%;\n      min-height: 33px;\n      padding: 6px 12px;\n      box-sizing: border-box;\n      font-size: 12px;\n      line-height: 20px;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n      border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-status-bar-item {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .ogrid-status-bar-item:not(:last-child)::after {\n      content: '';\n      width: 1px;\n      height: 14px;\n      margin-left: 12px;\n      background: var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-status-bar-label {\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n    }\n    .ogrid-status-bar-value {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      font-weight: 600;\n    }\n    .ogrid-datagrid-loading-overlay {\n      position: absolute; inset: 0; z-index: 2;\n      display: flex; align-items: center; justify-content: center;\n      background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));\n    }\n    .ogrid-datagrid-loading-inner {\n      display: flex; flex-direction: column; align-items: center; gap: 8px;\n      padding: 16px; background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-spinner {\n      width: 24px; height: 24px; border: 3px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      border-top-color: var(--mat-sys-primary, #1976d2);\n      border-radius: 50%; animation: ogrid-spin 0.8s linear infinite;\n    }\n    @keyframes ogrid-spin { to { transform: rotate(360deg); } }\n    .ogrid-datagrid-drop-indicator {\n      position: absolute; top: 0; bottom: 0; width: 3px;\n      background: var(--ogrid-selection-color, #217346);\n      pointer-events: none; z-index: 100; transition: left 0.05s;\n    }\n    .ogrid-datagrid-context-menu-overlay {\n      position: fixed; inset: 0; z-index: 1000;\n    }\n    .ogrid-column-letter-cell {\n      text-align: center;\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4));\n      padding: 2px 4px;\n      background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)));\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      user-select: none;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Reveal column menu trigger on header hover without layout shift.\n       The button always takes up space (visibility: hidden); shown when column is hovered. */\n    @media (hover: hover) {\n      th:hover .column-header-menu-trigger { visibility: visible; }\n    }\n\n    /* Angular Material Menu popup dark mode overrides.\n       Double-class selector (0,2,0) beats MUI's single-class (0,1,0) defaults. */\n    .mat-mdc-menu-panel.mat-mdc-menu-panel {\n      background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item:hover:not([disabled]) {\n      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item .mat-mdc-menu-item-text {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n  "] }]
+  `, styles: ["\n    :host { display: block; }\n    .ogrid-datagrid-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n    .ogrid-datagrid-wrapper {\n      position: relative; width: 100%; max-width: 100%;\n      overflow-x: hidden; overflow-y: auto; background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      will-change: scroll-position; outline: none;\n    }\n    .ogrid-datagrid-wrapper[data-virtual-scroll] { flex: 1; min-height: 0; }\n    .ogrid-datagrid-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }\n    .ogrid-datagrid-cell--active[data-drag-range] { outline: none; }\n    .ogrid-datagrid-wrapper--fit { width: fit-content; }\n    .ogrid-datagrid-wrapper--overflow-x { overflow-x: auto; }\n    .ogrid-datagrid-wrapper--loading-empty { min-height: 200px; }\n    .ogrid-datagrid-scroll-wrapper { display: flex; flex-direction: column; min-height: 100%; }\n    .ogrid-datagrid-table-wrapper--loading { position: relative; opacity: 0.6; }\n    .ogrid-datagrid-table {\n      width: 100%; min-width: max-content; border-collapse: collapse; table-layout: fixed;\n    }\n    .ogrid-datagrid-table tr th:first-child,\n    .ogrid-datagrid-table tr td:first-child { border-left: none; }\n    .ogrid-datagrid-table tbody tr { height: var(--ogrid-row-height, auto); }\n    .ogrid-datagrid-thead {\n      z-index: 8; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-datagrid-thead th { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-header-row { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-th {\n      font-weight: 600; padding: 6px 10px; text-align: left;\n      font-size: 14px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); z-index: 8;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-sticky-header .ogrid-datagrid-th { position: sticky; top: 0; }\n    .ogrid-datagrid-th:focus-visible {\n      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 11;\n    }\n    .ogrid-datagrid-th--pinned-left {\n      position: sticky; top: 0; left: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;\n      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-th--pinned-right {\n      position: sticky; top: 0; right: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;\n      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-group-header {\n      text-align: center; font-weight: 600; border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); padding: 6px;\n    }\n    .ogrid-datagrid-checkbox-col {\n      width: 48px; min-width: 48px;\n      max-width: 48px; text-align: center;\n    }\n    .ogrid-datagrid-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }\n    .ogrid-row-number-header, .ogrid-row-number-cell {\n      text-align: center;\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); font-weight: 600;\n      font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      position: sticky; left: 0; z-index: 3; user-select: none;\n    }\n    .ogrid-row-number-header { z-index: 4; }\n    .ogrid-row-number-header-content, .ogrid-row-number-cell-content {\n      display: flex; align-items: center; justify-content: center;\n    }\n    .ogrid-datagrid-row { }\n    .ogrid-datagrid-row:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-datagrid-row--selected { background: var(--ogrid-selected-row-bg, #e6f0fb); }\n    .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.06)); }\n    .ogrid-datagrid-td--pinned-left {\n      position: sticky; left: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;\n      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-td--pinned-right {\n      position: sticky; right: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;\n      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n    }\n    .ogrid-datagrid-cell {\n      width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;\n      padding: var(--ogrid-cell-padding, 6px 10px); box-sizing: border-box; overflow: hidden;\n      text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none;\n      font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-cell:focus-visible {\n      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 3;\n    }\n    .ogrid-datagrid-cell--numeric { justify-content: flex-end; text-align: right; }\n    .ogrid-datagrid-cell--boolean { justify-content: flex-start; }\n    .ogrid-datagrid-cell--editable { cursor: cell; }\n    .ogrid-datagrid-cell--active {\n      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;\n      z-index: 2; position: relative; overflow: visible;\n    }\n    .ogrid-datagrid-td:has(> .ogrid-datagrid-cell--active),\n    .ogrid-datagrid-td:has(> .ogrid-editing-cell) { z-index: 2; }\n    .ogrid-datagrid-cell--active-in-range { outline: none; background: var(--ogrid-bg, #fff); }\n    .ogrid-datagrid-cell--in-range { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }\n    .ogrid-datagrid-cell--in-cut-range { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); opacity: 0.7; }\n    .ogrid-datagrid-cell--editing { padding: 0; }\n    .ogrid-editing-cell {\n      width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;\n      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;\n      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: hidden; padding: 0;\n    }\n    .ogrid-datagrid-editor-input {\n      width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection-color, #217346);\n      box-sizing: border-box; font-size: 14px; outline: none; font-family: inherit; line-height: inherit;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-cell--numeric .ogrid-datagrid-editor-input {\n      text-align: right;\n    }\n    .ogrid-datagrid-editor-select {\n      width: 100%; height: 100%; padding: 4px 8px; border: 2px solid var(--ogrid-selection-color, #217346);\n      box-sizing: border-box; font-size: 14px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-fill-handle {\n      position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;\n      background: var(--ogrid-selection-color, #217346);\n      border: 1px solid var(--ogrid-bg, #ffffff); border-radius: 1px;\n      cursor: crosshair; pointer-events: auto; touch-action: none; z-index: 3;\n    }\n    @media (pointer: coarse) {\n      .ogrid-datagrid-fill-handle { width: 14px; height: 14px; right: -7px; bottom: -7px; border-radius: 2px; }\n    }\n    .ogrid-datagrid-resize-handle {\n      position: absolute; top: 0; right: -3px; bottom: 0; width: 8px;\n      cursor: col-resize; user-select: none; touch-action: none;\n    }\n    @media (pointer: coarse) {\n      .ogrid-datagrid-resize-handle { width: 16px; right: -8px; }\n    }\n    .ogrid-datagrid-resize-handle::after {\n      content: ''; position: absolute; top: 4px; right: 3px; bottom: 4px; width: 2px;\n      background: var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 1px; transition: background 0.15s;\n    }\n    .ogrid-datagrid-resize-handle:hover::after { background: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4)); }\n    .ogrid-datagrid-resize-handle:active::after { background: var(--mat-sys-primary, #1976d2); }\n    .ogrid-datagrid-empty {\n      padding: 32px 16px; text-align: center; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-datagrid-empty__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }\n    .ogrid-datagrid-empty__message { font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-datagrid-empty__clear {\n      background: none; border: none; color: var(--mat-sys-primary, #1976d2);\n      cursor: pointer; font-size: inherit; text-decoration: underline; padding: 0;\n    }\n    .ogrid-status-bar {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      width: 100%;\n      min-height: 33px;\n      padding: 6px 12px;\n      box-sizing: border-box;\n      font-size: 12px;\n      line-height: 20px;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n      border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-status-bar-item {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .ogrid-status-bar-item:not(:last-child)::after {\n      content: '';\n      width: 1px;\n      height: 14px;\n      margin-left: 12px;\n      background: var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-status-bar-label {\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n    }\n    .ogrid-status-bar-value {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      font-weight: 600;\n    }\n    .ogrid-datagrid-loading-overlay {\n      position: absolute; inset: 0; z-index: 2;\n      display: flex; align-items: center; justify-content: center;\n      background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));\n    }\n    .ogrid-datagrid-loading-inner {\n      display: flex; flex-direction: column; align-items: center; gap: 8px;\n      padding: 16px; background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-datagrid-spinner {\n      width: 24px; height: 24px; border: 3px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      border-top-color: var(--mat-sys-primary, #1976d2);\n      border-radius: 50%; animation: ogrid-spin 0.8s linear infinite;\n    }\n    @keyframes ogrid-spin { to { transform: rotate(360deg); } }\n    .ogrid-datagrid-drop-indicator {\n      position: absolute; top: 0; bottom: 0; width: 3px;\n      background: var(--ogrid-selection-color, #217346);\n      pointer-events: none; z-index: 100; transition: left 0.05s;\n    }\n    .ogrid-datagrid-context-menu-overlay {\n      position: fixed; inset: 0; z-index: 1000;\n    }\n    .ogrid-column-letter-cell {\n      text-align: center;\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4));\n      padding: 2px 4px;\n      background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)));\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      user-select: none;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Reveal column menu trigger on header hover without layout shift.\n       The button always takes up space (visibility: hidden); shown when column is hovered. */\n    @media (hover: hover) {\n      th:hover .column-header-menu-trigger { visibility: visible; }\n    }\n\n    /* Angular Material Menu popup dark mode overrides.\n       Double-class selector (0,2,0) beats MUI's single-class (0,1,0) defaults. */\n    .mat-mdc-menu-panel.mat-mdc-menu-panel {\n      background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item:hover:not([disabled]) {\n      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));\n    }\n    .mat-mdc-menu-item.mat-mdc-menu-item .mat-mdc-menu-item-text {\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n  "] }]
     }], () => [], { propsInput: [{
             type: Input,
             args: [{ required: true, alias: 'props' }]
@@ -900,4 +918,4 @@ export class DataGridTableComponent extends BaseDataGridTableComponent {
             type: ViewChild,
             args: ['tableContainerElRef']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataGridTableComponent, { className: "DataGridTableComponent", filePath: "datagrid-table/datagrid-table.component.ts", lineNumber: 645 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataGridTableComponent, { className: "DataGridTableComponent", filePath: "datagrid-table/datagrid-table.component.ts", lineNumber: 656 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "OGrid Angular Material – MatTable-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.6.1"
+    "@alaarab/ogrid-angular": "2.7.0"
   },
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",