@alaarab/ogrid-angular-material 2.1.1 → 2.1.2

package/dist/esm/column-header-menu/column-header-menu.component.js

@@ -4,32 +4,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, ChangeDetectionStrategy, ViewChild, computed, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, computed, Input, signal } from '@angular/core';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { MatDividerModule } from '@angular/material/divider';
 import { getColumnHeaderMenuItems } from '@alaarab/ogrid-angular';
 /**
  * Column header dropdown menu for pin/unpin, sort, and autosize actions.
  * Uses Angular Material MatMenu.
+ *
+ * Uses signal-backed @Input setters so that computed() tracks changes
+ * (plain @Input properties are not reactive in Angular signals).
  */
 let ColumnHeaderMenuComponent = class ColumnHeaderMenuComponent {
     constructor() {
-        this.canPinLeft = true;
-        this.canPinRight = true;
-        this.canUnpin = false;
-        this.currentSort = null;
-        this.isSortable = true;
-        this.isResizable = true;
+        // Signal-backed inputs so computed() tracks changes reactively
+        this._canPinLeft = signal(true);
+        this._canPinRight = signal(true);
+        this._canUnpin = signal(false);
+        this._currentSort = signal(null);
+        this._isSortable = signal(true);
+        this._isResizable = signal(true);
         this.handlers = {};
         this.menuItems = computed(() => getColumnHeaderMenuItems({
-            canPinLeft: this.canPinLeft,
-            canPinRight: this.canPinRight,
-            canUnpin: this.canUnpin,
-            currentSort: this.currentSort,
-            isSortable: this.isSortable,
-            isResizable: this.isResizable,
+            canPinLeft: this._canPinLeft(),
+            canPinRight: this._canPinRight(),
+            canUnpin: this._canUnpin(),
+            currentSort: this._currentSort(),
+            isSortable: this._isSortable(),
+            isResizable: this._isResizable(),
         }));
     }
+    set canPinLeft(v) { this._canPinLeft.set(v); }
+    set canPinRight(v) { this._canPinRight.set(v); }
+    set canUnpin(v) { this._canUnpin.set(v); }
+    set currentSort(v) { this._currentSort.set(v); }
+    set isSortable(v) { this._isSortable.set(v); }
+    set isResizable(v) { this._isResizable.set(v); }
     handleMenuItemClick(itemId) {
         const h = this.handlers;
         const actionMap = {
@@ -54,22 +64,22 @@ __decorate([
 ], ColumnHeaderMenuComponent.prototype, "columnId", void 0);
 __decorate([
     Input()
-], ColumnHeaderMenuComponent.prototype, "canPinLeft", void 0);
+], ColumnHeaderMenuComponent.prototype, "canPinLeft", null);
 __decorate([
     Input()
-], ColumnHeaderMenuComponent.prototype, "canPinRight", void 0);
+], ColumnHeaderMenuComponent.prototype, "canPinRight", null);
 __decorate([
     Input()
-], ColumnHeaderMenuComponent.prototype, "canUnpin", void 0);
+], ColumnHeaderMenuComponent.prototype, "canUnpin", null);
 __decorate([
     Input()
-], ColumnHeaderMenuComponent.prototype, "currentSort", void 0);
+], ColumnHeaderMenuComponent.prototype, "currentSort", null);
 __decorate([
     Input()
-], ColumnHeaderMenuComponent.prototype, "isSortable", void 0);
+], ColumnHeaderMenuComponent.prototype, "isSortable", null);
 __decorate([
     Input()
-], ColumnHeaderMenuComponent.prototype, "isResizable", void 0);
+], ColumnHeaderMenuComponent.prototype, "isResizable", null);
 __decorate([
     Input()
 ], ColumnHeaderMenuComponent.prototype, "handlers", void 0);

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

@@ -40,7 +40,7 @@ __decorate([
     ViewChild('wrapperEl')
 ], DataGridTableComponent.prototype, "wrapperRef", void 0);
 __decorate([
-    ViewChild('tableContainerEl')
+    ViewChild('tableContainerElRef')
 ], DataGridTableComponent.prototype, "tableContainerRef", void 0);
 DataGridTableComponent = __decorate([
     Component({
@@ -71,10 +71,10 @@ DataGridTableComponent = __decorate([
       >
         <div class="ogrid-datagrid-scroll-wrapper">
           <div [style.minWidth.px]="allowOverflowX() ? minTableWidth() : undefined">
-            <div [class.ogrid-datagrid-table-wrapper--loading]="isLoading() && items().length > 0" #tableContainerEl>
+            <div [class.ogrid-datagrid-table-wrapper--loading]="isLoading() && items().length > 0" #tableContainerElRef>
               <table class="ogrid-datagrid-table" [style.minWidth.px]="minTableWidth()"
               >
-                <thead class="ogrid-datagrid-thead">
+                <thead [class]="stickyHeader() ? 'ogrid-datagrid-thead ogrid-sticky-header' : 'ogrid-datagrid-thead'">
                   @for (row of headerRows(); track $index; let rowIdx = $index) {
                     <tr class="ogrid-datagrid-header-row">
                       @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
@@ -391,21 +391,24 @@ DataGridTableComponent = __decorate([
     .ogrid-datagrid-thead th { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-datagrid-header-row { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-datagrid-th {
-      font-weight: 600; position: sticky; top: 0; padding: 6px 10px; text-align: left;
+      font-weight: 600; padding: 6px 10px; text-align: left;
       font-size: 14px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); z-index: 8;
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
+    .ogrid-sticky-header .ogrid-datagrid-th { position: sticky; top: 0; }
     .ogrid-datagrid-th:focus-visible {
       outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 11;
     }
     .ogrid-datagrid-th--pinned-left {
       position: sticky; top: 0; left: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;
-      border-right: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
     }
     .ogrid-datagrid-th--pinned-right {
       position: sticky; top: 0; right: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;
-      border-left: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
     }
     .ogrid-datagrid-group-header {
       text-align: center; font-weight: 600; border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); padding: 6px;
@@ -432,11 +435,13 @@ DataGridTableComponent = __decorate([
     .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.06)); }
     .ogrid-datagrid-td--pinned-left {
       position: sticky; left: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;
-      border-right: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
     }
     .ogrid-datagrid-td--pinned-right {
       position: sticky; right: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;
-      border-left: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
     }
     .ogrid-datagrid-cell {
       width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;

package/dist/esm/ogrid/ogrid.component.js

@@ -38,6 +38,7 @@ OGridComponent = __decorate([
       [hasToolbar]="showToolbar"
       [hasToolbarBelow]="false"
       [hasPagination]="true"
+      [fullScreen]="ogridService.fullScreen()"
     >
       <ng-container toolbarEnd>
         @if (ogridService.columnChooserPlacement() === 'toolbar') {

package/dist/types/column-header-menu/column-header-menu.component.d.ts

@@ -3,15 +3,24 @@ import { type IColumnHeaderMenuItem, type ColumnHeaderMenuHandlers } from '@alaa
 /**
  * Column header dropdown menu for pin/unpin, sort, and autosize actions.
  * Uses Angular Material MatMenu.
+ *
+ * Uses signal-backed @Input setters so that computed() tracks changes
+ * (plain @Input properties are not reactive in Angular signals).
  */
 export declare class ColumnHeaderMenuComponent {
     columnId: string;
-    canPinLeft: boolean;
-    canPinRight: boolean;
-    canUnpin: boolean;
-    currentSort: 'asc' | 'desc' | null;
-    isSortable: boolean;
-    isResizable: boolean;
+    private readonly _canPinLeft;
+    private readonly _canPinRight;
+    private readonly _canUnpin;
+    private readonly _currentSort;
+    private readonly _isSortable;
+    private readonly _isResizable;
+    set canPinLeft(v: boolean);
+    set canPinRight(v: boolean);
+    set canUnpin(v: boolean);
+    set currentSort(v: 'asc' | 'desc' | null);
+    set isSortable(v: boolean);
+    set isResizable(v: boolean);
     handlers: Partial<ColumnHeaderMenuHandlers>;
     menuTrigger?: MatMenuTrigger;
     readonly menuItems: import("@angular/core").Signal<IColumnHeaderMenuItem[]>;

package/package.json

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