@alaarab/ogrid-angular-material 2.0.8 → 2.0.11

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

@@ -4,8 +4,8 @@ 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, input, viewChild, ChangeDetectionStrategy, } from '@angular/core';
-import { BaseDataGridTableComponent, DataGridStateService, MarchingAntsOverlayComponent, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, } from '@alaarab/ogrid-angular';
+import { Component, ChangeDetectionStrategy, Input, ViewChild, signal } from '@angular/core';
+import { BaseDataGridTableComponent, DataGridStateService, MarchingAntsOverlayComponent, StatusBarComponent, GridContextMenuComponent, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, } from '@alaarab/ogrid-angular';
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
 import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
 import { InlineCellEditorComponent } from './inline-cell-editor.component';
@@ -15,30 +15,54 @@ import { PopoverCellEditorComponent } from './popover-cell-editor.component';
  * Standalone component — this is the workhorse of the grid.
  */
 let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTableComponent {
+    set propsInput(value) {
+        this.propsSignal.set(value);
+    }
     constructor() {
         super();
-        this.propsInput = input.required({ alias: 'props' });
-        this.wrapperRef = viewChild('wrapperEl');
-        this.tableContainerRef = viewChild('tableContainerEl');
+        this.propsSignal = signal(undefined);
         this.initBase();
     }
     getProps() {
-        return this.propsInput();
+        return this.propsSignal();
     }
     getWrapperRef() {
-        return this.wrapperRef();
+        return this.wrapperRef;
     }
     getTableContainerRef() {
-        return this.tableContainerRef();
+        return this.tableContainerRef;
+    }
+    /** Build column header menu handlers for a given column */
+    getColumnMenuHandlers(columnId) {
+        return {
+            onPinLeft: () => this.onPinColumn(columnId, 'left'),
+            onPinRight: () => this.onPinColumn(columnId, 'right'),
+            onUnpin: () => this.onUnpinColumn(columnId),
+            onSortAsc: () => this.onSortAsc(columnId),
+            onSortDesc: () => this.onSortDesc(columnId),
+            onClearSort: () => this.onClearSort(),
+            onAutosizeThis: () => this.onAutosizeColumn(columnId),
+            onAutosizeAll: () => this.onAutosizeAllColumns(),
+            onClose: () => { }
+        };
     }
 };
+__decorate([
+    Input({ required: true, alias: 'props' })
+], DataGridTableComponent.prototype, "propsInput", null);
+__decorate([
+    ViewChild('wrapperEl')
+], DataGridTableComponent.prototype, "wrapperRef", void 0);
+__decorate([
+    ViewChild('tableContainerEl')
+], DataGridTableComponent.prototype, "tableContainerRef", void 0);
 DataGridTableComponent = __decorate([
     Component({
         selector: 'ogrid-datagrid-table',
         standalone: true,
-        imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, MarchingAntsOverlayComponent, InlineCellEditorComponent, PopoverCellEditorComponent],
-        providers: [DataGridStateService],
         changeDetection: ChangeDetectionStrategy.OnPush,
+        imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, InlineCellEditorComponent, PopoverCellEditorComponent],
+        providers: [DataGridStateService],
         template: `
     <div class="ogrid-datagrid-root">
       <div
@@ -103,16 +127,21 @@ DataGridTableComponent = __decorate([
                           @let pinned = isPinned(col.columnId);
                           @let pinnedLeft = pinned === 'left' || (isFreezeCol && colIdx === 0);
                           @let pinnedRight = pinned === 'right';
+                          @let sortState = getSortState(col.columnId);
+                          @let ariaSort = sortState === 'asc' ? 'ascending' : sortState === 'desc' ? 'descending' : null;
                           <th scope="col"
                             class="ogrid-datagrid-th"
                             [class.ogrid-datagrid-th--pinned-left]="pinnedLeft"
                             [class.ogrid-datagrid-th--pinned-right]="pinnedRight"
                             [attr.rowSpan]="headerRows().length > 1 ? headerRows().length - rowIdx : null"
                             [attr.data-column-id]="col.columnId"
+                            [attr.aria-sort]="ariaSort"
                             [style.minWidth.px]="col.minWidth ?? 80"
                             [style.width.px]="colW"
                             [style.maxWidth.px]="colW"
                             [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
+                            [style.left.px]="pinnedLeft ? getPinnedLeftOffset(col.columnId) : null"
+                            [style.right.px]="pinnedRight ? getPinnedRightOffset(col.columnId) : null"
                             (mousedown)="onHeaderMouseDown(col.columnId, $event)"
                           >
                             <div style="display:flex;align-items:center;gap:4px;">
@@ -136,14 +165,16 @@ DataGridTableComponent = __decorate([
                                 [onDateChange]="getFilterConfig(col).onDateChange"
                               />
                               @let pinState = getPinState(col.columnId);
+                              @let sortState = getSortState(col.columnId);
                               <column-header-menu
                                 [columnId]="col.columnId"
-                                [onPinLeft]="() => onPinColumn(col.columnId, 'left')"
-                                [onPinRight]="() => onPinColumn(col.columnId, 'right')"
-                                [onUnpin]="() => onUnpinColumn(col.columnId)"
                                 [canPinLeft]="pinState.canPinLeft"
                                 [canPinRight]="pinState.canPinRight"
                                 [canUnpin]="pinState.canUnpin"
+                                [currentSort]="sortState"
+                                [isSortable]="col.sortable !== false"
+                                [isResizable]="col.resizable !== false"
+                                [handlers]="getColumnMenuHandlers(col.columnId)"
                               />
                             </div>
                             <div class="ogrid-datagrid-resize-handle" (mousedown)="onResizeStart($event, col)"></div>
@@ -200,6 +231,8 @@ DataGridTableComponent = __decorate([
                             [style.minWidth.px]="colLayout.minWidth"
                             [style.width.px]="colLayout.width"
                             [style.maxWidth.px]="colLayout.width"
+                            [style.left.px]="colLayout.pinnedLeft ? getPinnedLeftOffset(colLayout.col.columnId) : null"
+                            [style.right.px]="colLayout.pinnedRight ? getPinnedRightOffset(colLayout.col.columnId) : null"
                           >
                             @let descriptor = getCellDescriptor(item, colLayout.col, rowIndex, colIdx);
                             @if (descriptor.mode === 'editing-inline') {
@@ -221,7 +254,7 @@ DataGridTableComponent = __decorate([
                                 [globalColIndex]="descriptor.globalColIndex"
                                 [displayValue]="descriptor.displayValue"
                                 [editorProps]="editorProps"
-                                [onCancel]="() => cancelEdit()"
+                                [onCancel]="cancelEdit.bind(this)"
                               ></ogrid-mat-popover-cell-editor>
                             } @else {
                               @let content = resolveCellContent(colLayout.col, item, descriptor.displayValue);
@@ -267,12 +300,15 @@ DataGridTableComponent = __decorate([
               </table>
 
               <ogrid-marching-ants-overlay
-                [containerEl]="tableContainerEl()"
+                [containerEl]="tableContainerEl"
                 [selectionRange]="state().interaction.selectionRange"
                 [copyRange]="state().interaction.copyRange"
                 [cutRange]="state().interaction.cutRange"
                 [colOffset]="state().layout.colOffset"
                 [columnSizingVersion]="columnSizingVersion()"
+                [items]="items()"
+                [visibleColumns]="propsVisibleColumns()"
+                [columnOrder]="propsColumnOrder()"
               ></ogrid-marching-ants-overlay>
 
               @if (showEmptyInGrid() && emptyState()) {
@@ -305,12 +341,12 @@ DataGridTableComponent = __decorate([
             (click)="closeContextMenu()"
             (contextmenu)="$event.preventDefault(); closeContextMenu()"
           >
-            <ogrid-grid-context-menu
+            <ogrid-context-menu
               [x]="menuPosition()!.x"
               [y]="menuPosition()!.y"
               [hasSelection]="hasCellSelection()"
-              [canUndo]="canUndo()"
-              [canRedo]="canRedo()"
+              [canUndoProp]="canUndo()"
+              [canRedoProp]="canRedo()"
               (undoAction)="onUndo()"
               (redoAction)="onRedo()"
               (copyAction)="handleCopy()"
@@ -358,24 +394,28 @@ DataGridTableComponent = __decorate([
     .ogrid-datagrid-scroll-wrapper { display: flex; flex-direction: column; min-height: 100%; }
     .ogrid-datagrid-table-wrapper--loading { position: relative; opacity: 0.6; }
     .ogrid-datagrid-table {
-      width: 100%; border-collapse: collapse; overflow: hidden; table-layout: fixed;
+      width: 100%; border-collapse: collapse; table-layout: fixed;
     }
     .ogrid-datagrid-thead {
-      position: sticky; top: 0; z-index: 8; background: rgba(0,0,0,0.04);
+      z-index: 8; background: rgba(0,0,0,0.04);
     }
     .ogrid-datagrid-thead th { background: rgba(0,0,0,0.04); }
     .ogrid-datagrid-header-row { background: rgba(0,0,0,0.04); }
     .ogrid-datagrid-th {
-      font-weight: 600; position: relative; padding: 6px 10px; text-align: left;
+      font-weight: 600; position: sticky; top: 0; padding: 6px 10px; text-align: left;
       font-size: 14px; border-bottom: 1px solid rgba(0,0,0,0.12);
+      background: rgba(0,0,0,0.04); z-index: 8;
+    }
+    .ogrid-datagrid-th:focus-visible {
+      outline: 2px solid #1976d2; outline-offset: -2px; z-index: 11;
     }
     .ogrid-datagrid-th--pinned-left {
-      position: sticky; left: 0; z-index: 9; background: rgba(0,0,0,0.04); will-change: transform;
-      border-left: 2px solid var(--mat-sys-primary, #1976d2);
+      position: sticky; top: 0; left: 0; z-index: 10; background: rgba(0,0,0,0.04); will-change: transform;
+      border-right: 2px solid rgba(0,0,0,0.12);
     }
     .ogrid-datagrid-th--pinned-right {
-      position: sticky; right: 0; z-index: 9; background: rgba(0,0,0,0.04); will-change: transform;
-      border-right: 2px solid var(--mat-sys-primary, #1976d2);
+      position: sticky; top: 0; right: 0; z-index: 10; background: rgba(0,0,0,0.04); will-change: transform;
+      border-left: 2px solid rgba(0,0,0,0.12);
     }
     .ogrid-datagrid-group-header {
       text-align: center; font-weight: 600; border-bottom: 2px solid rgba(0,0,0,0.12); padding: 6px;
@@ -402,11 +442,11 @@ DataGridTableComponent = __decorate([
     .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid rgba(0,0,0,0.06); }
     .ogrid-datagrid-td--pinned-left {
       position: sticky; left: 0; z-index: 6; background: #fff; will-change: transform;
-      border-left: 2px solid var(--mat-sys-primary, #1976d2);
+      border-right: 2px solid rgba(0,0,0,0.12);
     }
     .ogrid-datagrid-td--pinned-right {
       position: sticky; right: 0; z-index: 6; background: #fff; will-change: transform;
-      border-right: 2px solid var(--mat-sys-primary, #1976d2);
+      border-left: 2px solid rgba(0,0,0,0.12);
     }
     .ogrid-datagrid-cell {
       width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;
@@ -414,6 +454,9 @@ DataGridTableComponent = __decorate([
       text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none;
       font-size: 14px;
     }
+    .ogrid-datagrid-cell:focus-visible {
+      outline: 2px solid #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--editable { cursor: cell; }
@@ -446,10 +489,11 @@ DataGridTableComponent = __decorate([
       cursor: col-resize; user-select: none;
     }
     .ogrid-datagrid-resize-handle::after {
-      content: ''; position: absolute; top: 0; right: 3px; bottom: 0; width: 2px;
+      content: ''; position: absolute; top: 4px; right: 3px; bottom: 4px; width: 2px;
+      background: rgba(0,0,0,0.12); border-radius: 1px; transition: background 0.15s;
     }
-    .ogrid-datagrid-resize-handle:hover::after { background: var(--mat-sys-primary, #1976d2); }
-    .ogrid-datagrid-resize-handle:active::after { background: var(--mat-sys-primary, #1565c0); }
+    .ogrid-datagrid-resize-handle:hover::after { background: rgba(0,0,0,0.4); }
+    .ogrid-datagrid-resize-handle:active::after { background: var(--mat-sys-primary, #1976d2); }
     .ogrid-datagrid-empty {
       padding: 32px 16px; text-align: center; border-top: 1px solid rgba(0,0,0,0.12);
       background: rgba(0,0,0,0.04);

package/dist/esm/datagrid-table/inline-cell-editor.component.js

@@ -4,32 +4,36 @@ 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, input, output, signal, effect, viewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, signal, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 let InlineCellEditorComponent = class InlineCellEditorComponent {
     constructor() {
-        this.value = input.required();
-        this.item = input.required();
-        this.column = input.required();
-        this.rowIndex = input.required();
-        this.editorType = input.required();
-        this.commit = output();
-        this.cancel = output();
-        this.inputEl = viewChild('inputEl');
+        this.commit = new EventEmitter();
+        this.cancel = new EventEmitter();
         this.localValue = signal('');
         this.selectOptions = signal([]);
-        effect(() => {
-            const v = this.value();
-            this.localValue.set(v != null ? String(v) : '');
-            const col = this.column();
-            if (col.cellEditorParams?.values) {
-                this.selectOptions.set(col.cellEditorParams.values);
-            }
-        });
+        this._initialized = false;
+    }
+    ngOnInit() {
+        this._initialized = true;
+        this.syncFromInputs();
+    }
+    ngOnChanges() {
+        if (this._initialized) {
+            this.syncFromInputs();
+        }
+    }
+    syncFromInputs() {
+        const v = this.value;
+        this.localValue.set(v != null ? String(v) : '');
+        const col = this.column;
+        if (col?.cellEditorParams?.values) {
+            this.selectOptions.set(col.cellEditorParams.values);
+        }
     }
     ngAfterViewInit() {
         setTimeout(() => {
-            const el = this.inputEl()?.nativeElement;
+            const el = this.inputEl?.nativeElement;
             if (el) {
                 el.focus();
                 if (el instanceof HTMLInputElement && el.type === 'text') {
@@ -72,20 +76,44 @@ let InlineCellEditorComponent = class InlineCellEditorComponent {
     }
     getInputStyle() {
         const baseStyle = 'width:100%;box-sizing:border-box;padding:6px 10px;border:2px solid var(--ogrid-selection, #217346);border-radius:2px;outline:none;font:inherit;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);';
-        const col = this.column();
+        const col = this.column;
         if (col.type === 'numeric') {
             return baseStyle + 'text-align:right;';
         }
         return baseStyle;
     }
 };
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "value", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "item", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "column", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "rowIndex", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "editorType", void 0);
+__decorate([
+    Output()
+], InlineCellEditorComponent.prototype, "commit", void 0);
+__decorate([
+    Output()
+], InlineCellEditorComponent.prototype, "cancel", void 0);
+__decorate([
+    ViewChild('inputEl')
+], InlineCellEditorComponent.prototype, "inputEl", void 0);
 InlineCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-mat-inline-cell-editor',
         standalone: true,
         imports: [CommonModule],
         template: `
-    @switch (editorType()) {
+    @switch (editorType) {
       @case ('text') {
         <input
           #inputEl

package/dist/esm/datagrid-table/popover-cell-editor.component.js

@@ -4,45 +4,38 @@ 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, input, ChangeDetectionStrategy, signal, effect, viewChild, Injector, createComponent, EnvironmentInjector, inject, } from '@angular/core';
+import { Component, ChangeDetectionStrategy, signal, effect, ViewChild, Injector, createComponent, EnvironmentInjector, inject, Input } from '@angular/core';
 /**
  * PopoverCellEditor component for Angular Material.
  * Renders custom popover editor when anchor element is set.
  */
 let PopoverCellEditorComponent = class PopoverCellEditorComponent {
     constructor() {
-        this.item = input.required();
-        this.column = input.required();
-        this.rowIndex = input.required();
-        this.globalColIndex = input.required();
-        this.displayValue = input.required();
-        this.editorProps = input.required();
-        this.onCancel = input.required();
-        this.anchorRef = viewChild('anchorEl');
-        this.editorContainerRef = viewChild('editorContainer');
         this.injector = inject(Injector);
         this.envInjector = inject(EnvironmentInjector);
         this.showEditor = signal(false);
         // Show editor after anchor is rendered
         effect(() => {
-            const anchor = this.anchorRef();
+            const anchor = this.anchorRef;
             if (anchor) {
                 setTimeout(() => this.showEditor.set(true), 0);
             }
         });
         // Render custom editor component when container is available
         effect(() => {
-            const container = this.editorContainerRef();
-            const props = this.editorProps();
-            const col = this.column();
+            const container = this.editorContainerRef;
+            const props = this.editorProps;
+            const col = this.column;
             if (!container || !this.showEditor() || typeof col.cellEditor !== 'function')
                 return;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const EditorComponent = col.cellEditor; // ComponentType
             const componentRef = createComponent(EditorComponent, {
                 environmentInjector: this.envInjector,
                 elementInjector: this.injector,
             });
             // Pass props to component instance
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             Object.assign(componentRef.instance, props);
             componentRef.changeDetectorRef.detectChanges();
             // Append to DOM
@@ -52,9 +45,36 @@ let PopoverCellEditorComponent = class PopoverCellEditorComponent {
         });
     }
     handleOverlayClick() {
-        this.onCancel()();
+        this.onCancel();
     }
 };
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "item", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "column", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "rowIndex", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "globalColIndex", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "displayValue", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "editorProps", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "onCancel", void 0);
+__decorate([
+    ViewChild('anchorEl')
+], PopoverCellEditorComponent.prototype, "anchorRef", void 0);
+__decorate([
+    ViewChild('editorContainer')
+], PopoverCellEditorComponent.prototype, "editorContainerRef", void 0);
 PopoverCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-mat-popover-cell-editor',
@@ -63,10 +83,10 @@ PopoverCellEditorComponent = __decorate([
         template: `
     <div #anchorEl
       class="ogrid-popover-anchor"
-      [attr.data-row-index]="rowIndex()"
-      [attr.data-col-index]="globalColIndex()"
+      [attr.data-row-index]="rowIndex"
+      [attr.data-col-index]="globalColIndex"
     >
-      {{ displayValue() }}
+      {{ displayValue }}
     </div>
     @if (showEditor()) {
       <div class="ogrid-popover-editor-overlay" (click)="handleOverlayClick()">

package/dist/esm/index.js

@@ -4,7 +4,9 @@ export * from '@alaarab/ogrid-angular';
 export { OGridComponent } from './ogrid/ogrid.component';
 export { DataGridTableComponent } from './datagrid-table/datagrid-table.component';
 export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
+// IColumnHeaderFilterProps is now exported from @alaarab/ogrid-angular (base class)
 export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
+// IColumnChooserProps is now exported from @alaarab/ogrid-angular (base class)
 export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
 export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';
 export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.component';

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

@@ -4,39 +4,47 @@ 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, input, computed, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, signal, effect } from '@angular/core';
 import { OGridService, OGridLayoutComponent, } from '@alaarab/ogrid-angular';
 import { DataGridTableComponent } from '../datagrid-table/datagrid-table.component';
 import { ColumnChooserComponent } from '../column-chooser/column-chooser.component';
 import { PaginationControlsComponent } from '../pagination-controls/pagination-controls.component';
 /**
  * Top-level OGrid component for Angular Material.
- * Equivalent to the React MaterialDataTable/OGrid component.
  * 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.
  */
 let OGridComponent = class OGridComponent {
+    set props(value) {
+        this.propsSignal.set(value);
+    }
     constructor() {
-        this.props = input.required();
-        this.dataGridProps = computed(() => {
-            // Ensure service is configured before accessing dataGridProps
-            this.ogridService.configure(this.props());
-            return this.ogridService.dataGridProps();
-        });
-        // The OGridService is provided at the component level, so inject it here
-        // But since we can't use inject() with generics well, we use the providers array
-        // and the Angular DI system will handle it.
-        // Actually we need a slightly different approach for the generic service.
+        this.propsSignal = signal(undefined);
         this.ogridService = new OGridService();
+        effect(() => {
+            const p = this.propsSignal();
+            if (p)
+                this.ogridService.configure(p);
+        });
+    }
+    get showToolbar() {
+        return this.ogridService.columnChooserPlacement() === 'toolbar' || this.ogridService.toolbar() != null;
     }
     onPageSizeChange(size) {
         this.ogridService.pagination().setPageSize(size);
         this.ogridService.pagination().setPage(1);
     }
 };
+__decorate([
+    Input({ required: true })
+], OGridComponent.prototype, "props", null);
 OGridComponent = __decorate([
     Component({
         selector: 'ogrid',
         standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
         imports: [
             OGridLayoutComponent,
             DataGridTableComponent,
@@ -44,15 +52,15 @@ OGridComponent = __decorate([
             PaginationControlsComponent,
         ],
         providers: [OGridService],
-        changeDetection: ChangeDetectionStrategy.OnPush,
         template: `
     <ogrid-layout
       [className]="ogridService.className()"
       [sideBar]="ogridService.sideBarProps()"
-      [toolbar]="ogridService.toolbar()"
-      [toolbarBelow]="ogridService.toolbarBelow()"
+      [hasToolbar]="showToolbar"
+      [hasToolbarBelow]="false"
+      [hasPagination]="true"
     >
-      <ng-container toolbar-end>
+      <ng-container toolbarEnd>
         @if (ogridService.columnChooserPlacement() === 'toolbar') {
           <ogrid-column-chooser
             [columns]="ogridService.columnChooser().columns"
@@ -62,7 +70,7 @@ OGridComponent = __decorate([
         }
       </ng-container>
 
-      <ogrid-datagrid-table [props]="dataGridProps()" />
+      <ogrid-datagrid-table [props]="ogridService.dataGridProps()" />
 
       <ng-container pagination>
         <ogrid-pagination-controls

package/dist/esm/pagination-controls/pagination-controls.component.js

@@ -4,30 +4,13 @@ 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, input, output, computed, ChangeDetectionStrategy } from '@angular/core';
-import { getPaginationViewModel } from '@alaarab/ogrid-angular';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
 /**
  * Pagination controls component using Angular Material styling.
  * Standalone component with inline template — no Angular Material dependency for pagination.
  */
-let PaginationControlsComponent = class PaginationControlsComponent {
-    constructor() {
-        this.currentPage = input.required();
-        this.pageSize = input.required();
-        this.totalCount = input.required();
-        this.pageSizeOptions = input(undefined);
-        this.entityLabelPlural = input('items');
-        this.pageChange = output();
-        this.pageSizeChange = output();
-        this.vm = computed(() => {
-            const opts = this.pageSizeOptions();
-            return getPaginationViewModel(this.currentPage(), this.pageSize(), this.totalCount(), opts ? { pageSizeOptions: opts } : undefined);
-        });
-    }
-    onPageSizeSelect(event) {
-        const value = Number(event.target.value);
-        this.pageSizeChange.emit(value);
-    }
+let PaginationControlsComponent = class PaginationControlsComponent extends BasePaginationControlsComponent {
 };
 PaginationControlsComponent = __decorate([
     Component({
@@ -38,20 +21,20 @@ PaginationControlsComponent = __decorate([
     @if (vm(); as vm) {
       <nav class="ogrid-pagination" role="navigation" aria-label="Pagination">
         <span class="ogrid-pagination__info">
-          Showing {{ vm.startItem }} to {{ vm.endItem }} of {{ totalCount().toLocaleString() }} {{ entityLabelPlural() }}
+          Showing {{ vm.startItem }} to {{ vm.endItem }} of {{ totalCount.toLocaleString() }} {{ entityLabelPlural }}
         </span>
 
         <span class="ogrid-pagination__pages">
           <button
             class="ogrid-pagination__btn"
-            [disabled]="currentPage() === 1"
+            [disabled]="currentPage === 1"
             (click)="pageChange.emit(1)"
             aria-label="First page"
           >&laquo;</button>
           <button
             class="ogrid-pagination__btn"
-            [disabled]="currentPage() === 1"
-            (click)="pageChange.emit(currentPage() - 1)"
+            [disabled]="currentPage === 1"
+            (click)="pageChange.emit(currentPage - 1)"
             aria-label="Previous page"
           >&lsaquo;</button>
 
@@ -63,10 +46,10 @@ PaginationControlsComponent = __decorate([
           @for (pageNum of vm.pageNumbers; track pageNum) {
             <button
               class="ogrid-pagination__btn"
-              [class.ogrid-pagination__btn--active]="currentPage() === pageNum"
+              [class.ogrid-pagination__btn--active]="currentPage === pageNum"
               (click)="pageChange.emit(pageNum)"
               [attr.aria-label]="'Page ' + pageNum"
-              [attr.aria-current]="currentPage() === pageNum ? 'page' : null"
+              [attr.aria-current]="currentPage === pageNum ? 'page' : null"
             >{{ pageNum }}</button>
           }
 
@@ -81,13 +64,13 @@ PaginationControlsComponent = __decorate([
 
           <button
             class="ogrid-pagination__btn"
-            [disabled]="currentPage() >= vm.totalPages"
-            (click)="pageChange.emit(currentPage() + 1)"
+            [disabled]="currentPage >= vm.totalPages"
+            (click)="pageChange.emit(currentPage + 1)"
             aria-label="Next page"
           >&rsaquo;</button>
           <button
             class="ogrid-pagination__btn"
-            [disabled]="currentPage() >= vm.totalPages"
+            [disabled]="currentPage >= vm.totalPages"
             (click)="pageChange.emit(vm.totalPages)"
             aria-label="Last page"
           >&raquo;</button>
@@ -96,12 +79,12 @@ PaginationControlsComponent = __decorate([
         <span class="ogrid-pagination__size">
           <label>Rows
             <select
-              [value]="pageSize()"
+              [value]="pageSize"
               (change)="onPageSizeSelect($event)"
               aria-label="Rows per page"
             >
               @for (n of vm.pageSizeOptions; track n) {
-                <option [value]="n" [selected]="pageSize() === n">{{ n }}</option>
+                <option [value]="n" [selected]="pageSize === n">{{ n }}</option>
               }
             </select>
           </label>