@alaarab/ogrid-angular-material 2.5.6 → 2.5.7

package/dist/esm/index.js

@@ -331,6 +331,12 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
       color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));
     }
 
+    /* Always reserve space; hide on hover-capable devices until column is hovered.
+       The th:hover rule lives in the parent (ViewEncapsulation.None) styles. */
+    @media (hover: hover) {
+      .column-header-menu-trigger { visibility: hidden; }
+    }
+
     .column-header-menu-trigger:hover {
       background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
@@ -592,7 +598,7 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
                                 [style]="cellStyle ?? undefined"
                               >
                                 @if (colLayout.col.type === 'boolean') {
-                                  <input type="checkbox" [checked]="!!descriptor.displayValue" [disabled]="!descriptor.canEditAny" (change)="descriptor.canEditAny ? commitEdit(item, colLayout.col.columnId, !!descriptor.displayValue, !descriptor.displayValue, rowIndex, descriptor.globalColIndex) : null" (click)="$event.stopPropagation()" style="margin:0;outline:none" [style.cursor]="descriptor.canEditAny ? 'pointer' : 'default'" [attr.aria-label]="descriptor.displayValue ? 'Checked' : 'Unchecked'" />
+                                  <input type="checkbox" [checked]="!!descriptor.displayValue" [disabled]="!descriptor.canEditAny" (change)="descriptor.canEditAny ? commitBooleanEdit(item, colLayout.col.columnId, !!descriptor.displayValue, rowIndex, descriptor.globalColIndex) : null" (pointerdown)="onBooleanCheckboxPointerDown($event, rowIndex, descriptor.globalColIndex)" (click)="$event.stopPropagation()" style="margin:0;outline:none" [style.cursor]="descriptor.canEditAny ? 'pointer' : 'default'" [attr.aria-label]="descriptor.displayValue ? 'Checked' : 'Unchecked'" />
                                 } @else {
                                   {{ content }}
                                 }
@@ -791,7 +797,7 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
       outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 3;
     }
     .ogrid-datagrid-cell--numeric { justify-content: flex-end; text-align: right; }
-    .ogrid-datagrid-cell--boolean { justify-content: center; text-align: center; }
+    .ogrid-datagrid-cell--boolean { justify-content: flex-start; }
     .ogrid-datagrid-cell--editable { cursor: cell; }
     .ogrid-datagrid-cell--active {
       outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
@@ -889,6 +895,12 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
       font-variant-numeric: tabular-nums;
     }
 
+    /* Reveal column menu trigger on header hover without layout shift.
+       The button always takes up space (visibility: hidden); shown when column is hovered. */
+    @media (hover: hover) {
+      th:hover .column-header-menu-trigger { visibility: visible; }
+    }
+
     /* Angular Material Menu popup dark mode overrides.
        Double-class selector (0,2,0) beats MUI's single-class (0,1,0) defaults. */
     .mat-mdc-menu-panel.mat-mdc-menu-panel {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.5.6",
+  "version": "2.5.7",
   "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.5.5"
+    "@alaarab/ogrid-angular": "2.5.7"
   },
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",