@alaarab/ogrid-angular-material 2.5.6 → 2.5.8

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));
@@ -362,6 +368,7 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
         (contextmenu)="$event.preventDefault()"
         [class.ogrid-datagrid-wrapper--overflow-x]="allowOverflowX()"
         [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
+        [attr.data-virtual-scroll]="vsEnabled() ? '' : null"
         data-ogrid-scroll-container
       >
         <div class="ogrid-datagrid-scroll-wrapper">
@@ -592,7 +599,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 }}
                                 }
@@ -709,12 +716,14 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
     :host { display: block; }
     .ogrid-datagrid-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
     .ogrid-datagrid-wrapper {
-      position: relative; flex: 1; min-height: 0; width: 100%; max-width: 100%;
+      position: relative; width: 100%; max-width: 100%;
       overflow-x: hidden; overflow-y: auto; background: var(--ogrid-bg, #ffffff);
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
       will-change: scroll-position; outline: none;
     }
+    .ogrid-datagrid-wrapper[data-virtual-scroll] { flex: 1; min-height: 0; }
     .ogrid-datagrid-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }
+    .ogrid-datagrid-cell--active[data-drag-range] { outline: none; }
     .ogrid-datagrid-wrapper--fit { width: fit-content; }
     .ogrid-datagrid-wrapper--overflow-x { overflow-x: auto; }
     .ogrid-datagrid-wrapper--loading-empty { min-height: 200px; }
@@ -723,6 +732,8 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
     .ogrid-datagrid-table {
       width: 100%; min-width: max-content; border-collapse: collapse; table-layout: fixed;
     }
+    .ogrid-datagrid-table tr th:first-child,
+    .ogrid-datagrid-table tr td:first-child { border-left: none; }
     .ogrid-datagrid-table tbody tr { height: var(--ogrid-row-height, auto); }
     .ogrid-datagrid-thead {
       z-index: 8; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
@@ -791,7 +802,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;
@@ -806,7 +817,7 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
     .ogrid-editing-cell {
       width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;
       outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
-      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: visible; padding: 0;
+      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: hidden; padding: 0;
     }
     .ogrid-datagrid-editor-input {
       width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection-color, #217346);
@@ -889,6 +900,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.8",
   "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",