@alaarab/ogrid-angular-material 2.5.5 → 2.5.7

package/dist/esm/index.js

@@ -198,7 +198,7 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
       opacity: 0.6; transition: opacity 0.15s;
     }
     .ogrid-header-filter:hover .ogrid-header-filter__filter-btn { opacity: 0.8; }
-    /* :hover and --active must override the parent-hover rule (0,2,0) \u2014 double-class raises to 0,3,0 */
+    /* :hover and --active must override the parent-hover rule (0,2,0)  -  double-class raises to 0,3,0 */
     .ogrid-header-filter .ogrid-header-filter__filter-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); opacity: 1; }
     .ogrid-header-filter .ogrid-header-filter__filter-btn--active { opacity: 1; }
     .ogrid-header-filter__funnel {
@@ -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/dist/types/datagrid-table/datagrid-table.component.d.ts

@@ -3,7 +3,7 @@ import { BaseDataGridTableComponent } from '@alaarab/ogrid-angular';
 import type { IOGridDataGridProps } from '@alaarab/ogrid-angular';
 /**
  * DataGridTable component using native HTML table with Material Design-inspired styling.
- * Standalone component — this is the workhorse of the grid.
+ * Standalone component  -  this is the workhorse of the grid.
  */
 export declare class DataGridTableComponent<T> extends BaseDataGridTableComponent<T> {
     private readonly propsSignal;

package/dist/types/ogrid/ogrid.component.d.ts

@@ -1,7 +1,7 @@
 import { BaseOGridComponent } from '@alaarab/ogrid-angular';
 /**
  * Top-level OGrid component for Angular Material.
- * Standalone component — provides OGridService and renders OGridLayout with all sub-components.
+ * Standalone component  -  provides OGridService and renders OGridLayout with all sub-components.
  *
  * Uses @Input with signal setter for JIT compatibility (project builds with tsc, not ngc).
  * The effect() reactively configures the service when the input signal changes.

package/dist/types/pagination-controls/pagination-controls.component.d.ts

@@ -1,7 +1,7 @@
 import { BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
 /**
  * Pagination controls component using Angular Material styling.
- * Standalone component with inline template — no Angular Material dependency for pagination.
+ * Standalone component with inline template  -  no Angular Material dependency for pagination.
  */
 export declare class PaginationControlsComponent extends BasePaginationControlsComponent {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.5.5",
+  "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",