@dcsl/flex-ui 0.0.4 → 0.0.6

package/fesm2022/dcsl-flex-ui.mjs

@@ -1,5 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, Renderer2, HostListener, ViewChild, Component } from '@angular/core';
+import { inject, Renderer2, HostListener, ViewChild, Component, input, EventEmitter, effect, Output, ContentChild, Input, ContentChildren, output } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
 class FlexPanelComponent {
     resizeObserver;
@@ -56,15 +60,261 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 args: ['window:resize']
             }] } });
 
+class FlexPaginationComponent {
+    rowCount = input(0, ...(ngDevMode ? [{ debugName: "rowCount" }] : []));
+    _totalItems = 0;
+    pageSize = 50;
+    currentPage = 1;
+    pageChange = new EventEmitter();
+    maxPagesToShow = 5;
+    pageSizes = [50, 100, 200, 500];
+    constructor() {
+        effect(() => {
+            this.currentPage = 1;
+            this._totalItems = this.rowCount();
+        });
+    }
+    ngOnInit() {
+        this.updateMaxPages();
+    }
+    // Update maxPagesToShow based on screen size
+    updateMaxPages() {
+        const width = window.innerWidth;
+        if (width < 576) {
+            this.maxPagesToShow = 1; // only current page
+        }
+        else if (width < 768) {
+            this.maxPagesToShow = 3;
+        }
+        else {
+            this.maxPagesToShow = 5;
+        }
+    }
+    get totalPages() {
+        return Math.ceil(this._totalItems / this.pageSize) || 1;
+    }
+    get pages() {
+        const total = this.totalPages;
+        const max = this.maxPagesToShow;
+        if (max === 1) {
+            return [this.currentPage]; // mobile: only current page
+        }
+        const pages = [];
+        if (total <= max) {
+            for (let i = 1; i <= total; i++)
+                pages.push(i);
+        }
+        else {
+            let start = Math.max(this.currentPage - Math.floor(max / 2), 1);
+            let end = start + max - 1;
+            if (end > total) {
+                end = total;
+                start = end - max + 1;
+            }
+            if (start > 1)
+                pages.push(1, '...');
+            for (let i = start; i <= end; i++)
+                pages.push(i);
+            if (end < total)
+                pages.push('...', total);
+        }
+        return pages;
+    }
+    changePage(page) {
+        if (typeof page !== 'number')
+            return;
+        if (page < 1)
+            page = 1;
+        if (page > this.totalPages)
+            page = this.totalPages;
+        if (page === this.currentPage)
+            return;
+        this.currentPage = page;
+        this.pageChange.emit({
+            skip: (this.currentPage - 1) * this.pageSize,
+            take: this.pageSize,
+            pageSize: this.pageSize,
+            currentPage: this.currentPage,
+        });
+    }
+    onPageSizeChange(pageSize) {
+        var value = Number(pageSize.target.value);
+        if (isNaN(value) || value <= 0)
+            return;
+        this.pageSize = value;
+        this.pageChange.emit({
+            skip: (this.currentPage - 1) * this.pageSize,
+            take: this.pageSize,
+            pageSize: this.pageSize,
+            currentPage: this.currentPage
+        });
+    }
+    firstPage() { this.changePage(1); }
+    lastPage() { this.changePage(this.totalPages); }
+    prevPage() { this.changePage(this.currentPage - 1); }
+    nextPage() { this.changePage(this.currentPage + 1); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: FlexPaginationComponent, isStandalone: true, selector: "flex-pagination", inputs: { rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, host: { listeners: { "window:resize": "updateMaxPages()" } }, ngImport: i0, template: "<div class=\"d-flex justify-content-start align-items-center\">\r\n    <!-- Pagination -->\r\n    <div class=\"overflow-auto\">\r\n        <ul class=\"pagination justify-content-center flex-nowrap mb-0\">\r\n            <!-- First / Prev (hide First on xs) -->\r\n            <li class=\"page-item d-none d-sm-block\" [class.disabled]=\"currentPage === 1\">\r\n                <button class=\"page-link\" (click)=\"firstPage()\"><i class=\"bi bi-chevron-double-left\"></i></button>\r\n            </li>\r\n            <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n                <button class=\"page-link\" (click)=\"prevPage()\"><i class=\"bi bi-chevron-left\"></i></button>\r\n            </li>\r\n\r\n            <!-- Page numbers -->\r\n            <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\"\r\n                [class.disabled]=\"page === '...'\">\r\n                <button class=\"page-link\" [disabled]=\"page === '...'\" (click)=\"changePage(page)\">\r\n                    {{ page }}\r\n                </button>\r\n            </li>\r\n\r\n            <!-- Next / Last (hide Last on xs) -->\r\n            <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\r\n                <button class=\"page-link\" (click)=\"nextPage()\"><i class=\"bi bi-chevron-right\"></i></button>\r\n            </li>\r\n            <li class=\"page-item d-none d-sm-block\" [class.disabled]=\"currentPage === totalPages\">\r\n                <button class=\"page-link\" (click)=\"lastPage()\"><i class=\"bi bi-chevron-double-right\"></i></button>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n\r\n    <!-- Page Size Dropdown -->\r\n    <div class=\"ms-2\">\r\n        <label class=\"me-2\">{{ \"page-size\" }}</label>\r\n        <select class=\"form-select d-inline-block w-auto\" [(ngModel)]=\"pageSize\" (change)=\"onPageSizeChange($event)\">\r\n            <option *ngFor=\"let size of pageSizes\" [value]=\"size\">{{ size }}</option>\r\n        </select>\r\n    </div>\r\n    <div class=\"total-count ms-2\">\r\n        {{ \"total-count\" }}: {{ _totalItems }}\r\n    </div>\r\n</div>", styles: ["@media (max-width: 576px){.total-count{display:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'flex-pagination', imports: [CommonModule, FormsModule], template: "<div class=\"d-flex justify-content-start align-items-center\">\r\n    <!-- Pagination -->\r\n    <div class=\"overflow-auto\">\r\n        <ul class=\"pagination justify-content-center flex-nowrap mb-0\">\r\n            <!-- First / Prev (hide First on xs) -->\r\n            <li class=\"page-item d-none d-sm-block\" [class.disabled]=\"currentPage === 1\">\r\n                <button class=\"page-link\" (click)=\"firstPage()\"><i class=\"bi bi-chevron-double-left\"></i></button>\r\n            </li>\r\n            <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n                <button class=\"page-link\" (click)=\"prevPage()\"><i class=\"bi bi-chevron-left\"></i></button>\r\n            </li>\r\n\r\n            <!-- Page numbers -->\r\n            <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\"\r\n                [class.disabled]=\"page === '...'\">\r\n                <button class=\"page-link\" [disabled]=\"page === '...'\" (click)=\"changePage(page)\">\r\n                    {{ page }}\r\n                </button>\r\n            </li>\r\n\r\n            <!-- Next / Last (hide Last on xs) -->\r\n            <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\r\n                <button class=\"page-link\" (click)=\"nextPage()\"><i class=\"bi bi-chevron-right\"></i></button>\r\n            </li>\r\n            <li class=\"page-item d-none d-sm-block\" [class.disabled]=\"currentPage === totalPages\">\r\n                <button class=\"page-link\" (click)=\"lastPage()\"><i class=\"bi bi-chevron-double-right\"></i></button>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n\r\n    <!-- Page Size Dropdown -->\r\n    <div class=\"ms-2\">\r\n        <label class=\"me-2\">{{ \"page-size\" }}</label>\r\n        <select class=\"form-select d-inline-block w-auto\" [(ngModel)]=\"pageSize\" (change)=\"onPageSizeChange($event)\">\r\n            <option *ngFor=\"let size of pageSizes\" [value]=\"size\">{{ size }}</option>\r\n        </select>\r\n    </div>\r\n    <div class=\"total-count ms-2\">\r\n        {{ \"total-count\" }}: {{ _totalItems }}\r\n    </div>\r\n</div>", styles: ["@media (max-width: 576px){.total-count{display:none!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pageChange: [{
+                type: Output
+            }], updateMaxPages: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+// grid-column.component.ts
+class FlexColumnComponent {
+    headerText = input('', ...(ngDevMode ? [{ debugName: "headerText" }] : []));
+    field;
+    width = 120;
+    headerTemplate;
+    cellTemplate;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: FlexColumnComponent, isStandalone: true, selector: "flex-grid-column", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flex-grid-column',
+                    template: ''
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['headerTemplate']
+            }], cellTemplate: [{
+                type: ContentChild,
+                args: ['cellTemplate']
+            }] } });
+
+// grid-columns.component.ts
+class FlexColumnsComponent {
+    columns;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FlexColumnsComponent, isStandalone: true, selector: "flex-grid-columns", queries: [{ propertyName: "columns", predicate: FlexColumnComponent }], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexColumnsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flex-grid-columns',
+                    template: ''
+                }]
+        }], propDecorators: { columns: [{
+                type: ContentChildren,
+                args: [FlexColumnComponent]
+            }] } });
+
+class FlexGridComponent {
+    enablePaging = input(false, ...(ngDevMode ? [{ debugName: "enablePaging" }] : []));
+    totalDataCount = input(0, ...(ngDevMode ? [{ debugName: "totalDataCount" }] : []));
+    tableClass = input('', ...(ngDevMode ? [{ debugName: "tableClass" }] : []));
+    dataSource = [];
+    // @ContentChildren(GridColumnComponent) columns!: QueryList<GridColumnComponent>;
+    gridColumns;
+    rowClicked = output();
+    rowDblClicked = output();
+    // Optional: custom template when no data
+    emptyRecordTemplate;
+    isPagingEnabled = false;
+    gridHeader;
+    gridBody;
+    selectedIndex = -1;
+    _totalDataCount = 0;
+    _tableClass = "";
+    pageChange = output();
+    currentPage = 1;
+    pageSize = 50;
+    constructor() {
+        effect(() => {
+            this.isPagingEnabled = this.enablePaging();
+        });
+        effect(() => {
+            this._totalDataCount = this.totalDataCount();
+        });
+        effect(() => {
+            this._tableClass = this.tableClass();
+        });
+    }
+    ngAfterViewInit() {
+        this.syncColumnWidths();
+    }
+    check() {
+        console.log(this.gridColumns);
+        console.log(this.dataSource);
+    }
+    syncScroll(e) {
+        const body = e.target;
+        const header = this.gridHeader?.nativeElement; //document.querySelector('.grid-header');
+        if (header)
+            header.scrollLeft = body.scrollLeft;
+    }
+    syncColumnWidths() {
+        // const headerCols = this.gridHeader.nativeElement.querySelectorAll('th');
+        // const bodyCols = this.gridBody.nativeElement.querySelectorAll('tr:first-child td');
+        // bodyCols.forEach((td: HTMLElement, i: number) => {
+        //   const width = td.getBoundingClientRect().width;
+        //   (headerCols[i] as HTMLElement).style.width = width + 'px';
+        // });
+    }
+    // syncColumnWidths() {
+    //   const headerCols = document.querySelectorAll('.grid-header th');
+    //   const bodyCols = this.gridBody.nativeElement.querySelectorAll('tbody tr:first-child td');
+    //   bodyCols.forEach((col: HTMLElement, i: number) => {
+    //     const width = col.getBoundingClientRect().width;
+    //     (headerCols[i] as HTMLElement).style.width = width + 'px';
+    //   });
+    // }
+    onRowDblClick(index, data) {
+        this.selectedIndex = index;
+        // console.log(index);
+        this.rowDblClicked.emit({ index: index, data: data });
+    }
+    onRowClick(index, data) {
+        this.selectedIndex = index;
+        // console.log(index);
+        this.rowClicked.emit({ index: index, data: data });
+    }
+    onPageChanged(event) {
+        console.log(event);
+        this.currentPage = event.currentPage;
+        this.pageSize = event.pageSize;
+        this.pageChange.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: FlexGridComponent, isStandalone: true, selector: "flex-grid", inputs: { enablePaging: { classPropertyName: "enablePaging", publicName: "enablePaging", isSignal: true, isRequired: false, transformFunction: null }, totalDataCount: { classPropertyName: "totalDataCount", publicName: "totalDataCount", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, emptyRecordTemplate: { classPropertyName: "emptyRecordTemplate", publicName: "emptyRecordTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { rowClicked: "rowClicked", rowDblClicked: "rowDblClicked", pageChange: "pageChange" }, queries: [{ propertyName: "gridColumns", first: true, predicate: FlexColumnsComponent, descendants: true }], viewQueries: [{ propertyName: "gridHeader", first: true, predicate: ["gridHeader"], descendants: true }, { propertyName: "gridBody", first: true, predicate: ["gridBody"], descendants: true }], ngImport: i0, template: "<div class=\"grid-container\">\r\n    <!-- Header row in its own div -->\r\n    <div class=\"grid-scroll\">\r\n        <div class=\"grid-container-sub\">\r\n            <div class=\"grid-header\" #gridHeader>\r\n                <table class=\"grid-table table table-bordered table-sm mb-0 header-table\">\r\n                    <colgroup>\r\n                        @for (col of gridColumns?.columns; track $index) {\r\n                        <col [style.width.px]=\"col.width\" [style.maxWidth.px]=\"col.width\">\r\n                        }\r\n                    </colgroup>\r\n                    <thead>\r\n                        <tr>\r\n                            @for (col of gridColumns?.columns; track $index) {\r\n                            <th class=\"text-truncate\">\r\n                                @if (col.headerTemplate) {\r\n                                <ng-container [ngTemplateOutlet]=\"col.headerTemplate\"></ng-container>\r\n                                }\r\n                                @else {\r\n                                <!-- <ng-template #defaultHeader><span [textContent]=\"col.field\"></span></ng-template> -->\r\n                                <!-- <span [textContent]=\"col.field\"></span> -->\r\n                                {{ col.headerText() }}\r\n                                }\r\n                            </th>\r\n                            }\r\n\r\n                            <!-- <th style=\"width: 20px;\"></th> -->\r\n                        </tr>\r\n                    </thead>\r\n\r\n                </table>\r\n            </div>\r\n            <!-- Scrollable body in another div -->\r\n            <div #gridBody class=\"grid-body\" (scroll)=\"syncScroll($event)\">\r\n                @if(dataSource.length > 0){\r\n                <table class=\"grid-table table table-bordered table-sm table-hover mb-0\" [ngClass]=\"_tableClass\">\r\n\r\n                    <colgroup>\r\n                        @for (col of gridColumns?.columns; track $index) {\r\n                        <col [style.width.px]=\"col.width\" [style.maxWidth.px]=\"col.width\">\r\n                        }\r\n                    </colgroup>\r\n                    <tbody>\r\n                        @for (row of dataSource; track $index; let i = $index) {\r\n                        <tr [class.table-active]=\"$index === selectedIndex\" (click)=\"onRowClick($index, row)\"\r\n                            (dblclick)=\"onRowDblClick($index, row)\">\r\n                            @for (col of gridColumns?.columns; track $index) {\r\n                            <td>\r\n                                @if (col.cellTemplate) {\r\n                                <ng-container [ngTemplateOutlet]=\"col.cellTemplate\" [ngTemplateOutletContext]=\"{ $implicit: row,\r\n      rowIndex: (currentPage - 1) * pageSize + i,\r\n      localIndex: i }\">\r\n                                </ng-container>\r\n                                } @else {\r\n                                <!-- {{ row[col.field] }} -->\r\n                                <span [textContent]=\"row[col.field]\"></span>\r\n                                }\r\n                            </td>\r\n                            }\r\n                        </tr>\r\n                        }\r\n                    </tbody>\r\n                </table>\r\n                }\r\n                @else {\r\n                No records found\r\n                }\r\n\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    @if(isPagingEnabled){\r\n    <!-- Footer -->\r\n    <div class=\"grid-footer\">\r\n        <flex-pagination [rowCount]=\"_totalDataCount\" (pageChange)=\"onPageChanged($event)\"></flex-pagination>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [":host{display:block;height:100%}.grid-container{display:flex;flex-direction:column;height:100%}.grid-scroll{flex:1 1 auto;overflow:auto}.grid-footer{flex:0 0 auto;padding:.3rem;background:#f8f9fa;border-top:1px solid #dee2e6}.grid-container-sub{display:flex;flex-direction:column;height:100%}.grid-header{flex:0 0 auto;overflow-x:hidden;background-color:#f9f9f9;padding-right:15px;padding-left:0}.grid-body{flex:1 1 auto;overflow-y:scroll;overflow-x:auto}.grid-table{table-layout:fixed;width:100%}.grid-table th,.grid-table td{box-sizing:border-box}.selected{background-color:#dbeafe!important}:host-context([dir=\"rtl\"]) .grid-header{padding-left:15px;padding-right:0}.header-table{--bs-table-bg: #f9f9f9}.car-table{--bs-table-bg: #eefbe5}.contract-table{--bs-table-bg: #f9efe0}.table-active{--bs-table-active-bg: #87c8f7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FlexPaginationComponent, selector: "flex-pagination", inputs: ["rowCount"], outputs: ["pageChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FlexGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'flex-grid', imports: [CommonModule, FormsModule, FlexPaginationComponent], template: "<div class=\"grid-container\">\r\n    <!-- Header row in its own div -->\r\n    <div class=\"grid-scroll\">\r\n        <div class=\"grid-container-sub\">\r\n            <div class=\"grid-header\" #gridHeader>\r\n                <table class=\"grid-table table table-bordered table-sm mb-0 header-table\">\r\n                    <colgroup>\r\n                        @for (col of gridColumns?.columns; track $index) {\r\n                        <col [style.width.px]=\"col.width\" [style.maxWidth.px]=\"col.width\">\r\n                        }\r\n                    </colgroup>\r\n                    <thead>\r\n                        <tr>\r\n                            @for (col of gridColumns?.columns; track $index) {\r\n                            <th class=\"text-truncate\">\r\n                                @if (col.headerTemplate) {\r\n                                <ng-container [ngTemplateOutlet]=\"col.headerTemplate\"></ng-container>\r\n                                }\r\n                                @else {\r\n                                <!-- <ng-template #defaultHeader><span [textContent]=\"col.field\"></span></ng-template> -->\r\n                                <!-- <span [textContent]=\"col.field\"></span> -->\r\n                                {{ col.headerText() }}\r\n                                }\r\n                            </th>\r\n                            }\r\n\r\n                            <!-- <th style=\"width: 20px;\"></th> -->\r\n                        </tr>\r\n                    </thead>\r\n\r\n                </table>\r\n            </div>\r\n            <!-- Scrollable body in another div -->\r\n            <div #gridBody class=\"grid-body\" (scroll)=\"syncScroll($event)\">\r\n                @if(dataSource.length > 0){\r\n                <table class=\"grid-table table table-bordered table-sm table-hover mb-0\" [ngClass]=\"_tableClass\">\r\n\r\n                    <colgroup>\r\n                        @for (col of gridColumns?.columns; track $index) {\r\n                        <col [style.width.px]=\"col.width\" [style.maxWidth.px]=\"col.width\">\r\n                        }\r\n                    </colgroup>\r\n                    <tbody>\r\n                        @for (row of dataSource; track $index; let i = $index) {\r\n                        <tr [class.table-active]=\"$index === selectedIndex\" (click)=\"onRowClick($index, row)\"\r\n                            (dblclick)=\"onRowDblClick($index, row)\">\r\n                            @for (col of gridColumns?.columns; track $index) {\r\n                            <td>\r\n                                @if (col.cellTemplate) {\r\n                                <ng-container [ngTemplateOutlet]=\"col.cellTemplate\" [ngTemplateOutletContext]=\"{ $implicit: row,\r\n      rowIndex: (currentPage - 1) * pageSize + i,\r\n      localIndex: i }\">\r\n                                </ng-container>\r\n                                } @else {\r\n                                <!-- {{ row[col.field] }} -->\r\n                                <span [textContent]=\"row[col.field]\"></span>\r\n                                }\r\n                            </td>\r\n                            }\r\n                        </tr>\r\n                        }\r\n                    </tbody>\r\n                </table>\r\n                }\r\n                @else {\r\n                No records found\r\n                }\r\n\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    @if(isPagingEnabled){\r\n    <!-- Footer -->\r\n    <div class=\"grid-footer\">\r\n        <flex-pagination [rowCount]=\"_totalDataCount\" (pageChange)=\"onPageChanged($event)\"></flex-pagination>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [":host{display:block;height:100%}.grid-container{display:flex;flex-direction:column;height:100%}.grid-scroll{flex:1 1 auto;overflow:auto}.grid-footer{flex:0 0 auto;padding:.3rem;background:#f8f9fa;border-top:1px solid #dee2e6}.grid-container-sub{display:flex;flex-direction:column;height:100%}.grid-header{flex:0 0 auto;overflow-x:hidden;background-color:#f9f9f9;padding-right:15px;padding-left:0}.grid-body{flex:1 1 auto;overflow-y:scroll;overflow-x:auto}.grid-table{table-layout:fixed;width:100%}.grid-table th,.grid-table td{box-sizing:border-box}.selected{background-color:#dbeafe!important}:host-context([dir=\"rtl\"]) .grid-header{padding-left:15px;padding-right:0}.header-table{--bs-table-bg: #f9f9f9}.car-table{--bs-table-bg: #eefbe5}.contract-table{--bs-table-bg: #f9efe0}.table-active{--bs-table-active-bg: #87c8f7}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{
+                type: Input
+            }], gridColumns: [{
+                type: ContentChild,
+                args: [FlexColumnsComponent]
+            }], emptyRecordTemplate: [{
+                type: Input
+            }], gridHeader: [{
+                type: ViewChild,
+                args: ['gridHeader']
+            }], gridBody: [{
+                type: ViewChild,
+                args: ['gridBody']
+            }] } });
+
 /*
  * Public API Surface of flex-ui-controls
  */
-// export * from './lib/flex-ui-controls.service';
-// export * from './lib/flex-ui-controls.component';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FlexPanelComponent };
+export { FlexGridComponent, FlexPaginationComponent, FlexPanelComponent };
 //# sourceMappingURL=dcsl-flex-ui.mjs.map

package/fesm2022/dcsl-flex-ui.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dcsl-flex-ui.mjs","sources":["../../../projects/flex-ui-controls/src/lib/flex-panel/flex-panel.component.ts","../../../projects/flex-ui-controls/src/lib/flex-panel/flex-panel.component.html","../../../projects/flex-ui-controls/src/public-api.ts","../../../projects/flex-ui-controls/src/dcsl-flex-ui.ts"],"sourcesContent":["import { Component, ElementRef, HostListener, inject, Renderer2, ViewChild } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'lib-flex-panel',\r\n  imports: [],\r\n  templateUrl: './flex-panel.component.html',\r\n  styleUrl: './flex-panel.component.css'\r\n})\r\n\r\nexport class FlexPanelComponent {\r\n  private resizeObserver?: ResizeObserver;\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @ViewChild(\"abc\") comp?: ElementRef<HTMLDivElement>;\r\n\r\n  private renderer = inject(Renderer2);\r\n\r\n  constructor() { }\r\n\r\n  ngAfterViewInit() {\r\n    this.adjustHeight();\r\n\r\n    // ✅ Recalculate on window resize\r\n    if ('ResizeObserver' in window) {\r\n      this.resizeObserver = new ResizeObserver(() => this.adjustHeight());\r\n      this.resizeObserver.observe(document.body);\r\n    }\r\n\r\n    // ✅ Also observe DOM changes that may shift this element\r\n    this.mutationObserver = new MutationObserver(() => this.adjustHeight());\r\n    this.mutationObserver.observe(document.body, {\r\n      attributes: true,\r\n      childList: true,\r\n      subtree: true\r\n    });\r\n\r\n\r\n  }\r\n\r\n  @HostListener('window:resize')\r\n  onWindowResize() {\r\n    this.adjustHeight();\r\n  }\r\n\r\n  private adjustHeight() {\r\n    // const host: HTMLElement = this.el.nativeElement;\r\n    const top = this.comp!.nativeElement.getBoundingClientRect().top;\r\n    const viewportHeight = window.innerHeight;\r\n    const newHeight = viewportHeight - top;\r\n\r\n    this.renderer.setStyle(this.comp?.nativeElement, 'height', `${newHeight}px`);\r\n    this.renderer.setStyle(this.comp?.nativeElement, 'width', '100%');\r\n\r\n    // console.log(host);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    if (this.resizeObserver) {\r\n      this.resizeObserver.disconnect();\r\n    }\r\n    if (this.mutationObserver) {\r\n      this.mutationObserver.disconnect();\r\n    }\r\n  }\r\n}\r\n","<div class=\"stretch-container\" #abc>\r\n    <ng-content></ng-content>\r\n</div>","/*\r\n * Public API Surface of flex-ui-controls\r\n */\r\n\r\n// export * from './lib/flex-ui-controls.service';\r\n// export * from './lib/flex-ui-controls.component';\r\nexport * from './lib/flex-panel/flex-panel.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MASa,kBAAkB,CAAA;AACrB,IAAA,cAAc;AACd,IAAA,gBAAgB;AAEN,IAAA,IAAI;AAEd,IAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAEpC,IAAA,WAAA,GAAA,EAAgB;IAEhB,eAAe,GAAA;QACb,IAAI,CAAC,YAAY,EAAE;;AAGnB,QAAA,IAAI,gBAAgB,IAAI,MAAM,EAAE;AAC9B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;YACnE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC5C;;AAGA,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QACvE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC3C,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE;AACV,SAAA,CAAC;IAGJ;IAGA,cAAc,GAAA;QACZ,IAAI,CAAC,YAAY,EAAE;IACrB;IAEQ,YAAY,GAAA;;AAElB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG;AAChE,QAAA,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW;AACzC,QAAA,MAAM,SAAS,GAAG,cAAc,GAAG,GAAG;AAEtC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA,EAAA,CAAI,CAAC;AAC5E,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,CAAC;;IAGnE;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;QAClC;AACA,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;QACpC;IACF;uGAtDW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,qOCT/B,mFAEM,EAAA,MAAA,EAAA,CAAA,8CAAA,CAAA,EAAA,CAAA;;2FDOO,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WACjB,EAAE,EAAA,QAAA,EAAA,mFAAA,EAAA,MAAA,EAAA,CAAA,8CAAA,CAAA,EAAA;wDASO,IAAI,EAAA,CAAA;sBAArB,SAAS;uBAAC,KAAK;gBA2BhB,cAAc,EAAA,CAAA;sBADb,YAAY;uBAAC,eAAe;;;AEvC/B;;AAEG;AAEH;AACA;;ACLA;;AAEG;;;;"}
+{"version":3,"file":"dcsl-flex-ui.mjs","sources":["../../../projects/flex-ui-controls/src/lib/flex-panel/flex-panel.component.ts","../../../projects/flex-ui-controls/src/lib/flex-panel/flex-panel.component.html","../../../projects/flex-ui-controls/src/lib/flex-pagination/flex-pagination.component.ts","../../../projects/flex-ui-controls/src/lib/flex-pagination/flex-pagination.component.html","../../../projects/flex-ui-controls/src/lib/flex-grid/flex-grid-column.ts","../../../projects/flex-ui-controls/src/lib/flex-grid/flex-grid-columns.ts","../../../projects/flex-ui-controls/src/lib/flex-grid/flex-grid.component.ts","../../../projects/flex-ui-controls/src/lib/flex-grid/flex-grid.component.html","../../../projects/flex-ui-controls/src/public-api.ts","../../../projects/flex-ui-controls/src/dcsl-flex-ui.ts"],"sourcesContent":["import { Component, ElementRef, HostListener, inject, Renderer2, ViewChild } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'lib-flex-panel',\r\n  imports: [],\r\n  templateUrl: './flex-panel.component.html',\r\n  styleUrl: './flex-panel.component.css'\r\n})\r\n\r\nexport class FlexPanelComponent {\r\n  private resizeObserver?: ResizeObserver;\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @ViewChild(\"abc\") comp?: ElementRef<HTMLDivElement>;\r\n\r\n  private renderer = inject(Renderer2);\r\n\r\n  constructor() { }\r\n\r\n  ngAfterViewInit() {\r\n    this.adjustHeight();\r\n\r\n    // ✅ Recalculate on window resize\r\n    if ('ResizeObserver' in window) {\r\n      this.resizeObserver = new ResizeObserver(() => this.adjustHeight());\r\n      this.resizeObserver.observe(document.body);\r\n    }\r\n\r\n    // ✅ Also observe DOM changes that may shift this element\r\n    this.mutationObserver = new MutationObserver(() => this.adjustHeight());\r\n    this.mutationObserver.observe(document.body, {\r\n      attributes: true,\r\n      childList: true,\r\n      subtree: true\r\n    });\r\n\r\n\r\n  }\r\n\r\n  @HostListener('window:resize')\r\n  onWindowResize() {\r\n    this.adjustHeight();\r\n  }\r\n\r\n  private adjustHeight() {\r\n    // const host: HTMLElement = this.el.nativeElement;\r\n    const top = this.comp!.nativeElement.getBoundingClientRect().top;\r\n    const viewportHeight = window.innerHeight;\r\n    const newHeight = viewportHeight - top;\r\n\r\n    this.renderer.setStyle(this.comp?.nativeElement, 'height', `${newHeight}px`);\r\n    this.renderer.setStyle(this.comp?.nativeElement, 'width', '100%');\r\n\r\n    // console.log(host);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    if (this.resizeObserver) {\r\n      this.resizeObserver.disconnect();\r\n    }\r\n    if (this.mutationObserver) {\r\n      this.mutationObserver.disconnect();\r\n    }\r\n  }\r\n}\r\n","<div class=\"stretch-container\" #abc>\r\n    <ng-content></ng-content>\r\n</div>","import { CommonModule } from '@angular/common';\r\nimport { Component, Input, Output, EventEmitter, HostListener, OnInit, input, effect } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { FlexPaging } from './flex_page';\r\n\r\n@Component({\r\n  selector: 'flex-pagination',\r\n  templateUrl: './flex-pagination.component.html',\r\n  styleUrls: ['./flex-pagination.component.css'],\r\n  imports: [CommonModule, FormsModule]\r\n})\r\nexport class FlexPaginationComponent implements OnInit {\r\n  rowCount = input<number>(0);\r\n\r\n  protected _totalItems: number = 0;\r\n  pageSize = 50;\r\n  currentPage = 1;\r\n  @Output() pageChange = new EventEmitter<FlexPaging>();\r\n\r\n  maxPagesToShow = 5;\r\n  pageSizes = [50, 100, 200, 500];\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      this.currentPage = 1;\r\n      this._totalItems = this.rowCount();\r\n    });\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.updateMaxPages();\r\n  }\r\n\r\n  // Update maxPagesToShow based on screen size\r\n  @HostListener('window:resize')\r\n  updateMaxPages() {\r\n    const width = window.innerWidth;\r\n    if (width < 576) {\r\n      this.maxPagesToShow = 1; // only current page\r\n    } else if (width < 768) {\r\n      this.maxPagesToShow = 3;\r\n    } else {\r\n      this.maxPagesToShow = 5;\r\n    }\r\n  }\r\n\r\n\r\n  get totalPages(): number {\r\n    return Math.ceil(this._totalItems / this.pageSize) || 1;\r\n  }\r\n\r\n  get pages(): (number | string)[] {\r\n    const total = this.totalPages;\r\n    const max = this.maxPagesToShow;\r\n\r\n    if (max === 1) {\r\n      return [this.currentPage]; // mobile: only current page\r\n    }\r\n\r\n    const pages: (number | string)[] = [];\r\n\r\n    if (total <= max) {\r\n      for (let i = 1; i <= total; i++) pages.push(i);\r\n    } else {\r\n      let start = Math.max(this.currentPage - Math.floor(max / 2), 1);\r\n      let end = start + max - 1;\r\n\r\n      if (end > total) {\r\n        end = total;\r\n        start = end - max + 1;\r\n      }\r\n\r\n      if (start > 1) pages.push(1, '...');\r\n      for (let i = start; i <= end; i++) pages.push(i);\r\n      if (end < total) pages.push('...', total);\r\n    }\r\n\r\n    return pages;\r\n  }\r\n\r\n  changePage(page: number | string) {\r\n    if (typeof page !== 'number') return;\r\n    if (page < 1) page = 1;\r\n    if (page > this.totalPages) page = this.totalPages;\r\n    if (page === this.currentPage) return;\r\n\r\n    this.currentPage = page;\r\n    this.pageChange.emit({\r\n      skip: (this.currentPage - 1) * this.pageSize,\r\n      take: this.pageSize,\r\n      pageSize: this.pageSize,\r\n      currentPage: this.currentPage,\r\n    });\r\n  }\r\n\r\n  onPageSizeChange(pageSize: any) {\r\n    var value = Number(pageSize.target.value);\r\n    if (isNaN(value) || value <= 0) return;\r\n\r\n    this.pageSize = value;\r\n    this.pageChange.emit({\r\n      skip: (this.currentPage - 1) * this.pageSize,\r\n      take: this.pageSize,\r\n      pageSize: this.pageSize,\r\n      currentPage: this.currentPage\r\n    });\r\n  }\r\n\r\n  firstPage() { this.changePage(1); }\r\n  lastPage() { this.changePage(this.totalPages); }\r\n  prevPage() { this.changePage(this.currentPage - 1); }\r\n  nextPage() { this.changePage(this.currentPage + 1); }\r\n}\r\n","<div class=\"d-flex justify-content-start align-items-center\">\r\n    <!-- Pagination -->\r\n    <div class=\"overflow-auto\">\r\n        <ul class=\"pagination justify-content-center flex-nowrap mb-0\">\r\n            <!-- First / Prev (hide First on xs) -->\r\n            <li class=\"page-item d-none d-sm-block\" [class.disabled]=\"currentPage === 1\">\r\n                <button class=\"page-link\" (click)=\"firstPage()\"><i class=\"bi bi-chevron-double-left\"></i></button>\r\n            </li>\r\n            <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n                <button class=\"page-link\" (click)=\"prevPage()\"><i class=\"bi bi-chevron-left\"></i></button>\r\n            </li>\r\n\r\n            <!-- Page numbers -->\r\n            <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\"\r\n                [class.disabled]=\"page === '...'\">\r\n                <button class=\"page-link\" [disabled]=\"page === '...'\" (click)=\"changePage(page)\">\r\n                    {{ page }}\r\n                </button>\r\n            </li>\r\n\r\n            <!-- Next / Last (hide Last on xs) -->\r\n            <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\r\n                <button class=\"page-link\" (click)=\"nextPage()\"><i class=\"bi bi-chevron-right\"></i></button>\r\n            </li>\r\n            <li class=\"page-item d-none d-sm-block\" [class.disabled]=\"currentPage === totalPages\">\r\n                <button class=\"page-link\" (click)=\"lastPage()\"><i class=\"bi bi-chevron-double-right\"></i></button>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n\r\n    <!-- Page Size Dropdown -->\r\n    <div class=\"ms-2\">\r\n        <label class=\"me-2\">{{ \"page-size\" }}</label>\r\n        <select class=\"form-select d-inline-block w-auto\" [(ngModel)]=\"pageSize\" (change)=\"onPageSizeChange($event)\">\r\n            <option *ngFor=\"let size of pageSizes\" [value]=\"size\">{{ size }}</option>\r\n        </select>\r\n    </div>\r\n    <div class=\"total-count ms-2\">\r\n        {{ \"total-count\" }}: {{ _totalItems }}\r\n    </div>\r\n</div>","// grid-column.component.ts\r\nimport { Component, ContentChild, TemplateRef, Input, input } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'flex-grid-column',\r\n    template: ''\r\n})\r\n\r\nexport class FlexColumnComponent {\r\n    headerText = input<string>('');\r\n\r\n    @Input() field!: string;\r\n    @Input() width: any = 120;\r\n\r\n    @ContentChild('headerTemplate') headerTemplate!: TemplateRef<any>;\r\n    @ContentChild('cellTemplate') cellTemplate!: TemplateRef<any>;\r\n\r\n\r\n}\r\n","// grid-columns.component.ts\r\nimport { Component, ContentChildren, QueryList } from '@angular/core';\r\nimport { FlexColumnComponent } from './flex-grid-column';\r\n\r\n@Component({\r\n    selector: 'flex-grid-columns',\r\n    template: ''\r\n})\r\nexport class FlexColumnsComponent {\r\n    @ContentChildren(FlexColumnComponent) columns!: QueryList<FlexColumnComponent>;\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { AfterViewInit, Component, ContentChild, effect, ElementRef, Input, input, output, TemplateRef, ViewChild } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { FlexPaginationComponent } from \"../flex-pagination/flex-pagination.component\";\r\nimport { FlexColumnsComponent } from './flex-grid-columns';\r\nimport { FlexPaging } from '../flex-pagination/flex_page';\r\n\r\n@Component({\r\n  selector: 'flex-grid',\r\n  imports: [CommonModule, FormsModule, FlexPaginationComponent],\r\n  templateUrl: './flex-grid.component.html',\r\n  styleUrl: './flex-grid.component.css'\r\n})\r\n\r\nexport class FlexGridComponent implements AfterViewInit {\r\n\r\n\r\n  enablePaging = input<boolean>(false);\r\n  totalDataCount = input<number>(0);\r\n\r\n  tableClass = input<string>('');\r\n\r\n  @Input() dataSource: any[] = [];\r\n\r\n  // @ContentChildren(GridColumnComponent) columns!: QueryList<GridColumnComponent>;\r\n  @ContentChild(FlexColumnsComponent) gridColumns?: FlexColumnsComponent;\r\n\r\n  rowClicked = output<{ index: number, data: any }>();\r\n  rowDblClicked = output<{ index: number, data: any }>();\r\n\r\n  // Optional: custom template when no data\r\n  @Input() emptyRecordTemplate?: TemplateRef<any>;\r\n\r\n  isPagingEnabled: boolean = false;\r\n\r\n  @ViewChild('gridHeader') gridHeader!: ElementRef;\r\n\r\n  @ViewChild('gridBody') gridBody!: ElementRef;\r\n\r\n  selectedIndex: number = -1;\r\n  protected _totalDataCount: number = 0;\r\n  protected _tableClass: string = \"\";\r\n\r\n  pageChange = output<{ skip: number, take: number }>();\r\n  currentPage: number = 1;\r\n  pageSize: number = 50;\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      this.isPagingEnabled = this.enablePaging();\r\n    });\r\n\r\n    effect(() => {\r\n      this._totalDataCount = this.totalDataCount();\r\n    });\r\n\r\n    effect(() => {\r\n      this._tableClass = this.tableClass();\r\n    });\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.syncColumnWidths();\r\n  }\r\n\r\n  check() {\r\n    console.log(this.gridColumns);\r\n    console.log(this.dataSource);\r\n  }\r\n\r\n  syncScroll(e: Event) {\r\n    const body = e.target as HTMLElement;\r\n    const header = this.gridHeader?.nativeElement; //document.querySelector('.grid-header');\r\n    if (header) (header as HTMLElement).scrollLeft = body.scrollLeft;\r\n  }\r\n\r\n  syncColumnWidths() {\r\n    // const headerCols = this.gridHeader.nativeElement.querySelectorAll('th');\r\n    // const bodyCols = this.gridBody.nativeElement.querySelectorAll('tr:first-child td');\r\n\r\n    // bodyCols.forEach((td: HTMLElement, i: number) => {\r\n    //   const width = td.getBoundingClientRect().width;\r\n    //   (headerCols[i] as HTMLElement).style.width = width + 'px';\r\n    // });\r\n  }\r\n\r\n  // syncColumnWidths() {\r\n  //   const headerCols = document.querySelectorAll('.grid-header th');\r\n  //   const bodyCols = this.gridBody.nativeElement.querySelectorAll('tbody tr:first-child td');\r\n\r\n  //   bodyCols.forEach((col: HTMLElement, i: number) => {\r\n  //     const width = col.getBoundingClientRect().width;\r\n  //     (headerCols[i] as HTMLElement).style.width = width + 'px';\r\n  //   });\r\n  // }\r\n\r\n  onRowDblClick(index: number, data: any) {\r\n    this.selectedIndex = index;\r\n    // console.log(index);\r\n\r\n    this.rowDblClicked.emit({ index: index, data: data });\r\n  }\r\n\r\n  onRowClick(index: number, data: any) {\r\n    this.selectedIndex = index;\r\n    // console.log(index);\r\n\r\n    this.rowClicked.emit({ index: index, data: data });\r\n  }\r\n\r\n  onPageChanged(event: FlexPaging) {\r\n    console.log(event);\r\n    this.currentPage = event.currentPage;\r\n    this.pageSize = event.pageSize;\r\n\r\n    this.pageChange.emit(event);\r\n\r\n\r\n  }\r\n\r\n}\r\n","<div class=\"grid-container\">\r\n    <!-- Header row in its own div -->\r\n    <div class=\"grid-scroll\">\r\n        <div class=\"grid-container-sub\">\r\n            <div class=\"grid-header\" #gridHeader>\r\n                <table class=\"grid-table table table-bordered table-sm mb-0 header-table\">\r\n                    <colgroup>\r\n                        @for (col of gridColumns?.columns; track $index) {\r\n                        <col [style.width.px]=\"col.width\" [style.maxWidth.px]=\"col.width\">\r\n                        }\r\n                    </colgroup>\r\n                    <thead>\r\n                        <tr>\r\n                            @for (col of gridColumns?.columns; track $index) {\r\n                            <th class=\"text-truncate\">\r\n                                @if (col.headerTemplate) {\r\n                                <ng-container [ngTemplateOutlet]=\"col.headerTemplate\"></ng-container>\r\n                                }\r\n                                @else {\r\n                                <!-- <ng-template #defaultHeader><span [textContent]=\"col.field\"></span></ng-template> -->\r\n                                <!-- <span [textContent]=\"col.field\"></span> -->\r\n                                {{ col.headerText() }}\r\n                                }\r\n                            </th>\r\n                            }\r\n\r\n                            <!-- <th style=\"width: 20px;\"></th> -->\r\n                        </tr>\r\n                    </thead>\r\n\r\n                </table>\r\n            </div>\r\n            <!-- Scrollable body in another div -->\r\n            <div #gridBody class=\"grid-body\" (scroll)=\"syncScroll($event)\">\r\n                @if(dataSource.length > 0){\r\n                <table class=\"grid-table table table-bordered table-sm table-hover mb-0\" [ngClass]=\"_tableClass\">\r\n\r\n                    <colgroup>\r\n                        @for (col of gridColumns?.columns; track $index) {\r\n                        <col [style.width.px]=\"col.width\" [style.maxWidth.px]=\"col.width\">\r\n                        }\r\n                    </colgroup>\r\n                    <tbody>\r\n                        @for (row of dataSource; track $index; let i = $index) {\r\n                        <tr [class.table-active]=\"$index === selectedIndex\" (click)=\"onRowClick($index, row)\"\r\n                            (dblclick)=\"onRowDblClick($index, row)\">\r\n                            @for (col of gridColumns?.columns; track $index) {\r\n                            <td>\r\n                                @if (col.cellTemplate) {\r\n                                <ng-container [ngTemplateOutlet]=\"col.cellTemplate\" [ngTemplateOutletContext]=\"{ $implicit: row,\r\n      rowIndex: (currentPage - 1) * pageSize + i,\r\n      localIndex: i }\">\r\n                                </ng-container>\r\n                                } @else {\r\n                                <!-- {{ row[col.field] }} -->\r\n                                <span [textContent]=\"row[col.field]\"></span>\r\n                                }\r\n                            </td>\r\n                            }\r\n                        </tr>\r\n                        }\r\n                    </tbody>\r\n                </table>\r\n                }\r\n                @else {\r\n                No records found\r\n                }\r\n\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    @if(isPagingEnabled){\r\n    <!-- Footer -->\r\n    <div class=\"grid-footer\">\r\n        <flex-pagination [rowCount]=\"_totalDataCount\" (pageChange)=\"onPageChanged($event)\"></flex-pagination>\r\n    </div>\r\n    }\r\n\r\n</div>","/*\r\n * Public API Surface of flex-ui-controls\r\n */\r\n\r\nexport * from './lib/flex-panel/flex-panel.component';\r\nexport * from './lib/flex-pagination/flex-pagination.component';\r\nexport * from './lib/flex-grid/flex-grid.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MASa,kBAAkB,CAAA;AACrB,IAAA,cAAc;AACd,IAAA,gBAAgB;AAEN,IAAA,IAAI;AAEd,IAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAEpC,IAAA,WAAA,GAAA,EAAgB;IAEhB,eAAe,GAAA;QACb,IAAI,CAAC,YAAY,EAAE;;AAGnB,QAAA,IAAI,gBAAgB,IAAI,MAAM,EAAE;AAC9B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;YACnE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC5C;;AAGA,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QACvE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC3C,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE;AACV,SAAA,CAAC;IAGJ;IAGA,cAAc,GAAA;QACZ,IAAI,CAAC,YAAY,EAAE;IACrB;IAEQ,YAAY,GAAA;;AAElB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG;AAChE,QAAA,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW;AACzC,QAAA,MAAM,SAAS,GAAG,cAAc,GAAG,GAAG;AAEtC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA,EAAA,CAAI,CAAC;AAC5E,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,CAAC;;IAGnE;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;QAClC;AACA,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;QACpC;IACF;uGAtDW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,qOCT/B,mFAEM,EAAA,MAAA,EAAA,CAAA,8CAAA,CAAA,EAAA,CAAA;;2FDOO,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WACjB,EAAE,EAAA,QAAA,EAAA,mFAAA,EAAA,MAAA,EAAA,CAAA,8CAAA,CAAA,EAAA;wDASO,IAAI,EAAA,CAAA;sBAArB,SAAS;uBAAC,KAAK;gBA2BhB,cAAc,EAAA,CAAA;sBADb,YAAY;uBAAC,eAAe;;;ME5BlB,uBAAuB,CAAA;AAClC,IAAA,QAAQ,GAAG,KAAK,CAAS,CAAC,oDAAC;IAEjB,WAAW,GAAW,CAAC;IACjC,QAAQ,GAAG,EAAE;IACb,WAAW,GAAG,CAAC;AACL,IAAA,UAAU,GAAG,IAAI,YAAY,EAAc;IAErD,cAAc,GAAG,CAAC;IAClB,SAAS,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;AAE/B,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,WAAW,GAAG,CAAC;AACpB,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,EAAE;AACpC,QAAA,CAAC,CAAC;IACJ;IAEA,QAAQ,GAAA;QACN,IAAI,CAAC,cAAc,EAAE;IACvB;;IAIA,cAAc,GAAA;AACZ,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU;AAC/B,QAAA,IAAI,KAAK,GAAG,GAAG,EAAE;AACf,YAAA,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;QAC1B;AAAO,aAAA,IAAI,KAAK,GAAG,GAAG,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,CAAC;QACzB;aAAO;AACL,YAAA,IAAI,CAAC,cAAc,GAAG,CAAC;QACzB;IACF;AAGA,IAAA,IAAI,UAAU,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IACzD;AAEA,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU;AAC7B,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc;AAE/B,QAAA,IAAI,GAAG,KAAK,CAAC,EAAE;AACb,YAAA,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5B;QAEA,MAAM,KAAK,GAAwB,EAAE;AAErC,QAAA,IAAI,KAAK,IAAI,GAAG,EAAE;YAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE;AAAE,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAChD;aAAO;YACL,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/D,YAAA,IAAI,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;AAEzB,YAAA,IAAI,GAAG,GAAG,KAAK,EAAE;gBACf,GAAG,GAAG,KAAK;AACX,gBAAA,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;YACvB;YAEA,IAAI,KAAK,GAAG,CAAC;AAAE,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC;YACnC,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE;AAAE,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;YAChD,IAAI,GAAG,GAAG,KAAK;AAAE,gBAAA,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC;QAC3C;AAEA,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,UAAU,CAAC,IAAqB,EAAA;QAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ;YAAE;QAC9B,IAAI,IAAI,GAAG,CAAC;YAAE,IAAI,GAAG,CAAC;AACtB,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU;AAAE,YAAA,IAAI,GAAG,IAAI,CAAC,UAAU;AAClD,QAAA,IAAI,IAAI,KAAK,IAAI,CAAC,WAAW;YAAE;AAE/B,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,IAAI,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ;YAC5C,IAAI,EAAE,IAAI,CAAC,QAAQ;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;AAC9B,SAAA,CAAC;IACJ;AAEA,IAAA,gBAAgB,CAAC,QAAa,EAAA;QAC5B,IAAI,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;AACzC,QAAA,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;YAAE;AAEhC,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,IAAI,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ;YAC5C,IAAI,EAAE,IAAI,CAAC,QAAQ;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC;AACnB,SAAA,CAAC;IACJ;IAEA,SAAS,GAAA,EAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,QAAQ,GAAA,EAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;AAC/C,IAAA,QAAQ,GAAA,EAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;AACpD,IAAA,QAAQ,GAAA,EAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;uGApGzC,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXpC,qoEAwCM,EAAA,MAAA,EAAA,CAAA,mEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED/BM,YAAY,2JAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAExB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBANnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,OAAA,EAGlB,CAAC,YAAY,EAAE,WAAW,CAAC,EAAA,QAAA,EAAA,qoEAAA,EAAA,MAAA,EAAA,CAAA,mEAAA,CAAA,EAAA;wDAQ1B,UAAU,EAAA,CAAA;sBAAnB;gBAkBD,cAAc,EAAA,CAAA;sBADb,YAAY;uBAAC,eAAe;;;AElC/B;MAQa,mBAAmB,CAAA;AAC5B,IAAA,UAAU,GAAG,KAAK,CAAS,EAAE,sDAAC;AAErB,IAAA,KAAK;IACL,KAAK,GAAQ,GAAG;AAEO,IAAA,cAAc;AAChB,IAAA,YAAY;uGAPjC,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,8pBAHlB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAGH,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,QAAQ,EAAE;AACb,iBAAA;8BAKY,KAAK,EAAA,CAAA;sBAAb;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBAE+B,cAAc,EAAA,CAAA;sBAA7C,YAAY;uBAAC,gBAAgB;gBACA,YAAY,EAAA,CAAA;sBAAzC,YAAY;uBAAC,cAAc;;;ACfhC;MAQa,oBAAoB,CAAA;AACS,IAAA,OAAO;uGADpC,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,SAAA,EACZ,mBAAmB,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAH1B,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEH,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,QAAQ,EAAE;AACb,iBAAA;8BAEyC,OAAO,EAAA,CAAA;sBAA5C,eAAe;uBAAC,mBAAmB;;;MCK3B,iBAAiB,CAAA;AAG5B,IAAA,YAAY,GAAG,KAAK,CAAU,KAAK,wDAAC;AACpC,IAAA,cAAc,GAAG,KAAK,CAAS,CAAC,0DAAC;AAEjC,IAAA,UAAU,GAAG,KAAK,CAAS,EAAE,sDAAC;IAErB,UAAU,GAAU,EAAE;;AAGK,IAAA,WAAW;IAE/C,UAAU,GAAG,MAAM,EAAgC;IACnD,aAAa,GAAG,MAAM,EAAgC;;AAG7C,IAAA,mBAAmB;IAE5B,eAAe,GAAY,KAAK;AAEP,IAAA,UAAU;AAEZ,IAAA,QAAQ;IAE/B,aAAa,GAAW,CAAC,CAAC;IAChB,eAAe,GAAW,CAAC;IAC3B,WAAW,GAAW,EAAE;IAElC,UAAU,GAAG,MAAM,EAAkC;IACrD,WAAW,GAAW,CAAC;IACvB,QAAQ,GAAW,EAAE;AAErB,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE;AAC5C,QAAA,CAAC,CAAC;QAEF,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE;AAC9C,QAAA,CAAC,CAAC;QAEF,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACtC,QAAA,CAAC,CAAC;IACJ;IAEA,eAAe,GAAA;QACb,IAAI,CAAC,gBAAgB,EAAE;IACzB;IAEA,KAAK,GAAA;AACH,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;AAC7B,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IAC9B;AAEA,IAAA,UAAU,CAAC,CAAQ,EAAA;AACjB,QAAA,MAAM,IAAI,GAAG,CAAC,CAAC,MAAqB;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;AAC9C,QAAA,IAAI,MAAM;AAAG,YAAA,MAAsB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU;IAClE;IAEA,gBAAgB,GAAA;;;;;;;IAQhB;;;;;;;;;IAYA,aAAa,CAAC,KAAa,EAAE,IAAS,EAAA;AACpC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;AAG1B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACvD;IAEA,UAAU,CAAC,KAAa,EAAE,IAAS,EAAA;AACjC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;AAG1B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACpD;AAEA,IAAA,aAAa,CAAC,KAAiB,EAAA;AAC7B,QAAA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AAClB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW;AACpC,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ;AAE9B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;IAG7B;uGAxGW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,aAAA,EAAA,eAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAWd,oBAAoB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,YAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzBpC,qsHAiFM,m3BDxEM,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,uBAAuB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAKjD,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,CAAC,YAAY,EAAE,WAAW,EAAE,uBAAuB,CAAC,EAAA,QAAA,EAAA,qsHAAA,EAAA,MAAA,EAAA,CAAA,4zBAAA,CAAA,EAAA;wDAapD,UAAU,EAAA,CAAA;sBAAlB;gBAGmC,WAAW,EAAA,CAAA;sBAA9C,YAAY;uBAAC,oBAAoB;gBAMzB,mBAAmB,EAAA,CAAA;sBAA3B;gBAIwB,UAAU,EAAA,CAAA;sBAAlC,SAAS;uBAAC,YAAY;gBAEA,QAAQ,EAAA,CAAA;sBAA9B,SAAS;uBAAC,UAAU;;;AErCvB;;AAEG;;ACFH;;AAEG;;;;"}

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef } from '@angular/core';
+import { ElementRef, OnInit, EventEmitter, TemplateRef, QueryList, AfterViewInit } from '@angular/core';
 
 declare class FlexPanelComponent {
     private resizeObserver?;
@@ -15,4 +15,89 @@ declare class FlexPanelComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<FlexPanelComponent, "lib-flex-panel", never, {}, {}, never, ["*"], true, never>;
 }
 
-export { FlexPanelComponent };
+interface FlexPaging {
+    skip: number;
+    take: number;
+    pageSize: number;
+    currentPage: number;
+}
+
+declare class FlexPaginationComponent implements OnInit {
+    rowCount: i0.InputSignal<number>;
+    protected _totalItems: number;
+    pageSize: number;
+    currentPage: number;
+    pageChange: EventEmitter<FlexPaging>;
+    maxPagesToShow: number;
+    pageSizes: number[];
+    constructor();
+    ngOnInit(): void;
+    updateMaxPages(): void;
+    get totalPages(): number;
+    get pages(): (number | string)[];
+    changePage(page: number | string): void;
+    onPageSizeChange(pageSize: any): void;
+    firstPage(): void;
+    lastPage(): void;
+    prevPage(): void;
+    nextPage(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlexPaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlexPaginationComponent, "flex-pagination", never, { "rowCount": { "alias": "rowCount"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
+}
+
+declare class FlexColumnComponent {
+    headerText: i0.InputSignal<string>;
+    field: string;
+    width: any;
+    headerTemplate: TemplateRef<any>;
+    cellTemplate: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlexColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlexColumnComponent, "flex-grid-column", never, { "headerText": { "alias": "headerText"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, ["headerTemplate", "cellTemplate"], never, true, never>;
+}
+
+declare class FlexColumnsComponent {
+    columns: QueryList<FlexColumnComponent>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlexColumnsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlexColumnsComponent, "flex-grid-columns", never, {}, {}, ["columns"], never, true, never>;
+}
+
+declare class FlexGridComponent implements AfterViewInit {
+    enablePaging: i0.InputSignal<boolean>;
+    totalDataCount: i0.InputSignal<number>;
+    tableClass: i0.InputSignal<string>;
+    dataSource: any[];
+    gridColumns?: FlexColumnsComponent;
+    rowClicked: i0.OutputEmitterRef<{
+        index: number;
+        data: any;
+    }>;
+    rowDblClicked: i0.OutputEmitterRef<{
+        index: number;
+        data: any;
+    }>;
+    emptyRecordTemplate?: TemplateRef<any>;
+    isPagingEnabled: boolean;
+    gridHeader: ElementRef;
+    gridBody: ElementRef;
+    selectedIndex: number;
+    protected _totalDataCount: number;
+    protected _tableClass: string;
+    pageChange: i0.OutputEmitterRef<{
+        skip: number;
+        take: number;
+    }>;
+    currentPage: number;
+    pageSize: number;
+    constructor();
+    ngAfterViewInit(): void;
+    check(): void;
+    syncScroll(e: Event): void;
+    syncColumnWidths(): void;
+    onRowDblClick(index: number, data: any): void;
+    onRowClick(index: number, data: any): void;
+    onPageChanged(event: FlexPaging): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlexGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlexGridComponent, "flex-grid", never, { "enablePaging": { "alias": "enablePaging"; "required": false; "isSignal": true; }; "totalDataCount": { "alias": "totalDataCount"; "required": false; "isSignal": true; }; "tableClass": { "alias": "tableClass"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "emptyRecordTemplate": { "alias": "emptyRecordTemplate"; "required": false; }; }, { "rowClicked": "rowClicked"; "rowDblClicked": "rowDblClicked"; "pageChange": "pageChange"; }, ["gridColumns"], never, true, never>;
+}
+
+export { FlexGridComponent, FlexPaginationComponent, FlexPanelComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcsl/flex-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0"