commons-shared-web-ui 0.0.1 → 0.0.3

package/fesm2022/commons-shared-web-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { NgModule, EventEmitter, Output, Input, Component, HostListener, forwardRef, HostBinding } from '@angular/core';
+import { NgModule, EventEmitter, Output, Input, Component, HostListener, forwardRef, inject, LOCALE_ID, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, formatDate } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -44,7 +44,9 @@ import * as i1$2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators } from '@angular/forms';
 import * as i1$1 from '@angular/router';
 import * as i3 from '@angular/common/http';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';
+import { debounceTime, distinctUntilChanged, map, finalize, catchError } from 'rxjs/operators';
+import { Subject, forkJoin, of } from 'rxjs';
 
 class MaterialModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -911,11 +913,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class SummaryCardComponent {
     config;
-    theme = 'theme-1';
+    theme;
     cardClick = new EventEmitter();
-    get hostClasses() {
-        return `${this.theme} ${this.config?.isDisabled ? 'disabled' : ''} ${this.config?.isClickable !== false && !this.config?.isDisabled ? 'clickable' : ''}`;
-    }
     constructor() { }
     onCardClick() {
         if (this.config?.isDisabled || this.config?.isClickable === false) {
@@ -974,7 +973,7 @@ class SummaryCardComponent {
         return styles;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SummaryCardComponent, isStandalone: false, selector: "lib-summary-card", inputs: { config: "config", theme: "theme" }, outputs: { cardClick: "cardClick" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"cc-summary-card\" (click)=\"onCardClick()\">\r\n    <!-- Icon Section (Left Side) -->\r\n    <div class=\"icon-section\" *ngIf=\"config.icon || config.iconImage\" [ngClass]=\"config.iconClass\"\r\n        [ngStyle]=\"iconStyles\">\r\n        <mat-icon *ngIf=\"config.icon\">{{ config.icon }}</mat-icon>\r\n        <img *ngIf=\"!config.icon && config.iconImage\" [src]=\"config.iconImage\" alt=\"icon\">\r\n    </div>\r\n\r\n    <!-- Right Section (Header + Value/Meta) -->\r\n    <div class=\"right-section\">\r\n        <!-- Header (Full Width on Right) -->\r\n        <div class=\"header\" [ngClass]=\"config.headerClass\" [ngStyle]=\"headerStyles\">\r\n            {{ config.header }}\r\n        </div>\r\n\r\n        <!-- Value and Meta Row -->\r\n        <div class=\"value-meta-row\">\r\n            <!-- Content Section -->\r\n            <div class=\"content-section\">\r\n                <!-- Value Row (with optional inline description) -->\r\n                <div class=\"value-row\" [class.inline-layout]=\"isDescriptionInline\">\r\n                    <div class=\"value-container\">\r\n                        <div class=\"value\" [ngClass]=\"config.valueClass\" [ngStyle]=\"valueStyles\">\r\n                            {{ config.value }}\r\n                            <span *ngIf=\"config.valueSubtext\" class=\"value-subtext\">{{ config.valueSubtext }}</span>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Description (inline or bottom based on config) -->\r\n                    <div class=\"description\" *ngIf=\"config.description\" [ngClass]=\"config.descriptionClass\"\r\n                        [ngStyle]=\"descriptionStyles\">\r\n                        {{ config.description }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Meta/Status Section (Aligned with Value) -->\r\n            <div class=\"meta-section\" *ngIf=\"config.metaData && config.metaData.length > 0\">\r\n                <div *ngFor=\"let meta of config.metaData\" class=\"meta-item\"\r\n                    [ngClass]=\"[meta.type === 'pill' ? 'meta-pill' : 'meta-text', meta.cssClass || '']\"\r\n                    [ngStyle]=\"getMetaStyles(meta)\">\r\n                    {{ meta.text }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%}.cc-summary-card{display:flex;flex-direction:row;align-items:stretch;box-sizing:border-box;font-family:var(--cc-sc-font-family, \"Inter\", sans-serif);background-color:var(--cc-sc-bg-color, #ffffff);border-radius:var(--cc-sc-border-radius, 8px);border:var(--cc-sc-border, 1px solid #e0e0e0);padding:var(--cc-sc-padding, 16px);box-shadow:var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, .05));transition:all var(--cc-sc-transition-duration, .2s) ease;height:100%;width:100%;overflow:hidden;gap:var(--cc-sc-icon-margin, 1rem)}.cc-summary-card.clickable{cursor:pointer}.cc-summary-card.clickable:hover{transform:var(--cc-sc-hover-transform);box-shadow:var(--cc-sc-hover-shadow)}.cc-summary-card.disabled{opacity:var(--cc-sc-disabled-opacity);cursor:not-allowed;pointer-events:none}.cc-summary-card .icon-section{width:var(--cc-sc-icon-box-size);height:var(--cc-sc-icon-box-size);min-width:var(--cc-sc-icon-box-size);display:flex;align-items:center;justify-content:center;border-radius:var(--cc-sc-icon-radius);background-color:var(--cc-sc-icon-bg);color:var(--cc-sc-icon-color);flex-shrink:0;align-self:center}.cc-summary-card .icon-section mat-icon{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);font-size:var(--cc-sc-icon-size);line-height:var(--cc-sc-icon-size)}.cc-summary-card .icon-section img{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);object-fit:contain}.cc-summary-card .right-section{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--cc-sc-content-gap, .5rem)}.cc-summary-card .right-section .header{font-size:var(--cc-sc-header-size);font-weight:var(--cc-sc-header-weight);text-transform:var(--cc-sc-header-transform);color:var(--cc-sc-header-color);letter-spacing:var(--cc-sc-header-letter-spacing);line-height:var(--cc-sc-header-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.cc-summary-card .right-section .value-meta-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;flex:1}.cc-summary-card .right-section .value-meta-row .content-section{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-width:0}.cc-summary-card .right-section .value-meta-row .content-section .value-row{display:flex;flex-direction:column;gap:var(--cc-sc-value-desc-gap)}.cc-summary-card .right-section .value-meta-row .content-section .value-row.inline-layout{flex-direction:row;align-items:baseline;flex-wrap:wrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value{font-size:var(--cc-sc-value-size);font-weight:var(--cc-sc-value-weight);color:var(--cc-sc-value-color);line-height:var(--cc-sc-value-line-height);white-space:nowrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value .value-subtext{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);margin-left:4px}.cc-summary-card .right-section .value-meta-row .content-section .value-row .description{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);line-height:var(--cc-sc-desc-line-height)}.cc-summary-card .right-section .value-meta-row .meta-section{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex-shrink:0;gap:6px}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item{font-size:.8125rem;line-height:1.4;white-space:nowrap;text-align:right;flex-shrink:0}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-text{color:var(--cc-sc-desc-color, #64748b);font-weight:500}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--cc-sc-meta-pill-padding, 4px 12px);border-radius:var(--cc-sc-meta-pill-radius, 20px);font-size:var(--cc-sc-meta-pill-font-size, .75rem);font-weight:var(--cc-sc-meta-pill-font-weight, 600);line-height:1.2;background-color:var(--cc-sc-meta-pill-bg, #f1f5f9);color:var(--cc-sc-meta-pill-color, #475569)}@media(max-width:600px){.cc-summary-card .icon-section{margin-right:var(--cc-sc-icon-margin-mobile, .75rem)}.cc-summary-card .content-section .header{font-size:var(--cc-sc-header-size-mobile, .7rem)}.cc-summary-card .content-section .value-row .value{font-size:var(--cc-sc-value-size-mobile, 1.25rem)}.cc-summary-card .content-section .value-row .description{font-size:var(--cc-sc-desc-size-mobile, .7rem)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SummaryCardComponent, isStandalone: false, selector: "lib-summary-card", inputs: { config: "config", theme: "theme" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div class=\"cc-summary-card\" (click)=\"onCardClick()\">\r\n    <!-- Icon Section (Left Side) -->\r\n    <div class=\"icon-section\" *ngIf=\"config.icon || config.iconImage\" [ngClass]=\"config.iconClass\"\r\n        [ngStyle]=\"iconStyles\">\r\n        <mat-icon *ngIf=\"config.icon\">{{ config.icon }}</mat-icon>\r\n        <img *ngIf=\"!config.icon && config.iconImage\" [src]=\"config.iconImage\" alt=\"icon\">\r\n    </div>\r\n\r\n    <!-- Right Section (Header + Value/Meta) -->\r\n    <div class=\"right-section\">\r\n        <!-- Header (Full Width on Right) -->\r\n        <div class=\"header\" [ngClass]=\"config.headerClass\" [ngStyle]=\"headerStyles\">\r\n            {{ config.header }}\r\n        </div>\r\n\r\n        <!-- Value and Meta Row -->\r\n        <div class=\"value-meta-row\">\r\n            <!-- Content Section -->\r\n            <div class=\"content-section\">\r\n                <!-- Value Row (with optional inline description) -->\r\n                <div class=\"value-row\" [class.inline-layout]=\"isDescriptionInline\">\r\n                    <div class=\"value-container\">\r\n                        <div class=\"value\" [ngClass]=\"config.valueClass\" [ngStyle]=\"valueStyles\">\r\n                            {{ config.value }}\r\n                            <span *ngIf=\"config.valueSubtext\" class=\"value-subtext\">{{ config.valueSubtext }}</span>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Description (inline or bottom based on config) -->\r\n                    <div class=\"description\" *ngIf=\"config.description\" [ngClass]=\"config.descriptionClass\"\r\n                        [ngStyle]=\"descriptionStyles\">\r\n                        {{ config.description }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Meta/Status Section (Aligned with Value) -->\r\n            <div class=\"meta-section\" *ngIf=\"config.metaData && config.metaData.length > 0\">\r\n                <div *ngFor=\"let meta of config.metaData\" class=\"meta-item\"\r\n                    [ngClass]=\"[meta.type === 'pill' ? 'meta-pill' : 'meta-text', meta.cssClass || '']\"\r\n                    [ngStyle]=\"getMetaStyles(meta)\">\r\n                    {{ meta.text }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%}.cc-summary-card{display:flex;flex-direction:row;align-items:stretch;box-sizing:border-box;font-family:var(--cc-sc-font-family, \"Inter\", sans-serif);background-color:var(--cc-sc-bg-color, #ffffff);border-radius:var(--cc-sc-border-radius, 8px);border:var(--cc-sc-border, 1px solid #e0e0e0);padding:var(--cc-sc-padding, 16px);box-shadow:var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, .05));transition:all var(--cc-sc-transition-duration, .2s) ease;height:100%;width:100%;overflow:hidden;gap:var(--cc-sc-icon-margin, 1rem)}.cc-summary-card.clickable{cursor:pointer}.cc-summary-card.clickable:hover{transform:var(--cc-sc-hover-transform);box-shadow:var(--cc-sc-hover-shadow)}.cc-summary-card.disabled{opacity:var(--cc-sc-disabled-opacity);cursor:not-allowed;pointer-events:none}.cc-summary-card .icon-section{width:var(--cc-sc-icon-box-size);height:var(--cc-sc-icon-box-size);min-width:var(--cc-sc-icon-box-size);display:flex;align-items:center;justify-content:center;border-radius:var(--cc-sc-icon-radius);background-color:var(--cc-sc-icon-bg);color:var(--cc-sc-icon-color);flex-shrink:0;align-self:center}.cc-summary-card .icon-section mat-icon{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);font-size:var(--cc-sc-icon-size);line-height:var(--cc-sc-icon-size)}.cc-summary-card .icon-section img{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);object-fit:contain}.cc-summary-card .right-section{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--cc-sc-content-gap, .5rem)}.cc-summary-card .right-section .header{font-size:var(--cc-sc-header-size);font-weight:var(--cc-sc-header-weight);text-transform:var(--cc-sc-header-transform);color:var(--cc-sc-header-color);letter-spacing:var(--cc-sc-header-letter-spacing);line-height:var(--cc-sc-header-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.cc-summary-card .right-section .value-meta-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;flex:1}.cc-summary-card .right-section .value-meta-row .content-section{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-width:0}.cc-summary-card .right-section .value-meta-row .content-section .value-row{display:flex;flex-direction:column;gap:var(--cc-sc-value-desc-gap)}.cc-summary-card .right-section .value-meta-row .content-section .value-row.inline-layout{flex-direction:row;align-items:baseline;flex-wrap:wrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value{font-size:var(--cc-sc-value-size);font-weight:var(--cc-sc-value-weight);color:var(--cc-sc-value-color);line-height:var(--cc-sc-value-line-height);white-space:nowrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value .value-subtext{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);margin-left:4px}.cc-summary-card .right-section .value-meta-row .content-section .value-row .description{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);line-height:var(--cc-sc-desc-line-height)}.cc-summary-card .right-section .value-meta-row .meta-section{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex-shrink:0;gap:6px}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item{font-size:.8125rem;line-height:1.4;white-space:nowrap;text-align:right;flex-shrink:0}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-text{color:var(--cc-sc-desc-color, #64748b);font-weight:500}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--cc-sc-meta-pill-padding, 4px 12px);border-radius:var(--cc-sc-meta-pill-radius, 20px);font-size:var(--cc-sc-meta-pill-font-size, .75rem);font-weight:var(--cc-sc-meta-pill-font-weight, 600);line-height:1.2;background-color:var(--cc-sc-meta-pill-bg, #f1f5f9);color:var(--cc-sc-meta-pill-color, #475569)}@media(max-width:600px){.cc-summary-card .icon-section{margin-right:var(--cc-sc-icon-margin-mobile, .75rem)}.cc-summary-card .content-section .header{font-size:var(--cc-sc-header-size-mobile, .7rem)}.cc-summary-card .content-section .value-row .value{font-size:var(--cc-sc-value-size-mobile, 1.25rem)}.cc-summary-card .content-section .value-row .description{font-size:var(--cc-sc-desc-size-mobile, .7rem)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SummaryCardComponent, decorators: [{
             type: Component,
@@ -985,9 +984,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], cardClick: [{
                 type: Output
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
             }] } });
 
 class SummaryCardModule {
@@ -1559,12 +1555,10 @@ class ConfigurableFormModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormModule, imports: [CommonModule,
             ReactiveFormsModule,
-            HttpClientModule,
             MaterialModule,
             ConfigurableFormComponent], exports: [ConfigurableFormComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormModule, imports: [CommonModule,
             ReactiveFormsModule,
-            HttpClientModule,
             MaterialModule,
             ConfigurableFormComponent] });
 }
@@ -1575,7 +1569,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
-                        HttpClientModule,
                         MaterialModule,
                         ConfigurableFormComponent
                     ],
@@ -2039,6 +2032,508 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+class SmartTableComponent {
+    http;
+    router;
+    cdr;
+    ngZone;
+    config;
+    action = new EventEmitter();
+    topAction = new EventEmitter(); // For top bar buttons
+    filterChange = new EventEmitter();
+    rowSelect = new EventEmitter();
+    data = [];
+    totalItems = 0;
+    currentPage = 1;
+    loading = false;
+    // State
+    activeSort = { key: '', direction: 'ASC' };
+    activeFilters = {};
+    searchTerm = '';
+    selectedRows = [];
+    stickyColumnStyles = {};
+    hasStickyColumns = false;
+    searchSubject = new Subject();
+    stickyHeaders;
+    resizeObserver = null;
+    locale = inject(LOCALE_ID);
+    constructor(http, router, cdr, ngZone) {
+        this.http = http;
+        this.router = router;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        // Debounce search input
+        this.searchSubject.pipe(debounceTime(this.config?.searchConfig?.debounceTime || 300), distinctUntilChanged()).subscribe(term => {
+            this.searchTerm = term;
+            this.currentPage = 1;
+            this.loadData();
+        });
+    }
+    ngOnInit() {
+        if (this.config) {
+            if (this.config.sortBy) {
+                this.activeSort.key = this.config.sortBy;
+            }
+            if (this.config.orderBy) {
+                this.activeSort.direction = this.config.orderBy;
+            }
+            this.loadFilterOptions();
+            this.loadData();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && !changes['config'].firstChange) {
+            this.loadFilterOptions();
+            this.loadData();
+            setTimeout(() => this.calculateStickyPositions());
+        }
+    }
+    ngAfterViewInit() {
+        this.setupResizeObserver();
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    setupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.ngZone.run(() => {
+                this.calculateStickyPositions();
+            });
+        });
+        if (this.stickyHeaders) {
+            this.stickyHeaders.changes.subscribe(() => {
+                this.observeHeaders();
+                // Also recalculate immediately
+                setTimeout(() => this.calculateStickyPositions());
+            });
+            this.observeHeaders();
+        }
+    }
+    observeHeaders() {
+        if (!this.resizeObserver || !this.stickyHeaders)
+            return;
+        this.stickyHeaders.forEach(header => {
+            this.resizeObserver.observe(header.nativeElement);
+        });
+    }
+    loadData() {
+        if (!this.config?.apiUrl)
+            return;
+        this.loading = true;
+        let params;
+        // --- Query Params Construction ---
+        if (this.config.queryParamsConfig) {
+            const qpConfig = this.config.queryParamsConfig;
+            const pageKey = qpConfig.pageKey || 'page';
+            const sizeKey = qpConfig.sizeKey || 'pageSize';
+            const pageIndex = this.currentPage + (qpConfig.pageIndexOffset || 0);
+            let paramsObj = {
+                [pageKey]: pageIndex.toString(),
+                [sizeKey]: (this.config.pagination?.pageSize || 10).toString()
+            };
+            if (this.activeSort.key)
+                paramsObj['sortBy'] = this.activeSort.key;
+            // Note: Some APIs might use different keys for sort/order, can be extended later if needed
+            if (this.activeSort.direction)
+                paramsObj['orderBy'] = this.activeSort.direction;
+            // Search Handling
+            if (this.searchTerm) {
+                const searchConfig = this.config.searchConfig;
+                const searchKey = searchConfig?.searchKey || 'search';
+                if (searchConfig?.handling === 'nested_string' && qpConfig.nestedStringConfig) {
+                    // Will be handled in nested string construction below
+                }
+                else {
+                    paramsObj[searchKey] = this.searchTerm;
+                }
+            }
+            // Filter Handling (and Search if nested)
+            if (qpConfig.filterHandling === 'nested_string' && qpConfig.nestedStringConfig) {
+                const { paramName, baseValue, separator, assignment } = qpConfig.nestedStringConfig;
+                let nestedString = baseValue || '';
+                const assign = assignment || '=';
+                // Add Filters
+                Object.keys(this.activeFilters).forEach(key => {
+                    if (this.activeFilters[key]) {
+                        const prefix = nestedString ? separator : '';
+                        nestedString += `${prefix}${key}${assign}${this.activeFilters[key]}`;
+                    }
+                });
+                // Add Search if nested
+                if (this.searchTerm && this.config.searchConfig?.handling === 'nested_string') {
+                    const searchKey = this.config.searchConfig.searchKey || 'SEARCH_TERM';
+                    const prefix = nestedString ? separator : '';
+                    nestedString += `${prefix}${searchKey}${assign}${this.searchTerm}`;
+                }
+                paramsObj[paramName] = nestedString;
+            }
+            else {
+                // Standard handling
+                Object.keys(this.activeFilters).forEach(key => {
+                    if (this.activeFilters[key])
+                        paramsObj[key] = this.activeFilters[key];
+                });
+            }
+            params = new HttpParams({ fromObject: paramsObj });
+        }
+        else {
+            // --- Default Behavior (Backward Compatibility) ---
+            let paramsObj = {};
+            if (this.config.pagination?.enabled) {
+                paramsObj['page'] = this.currentPage;
+                paramsObj['pageSize'] = this.config.pagination.pageSize;
+            }
+            if (this.activeSort.key) {
+                paramsObj['sortBy'] = this.activeSort.key;
+                paramsObj['orderBy'] = this.activeSort.direction;
+            }
+            if (this.searchTerm) {
+                const searchKey = this.config.searchConfig?.searchKey || 'search';
+                paramsObj[searchKey] = this.searchTerm;
+            }
+            Object.keys(this.activeFilters).forEach(key => {
+                if (this.activeFilters[key]) {
+                    paramsObj[key] = this.activeFilters[key];
+                }
+            });
+            // Custom Request Params Mapper (if provided)
+            if (this.config.requestParams) {
+                const customParams = this.config.requestParams(this.currentPage, this.config.pagination?.pageSize || 10, this.activeSort.key, this.activeSort.direction, this.searchTerm, this.activeFilters);
+                if (customParams instanceof HttpParams) {
+                    // If function returns HttpParams, use it directly (caveat: might lose previous params if not careful in mapper)
+                    params = customParams;
+                }
+                else {
+                    paramsObj = { ...paramsObj, ...customParams };
+                    params = new HttpParams({ fromObject: paramsObj });
+                }
+            }
+            else {
+                params = new HttpParams({ fromObject: paramsObj });
+            }
+        }
+        // --- Data Fetching ---
+        // Check for separate count API
+        const totalCountConfig = this.config.pagination?.totalCountConfig;
+        let request$; // Observable
+        if (totalCountConfig?.source === 'separate' && totalCountConfig.apiUrl) {
+            request$ = forkJoin({
+                data: this.http.get(this.config.apiUrl, { params }),
+                count: this.http.get(totalCountConfig.apiUrl, { params })
+            }).pipe(map(({ data, count }) => {
+                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
+                return {
+                    data: this.getValueByPath(data, dataPath),
+                    total: this.getValueByPath(count, totalCountConfig.responsePath || '')
+                };
+            }));
+        }
+        else {
+            request$ = this.http.get(this.config.apiUrl, { params }).pipe(map(response => {
+                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
+                const totalPath = totalCountConfig?.responsePath || '';
+                return {
+                    data: this.getValueByPath(response, dataPath),
+                    // If source is 'same', try to get total from response, else default 0
+                    total: totalCountConfig ? this.getValueByPath(response, totalPath) : 0
+                };
+            }));
+        }
+        request$.pipe(finalize(() => this.loading = false), catchError(err => {
+            console.error('Table Data Fetch Error', err);
+            return of({ data: [], total: 0 });
+        }))
+            .subscribe((result) => {
+            this.data = result.data || [];
+            if (this.config.pagination) {
+                this.totalItems = result.total || 0;
+            }
+            // Dynamic Column Generation
+            if (!this.config.columns || this.config.columns.length === 0) {
+                if (this.data.length > 0) {
+                    this.config.columns = Object.keys(this.data[0]).map(key => ({
+                        key: key,
+                        label: this.toTitleCase(key),
+                        type: 'text',
+                        sortable: false,
+                        editable: false
+                    }));
+                }
+            }
+        });
+    }
+    // --- Actions ---
+    onPageChange(page) {
+        this.currentPage = page;
+        this.loadData();
+    }
+    onPageSizeChange(size) {
+        if (this.config.pagination) {
+            this.config.pagination.pageSize = size;
+            this.currentPage = 1; // Reset to first page
+            this.loadData();
+        }
+    }
+    onSort(col) {
+        if (!col.sortable)
+            return;
+        if (this.activeSort.key === col.key) {
+            this.activeSort.direction = this.activeSort.direction === 'ASC' ? 'DESC' : 'ASC';
+        }
+        else {
+            this.activeSort.key = col.key;
+            this.activeSort.direction = 'ASC';
+        }
+        this.loadData();
+    }
+    onSearch(event) {
+        const value = event.target.value;
+        this.searchSubject.next(value);
+    }
+    onFilterChange(key, event) {
+        const value = event.target.value;
+        this.activeFilters[key] = value;
+        this.currentPage = 1;
+        this.filterChange.emit({ key, value });
+        this.loadData();
+    }
+    onAction(action, row) {
+        if (action.type === 'callback' && action.callback) {
+            action.callback(row);
+        }
+        if (action.type === 'route' && action.route) {
+            const url = this.replaceParams(action.route, row);
+            this.router.navigateByUrl(url);
+            return;
+        }
+        if (action.type === 'api') {
+            if (action.confirmationNeeded) {
+                const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
+                if (!confirm(message))
+                    return;
+            }
+            this.action.emit({ action, row });
+        }
+        else {
+            this.action.emit({ action, row });
+        }
+    }
+    onTopAction(action) {
+        if (action.type === 'callback' && action.callback) {
+            action.callback(null); // No row for top action
+        }
+        this.topAction.emit(action);
+    }
+    // --- Selection ---
+    onSelectAll(event) {
+        const checked = event.target.checked;
+        this.data.forEach(row => row.selected = checked);
+        this.updateSelectedRows();
+    }
+    onRowSelect(row) {
+        this.updateSelectedRows();
+    }
+    updateSelectedRows() {
+        this.selectedRows = this.data.filter(row => row.selected);
+        this.rowSelect.emit(this.selectedRows);
+    }
+    // --- Helpers ---
+    getCellValue(row, col) {
+        // Support nested properties via labelPath or key
+        const path = col.labelPath || col.key;
+        let val = this.getValueByPath(row, path);
+        // Formatting (Date, etc.)
+        if (col.type === 'date' && val) {
+            if (col.dateFormat) {
+                try {
+                    return formatDate(val, col.dateFormat, this.locale);
+                }
+                catch (e) {
+                    console.warn('Invalid date format or value', val, col.dateFormat);
+                    return val;
+                }
+            }
+            return new Date(val).toLocaleDateString();
+        }
+        return val;
+    }
+    getBadgeClass(row, col) {
+        const val = this.getCellValue(row, col);
+        const strVal = String(val);
+        // Config approach
+        if (col.badgeConfig && col.badgeConfig[strVal]) {
+            return `badge-${col.badgeConfig[strVal]}`;
+        }
+        // Default Logic
+        const status = strVal.toLowerCase();
+        if (['active', 'completed', 'success', 'approved'].includes(status))
+            return 'badge-success';
+        if (['pending', 'in progress', 'waiting'].includes(status))
+            return 'badge-warning';
+        if (['rejected', 'failed', 'error', 'deleted'].includes(status))
+            return 'badge-danger';
+        if (['draft', 'inactive'].includes(status))
+            return 'badge-neutral';
+        return 'badge-info'; // default
+    }
+    getSortIcon(key) {
+        if (this.activeSort.key !== key)
+            return 'fa-sort';
+        return this.activeSort.direction === 'ASC' ? 'fa-sort-up' : 'fa-sort-down';
+    }
+    replaceParams(template, row) {
+        return template.replace(/:([a-zA-Z0-9_]+)/g, (_, key) => row[key] || '');
+    }
+    loadFilterOptions() {
+        if (!this.config.filters)
+            return;
+        this.config.filters.forEach(filter => {
+            if (filter.apiUrl && !filter.options) {
+                this.http.get(filter.apiUrl).subscribe({
+                    next: (response) => {
+                        const data = filter.dataPath ? this.getValueByPath(response, filter.dataPath) : response;
+                        if (!Array.isArray(data)) {
+                            console.error(`Filter data for ${filter.key} is not an array`, data);
+                            return;
+                        }
+                        filter.options = data.map((item) => {
+                            const label = filter.labelPath ? this.getValueByPath(item, filter.labelPath) :
+                                (filter.labelKey ? item[filter.labelKey] : item.label || item.name);
+                            const value = filter.valuePath ? this.getValueByPath(item, filter.valuePath) :
+                                (filter.valueKey ? item[filter.valueKey] : item.value || item.code);
+                            return { label, value };
+                        });
+                        // Auto-populate matching column options
+                        if (this.config.columns) {
+                            const matchingColumn = this.config.columns.find(col => col.key === filter.key);
+                            if (matchingColumn && matchingColumn.dataType === 'select' && !matchingColumn.options) {
+                                matchingColumn.options = filter.options;
+                            }
+                        }
+                    },
+                    error: (err) => console.error(`Failed to load filter options for ${filter.key}:`, err)
+                });
+            }
+        });
+    }
+    getValueByPath(obj, path) {
+        if (!path || path === '')
+            return obj;
+        return path.split('.').reduce((acc, part) => {
+            const match = part.match(/(\w+)\[(\d+)\]/);
+            if (match) {
+                return acc?.[match[1]]?.[parseInt(match[2])];
+            }
+            return acc?.[part];
+        }, obj);
+    }
+    calculateStickyPositions() {
+        // We calculate positions based on rendered widths
+        if (!this.stickyHeaders || this.stickyHeaders.length === 0)
+            return;
+        this.stickyColumnStyles = {};
+        let leftOffset = 0;
+        this.hasStickyColumns = false;
+        // Default sticky columns count is 3 if not specified
+        const stickyCount = this.config.stickyColumnCount !== undefined ? this.config.stickyColumnCount : 3;
+        // Checkbox width handling
+        if (this.config.selectable) {
+            const firstSticky = this.config.columns.find((c, i) => i < stickyCount || c.sticky);
+            if (firstSticky) {
+                // We can try to measure checkbox col if needed, but usually fixed 40px
+                // Or better, if we have a checkbox col ref, assume 40px for now as it is fixed in CSS
+                leftOffset = 40;
+            }
+        }
+        const headerElements = this.stickyHeaders.toArray();
+        this.config.columns.forEach((col, index) => {
+            if (col.sticky || index < stickyCount) {
+                col.sticky = true;
+                this.hasStickyColumns = false; // Reset to true only after we set styles? No, wait. 
+                // Actually property is used in template to add class 'sticky-col'
+                // but we need to update Styles based on previous cols widths
+                // Find corresponding header element
+                // Note: headerElements corresponds to columns indices
+                const headerEl = headerElements[index]?.nativeElement;
+                if (headerEl) {
+                    // Set style for current column
+                    this.stickyColumnStyles[col.key] = {
+                        left: `${leftOffset}px`
+                        // We DO NOT set width here, allowing it to be dynamic/auto
+                    };
+                    // Add THIS column's width to offset for the NEXT column
+                    // use getBoundingClientRect or offsetWidth
+                    leftOffset += headerEl.offsetWidth;
+                }
+                this.hasStickyColumns = true;
+            }
+        });
+        this.cdr.detectChanges();
+    }
+    toTitleCase(str) {
+        return str
+            .replace(/([A-Z])/g, ' $1') // insert space before capital letters
+            .replace(/^./, (str) => str.toUpperCase()) // capitalize the first letter
+            .trim(); // remove any leading/trailing whitespace
+    }
+    get columnCount() {
+        return this.config.columns.length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableComponent, deps: [{ token: i3.HttpClient }, { token: i1$1.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartTableComponent, isStandalone: false, selector: "lib-smart-table", inputs: { config: "config" }, outputs: { action: "action", topAction: "topAction", filterChange: "filterChange", rowSelect: "rowSelect" }, viewQueries: [{ propertyName: "stickyHeaders", predicate: ["stickyHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" [class.sticky-col]=\"col.sticky\" [ngStyle]=\"stickyColumnStyles[col.key]\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions\">\n                     <lib-button \n                        [variant]=\"action.btnVariant || 'secondary'\"\n                        [icon]=\"action.icon || ''\"\n                        (click)=\"onAction(action, row)\">\n                        {{ action.label }}\n                    </lib-button>\n                </ng-container>\n            </div>\n            <!-- Alternatively use specific icons if needed, but button component is requested -->\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n</div>\n", styles: [".smart-table-wrapper{font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:auto;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.no-data{text-align:center;padding:2rem;color:var(--st-no-data-color, #888)}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "pageSizeOptions", "theme", "labels"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-smart-table', standalone: false, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" [class.sticky-col]=\"col.sticky\" [ngStyle]=\"stickyColumnStyles[col.key]\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions\">\n                     <lib-button \n                        [variant]=\"action.btnVariant || 'secondary'\"\n                        [icon]=\"action.icon || ''\"\n                        (click)=\"onAction(action, row)\">\n                        {{ action.label }}\n                    </lib-button>\n                </ng-container>\n            </div>\n            <!-- Alternatively use specific icons if needed, but button component is requested -->\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n</div>\n", styles: [".smart-table-wrapper{font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:auto;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.no-data{text-align:center;padding:2rem;color:var(--st-no-data-color, #888)}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: i3.HttpClient }, { type: i1$1.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { config: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], topAction: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], rowSelect: [{
+                type: Output
+            }], stickyHeaders: [{
+                type: ViewChildren,
+                args: ['stickyHeader']
+            }] } });
+
+class SmartTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, declarations: [SmartTableComponent], imports: [CommonModule,
+            FormsModule,
+            PaginationModule,
+            ButtonModule], exports: [SmartTableComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, imports: [CommonModule,
+            FormsModule,
+            PaginationModule,
+            ButtonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SmartTableComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        PaginationModule,
+                        ButtonModule
+                    ],
+                    exports: [
+                        SmartTableComponent
+                    ]
+                }]
+        }] });
+
 /*
  * Public API Surface of shared-ui
  */
@@ -2047,5 +2542,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CardType1Component, CardType2Component, CardsModule, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, FilterSidebarComponent, FilterSidebarModule, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, SharedUiModule, SummaryCardComponent, SummaryCardModule, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem };
+export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CardType1Component, CardType2Component, CardsModule, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, FilterSidebarComponent, FilterSidebarModule, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, SharedUiModule, SmartTableComponent, SmartTableModule, SummaryCardComponent, SummaryCardModule, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem };
 //# sourceMappingURL=commons-shared-web-ui.mjs.map