@alaarab/ogrid-angular-material 2.5.9 → 2.6.1

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

@@ -0,0 +1,99 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { OGridService, OGridLayoutComponent, BaseOGridComponent, } 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';
+import * as i0 from "@angular/core";
+function OGridComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ogrid-column-chooser", 6);
+    i0.ɵɵlistener("visibilityChange", function OGridComponent_Conditional_2_Template_ogrid_column_chooser_visibilityChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ogridService.columnChooser().onVisibilityChange($event.columnKey, $event.visible)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("columns", ctx_r1.ogridService.columnChooser().columns)("visibleColumns", ctx_r1.ogridService.columnChooser().visibleColumns);
+} }
+/**
+ * Top-level OGrid component for Angular Material.
+ * 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.
+ */
+export class OGridComponent extends BaseOGridComponent {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵOGridComponent_BaseFactory; return function OGridComponent_Factory(__ngFactoryType__) { return (ɵOGridComponent_BaseFactory || (ɵOGridComponent_BaseFactory = i0.ɵɵgetInheritedFactory(OGridComponent)))(__ngFactoryType__ || OGridComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OGridComponent, selectors: [["ogrid"]], features: [i0.ɵɵProvidersFeature([OGridService]), i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 20, consts: [[3, "className", "sideBar", "hasToolbar", "hasToolbarBelow", "hasPagination", "fullScreen", "showNameBox", "activeCellRef", "formulaBar", "sheetDefs", "activeSheet", "onSheetChange", "onSheetAdd"], ["toolbarEnd", ""], [3, "columns", "visibleColumns"], [3, "props"], ["pagination", ""], [3, "pageChange", "pageSizeChange", "currentPage", "pageSize", "totalCount", "pageSizeOptions", "entityLabelPlural"], [3, "visibilityChange", "columns", "visibleColumns"]], template: function OGridComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "ogrid-layout", 0);
+            i0.ɵɵelementContainerStart(1, 1);
+            i0.ɵɵconditionalCreate(2, OGridComponent_Conditional_2_Template, 1, 2, "ogrid-column-chooser", 2);
+            i0.ɵɵelementContainerEnd();
+            i0.ɵɵelement(3, "ogrid-datagrid-table", 3);
+            i0.ɵɵelementContainerStart(4, 4);
+            i0.ɵɵelementStart(5, "ogrid-pagination-controls", 5);
+            i0.ɵɵlistener("pageChange", function OGridComponent_Template_ogrid_pagination_controls_pageChange_5_listener($event) { return ctx.ogridService.pagination().setPage($event); })("pageSizeChange", function OGridComponent_Template_ogrid_pagination_controls_pageSizeChange_5_listener($event) { return ctx.onPageSizeChange($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementContainerEnd();
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("className", ctx.ogridService.className())("sideBar", ctx.ogridService.sideBarProps())("hasToolbar", ctx.showToolbar)("hasToolbarBelow", false)("hasPagination", true)("fullScreen", ctx.ogridService.fullScreen())("showNameBox", !!(ctx.ogridService.cellReferences() && !ctx.ogridService.formulasEnabled()))("activeCellRef", ctx.ogridService.activeCellRef())("formulaBar", ctx.ogridService.formulasEnabled() ? ctx.ogridService.formulaBarState() : null)("sheetDefs", ctx.ogridService.sheetDefs())("activeSheet", ctx.ogridService.activeSheet())("onSheetChange", ctx.ogridService.onSheetChange())("onSheetAdd", ctx.ogridService.onSheetAdd());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.ogridService.columnChooserPlacement() === "toolbar" ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("props", ctx.ogridService.dataGridProps());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("currentPage", ctx.ogridService.pagination().page)("pageSize", ctx.ogridService.pagination().pageSize)("totalCount", ctx.ogridService.pagination().displayTotalCount)("pageSizeOptions", ctx.ogridService.pagination().pageSizeOptions)("entityLabelPlural", ctx.ogridService.pagination().entityLabelPlural);
+        } }, dependencies: [OGridLayoutComponent,
+            DataGridTableComponent,
+            ColumnChooserComponent,
+            PaginationControlsComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OGridComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                    OGridLayoutComponent,
+                    DataGridTableComponent,
+                    ColumnChooserComponent,
+                    PaginationControlsComponent,
+                ], providers: [OGridService], template: `
+    <ogrid-layout
+      [className]="ogridService.className()"
+      [sideBar]="ogridService.sideBarProps()"
+      [hasToolbar]="showToolbar"
+      [hasToolbarBelow]="false"
+      [hasPagination]="true"
+      [fullScreen]="ogridService.fullScreen()"
+      [showNameBox]="!!(ogridService.cellReferences() && !ogridService.formulasEnabled())"
+      [activeCellRef]="ogridService.activeCellRef()"
+      [formulaBar]="ogridService.formulasEnabled() ? ogridService.formulaBarState() : null"
+      [sheetDefs]="ogridService.sheetDefs()"
+      [activeSheet]="ogridService.activeSheet()"
+      [onSheetChange]="ogridService.onSheetChange()"
+      [onSheetAdd]="ogridService.onSheetAdd()"
+    >
+      <ng-container toolbarEnd>
+        @if (ogridService.columnChooserPlacement() === 'toolbar') {
+          <ogrid-column-chooser
+            [columns]="ogridService.columnChooser().columns"
+            [visibleColumns]="ogridService.columnChooser().visibleColumns"
+            (visibilityChange)="ogridService.columnChooser().onVisibilityChange($event.columnKey, $event.visible)"
+          />
+        }
+      </ng-container>
+
+      <ogrid-datagrid-table [props]="ogridService.dataGridProps()" />
+
+      <ng-container pagination>
+        <ogrid-pagination-controls
+          [currentPage]="ogridService.pagination().page"
+          [pageSize]="ogridService.pagination().pageSize"
+          [totalCount]="ogridService.pagination().displayTotalCount"
+          [pageSizeOptions]="ogridService.pagination().pageSizeOptions"
+          [entityLabelPlural]="ogridService.pagination().entityLabelPlural"
+          (pageChange)="ogridService.pagination().setPage($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        />
+      </ng-container>
+    </ogrid-layout>
+  `, styles: [":host { display: block; height: 100%; }"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OGridComponent, { className: "OGridComponent", filePath: "ogrid/ogrid.component.ts", lineNumber: 72 }); })();

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

@@ -0,0 +1,200 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
+function PaginationControlsComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 11);
+    i0.ɵɵdomListener("click", function PaginationControlsComponent_Conditional_0_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.pageChange.emit(1)); });
+    i0.ɵɵtext(1, "1");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(2, "span", 12);
+    i0.ɵɵtext(3, "\u2026");
+    i0.ɵɵdomElementEnd();
+} }
+function PaginationControlsComponent_Conditional_0_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 13);
+    i0.ɵɵdomListener("click", function PaginationControlsComponent_Conditional_0_For_10_Template_button_click_0_listener() { const pageNum_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.pageChange.emit(pageNum_r5)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const pageNum_r5 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("ogrid-pagination__btn--active", ctx_r1.currentPage === pageNum_r5);
+    i0.ɵɵattribute("aria-label", "Page " + pageNum_r5)("aria-current", ctx_r1.currentPage === pageNum_r5 ? "page" : null);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(pageNum_r5);
+} }
+function PaginationControlsComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "span", 12);
+    i0.ɵɵtext(1, "\u2026");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(2, "button", 13);
+    i0.ɵɵdomListener("click", function PaginationControlsComponent_Conditional_0_Conditional_11_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const vm_r7 = i0.ɵɵnextContext(); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageChange.emit(vm_r7.totalPages)); });
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const vm_r7 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("aria-label", "Page " + vm_r7.totalPages);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(vm_r7.totalPages);
+} }
+function PaginationControlsComponent_Conditional_0_For_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "option", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const n_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵdomProperty("value", n_r8)("selected", ctx_r1.pageSize === n_r8);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(n_r8);
+} }
+function PaginationControlsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "nav", 0)(1, "span", 1);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span", 2)(4, "button", 3);
+    i0.ɵɵdomListener("click", function PaginationControlsComponent_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageChange.emit(1)); });
+    i0.ɵɵtext(5, "\u00AB");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "button", 4);
+    i0.ɵɵdomListener("click", function PaginationControlsComponent_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageChange.emit(ctx_r1.currentPage - 1)); });
+    i0.ɵɵtext(7, "\u2039");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(8, PaginationControlsComponent_Conditional_0_Conditional_8_Template, 4, 0);
+    i0.ɵɵrepeaterCreate(9, PaginationControlsComponent_Conditional_0_For_10_Template, 2, 5, "button", 5, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(11, PaginationControlsComponent_Conditional_0_Conditional_11_Template, 4, 2);
+    i0.ɵɵdomElementStart(12, "button", 6);
+    i0.ɵɵdomListener("click", function PaginationControlsComponent_Conditional_0_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageChange.emit(ctx_r1.currentPage + 1)); });
+    i0.ɵɵtext(13, "\u203A");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(14, "button", 7);
+    i0.ɵɵdomListener("click", function PaginationControlsComponent_Conditional_0_Template_button_click_14_listener() { const vm_r7 = i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageChange.emit(vm_r7.totalPages)); });
+    i0.ɵɵtext(15, "\u00BB");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(16, "span", 8)(17, "label");
+    i0.ɵɵtext(18, "Rows ");
+    i0.ɵɵdomElementStart(19, "select", 9);
+    i0.ɵɵdomListener("change", function PaginationControlsComponent_Conditional_0_Template_select_change_19_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onPageSizeSelect($event)); });
+    i0.ɵɵrepeaterCreate(20, PaginationControlsComponent_Conditional_0_For_21_Template, 2, 3, "option", 10, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementEnd()()()();
+} if (rf & 2) {
+    const vm_r7 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate4(" Showing ", vm_r7.startItem, " to ", vm_r7.endItem, " of ", ctx_r1.totalCount.toLocaleString(), " ", ctx_r1.entityLabelPlural, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("disabled", ctx_r1.currentPage === 1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("disabled", ctx_r1.currentPage === 1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(vm_r7.showStartEllipsis ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(vm_r7.pageNumbers);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(vm_r7.showEndEllipsis ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("disabled", ctx_r1.currentPage >= vm_r7.totalPages);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("disabled", ctx_r1.currentPage >= vm_r7.totalPages);
+    i0.ɵɵadvance(5);
+    i0.ɵɵdomProperty("value", ctx_r1.pageSize);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(vm_r7.pageSizeOptions);
+} }
+/**
+ * Pagination controls component using Angular Material styling.
+ * Standalone component with inline template  -  no Angular Material dependency for pagination.
+ */
+export class PaginationControlsComponent extends BasePaginationControlsComponent {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵPaginationControlsComponent_BaseFactory; return function PaginationControlsComponent_Factory(__ngFactoryType__) { return (ɵPaginationControlsComponent_BaseFactory || (ɵPaginationControlsComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PaginationControlsComponent)))(__ngFactoryType__ || PaginationControlsComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaginationControlsComponent, selectors: [["ogrid-pagination-controls"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["role", "navigation", "aria-label", "Pagination", 1, "ogrid-pagination"], [1, "ogrid-pagination__info"], [1, "ogrid-pagination__pages"], ["aria-label", "First page", 1, "ogrid-pagination__btn", 3, "click", "disabled"], ["aria-label", "Previous page", 1, "ogrid-pagination__btn", 3, "click", "disabled"], [1, "ogrid-pagination__btn", 3, "ogrid-pagination__btn--active"], ["aria-label", "Next page", 1, "ogrid-pagination__btn", 3, "click", "disabled"], ["aria-label", "Last page", 1, "ogrid-pagination__btn", 3, "click", "disabled"], [1, "ogrid-pagination__size"], ["aria-label", "Rows per page", 3, "change", "value"], [3, "value", "selected"], ["aria-label", "Page 1", 1, "ogrid-pagination__btn", 3, "click"], ["aria-hidden", "true", 1, "ogrid-pagination__ellipsis"], [1, "ogrid-pagination__btn", 3, "click"]], template: function PaginationControlsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PaginationControlsComponent_Conditional_0_Template, 22, 11, "nav", 0);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.vm()) ? 0 : -1, tmp_0_0);
+        } }, styles: ["[_nghost-%COMP%] { display: block; }\n    .ogrid-pagination[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: space-between;\n      flex-wrap: wrap; gap: 8px; padding: 6px 12px; font-size: 14px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-pagination__info[_ngcontent-%COMP%] { color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-pagination__pages[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 2px; }\n    .ogrid-pagination__btn[_ngcontent-%COMP%] {\n      min-width: 32px; height: 32px; padding: 0 6px;\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 14px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-pagination__btn[_ngcontent-%COMP%]:hover:not(:disabled) { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-pagination__btn[_ngcontent-%COMP%]:disabled { opacity: 0.38; cursor: default; }\n    .ogrid-pagination__btn--active[_ngcontent-%COMP%] {\n      background: var(--mat-sys-primary, #1976d2); color: #fff;\n      border-color: var(--mat-sys-primary, #1976d2);\n    }\n    .ogrid-pagination__ellipsis[_ngcontent-%COMP%] { margin: 0 4px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-pagination__size[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }\n    .ogrid-pagination__size[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      min-width: 60px; height: 32px; padding: 4px 8px;\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;\n      font-size: 14px; margin-left: 8px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    @media (max-width: 576px) {\n      .ogrid-pagination[_ngcontent-%COMP%] { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 8px; font-size: 12px; }\n      .ogrid-pagination__pages[_ngcontent-%COMP%] { order: -1; justify-content: center; }\n      .ogrid-pagination__info[_ngcontent-%COMP%] { text-align: center; font-size: 11px; }\n      .ogrid-pagination__size[_ngcontent-%COMP%] { font-size: 11px; justify-content: center; }\n    }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationControlsComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid-pagination-controls', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @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 }}
+        </span>
+
+        <span class="ogrid-pagination__pages">
+          <button
+            class="ogrid-pagination__btn"
+            [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)"
+            aria-label="Previous page"
+          >&lsaquo;</button>
+
+          @if (vm.showStartEllipsis) {
+            <button class="ogrid-pagination__btn" (click)="pageChange.emit(1)" aria-label="Page 1">1</button>
+            <span class="ogrid-pagination__ellipsis" aria-hidden="true">&hellip;</span>
+          }
+
+          @for (pageNum of vm.pageNumbers; track pageNum) {
+            <button
+              class="ogrid-pagination__btn"
+              [class.ogrid-pagination__btn--active]="currentPage === pageNum"
+              (click)="pageChange.emit(pageNum)"
+              [attr.aria-label]="'Page ' + pageNum"
+              [attr.aria-current]="currentPage === pageNum ? 'page' : null"
+            >{{ pageNum }}</button>
+          }
+
+          @if (vm.showEndEllipsis) {
+            <span class="ogrid-pagination__ellipsis" aria-hidden="true">&hellip;</span>
+            <button
+              class="ogrid-pagination__btn"
+              (click)="pageChange.emit(vm.totalPages)"
+              [attr.aria-label]="'Page ' + vm.totalPages"
+            >{{ vm.totalPages }}</button>
+          }
+
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage >= vm.totalPages"
+            (click)="pageChange.emit(currentPage + 1)"
+            aria-label="Next page"
+          >&rsaquo;</button>
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage >= vm.totalPages"
+            (click)="pageChange.emit(vm.totalPages)"
+            aria-label="Last page"
+          >&raquo;</button>
+        </span>
+
+        <span class="ogrid-pagination__size">
+          <label>Rows
+            <select
+              [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>
+              }
+            </select>
+          </label>
+        </span>
+      </nav>
+    }
+  `, styles: ["\n    :host { display: block; }\n    .ogrid-pagination {\n      display: flex; align-items: center; justify-content: space-between;\n      flex-wrap: wrap; gap: 8px; padding: 6px 12px; font-size: 14px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-pagination__info { color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-pagination__pages { display: flex; align-items: center; gap: 2px; }\n    .ogrid-pagination__btn {\n      min-width: 32px; height: 32px; padding: 0 6px;\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 14px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-pagination__btn:hover:not(:disabled) { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-pagination__btn:disabled { opacity: 0.38; cursor: default; }\n    .ogrid-pagination__btn--active {\n      background: var(--mat-sys-primary, #1976d2); color: #fff;\n      border-color: var(--mat-sys-primary, #1976d2);\n    }\n    .ogrid-pagination__ellipsis { margin: 0 4px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-pagination__size { display: flex; align-items: center; gap: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }\n    .ogrid-pagination__size select {\n      min-width: 60px; height: 32px; padding: 4px 8px;\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;\n      font-size: 14px; margin-left: 8px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    @media (max-width: 576px) {\n      .ogrid-pagination { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 8px; font-size: 12px; }\n      .ogrid-pagination__pages { order: -1; justify-content: center; }\n      .ogrid-pagination__info { text-align: center; font-size: 11px; }\n      .ogrid-pagination__size { font-size: 11px; justify-content: center; }\n    }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationControlsComponent, { className: "PaginationControlsComponent", filePath: "pagination-controls/pagination-controls.component.ts", lineNumber: 124 }); })();

package/dist/types/column-chooser/column-chooser.component.d.ts

@@ -1,8 +1,12 @@
 import { BaseColumnChooserComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
 /**
  * Column visibility chooser dropdown using Angular Material styling.
  * Standalone component with inline template.
  */
 export declare class ColumnChooserComponent extends BaseColumnChooserComponent {
+    onEscape(event: KeyboardEvent): void;
     onDocumentClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnChooserComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnChooserComponent, "ogrid-column-chooser", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,5 +1,6 @@
 import { ElementRef } from '@angular/core';
 import { BaseColumnHeaderFilterComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
 /**
  * Column header filter component with sort + filter icon + popover.
  * Standalone component with inline template.
@@ -8,4 +9,6 @@ export declare class ColumnHeaderFilterComponent extends BaseColumnHeaderFilterC
     private headerEl?;
     protected getHeaderEl(): ElementRef<HTMLElement> | undefined;
     onDocumentClickWrapper(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnHeaderFilterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnHeaderFilterComponent, "ogrid-column-header-filter", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,5 +1,8 @@
 import { MatMenuTrigger } from '@angular/material/menu';
 import { BaseColumnHeaderMenuComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
 export declare class ColumnHeaderMenuComponent extends BaseColumnHeaderMenuComponent {
     menuTrigger?: MatMenuTrigger;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnHeaderMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnHeaderMenuComponent, "column-header-menu", never, {}, {}, never, never, true, never>;
 }

package/dist/types/datagrid-table/datagrid-table.component.d.ts

@@ -1,12 +1,19 @@
 import { ElementRef } from '@angular/core';
 import { BaseDataGridTableComponent } from '@alaarab/ogrid-angular';
 import type { IOGridDataGridProps } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
 /**
  * DataGridTable component using native HTML table with Material Design-inspired styling.
  * Standalone component  -  this is the workhorse of the grid.
  */
 export declare class DataGridTableComponent<T> extends BaseDataGridTableComponent<T> {
     private readonly propsSignal;
+    readonly statusBarClasses: {
+        statusBar: string;
+        statusBarItem: string;
+        statusBarLabel: string;
+        statusBarValue: string;
+    };
     set propsInput(value: IOGridDataGridProps<T>);
     private wrapperRef?;
     private tableContainerRef?;
@@ -18,4 +25,6 @@ export declare class DataGridTableComponent<T> extends BaseDataGridTableComponen
     protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
     getColumnLetter(colIdx: number): string;
     onResizeRowNumber(event: PointerEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataGridTableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataGridTableComponent<any>, "ogrid-datagrid-table", never, { "propsInput": { "alias": "props"; "required": true; }; }, {}, never, never, true, never>;
 }

package/dist/types/datagrid-table/inline-cell-editor.component.d.ts

@@ -1,3 +1,6 @@
 import { BaseInlineCellEditorComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
 export declare class InlineCellEditorComponent<T = unknown> extends BaseInlineCellEditorComponent<T> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<InlineCellEditorComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InlineCellEditorComponent<any>, "ogrid-mat-inline-cell-editor", never, {}, {}, never, never, true, never>;
 }

package/dist/types/datagrid-table/popover-cell-editor.component.d.ts

@@ -1,3 +1,6 @@
 import { BasePopoverCellEditorComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
 export declare class PopoverCellEditorComponent<T = unknown> extends BasePopoverCellEditorComponent<T> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverCellEditorComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverCellEditorComponent<any>, "ogrid-mat-popover-cell-editor", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,4 +1,5 @@
 import { BaseOGridComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
 /**
  * Top-level OGrid component for Angular Material.
  * Standalone component  -  provides OGridService and renders OGridLayout with all sub-components.
@@ -7,4 +8,6 @@ import { BaseOGridComponent } from '@alaarab/ogrid-angular';
  * The effect() reactively configures the service when the input signal changes.
  */
 export declare class OGridComponent<T> extends BaseOGridComponent<T> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<OGridComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OGridComponent<any>, "ogrid", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,7 +1,10 @@
 import { BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
 /**
  * Pagination controls component using Angular Material styling.
  * Standalone component with inline template  -  no Angular Material dependency for pagination.
  */
 export declare class PaginationControlsComponent extends BasePaginationControlsComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationControlsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationControlsComponent, "ogrid-pagination-controls", never, {}, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.5.9",
+  "version": "2.6.1",
   "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",
@@ -13,7 +13,7 @@
     }
   },
   "scripts": {
-    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
+    "build": "rimraf dist && ngc -p tsconfig.build.json",
     "test": "jest --passWithNoTests",
     "storybook": "ng run angular-material:storybook",
     "build-storybook": "ng run angular-material:build-storybook"
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.5.9"
+    "@alaarab/ogrid-angular": "2.6.1"
   },
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",