commons-shared-web-ui 0.0.3 → 0.0.4

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { NgModule, EventEmitter, Output, Input, Component, HostListener, forwardRef, inject, LOCALE_ID, ViewChildren } from '@angular/core';
+import { NgModule, Input, Component, EventEmitter, HostListener, Output, forwardRef, Injectable, inject, LOCALE_ID, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
@@ -45,8 +45,8 @@ import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators } from
 import * as i1$1 from '@angular/router';
 import * as i3 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';
+import { BehaviorSubject, Subject, combineLatest, forkJoin, of } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged, map, finalize, catchError } from 'rxjs/operators';
 
 class MaterialModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -227,81 +227,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
-class CardType1Component {
-    config;
-    theme = 'theme-1';
-    cardClick = new EventEmitter();
-    get valueStyle() {
-        return this.config.valueColor ? { color: this.config.valueColor } : {};
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardType1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CardType1Component, isStandalone: false, selector: "lib-card-type-1", inputs: { config: "config", theme: "theme" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div [class]=\"'cc-card ' + theme\" [style.width]=\"config.width || '100%'\" [style.height]=\"config.height || '100%'\" (click)=\"cardClick.emit()\">\n  <div class=\"card-content\">\n    <div class=\"card-label\">{{ config.label }}</div>\n    <div class=\"card-value\" [ngStyle]=\"valueStyle\">{{ config.value }}</div>\n    <div\n      *ngIf=\"config.subtext\"\n      class=\"card-subtext\"\n      [ngClass]=\"config.subtextClass\"\n    >\n      {{ config.subtext }}\n    </div>\n  </div>\n</div>\n", styles: [".cc-card{display:flex;flex-direction:column;justify-content:center;max-width:100%;box-sizing:border-box;overflow:hidden}.card-label{font-family:var(--cc-font-family);font-size:var(--cc-text-size-label);color:var(--cc-text-color-secondary);text-transform:uppercase;font-weight:var(--cc-text-weight-medium);margin-bottom:8px}.card-value{font-family:var(--cc-font-family);font-size:var(--cc-text-size-value);color:var(--cc-text-color-primary);font-weight:var(--cc-text-weight-bold);margin-bottom:4px}.card-subtext{font-family:var(--cc-font-family);font-size:12px;color:var(--cc-text-color-secondary)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardType1Component, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-card-type-1', standalone: false, template: "<div [class]=\"'cc-card ' + theme\" [style.width]=\"config.width || '100%'\" [style.height]=\"config.height || '100%'\" (click)=\"cardClick.emit()\">\n  <div class=\"card-content\">\n    <div class=\"card-label\">{{ config.label }}</div>\n    <div class=\"card-value\" [ngStyle]=\"valueStyle\">{{ config.value }}</div>\n    <div\n      *ngIf=\"config.subtext\"\n      class=\"card-subtext\"\n      [ngClass]=\"config.subtextClass\"\n    >\n      {{ config.subtext }}\n    </div>\n  </div>\n</div>\n", styles: [".cc-card{display:flex;flex-direction:column;justify-content:center;max-width:100%;box-sizing:border-box;overflow:hidden}.card-label{font-family:var(--cc-font-family);font-size:var(--cc-text-size-label);color:var(--cc-text-color-secondary);text-transform:uppercase;font-weight:var(--cc-text-weight-medium);margin-bottom:8px}.card-value{font-family:var(--cc-font-family);font-size:var(--cc-text-size-value);color:var(--cc-text-color-primary);font-weight:var(--cc-text-weight-bold);margin-bottom:4px}.card-subtext{font-family:var(--cc-font-family);font-size:12px;color:var(--cc-text-color-secondary)}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], cardClick: [{
-                type: Output
-            }] } });
-
-class CardType2Component {
-    config;
-    theme = 'theme-1';
-    cardClick = new EventEmitter();
-    get iconBoxStyle() {
-        if (this.config.iconUrl) {
-            return { backgroundColor: 'transparent' };
-        }
-        return this.config.iconBackgroundColor ? { backgroundColor: this.config.iconBackgroundColor } : {};
-    }
-    get iconStyle() {
-        return this.config.iconColor ? { color: this.config.iconColor } : {};
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardType2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CardType2Component, isStandalone: false, selector: "lib-card-type-2", inputs: { config: "config", theme: "theme" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div [class]=\"'cc-card ' + theme\" [style.width]=\"config.width || '100%'\" [style.height]=\"config.height || '100%'\" (click)=\"cardClick.emit()\">\n  <div class=\"card-content-wrapper\">\n    <div class=\"icon-box\" [ngStyle]=\"iconBoxStyle\">\n      <img *ngIf=\"config.iconUrl; else matIconTpl\" [src]=\"config.iconUrl\" class=\"icon-image\" alt=\"icon\">\n      <ng-template #matIconTpl>\n        <mat-icon [ngStyle]=\"iconStyle\">{{ config.iconName }}</mat-icon>\n      </ng-template>\n    </div>\n    <div class=\"text-content\">\n      <div class=\"card-label\">{{ config.label }}</div>\n      <div class=\"value-wrapper\">\n         <span class=\"card-value\">{{ config.value }}</span>\n         <span *ngIf=\"config.targetText\" class=\"card-target\">{{ config.targetText }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".cc-card{display:flex;flex-direction:column;justify-content:center;max-width:100%;box-sizing:border-box;overflow:hidden}.card-content-wrapper{display:flex;align-items:center;gap:16px}.icon-box{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;background-color:#fce8e6;color:#d32f2f}.icon-box mat-icon{font-size:24px;width:24px;height:24px}.icon-box .icon-image{object-fit:contain;border-radius:.5rem}.text-content{display:flex;flex-direction:column}.card-label{font-family:var(--cc-font-family);font-size:var(--cc-text-size-label);color:var(--cc-text-color-secondary);text-transform:uppercase;font-weight:var(--cc-text-weight-medium);margin-bottom:4px}.value-wrapper{display:flex;align-items:baseline;gap:8px}.card-value{font-family:var(--cc-font-family);font-size:var(--cc-text-size-value);color:var(--cc-text-color-primary);font-weight:var(--cc-text-weight-bold)}.card-target{font-family:var(--cc-font-family);font-size:12px;color:var(--cc-text-color-secondary)}\n"], dependencies: [{ 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: CardType2Component, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-card-type-2', standalone: false, template: "<div [class]=\"'cc-card ' + theme\" [style.width]=\"config.width || '100%'\" [style.height]=\"config.height || '100%'\" (click)=\"cardClick.emit()\">\n  <div class=\"card-content-wrapper\">\n    <div class=\"icon-box\" [ngStyle]=\"iconBoxStyle\">\n      <img *ngIf=\"config.iconUrl; else matIconTpl\" [src]=\"config.iconUrl\" class=\"icon-image\" alt=\"icon\">\n      <ng-template #matIconTpl>\n        <mat-icon [ngStyle]=\"iconStyle\">{{ config.iconName }}</mat-icon>\n      </ng-template>\n    </div>\n    <div class=\"text-content\">\n      <div class=\"card-label\">{{ config.label }}</div>\n      <div class=\"value-wrapper\">\n         <span class=\"card-value\">{{ config.value }}</span>\n         <span *ngIf=\"config.targetText\" class=\"card-target\">{{ config.targetText }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".cc-card{display:flex;flex-direction:column;justify-content:center;max-width:100%;box-sizing:border-box;overflow:hidden}.card-content-wrapper{display:flex;align-items:center;gap:16px}.icon-box{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;background-color:#fce8e6;color:#d32f2f}.icon-box mat-icon{font-size:24px;width:24px;height:24px}.icon-box .icon-image{object-fit:contain;border-radius:.5rem}.text-content{display:flex;flex-direction:column}.card-label{font-family:var(--cc-font-family);font-size:var(--cc-text-size-label);color:var(--cc-text-color-secondary);text-transform:uppercase;font-weight:var(--cc-text-weight-medium);margin-bottom:4px}.value-wrapper{display:flex;align-items:baseline;gap:8px}.card-value{font-family:var(--cc-font-family);font-size:var(--cc-text-size-value);color:var(--cc-text-color-primary);font-weight:var(--cc-text-weight-bold)}.card-target{font-family:var(--cc-font-family);font-size:12px;color:var(--cc-text-color-secondary)}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], cardClick: [{
-                type: Output
-            }] } });
-
-class CardsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CardsModule, declarations: [CardType1Component,
-            CardType2Component], imports: [CommonModule,
-            MaterialModule], exports: [CardType1Component,
-            CardType2Component] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardsModule, imports: [CommonModule,
-            MaterialModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        CardType1Component,
-                        CardType2Component
-                    ],
-                    imports: [
-                        CommonModule,
-                        MaterialModule
-                    ],
-                    exports: [
-                        CardType1Component,
-                        CardType2Component
-                    ]
-                }]
-        }] });
-
 class AlertComponent {
     variant = 'info';
     title = '';
@@ -1578,24 +1503,798 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+class SmartFormController {
+    formData = {};
+    fieldSubjects = new Map();
+    initialize(initialData) {
+        this.formData = { ...initialData };
+        this.fieldSubjects.forEach((subject, key) => {
+            subject.next(this.formData[key]);
+        });
+    }
+    updateField(name, value) {
+        this.formData[name] = value;
+        if (!this.fieldSubjects.has(name)) {
+            this.fieldSubjects.set(name, new BehaviorSubject(value));
+        }
+        else {
+            this.fieldSubjects.get(name).next(value);
+        }
+    }
+    getFieldValue(name) {
+        return this.formData[name];
+    }
+    getFieldObservable(name) {
+        if (!this.fieldSubjects.has(name)) {
+            this.fieldSubjects.set(name, new BehaviorSubject(this.formData[name]));
+        }
+        return this.fieldSubjects.get(name).asObservable();
+    }
+    getAllData() {
+        return { ...this.formData };
+    }
+    reset() {
+        this.formData = {};
+        this.fieldSubjects.forEach(subject => subject.next(undefined));
+    }
+    destroy() {
+        this.fieldSubjects.forEach(subject => subject.complete());
+        this.fieldSubjects.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormController });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormController, decorators: [{
+            type: Injectable
+        }] });
+
+class ExpressionService {
+    loadedFunctions = new Map();
+    evaluate(expression, context, variables) {
+        try {
+            const filteredContext = variables
+                ? Object.fromEntries(Object.entries(context).filter(([key]) => variables.includes(key)))
+                : context;
+            const func = new Function(...Object.keys(filteredContext), `return ${expression};`);
+            return func(...Object.values(filteredContext));
+        }
+        catch (e) {
+            console.error('Expression evaluation error:', e);
+            return null;
+        }
+    }
+    evaluateCondition(expression, context) {
+        try {
+            const func = new Function(...Object.keys(context), `return ${expression};`);
+            const result = func(...Object.values(context));
+            return !!result;
+        }
+        catch (e) {
+            console.error('Condition evaluation error:', e);
+            return false;
+        }
+    }
+    evaluateFormula(formula, functionName, context, variables) {
+        try {
+            if (!this.loadedFunctions.has(functionName)) {
+                const func = new Function('context', `
+          ${formula}
+          return ${functionName};
+        `)(context);
+                this.loadedFunctions.set(functionName, func);
+            }
+            const fn = this.loadedFunctions.get(functionName);
+            if (!fn)
+                return null;
+            const args = variables ? variables.map(v => context[v]) : [];
+            return fn(...args);
+        }
+        catch (e) {
+            console.error('Formula evaluation error:', e);
+            return null;
+        }
+    }
+    extractVariables(expression) {
+        const regex = /\b[a-zA-Z_]\w*\b/g;
+        const matches = expression.match(regex) || [];
+        const keywords = ['true', 'false', 'null', 'undefined', 'return', 'if', 'else', 'for', 'while', 'function', 'var', 'let', 'const'];
+        return [...new Set(matches.filter(m => !keywords.includes(m)))];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ExpressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ExpressionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ExpressionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ValidationUtils {
+    static email() {
+        return (control) => {
+            if (!control.value)
+                return null;
+            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+            return emailRegex.test(control.value) ? null : { email: true };
+        };
+    }
+    static phone() {
+        return (control) => {
+            if (!control.value)
+                return null;
+            const phoneRegex = /^\+?[\d\s\-\(\)]{10,}$/;
+            return phoneRegex.test(control.value) ? null : { phone: true };
+        };
+    }
+    static url() {
+        return (control) => {
+            if (!control.value)
+                return null;
+            const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
+            return urlRegex.test(control.value) ? null : { url: true };
+        };
+    }
+    static minLength(min) {
+        return (control) => {
+            if (!control.value)
+                return null;
+            return control.value.length >= min ? null : { minLength: { min, actual: control.value.length } };
+        };
+    }
+    static maxLength(max) {
+        return (control) => {
+            if (!control.value)
+                return null;
+            return control.value.length <= max ? null : { maxLength: { max, actual: control.value.length } };
+        };
+    }
+    static pattern(pattern, message) {
+        return (control) => {
+            if (!control.value)
+                return null;
+            const regex = new RegExp(pattern);
+            return regex.test(control.value) ? null : { pattern: { message: message || 'Invalid format' } };
+        };
+    }
+    static numberRange(min, max) {
+        return (control) => {
+            if (!control.value && control.value !== 0)
+                return null;
+            const value = Number(control.value);
+            if (min !== undefined && value < min) {
+                return { min: { min, actual: value } };
+            }
+            if (max !== undefined && value > max) {
+                return { max: { max, actual: value } };
+            }
+            return null;
+        };
+    }
+    static dateRange(minDate, maxDate) {
+        return (control) => {
+            if (!control.value)
+                return null;
+            const date = new Date(control.value);
+            if (minDate && date < new Date(minDate)) {
+                return { minDate: { minDate } };
+            }
+            if (maxDate && date > new Date(maxDate)) {
+                return { maxDate: { maxDate } };
+            }
+            return null;
+        };
+    }
+    static getErrorMessage(errors) {
+        if (!errors)
+            return '';
+        if (errors['required'])
+            return 'This field is required';
+        if (errors['email'])
+            return 'Please enter a valid email address';
+        if (errors['phone'])
+            return 'Please enter a valid phone number';
+        if (errors['url'])
+            return 'Please enter a valid URL';
+        if (errors['minLength'])
+            return `Minimum length is ${errors['minLength'].min} characters`;
+        if (errors['maxLength'])
+            return `Maximum length is ${errors['maxLength'].max} characters`;
+        if (errors['min'])
+            return `Minimum value is ${errors['min'].min}`;
+        if (errors['max'])
+            return `Maximum value is ${errors['max'].max}`;
+        if (errors['minDate'])
+            return `Date must be after ${errors['minDate'].minDate}`;
+        if (errors['maxDate'])
+            return `Date must be before ${errors['maxDate'].maxDate}`;
+        if (errors['pattern'])
+            return errors['pattern'].message || 'Invalid format';
+        return 'Invalid value';
+    }
+}
+
+class FormFieldComponent {
+    expressionService;
+    http;
+    config;
+    controller;
+    sectionIndex;
+    value;
+    isVisible = true;
+    errorMessage = '';
+    destroy$ = new Subject();
+    constructor(expressionService, http) {
+        this.expressionService = expressionService;
+        this.http = http;
+    }
+    ngOnInit() {
+        this.setupField();
+        this.setupVisibility();
+        this.setupGeneratedField();
+        this.setupDependencies();
+        // Initial load if no dependencies or if dependencies have initial values
+        if (!this.config.optionConfig?.dependencies) {
+            this.loadDropdownOptions();
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupField() {
+        if (this.config.name) {
+            const fieldName = this.getFieldName();
+            this.controller.getFieldObservable(fieldName)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(val => {
+                this.value = val;
+            });
+        }
+    }
+    setupVisibility() {
+        if (this.config.visibilityExpression) {
+            const variables = this.expressionService.extractVariables(this.config.visibilityExpression);
+            const observables = variables.map(v => this.controller.getFieldObservable(v));
+            combineLatest(observables)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                const context = this.controller.getAllData();
+                this.isVisible = this.expressionService.evaluateCondition(this.config.visibilityExpression, context);
+            });
+        }
+    }
+    setupGeneratedField() {
+        if (this.config.type === 'GENERATED' && this.config.generatedConfig) {
+            const variables = this.config.generatedConfig.variables || [];
+            const observables = variables.map(v => this.controller.getFieldObservable(v));
+            combineLatest(observables)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                const context = this.controller.getAllData();
+                const result = this.evaluateFormula(context);
+                if (result !== null && this.config.name) {
+                    this.controller.updateField(this.getFieldName(), result);
+                }
+            });
+        }
+    }
+    evaluateFormula(context) {
+        if (!this.config.generatedConfig)
+            return null;
+        const formula = this.config.generatedConfig.formula;
+        const functionName = this.extractFunctionName(formula);
+        if (functionName) {
+            return this.expressionService.evaluateFormula(formula, functionName, context, this.config.generatedConfig.variables);
+        }
+        return null;
+    }
+    extractFunctionName(formula) {
+        const match = formula.match(/(?:function|fun)\s+(\w+)\s*\(/);
+        return match ? match[1] : null;
+    }
+    setupDependencies() {
+        if (!this.config.optionConfig?.dependencies)
+            return;
+        const dependencies = this.config.optionConfig.dependencies;
+        const observables = Object.values(dependencies).map(fieldName => this.controller.getFieldObservable(fieldName));
+        combineLatest(observables)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((values) => {
+            // Create a map of dependency values
+            const dependencyValues = {};
+            Object.keys(dependencies).forEach((paramKey, index) => {
+                dependencyValues[paramKey] = values[index];
+            });
+            // Check if all required dependencies have values (optional: could skip this if partial dependencies are allowed)
+            const allPresent = Object.values(dependencyValues).every(v => v !== null && v !== undefined && v !== '');
+            if (allPresent) {
+                this.loadDropdownOptions(dependencyValues);
+            }
+            else {
+                // Clear options if dependencies are missing
+                if (this.config.optionConfig) {
+                    this.config.optionConfig.optionList = [];
+                }
+            }
+        });
+    }
+    loadDropdownOptions(queryParams = {}) {
+        const optionConfig = this.config.optionConfig;
+        const urls = optionConfig?.apiUrls || (optionConfig?.apiUrl ? [optionConfig.apiUrl] : optionConfig?.optionUrl ? [optionConfig.optionUrl] : []);
+        if (!urls || urls.length === 0)
+            return;
+        // Create observables for each URL with query params
+        const observables = urls.map(url => {
+            let fullUrl = url;
+            const params = new URLSearchParams();
+            Object.entries(queryParams).forEach(([key, value]) => {
+                if (value !== null && value !== undefined) {
+                    params.append(key, String(value));
+                }
+            });
+            const queryString = params.toString();
+            if (queryString) {
+                fullUrl += (fullUrl.includes('?') ? '&' : '?') + queryString;
+            }
+            return this.http.get(fullUrl);
+        });
+        forkJoin(observables)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (responses) => {
+                let mergedData = [];
+                responses.forEach(response => {
+                    // Identify array source for each response
+                    const data = optionConfig?.dataPath
+                        ? this.getValueByPath(response, optionConfig.dataPath)
+                        : (Array.isArray(response) ? response : response.data || response.items || []);
+                    if (Array.isArray(data)) {
+                        mergedData = [...mergedData, ...data];
+                    }
+                });
+                // Sort merged data BEFORE mapping
+                if (optionConfig?.sortBy) {
+                    const sortKey = optionConfig.sortBy;
+                    const direction = optionConfig.sortDirection === 'DESC' ? -1 : 1;
+                    mergedData.sort((a, b) => {
+                        const valA = this.getValueByPath(a, sortKey);
+                        const valB = this.getValueByPath(b, sortKey);
+                        if (typeof valA === 'string' && typeof valB === 'string') {
+                            return direction * valA.localeCompare(valB);
+                        }
+                        if (typeof valA === 'number' && typeof valB === 'number') {
+                            return direction * (valA - valB);
+                        }
+                        return 0;
+                    });
+                }
+                this.config.optionConfig.optionList = mergedData.map((item) => {
+                    const label = optionConfig?.labelPath
+                        ? this.getValueByPath(item, optionConfig.labelPath)
+                        : (item.label || item.name);
+                    const code = optionConfig?.valuePath
+                        ? this.getValueByPath(item, optionConfig.valuePath)
+                        : (item.code || item.id || item.value);
+                    return {
+                        label: String(label),
+                        code: code,
+                        value: item
+                    };
+                });
+            },
+            error: (err) => console.error('Failed to load dropdown options:', 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);
+    }
+    onValueChange(event) {
+        if (!this.config.name)
+            return;
+        const fieldName = this.getFieldName();
+        let newValue;
+        if (event?.target) {
+            const target = event.target;
+            if (target.type === 'checkbox') {
+                newValue = target.checked;
+            }
+            else if (target.type === 'number') {
+                newValue = target.value ? Number(target.value) : null;
+            }
+            else {
+                newValue = target.value;
+            }
+        }
+        else {
+            newValue = event;
+        }
+        this.controller.updateField(fieldName, newValue);
+        this.validate(newValue);
+    }
+    onCheckboxListChange(code, checked) {
+        if (!this.config.name)
+            return;
+        const fieldName = this.getFieldName();
+        const currentValue = this.controller.getFieldValue(fieldName) || [];
+        let newValue;
+        if (checked) {
+            newValue = [...currentValue, code];
+        }
+        else {
+            newValue = currentValue.filter((c) => c !== code);
+        }
+        this.controller.updateField(fieldName, newValue);
+        this.validate(newValue);
+    }
+    isChecked(code) {
+        const value = this.value || [];
+        return Array.isArray(value) && value.includes(code);
+    }
+    validate(value) {
+        this.errorMessage = '';
+        if (this.config.required && !value) {
+            this.errorMessage = 'This field is required';
+            return;
+        }
+        if (!value)
+            return;
+        if (this.config.subType === 'EMAIL' && !this.config.textConfig?.pattern) {
+            const validator = ValidationUtils.email();
+            const errors = validator({ value });
+            if (errors)
+                this.errorMessage = ValidationUtils.getErrorMessage(errors);
+        }
+        if (this.config.subType === 'PHONE' && !this.config.textConfig?.pattern) {
+            const validator = ValidationUtils.phone();
+            const errors = validator({ value });
+            if (errors)
+                this.errorMessage = ValidationUtils.getErrorMessage(errors);
+        }
+        if (this.config.textConfig?.length) {
+            const { min, max } = this.config.textConfig.length;
+            if (min && value.length < min) {
+                this.errorMessage = `Minimum length is ${min} characters`;
+            }
+            if (max && value.length > max) {
+                this.errorMessage = `Maximum length is ${max} characters`;
+            }
+        }
+        if (this.config.textConfig?.pattern) {
+            try {
+                const regex = new RegExp(this.config.textConfig.pattern);
+                if (!regex.test(value)) {
+                    this.errorMessage = this.config.textConfig.patternMessage || 'Invalid format';
+                }
+            }
+            catch (e) {
+                console.error('Invalid regex pattern:', this.config.textConfig.pattern);
+            }
+        }
+        if (this.config.numberConfig) {
+            const { min, max } = this.config.numberConfig;
+            const numValue = Number(value);
+            if (min !== undefined && numValue < min) {
+                this.errorMessage = `Minimum value is ${min}`;
+            }
+            if (max !== undefined && numValue > max) {
+                this.errorMessage = `Maximum value is ${max}`;
+            }
+        }
+    }
+    getFieldName() {
+        if (this.sectionIndex !== undefined && this.config.name) {
+            return `${this.config.name}_${this.sectionIndex}`;
+        }
+        return this.config.name || '';
+    }
+    get isTextField() {
+        return this.config.type === 'TEXT_INPUT';
+    }
+    get isNumberField() {
+        return this.config.type === 'NUMBER_INPUT';
+    }
+    get isDateField() {
+        return this.config.type === 'DATE';
+    }
+    get isDropdown() {
+        return this.config.type === 'DROPDOWN';
+    }
+    get isRadio() {
+        return this.config.type === 'RADIO';
+    }
+    get isCheckbox() {
+        return this.config.type === 'CHECKBOX';
+    }
+    get isChip() {
+        return this.config.type === 'CHIP';
+    }
+    get isSwitch() {
+        return this.config.type === 'SWITCH';
+    }
+    get isRating() {
+        return this.config.type === 'RATING';
+    }
+    onRatingChange(star, event) {
+        if (!this.config.name || this.config.disabled)
+            return;
+        let newValue = star;
+        if (this.config.ratingConfig?.allowHalf && event) {
+            const target = event.target;
+            const rect = target.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            // If click is in the first 50% of the star, it's a half star
+            if (x < rect.width / 2) {
+                newValue = star - 0.5;
+            }
+        }
+        // Toggle off if clicking same value
+        if (this.value === newValue) {
+            newValue = 0;
+        }
+        this.controller.updateField(this.getFieldName(), newValue);
+        this.validate(newValue);
+    }
+    getStarArray() {
+        const max = this.config.ratingConfig?.maxRating || 5;
+        return Array.from({ length: max }, (_, i) => i + 1);
+    }
+    isStarHalf(star) {
+        const value = this.value || 0;
+        return value === star - 0.5;
+    }
+    isStarFilled(star) {
+        const value = this.value || 0;
+        return value >= star;
+    }
+    get isGenerated() {
+        return this.config.type === 'GENERATED';
+    }
+    get isRow() {
+        return this.config.type === 'ROW';
+    }
+    get isGroup() {
+        return this.config.type === 'GROUP';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldComponent, deps: [{ token: ExpressionService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormFieldComponent, isStandalone: false, selector: "lib-form-field", inputs: { config: "config", controller: "controller", sectionIndex: "sectionIndex" }, ngImport: i0, template: "<div class=\"form-field\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\n  <!-- ROW Layout -->\n  <div *ngIf=\"isRow\" class=\"form-row\" [class.horizontal]=\"config.subType === 'HORIZONTAL'\">\n    <ng-container *ngFor=\"let child of config.children\">\n      <div class=\"row-field\">\n        <lib-form-field\n          [config]=\"child\"\n          [controller]=\"controller\"\n          [sectionIndex]=\"sectionIndex\">\n        </lib-form-field>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- GROUP (Section) -->\n  <div *ngIf=\"isGroup && config.sectionConfig\" class=\"form-group\">\n    <ng-container *ngFor=\"let field of config.sectionConfig.children\">\n      <lib-form-field\n        [config]=\"field\"\n        [controller]=\"controller\"\n        [sectionIndex]=\"sectionIndex\">\n      </lib-form-field>\n    </ng-container>\n  </div>\n\n  <!-- Text Input -->\n  <div *ngIf=\"isTextField\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <textarea\n      *ngIf=\"config.subType === 'LONG'\"\n      class=\"field-input textarea\"\n      [placeholder]=\"config.hint || ''\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      (input)=\"onValueChange($event)\"\n      rows=\"4\">\n    </textarea>\n    \n    <input\n      *ngIf=\"config.subType !== 'LONG'\"\n      [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\"\n      class=\"field-input\"\n      [placeholder]=\"config.hint || ''\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      (input)=\"onValueChange($event)\">\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Number Input -->\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <input\n      type=\"number\"\n      class=\"field-input\"\n      [placeholder]=\"config.hint || ''\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      [min]=\"config.numberConfig?.min\"\n      [max]=\"config.numberConfig?.max\"\n      [step]=\"config.numberConfig?.step || 1\"\n      (input)=\"onValueChange($event)\">\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Date Input -->\n  <div *ngIf=\"isDateField\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <input\n      type=\"date\"\n      class=\"field-input\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      [min]=\"config.dateConfig?.minDate\"\n      [max]=\"config.dateConfig?.maxDate\"\n      (input)=\"onValueChange($event)\">\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Dropdown -->\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <select\n      *ngIf=\"config.subType === 'SINGLE'\"\n      class=\"field-input\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      (change)=\"onValueChange($event)\">\n      <option value=\"\">Select...</option>\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\n        {{ option.label }}\n      </option>\n    </select>\n    \n    <select\n      *ngIf=\"config.subType === 'MULTIPLE'\"\n      class=\"field-input\"\n      multiple\n      [disabled]=\"config.disabled\"\n      (change)=\"onValueChange($event)\">\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\n        {{ option.label }}\n      </option>\n    </select>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Radio -->\n  <div *ngIf=\"isRadio\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <div class=\"radio-group\">\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\">\n        <input\n          type=\"radio\"\n          [name]=\"getFieldName()\"\n          [value]=\"option.code\"\n          [checked]=\"value === option.code\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onValueChange(option.code)\">\n        <span>{{ option.label }}</span>\n      </label>\n    </div>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Checkbox -->\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label && config.subType === 'LIST'\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\n      <label class=\"checkbox-label\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"value === true\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onValueChange($event)\">\n        <span>{{ config.label }}</span>\n      </label>\n    </div>\n    \n    <div *ngIf=\"config.subType === 'LIST'\" class=\"checkbox-group\">\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"checkbox-label\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isChecked(option.code)\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\n        <span>{{ option.label }}</span>\n      </label>\n    </div>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Chip -->\n  <div *ngIf=\"isChip\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <div class=\"chip-group\">\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" \n             class=\"chip-label\"\n             [class.selected]=\"isChecked(option.code)\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isChecked(option.code)\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\"\n          style=\"display: none;\">\n        <span>{{ option.label }}</span>\n      </label>\n    </div>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Switch -->\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper\">\n    <label class=\"switch-container\">\n      <span class=\"field-label\">{{ config.label }}</span>\n      <div class=\"switch\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"value === true\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onValueChange($event)\">\n        <span class=\"slider\"></span>\n      </div>\n    </label>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Rating -->\n  <div *ngIf=\"isRating\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <div class=\"rating-group\">\n      <span *ngFor=\"let star of getStarArray()\" \n            class=\"star\"\n            [class.filled]=\"isStarFilled(star)\"\n            [class.half]=\"isStarHalf(star)\"\n            (click)=\"onRatingChange(star, $event)\">\n        \u2605\n      </span>\n    </div>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Generated Field (Read-only) -->\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">{{ config.label }}</label>\n    <div class=\"generated-value\">{{ value || '-' }}</div>\n    <span class=\"field-hint\" *ngIf=\"config.hint\">{{ config.hint }}</span>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:16px}.form-field.has-error .field-input{border-color:#f44336}.form-row{display:flex;gap:16px}.form-row.horizontal{flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.field-wrapper{display:flex;flex-direction:column;gap:6px}.field-label{font-size:14px;font-weight:500;color:#333}.field-label .required{color:#f44336;margin-left:4px}.field-input{padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;transition:border-color .3s}.field-input:focus{outline:none;border-color:#2196f3}.field-input:disabled{background:#f5f5f5;cursor:not-allowed}.field-input.textarea{resize:vertical;font-family:inherit}.field-hint{font-size:12px;color:#666}.field-error{font-size:12px;color:#f44336}.radio-group,.checkbox-group{display:flex;flex-direction:column;gap:8px}.radio-label,.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}.radio-label input,.checkbox-label input{cursor:pointer}.checkbox-single .checkbox-label{font-weight:500}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip-label{padding:8px 16px;border:1px solid #ddd;border-radius:20px;cursor:pointer;font-size:14px;transition:all .3s}.chip-label:hover{background:#f5f5f5}.chip-label.selected{background:#2196f3;color:#fff;border-color:#2196f3}.switch-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.switch{position:relative;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider{background-color:#2196f3}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.rating-group{display:flex;gap:4px}.rating-group .star{font-size:28px;display:inline-block;background:#ddd;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.rating-group .star.filled{background:#ffc107;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.rating-group .star.half{background:linear-gradient(90deg,#ffc107 50%,#ddd 50%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.rating-group .star:hover{background:#ffc107;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.generated-value{padding:10px 12px;background:#f5f5f5;border:1px solid #ddd;border-radius:4px;font-size:14px;color:#666}select[multiple]{min-height:120px}\n"], dependencies: [{ 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$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "sectionIndex"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-field', standalone: false, template: "<div class=\"form-field\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\n  <!-- ROW Layout -->\n  <div *ngIf=\"isRow\" class=\"form-row\" [class.horizontal]=\"config.subType === 'HORIZONTAL'\">\n    <ng-container *ngFor=\"let child of config.children\">\n      <div class=\"row-field\">\n        <lib-form-field\n          [config]=\"child\"\n          [controller]=\"controller\"\n          [sectionIndex]=\"sectionIndex\">\n        </lib-form-field>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- GROUP (Section) -->\n  <div *ngIf=\"isGroup && config.sectionConfig\" class=\"form-group\">\n    <ng-container *ngFor=\"let field of config.sectionConfig.children\">\n      <lib-form-field\n        [config]=\"field\"\n        [controller]=\"controller\"\n        [sectionIndex]=\"sectionIndex\">\n      </lib-form-field>\n    </ng-container>\n  </div>\n\n  <!-- Text Input -->\n  <div *ngIf=\"isTextField\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <textarea\n      *ngIf=\"config.subType === 'LONG'\"\n      class=\"field-input textarea\"\n      [placeholder]=\"config.hint || ''\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      (input)=\"onValueChange($event)\"\n      rows=\"4\">\n    </textarea>\n    \n    <input\n      *ngIf=\"config.subType !== 'LONG'\"\n      [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\"\n      class=\"field-input\"\n      [placeholder]=\"config.hint || ''\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      (input)=\"onValueChange($event)\">\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Number Input -->\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <input\n      type=\"number\"\n      class=\"field-input\"\n      [placeholder]=\"config.hint || ''\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      [min]=\"config.numberConfig?.min\"\n      [max]=\"config.numberConfig?.max\"\n      [step]=\"config.numberConfig?.step || 1\"\n      (input)=\"onValueChange($event)\">\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Date Input -->\n  <div *ngIf=\"isDateField\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <input\n      type=\"date\"\n      class=\"field-input\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      [min]=\"config.dateConfig?.minDate\"\n      [max]=\"config.dateConfig?.maxDate\"\n      (input)=\"onValueChange($event)\">\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Dropdown -->\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <select\n      *ngIf=\"config.subType === 'SINGLE'\"\n      class=\"field-input\"\n      [value]=\"value || ''\"\n      [disabled]=\"config.disabled\"\n      (change)=\"onValueChange($event)\">\n      <option value=\"\">Select...</option>\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\n        {{ option.label }}\n      </option>\n    </select>\n    \n    <select\n      *ngIf=\"config.subType === 'MULTIPLE'\"\n      class=\"field-input\"\n      multiple\n      [disabled]=\"config.disabled\"\n      (change)=\"onValueChange($event)\">\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\n        {{ option.label }}\n      </option>\n    </select>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Radio -->\n  <div *ngIf=\"isRadio\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <div class=\"radio-group\">\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\">\n        <input\n          type=\"radio\"\n          [name]=\"getFieldName()\"\n          [value]=\"option.code\"\n          [checked]=\"value === option.code\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onValueChange(option.code)\">\n        <span>{{ option.label }}</span>\n      </label>\n    </div>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Checkbox -->\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label && config.subType === 'LIST'\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\n      <label class=\"checkbox-label\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"value === true\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onValueChange($event)\">\n        <span>{{ config.label }}</span>\n      </label>\n    </div>\n    \n    <div *ngIf=\"config.subType === 'LIST'\" class=\"checkbox-group\">\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"checkbox-label\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isChecked(option.code)\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\n        <span>{{ option.label }}</span>\n      </label>\n    </div>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Chip -->\n  <div *ngIf=\"isChip\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <div class=\"chip-group\">\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" \n             class=\"chip-label\"\n             [class.selected]=\"isChecked(option.code)\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isChecked(option.code)\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\"\n          style=\"display: none;\">\n        <span>{{ option.label }}</span>\n      </label>\n    </div>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Switch -->\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper\">\n    <label class=\"switch-container\">\n      <span class=\"field-label\">{{ config.label }}</span>\n      <div class=\"switch\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"value === true\"\n          [disabled]=\"config.disabled\"\n          (change)=\"onValueChange($event)\">\n        <span class=\"slider\"></span>\n      </div>\n    </label>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Rating -->\n  <div *ngIf=\"isRating\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">\n      {{ config.label }}\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\n    </label>\n    \n    <div class=\"rating-group\">\n      <span *ngFor=\"let star of getStarArray()\" \n            class=\"star\"\n            [class.filled]=\"isStarFilled(star)\"\n            [class.half]=\"isStarHalf(star)\"\n            (click)=\"onRatingChange(star, $event)\">\n        \u2605\n      </span>\n    </div>\n    \n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\n  </div>\n\n  <!-- Generated Field (Read-only) -->\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper\">\n    <label *ngIf=\"config.label\" class=\"field-label\">{{ config.label }}</label>\n    <div class=\"generated-value\">{{ value || '-' }}</div>\n    <span class=\"field-hint\" *ngIf=\"config.hint\">{{ config.hint }}</span>\n  </div>\n</div>\n", styles: [".form-field{margin-bottom:16px}.form-field.has-error .field-input{border-color:#f44336}.form-row{display:flex;gap:16px}.form-row.horizontal{flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.field-wrapper{display:flex;flex-direction:column;gap:6px}.field-label{font-size:14px;font-weight:500;color:#333}.field-label .required{color:#f44336;margin-left:4px}.field-input{padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;transition:border-color .3s}.field-input:focus{outline:none;border-color:#2196f3}.field-input:disabled{background:#f5f5f5;cursor:not-allowed}.field-input.textarea{resize:vertical;font-family:inherit}.field-hint{font-size:12px;color:#666}.field-error{font-size:12px;color:#f44336}.radio-group,.checkbox-group{display:flex;flex-direction:column;gap:8px}.radio-label,.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}.radio-label input,.checkbox-label input{cursor:pointer}.checkbox-single .checkbox-label{font-weight:500}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip-label{padding:8px 16px;border:1px solid #ddd;border-radius:20px;cursor:pointer;font-size:14px;transition:all .3s}.chip-label:hover{background:#f5f5f5}.chip-label.selected{background:#2196f3;color:#fff;border-color:#2196f3}.switch-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.switch{position:relative;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider{background-color:#2196f3}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.rating-group{display:flex;gap:4px}.rating-group .star{font-size:28px;display:inline-block;background:#ddd;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.rating-group .star.filled{background:#ffc107;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.rating-group .star.half{background:linear-gradient(90deg,#ffc107 50%,#ddd 50%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.rating-group .star:hover{background:#ffc107;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.generated-value{padding:10px 12px;background:#f5f5f5;border:1px solid #ddd;border-radius:4px;font-size:14px;color:#666}select[multiple]{min-height:120px}\n"] }]
+        }], ctorParameters: () => [{ type: ExpressionService }, { type: i3.HttpClient }], propDecorators: { config: [{
+                type: Input
+            }], controller: [{
+                type: Input
+            }], sectionIndex: [{
+                type: Input
+            }] } });
+
+class FormSectionComponent {
+    config;
+    controller;
+    sections = [{}];
+    addSection() {
+        if (this.config.allowMulti) {
+            this.sections.push({});
+        }
+    }
+    removeSection(index) {
+        if (this.sections.length > 1) {
+            this.sections.splice(index, 1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormSectionComponent, isStandalone: false, selector: "lib-form-section", inputs: { config: "config", controller: "controller" }, ngImport: i0, template: "<div class=\"form-section-container\">\n  <h3 class=\"section-label\" *ngIf=\"config.label\">{{ config.label }}</h3>\n  \n  <div *ngFor=\"let section of sections; let sectionIndex = index\" class=\"section-instance\">\n    <div class=\"section-header\" *ngIf=\"config.allowMulti && sections.length > 1\">\n      <span class=\"section-number\">{{ config.label }} #{{ sectionIndex + 1 }}</span>\n      <button \n        type=\"button\" \n        class=\"btn-remove\"\n        (click)=\"removeSection(sectionIndex)\"\n        *ngIf=\"sectionIndex > 0\">\n        Remove\n      </button>\n    </div>\n    \n    <div class=\"section-fields\">\n      <ng-container *ngFor=\"let field of config.children\">\n        <lib-form-field\n          [config]=\"field\"\n          [controller]=\"controller\"\n          [sectionIndex]=\"config.allowMulti ? sectionIndex : undefined\">\n        </lib-form-field>\n      </ng-container>\n    </div>\n  </div>\n  \n  <button \n    type=\"button\" \n    class=\"btn-add-section\"\n    *ngIf=\"config.allowMulti\"\n    (click)=\"addSection()\">\n    + Add {{ config.label }}\n  </button>\n</div>\n", styles: [".form-section-container{margin-bottom:24px}.form-section-container .section-label{font-size:18px;font-weight:600;color:#333;margin:0 0 16px}.form-section-container .section-instance{margin-bottom:16px;padding:16px;border:1px solid #e0e0e0;border-radius:4px}.form-section-container .section-instance:last-of-type{margin-bottom:0}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e0e0e0}.form-section-container .section-header .section-number{font-weight:600;color:#333}.form-section-container .section-header .btn-remove{padding:6px 12px;background:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px}.form-section-container .section-header .btn-remove:hover{background:#d32f2f}.form-section-container .section-fields{display:flex;flex-direction:column;gap:16px}.form-section-container .btn-add-section{padding:10px 20px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;margin-top:16px}.form-section-container .btn-add-section:hover{background:#1976d2}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "sectionIndex"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-section', standalone: false, template: "<div class=\"form-section-container\">\n  <h3 class=\"section-label\" *ngIf=\"config.label\">{{ config.label }}</h3>\n  \n  <div *ngFor=\"let section of sections; let sectionIndex = index\" class=\"section-instance\">\n    <div class=\"section-header\" *ngIf=\"config.allowMulti && sections.length > 1\">\n      <span class=\"section-number\">{{ config.label }} #{{ sectionIndex + 1 }}</span>\n      <button \n        type=\"button\" \n        class=\"btn-remove\"\n        (click)=\"removeSection(sectionIndex)\"\n        *ngIf=\"sectionIndex > 0\">\n        Remove\n      </button>\n    </div>\n    \n    <div class=\"section-fields\">\n      <ng-container *ngFor=\"let field of config.children\">\n        <lib-form-field\n          [config]=\"field\"\n          [controller]=\"controller\"\n          [sectionIndex]=\"config.allowMulti ? sectionIndex : undefined\">\n        </lib-form-field>\n      </ng-container>\n    </div>\n  </div>\n  \n  <button \n    type=\"button\" \n    class=\"btn-add-section\"\n    *ngIf=\"config.allowMulti\"\n    (click)=\"addSection()\">\n    + Add {{ config.label }}\n  </button>\n</div>\n", styles: [".form-section-container{margin-bottom:24px}.form-section-container .section-label{font-size:18px;font-weight:600;color:#333;margin:0 0 16px}.form-section-container .section-instance{margin-bottom:16px;padding:16px;border:1px solid #e0e0e0;border-radius:4px}.form-section-container .section-instance:last-of-type{margin-bottom:0}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e0e0e0}.form-section-container .section-header .section-number{font-weight:600;color:#333}.form-section-container .section-header .btn-remove{padding:6px 12px;background:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px}.form-section-container .section-header .btn-remove:hover{background:#d32f2f}.form-section-container .section-fields{display:flex;flex-direction:column;gap:16px}.form-section-container .btn-add-section{padding:10px 20px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;margin-top:16px}.form-section-container .btn-add-section:hover{background:#1976d2}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], controller: [{
+                type: Input
+            }] } });
+
+class SmartFormComponent {
+    fb;
+    controller;
+    expressionService;
+    http;
+    formJson;
+    initialValues;
+    enableDraftAutoSave = false;
+    submit = new EventEmitter();
+    draftSave = new EventEmitter();
+    formSchema;
+    formGroup;
+    fieldList = [];
+    isStepper = false;
+    currentStep = 0;
+    isLoading = false;
+    constructor(fb, controller, expressionService, http) {
+        this.fb = fb;
+        this.controller = controller;
+        this.expressionService = expressionService;
+        this.http = http;
+    }
+    ngOnInit() {
+        if (this.initialValues) {
+            this.controller.initialize(this.initialValues);
+        }
+        this.parseFormJson();
+    }
+    ngOnChanges(changes) {
+        if (changes['formJson'] && !changes['formJson'].isFirstChange()) {
+            this.parseFormJson();
+        }
+    }
+    ngOnDestroy() {
+        this.controller.destroy();
+    }
+    parseFormJson() {
+        try {
+            const jsonData = JSON.parse(this.formJson);
+            this.formSchema = jsonData;
+            this.isStepper = this.formSchema.formType === 'STEPPER';
+            this.fieldList = this.isStepper
+                ? this.formSchema.stepperConfig?.children || []
+                : this.formSchema.sectionConfig?.children || [];
+            this.initializeForm();
+        }
+        catch (e) {
+            console.error('Error parsing form JSON:', e);
+        }
+    }
+    initializeForm() {
+        this.formGroup = this.fb.group({});
+        this.collectFields(this.fieldList);
+    }
+    collectFields(fields) {
+        fields.forEach(field => {
+            if (field.name) {
+                const value = field.defaultValue !== undefined ? field.defaultValue : null;
+                this.controller.updateField(field.name, value);
+            }
+            if (field.children && field.children.length > 0) {
+                this.collectFields(field.children);
+            }
+        });
+    }
+    handleSubmit() {
+        if (this.isStepper && this.currentStep < this.fieldList.length - 1) {
+            this.nextStep();
+            return;
+        }
+        const formData = this.controller.getAllData();
+        this.isLoading = true;
+        if (this.formSchema.submitConfig?.apiUrl) {
+            this.submitToApi(formData);
+        }
+        else {
+            this.submit.emit(formData);
+            this.isLoading = false;
+        }
+    }
+    submitToApi(formData) {
+        const config = this.formSchema.submitConfig;
+        const method = config.method || 'POST';
+        this.http.request(method, config.apiUrl, { body: formData })
+            .subscribe({
+            next: (response) => {
+                alert(config.successMessage || 'Form submitted successfully');
+                this.submit.emit(response);
+                this.isLoading = false;
+            },
+            error: (err) => {
+                alert(config.errorMessage || 'Failed to submit form');
+                console.error('Submit error:', err);
+                this.isLoading = false;
+            }
+        });
+    }
+    nextStep() {
+        if (this.currentStep < this.fieldList.length - 1) {
+            this.currentStep++;
+        }
+    }
+    previousStep() {
+        if (this.currentStep > 0) {
+            this.currentStep--;
+        }
+    }
+    get canGoNext() {
+        return this.currentStep < this.fieldList.length - 1;
+    }
+    get canGoPrevious() {
+        return this.currentStep > 0;
+    }
+    get currentStepConfig() {
+        return this.isStepper ? this.fieldList[this.currentStep] : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: SmartFormController }, { token: ExpressionService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartFormComponent, isStandalone: false, selector: "lib-smart-form", inputs: { formJson: "formJson", initialValues: "initialValues", enableDraftAutoSave: "enableDraftAutoSave" }, outputs: { submit: "submit", draftSave: "draftSave" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\n    <!-- Form Header -->\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\n    </div>\n\n    <!-- Stepper Navigation -->\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\n        <div \n          *ngFor=\"let step of fieldList; let i = index\"\n          class=\"stepper-step\"\n          [class.active]=\"i === currentStep\"\n          [class.completed]=\"i < currentStep\">\n          <div class=\"step-number\">{{ i + 1 }}</div>\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\n      <!-- Section Form -->\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig\" class=\"form-section\">\n        <lib-form-section \n          [config]=\"formSchema.sectionConfig\"\n          [controller]=\"controller\">\n        </lib-form-section>\n      </div>\n\n      <!-- Stepper Form -->\n      <div *ngIf=\"isStepper && currentStepConfig\" class=\"form-stepper\">\n        <lib-form-section \n          [config]=\"currentStepConfig.sectionConfig!\"\n          [controller]=\"controller\">\n        </lib-form-section>\n      </div>\n    </form>\n\n    <!-- Form Actions -->\n    <div class=\"form-actions\">\n      <button \n        *ngIf=\"isStepper && canGoPrevious\"\n        type=\"button\" \n        class=\"btn btn-secondary\"\n        (click)=\"previousStep()\">\n        Previous\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"btn btn-primary\"\n        [disabled]=\"isLoading\"\n        (click)=\"handleSubmit()\">\n        {{ isStepper && canGoNext ? 'Next' : 'Submit' }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".smart-form-container{width:100%;max-width:1200px;margin:0 auto;padding:20px}.smart-form-wrapper{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:24px}.form-header{margin-bottom:24px}.form-header .form-title{font-size:24px;font-weight:600;color:#333;margin:0 0 8px}.form-header .form-description{font-size:14px;color:#666;margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:20px;left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:#e0e0e0}.stepper-nav .stepper-step.completed:after{background:#4caf50}.stepper-nav .stepper-step .step-number{width:40px;height:40px;border-radius:50%;background:#e0e0e0;color:#666;display:flex;align-items:center;justify-content:center;font-weight:600;transition:all .3s}.stepper-nav .stepper-step .step-label{font-size:14px;color:#666;font-weight:500}.stepper-nav .stepper-step.active .step-number{background:#2196f3;color:#fff}.stepper-nav .stepper-step.active .step-label{color:#2196f3;font-weight:600}.stepper-nav .stepper-step.completed .step-number{background:#4caf50;color:#fff}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:24px;border-top:1px solid #e0e0e0}.form-actions .btn{padding:10px 24px;border-radius:4px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .3s}.form-actions .btn.btn-primary{background:#2196f3;color:#fff}.form-actions .btn.btn-primary:hover:not(:disabled){background:#1976d2}.form-actions .btn.btn-primary:disabled{opacity:.6;cursor:not-allowed}.form-actions .btn.btn-secondary{background:#f5f5f5;color:#333}.form-actions .btn.btn-secondary:hover{background:#e0e0e0}\n"], dependencies: [{ 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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormSectionComponent, selector: "lib-form-section", inputs: ["config", "controller"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\n    <!-- Form Header -->\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\n    </div>\n\n    <!-- Stepper Navigation -->\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\n        <div \n          *ngFor=\"let step of fieldList; let i = index\"\n          class=\"stepper-step\"\n          [class.active]=\"i === currentStep\"\n          [class.completed]=\"i < currentStep\">\n          <div class=\"step-number\">{{ i + 1 }}</div>\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\n      <!-- Section Form -->\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig\" class=\"form-section\">\n        <lib-form-section \n          [config]=\"formSchema.sectionConfig\"\n          [controller]=\"controller\">\n        </lib-form-section>\n      </div>\n\n      <!-- Stepper Form -->\n      <div *ngIf=\"isStepper && currentStepConfig\" class=\"form-stepper\">\n        <lib-form-section \n          [config]=\"currentStepConfig.sectionConfig!\"\n          [controller]=\"controller\">\n        </lib-form-section>\n      </div>\n    </form>\n\n    <!-- Form Actions -->\n    <div class=\"form-actions\">\n      <button \n        *ngIf=\"isStepper && canGoPrevious\"\n        type=\"button\" \n        class=\"btn btn-secondary\"\n        (click)=\"previousStep()\">\n        Previous\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"btn btn-primary\"\n        [disabled]=\"isLoading\"\n        (click)=\"handleSubmit()\">\n        {{ isStepper && canGoNext ? 'Next' : 'Submit' }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".smart-form-container{width:100%;max-width:1200px;margin:0 auto;padding:20px}.smart-form-wrapper{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:24px}.form-header{margin-bottom:24px}.form-header .form-title{font-size:24px;font-weight:600;color:#333;margin:0 0 8px}.form-header .form-description{font-size:14px;color:#666;margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:20px;left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:#e0e0e0}.stepper-nav .stepper-step.completed:after{background:#4caf50}.stepper-nav .stepper-step .step-number{width:40px;height:40px;border-radius:50%;background:#e0e0e0;color:#666;display:flex;align-items:center;justify-content:center;font-weight:600;transition:all .3s}.stepper-nav .stepper-step .step-label{font-size:14px;color:#666;font-weight:500}.stepper-nav .stepper-step.active .step-number{background:#2196f3;color:#fff}.stepper-nav .stepper-step.active .step-label{color:#2196f3;font-weight:600}.stepper-nav .stepper-step.completed .step-number{background:#4caf50;color:#fff}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:24px;border-top:1px solid #e0e0e0}.form-actions .btn{padding:10px 24px;border-radius:4px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .3s}.form-actions .btn.btn-primary{background:#2196f3;color:#fff}.form-actions .btn.btn-primary:hover:not(:disabled){background:#1976d2}.form-actions .btn.btn-primary:disabled{opacity:.6;cursor:not-allowed}.form-actions .btn.btn-secondary{background:#f5f5f5;color:#333}.form-actions .btn.btn-secondary:hover{background:#e0e0e0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: SmartFormController }, { type: ExpressionService }, { type: i3.HttpClient }], propDecorators: { formJson: [{
+                type: Input
+            }], initialValues: [{
+                type: Input
+            }], enableDraftAutoSave: [{
+                type: Input
+            }], submit: [{
+                type: Output
+            }], draftSave: [{
+                type: Output
+            }] } });
+
+class SmartFormModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SmartFormModule, declarations: [SmartFormComponent,
+            FormSectionComponent,
+            FormFieldComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule], exports: [SmartFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormModule, providers: [
+            ExpressionService
+        ], imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SmartFormComponent,
+                        FormSectionComponent,
+                        FormFieldComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule
+                    ],
+                    exports: [
+                        SmartFormComponent
+                    ],
+                    providers: [
+                        ExpressionService
+                    ]
+                }]
+        }] });
+
 class SharedUiModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
             MaterialModule,
-            CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+            AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
             SummaryCardModule,
-            ConfigurableFormModule], exports: [MaterialModule,
-            CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+            ConfigurableFormModule,
+            SmartFormModule], exports: [MaterialModule,
+            AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
             SummaryCardModule,
-            ConfigurableFormModule] });
+            ConfigurableFormModule,
+            SmartFormModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
             MaterialModule,
-            CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+            AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
             SummaryCardModule,
-            ConfigurableFormModule, MaterialModule,
-            CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+            ConfigurableFormModule,
+            SmartFormModule, MaterialModule,
+            AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
             SummaryCardModule,
-            ConfigurableFormModule] });
+            ConfigurableFormModule,
+            SmartFormModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, decorators: [{
             type: NgModule,
@@ -1604,15 +2303,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     imports: [
                         CommonModule,
                         MaterialModule,
-                        CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+                        AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
                         SummaryCardModule,
                         ConfigurableFormModule,
+                        SmartFormModule,
                     ],
                     exports: [
                         MaterialModule,
-                        CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+                        AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
                         SummaryCardModule,
                         ConfigurableFormModule,
+                        SmartFormModule,
                     ],
                 }]
         }] });
@@ -2042,6 +2743,7 @@ class SmartTableComponent {
     topAction = new EventEmitter(); // For top bar buttons
     filterChange = new EventEmitter();
     rowSelect = new EventEmitter();
+    rowClick = new EventEmitter();
     data = [];
     totalItems = 0;
     currentPage = 1;
@@ -2484,12 +3186,18 @@ class SmartTableComponent {
     get columnCount() {
         return this.config.columns.length;
     }
+    onRowClick(row) {
+        const hasSelection = window.getSelection()?.toString();
+        if (this.config.clickableRows && !hasSelection) {
+            this.rowClick.emit(row);
+        }
+    }
     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"] }] });
+    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", rowClick: "rowClick" }, 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            [class.clickable-row]=\"config.clickableRows\" \n            (click)=\"onRowClick(row)\">\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)}.st-table-container table tbody tr.clickable-row,.st-table-container table tbody tr.clickable-row td{cursor:pointer}.st-table-container table tbody tr.clickable-row:hover td,.st-table-container table tbody tr.clickable-row:hover td.sticky-col{background:var(--st-row-hover-bg, #f5f5f5)}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"] }]
+            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            [class.clickable-row]=\"config.clickableRows\" \n            (click)=\"onRowClick(row)\">\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)}.st-table-container table tbody tr.clickable-row,.st-table-container table tbody tr.clickable-row td{cursor:pointer}.st-table-container table tbody tr.clickable-row:hover td,.st-table-container table tbody tr.clickable-row:hover td.sticky-col{background:var(--st-row-hover-bg, #f5f5f5)}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: [{
@@ -2500,6 +3208,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], rowSelect: [{
                 type: Output
+            }], rowClick: [{
+                type: Output
             }], stickyHeaders: [{
                 type: ViewChildren,
                 args: ['stickyHeader']
@@ -2534,6 +3244,389 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+const SAMPLE_FORMS = {
+    // Simple Contact Form
+    contactForm: `{
+    "entityType": "CONTACT",
+    "label": "Contact Us",
+    "description": "Send us a message",
+    "formType": "SECTION",
+    "sectionConfig": {
+      "children": [
+        {
+          "name": "name",
+          "label": "Full Name",
+          "type": "TEXT_INPUT",
+          "subType": "SHORT",
+          "required": true,
+          "hint": "Enter your full name"
+        },
+        {
+          "name": "email",
+          "label": "Email Address",
+          "type": "TEXT_INPUT",
+          "subType": "EMAIL",
+          "required": true,
+          "hint": "your.email@example.com"
+        },
+        {
+          "name": "message",
+          "label": "Message",
+          "type": "TEXT_INPUT",
+          "subType": "LONG",
+          "required": true,
+          "textConfig": {
+            "length": {
+              "min": 10,
+              "max": 500
+            }
+          }
+        }
+      ]
+    }
+  }`,
+    // User Registration with Stepper
+    registrationForm: `{
+    "entityType": "USER",
+    "label": "User Registration",
+    "description": "Create your account",
+    "formType": "STEPPER",
+    "stepperConfig": {
+      "children": [
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Personal Information",
+            "children": [
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "firstName",
+                    "label": "First Name",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "required": true
+                  },
+                  {
+                    "name": "lastName",
+                    "label": "Last Name",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "required": true
+                  }
+                ]
+              },
+              {
+                "name": "fullName",
+                "label": "Full Name",
+                "type": "GENERATED",
+                "subType": "FORMULA",
+                "generatedConfig": {
+                  "formula": "function fullName(first, last) { return (first || '') + ' ' + (last || ''); }",
+                  "variables": ["firstName", "lastName"]
+                }
+              },
+              {
+                "name": "dateOfBirth",
+                "label": "Date of Birth",
+                "type": "DATE",
+                "subType": "SINGLE",
+                "required": true,
+                "dateConfig": {
+                  "allowFuture": false
+                }
+              }
+            ]
+          }
+        },
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Contact Information",
+            "children": [
+              {
+                "name": "email",
+                "label": "Email",
+                "type": "TEXT_INPUT",
+                "subType": "EMAIL",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "label": "Phone Number",
+                "type": "TEXT_INPUT",
+                "subType": "PHONE",
+                "required": true
+              }
+            ]
+          }
+        },
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Preferences",
+            "children": [
+              {
+                "name": "notifications",
+                "label": "Enable Email Notifications",
+                "type": "SWITCH",
+                "subType": "BOOL",
+                "defaultValue": true
+              },
+              {
+                "name": "interests",
+                "label": "Interests",
+                "type": "CHIP",
+                "subType": "MULTIPLE",
+                "optionConfig": {
+                  "optionList": [
+                    { "label": "Technology", "code": "TECH" },
+                    { "label": "Sports", "code": "SPORTS" },
+                    { "label": "Music", "code": "MUSIC" },
+                    { "label": "Travel", "code": "TRAVEL" }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ],
+      "showStep": true,
+      "isHorizontal": true
+    }
+  }`,
+    // Survey Form with Conditional Fields
+    surveyForm: `{
+    "entityType": "SURVEY",
+    "label": "Customer Satisfaction Survey",
+    "formType": "SECTION",
+    "sectionConfig": {
+      "children": [
+        {
+          "name": "overallRating",
+          "label": "Overall Experience",
+          "type": "RATING",
+          "subType": "STAR",
+          "required": true,
+          "ratingConfig": {
+            "maxRating": 5,
+            "allowHalf": false
+          }
+        },
+        {
+          "name": "wouldRecommend",
+          "label": "Would you recommend us?",
+          "type": "RADIO",
+          "subType": "SINGLE",
+          "required": true,
+          "optionConfig": {
+            "optionList": [
+              { "label": "Yes", "code": "YES" },
+              { "label": "No", "code": "NO" },
+              { "label": "Maybe", "code": "MAYBE" }
+            ]
+          }
+        },
+        {
+          "name": "reasonForNo",
+          "label": "Why not?",
+          "type": "TEXT_INPUT",
+          "subType": "LONG",
+          "visibilityExpression": "wouldRecommend === 'NO'",
+          "required": true
+        },
+        {
+          "name": "improvements",
+          "label": "What can we improve?",
+          "type": "CHECKBOX",
+          "subType": "LIST",
+          "optionConfig": {
+            "optionList": [
+              { "label": "Customer Service", "code": "SERVICE" },
+              { "label": "Product Quality", "code": "QUALITY" },
+              { "label": "Pricing", "code": "PRICE" },
+              { "label": "Delivery Speed", "code": "DELIVERY" }
+            ]
+          }
+        },
+        {
+          "name": "additionalComments",
+          "label": "Additional Comments",
+          "type": "TEXT_INPUT",
+          "subType": "LONG",
+          "textConfig": {
+            "length": {
+              "max": 1000
+            }
+          }
+        }
+      ]
+    }
+  }`,
+    // Job Application Form
+    jobApplicationForm: `{
+    "entityType": "JOB_APPLICATION",
+    "label": "Job Application",
+    "description": "Apply for a position at our company",
+    "formType": "STEPPER",
+    "stepperConfig": {
+      "children": [
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Personal Details",
+            "children": [
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "firstName",
+                    "label": "First Name",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "required": true
+                  },
+                  {
+                    "name": "lastName",
+                    "label": "Last Name",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "required": true
+                  }
+                ]
+              },
+              {
+                "name": "email",
+                "label": "Email",
+                "type": "TEXT_INPUT",
+                "subType": "EMAIL",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "label": "Phone",
+                "type": "TEXT_INPUT",
+                "subType": "PHONE",
+                "required": true
+              }
+            ]
+          }
+        },
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Experience",
+            "allowMulti": true,
+            "name": "experienceList",
+            "children": [
+              {
+                "name": "company",
+                "label": "Company Name",
+                "type": "TEXT_INPUT",
+                "subType": "SHORT",
+                "required": true
+              },
+              {
+                "name": "position",
+                "label": "Position",
+                "type": "TEXT_INPUT",
+                "subType": "SHORT",
+                "required": true
+              },
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "startDate",
+                    "label": "Start Date",
+                    "type": "DATE",
+                    "subType": "SINGLE",
+                    "required": true
+                  },
+                  {
+                    "name": "endDate",
+                    "label": "End Date",
+                    "type": "DATE",
+                    "subType": "SINGLE"
+                  }
+                ]
+              },
+              {
+                "name": "responsibilities",
+                "label": "Key Responsibilities",
+                "type": "TEXT_INPUT",
+                "subType": "LONG"
+              }
+            ]
+          }
+        },
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Skills & Qualifications",
+            "children": [
+              {
+                "name": "skills",
+                "label": "Technical Skills",
+                "type": "CHIP",
+                "subType": "MULTIPLE",
+                "optionConfig": {
+                  "optionList": [
+                    { "label": "JavaScript", "code": "JS" },
+                    { "label": "TypeScript", "code": "TS" },
+                    { "label": "Angular", "code": "ANGULAR" },
+                    { "label": "React", "code": "REACT" },
+                    { "label": "Node.js", "code": "NODE" },
+                    { "label": "Python", "code": "PYTHON" }
+                  ]
+                }
+              },
+              {
+                "name": "yearsOfExperience",
+                "label": "Years of Experience",
+                "type": "NUMBER_INPUT",
+                "subType": "INTEGER",
+                "required": true,
+                "numberConfig": {
+                  "min": 0,
+                  "max": 50
+                }
+              },
+              {
+                "name": "availableToStart",
+                "label": "Available to Start",
+                "type": "DATE",
+                "subType": "SINGLE",
+                "required": true,
+                "dateConfig": {
+                  "allowFuture": true
+                }
+              }
+            ]
+          }
+        }
+      ],
+      "showStep": true,
+      "isHorizontal": true
+    }
+  }`
+};
+
+var smartForm_examples = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SAMPLE_FORMS: SAMPLE_FORMS
+});
+
 /*
  * Public API Surface of shared-ui
  */
@@ -2542,5 +3635,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, SmartTableComponent, SmartTableModule, SummaryCardComponent, SummaryCardModule, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem };
+export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, ExpressionService, FilterSidebarComponent, FilterSidebarModule, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, SharedUiModule, SmartFormComponent, SmartFormController, smartForm_examples as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SummaryCardComponent, SummaryCardModule, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem };
 //# sourceMappingURL=commons-shared-web-ui.mjs.map