commons-shared-web-ui 0.0.6 → 0.0.8

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

@@ -15,6 +15,7 @@ import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i10 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i7$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i7 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -39,14 +40,14 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i1$2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators, FormControl, FormArray, FormGroup } from '@angular/forms';
 import * as i1$1 from '@angular/router';
 import * as i2$1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { Subject, BehaviorSubject, combineLatest, forkJoin, of } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil, map, finalize, catchError } from 'rxjs/operators';
 import * as i3 from '@angular/common/http';
-import { HttpParams, HttpHeaders } from '@angular/common/http';
+import { HttpHeaders, HttpParams } from '@angular/common/http';
 
 class MaterialModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2836,6 +2837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class SummaryCardComponent {
     config;
     theme;
+    labels;
     cardClick = new EventEmitter();
     constructor() { }
     onCardClick() {
@@ -2895,15 +2897,17 @@ class SummaryCardComponent {
         return styles;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SummaryCardComponent, isStandalone: false, selector: "lib-summary-card", inputs: { config: "config", theme: "theme" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div class=\"cc-summary-card\" (click)=\"onCardClick()\">\r\n    <!-- Icon Section (Left Side) -->\r\n    <div class=\"icon-section\" *ngIf=\"config.icon || config.iconImage\" [ngClass]=\"config.iconClass\"\r\n        [ngStyle]=\"iconStyles\">\r\n        <mat-icon *ngIf=\"config.icon\">{{ config.icon }}</mat-icon>\r\n        <img *ngIf=\"!config.icon && config.iconImage\" [src]=\"config.iconImage\" alt=\"icon\">\r\n    </div>\r\n\r\n    <!-- Right Section (Header + Value/Meta) -->\r\n    <div class=\"right-section\">\r\n        <!-- Header (Full Width on Right) -->\r\n        <div class=\"header\" [ngClass]=\"config.headerClass\" [ngStyle]=\"headerStyles\">\r\n            {{ config.header }}\r\n        </div>\r\n\r\n        <!-- Value and Meta Row -->\r\n        <div class=\"value-meta-row\">\r\n            <!-- Content Section -->\r\n            <div class=\"content-section\">\r\n                <!-- Value Row (with optional inline description) -->\r\n                <div class=\"value-row\" [class.inline-layout]=\"isDescriptionInline\">\r\n                    <div class=\"value-container\">\r\n                        <div class=\"value\" [ngClass]=\"config.valueClass\" [ngStyle]=\"valueStyles\">\r\n                            {{ config.value }}\r\n                            <span *ngIf=\"config.valueSubtext\" class=\"value-subtext\">{{ config.valueSubtext }}</span>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Description (inline or bottom based on config) -->\r\n                    <div class=\"description\" *ngIf=\"config.description\" [ngClass]=\"config.descriptionClass\"\r\n                        [ngStyle]=\"descriptionStyles\">\r\n                        {{ config.description }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Meta/Status Section (Aligned with Value) -->\r\n            <div class=\"meta-section\" *ngIf=\"config.metaData && config.metaData.length > 0\">\r\n                <div *ngFor=\"let meta of config.metaData\" class=\"meta-item\"\r\n                    [ngClass]=\"[meta.type === 'pill' ? 'meta-pill' : 'meta-text', meta.cssClass || '']\"\r\n                    [ngStyle]=\"getMetaStyles(meta)\">\r\n                    {{ meta.text }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%}.cc-summary-card{display:flex;flex-direction:row;align-items:stretch;box-sizing:border-box;font-family:var(--cc-sc-font-family, \"Inter\", sans-serif);background-color:var(--cc-sc-bg-color, #ffffff);border-radius:var(--cc-sc-border-radius, 8px);border:var(--cc-sc-border, 1px solid #e0e0e0);padding:var(--cc-sc-padding, 16px);box-shadow:var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, .05));transition:all var(--cc-sc-transition-duration, .2s) ease;height:100%;width:100%;overflow:hidden;gap:var(--cc-sc-icon-margin, 1rem)}.cc-summary-card.clickable{cursor:pointer}.cc-summary-card.clickable:hover{transform:var(--cc-sc-hover-transform);box-shadow:var(--cc-sc-hover-shadow)}.cc-summary-card.disabled{opacity:var(--cc-sc-disabled-opacity);cursor:not-allowed;pointer-events:none}.cc-summary-card .icon-section{width:var(--cc-sc-icon-box-size);height:var(--cc-sc-icon-box-size);min-width:var(--cc-sc-icon-box-size);display:flex;align-items:center;justify-content:center;border-radius:var(--cc-sc-icon-radius);background-color:var(--cc-sc-icon-bg);color:var(--cc-sc-icon-color);flex-shrink:0;align-self:center}.cc-summary-card .icon-section mat-icon{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);font-size:var(--cc-sc-icon-size);line-height:var(--cc-sc-icon-size)}.cc-summary-card .icon-section img{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);object-fit:contain}.cc-summary-card .right-section{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--cc-sc-content-gap, .5rem)}.cc-summary-card .right-section .header{font-size:var(--cc-sc-header-size);font-weight:var(--cc-sc-header-weight);text-transform:var(--cc-sc-header-transform);color:var(--cc-sc-header-color);letter-spacing:var(--cc-sc-header-letter-spacing);line-height:var(--cc-sc-header-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.cc-summary-card .right-section .value-meta-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;flex:1}.cc-summary-card .right-section .value-meta-row .content-section{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-width:0}.cc-summary-card .right-section .value-meta-row .content-section .value-row{display:flex;flex-direction:column;gap:var(--cc-sc-value-desc-gap)}.cc-summary-card .right-section .value-meta-row .content-section .value-row.inline-layout{flex-direction:row;align-items:baseline;flex-wrap:wrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value{font-size:var(--cc-sc-value-size);font-weight:var(--cc-sc-value-weight);color:var(--cc-sc-value-color);line-height:var(--cc-sc-value-line-height);white-space:nowrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value .value-subtext{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);margin-left:4px}.cc-summary-card .right-section .value-meta-row .content-section .value-row .description{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);line-height:var(--cc-sc-desc-line-height)}.cc-summary-card .right-section .value-meta-row .meta-section{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex-shrink:0;gap:6px}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item{font-size:.8125rem;line-height:1.4;white-space:nowrap;text-align:right;flex-shrink:0}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-text{color:var(--cc-sc-desc-color, #64748b);font-weight:500}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--cc-sc-meta-pill-padding, 4px 12px);border-radius:var(--cc-sc-meta-pill-radius, 20px);font-size:var(--cc-sc-meta-pill-font-size, .75rem);font-weight:var(--cc-sc-meta-pill-font-weight, 600);line-height:1.2;background-color:var(--cc-sc-meta-pill-bg, #f1f5f9);color:var(--cc-sc-meta-pill-color, #475569)}@media(max-width:600px){.cc-summary-card .icon-section{margin-right:var(--cc-sc-icon-margin-mobile, .75rem)}.cc-summary-card .content-section .header{font-size:var(--cc-sc-header-size-mobile, .7rem)}.cc-summary-card .content-section .value-row .value{font-size:var(--cc-sc-value-size-mobile, 1.25rem)}.cc-summary-card .content-section .value-row .description{font-size:var(--cc-sc-desc-size-mobile, .7rem)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SummaryCardComponent, isStandalone: false, selector: "lib-summary-card", inputs: { config: "config", theme: "theme", labels: "labels" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div class=\"cc-summary-card\" (click)=\"onCardClick()\">\r\n    <!-- Icon Section (Left Side) -->\r\n    <div class=\"icon-section\" *ngIf=\"config.icon || config.iconImage\" [ngClass]=\"config.iconClass\"\r\n        [ngStyle]=\"iconStyles\">\r\n        <mat-icon *ngIf=\"config.icon\">{{ config.icon }}</mat-icon>\r\n        <img *ngIf=\"!config.icon && config.iconImage\" [src]=\"config.iconImage\" [alt]=\"labels.iconAlt\">\r\n    </div>\r\n\r\n    <!-- Right Section (Header + Value/Meta) -->\r\n    <div class=\"right-section\">\r\n        <!-- Header (Full Width on Right) -->\r\n        <div class=\"header\" [ngClass]=\"config.headerClass\" [ngStyle]=\"headerStyles\">\r\n            {{ config.header }}\r\n        </div>\r\n\r\n        <!-- Value and Meta Row -->\r\n        <div class=\"value-meta-row\">\r\n            <!-- Content Section -->\r\n            <div class=\"content-section\">\r\n                <!-- Value Row (with optional inline description) -->\r\n                <div class=\"value-row\" [class.inline-layout]=\"isDescriptionInline\">\r\n                    <div class=\"value-container\">\r\n                        <div class=\"value\" [ngClass]=\"config.valueClass\" [ngStyle]=\"valueStyles\">\r\n                            {{ config.value }}\r\n                            <span *ngIf=\"config.valueSubtext\" class=\"value-subtext\">{{ config.valueSubtext }}</span>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Description (inline or bottom based on config) -->\r\n                    <div class=\"description\" *ngIf=\"config.description\" [ngClass]=\"config.descriptionClass\"\r\n                        [ngStyle]=\"descriptionStyles\">\r\n                        {{ config.description }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Meta/Status Section (Aligned with Value) -->\r\n            <div class=\"meta-section\" *ngIf=\"config.metaData && config.metaData.length > 0\">\r\n                <div *ngFor=\"let meta of config.metaData\" class=\"meta-item\"\r\n                    [ngClass]=\"[meta.type === 'pill' ? 'meta-pill' : 'meta-text', meta.cssClass || '']\"\r\n                    [ngStyle]=\"getMetaStyles(meta)\">\r\n                    {{ meta.text }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%}.cc-summary-card{display:flex;flex-direction:row;align-items:stretch;box-sizing:border-box;font-family:var(--cc-sc-font-family, \"Inter\", sans-serif);background-color:var(--cc-sc-bg-color, #ffffff);border-radius:var(--cc-sc-border-radius, 8px);border:var(--cc-sc-border, 1px solid #e0e0e0);padding:var(--cc-sc-padding, 16px);box-shadow:var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, .05));transition:all var(--cc-sc-transition-duration, .2s) ease;height:100%;width:100%;overflow:hidden;gap:var(--cc-sc-icon-margin, 1rem)}.cc-summary-card.clickable{cursor:pointer}.cc-summary-card.clickable:hover{transform:var(--cc-sc-hover-transform);box-shadow:var(--cc-sc-hover-shadow)}.cc-summary-card.disabled{opacity:var(--cc-sc-disabled-opacity);cursor:not-allowed;pointer-events:none}.cc-summary-card .icon-section{width:var(--cc-sc-icon-box-size);height:var(--cc-sc-icon-box-size);min-width:var(--cc-sc-icon-box-size);display:flex;align-items:center;justify-content:center;border-radius:var(--cc-sc-icon-radius);background-color:var(--cc-sc-icon-bg);color:var(--cc-sc-icon-color);flex-shrink:0;align-self:center}.cc-summary-card .icon-section mat-icon{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);font-size:var(--cc-sc-icon-size);line-height:var(--cc-sc-icon-size)}.cc-summary-card .icon-section img{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);object-fit:contain}.cc-summary-card .right-section{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--cc-sc-content-gap, .5rem)}.cc-summary-card .right-section .header{font-size:var(--cc-sc-header-size);font-weight:var(--cc-sc-header-weight);text-transform:var(--cc-sc-header-transform);color:var(--cc-sc-header-color);letter-spacing:var(--cc-sc-header-letter-spacing);line-height:var(--cc-sc-header-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.cc-summary-card .right-section .value-meta-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;flex:1}.cc-summary-card .right-section .value-meta-row .content-section{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-width:0}.cc-summary-card .right-section .value-meta-row .content-section .value-row{display:flex;flex-direction:column;gap:var(--cc-sc-value-desc-gap)}.cc-summary-card .right-section .value-meta-row .content-section .value-row.inline-layout{flex-direction:row;align-items:baseline;flex-wrap:wrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value{font-size:var(--cc-sc-value-size);font-weight:var(--cc-sc-value-weight);color:var(--cc-sc-value-color);line-height:var(--cc-sc-value-line-height);white-space:nowrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value .value-subtext{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);margin-left:4px}.cc-summary-card .right-section .value-meta-row .content-section .value-row .description{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);line-height:var(--cc-sc-desc-line-height)}.cc-summary-card .right-section .value-meta-row .meta-section{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex-shrink:0;gap:6px}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item{font-size:.8125rem;line-height:1.4;white-space:nowrap;text-align:right;flex-shrink:0}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-text{color:var(--cc-sc-desc-color, #64748b);font-weight:500}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--cc-sc-meta-pill-padding, 4px 12px);border-radius:var(--cc-sc-meta-pill-radius, 20px);font-size:var(--cc-sc-meta-pill-font-size, .75rem);font-weight:var(--cc-sc-meta-pill-font-weight, 600);line-height:1.2;background-color:var(--cc-sc-meta-pill-bg, #f1f5f9);color:var(--cc-sc-meta-pill-color, #475569)}@media(max-width:600px){.cc-summary-card .icon-section{margin-right:var(--cc-sc-icon-margin-mobile, .75rem)}.cc-summary-card .content-section .header{font-size:var(--cc-sc-header-size-mobile, .7rem)}.cc-summary-card .content-section .value-row .value{font-size:var(--cc-sc-value-size-mobile, 1.25rem)}.cc-summary-card .content-section .value-row .description{font-size:var(--cc-sc-desc-size-mobile, .7rem)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SummaryCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-summary-card', standalone: false, template: "<div class=\"cc-summary-card\" (click)=\"onCardClick()\">\r\n    <!-- Icon Section (Left Side) -->\r\n    <div class=\"icon-section\" *ngIf=\"config.icon || config.iconImage\" [ngClass]=\"config.iconClass\"\r\n        [ngStyle]=\"iconStyles\">\r\n        <mat-icon *ngIf=\"config.icon\">{{ config.icon }}</mat-icon>\r\n        <img *ngIf=\"!config.icon && config.iconImage\" [src]=\"config.iconImage\" alt=\"icon\">\r\n    </div>\r\n\r\n    <!-- Right Section (Header + Value/Meta) -->\r\n    <div class=\"right-section\">\r\n        <!-- Header (Full Width on Right) -->\r\n        <div class=\"header\" [ngClass]=\"config.headerClass\" [ngStyle]=\"headerStyles\">\r\n            {{ config.header }}\r\n        </div>\r\n\r\n        <!-- Value and Meta Row -->\r\n        <div class=\"value-meta-row\">\r\n            <!-- Content Section -->\r\n            <div class=\"content-section\">\r\n                <!-- Value Row (with optional inline description) -->\r\n                <div class=\"value-row\" [class.inline-layout]=\"isDescriptionInline\">\r\n                    <div class=\"value-container\">\r\n                        <div class=\"value\" [ngClass]=\"config.valueClass\" [ngStyle]=\"valueStyles\">\r\n                            {{ config.value }}\r\n                            <span *ngIf=\"config.valueSubtext\" class=\"value-subtext\">{{ config.valueSubtext }}</span>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Description (inline or bottom based on config) -->\r\n                    <div class=\"description\" *ngIf=\"config.description\" [ngClass]=\"config.descriptionClass\"\r\n                        [ngStyle]=\"descriptionStyles\">\r\n                        {{ config.description }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Meta/Status Section (Aligned with Value) -->\r\n            <div class=\"meta-section\" *ngIf=\"config.metaData && config.metaData.length > 0\">\r\n                <div *ngFor=\"let meta of config.metaData\" class=\"meta-item\"\r\n                    [ngClass]=\"[meta.type === 'pill' ? 'meta-pill' : 'meta-text', meta.cssClass || '']\"\r\n                    [ngStyle]=\"getMetaStyles(meta)\">\r\n                    {{ meta.text }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%}.cc-summary-card{display:flex;flex-direction:row;align-items:stretch;box-sizing:border-box;font-family:var(--cc-sc-font-family, \"Inter\", sans-serif);background-color:var(--cc-sc-bg-color, #ffffff);border-radius:var(--cc-sc-border-radius, 8px);border:var(--cc-sc-border, 1px solid #e0e0e0);padding:var(--cc-sc-padding, 16px);box-shadow:var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, .05));transition:all var(--cc-sc-transition-duration, .2s) ease;height:100%;width:100%;overflow:hidden;gap:var(--cc-sc-icon-margin, 1rem)}.cc-summary-card.clickable{cursor:pointer}.cc-summary-card.clickable:hover{transform:var(--cc-sc-hover-transform);box-shadow:var(--cc-sc-hover-shadow)}.cc-summary-card.disabled{opacity:var(--cc-sc-disabled-opacity);cursor:not-allowed;pointer-events:none}.cc-summary-card .icon-section{width:var(--cc-sc-icon-box-size);height:var(--cc-sc-icon-box-size);min-width:var(--cc-sc-icon-box-size);display:flex;align-items:center;justify-content:center;border-radius:var(--cc-sc-icon-radius);background-color:var(--cc-sc-icon-bg);color:var(--cc-sc-icon-color);flex-shrink:0;align-self:center}.cc-summary-card .icon-section mat-icon{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);font-size:var(--cc-sc-icon-size);line-height:var(--cc-sc-icon-size)}.cc-summary-card .icon-section img{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);object-fit:contain}.cc-summary-card .right-section{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--cc-sc-content-gap, .5rem)}.cc-summary-card .right-section .header{font-size:var(--cc-sc-header-size);font-weight:var(--cc-sc-header-weight);text-transform:var(--cc-sc-header-transform);color:var(--cc-sc-header-color);letter-spacing:var(--cc-sc-header-letter-spacing);line-height:var(--cc-sc-header-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.cc-summary-card .right-section .value-meta-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;flex:1}.cc-summary-card .right-section .value-meta-row .content-section{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-width:0}.cc-summary-card .right-section .value-meta-row .content-section .value-row{display:flex;flex-direction:column;gap:var(--cc-sc-value-desc-gap)}.cc-summary-card .right-section .value-meta-row .content-section .value-row.inline-layout{flex-direction:row;align-items:baseline;flex-wrap:wrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value{font-size:var(--cc-sc-value-size);font-weight:var(--cc-sc-value-weight);color:var(--cc-sc-value-color);line-height:var(--cc-sc-value-line-height);white-space:nowrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value .value-subtext{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);margin-left:4px}.cc-summary-card .right-section .value-meta-row .content-section .value-row .description{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);line-height:var(--cc-sc-desc-line-height)}.cc-summary-card .right-section .value-meta-row .meta-section{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex-shrink:0;gap:6px}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item{font-size:.8125rem;line-height:1.4;white-space:nowrap;text-align:right;flex-shrink:0}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-text{color:var(--cc-sc-desc-color, #64748b);font-weight:500}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--cc-sc-meta-pill-padding, 4px 12px);border-radius:var(--cc-sc-meta-pill-radius, 20px);font-size:var(--cc-sc-meta-pill-font-size, .75rem);font-weight:var(--cc-sc-meta-pill-font-weight, 600);line-height:1.2;background-color:var(--cc-sc-meta-pill-bg, #f1f5f9);color:var(--cc-sc-meta-pill-color, #475569)}@media(max-width:600px){.cc-summary-card .icon-section{margin-right:var(--cc-sc-icon-margin-mobile, .75rem)}.cc-summary-card .content-section .header{font-size:var(--cc-sc-header-size-mobile, .7rem)}.cc-summary-card .content-section .value-row .value{font-size:var(--cc-sc-value-size-mobile, 1.25rem)}.cc-summary-card .content-section .value-row .description{font-size:var(--cc-sc-desc-size-mobile, .7rem)}}\n"] }]
+            args: [{ selector: 'lib-summary-card', standalone: false, template: "<div class=\"cc-summary-card\" (click)=\"onCardClick()\">\r\n    <!-- Icon Section (Left Side) -->\r\n    <div class=\"icon-section\" *ngIf=\"config.icon || config.iconImage\" [ngClass]=\"config.iconClass\"\r\n        [ngStyle]=\"iconStyles\">\r\n        <mat-icon *ngIf=\"config.icon\">{{ config.icon }}</mat-icon>\r\n        <img *ngIf=\"!config.icon && config.iconImage\" [src]=\"config.iconImage\" [alt]=\"labels.iconAlt\">\r\n    </div>\r\n\r\n    <!-- Right Section (Header + Value/Meta) -->\r\n    <div class=\"right-section\">\r\n        <!-- Header (Full Width on Right) -->\r\n        <div class=\"header\" [ngClass]=\"config.headerClass\" [ngStyle]=\"headerStyles\">\r\n            {{ config.header }}\r\n        </div>\r\n\r\n        <!-- Value and Meta Row -->\r\n        <div class=\"value-meta-row\">\r\n            <!-- Content Section -->\r\n            <div class=\"content-section\">\r\n                <!-- Value Row (with optional inline description) -->\r\n                <div class=\"value-row\" [class.inline-layout]=\"isDescriptionInline\">\r\n                    <div class=\"value-container\">\r\n                        <div class=\"value\" [ngClass]=\"config.valueClass\" [ngStyle]=\"valueStyles\">\r\n                            {{ config.value }}\r\n                            <span *ngIf=\"config.valueSubtext\" class=\"value-subtext\">{{ config.valueSubtext }}</span>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Description (inline or bottom based on config) -->\r\n                    <div class=\"description\" *ngIf=\"config.description\" [ngClass]=\"config.descriptionClass\"\r\n                        [ngStyle]=\"descriptionStyles\">\r\n                        {{ config.description }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Meta/Status Section (Aligned with Value) -->\r\n            <div class=\"meta-section\" *ngIf=\"config.metaData && config.metaData.length > 0\">\r\n                <div *ngFor=\"let meta of config.metaData\" class=\"meta-item\"\r\n                    [ngClass]=\"[meta.type === 'pill' ? 'meta-pill' : 'meta-text', meta.cssClass || '']\"\r\n                    [ngStyle]=\"getMetaStyles(meta)\">\r\n                    {{ meta.text }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%}.cc-summary-card{display:flex;flex-direction:row;align-items:stretch;box-sizing:border-box;font-family:var(--cc-sc-font-family, \"Inter\", sans-serif);background-color:var(--cc-sc-bg-color, #ffffff);border-radius:var(--cc-sc-border-radius, 8px);border:var(--cc-sc-border, 1px solid #e0e0e0);padding:var(--cc-sc-padding, 16px);box-shadow:var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, .05));transition:all var(--cc-sc-transition-duration, .2s) ease;height:100%;width:100%;overflow:hidden;gap:var(--cc-sc-icon-margin, 1rem)}.cc-summary-card.clickable{cursor:pointer}.cc-summary-card.clickable:hover{transform:var(--cc-sc-hover-transform);box-shadow:var(--cc-sc-hover-shadow)}.cc-summary-card.disabled{opacity:var(--cc-sc-disabled-opacity);cursor:not-allowed;pointer-events:none}.cc-summary-card .icon-section{width:var(--cc-sc-icon-box-size);height:var(--cc-sc-icon-box-size);min-width:var(--cc-sc-icon-box-size);display:flex;align-items:center;justify-content:center;border-radius:var(--cc-sc-icon-radius);background-color:var(--cc-sc-icon-bg);color:var(--cc-sc-icon-color);flex-shrink:0;align-self:center}.cc-summary-card .icon-section mat-icon{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);font-size:var(--cc-sc-icon-size);line-height:var(--cc-sc-icon-size)}.cc-summary-card .icon-section img{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);object-fit:contain}.cc-summary-card .right-section{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--cc-sc-content-gap, .5rem)}.cc-summary-card .right-section .header{font-size:var(--cc-sc-header-size);font-weight:var(--cc-sc-header-weight);text-transform:var(--cc-sc-header-transform);color:var(--cc-sc-header-color);letter-spacing:var(--cc-sc-header-letter-spacing);line-height:var(--cc-sc-header-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.cc-summary-card .right-section .value-meta-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;flex:1}.cc-summary-card .right-section .value-meta-row .content-section{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-width:0}.cc-summary-card .right-section .value-meta-row .content-section .value-row{display:flex;flex-direction:column;gap:var(--cc-sc-value-desc-gap)}.cc-summary-card .right-section .value-meta-row .content-section .value-row.inline-layout{flex-direction:row;align-items:baseline;flex-wrap:wrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value{font-size:var(--cc-sc-value-size);font-weight:var(--cc-sc-value-weight);color:var(--cc-sc-value-color);line-height:var(--cc-sc-value-line-height);white-space:nowrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value .value-subtext{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);margin-left:4px}.cc-summary-card .right-section .value-meta-row .content-section .value-row .description{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);line-height:var(--cc-sc-desc-line-height)}.cc-summary-card .right-section .value-meta-row .meta-section{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex-shrink:0;gap:6px}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item{font-size:.8125rem;line-height:1.4;white-space:nowrap;text-align:right;flex-shrink:0}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-text{color:var(--cc-sc-desc-color, #64748b);font-weight:500}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--cc-sc-meta-pill-padding, 4px 12px);border-radius:var(--cc-sc-meta-pill-radius, 20px);font-size:var(--cc-sc-meta-pill-font-size, .75rem);font-weight:var(--cc-sc-meta-pill-font-weight, 600);line-height:1.2;background-color:var(--cc-sc-meta-pill-bg, #f1f5f9);color:var(--cc-sc-meta-pill-color, #475569)}@media(max-width:600px){.cc-summary-card .icon-section{margin-right:var(--cc-sc-icon-margin-mobile, .75rem)}.cc-summary-card .content-section .header{font-size:var(--cc-sc-header-size-mobile, .7rem)}.cc-summary-card .content-section .value-row .value{font-size:var(--cc-sc-value-size-mobile, 1.25rem)}.cc-summary-card .content-section .value-row .description{font-size:var(--cc-sc-desc-size-mobile, .7rem)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], theme: [{
                 type: Input
+            }], labels: [{
+                type: Input
             }], cardClick: [{
                 type: Output
             }] } });
@@ -2931,6 +2935,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+/**
+ * Recursively translates the Configuration object using the provided labels map.
+ * This function processes:
+ * - Section Titles
+ * - Field Labels
+ * - Placeholders
+ * - Help Texts
+ * - Option Labels (for static options)
+ * - Repeater Labels (addLabel, repeaterItemLabel)
+ *
+ * @param config The FormConfig object to translate
+ * @param labelsMap A map of key-value pairs for translation (Flattened JSON)
+ * @returns A new FormConfig object with translated strings
+ */
+function translateConfig(config, labelsMap) {
+    if (!config || !labelsMap) {
+        return config;
+    }
+    // Deep clone to avoid mutating original config, if not already cloned
+    // Note: Assuming config passed here is already a clone to be modified or we clone it.
+    // To be safe, let's clone it if it's the root call, but this function is helper.
+    // In component we do: processedConfig = JSON.parse(JSON.stringify(config)); -> translateConfig(processedConfig, map)
+    // So distinct reference is passed.
+    // Helper to translate a single key
+    const t = (key) => {
+        return labelsMap[key] || key;
+    };
+    if (config.sections) {
+        config.sections.forEach((section) => {
+            if (section.sectionTitle) {
+                section.sectionTitle = t(section.sectionTitle);
+            }
+            if (section.repeaterItemLabel) {
+                section.repeaterItemLabel = t(section.repeaterItemLabel);
+            }
+            if (section.addLabel) {
+                section.addLabel = t(section.addLabel);
+            }
+            if (section.fields) {
+                section.fields.forEach((field) => {
+                    translateField(field, t);
+                });
+            }
+        });
+    }
+    return config;
+}
+function translateField(field, t) {
+    if (field.label) {
+        field.label = t(field.label);
+    }
+    if (field.placeholder) {
+        field.placeholder = t(field.placeholder);
+    }
+    if (field.helpText) {
+        field.helpText = t(field.helpText);
+    }
+    if (field.suffixText) {
+        field.suffixText = t(field.suffixText);
+    }
+    if (field.prefixText) { // Assuming prefixText might exist or be added
+        field.prefixText = t(field.prefixText);
+    }
+    // Translate options if they exist
+    if (field.options) {
+        field.options.forEach((opt) => {
+            if (opt.label) {
+                opt.label = t(opt.label);
+            }
+        });
+    }
+    // Handle subFields for composite type
+    if (field.subFields) {
+        field.subFields.forEach((sub) => {
+            translateField(sub, t);
+        });
+    }
+}
+
 class ConfigurableFormComponent {
     fb;
     snackBar;
@@ -2939,6 +3022,7 @@ class ConfigurableFormComponent {
     jsonConfig;
     data = {};
     baseApiUrl = '';
+    labels;
     optionsLoad = new EventEmitter();
     form;
     processedConfig;
@@ -2971,6 +3055,10 @@ class ConfigurableFormComponent {
         else {
             return;
         }
+        // Apply translations if labels and labelsObject are provided
+        if (this.labels && this.labels.labelsObject) {
+            translateConfig(this.processedConfig, this.labels.labelsObject);
+        }
         this.normalizeFields();
         this.initializeFieldVisibility();
         this.buildForm();
@@ -3197,7 +3285,7 @@ class ConfigurableFormComponent {
         const formArray = this.getFormArray(arrayName);
         // Check max items
         if (section.maxItems && formArray.length >= section.maxItems) {
-            this.snackBar.open(`Maximum ${section.maxItems} items allowed`, 'Close', { duration: 3000 });
+            this.snackBar.open(this.labels.errorMaxItemsAllowed.replace('{0}', String(section.maxItems)), this.labels.closeSnackBar, { duration: 3000 });
             return;
         }
         formArray.push(this.createGroup(section.fields));
@@ -3223,14 +3311,6 @@ class ConfigurableFormComponent {
     setupDependencies() {
         this.processedConfig.sections.forEach(section => {
             section.fields.forEach(field => {
-                if (field.dependsOn) {
-                    const control = this.form.get(field.dependsOn);
-                    if (control) {
-                        control.valueChanges.subscribe(value => {
-                            this.onFieldValueChange(field, value);
-                        });
-                    }
-                }
                 // Also setup for fields with dependent array
                 if (field.dependent && field.dependent.length > 0) {
                     const control = this.form.get(field.name);
@@ -3383,7 +3463,7 @@ class ConfigurableFormComponent {
             const file = files[i];
             // Check file size (5MB limit)
             if (file.size > 5 * 1024 * 1024) {
-                this.snackBar.open(`File ${file.name} exceeds 5MB limit`, 'Close', { duration: 3000 });
+                this.snackBar.open(this.labels.errorFileLimitExceeded.replace('{0}', file.name), this.labels.closeSnackBar, { duration: 3000 });
                 continue;
             }
             uploadedFiles.push({
@@ -3453,11 +3533,11 @@ class ConfigurableFormComponent {
         return this.passwordFieldState.get(fieldName) || false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$2.MatSnackBar }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfigurableFormComponent, isStandalone: true, selector: "lib-configurable-form", inputs: { config: "config", jsonConfig: "jsonConfig", data: "data", baseApiUrl: "baseApiUrl" }, outputs: { optionsLoad: "optionsLoad" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"configurable-form-container\" *ngIf=\"form\">\r\n\r\n    <ng-container *ngFor=\"let section of sections\">\r\n\r\n        <!-- Repeater Section -->\r\n        <div *ngIf=\"section.isRepeater; else normalSection\"\r\n            [ngClass]=\"section.noCardLayout ? 'section-no-card' : 'section-card'\">\r\n            <div class=\"section-header\" *ngIf=\"section.sectionTitle\">\r\n                <h3 class=\"section-title\">{{ section.sectionTitle }}</h3>\r\n                <button *ngIf=\"section.collapsible\" mat-icon-button type=\"button\" (click)=\"toggleSection(section)\">\r\n                    <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div [formArrayName]=\"section.formArrayName || 'items'\" *ngIf=\"!section.collapsed\">\r\n                <div *ngFor=\"let item of getFormArray(section.formArrayName!).controls; let i = index\"\r\n                    [formGroupName]=\"i\" class=\"repeater-item\">\r\n                    <div class=\"repeater-item-header\" *ngIf=\"getFormArray(section.formArrayName!).length > 1\">\r\n                        <span class=\"text-small\">{{ section.repeaterItemLabel || 'Item' }} {{i + 1}}</span>\r\n                        <button mat-icon-button color=\"warn\" type=\"button\"\r\n                            (click)=\"removeRepeaterItem(section.formArrayName!, i)\"\r\n                            [disabled]=\"section.minItems && getFormArray(section.formArrayName!).length <= section.minItems\">\r\n                            <mat-icon>delete</mat-icon>\r\n                        </button>\r\n                    </div>\r\n\r\n                    <!-- Fields Grid -->\r\n                    <div class=\"form-grid\">\r\n                        <div *ngFor=\"let field of section.fields\" [ngClass]=\"['form-col', field.class || 'col-12']\"\r\n                            [hidden]=\"!isFieldVisible(field)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"fieldTemplate; context: {field: field, group: item}\"></ng-container>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"repeater-separator\" *ngIf=\"i < getFormArray(section.formArrayName!).length - 1\"></div>\r\n                </div>\r\n            </div>\r\n\r\n            <button mat-button color=\"primary\" type=\"button\" (click)=\"addRepeaterItem(section)\" class=\"add-btn\"\r\n                *ngIf=\"!section.collapsed\"\r\n                [disabled]=\"section.maxItems && getFormArray(section.formArrayName!).length >= section.maxItems\">\r\n                <mat-icon>add_circle_outline</mat-icon> {{ section.addLabel || 'Add More' }}\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Normal Section -->\r\n        <ng-template #normalSection>\r\n            <div [ngClass]=\"section.noCardLayout ? 'section-no-card' : 'section-card'\">\r\n                <div class=\"section-header\" *ngIf=\"section.sectionTitle\">\r\n                    <h3 class=\"section-title\">{{ section.sectionTitle }}</h3>\r\n                    <button *ngIf=\"section.collapsible\" mat-icon-button type=\"button\" (click)=\"toggleSection(section)\">\r\n                        <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"form-grid\" *ngIf=\"!section.collapsed\">\r\n                    <div *ngFor=\"let field of section.fields\" [ngClass]=\"['form-col', field.class || 'col-12']\"\r\n                        [hidden]=\"!isFieldVisible(field)\">\r\n                        <!-- Pass the root form group to the template -->\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"fieldTemplate; context: {field: field, group: form}\"></ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n    </ng-container>\r\n\r\n</form>\r\n\r\n<!-- Reusable Field Template -->\r\n<ng-template #fieldTemplate let-field=\"field\" let-group=\"group\">\r\n    <div [formGroup]=\"group\">\r\n\r\n        <!-- Text / Email / Number / Tel / URL (Password removed) -->\r\n        <div *ngIf=\"['text', 'email', 'number', 'tel', 'url'].includes(field.type || '')\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"input-wrapper\">\r\n                <input [type]=\"field.type\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder || ''\"\r\n                    [readonly]=\"field.readonly\" class=\"form-input\" [name]=\"field.name\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                    [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\">\r\n                <div class=\"input-suffix\">\r\n                    <span class=\"suffix-text\" *ngIf=\"field.suffixText\">{{ field.suffixText }}</span>\r\n                    <mat-icon *ngIf=\"field.suffixIcon\">{{ field.suffixIcon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                </div>\r\n            </div>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} Characters\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Password Field (Separated) -->\r\n        <div *ngIf=\"field.type === 'password'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"input-wrapper\">\r\n                <input [type]=\"isPasswordVisible(field.name) ? 'text' : 'password'\" [formControlName]=\"field.name\"\r\n                    [placeholder]=\"field.placeholder || ''\" [readonly]=\"field.readonly\" class=\"form-input\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                    [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\">\r\n                <div class=\"input-suffix\">\r\n                    <span class=\"suffix-text\" *ngIf=\"field.suffixText\">{{ field.suffixText }}</span>\r\n                    <mat-icon *ngIf=\"field.suffixIcon\">{{ field.suffixIcon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                    <mat-icon class=\"password-toggle-icon\" (click)=\"togglePassword(field.name)\">\r\n                        {{ isPasswordVisible(field.name) ? 'visibility' : 'visibility_off' }}\r\n                    </mat-icon>\r\n                </div>\r\n            </div>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} Characters\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Textarea -->\r\n        <div *ngIf=\"field.type === 'textarea'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <textarea [formControlName]=\"field.name\" [placeholder]=\"field.placeholder || ''\" [readonly]=\"field.readonly\"\r\n                class=\"form-input form-textarea\" rows=\"4\"\r\n                [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\"></textarea>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} Characters\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Select / Dropdown -->\r\n        <div *ngIf=\"field.type === 'select' || field.type === 'dropdown'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <select [formControlName]=\"field.name\" class=\"form-input\"\r\n                [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n                <option value=\"\" disabled selected *ngIf=\"field.placeholder\">{{ field.placeholder }}</option>\r\n                <option value=\"\" disabled selected *ngIf=\"!field.placeholder\">Select</option>\r\n                <option *ngFor=\"let opt of getFieldOptions(field)\" [value]=\"opt.value\">{{ opt.label }}</option>\r\n            </select>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Date -->\r\n        <div *ngIf=\"field.type === 'date'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"relative\">\r\n                <input matInput [matDatepicker]=\"picker\" [formControlName]=\"field.name\"\r\n                    [placeholder]=\"field.placeholder || ''\" class=\"form-input\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n                <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-toggle\"></mat-datepicker-toggle>\r\n                <mat-datepicker #picker></mat-datepicker>\r\n            </div>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Radio -->\r\n        <div *ngIf=\"field.type === 'radio'\" class=\"radio-group-container\"\r\n            [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n            <label class=\"field-label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </label>\r\n            <mat-radio-group [formControlName]=\"field.name\" class=\"radio-group\">\r\n                <mat-radio-button *ngFor=\"let opt of getFieldOptions(field)\" [value]=\"opt.value\" class=\"radio-button\">\r\n                    {{ opt.label }}\r\n                </mat-radio-button>\r\n            </mat-radio-group>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Composite Field (Sub-groups) -->\r\n        <div *ngIf=\"field.type === 'composite'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"composite-container\">\r\n                <ng-container *ngFor=\"let sub of field.subFields; let last = last\">\r\n                    <div class=\"composite-sub-field\" style=\"flex: 1;\">\r\n                        <div class=\"field-label\" *ngIf=\"sub.label\"\r\n                            style=\"font-size: 0.75rem; font-weight: normal; margin-bottom: 0.25rem;\">\r\n                            {{ sub.label }}\r\n                        </div>\r\n                        <div class=\"input-wrapper\">\r\n                            <input [type]=\"sub.type\" [formControlName]=\"sub.name\" [placeholder]=\"sub.placeholder || ''\"\r\n                                [readonly]=\"sub.readonly\" class=\"form-input\"\r\n                                [class.is-invalid]=\"group.get(sub.name)?.touched && group.get(sub.name)?.invalid\">\r\n                            <div class=\"input-suffix\" [class.color-suffix]=\"sub.suffixText === '%'\">\r\n                                <span class=\"suffix-text\" *ngIf=\"sub.suffixText\">{{ sub.suffixText }}</span>\r\n                                <mat-icon *ngIf=\"sub.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Adjust separator alignment if labels are present -->\r\n                    <span class=\"separator\" *ngIf=\"!last && field.separator\"\r\n                        [style.padding-top]=\"sub.label ? '1.25rem' : '0'\">{{ field.separator }}</span>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n            <div class=\"error-text text-danger text-small mt-1\" *ngIf=\"group.errors?.['invalid_minMax_' + field.name]\">\r\n                Min value cannot be greater than Max value.\r\n            </div>\r\n            <div class=\"error-text text-danger text-small mt-1\"\r\n                *ngIf=\"group.errors?.['invalid_percentageTotal_' + field.name]\">\r\n                Total percentage must be 100%.\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- File Upload -->\r\n    <div *ngIf=\"field.type === 'file'\" class=\"field-container\">\r\n        <div class=\"field-label\" *ngIf=\"field.label\">\r\n            {{ field.label }}\r\n            <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n        </div>\r\n\r\n        <!-- Upload Box -->\r\n        <div class=\"upload-box\" (click)=\"fileInput.click()\"\r\n            [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n            *ngIf=\"!field.uploadedFiles || field.uploadedFiles.length === 0 || field.multiple\">\r\n            <mat-icon class=\"upload-icon\">cloud_upload</mat-icon>\r\n            <div class=\"upload-text\">Click to upload File</div>\r\n            <div class=\"upload-hint\">PDF, DOCX, JPG, PNG (Max 5MB)</div>\r\n            <input #fileInput type=\"file\" [attr.multiple]=\"field.multiple ? true : null\" [attr.accept]=\"field.accept\"\r\n                (change)=\"onFileChange($event, field)\" style=\"display: none;\">\r\n        </div>\r\n\r\n        <!-- Uploaded Files List -->\r\n        <div class=\"uploaded-files-list\" *ngIf=\"field.uploadedFiles && field.uploadedFiles.length > 0\">\r\n            <div class=\"uploaded-file-item\" *ngFor=\"let file of field.uploadedFiles; let i = index\">\r\n                <div class=\"file-icon\">\r\n                    <mat-icon class=\"pdf-icon\" *ngIf=\"file.type === 'application/pdf'\">picture_as_pdf</mat-icon>\r\n                    <mat-icon class=\"doc-icon\"\r\n                        *ngIf=\"file.type.includes('word') || file.type.includes('document')\">description</mat-icon>\r\n                    <mat-icon class=\"img-icon\" *ngIf=\"file.type.includes('image')\">image</mat-icon>\r\n                    <mat-icon class=\"file-icon-default\"\r\n                        *ngIf=\"!file.type.includes('pdf') && !file.type.includes('word') && !file.type.includes('document') && !file.type.includes('image')\">insert_drive_file</mat-icon>\r\n                </div>\r\n                <div class=\"file-info\">\r\n                    <div class=\"file-name\">{{ file.name }}</div>\r\n                    <div class=\"file-size\">{{ (file.size / 1024).toFixed(2) }} KB</div>\r\n                </div>\r\n                <button mat-icon-button color=\"warn\" type=\"button\" (click)=\"removeFile(field, i)\"\r\n                    class=\"remove-file-btn\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</ng-template>", styles: [":host{display:block;width:100%}.configurable-form-container{padding:0;font-family:var(--cf-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.configurable-form-container .section-card{background:var(--cf-surface-background, #ffffff);border:1px solid var(--cf-border-color, #D1D5DB);border-radius:var(--cf-section-radius, 12px);padding:var(--cf-section-padding, 2rem);margin-bottom:var(--cf-section-spacing, 1.5rem);box-shadow:var(--cf-section-shadow, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06))}.configurable-form-container .section-card:last-of-type{margin-bottom:0}.configurable-form-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--cf-section-spacing, 1.5rem);padding-bottom:1rem;border-bottom:2px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .section-title{font-size:var(--cf-section-title-size, 1.25rem);font-weight:var(--cf-section-title-weight, 600);color:var(--cf-text-primary, #111827);margin:0;letter-spacing:-.025em}.configurable-form-container .form-grid{display:flex;flex-wrap:wrap;margin-left:-.625rem;margin-right:-.625rem}.configurable-form-container .form-col{position:relative;width:100%;padding-left:.625rem;padding-right:.625rem;margin-bottom:1.25rem}.configurable-form-container .col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.configurable-form-container .col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.configurable-form-container .col-3{flex:0 0 25%;max-width:25%}.configurable-form-container .col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.configurable-form-container .col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.configurable-form-container .col-6{flex:0 0 50%;max-width:50%}.configurable-form-container .col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.configurable-form-container .col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.configurable-form-container .col-9{flex:0 0 75%;max-width:75%}.configurable-form-container .col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.configurable-form-container .col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.configurable-form-container .col-12{flex:0 0 100%;max-width:100%}@media(min-width:769px){.configurable-form-container .col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.configurable-form-container .col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.configurable-form-container .col-md-3{flex:0 0 25%;max-width:25%}.configurable-form-container .col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.configurable-form-container .col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.configurable-form-container .col-md-6{flex:0 0 50%;max-width:50%}.configurable-form-container .col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.configurable-form-container .col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.configurable-form-container .col-md-9{flex:0 0 75%;max-width:75%}.configurable-form-container .col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.configurable-form-container .col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.configurable-form-container .col-md-12{flex:0 0 100%;max-width:100%}}.configurable-form-container .field-container{margin-bottom:0}.configurable-form-container .field-label{display:block;font-size:var(--cf-label-size, .875rem);font-weight:var(--cf-label-weight, 600);color:var(--cf-text-primary, #111827);margin-bottom:.5rem;line-height:1.25rem}.configurable-form-container .field-label .text-danger{color:var(--cf-error-color, #DC2626);margin-left:.125rem}.configurable-form-container .input-wrapper{position:relative;display:flex;align-items:center}.configurable-form-container .form-input{width:100%;padding:var(--cf-input-padding-y, .625rem) var(--cf-input-padding-x, .875rem);font-size:var(--cf-input-font-size, .875rem);line-height:1.5;color:var(--cf-text-primary, #111827);background-color:var(--cf-input-bg, #ffffff);border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:var(--cf-input-radius, 8px);transition:all .2s ease;font-family:inherit}.configurable-form-container .form-input:hover:not(:disabled):not([readonly]){border-color:var(--cf-input-hover-border-color, #9CA3AF)}.configurable-form-container .form-input:focus{outline:none;border-color:var(--cf-primary-color, #3B82F6);box-shadow:0 0 0 3px #3b82f61a}.configurable-form-container .form-input::placeholder{color:#9ca3af}.configurable-form-container .form-input:disabled,.configurable-form-container .form-input[readonly]{background-color:var(--cf-disabled-background, #F3F4F6);color:var(--cf-text-secondary, #6B7280);cursor:not-allowed;border-color:#e5e7eb}.configurable-form-container .form-input.is-invalid{border-color:var(--cf-error-color, #DC2626);background-color:#fef2f2}.configurable-form-container .form-input.is-invalid:focus{box-shadow:0 0 0 3px #dc26261a}.configurable-form-container select.form-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}.configurable-form-container select.form-input:disabled{cursor:not-allowed}.configurable-form-container .form-textarea{resize:vertical;min-height:100px;font-family:inherit}.configurable-form-container .input-suffix{position:absolute;right:.75rem;display:flex;align-items:center;gap:.5rem;pointer-events:none}.configurable-form-container .input-suffix .password-toggle-icon{pointer-events:auto;cursor:pointer}.configurable-form-container .input-suffix .password-toggle-icon:hover{color:var(--cf-text-primary, #111827)}.configurable-form-container .input-suffix .suffix-text{font-size:.875rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .input-suffix mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .input-suffix .lock-icon{color:#9ca3af}.configurable-form-container .input-suffix.color-suffix .suffix-text{color:var(--cf-primary-color, #3B82F6);font-weight:600}.configurable-form-container .char-count-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.configurable-form-container .char-count{font-size:.75rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .hint-text{font-size:var(--cf-hint-size, .75rem);color:var(--cf-text-secondary, #6B7280);margin-top:.375rem;line-height:1.25rem}.configurable-form-container .mt-2{margin-top:.5rem}.configurable-form-container .radio-group-container.is-invalid .field-label{color:var(--cf-error-color, #DC2626)}.configurable-form-container .radio-group{display:flex;gap:2rem;flex-wrap:wrap;margin-top:.5rem}.configurable-form-container .radio-button{margin:0}.configurable-form-container .composite-container{display:flex;align-items:center;gap:.75rem}.configurable-form-container .composite-container .separator{font-size:.875rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .composite-container .input-wrapper{flex:1}.configurable-form-container .upload-box{border:2px dashed var(--cf-border-color, #D1D5DB);border-radius:var(--cf-section-radius, 12px);padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s ease;background-color:var(--cf-hover-background, #F9FAFB)}.configurable-form-container .upload-box:hover{border-color:var(--cf-primary-color, #3B82F6);background-color:#3b82f608}.configurable-form-container .upload-box.is-invalid{border-color:var(--cf-error-color, #DC2626);background-color:#fef2f2}.configurable-form-container .upload-box .upload-icon{font-size:3rem;width:3rem;height:3rem;color:var(--cf-primary-color, #3B82F6);margin-bottom:.75rem}.configurable-form-container .upload-box .upload-text{font-size:.875rem;color:var(--cf-text-primary, #111827);font-weight:500;margin-bottom:.375rem}.configurable-form-container .upload-box .upload-hint{font-size:.75rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-files-list{margin-top:1rem}.configurable-form-container .uploaded-file-item{display:flex;align-items:center;gap:.75rem;padding:.875rem;border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:8px;margin-bottom:.5rem;background-color:var(--cf-hover-background, #F9FAFB);transition:all .2s ease}.configurable-form-container .uploaded-file-item:hover{border-color:#9ca3af;box-shadow:0 1px 3px #0000001a}.configurable-form-container .uploaded-file-item .file-icon mat-icon{font-size:2rem;width:2rem;height:2rem}.configurable-form-container .uploaded-file-item .file-icon mat-icon.pdf-icon{color:#dc2626}.configurable-form-container .uploaded-file-item .file-icon mat-icon.doc-icon{color:#2563eb}.configurable-form-container .uploaded-file-item .file-icon mat-icon.img-icon{color:#059669}.configurable-form-container .uploaded-file-item .file-icon mat-icon.file-icon-default{color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-file-item .file-info{flex:1}.configurable-form-container .uploaded-file-item .file-info .file-name{font-size:.875rem;color:var(--cf-text-primary, #111827);font-weight:500;margin-bottom:.125rem}.configurable-form-container .uploaded-file-item .file-info .file-size{font-size:.75rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-file-item .remove-file-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}.configurable-form-container .relative{position:relative}.configurable-form-container .date-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%)}.configurable-form-container .repeater-item{padding:1.5rem;border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:10px;margin-bottom:1rem;background-color:var(--cf-hover-background, #F9FAFB);transition:all .2s ease}.configurable-form-container .repeater-item:hover{border-color:#9ca3af;box-shadow:0 2px 4px #0000000d}.configurable-form-container .repeater-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1.5px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .repeater-item-header .text-small{font-size:.875rem;font-weight:600;color:var(--cf-text-primary, #111827);text-transform:uppercase;letter-spacing:.025em}.configurable-form-container .repeater-separator{height:1px;background-color:var(--cf-border-color, #D1D5DB);margin:1.5rem 0}.configurable-form-container .add-btn{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background-color:transparent;color:var(--cf-primary-color, #3B82F6);border:1.5px solid var(--cf-primary-color, #3B82F6);border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.configurable-form-container .add-btn:hover:not(:disabled){background-color:var(--cf-primary-color, #3B82F6);color:#fff}.configurable-form-container .add-btn:disabled{opacity:.5;cursor:not-allowed;border-color:var(--cf-disabled-background, #E5E7EB)}.configurable-form-container .add-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}@media(max-width:768px){.configurable-form-container .section-card{padding:1.25rem;border-radius:8px}.configurable-form-container .form-grid{margin-left:-.5rem;margin-right:-.5rem}.configurable-form-container .form-col{padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.configurable-form-container .radio-group{flex-direction:column;gap:.75rem}.configurable-form-container .composite-container{flex-direction:column;align-items:stretch}.configurable-form-container .composite-container .separator{text-align:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfigurableFormComponent, isStandalone: true, selector: "lib-configurable-form", inputs: { config: "config", jsonConfig: "jsonConfig", data: "data", baseApiUrl: "baseApiUrl", labels: "labels" }, outputs: { optionsLoad: "optionsLoad" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"configurable-form-container\" *ngIf=\"form\">\r\n\r\n    <ng-container *ngFor=\"let section of sections\">\r\n\r\n        <!-- Repeater Section -->\r\n        <div *ngIf=\"section.isRepeater; else normalSection\"\r\n            [ngClass]=\"section.noCardLayout ? 'section-no-card' : 'section-card'\">\r\n            <div class=\"section-header\" *ngIf=\"section.sectionTitle\">\r\n                <h3 class=\"section-title\">{{ section.sectionTitle }}</h3>\r\n                <button *ngIf=\"section.collapsible\" mat-icon-button type=\"button\" (click)=\"toggleSection(section)\">\r\n                    <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div [formArrayName]=\"section.formArrayName || 'items'\" *ngIf=\"!section.collapsed\">\r\n                <div *ngFor=\"let item of getFormArray(section.formArrayName!).controls; let i = index\"\r\n                    [formGroupName]=\"i\" class=\"repeater-item\">\r\n                    <div class=\"repeater-item-header\" *ngIf=\"getFormArray(section.formArrayName!).length > 1\">\r\n                        <span class=\"text-small\">{{ section.repeaterItemLabel || labels.repeaterItemDefaultLabel }} {{i\r\n                            + 1}}</span>\r\n                        <button mat-icon-button color=\"warn\" type=\"button\"\r\n                            (click)=\"removeRepeaterItem(section.formArrayName!, i)\"\r\n                            [disabled]=\"section.minItems && getFormArray(section.formArrayName!).length <= section.minItems\">\r\n                            <mat-icon>delete</mat-icon>\r\n                        </button>\r\n                    </div>\r\n\r\n                    <!-- Fields Grid -->\r\n                    <div class=\"form-grid\">\r\n                        <div *ngFor=\"let field of section.fields\" [ngClass]=\"['form-col', field.class || 'col-12']\"\r\n                            [hidden]=\"!isFieldVisible(field)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"fieldTemplate; context: {field: field, group: item}\"></ng-container>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"repeater-separator\" *ngIf=\"i < getFormArray(section.formArrayName!).length - 1\"></div>\r\n                </div>\r\n            </div>\r\n\r\n            <button mat-button color=\"primary\" type=\"button\" (click)=\"addRepeaterItem(section)\" class=\"add-btn\"\r\n                *ngIf=\"!section.collapsed\"\r\n                [disabled]=\"section.maxItems && getFormArray(section.formArrayName!).length >= section.maxItems\">\r\n                <mat-icon>add_circle_outline</mat-icon> {{ section.addLabel || labels.addMoreDefaultLabel }}\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Normal Section -->\r\n        <ng-template #normalSection>\r\n            <div [ngClass]=\"section.noCardLayout ? 'section-no-card' : 'section-card'\">\r\n                <div class=\"section-header\" *ngIf=\"section.sectionTitle\">\r\n                    <h3 class=\"section-title\">{{ section.sectionTitle }}</h3>\r\n                    <button *ngIf=\"section.collapsible\" mat-icon-button type=\"button\" (click)=\"toggleSection(section)\">\r\n                        <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"form-grid\" *ngIf=\"!section.collapsed\">\r\n                    <div *ngFor=\"let field of section.fields\" [ngClass]=\"['form-col', field.class || 'col-12']\"\r\n                        [hidden]=\"!isFieldVisible(field)\">\r\n                        <!-- Pass the root form group to the template -->\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"fieldTemplate; context: {field: field, group: form}\"></ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n    </ng-container>\r\n\r\n</form>\r\n\r\n<!-- Reusable Field Template -->\r\n<ng-template #fieldTemplate let-field=\"field\" let-group=\"group\">\r\n    <div [formGroup]=\"group\">\r\n\r\n        <!-- Text / Email / Number / Tel / URL (Password removed) -->\r\n        <div *ngIf=\"['text', 'email', 'number', 'tel', 'url'].includes(field.type || '')\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"input-wrapper\">\r\n                <input [type]=\"field.type\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder || ''\"\r\n                    [readonly]=\"field.readonly\" class=\"form-input\" [name]=\"field.name\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                    [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\">\r\n                <div class=\"input-suffix\">\r\n                    <span class=\"suffix-text\" *ngIf=\"field.suffixText\">{{ field.suffixText }}</span>\r\n                    <mat-icon *ngIf=\"field.suffixIcon\">{{ field.suffixIcon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                </div>\r\n            </div>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} {{ labels.charactersLabel }}\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Password Field (Separated) -->\r\n        <div *ngIf=\"field.type === 'password'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"input-wrapper\">\r\n                <input [type]=\"isPasswordVisible(field.name) ? 'text' : 'password'\" [formControlName]=\"field.name\"\r\n                    [placeholder]=\"field.placeholder || ''\" [readonly]=\"field.readonly\" class=\"form-input\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                    [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\">\r\n                <div class=\"input-suffix\">\r\n                    <span class=\"suffix-text\" *ngIf=\"field.suffixText\">{{ field.suffixText }}</span>\r\n                    <mat-icon *ngIf=\"field.suffixIcon\">{{ field.suffixIcon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                    <mat-icon class=\"password-toggle-icon\" (click)=\"togglePassword(field.name)\">\r\n                        {{ isPasswordVisible(field.name) ? 'visibility' : 'visibility_off' }}\r\n                    </mat-icon>\r\n                </div>\r\n            </div>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} {{ labels.charactersLabel }}\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Textarea -->\r\n        <div *ngIf=\"field.type === 'textarea'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <textarea [formControlName]=\"field.name\" [placeholder]=\"field.placeholder || ''\" [readonly]=\"field.readonly\"\r\n                class=\"form-input form-textarea\" rows=\"4\"\r\n                [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\"></textarea>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} {{ labels.charactersLabel }}\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Select / Dropdown -->\r\n        <div *ngIf=\"field.type === 'select' || field.type === 'dropdown'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <select [formControlName]=\"field.name\" class=\"form-input\"\r\n                [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n                <option value=\"\" disabled selected *ngIf=\"field.placeholder\">{{ field.placeholder }}</option>\r\n                <option value=\"\" disabled selected *ngIf=\"!field.placeholder\">{{ labels.selectDefaultPlaceholder }}\r\n                </option>\r\n                <option *ngFor=\"let opt of getFieldOptions(field)\" [value]=\"opt.value\">{{ opt.label }}</option>\r\n            </select>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Date -->\r\n        <div *ngIf=\"field.type === 'date'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"relative\">\r\n                <input matInput [matDatepicker]=\"picker\" [formControlName]=\"field.name\"\r\n                    [placeholder]=\"field.placeholder || ''\" class=\"form-input\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n                <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-toggle\"></mat-datepicker-toggle>\r\n                <mat-datepicker #picker></mat-datepicker>\r\n            </div>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Radio -->\r\n        <div *ngIf=\"field.type === 'radio'\" class=\"radio-group-container\"\r\n            [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n            <label class=\"field-label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </label>\r\n            <mat-radio-group [formControlName]=\"field.name\" class=\"radio-group\">\r\n                <mat-radio-button *ngFor=\"let opt of getFieldOptions(field)\" [value]=\"opt.value\" class=\"radio-button\">\r\n                    {{ opt.label }}\r\n                </mat-radio-button>\r\n            </mat-radio-group>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Composite Field (Sub-groups) -->\r\n        <div *ngIf=\"field.type === 'composite'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"composite-container\">\r\n                <ng-container *ngFor=\"let sub of field.subFields; let last = last\">\r\n                    <div class=\"composite-sub-field\" style=\"flex: 1;\">\r\n                        <div class=\"field-label\" *ngIf=\"sub.label\"\r\n                            style=\"font-size: 0.75rem; font-weight: normal; margin-bottom: 0.25rem;\">\r\n                            {{ sub.label }}\r\n                        </div>\r\n                        <div class=\"input-wrapper\">\r\n                            <input [type]=\"sub.type\" [formControlName]=\"sub.name\" [placeholder]=\"sub.placeholder || ''\"\r\n                                [readonly]=\"sub.readonly\" class=\"form-input\"\r\n                                [class.is-invalid]=\"group.get(sub.name)?.touched && group.get(sub.name)?.invalid\">\r\n                            <div class=\"input-suffix\" [class.color-suffix]=\"sub.suffixText === '%'\">\r\n                                <span class=\"suffix-text\" *ngIf=\"sub.suffixText\">{{ sub.suffixText }}</span>\r\n                                <mat-icon *ngIf=\"sub.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Adjust separator alignment if labels are present -->\r\n                    <span class=\"separator\" *ngIf=\"!last && field.separator\"\r\n                        [style.padding-top]=\"sub.label ? '1.25rem' : '0'\">{{ field.separator }}</span>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n            <div class=\"error-text text-danger text-small mt-1\" *ngIf=\"group.errors?.['invalid_minMax_' + field.name]\">\r\n                {{ labels.errorMinValue }}\r\n            </div>\r\n            <div class=\"error-text text-danger text-small mt-1\"\r\n                *ngIf=\"group.errors?.['invalid_percentageTotal_' + field.name]\">\r\n                {{ labels.errorPercentageTotal }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- File Upload -->\r\n    <div *ngIf=\"field.type === 'file'\" class=\"field-container\">\r\n        <div class=\"field-label\" *ngIf=\"field.label\">\r\n            {{ field.label }}\r\n            <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n        </div>\r\n\r\n        <!-- Upload Box -->\r\n        <div class=\"upload-box\" (click)=\"fileInput.click()\"\r\n            [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n            *ngIf=\"!field.uploadedFiles || field.uploadedFiles.length === 0 || field.multiple\">\r\n            <mat-icon class=\"upload-icon\">cloud_upload</mat-icon>\r\n            <div class=\"upload-text\">{{ labels.uploadDragDropText }}</div>\r\n            <div class=\"upload-hint\">{{ labels.uploadHint }}</div>\r\n            <input #fileInput type=\"file\" [attr.multiple]=\"field.multiple ? true : null\" [attr.accept]=\"field.accept\"\r\n                (change)=\"onFileChange($event, field)\" style=\"display: none;\">\r\n        </div>\r\n\r\n        <!-- Uploaded Files List -->\r\n        <div class=\"uploaded-files-list\" *ngIf=\"field.uploadedFiles && field.uploadedFiles.length > 0\">\r\n            <div class=\"uploaded-file-item\" *ngFor=\"let file of field.uploadedFiles; let i = index\">\r\n                <div class=\"file-icon\">\r\n                    <mat-icon class=\"pdf-icon\" *ngIf=\"file.type === 'application/pdf'\">picture_as_pdf</mat-icon>\r\n                    <mat-icon class=\"doc-icon\"\r\n                        *ngIf=\"file.type.includes('word') || file.type.includes('document')\">description</mat-icon>\r\n                    <mat-icon class=\"img-icon\" *ngIf=\"file.type.includes('image')\">image</mat-icon>\r\n                    <mat-icon class=\"file-icon-default\"\r\n                        *ngIf=\"!file.type.includes('pdf') && !file.type.includes('word') && !file.type.includes('document') && !file.type.includes('image')\">insert_drive_file</mat-icon>\r\n                </div>\r\n                <div class=\"file-info\">\r\n                    <div class=\"file-name\">{{ file.name }}</div>\r\n                    <div class=\"file-size\">{{ (file.size / 1024).toFixed(2) }} KB</div>\r\n                </div>\r\n                <button mat-icon-button color=\"warn\" type=\"button\" (click)=\"removeFile(field, i)\"\r\n                    class=\"remove-file-btn\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</ng-template>", styles: [":host{display:block;width:100%}.configurable-form-container{padding:0;font-family:var(--cf-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.configurable-form-container .section-card{background:var(--cf-surface-background, #ffffff);border:1px solid var(--cf-border-color, #D1D5DB);border-radius:var(--cf-section-radius, 12px);padding:var(--cf-section-padding, 2rem);margin-bottom:var(--cf-section-spacing, 1.5rem);box-shadow:var(--cf-section-shadow, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06))}.configurable-form-container .section-card:last-of-type{margin-bottom:0}.configurable-form-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--cf-section-spacing, 1.5rem);padding-bottom:1rem;border-bottom:2px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .section-title{font-size:var(--cf-section-title-size, 1.25rem);font-weight:var(--cf-section-title-weight, 600);color:var(--cf-text-primary, #111827);margin:0;letter-spacing:-.025em}.configurable-form-container .form-grid{display:flex;flex-wrap:wrap;margin-left:-.625rem;margin-right:-.625rem}.configurable-form-container .form-col{position:relative;width:100%;padding-left:.625rem;padding-right:.625rem;margin-bottom:1.25rem}.configurable-form-container .col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.configurable-form-container .col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.configurable-form-container .col-3{flex:0 0 25%;max-width:25%}.configurable-form-container .col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.configurable-form-container .col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.configurable-form-container .col-6{flex:0 0 50%;max-width:50%}.configurable-form-container .col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.configurable-form-container .col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.configurable-form-container .col-9{flex:0 0 75%;max-width:75%}.configurable-form-container .col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.configurable-form-container .col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.configurable-form-container .col-12{flex:0 0 100%;max-width:100%}@media(min-width:769px){.configurable-form-container .col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.configurable-form-container .col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.configurable-form-container .col-md-3{flex:0 0 25%;max-width:25%}.configurable-form-container .col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.configurable-form-container .col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.configurable-form-container .col-md-6{flex:0 0 50%;max-width:50%}.configurable-form-container .col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.configurable-form-container .col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.configurable-form-container .col-md-9{flex:0 0 75%;max-width:75%}.configurable-form-container .col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.configurable-form-container .col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.configurable-form-container .col-md-12{flex:0 0 100%;max-width:100%}}.configurable-form-container .field-container{margin-bottom:0}.configurable-form-container .field-label{display:block;font-size:var(--cf-label-size, .875rem);font-weight:var(--cf-label-weight, 600);color:var(--cf-text-primary, #111827);margin-bottom:.5rem;line-height:1.25rem}.configurable-form-container .field-label .text-danger{color:var(--cf-error-color, #DC2626);margin-left:.125rem}.configurable-form-container .input-wrapper{position:relative;display:flex;align-items:center}.configurable-form-container .form-input{width:100%;padding:var(--cf-input-padding-y, .625rem) var(--cf-input-padding-x, .875rem);font-size:var(--cf-input-font-size, .875rem);line-height:1.5;color:var(--cf-text-primary, #111827);background-color:var(--cf-input-bg, #ffffff);border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:var(--cf-input-radius, 8px);transition:all .2s ease;font-family:inherit}.configurable-form-container .form-input:hover:not(:disabled):not([readonly]){border-color:var(--cf-input-hover-border-color, #9CA3AF)}.configurable-form-container .form-input:focus{outline:none;border-color:var(--cf-primary-color, #3B82F6);box-shadow:0 0 0 3px #3b82f61a}.configurable-form-container .form-input::placeholder{color:#9ca3af}.configurable-form-container .form-input:disabled,.configurable-form-container .form-input[readonly]{background-color:var(--cf-disabled-background, #F3F4F6);color:var(--cf-text-secondary, #6B7280);cursor:not-allowed;border-color:#e5e7eb}.configurable-form-container .form-input.is-invalid{border-color:var(--cf-error-color, #DC2626);background-color:#fef2f2}.configurable-form-container .form-input.is-invalid:focus{box-shadow:0 0 0 3px #dc26261a}.configurable-form-container select.form-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}.configurable-form-container select.form-input:disabled{cursor:not-allowed}.configurable-form-container .form-textarea{resize:vertical;min-height:100px;font-family:inherit}.configurable-form-container .input-suffix{position:absolute;right:.75rem;display:flex;align-items:center;gap:.5rem;pointer-events:none}.configurable-form-container .input-suffix .password-toggle-icon{pointer-events:auto;cursor:pointer}.configurable-form-container .input-suffix .password-toggle-icon:hover{color:var(--cf-text-primary, #111827)}.configurable-form-container .input-suffix .suffix-text{font-size:.875rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .input-suffix mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .input-suffix .lock-icon{color:#9ca3af}.configurable-form-container .input-suffix.color-suffix .suffix-text{color:var(--cf-primary-color, #3B82F6);font-weight:600}.configurable-form-container .char-count-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.configurable-form-container .char-count{font-size:.75rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .hint-text{font-size:var(--cf-hint-size, .75rem);color:var(--cf-text-secondary, #6B7280);margin-top:.375rem;line-height:1.25rem}.configurable-form-container .mt-2{margin-top:.5rem}.configurable-form-container .radio-group-container.is-invalid .field-label{color:var(--cf-error-color, #DC2626)}.configurable-form-container .radio-group{display:flex;gap:2rem;flex-wrap:wrap;margin-top:.5rem}.configurable-form-container .radio-button{margin:0}.configurable-form-container .composite-container{display:flex;align-items:center;gap:.75rem}.configurable-form-container .composite-container .separator{font-size:.875rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .composite-container .input-wrapper{flex:1}.configurable-form-container .upload-box{border:2px dashed var(--cf-border-color, #D1D5DB);border-radius:var(--cf-section-radius, 12px);padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s ease;background-color:var(--cf-hover-background, #F9FAFB)}.configurable-form-container .upload-box:hover{border-color:var(--cf-primary-color, #3B82F6);background-color:#3b82f608}.configurable-form-container .upload-box.is-invalid{border-color:var(--cf-error-color, #DC2626);background-color:#fef2f2}.configurable-form-container .upload-box .upload-icon{font-size:3rem;width:3rem;height:3rem;color:var(--cf-primary-color, #3B82F6);margin-bottom:.75rem}.configurable-form-container .upload-box .upload-text{font-size:.875rem;color:var(--cf-text-primary, #111827);font-weight:500;margin-bottom:.375rem}.configurable-form-container .upload-box .upload-hint{font-size:.75rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-files-list{margin-top:1rem}.configurable-form-container .uploaded-file-item{display:flex;align-items:center;gap:.75rem;padding:.875rem;border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:8px;margin-bottom:.5rem;background-color:var(--cf-hover-background, #F9FAFB);transition:all .2s ease}.configurable-form-container .uploaded-file-item:hover{border-color:#9ca3af;box-shadow:0 1px 3px #0000001a}.configurable-form-container .uploaded-file-item .file-icon mat-icon{font-size:2rem;width:2rem;height:2rem}.configurable-form-container .uploaded-file-item .file-icon mat-icon.pdf-icon{color:#dc2626}.configurable-form-container .uploaded-file-item .file-icon mat-icon.doc-icon{color:#2563eb}.configurable-form-container .uploaded-file-item .file-icon mat-icon.img-icon{color:#059669}.configurable-form-container .uploaded-file-item .file-icon mat-icon.file-icon-default{color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-file-item .file-info{flex:1}.configurable-form-container .uploaded-file-item .file-info .file-name{font-size:.875rem;color:var(--cf-text-primary, #111827);font-weight:500;margin-bottom:.125rem}.configurable-form-container .uploaded-file-item .file-info .file-size{font-size:.75rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-file-item .remove-file-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}.configurable-form-container .relative{position:relative}.configurable-form-container .date-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%)}.configurable-form-container .repeater-item{padding:1.5rem;border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:10px;margin-bottom:1rem;background-color:var(--cf-hover-background, #F9FAFB);transition:all .2s ease}.configurable-form-container .repeater-item:hover{border-color:#9ca3af;box-shadow:0 2px 4px #0000000d}.configurable-form-container .repeater-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1.5px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .repeater-item-header .text-small{font-size:.875rem;font-weight:600;color:var(--cf-text-primary, #111827);text-transform:uppercase;letter-spacing:.025em}.configurable-form-container .repeater-separator{height:1px;background-color:var(--cf-border-color, #D1D5DB);margin:1.5rem 0}.configurable-form-container .add-btn{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background-color:transparent;color:var(--cf-primary-color, #3B82F6);border:1.5px solid var(--cf-primary-color, #3B82F6);border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.configurable-form-container .add-btn:hover:not(:disabled){background-color:var(--cf-primary-color, #3B82F6);color:#fff}.configurable-form-container .add-btn:disabled{opacity:.5;cursor:not-allowed;border-color:var(--cf-disabled-background, #E5E7EB)}.configurable-form-container .add-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}@media(max-width:768px){.configurable-form-container .section-card{padding:1.25rem;border-radius:8px}.configurable-form-container .form-grid{margin-left:-.5rem;margin-right:-.5rem}.configurable-form-container .form-col{padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.configurable-form-container .radio-group{flex-direction:column;gap:.75rem}.configurable-form-container .composite-container{flex-direction:column;align-items:stretch}.configurable-form-container .composite-container .separator{text-align:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configurable-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, MaterialModule], template: "<form [formGroup]=\"form\" class=\"configurable-form-container\" *ngIf=\"form\">\r\n\r\n    <ng-container *ngFor=\"let section of sections\">\r\n\r\n        <!-- Repeater Section -->\r\n        <div *ngIf=\"section.isRepeater; else normalSection\"\r\n            [ngClass]=\"section.noCardLayout ? 'section-no-card' : 'section-card'\">\r\n            <div class=\"section-header\" *ngIf=\"section.sectionTitle\">\r\n                <h3 class=\"section-title\">{{ section.sectionTitle }}</h3>\r\n                <button *ngIf=\"section.collapsible\" mat-icon-button type=\"button\" (click)=\"toggleSection(section)\">\r\n                    <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div [formArrayName]=\"section.formArrayName || 'items'\" *ngIf=\"!section.collapsed\">\r\n                <div *ngFor=\"let item of getFormArray(section.formArrayName!).controls; let i = index\"\r\n                    [formGroupName]=\"i\" class=\"repeater-item\">\r\n                    <div class=\"repeater-item-header\" *ngIf=\"getFormArray(section.formArrayName!).length > 1\">\r\n                        <span class=\"text-small\">{{ section.repeaterItemLabel || 'Item' }} {{i + 1}}</span>\r\n                        <button mat-icon-button color=\"warn\" type=\"button\"\r\n                            (click)=\"removeRepeaterItem(section.formArrayName!, i)\"\r\n                            [disabled]=\"section.minItems && getFormArray(section.formArrayName!).length <= section.minItems\">\r\n                            <mat-icon>delete</mat-icon>\r\n                        </button>\r\n                    </div>\r\n\r\n                    <!-- Fields Grid -->\r\n                    <div class=\"form-grid\">\r\n                        <div *ngFor=\"let field of section.fields\" [ngClass]=\"['form-col', field.class || 'col-12']\"\r\n                            [hidden]=\"!isFieldVisible(field)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"fieldTemplate; context: {field: field, group: item}\"></ng-container>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"repeater-separator\" *ngIf=\"i < getFormArray(section.formArrayName!).length - 1\"></div>\r\n                </div>\r\n            </div>\r\n\r\n            <button mat-button color=\"primary\" type=\"button\" (click)=\"addRepeaterItem(section)\" class=\"add-btn\"\r\n                *ngIf=\"!section.collapsed\"\r\n                [disabled]=\"section.maxItems && getFormArray(section.formArrayName!).length >= section.maxItems\">\r\n                <mat-icon>add_circle_outline</mat-icon> {{ section.addLabel || 'Add More' }}\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Normal Section -->\r\n        <ng-template #normalSection>\r\n            <div [ngClass]=\"section.noCardLayout ? 'section-no-card' : 'section-card'\">\r\n                <div class=\"section-header\" *ngIf=\"section.sectionTitle\">\r\n                    <h3 class=\"section-title\">{{ section.sectionTitle }}</h3>\r\n                    <button *ngIf=\"section.collapsible\" mat-icon-button type=\"button\" (click)=\"toggleSection(section)\">\r\n                        <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"form-grid\" *ngIf=\"!section.collapsed\">\r\n                    <div *ngFor=\"let field of section.fields\" [ngClass]=\"['form-col', field.class || 'col-12']\"\r\n                        [hidden]=\"!isFieldVisible(field)\">\r\n                        <!-- Pass the root form group to the template -->\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"fieldTemplate; context: {field: field, group: form}\"></ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n    </ng-container>\r\n\r\n</form>\r\n\r\n<!-- Reusable Field Template -->\r\n<ng-template #fieldTemplate let-field=\"field\" let-group=\"group\">\r\n    <div [formGroup]=\"group\">\r\n\r\n        <!-- Text / Email / Number / Tel / URL (Password removed) -->\r\n        <div *ngIf=\"['text', 'email', 'number', 'tel', 'url'].includes(field.type || '')\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"input-wrapper\">\r\n                <input [type]=\"field.type\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder || ''\"\r\n                    [readonly]=\"field.readonly\" class=\"form-input\" [name]=\"field.name\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                    [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\">\r\n                <div class=\"input-suffix\">\r\n                    <span class=\"suffix-text\" *ngIf=\"field.suffixText\">{{ field.suffixText }}</span>\r\n                    <mat-icon *ngIf=\"field.suffixIcon\">{{ field.suffixIcon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                </div>\r\n            </div>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} Characters\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Password Field (Separated) -->\r\n        <div *ngIf=\"field.type === 'password'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"input-wrapper\">\r\n                <input [type]=\"isPasswordVisible(field.name) ? 'text' : 'password'\" [formControlName]=\"field.name\"\r\n                    [placeholder]=\"field.placeholder || ''\" [readonly]=\"field.readonly\" class=\"form-input\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                    [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\">\r\n                <div class=\"input-suffix\">\r\n                    <span class=\"suffix-text\" *ngIf=\"field.suffixText\">{{ field.suffixText }}</span>\r\n                    <mat-icon *ngIf=\"field.suffixIcon\">{{ field.suffixIcon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                    <mat-icon class=\"password-toggle-icon\" (click)=\"togglePassword(field.name)\">\r\n                        {{ isPasswordVisible(field.name) ? 'visibility' : 'visibility_off' }}\r\n                    </mat-icon>\r\n                </div>\r\n            </div>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} Characters\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Textarea -->\r\n        <div *ngIf=\"field.type === 'textarea'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <textarea [formControlName]=\"field.name\" [placeholder]=\"field.placeholder || ''\" [readonly]=\"field.readonly\"\r\n                class=\"form-input form-textarea\" rows=\"4\"\r\n                [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\"></textarea>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} Characters\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Select / Dropdown -->\r\n        <div *ngIf=\"field.type === 'select' || field.type === 'dropdown'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <select [formControlName]=\"field.name\" class=\"form-input\"\r\n                [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n                <option value=\"\" disabled selected *ngIf=\"field.placeholder\">{{ field.placeholder }}</option>\r\n                <option value=\"\" disabled selected *ngIf=\"!field.placeholder\">Select</option>\r\n                <option *ngFor=\"let opt of getFieldOptions(field)\" [value]=\"opt.value\">{{ opt.label }}</option>\r\n            </select>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Date -->\r\n        <div *ngIf=\"field.type === 'date'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"relative\">\r\n                <input matInput [matDatepicker]=\"picker\" [formControlName]=\"field.name\"\r\n                    [placeholder]=\"field.placeholder || ''\" class=\"form-input\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n                <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-toggle\"></mat-datepicker-toggle>\r\n                <mat-datepicker #picker></mat-datepicker>\r\n            </div>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Radio -->\r\n        <div *ngIf=\"field.type === 'radio'\" class=\"radio-group-container\"\r\n            [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n            <label class=\"field-label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </label>\r\n            <mat-radio-group [formControlName]=\"field.name\" class=\"radio-group\">\r\n                <mat-radio-button *ngFor=\"let opt of getFieldOptions(field)\" [value]=\"opt.value\" class=\"radio-button\">\r\n                    {{ opt.label }}\r\n                </mat-radio-button>\r\n            </mat-radio-group>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Composite Field (Sub-groups) -->\r\n        <div *ngIf=\"field.type === 'composite'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"composite-container\">\r\n                <ng-container *ngFor=\"let sub of field.subFields; let last = last\">\r\n                    <div class=\"composite-sub-field\" style=\"flex: 1;\">\r\n                        <div class=\"field-label\" *ngIf=\"sub.label\"\r\n                            style=\"font-size: 0.75rem; font-weight: normal; margin-bottom: 0.25rem;\">\r\n                            {{ sub.label }}\r\n                        </div>\r\n                        <div class=\"input-wrapper\">\r\n                            <input [type]=\"sub.type\" [formControlName]=\"sub.name\" [placeholder]=\"sub.placeholder || ''\"\r\n                                [readonly]=\"sub.readonly\" class=\"form-input\"\r\n                                [class.is-invalid]=\"group.get(sub.name)?.touched && group.get(sub.name)?.invalid\">\r\n                            <div class=\"input-suffix\" [class.color-suffix]=\"sub.suffixText === '%'\">\r\n                                <span class=\"suffix-text\" *ngIf=\"sub.suffixText\">{{ sub.suffixText }}</span>\r\n                                <mat-icon *ngIf=\"sub.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Adjust separator alignment if labels are present -->\r\n                    <span class=\"separator\" *ngIf=\"!last && field.separator\"\r\n                        [style.padding-top]=\"sub.label ? '1.25rem' : '0'\">{{ field.separator }}</span>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n            <div class=\"error-text text-danger text-small mt-1\" *ngIf=\"group.errors?.['invalid_minMax_' + field.name]\">\r\n                Min value cannot be greater than Max value.\r\n            </div>\r\n            <div class=\"error-text text-danger text-small mt-1\"\r\n                *ngIf=\"group.errors?.['invalid_percentageTotal_' + field.name]\">\r\n                Total percentage must be 100%.\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- File Upload -->\r\n    <div *ngIf=\"field.type === 'file'\" class=\"field-container\">\r\n        <div class=\"field-label\" *ngIf=\"field.label\">\r\n            {{ field.label }}\r\n            <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n        </div>\r\n\r\n        <!-- Upload Box -->\r\n        <div class=\"upload-box\" (click)=\"fileInput.click()\"\r\n            [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n            *ngIf=\"!field.uploadedFiles || field.uploadedFiles.length === 0 || field.multiple\">\r\n            <mat-icon class=\"upload-icon\">cloud_upload</mat-icon>\r\n            <div class=\"upload-text\">Click to upload File</div>\r\n            <div class=\"upload-hint\">PDF, DOCX, JPG, PNG (Max 5MB)</div>\r\n            <input #fileInput type=\"file\" [attr.multiple]=\"field.multiple ? true : null\" [attr.accept]=\"field.accept\"\r\n                (change)=\"onFileChange($event, field)\" style=\"display: none;\">\r\n        </div>\r\n\r\n        <!-- Uploaded Files List -->\r\n        <div class=\"uploaded-files-list\" *ngIf=\"field.uploadedFiles && field.uploadedFiles.length > 0\">\r\n            <div class=\"uploaded-file-item\" *ngFor=\"let file of field.uploadedFiles; let i = index\">\r\n                <div class=\"file-icon\">\r\n                    <mat-icon class=\"pdf-icon\" *ngIf=\"file.type === 'application/pdf'\">picture_as_pdf</mat-icon>\r\n                    <mat-icon class=\"doc-icon\"\r\n                        *ngIf=\"file.type.includes('word') || file.type.includes('document')\">description</mat-icon>\r\n                    <mat-icon class=\"img-icon\" *ngIf=\"file.type.includes('image')\">image</mat-icon>\r\n                    <mat-icon class=\"file-icon-default\"\r\n                        *ngIf=\"!file.type.includes('pdf') && !file.type.includes('word') && !file.type.includes('document') && !file.type.includes('image')\">insert_drive_file</mat-icon>\r\n                </div>\r\n                <div class=\"file-info\">\r\n                    <div class=\"file-name\">{{ file.name }}</div>\r\n                    <div class=\"file-size\">{{ (file.size / 1024).toFixed(2) }} KB</div>\r\n                </div>\r\n                <button mat-icon-button color=\"warn\" type=\"button\" (click)=\"removeFile(field, i)\"\r\n                    class=\"remove-file-btn\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</ng-template>", styles: [":host{display:block;width:100%}.configurable-form-container{padding:0;font-family:var(--cf-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.configurable-form-container .section-card{background:var(--cf-surface-background, #ffffff);border:1px solid var(--cf-border-color, #D1D5DB);border-radius:var(--cf-section-radius, 12px);padding:var(--cf-section-padding, 2rem);margin-bottom:var(--cf-section-spacing, 1.5rem);box-shadow:var(--cf-section-shadow, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06))}.configurable-form-container .section-card:last-of-type{margin-bottom:0}.configurable-form-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--cf-section-spacing, 1.5rem);padding-bottom:1rem;border-bottom:2px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .section-title{font-size:var(--cf-section-title-size, 1.25rem);font-weight:var(--cf-section-title-weight, 600);color:var(--cf-text-primary, #111827);margin:0;letter-spacing:-.025em}.configurable-form-container .form-grid{display:flex;flex-wrap:wrap;margin-left:-.625rem;margin-right:-.625rem}.configurable-form-container .form-col{position:relative;width:100%;padding-left:.625rem;padding-right:.625rem;margin-bottom:1.25rem}.configurable-form-container .col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.configurable-form-container .col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.configurable-form-container .col-3{flex:0 0 25%;max-width:25%}.configurable-form-container .col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.configurable-form-container .col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.configurable-form-container .col-6{flex:0 0 50%;max-width:50%}.configurable-form-container .col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.configurable-form-container .col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.configurable-form-container .col-9{flex:0 0 75%;max-width:75%}.configurable-form-container .col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.configurable-form-container .col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.configurable-form-container .col-12{flex:0 0 100%;max-width:100%}@media(min-width:769px){.configurable-form-container .col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.configurable-form-container .col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.configurable-form-container .col-md-3{flex:0 0 25%;max-width:25%}.configurable-form-container .col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.configurable-form-container .col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.configurable-form-container .col-md-6{flex:0 0 50%;max-width:50%}.configurable-form-container .col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.configurable-form-container .col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.configurable-form-container .col-md-9{flex:0 0 75%;max-width:75%}.configurable-form-container .col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.configurable-form-container .col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.configurable-form-container .col-md-12{flex:0 0 100%;max-width:100%}}.configurable-form-container .field-container{margin-bottom:0}.configurable-form-container .field-label{display:block;font-size:var(--cf-label-size, .875rem);font-weight:var(--cf-label-weight, 600);color:var(--cf-text-primary, #111827);margin-bottom:.5rem;line-height:1.25rem}.configurable-form-container .field-label .text-danger{color:var(--cf-error-color, #DC2626);margin-left:.125rem}.configurable-form-container .input-wrapper{position:relative;display:flex;align-items:center}.configurable-form-container .form-input{width:100%;padding:var(--cf-input-padding-y, .625rem) var(--cf-input-padding-x, .875rem);font-size:var(--cf-input-font-size, .875rem);line-height:1.5;color:var(--cf-text-primary, #111827);background-color:var(--cf-input-bg, #ffffff);border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:var(--cf-input-radius, 8px);transition:all .2s ease;font-family:inherit}.configurable-form-container .form-input:hover:not(:disabled):not([readonly]){border-color:var(--cf-input-hover-border-color, #9CA3AF)}.configurable-form-container .form-input:focus{outline:none;border-color:var(--cf-primary-color, #3B82F6);box-shadow:0 0 0 3px #3b82f61a}.configurable-form-container .form-input::placeholder{color:#9ca3af}.configurable-form-container .form-input:disabled,.configurable-form-container .form-input[readonly]{background-color:var(--cf-disabled-background, #F3F4F6);color:var(--cf-text-secondary, #6B7280);cursor:not-allowed;border-color:#e5e7eb}.configurable-form-container .form-input.is-invalid{border-color:var(--cf-error-color, #DC2626);background-color:#fef2f2}.configurable-form-container .form-input.is-invalid:focus{box-shadow:0 0 0 3px #dc26261a}.configurable-form-container select.form-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}.configurable-form-container select.form-input:disabled{cursor:not-allowed}.configurable-form-container .form-textarea{resize:vertical;min-height:100px;font-family:inherit}.configurable-form-container .input-suffix{position:absolute;right:.75rem;display:flex;align-items:center;gap:.5rem;pointer-events:none}.configurable-form-container .input-suffix .password-toggle-icon{pointer-events:auto;cursor:pointer}.configurable-form-container .input-suffix .password-toggle-icon:hover{color:var(--cf-text-primary, #111827)}.configurable-form-container .input-suffix .suffix-text{font-size:.875rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .input-suffix mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .input-suffix .lock-icon{color:#9ca3af}.configurable-form-container .input-suffix.color-suffix .suffix-text{color:var(--cf-primary-color, #3B82F6);font-weight:600}.configurable-form-container .char-count-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.configurable-form-container .char-count{font-size:.75rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .hint-text{font-size:var(--cf-hint-size, .75rem);color:var(--cf-text-secondary, #6B7280);margin-top:.375rem;line-height:1.25rem}.configurable-form-container .mt-2{margin-top:.5rem}.configurable-form-container .radio-group-container.is-invalid .field-label{color:var(--cf-error-color, #DC2626)}.configurable-form-container .radio-group{display:flex;gap:2rem;flex-wrap:wrap;margin-top:.5rem}.configurable-form-container .radio-button{margin:0}.configurable-form-container .composite-container{display:flex;align-items:center;gap:.75rem}.configurable-form-container .composite-container .separator{font-size:.875rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .composite-container .input-wrapper{flex:1}.configurable-form-container .upload-box{border:2px dashed var(--cf-border-color, #D1D5DB);border-radius:var(--cf-section-radius, 12px);padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s ease;background-color:var(--cf-hover-background, #F9FAFB)}.configurable-form-container .upload-box:hover{border-color:var(--cf-primary-color, #3B82F6);background-color:#3b82f608}.configurable-form-container .upload-box.is-invalid{border-color:var(--cf-error-color, #DC2626);background-color:#fef2f2}.configurable-form-container .upload-box .upload-icon{font-size:3rem;width:3rem;height:3rem;color:var(--cf-primary-color, #3B82F6);margin-bottom:.75rem}.configurable-form-container .upload-box .upload-text{font-size:.875rem;color:var(--cf-text-primary, #111827);font-weight:500;margin-bottom:.375rem}.configurable-form-container .upload-box .upload-hint{font-size:.75rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-files-list{margin-top:1rem}.configurable-form-container .uploaded-file-item{display:flex;align-items:center;gap:.75rem;padding:.875rem;border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:8px;margin-bottom:.5rem;background-color:var(--cf-hover-background, #F9FAFB);transition:all .2s ease}.configurable-form-container .uploaded-file-item:hover{border-color:#9ca3af;box-shadow:0 1px 3px #0000001a}.configurable-form-container .uploaded-file-item .file-icon mat-icon{font-size:2rem;width:2rem;height:2rem}.configurable-form-container .uploaded-file-item .file-icon mat-icon.pdf-icon{color:#dc2626}.configurable-form-container .uploaded-file-item .file-icon mat-icon.doc-icon{color:#2563eb}.configurable-form-container .uploaded-file-item .file-icon mat-icon.img-icon{color:#059669}.configurable-form-container .uploaded-file-item .file-icon mat-icon.file-icon-default{color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-file-item .file-info{flex:1}.configurable-form-container .uploaded-file-item .file-info .file-name{font-size:.875rem;color:var(--cf-text-primary, #111827);font-weight:500;margin-bottom:.125rem}.configurable-form-container .uploaded-file-item .file-info .file-size{font-size:.75rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-file-item .remove-file-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}.configurable-form-container .relative{position:relative}.configurable-form-container .date-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%)}.configurable-form-container .repeater-item{padding:1.5rem;border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:10px;margin-bottom:1rem;background-color:var(--cf-hover-background, #F9FAFB);transition:all .2s ease}.configurable-form-container .repeater-item:hover{border-color:#9ca3af;box-shadow:0 2px 4px #0000000d}.configurable-form-container .repeater-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1.5px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .repeater-item-header .text-small{font-size:.875rem;font-weight:600;color:var(--cf-text-primary, #111827);text-transform:uppercase;letter-spacing:.025em}.configurable-form-container .repeater-separator{height:1px;background-color:var(--cf-border-color, #D1D5DB);margin:1.5rem 0}.configurable-form-container .add-btn{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background-color:transparent;color:var(--cf-primary-color, #3B82F6);border:1.5px solid var(--cf-primary-color, #3B82F6);border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.configurable-form-container .add-btn:hover:not(:disabled){background-color:var(--cf-primary-color, #3B82F6);color:#fff}.configurable-form-container .add-btn:disabled{opacity:.5;cursor:not-allowed;border-color:var(--cf-disabled-background, #E5E7EB)}.configurable-form-container .add-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}@media(max-width:768px){.configurable-form-container .section-card{padding:1.25rem;border-radius:8px}.configurable-form-container .form-grid{margin-left:-.5rem;margin-right:-.5rem}.configurable-form-container .form-col{padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.configurable-form-container .radio-group{flex-direction:column;gap:.75rem}.configurable-form-container .composite-container{flex-direction:column;align-items:stretch}.configurable-form-container .composite-container .separator{text-align:center}}\n"] }]
+            args: [{ selector: 'lib-configurable-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, MaterialModule], template: "<form [formGroup]=\"form\" class=\"configurable-form-container\" *ngIf=\"form\">\r\n\r\n    <ng-container *ngFor=\"let section of sections\">\r\n\r\n        <!-- Repeater Section -->\r\n        <div *ngIf=\"section.isRepeater; else normalSection\"\r\n            [ngClass]=\"section.noCardLayout ? 'section-no-card' : 'section-card'\">\r\n            <div class=\"section-header\" *ngIf=\"section.sectionTitle\">\r\n                <h3 class=\"section-title\">{{ section.sectionTitle }}</h3>\r\n                <button *ngIf=\"section.collapsible\" mat-icon-button type=\"button\" (click)=\"toggleSection(section)\">\r\n                    <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div [formArrayName]=\"section.formArrayName || 'items'\" *ngIf=\"!section.collapsed\">\r\n                <div *ngFor=\"let item of getFormArray(section.formArrayName!).controls; let i = index\"\r\n                    [formGroupName]=\"i\" class=\"repeater-item\">\r\n                    <div class=\"repeater-item-header\" *ngIf=\"getFormArray(section.formArrayName!).length > 1\">\r\n                        <span class=\"text-small\">{{ section.repeaterItemLabel || labels.repeaterItemDefaultLabel }} {{i\r\n                            + 1}}</span>\r\n                        <button mat-icon-button color=\"warn\" type=\"button\"\r\n                            (click)=\"removeRepeaterItem(section.formArrayName!, i)\"\r\n                            [disabled]=\"section.minItems && getFormArray(section.formArrayName!).length <= section.minItems\">\r\n                            <mat-icon>delete</mat-icon>\r\n                        </button>\r\n                    </div>\r\n\r\n                    <!-- Fields Grid -->\r\n                    <div class=\"form-grid\">\r\n                        <div *ngFor=\"let field of section.fields\" [ngClass]=\"['form-col', field.class || 'col-12']\"\r\n                            [hidden]=\"!isFieldVisible(field)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"fieldTemplate; context: {field: field, group: item}\"></ng-container>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"repeater-separator\" *ngIf=\"i < getFormArray(section.formArrayName!).length - 1\"></div>\r\n                </div>\r\n            </div>\r\n\r\n            <button mat-button color=\"primary\" type=\"button\" (click)=\"addRepeaterItem(section)\" class=\"add-btn\"\r\n                *ngIf=\"!section.collapsed\"\r\n                [disabled]=\"section.maxItems && getFormArray(section.formArrayName!).length >= section.maxItems\">\r\n                <mat-icon>add_circle_outline</mat-icon> {{ section.addLabel || labels.addMoreDefaultLabel }}\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Normal Section -->\r\n        <ng-template #normalSection>\r\n            <div [ngClass]=\"section.noCardLayout ? 'section-no-card' : 'section-card'\">\r\n                <div class=\"section-header\" *ngIf=\"section.sectionTitle\">\r\n                    <h3 class=\"section-title\">{{ section.sectionTitle }}</h3>\r\n                    <button *ngIf=\"section.collapsible\" mat-icon-button type=\"button\" (click)=\"toggleSection(section)\">\r\n                        <mat-icon>{{ section.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"form-grid\" *ngIf=\"!section.collapsed\">\r\n                    <div *ngFor=\"let field of section.fields\" [ngClass]=\"['form-col', field.class || 'col-12']\"\r\n                        [hidden]=\"!isFieldVisible(field)\">\r\n                        <!-- Pass the root form group to the template -->\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"fieldTemplate; context: {field: field, group: form}\"></ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n    </ng-container>\r\n\r\n</form>\r\n\r\n<!-- Reusable Field Template -->\r\n<ng-template #fieldTemplate let-field=\"field\" let-group=\"group\">\r\n    <div [formGroup]=\"group\">\r\n\r\n        <!-- Text / Email / Number / Tel / URL (Password removed) -->\r\n        <div *ngIf=\"['text', 'email', 'number', 'tel', 'url'].includes(field.type || '')\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"input-wrapper\">\r\n                <input [type]=\"field.type\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder || ''\"\r\n                    [readonly]=\"field.readonly\" class=\"form-input\" [name]=\"field.name\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                    [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\">\r\n                <div class=\"input-suffix\">\r\n                    <span class=\"suffix-text\" *ngIf=\"field.suffixText\">{{ field.suffixText }}</span>\r\n                    <mat-icon *ngIf=\"field.suffixIcon\">{{ field.suffixIcon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                </div>\r\n            </div>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} {{ labels.charactersLabel }}\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Password Field (Separated) -->\r\n        <div *ngIf=\"field.type === 'password'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"input-wrapper\">\r\n                <input [type]=\"isPasswordVisible(field.name) ? 'text' : 'password'\" [formControlName]=\"field.name\"\r\n                    [placeholder]=\"field.placeholder || ''\" [readonly]=\"field.readonly\" class=\"form-input\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                    [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\">\r\n                <div class=\"input-suffix\">\r\n                    <span class=\"suffix-text\" *ngIf=\"field.suffixText\">{{ field.suffixText }}</span>\r\n                    <mat-icon *ngIf=\"field.suffixIcon\">{{ field.suffixIcon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                    <mat-icon *ngIf=\"field.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                    <mat-icon class=\"password-toggle-icon\" (click)=\"togglePassword(field.name)\">\r\n                        {{ isPasswordVisible(field.name) ? 'visibility' : 'visibility_off' }}\r\n                    </mat-icon>\r\n                </div>\r\n            </div>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} {{ labels.charactersLabel }}\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Textarea -->\r\n        <div *ngIf=\"field.type === 'textarea'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <textarea [formControlName]=\"field.name\" [placeholder]=\"field.placeholder || ''\" [readonly]=\"field.readonly\"\r\n                class=\"form-input form-textarea\" rows=\"4\"\r\n                [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n                [maxlength]=\"field.validationRules?.maxLength || field.uiConfig?.maxCharacters\"></textarea>\r\n            <!-- Character count -->\r\n            <div class=\"char-count-row\" *ngIf=\"field.uiConfig?.maxCharacters || field.validationRules?.maxLength\">\r\n                <div class=\"hint-text\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n                <div class=\"char-count\">\r\n                    {{ getCharacterCount(field.name) }} / {{ field.uiConfig?.maxCharacters ||\r\n                    field.validationRules?.maxLength }} {{ labels.charactersLabel }}\r\n                </div>\r\n            </div>\r\n            <div class=\"hint-text mt-2\"\r\n                *ngIf=\"(field.hint || field.helpText) && !field.uiConfig?.maxCharacters && !field.validationRules?.maxLength\">\r\n                {{ field.hint || field.helpText }}\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Select / Dropdown -->\r\n        <div *ngIf=\"field.type === 'select' || field.type === 'dropdown'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <select [formControlName]=\"field.name\" class=\"form-input\"\r\n                [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n                <option value=\"\" disabled selected *ngIf=\"field.placeholder\">{{ field.placeholder }}</option>\r\n                <option value=\"\" disabled selected *ngIf=\"!field.placeholder\">{{ labels.selectDefaultPlaceholder }}\r\n                </option>\r\n                <option *ngFor=\"let opt of getFieldOptions(field)\" [value]=\"opt.value\">{{ opt.label }}</option>\r\n            </select>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Date -->\r\n        <div *ngIf=\"field.type === 'date'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"relative\">\r\n                <input matInput [matDatepicker]=\"picker\" [formControlName]=\"field.name\"\r\n                    [placeholder]=\"field.placeholder || ''\" class=\"form-input\"\r\n                    [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n                <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-toggle\"></mat-datepicker-toggle>\r\n                <mat-datepicker #picker></mat-datepicker>\r\n            </div>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Radio -->\r\n        <div *ngIf=\"field.type === 'radio'\" class=\"radio-group-container\"\r\n            [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\">\r\n            <label class=\"field-label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </label>\r\n            <mat-radio-group [formControlName]=\"field.name\" class=\"radio-group\">\r\n                <mat-radio-button *ngFor=\"let opt of getFieldOptions(field)\" [value]=\"opt.value\" class=\"radio-button\">\r\n                    {{ opt.label }}\r\n                </mat-radio-button>\r\n            </mat-radio-group>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n        </div>\r\n\r\n        <!-- Composite Field (Sub-groups) -->\r\n        <div *ngIf=\"field.type === 'composite'\" class=\"field-container\">\r\n            <div class=\"field-label\" *ngIf=\"field.label\">\r\n                {{ field.label }}\r\n                <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n            </div>\r\n            <div class=\"composite-container\">\r\n                <ng-container *ngFor=\"let sub of field.subFields; let last = last\">\r\n                    <div class=\"composite-sub-field\" style=\"flex: 1;\">\r\n                        <div class=\"field-label\" *ngIf=\"sub.label\"\r\n                            style=\"font-size: 0.75rem; font-weight: normal; margin-bottom: 0.25rem;\">\r\n                            {{ sub.label }}\r\n                        </div>\r\n                        <div class=\"input-wrapper\">\r\n                            <input [type]=\"sub.type\" [formControlName]=\"sub.name\" [placeholder]=\"sub.placeholder || ''\"\r\n                                [readonly]=\"sub.readonly\" class=\"form-input\"\r\n                                [class.is-invalid]=\"group.get(sub.name)?.touched && group.get(sub.name)?.invalid\">\r\n                            <div class=\"input-suffix\" [class.color-suffix]=\"sub.suffixText === '%'\">\r\n                                <span class=\"suffix-text\" *ngIf=\"sub.suffixText\">{{ sub.suffixText }}</span>\r\n                                <mat-icon *ngIf=\"sub.readonly\" class=\"lock-icon\">lock_outline</mat-icon>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Adjust separator alignment if labels are present -->\r\n                    <span class=\"separator\" *ngIf=\"!last && field.separator\"\r\n                        [style.padding-top]=\"sub.label ? '1.25rem' : '0'\">{{ field.separator }}</span>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"hint-text mt-2\" *ngIf=\"field.hint || field.helpText\">{{ field.hint || field.helpText }}</div>\r\n            <div class=\"error-text text-danger text-small mt-1\" *ngIf=\"group.errors?.['invalid_minMax_' + field.name]\">\r\n                {{ labels.errorMinValue }}\r\n            </div>\r\n            <div class=\"error-text text-danger text-small mt-1\"\r\n                *ngIf=\"group.errors?.['invalid_percentageTotal_' + field.name]\">\r\n                {{ labels.errorPercentageTotal }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- File Upload -->\r\n    <div *ngIf=\"field.type === 'file'\" class=\"field-container\">\r\n        <div class=\"field-label\" *ngIf=\"field.label\">\r\n            {{ field.label }}\r\n            <span class=\"text-danger\" *ngIf=\"field.required || field.mandatory\">*</span>\r\n        </div>\r\n\r\n        <!-- Upload Box -->\r\n        <div class=\"upload-box\" (click)=\"fileInput.click()\"\r\n            [class.is-invalid]=\"group.get(field.name)?.touched && group.get(field.name)?.invalid\"\r\n            *ngIf=\"!field.uploadedFiles || field.uploadedFiles.length === 0 || field.multiple\">\r\n            <mat-icon class=\"upload-icon\">cloud_upload</mat-icon>\r\n            <div class=\"upload-text\">{{ labels.uploadDragDropText }}</div>\r\n            <div class=\"upload-hint\">{{ labels.uploadHint }}</div>\r\n            <input #fileInput type=\"file\" [attr.multiple]=\"field.multiple ? true : null\" [attr.accept]=\"field.accept\"\r\n                (change)=\"onFileChange($event, field)\" style=\"display: none;\">\r\n        </div>\r\n\r\n        <!-- Uploaded Files List -->\r\n        <div class=\"uploaded-files-list\" *ngIf=\"field.uploadedFiles && field.uploadedFiles.length > 0\">\r\n            <div class=\"uploaded-file-item\" *ngFor=\"let file of field.uploadedFiles; let i = index\">\r\n                <div class=\"file-icon\">\r\n                    <mat-icon class=\"pdf-icon\" *ngIf=\"file.type === 'application/pdf'\">picture_as_pdf</mat-icon>\r\n                    <mat-icon class=\"doc-icon\"\r\n                        *ngIf=\"file.type.includes('word') || file.type.includes('document')\">description</mat-icon>\r\n                    <mat-icon class=\"img-icon\" *ngIf=\"file.type.includes('image')\">image</mat-icon>\r\n                    <mat-icon class=\"file-icon-default\"\r\n                        *ngIf=\"!file.type.includes('pdf') && !file.type.includes('word') && !file.type.includes('document') && !file.type.includes('image')\">insert_drive_file</mat-icon>\r\n                </div>\r\n                <div class=\"file-info\">\r\n                    <div class=\"file-name\">{{ file.name }}</div>\r\n                    <div class=\"file-size\">{{ (file.size / 1024).toFixed(2) }} KB</div>\r\n                </div>\r\n                <button mat-icon-button color=\"warn\" type=\"button\" (click)=\"removeFile(field, i)\"\r\n                    class=\"remove-file-btn\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</ng-template>", styles: [":host{display:block;width:100%}.configurable-form-container{padding:0;font-family:var(--cf-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.configurable-form-container .section-card{background:var(--cf-surface-background, #ffffff);border:1px solid var(--cf-border-color, #D1D5DB);border-radius:var(--cf-section-radius, 12px);padding:var(--cf-section-padding, 2rem);margin-bottom:var(--cf-section-spacing, 1.5rem);box-shadow:var(--cf-section-shadow, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06))}.configurable-form-container .section-card:last-of-type{margin-bottom:0}.configurable-form-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--cf-section-spacing, 1.5rem);padding-bottom:1rem;border-bottom:2px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .section-title{font-size:var(--cf-section-title-size, 1.25rem);font-weight:var(--cf-section-title-weight, 600);color:var(--cf-text-primary, #111827);margin:0;letter-spacing:-.025em}.configurable-form-container .form-grid{display:flex;flex-wrap:wrap;margin-left:-.625rem;margin-right:-.625rem}.configurable-form-container .form-col{position:relative;width:100%;padding-left:.625rem;padding-right:.625rem;margin-bottom:1.25rem}.configurable-form-container .col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.configurable-form-container .col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.configurable-form-container .col-3{flex:0 0 25%;max-width:25%}.configurable-form-container .col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.configurable-form-container .col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.configurable-form-container .col-6{flex:0 0 50%;max-width:50%}.configurable-form-container .col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.configurable-form-container .col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.configurable-form-container .col-9{flex:0 0 75%;max-width:75%}.configurable-form-container .col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.configurable-form-container .col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.configurable-form-container .col-12{flex:0 0 100%;max-width:100%}@media(min-width:769px){.configurable-form-container .col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.configurable-form-container .col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.configurable-form-container .col-md-3{flex:0 0 25%;max-width:25%}.configurable-form-container .col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.configurable-form-container .col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.configurable-form-container .col-md-6{flex:0 0 50%;max-width:50%}.configurable-form-container .col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.configurable-form-container .col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.configurable-form-container .col-md-9{flex:0 0 75%;max-width:75%}.configurable-form-container .col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.configurable-form-container .col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.configurable-form-container .col-md-12{flex:0 0 100%;max-width:100%}}.configurable-form-container .field-container{margin-bottom:0}.configurable-form-container .field-label{display:block;font-size:var(--cf-label-size, .875rem);font-weight:var(--cf-label-weight, 600);color:var(--cf-text-primary, #111827);margin-bottom:.5rem;line-height:1.25rem}.configurable-form-container .field-label .text-danger{color:var(--cf-error-color, #DC2626);margin-left:.125rem}.configurable-form-container .input-wrapper{position:relative;display:flex;align-items:center}.configurable-form-container .form-input{width:100%;padding:var(--cf-input-padding-y, .625rem) var(--cf-input-padding-x, .875rem);font-size:var(--cf-input-font-size, .875rem);line-height:1.5;color:var(--cf-text-primary, #111827);background-color:var(--cf-input-bg, #ffffff);border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:var(--cf-input-radius, 8px);transition:all .2s ease;font-family:inherit}.configurable-form-container .form-input:hover:not(:disabled):not([readonly]){border-color:var(--cf-input-hover-border-color, #9CA3AF)}.configurable-form-container .form-input:focus{outline:none;border-color:var(--cf-primary-color, #3B82F6);box-shadow:0 0 0 3px #3b82f61a}.configurable-form-container .form-input::placeholder{color:#9ca3af}.configurable-form-container .form-input:disabled,.configurable-form-container .form-input[readonly]{background-color:var(--cf-disabled-background, #F3F4F6);color:var(--cf-text-secondary, #6B7280);cursor:not-allowed;border-color:#e5e7eb}.configurable-form-container .form-input.is-invalid{border-color:var(--cf-error-color, #DC2626);background-color:#fef2f2}.configurable-form-container .form-input.is-invalid:focus{box-shadow:0 0 0 3px #dc26261a}.configurable-form-container select.form-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}.configurable-form-container select.form-input:disabled{cursor:not-allowed}.configurable-form-container .form-textarea{resize:vertical;min-height:100px;font-family:inherit}.configurable-form-container .input-suffix{position:absolute;right:.75rem;display:flex;align-items:center;gap:.5rem;pointer-events:none}.configurable-form-container .input-suffix .password-toggle-icon{pointer-events:auto;cursor:pointer}.configurable-form-container .input-suffix .password-toggle-icon:hover{color:var(--cf-text-primary, #111827)}.configurable-form-container .input-suffix .suffix-text{font-size:.875rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .input-suffix mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .input-suffix .lock-icon{color:#9ca3af}.configurable-form-container .input-suffix.color-suffix .suffix-text{color:var(--cf-primary-color, #3B82F6);font-weight:600}.configurable-form-container .char-count-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.configurable-form-container .char-count{font-size:.75rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .hint-text{font-size:var(--cf-hint-size, .75rem);color:var(--cf-text-secondary, #6B7280);margin-top:.375rem;line-height:1.25rem}.configurable-form-container .mt-2{margin-top:.5rem}.configurable-form-container .radio-group-container.is-invalid .field-label{color:var(--cf-error-color, #DC2626)}.configurable-form-container .radio-group{display:flex;gap:2rem;flex-wrap:wrap;margin-top:.5rem}.configurable-form-container .radio-button{margin:0}.configurable-form-container .composite-container{display:flex;align-items:center;gap:.75rem}.configurable-form-container .composite-container .separator{font-size:.875rem;color:var(--cf-text-secondary, #6B7280);font-weight:500}.configurable-form-container .composite-container .input-wrapper{flex:1}.configurable-form-container .upload-box{border:2px dashed var(--cf-border-color, #D1D5DB);border-radius:var(--cf-section-radius, 12px);padding:2.5rem;text-align:center;cursor:pointer;transition:all .2s ease;background-color:var(--cf-hover-background, #F9FAFB)}.configurable-form-container .upload-box:hover{border-color:var(--cf-primary-color, #3B82F6);background-color:#3b82f608}.configurable-form-container .upload-box.is-invalid{border-color:var(--cf-error-color, #DC2626);background-color:#fef2f2}.configurable-form-container .upload-box .upload-icon{font-size:3rem;width:3rem;height:3rem;color:var(--cf-primary-color, #3B82F6);margin-bottom:.75rem}.configurable-form-container .upload-box .upload-text{font-size:.875rem;color:var(--cf-text-primary, #111827);font-weight:500;margin-bottom:.375rem}.configurable-form-container .upload-box .upload-hint{font-size:.75rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-files-list{margin-top:1rem}.configurable-form-container .uploaded-file-item{display:flex;align-items:center;gap:.75rem;padding:.875rem;border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:8px;margin-bottom:.5rem;background-color:var(--cf-hover-background, #F9FAFB);transition:all .2s ease}.configurable-form-container .uploaded-file-item:hover{border-color:#9ca3af;box-shadow:0 1px 3px #0000001a}.configurable-form-container .uploaded-file-item .file-icon mat-icon{font-size:2rem;width:2rem;height:2rem}.configurable-form-container .uploaded-file-item .file-icon mat-icon.pdf-icon{color:#dc2626}.configurable-form-container .uploaded-file-item .file-icon mat-icon.doc-icon{color:#2563eb}.configurable-form-container .uploaded-file-item .file-icon mat-icon.img-icon{color:#059669}.configurable-form-container .uploaded-file-item .file-icon mat-icon.file-icon-default{color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-file-item .file-info{flex:1}.configurable-form-container .uploaded-file-item .file-info .file-name{font-size:.875rem;color:var(--cf-text-primary, #111827);font-weight:500;margin-bottom:.125rem}.configurable-form-container .uploaded-file-item .file-info .file-size{font-size:.75rem;color:var(--cf-text-secondary, #6B7280)}.configurable-form-container .uploaded-file-item .remove-file-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}.configurable-form-container .relative{position:relative}.configurable-form-container .date-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%)}.configurable-form-container .repeater-item{padding:1.5rem;border:1.5px solid var(--cf-border-color, #D1D5DB);border-radius:10px;margin-bottom:1rem;background-color:var(--cf-hover-background, #F9FAFB);transition:all .2s ease}.configurable-form-container .repeater-item:hover{border-color:#9ca3af;box-shadow:0 2px 4px #0000000d}.configurable-form-container .repeater-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1.5px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .repeater-item-header .text-small{font-size:.875rem;font-weight:600;color:var(--cf-text-primary, #111827);text-transform:uppercase;letter-spacing:.025em}.configurable-form-container .repeater-separator{height:1px;background-color:var(--cf-border-color, #D1D5DB);margin:1.5rem 0}.configurable-form-container .add-btn{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background-color:transparent;color:var(--cf-primary-color, #3B82F6);border:1.5px solid var(--cf-primary-color, #3B82F6);border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.configurable-form-container .add-btn:hover:not(:disabled){background-color:var(--cf-primary-color, #3B82F6);color:#fff}.configurable-form-container .add-btn:disabled{opacity:.5;cursor:not-allowed;border-color:var(--cf-disabled-background, #E5E7EB)}.configurable-form-container .add-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem}@media(max-width:768px){.configurable-form-container .section-card{padding:1.25rem;border-radius:8px}.configurable-form-container .form-grid{margin-left:-.5rem;margin-right:-.5rem}.configurable-form-container .form-col{padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.configurable-form-container .radio-group{flex-direction:column;gap:.75rem}.configurable-form-container .composite-container{flex-direction:column;align-items:stretch}.configurable-form-container .composite-container .separator{text-align:center}}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$2.MatSnackBar }, { type: i3.HttpClient }], propDecorators: { config: [{
                 type: Input
             }], jsonConfig: [{
@@ -3466,6 +3546,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], baseApiUrl: [{
                 type: Input
+            }], labels: [{
+                type: Input
             }], optionsLoad: [{
                 type: Output
             }] } });
@@ -3499,6 +3581,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class SmartFormController {
     formData = {};
+    /** Auth token sourced from the FormSchema configJSON (e.g. "Bearer eyJ…") */
+    token;
+    /** HTTP header name for the token (default: "Authorization") */
+    tokenHeader;
+    /** Flat map of translated i18n labels passed from SmartFormComponent */
+    labels = {};
+    /** Custom label keys for form actions (Next, Submit, Add, etc.) */
+    actionLabels;
     fieldSubjects = new Map();
     initialize(initialData) {
         this.formData = { ...initialData };
@@ -3542,38 +3632,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Utility class for translating Smart Form schemas.
+ */
+class SmartFormTranslationUtils {
+    /**
+     * Recursively walks the schema and replaces i18n keys with values from labels map.
+     * @param schema The FormSchema to translate.
+     * @param labels The labels map (can be flat or contain labelsObject property).
+     */
+    static translateSchema(schema, labels) {
+        if (!schema || !labels)
+            return;
+        // Support both flat labels map and the pattern used in ConfigurableForm which passes { labelsObject: ... }
+        const labelsMap = labels.labelsObject || labels;
+        const translate = (key) => labelsMap[key] || key;
+        // Root properties
+        if (schema.label)
+            schema.label = translate(schema.label);
+        if (schema.description)
+            schema.description = translate(schema.description);
+        // Submit config
+        if (schema.submitConfig) {
+            if (schema.submitConfig.successMessage)
+                schema.submitConfig.successMessage = translate(schema.submitConfig.successMessage);
+            if (schema.submitConfig.errorMessage)
+                schema.submitConfig.errorMessage = translate(schema.submitConfig.errorMessage);
+        }
+        // Section config
+        if (schema.sectionConfig) {
+            this.translateSection(schema.sectionConfig, translate);
+        }
+        // Stepper config
+        if (schema.stepperConfig?.children) {
+            schema.stepperConfig.children.forEach(field => this.translateField(field, translate));
+        }
+    }
+    static translateSection(section, translate) {
+        if (section.label)
+            section.label = translate(section.label);
+        if (section.children) {
+            section.children.forEach((field) => this.translateField(field, translate));
+        }
+    }
+    static translateField(field, translate) {
+        if (field.label)
+            field.label = translate(field.label);
+        if (field.placeholder)
+            field.placeholder = translate(field.placeholder);
+        if (field.hint)
+            field.hint = translate(field.hint);
+        if (field.textConfig?.patternMessage) {
+            field.textConfig.patternMessage = translate(field.textConfig.patternMessage);
+        }
+        if (field.attachmentConfig?.acceptLabel) {
+            field.attachmentConfig.acceptLabel = translate(field.attachmentConfig.acceptLabel);
+        }
+        if (field.optionConfig?.optionList) {
+            field.optionConfig.optionList.forEach(opt => {
+                if (opt.label)
+                    opt.label = translate(opt.label);
+            });
+        }
+        // Recurse into children (ROW or GROUP)
+        if (field.children) {
+            field.children.forEach(child => this.translateField(child, translate));
+        }
+        // Recurse into nested section config
+        if (field.sectionConfig) {
+            this.translateSection(field.sectionConfig, translate);
+        }
+    }
+}
+
 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));
+            const vars = variables || this.extractVariables(expression);
+            const args = vars.map(v => context[v]);
+            const func = new Function(...vars, `return ${expression};`);
+            return func(...args);
         }
         catch (e) {
-            console.error('Expression evaluation error:', e);
+            console.error('Expression evaluation error:', e, { expression, vars: variables || this.extractVariables(expression), context });
             return null;
         }
     }
     evaluateCondition(expression, context) {
+        const vars = this.extractVariables(expression);
         try {
-            const func = new Function(...Object.keys(context), `return ${expression};`);
-            const result = func(...Object.values(context));
+            const args = vars.map(v => context[v]);
+            const func = new Function(...vars, `return ${expression};`);
+            const result = func(...args);
             return !!result;
         }
         catch (e) {
-            console.error('Condition evaluation error:', e);
+            console.error('Condition evaluation error:', e, { expression, variables: vars, context });
             return false;
         }
     }
     evaluateFormula(formula, functionName, context, variables) {
         try {
             if (!this.loadedFunctions.has(functionName)) {
-                const func = new Function('context', `
-          ${formula}
-          return ${functionName};
+                const func = new Function('context', `
+          ${formula}
+          return ${functionName};
         `)(context);
                 this.loadedFunctions.set(functionName, func);
             }
@@ -3589,9 +3753,21 @@ class ExpressionService {
         }
     }
     extractVariables(expression) {
+        if (!expression)
+            return [];
+        // Remove strings from expression to avoid picking up variables inside quotes
+        const cleanExpr = expression
+            .replace(/'[^']*'/g, '')
+            .replace(/"[^"]*"/g, '')
+            .replace(/`[^`]*`/g, '')
+            // Remove properties (e.g., .max) to only pick up top-level identifiers
+            .replace(/\.\w+/g, '');
         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'];
+        const matches = cleanExpr.match(regex) || [];
+        const keywords = [
+            'true', 'false', 'null', 'undefined', 'return', 'if', 'else', 'for', 'while', 'function', 'var', 'let', 'const', 'this',
+            'Math', 'JSON', 'console', 'window', 'document', 'Date', 'Object', 'Array', 'Number', 'String', 'Boolean', 'Symbol'
+        ];
         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 });
@@ -3604,174 +3780,303 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
-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)
+/**
+ * Utility functions for string manipulation
+ */
+class StringUtils {
+    /**
+     * Converts a string to camelCase.
+     * Example: "First Name" -> "firstName", "Profile Picture" -> "profilePicture"
+     */
+    static toCamelCase(str) {
+        if (!str)
             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';
+        return str
+            .replace(/[^a-zA-Z0-9 ]/g, '')
+            .split(' ')
+            .filter(Boolean)
+            .map((word, i) => i === 0
+            ? word.charAt(0).toLowerCase() + word.slice(1)
+            : word.charAt(0).toUpperCase() + word.slice(1))
+            .join('');
     }
 }
 
 class FormFieldComponent {
+    fb;
     expressionService;
     http;
     config;
     controller;
-    sectionIndex;
+    /**
+     * The FormGroup that THIS field's control should be registered in.
+     * For repeater instances this is the instance's own isolated FormGroup.
+     * For flat (non-repeater) fields this is the root formGroup.
+     */
+    formGroup;
+    /**
+     * Set to TRUE when this field is part of a repeatable group (config.sectionConfig.allowMulti = true).
+     * When true, the field does NOT sync with the global controller to prevent data collision
+     * between different instances of the same repeater row.
+     */
+    allowMulti = false;
     value;
     isVisible = true;
-    errorMessage = '';
+    showPassword = false; // password show/hide toggle
+    isDragOver = false; // file upload drag-over state
+    fileUploadError = ''; // per-field file validation error
     destroy$ = new Subject();
-    constructor(expressionService, http) {
+    // ── GROUP / allowMulti support ──────────────────────────────────────────
+    /** For GROUP fields with allowMulti = true */
+    groupFormArray;
+    /** For GROUP fields with allowMulti = false — single nested FormGroup */
+    groupFormGroup;
+    /**
+     * Tracked list of repeater instances.
+     * Using a separate array (not FormArray.controls) + trackBy(id) ensures
+     * Angular creates FRESH child components for every new row, preventing
+     * cached values from bleeding into new instances.
+     */
+    instanceList = [];
+    _nextInstanceId = 0;
+    /**
+     * Key used to register the GROUP control on the parent formGroup.
+     * Priority: sectionConfig.name > field.name > camelCase(label) > '__group__'
+     */
+    get groupKey() {
+        return (this.config.sectionConfig?.name ||
+            this.config.name ||
+            StringUtils.toCamelCase(this.config.sectionConfig?.label) ||
+            '__group__');
+    }
+    constructor(fb, expressionService, http) {
+        this.fb = fb;
         this.expressionService = expressionService;
         this.http = http;
     }
     ngOnInit() {
-        this.setupField();
+        if (this.isGroup) {
+            this.initGroupField();
+            return;
+        }
+        this.registerControl();
         this.setupVisibility();
         this.setupGeneratedField();
+        this.setupFormulaValidation(); // Generic formula-based validation
         this.setupDependencies();
-        // Initial load if no dependencies or if dependencies have initial values
+        this.setupMatchValidation(); // cross-field match (e.g. confirmPassword)
         if (!this.config.optionConfig?.dependencies) {
             this.loadDropdownOptions();
         }
     }
+    // ── GROUP initialisation ──────────────────────────────────────────────────
+    initGroupField() {
+        if (this.config.sectionConfig?.allowMulti) {
+            this.groupFormArray = this.fb.array([]);
+            this.formGroup.addControl(this.groupKey, this.groupFormArray);
+            this.addGroupInstance();
+        }
+        else {
+            this.groupFormGroup = this.fb.group({});
+            this.formGroup.addControl(this.groupKey, this.groupFormGroup);
+        }
+    }
+    /**
+     * Sets up cross-field validation based on the `onValidate` formula.
+     * Watches all variables mentioned in the formula and updates the field's
+     * validity whenever any of them change.
+     */
+    setupFormulaValidation() {
+        if (!this.config.onValidate)
+            return;
+        const expression = this.config.onValidate;
+        const variables = this.expressionService.extractVariables(expression);
+        // Subscribe to all fields mentioned in the formula
+        const observables = variables.map(v => this.controller.getFieldObservable(v));
+        combineLatest(observables).pipe(takeUntil(this.destroy$)).subscribe(() => {
+            const context = this.controller.getAllData();
+            const isValid = this.expressionService.evaluateCondition(expression, context);
+            const control = this.formGroup.get(this.config.name);
+            if (control) {
+                if (!isValid) {
+                    control.setErrors({ ...control.errors, formulaError: true });
+                }
+                else {
+                    // Clear only the formulaError
+                    if (control.hasError('formulaError')) {
+                        const errors = { ...control.errors };
+                        delete errors['formulaError'];
+                        control.setErrors(Object.keys(errors).length ? errors : null);
+                    }
+                }
+            }
+        });
+    }
+    addGroupInstance() {
+        const fg = this.fb.group({});
+        this.groupFormArray.push(fg);
+        // Spread to a new array reference so *ngFor always detects the change
+        this.instanceList = [...this.instanceList, { id: this._nextInstanceId++, fg }];
+    }
+    removeGroupInstance(index) {
+        if (this.instanceList.length > 1) {
+            this.groupFormArray.removeAt(index);
+            this.instanceList = this.instanceList.filter((_, i) => i !== index);
+        }
+    }
+    trackByInstanceId(_, item) {
+        return item.id;
+    }
+    // ── Leaf control ─────────────────────────────────────────────────────────
     ngOnDestroy() {
+        // Always complete so any subscriptions (e.g. subfields valueChanges) are cleaned up
         this.destroy$.next();
         this.destroy$.complete();
+        if (this.isGroup) {
+            if (this.formGroup?.contains(this.groupKey)) {
+                this.formGroup.removeControl(this.groupKey);
+            }
+            return;
+        }
+        const fieldName = this.config.name;
+        if (fieldName && this.formGroup?.contains(fieldName)) {
+            this.formGroup.removeControl(fieldName);
+        }
     }
-    setupField() {
-        if (this.config.name) {
-            const fieldName = this.getFieldName();
-            this.controller.getFieldObservable(fieldName)
-                .pipe(takeUntil(this.destroy$))
-                .subscribe(val => {
+    registerControl() {
+        if (!this.config.name || !this.formGroup)
+            return;
+        const fieldName = this.config.name;
+        const validators = this.getValidators();
+        // When inside a repeater instance, ALWAYS start with defaultValue (never
+        // read from the shared controller — prevents cross-instance value copying).
+        const initialValue = this.allowMulti
+            ? (this.config.defaultValue ?? null)
+            : (this.controller.getFieldValue(fieldName) ?? this.config.defaultValue ?? null);
+        let control = this.formGroup.get(fieldName);
+        if (!control) {
+            control = new FormControl({ value: initialValue, disabled: !!this.config.disabled }, validators);
+            this.formGroup.addControl(fieldName, control);
+        }
+        this.value = control.value;
+        if (!this.allowMulti) {
+            // ── Flat field: keep in sync with shared controller ──────────────────
+            control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(val => {
                 this.value = val;
+                this.controller.updateField(fieldName, val);
+            });
+            this.controller.getFieldObservable(fieldName).pipe(takeUntil(this.destroy$)).subscribe(val => {
+                if (val !== control.value) {
+                    control.setValue(val, { emitEvent: false });
+                    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);
+        else {
+            // ── Repeater field: local value tracking only ─────────────────────────
+            control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(val => {
+                this.value = val;
             });
         }
     }
-    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);
-                }
-            });
+    getValidators() {
+        const validators = [];
+        if (this.config.required)
+            validators.push(Validators.required);
+        if (this.config.subType === 'EMAIL')
+            validators.push(Validators.email);
+        if (this.config.subType === 'PASSWORD') {
+            // Minimum 8 chars by default; honour explicit textConfig.length overrides
+            const minLen = this.config.textConfig?.length?.min ?? 8;
+            validators.push(Validators.minLength(minLen));
         }
+        if (this.config.textConfig?.length) {
+            const { min, max } = this.config.textConfig.length;
+            if (min && this.config.subType !== 'PASSWORD')
+                validators.push(Validators.minLength(min));
+            if (max)
+                validators.push(Validators.maxLength(max));
+        }
+        if (this.config.textConfig?.pattern)
+            validators.push(Validators.pattern(this.config.textConfig.pattern));
+        if (this.config.numberConfig) {
+            const { min, max } = this.config.numberConfig;
+            if (min !== undefined)
+                validators.push(Validators.min(min));
+            if (max !== undefined)
+                validators.push(Validators.max(max));
+        }
+        return validators;
+    }
+    // ── Cross-field match validation (password === confirmPassword) ───────────
+    /**
+     * When `textConfig.matchField` is configured, subscribes to value changes on
+     * BOTH this control and the referenced control so the mismatch error updates
+     * instantly whichever field the user edits last.
+     *
+     *  - Values differ  → sets `{ passwordMismatch: true }` on THIS control.
+     *  - Values match   → clears `passwordMismatch` from THIS control.
+     */
+    setupMatchValidation() {
+        const matchFieldName = this.config.textConfig?.matchField;
+        if (!matchFieldName || !this.config.name || !this.formGroup)
+            return;
+        const thisControl = this.formGroup.get(this.config.name);
+        const otherControl = this.formGroup.get(matchFieldName);
+        if (!thisControl || !otherControl)
+            return;
+        const runCheck = () => {
+            const thisVal = thisControl.value;
+            const otherVal = otherControl.value;
+            if (thisVal && otherVal && thisVal !== otherVal) {
+                // Both have a value but they differ — flag the mismatch
+                thisControl.setErrors({ ...thisControl.errors, passwordMismatch: true }, { emitEvent: false });
+            }
+            else {
+                // Either one is empty OR they now match — clear the mismatch error
+                if (thisControl.hasError('passwordMismatch')) {
+                    const errors = { ...thisControl.errors };
+                    delete errors['passwordMismatch'];
+                    thisControl.setErrors(Object.keys(errors).length ? errors : null, { emitEvent: false });
+                }
+            }
+        };
+        // Fire when THIS (confirmPassword) field changes
+        thisControl.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => runCheck());
+        // Also fire when the OTHER (password) field changes so the error clears
+        // as soon as the user corrects the source value
+        otherControl.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => runCheck());
+    }
+    setupVisibility() {
+        if (!this.config.visibilityExpression)
+            return;
+        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);
+            const control = this.formGroup?.get(this.config.name);
+            if (control) {
+                this.isVisible ? control.enable({ emitEvent: false }) : control.disable({ emitEvent: false });
+            }
+        });
+    }
+    setupGeneratedField() {
+        if (this.config.type !== 'GENERATED' || !this.config.generatedConfig)
+            return;
+        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.config.name, result);
+            }
+        });
     }
     evaluateFormula(context) {
         if (!this.config.generatedConfig)
@@ -3792,74 +4097,59 @@ class FormFieldComponent {
             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
+        combineLatest(observables).pipe(takeUntil(this.destroy$)).subscribe(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 = [];
-                }
+            else 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] : []);
+        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) {
+                if (value !== null && value !== undefined)
                     params.append(key, String(value));
-                }
             });
             const queryString = params.toString();
-            if (queryString) {
+            if (queryString)
                 fullUrl += (fullUrl.includes('?') ? '&' : '?') + queryString;
-            }
-            return this.http.get(fullUrl);
+            return this.http.get(fullUrl, { headers: this.getHeaders() });
         });
-        forkJoin(observables)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe({
-            next: (responses) => {
+        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)) {
+                    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') {
+                        if (typeof valA === 'string' && typeof valB === 'string')
                             return direction * valA.localeCompare(valB);
-                        }
-                        if (typeof valA === 'number' && typeof valB === 'number') {
+                        if (typeof valA === 'number' && typeof valB === 'number')
                             return direction * (valA - valB);
-                        }
                         return 0;
                     });
                 }
@@ -3870,14 +4160,10 @@ class FormFieldComponent {
                     const code = optionConfig?.valuePath
                         ? this.getValueByPath(item, optionConfig.valuePath)
                         : (item.code || item.id || item.value);
-                    return {
-                        label: String(label),
-                        code: code,
-                        value: item
-                    };
+                    return { label: String(label), code, value: item };
                 });
             },
-            error: (err) => console.error('Failed to load dropdown options:', err)
+            error: err => console.error('Failed to load dropdown options:', err)
         });
     }
     getValueByPath(obj, path) {
@@ -3885,138 +4171,97 @@ class FormFieldComponent {
             return obj;
         return path.split('.').reduce((acc, part) => {
             const match = part.match(/(\w+)\[(\d+)\]/);
-            if (match) {
+            if (match)
                 return acc?.[match[1]]?.[parseInt(match[2])];
-            }
             return acc?.[part];
         }, obj);
     }
-    onValueChange(event) {
+    /** Builds HttpHeaders using the token stored in the SmartFormController (sourced from configJSON). */
+    getHeaders() {
+        let headers = new HttpHeaders();
+        if (this.controller.token) {
+            const headerName = this.controller.tokenHeader || 'Authorization';
+            headers = headers.set(headerName, this.controller.token);
+        }
+        return headers;
+    }
+    updateValue(newValue) {
         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;
+        const control = this.formGroup.get(this.config.name);
+        if (control) {
+            control.setValue(newValue);
+            control.markAsDirty();
+            control.markAsTouched();
         }
-        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);
+        const currentValue = (this.allowMulti
+            ? (this.formGroup.get(this.config.name)?.value)
+            : this.controller.getFieldValue(this.config.name)) || [];
+        const newValue = checked
+            ? [...currentValue, code]
+            : currentValue.filter((c) => c !== code);
+        this.updateValue(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';
-    }
+    get errorMessage() {
+        if (!this.config.name || !this.formGroup)
+            return '';
+        const control = this.formGroup.get(this.config.name);
+        if (control && control.invalid && (control.touched || control.dirty)) {
+            if (control.hasError('required'))
+                return 'This field is required';
+            if (control.hasError('email'))
+                return 'Invalid email format';
+            if (control.hasError('passwordMismatch'))
+                return 'Passwords do not match';
+            if (control.hasError('formulaError'))
+                return this.config.errorMessage || 'Invalid value';
+            if (control.hasError('minlength'))
+                return `Minimum length is ${control.errors?.['minlength'].requiredLength} characters`;
+            if (control.hasError('maxlength'))
+                return `Maximum length is ${control.errors?.['maxlength'].requiredLength} characters`;
+            if (control.hasError('min'))
+                return `Minimum value is ${control.errors?.['min'].min}`;
+            if (control.hasError('max'))
+                return `Maximum value is ${control.errors?.['max'].max}`;
+            if (control.hasError('pattern'))
+                return this.config.textConfig?.patternMessage || 'Invalid format';
+        }
+        return '';
+    }
+    // ── Type guards ──────────────────────────────────────────────────────────
+    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 isFileUpload() { return this.config.type === 'FILE_UPLOAD'; }
+    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'; }
+    get isGenerated() { return this.config.type === 'GENERATED'; }
+    get isRow() { return this.config.type === 'ROW'; }
+    get isGroup() { return this.config.type === 'GROUP'; }
+    /**
+     * Returns the effective grid column span for a child inside a ROW.
+     * If the child declares an explicit colSpan, use it.
+     * Otherwise divide 12 equally among all children (floor, min 1).
+     */
+    getChildColSpan(child) {
+        if (child.colSpan)
+            return child.colSpan;
+        const count = this.config.children?.length || 1;
+        return Math.max(1, Math.floor(12 / count));
+    }
+    // ── Rating helpers ───────────────────────────────────────────────────────
     onRatingChange(star, event) {
         if (!this.config.name || this.config.disabled)
             return;
@@ -4024,78 +4269,214 @@ class FormFieldComponent {
         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) {
+            if (event.clientX - rect.left < rect.width / 2)
                 newValue = star - 0.5;
-            }
         }
-        // Toggle off if clicking same value
-        if (this.value === newValue) {
+        if (this.value === newValue)
             newValue = 0;
-        }
-        this.controller.updateField(this.getFieldName(), newValue);
-        this.validate(newValue);
+        this.updateValue(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"] }] });
+    isStarHalf(star) { return (this.value || 0) === star - 0.5; }
+    isStarFilled(star) { return (this.value || 0) >= star; }
+    // ── File Upload helpers ──────────────────────────────────────────────────
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = true;
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+    }
+    onFileDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.processFiles(files);
+        }
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.processFiles(input.files);
+        }
+        // Reset input so the same file can be re-selected if removed
+        input.value = '';
+    }
+    processFiles(files) {
+        this.fileUploadError = '';
+        const cfg = this.config.attachmentConfig;
+        const maxSizeBytes = (cfg?.maxSizeMB ?? 10) * 1024 * 1024;
+        const currentFiles = this.value || [];
+        const maxFiles = cfg?.maxFiles ?? (cfg?.multiple ? 10 : 1);
+        const isMultiple = cfg?.multiple ?? false;
+        const incoming = Array.from(files);
+        for (const file of incoming) {
+            // Size validation
+            if (file.size > maxSizeBytes) {
+                this.fileUploadError = `"${file.name}" exceeds the maximum allowed size of ${cfg?.maxSizeMB ?? 10} MB.`;
+                continue;
+            }
+            // Max-files validation
+            if (isMultiple && currentFiles.length >= maxFiles) {
+                this.fileUploadError = `Maximum ${maxFiles} file${maxFiles !== 1 ? 's' : ''} allowed.`;
+                break;
+            }
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const entry = {
+                    name: file.name,
+                    size: file.size,
+                    type: file.type,
+                    dataUrl: e.target?.result,
+                    file
+                };
+                const updated = isMultiple ? [...currentFiles, entry] : [entry];
+                this.updateValue(updated);
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    removeUploadedFile(index) {
+        const current = this.value || [];
+        const updated = current.filter((_, i) => i !== index);
+        this.updateValue(updated);
+    }
+    getFileIcon(mimeType) {
+        if (mimeType.includes('pdf'))
+            return 'picture_as_pdf';
+        if (mimeType.includes('image'))
+            return 'image';
+        if (mimeType.includes('word') || mimeType.includes('document'))
+            return 'description';
+        if (mimeType.includes('sheet') || mimeType.includes('excel') || mimeType.includes('csv'))
+            return 'table_chart';
+        if (mimeType.includes('zip') || mimeType.includes('compressed'))
+            return 'folder_zip';
+        return 'attach_file';
+    }
+    formatFileSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    // ── Action Labels ──────────────────────────────────────────────────────────
+    get addLabel() {
+        const key = this.controller.actionLabels?.addLabel || 'Add';
+        return this.controller.labels[key] || key;
+    }
+    get removeLabel() {
+        const key = this.controller.actionLabels?.removeLabel || 'Remove';
+        return this.controller.labels[key] || key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldComponent, deps: [{ token: i1$2.FormBuilder }, { 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", formGroup: "formGroup", allowMulti: "allowMulti" }, ngImport: i0, template: "<div class=\"form-field\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\" class=\"group-section-wrapper\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n\r\n    <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\" class=\"group-instance\">\r\n      <!-- Instance header \u2014 show remove only when more than 1 instance -->\r\n      <div class=\"group-header\" *ngIf=\"instanceList.length > 1\">\r\n        <span class=\"group-number\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n        <lib-button [variant]=\"'danger-outline'\" [icon]=\"{type: 'material', value: 'delete_outline'}\"\r\n          (click)=\"removeGroupInstance(i)\">\r\n          {{ removeLabel }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- Fields \u2014 each child receives the *instance* FormGroup and the group's allowMulti config -->\r\n      <div class=\"group-fields sf-grid\">\r\n        <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n          <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n            <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\" [allowMulti]=\"true\">\r\n            </lib-form-field>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n      class=\"btn-add-group-wrapper\">\r\n      {{ addLabel }} {{ config.sectionConfig!.label }}\r\n    </lib-button>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\" class=\"group-section-wrapper\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\" class=\"password-toggle\" (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min\" [max]=\"config.numberConfig?.max\" [step]=\"config.numberConfig?.step || 1\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <input type=\"date\" class=\"field-input\" [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\"\r\n      [max]=\"config.dateConfig?.maxDate\" [class.is-invalid]=\"errorMessage\">\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST'\" class=\"checkbox-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"chip-label\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" style=\"display: none;\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container\">\r\n      <span class=\"field-label\">{{ config.label }}</span>\r\n      <div class=\"switch\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star\" [class.filled]=\"isStarFilled(star)\"\r\n        [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">{{ config.label }}</label>\r\n    <div class=\"generated-value\">{{ value || '-' }}</div>\r\n    <span class=\"field-hint\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div class=\"upload-drop-zone\" [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\"\r\n      [class.is-invalid]=\"errorMessage\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onFileDrop($event)\" (click)=\"fileInput.click()\">\r\n\r\n      <div class=\"upload-icon-wrap\">\r\n        <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text\">Drag and drop files here or <span class=\"upload-link\">click to upload</span></p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported formats:\r\n        <span class=\"upload-formats\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" style=\"display:none\"\r\n        [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\" class=\"uploaded-item\">\r\n        <!-- File type icon -->\r\n        <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n\r\n        <!-- Image thumbnail (only for images) -->\r\n        <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb\" alt=\"preview\">\r\n\r\n        <!-- Name & size -->\r\n        <div class=\"file-info\">\r\n          <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n          <span class=\"file-size\">{{ formatFileSize(f.size) }}</span>\r\n        </div>\r\n        <lib-button [variant]=\"'danger-outline'\" (click)=\"removeUploadedFile(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n</div>", styles: [".form-field{margin-bottom:var(--cc-sf-grid-gap, 16px)}.form-field.has-error .field-input{border-color:var(--cc-sf-error-border, #DC2626)}.form-row{display:flex;gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-wrapper{display:flex;flex-direction:column;gap:6px}.field-label{display:block;font-size:var(--cc-sf-label-size, .875rem);font-weight:var(--cc-sf-label-weight, 500);color:var(--cc-sf-label-color, #111827);margin-bottom:.5rem;line-height:1.25rem}.field-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.field-input{width:100%;padding:var(--cc-sf-input-padding, .625rem .875rem);font-size:var(--cc-sf-input-font-size, .875rem);line-height:1.5;color:var(--cc-sf-input-color, #111827);background-color:var(--cc-sf-input-bg, #ffffff);border:var(--cc-sf-input-border, 1.5px solid #D1D5DB);border-radius:var(--cc-sf-input-radius, 8px);box-shadow:var(--cc-sf-input-shadow, none);transition:var(--cc-sf-input-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit)}.field-input::placeholder{color:var(--cc-sf-input-placeholder, #9CA3AF)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border, #3B82F6);box-shadow:var(--cc-sf-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, .12))}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.field-input.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.field-input.is-invalid:focus{box-shadow:var(--cc-sf-error-focus-shadow, 0 0 0 3px rgba(220, 38, 38, .1))}.field-input.textarea{resize:vertical;min-height:100px;font-family:var(--cc-sf-font-family, inherit)}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.field-hint{font-size:var(--cc-sf-hint-size, .75rem);color:var(--cc-sf-hint-color, #6B7280)}.field-error{font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.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:var(--cc-sf-label-size, .875rem);color:var(--cc-sf-label-color, #111827)}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #3B82F6)}.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip-label{padding:var(--cc-sf-chip-padding, 6px 14px);background:var(--cc-sf-chip-bg, #ffffff);color:var(--cc-sf-chip-color, #374151);border:var(--cc-sf-chip-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-chip-radius, 20px);cursor:pointer;font-size:var(--cc-sf-font-size-base, .875rem);transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-chip-selected-bg, #3B82F6);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-chip-selected-border, #3B82F6)}.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:var(--cc-sf-switch-track-on, #3B82F6)}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--cc-sf-switch-track-off, #D1D5DB);transition:.4s;border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb, #ffffff);transition:.4s;border-radius:50%}.rating-group{display:flex;gap:4px}.rating-group .star{display:inline-flex;align-items:center;cursor:pointer;transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper{position:relative;display:flex;align-items:center}.password-wrapper .password-input{padding-right:2.75rem;width:100%}.password-wrapper .password-toggle{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:.25rem;line-height:1;color:var(--cc-sf-hint-color, #6B7280);display:flex;align-items:center;justify-content:center;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.generated-value{padding:var(--cc-sf-generated-padding, .625rem .875rem);background:var(--cc-sf-generated-bg, #F3F4F6);border:var(--cc-sf-generated-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-generated-radius, 8px);font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-generated-color, #6B7280);font-family:var(--cc-sf-font-family, inherit)}.group-section-wrapper{margin-bottom:var(--cc-sf-section-gap, 20px);border:var(--cc-sf-section-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-radius, 10px);padding:var(--cc-sf-section-padding, 20px);background-color:var(--cc-sf-section-bg, #ffffff);box-shadow:var(--cc-sf-section-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-instance{position:relative;margin-bottom:16px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper .group-instance .group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .group-instance .group-header .group-number{font-weight:500;color:var(--cc-sf-instance-num-color, #4B5563);font-size:var(--cc-sf-instance-num-size, .8125rem)}.btn-remove{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:var(--cc-sf-error-text-size, .75rem);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:8px 16px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);background-color:var(--cc-sf-dropzone-bg, #F8FAFC);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;text-align:center;-webkit-user-select:none;user-select:none}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap{margin-bottom:4px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:56px;width:56px;height:56px;line-height:56px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-main-text{font-size:.9rem;font-weight:600;color:var(--cc-sf-label-color, #1E293B);margin:0}.upload-main-text .upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-hint-text{font-size:.78rem;color:var(--cc-sf-dropzone-hint-color, #64748B);margin:0}.upload-hint-text .upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.uploaded-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.uploaded-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0}.uploaded-item .file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.uploaded-item .file-info .file-name{font-size:.85rem;font-weight:500;color:var(--cc-sf-label-color, #1E293B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uploaded-item .file-info .file-size{font-size:.72rem;color:var(--cc-sf-hint-color, #94A3B8)}.uploaded-item .file-remove-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:4px;border-radius:4px;flex-shrink:0;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover{color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.input-group{position:relative;display:flex;align-items:stretch;width:100%}.input-group .field-input{flex:1;border-radius:0}.input-group .field-input:first-child{border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-group .field-input:last-child{border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px)}.input-group.readonly .field-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);cursor:default;padding-right:3.5rem}.input-group.readonly .input-prefix,.input-group.readonly .input-suffix{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)}.input-prefix,.input-suffix{display:flex;align-items:center;padding:0 .875rem;background-color:var(--cc-sf-input-bg, #FFFFFF);border:var(--cc-sf-input-border, 1.5px solid #D1D5DB);color:var(--cc-sf-hint-color, #6B7280);font-size:var(--cc-sf-input-font-size, .875rem);white-space:nowrap;-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px);color:var(--cc-sf-chip-selected-bg, #3B82F6);font-weight:500}.readonly-icons{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);display:flex;gap:8px;pointer-events:none}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.subfields-group-wrapper{margin-bottom:var(--cc-sf-grid-gap, 16px)}.subfields-group-wrapper .group-label{display:block;font-size:var(--cc-sf-label-size, .875rem);font-weight:600;color:var(--cc-sf-label-color, #111827);margin-bottom:.75rem}.subfields-group-wrapper .group-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.subfields-group-wrapper .subfields-row{display:flex;align-items:flex-end;gap:12px;border-radius:var(--cc-sf-input-radius, 8px);transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{flex:1;min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{margin-bottom:24px;font-weight:700;color:#94a3b8}.subfields-group-wrapper .subfields-group-error{display:block;margin-top:6px;font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}\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: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }] });
 }
 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: [{
+            args: [{ selector: 'lib-form-field', standalone: false, template: "<div class=\"form-field\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\" class=\"group-section-wrapper\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n\r\n    <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\" class=\"group-instance\">\r\n      <!-- Instance header \u2014 show remove only when more than 1 instance -->\r\n      <div class=\"group-header\" *ngIf=\"instanceList.length > 1\">\r\n        <span class=\"group-number\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n        <lib-button [variant]=\"'danger-outline'\" [icon]=\"{type: 'material', value: 'delete_outline'}\"\r\n          (click)=\"removeGroupInstance(i)\">\r\n          {{ removeLabel }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- Fields \u2014 each child receives the *instance* FormGroup and the group's allowMulti config -->\r\n      <div class=\"group-fields sf-grid\">\r\n        <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n          <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n            <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\" [allowMulti]=\"true\">\r\n            </lib-form-field>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n      class=\"btn-add-group-wrapper\">\r\n      {{ addLabel }} {{ config.sectionConfig!.label }}\r\n    </lib-button>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\" class=\"group-section-wrapper\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\" class=\"password-toggle\" (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min\" [max]=\"config.numberConfig?.max\" [step]=\"config.numberConfig?.step || 1\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <input type=\"date\" class=\"field-input\" [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\"\r\n      [max]=\"config.dateConfig?.maxDate\" [class.is-invalid]=\"errorMessage\">\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST'\" class=\"checkbox-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"chip-label\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" style=\"display: none;\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container\">\r\n      <span class=\"field-label\">{{ config.label }}</span>\r\n      <div class=\"switch\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star\" [class.filled]=\"isStarFilled(star)\"\r\n        [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">{{ config.label }}</label>\r\n    <div class=\"generated-value\">{{ value || '-' }}</div>\r\n    <span class=\"field-hint\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div class=\"upload-drop-zone\" [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\"\r\n      [class.is-invalid]=\"errorMessage\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onFileDrop($event)\" (click)=\"fileInput.click()\">\r\n\r\n      <div class=\"upload-icon-wrap\">\r\n        <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text\">Drag and drop files here or <span class=\"upload-link\">click to upload</span></p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported formats:\r\n        <span class=\"upload-formats\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" style=\"display:none\"\r\n        [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\" class=\"uploaded-item\">\r\n        <!-- File type icon -->\r\n        <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n\r\n        <!-- Image thumbnail (only for images) -->\r\n        <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb\" alt=\"preview\">\r\n\r\n        <!-- Name & size -->\r\n        <div class=\"file-info\">\r\n          <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n          <span class=\"file-size\">{{ formatFileSize(f.size) }}</span>\r\n        </div>\r\n        <lib-button [variant]=\"'danger-outline'\" (click)=\"removeUploadedFile(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n</div>", styles: [".form-field{margin-bottom:var(--cc-sf-grid-gap, 16px)}.form-field.has-error .field-input{border-color:var(--cc-sf-error-border, #DC2626)}.form-row{display:flex;gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-wrapper{display:flex;flex-direction:column;gap:6px}.field-label{display:block;font-size:var(--cc-sf-label-size, .875rem);font-weight:var(--cc-sf-label-weight, 500);color:var(--cc-sf-label-color, #111827);margin-bottom:.5rem;line-height:1.25rem}.field-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.field-input{width:100%;padding:var(--cc-sf-input-padding, .625rem .875rem);font-size:var(--cc-sf-input-font-size, .875rem);line-height:1.5;color:var(--cc-sf-input-color, #111827);background-color:var(--cc-sf-input-bg, #ffffff);border:var(--cc-sf-input-border, 1.5px solid #D1D5DB);border-radius:var(--cc-sf-input-radius, 8px);box-shadow:var(--cc-sf-input-shadow, none);transition:var(--cc-sf-input-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit)}.field-input::placeholder{color:var(--cc-sf-input-placeholder, #9CA3AF)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border, #3B82F6);box-shadow:var(--cc-sf-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, .12))}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.field-input.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.field-input.is-invalid:focus{box-shadow:var(--cc-sf-error-focus-shadow, 0 0 0 3px rgba(220, 38, 38, .1))}.field-input.textarea{resize:vertical;min-height:100px;font-family:var(--cc-sf-font-family, inherit)}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.field-hint{font-size:var(--cc-sf-hint-size, .75rem);color:var(--cc-sf-hint-color, #6B7280)}.field-error{font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.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:var(--cc-sf-label-size, .875rem);color:var(--cc-sf-label-color, #111827)}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #3B82F6)}.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip-label{padding:var(--cc-sf-chip-padding, 6px 14px);background:var(--cc-sf-chip-bg, #ffffff);color:var(--cc-sf-chip-color, #374151);border:var(--cc-sf-chip-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-chip-radius, 20px);cursor:pointer;font-size:var(--cc-sf-font-size-base, .875rem);transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-chip-selected-bg, #3B82F6);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-chip-selected-border, #3B82F6)}.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:var(--cc-sf-switch-track-on, #3B82F6)}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--cc-sf-switch-track-off, #D1D5DB);transition:.4s;border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb, #ffffff);transition:.4s;border-radius:50%}.rating-group{display:flex;gap:4px}.rating-group .star{display:inline-flex;align-items:center;cursor:pointer;transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper{position:relative;display:flex;align-items:center}.password-wrapper .password-input{padding-right:2.75rem;width:100%}.password-wrapper .password-toggle{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:.25rem;line-height:1;color:var(--cc-sf-hint-color, #6B7280);display:flex;align-items:center;justify-content:center;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.generated-value{padding:var(--cc-sf-generated-padding, .625rem .875rem);background:var(--cc-sf-generated-bg, #F3F4F6);border:var(--cc-sf-generated-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-generated-radius, 8px);font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-generated-color, #6B7280);font-family:var(--cc-sf-font-family, inherit)}.group-section-wrapper{margin-bottom:var(--cc-sf-section-gap, 20px);border:var(--cc-sf-section-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-radius, 10px);padding:var(--cc-sf-section-padding, 20px);background-color:var(--cc-sf-section-bg, #ffffff);box-shadow:var(--cc-sf-section-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-instance{position:relative;margin-bottom:16px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper .group-instance .group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .group-instance .group-header .group-number{font-weight:500;color:var(--cc-sf-instance-num-color, #4B5563);font-size:var(--cc-sf-instance-num-size, .8125rem)}.btn-remove{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:var(--cc-sf-error-text-size, .75rem);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:8px 16px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);background-color:var(--cc-sf-dropzone-bg, #F8FAFC);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;text-align:center;-webkit-user-select:none;user-select:none}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap{margin-bottom:4px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:56px;width:56px;height:56px;line-height:56px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-main-text{font-size:.9rem;font-weight:600;color:var(--cc-sf-label-color, #1E293B);margin:0}.upload-main-text .upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-hint-text{font-size:.78rem;color:var(--cc-sf-dropzone-hint-color, #64748B);margin:0}.upload-hint-text .upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.uploaded-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.uploaded-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0}.uploaded-item .file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.uploaded-item .file-info .file-name{font-size:.85rem;font-weight:500;color:var(--cc-sf-label-color, #1E293B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uploaded-item .file-info .file-size{font-size:.72rem;color:var(--cc-sf-hint-color, #94A3B8)}.uploaded-item .file-remove-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:4px;border-radius:4px;flex-shrink:0;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover{color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.input-group{position:relative;display:flex;align-items:stretch;width:100%}.input-group .field-input{flex:1;border-radius:0}.input-group .field-input:first-child{border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-group .field-input:last-child{border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px)}.input-group.readonly .field-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);cursor:default;padding-right:3.5rem}.input-group.readonly .input-prefix,.input-group.readonly .input-suffix{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)}.input-prefix,.input-suffix{display:flex;align-items:center;padding:0 .875rem;background-color:var(--cc-sf-input-bg, #FFFFFF);border:var(--cc-sf-input-border, 1.5px solid #D1D5DB);color:var(--cc-sf-hint-color, #6B7280);font-size:var(--cc-sf-input-font-size, .875rem);white-space:nowrap;-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px);color:var(--cc-sf-chip-selected-bg, #3B82F6);font-weight:500}.readonly-icons{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);display:flex;gap:8px;pointer-events:none}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.subfields-group-wrapper{margin-bottom:var(--cc-sf-grid-gap, 16px)}.subfields-group-wrapper .group-label{display:block;font-size:var(--cc-sf-label-size, .875rem);font-weight:600;color:var(--cc-sf-label-color, #111827);margin-bottom:.75rem}.subfields-group-wrapper .group-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.subfields-group-wrapper .subfields-row{display:flex;align-items:flex-end;gap:12px;border-radius:var(--cc-sf-input-radius, 8px);transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{flex:1;min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{margin-bottom:24px;font-weight:700;color:#94a3b8}.subfields-group-wrapper .subfields-group-error{display:block;margin-top:6px;font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ExpressionService }, { type: i3.HttpClient }], propDecorators: { config: [{
                 type: Input
             }], controller: [{
                 type: Input
-            }], sectionIndex: [{
+            }], formGroup: [{
+                type: Input
+            }], allowMulti: [{
                 type: Input
             }] } });
 
 class FormSectionComponent {
+    fb;
     config;
     controller;
-    sections = [{}];
-    addSection() {
+    formGroup;
+    /**
+     * For allowMulti sections: the FormArray registered on the root formGroup.
+     * Each element is a FormGroup representing one repeater instance.
+     */
+    repeaterFormArray;
+    /**
+     * The key under which the FormArray is registered in the root formGroup.
+     * Falls back to config.name or a generated key.
+     */
+    get arrayKey() {
+        return this.config.name || '__repeater__';
+    }
+    constructor(fb) {
+        this.fb = fb;
+    }
+    ngOnInit() {
         if (this.config.allowMulti) {
-            this.sections.push({});
+            this.repeaterFormArray = this.fb.array([]);
+            this.formGroup.addControl(this.arrayKey, this.repeaterFormArray);
+            // Start with one empty instance
+            this.addInstance();
+        }
+    }
+    ngOnDestroy() {
+        if (this.config.allowMulti && this.formGroup.contains(this.arrayKey)) {
+            this.formGroup.removeControl(this.arrayKey);
         }
     }
-    removeSection(index) {
-        if (this.sections.length > 1) {
-            this.sections.splice(index, 1);
+    // ── Repeater helpers ──────────────────────────────────────────────────────
+    /** Creates a fresh FormGroup for one repeater instance */
+    createInstanceGroup() {
+        return this.fb.group({});
+    }
+    addInstance() {
+        this.repeaterFormArray.push(this.createInstanceGroup());
+    }
+    removeInstance(index) {
+        if (this.repeaterFormArray.length > 1) {
+            this.repeaterFormArray.removeAt(index);
         }
     }
-    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"] }] });
+    getInstanceGroup(index) {
+        return this.repeaterFormArray.at(index);
+    }
+    get instanceGroups() {
+        return this.repeaterFormArray.controls;
+    }
+    // ── Non-repeater: flat single FormGroup (root formGroup passed through) ──
+    /** For non-allowMulti sections we simply pass the root formGroup down */
+    get flatFormGroup() {
+        return this.formGroup;
+    }
+    // ── Collect nested fields for a given child ───────────────────────────────
+    /** Flatten a field tree to get all leaf fields (for ROW children etc.) */
+    getFlatFields(fields) {
+        const result = [];
+        fields.forEach(f => {
+            if (f.type === 'ROW' && f.children) {
+                result.push(...this.getFlatFields(f.children));
+            }
+            else {
+                result.push(f);
+            }
+        });
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormSectionComponent, deps: [{ token: i1$2.FormBuilder }], 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", formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"form-section-container\">\r\n  <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n  <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"config.allowMulti\">\r\n    <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n    <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n      <!-- Instance header (remove button) -->\r\n      <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n        <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n        <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n          <mat-icon>delete_outline</mat-icon> Remove\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n      <div class=\"section-fields sf-grid\">\r\n        <ng-container *ngFor=\"let field of config.children\">\r\n          <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n            <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n            </lib-form-field>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n      <mat-icon>add</mat-icon> Add {{ config.label }}\r\n    </lib-button>\r\n  </ng-container>\r\n\r\n  <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"!config.allowMulti\">\r\n    <div class=\"section-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\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.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }] });
 }
 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: [{
+            args: [{ selector: 'lib-form-section', standalone: false, template: "<div class=\"form-section-container\">\r\n  <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n  <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"config.allowMulti\">\r\n    <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n    <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n      <!-- Instance header (remove button) -->\r\n      <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n        <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n        <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n          <mat-icon>delete_outline</mat-icon> Remove\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n      <div class=\"section-fields sf-grid\">\r\n        <ng-container *ngFor=\"let field of config.children\">\r\n          <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n            <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n            </lib-form-field>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n      <mat-icon>add</mat-icon> Add {{ config.label }}\r\n    </lib-button>\r\n  </ng-container>\r\n\r\n  <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"!config.allowMulti\">\r\n    <div class=\"section-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
                 type: Input
             }], controller: [{
                 type: Input
+            }], formGroup: [{
+                type: Input
             }] } });
 
 class SmartFormComponent {
@@ -4106,6 +4487,12 @@ class SmartFormComponent {
     formJson;
     initialValues;
     enableDraftAutoSave = false;
+    /** Flat i18n labels map passed by the consuming app.
+     *  After JSON parse the schema is walked and every string value that
+     *  matches a key in this map is replaced with the translated value.
+     *  Mirrors the pattern used by ConfigurableFormComponent + translateConfig.
+     */
+    labels = {};
     submit = new EventEmitter();
     draftSave = new EventEmitter();
     formSchema;
@@ -4121,23 +4508,41 @@ class SmartFormComponent {
         this.http = http;
     }
     ngOnInit() {
+        this.parseFormJson();
         if (this.initialValues) {
             this.controller.initialize(this.initialValues);
         }
-        this.parseFormJson();
     }
     ngOnChanges(changes) {
         if (changes['formJson'] && !changes['formJson'].isFirstChange()) {
             this.parseFormJson();
         }
+        // Re-translate if labels arrive after the JSON was already parsed
+        if (changes['labels'] && !changes['labels'].isFirstChange() && this.formSchema) {
+            this.parseFormJson();
+        }
     }
     ngOnDestroy() {
         this.controller.destroy();
     }
     parseFormJson() {
+        if (!this.formJson) {
+            return;
+        } // guard: labels may arrive before formJson
         try {
             const jsonData = JSON.parse(this.formJson);
             this.formSchema = jsonData;
+            // Push token from configJSON into the shared controller so all child
+            // components (form-field, etc.) can read it without @Input prop-drilling.
+            this.controller.token = this.formSchema.token;
+            this.controller.tokenHeader = this.formSchema.tokenHeader;
+            // Translate i18n keys before rendering
+            if (this.labels && Object.keys(this.labels).length) {
+                SmartFormTranslationUtils.translateSchema(this.formSchema, this.labels);
+            }
+            // Share translated labels with child components via controller
+            this.controller.labels = this.labels;
+            this.controller.actionLabels = this.formSchema.labels;
             this.isStepper = this.formSchema.formType === 'STEPPER';
             this.fieldList = this.isStepper
                 ? this.formSchema.stepperConfig?.children || []
@@ -4154,21 +4559,34 @@ class SmartFormComponent {
     }
     collectFields(fields) {
         fields.forEach(field => {
-            if (field.name) {
-                const value = field.defaultValue !== undefined ? field.defaultValue : null;
+            // Flat leaf fields: seed controller with default values
+            if (field.name && field.type !== 'GROUP' && field.type !== 'ROW') {
+                // Check if initialValues already has a value for this field
+                const existingValue = this.initialValues?.[field.name];
+                const value = existingValue !== undefined
+                    ? existingValue
+                    : (field.defaultValue !== undefined ? field.defaultValue : null);
                 this.controller.updateField(field.name, value);
             }
-            if (field.children && field.children.length > 0) {
+            // Recurse into ROW children
+            if (field.type === 'ROW' && field.children?.length) {
                 this.collectFields(field.children);
             }
+            // GROUP children will be handled dynamically by FormFieldComponent
         });
     }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Submit
+    // ───────────────────────────────────────────────────────────────────────────
     handleSubmit() {
         if (this.isStepper && this.currentStep < this.fieldList.length - 1) {
-            this.nextStep();
+            if (this.validate())
+                this.nextStep();
             return;
         }
-        const formData = this.controller.getAllData();
+        if (!this.validate())
+            return;
+        const formData = this.collectFormData();
         this.isLoading = true;
         if (this.formSchema.submitConfig?.apiUrl) {
             this.submitToApi(formData);
@@ -4178,54 +4596,116 @@ class SmartFormComponent {
             this.isLoading = false;
         }
     }
+    /**
+     * Recursively extracts values from the formGroup, converting FormArrays to
+     * arrays of objects so repeater groups come out as expected.
+     */
+    collectFormData() {
+        return this.extractGroupValue(this.formGroup);
+    }
+    extractGroupValue(group) {
+        const result = {};
+        Object.keys(group.controls).forEach(key => {
+            const ctrl = group.get(key);
+            if (ctrl instanceof FormArray) {
+                // Repeater → array of objects
+                result[key] = ctrl.controls.map(fg => this.extractGroupValue(fg));
+            }
+            else if (ctrl instanceof FormGroup) {
+                // Nested single group → nested object
+                result[key] = this.extractGroupValue(ctrl);
+            }
+            else {
+                result[key] = ctrl?.value ?? null;
+            }
+        });
+        return result;
+    }
+    validate() {
+        if (this.formGroup.invalid) {
+            this.formGroup.markAllAsTouched();
+            this.scrollToFirstInvalidControl();
+            return false;
+        }
+        return true;
+    }
+    scrollToFirstInvalidControl() {
+        setTimeout(() => {
+            const firstInvalidControl = document.querySelector('.is-invalid, .ng-invalid.ng-touched');
+            if (firstInvalidControl) {
+                firstInvalidControl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        }, 100);
+    }
     submitToApi(formData) {
         const config = this.formSchema.submitConfig;
         const method = config.method || 'POST';
-        this.http.request(method, config.apiUrl, { body: formData })
-            .subscribe({
-            next: (response) => {
+        const headers = this.getHeaders();
+        this.http.request(method, config.apiUrl, { body: formData, headers }).subscribe({
+            next: response => {
                 alert(config.successMessage || 'Form submitted successfully');
                 this.submit.emit(response);
                 this.isLoading = false;
             },
-            error: (err) => {
+            error: err => {
                 alert(config.errorMessage || 'Failed to submit form');
                 console.error('Submit error:', err);
                 this.isLoading = false;
             }
         });
     }
+    /** Builds HttpHeaders from the token stored in the controller (sourced from configJSON). */
+    getHeaders() {
+        let headers = new HttpHeaders();
+        if (this.controller.token) {
+            const headerName = this.controller.tokenHeader || 'Authorization';
+            headers = headers.set(headerName, this.controller.token);
+        }
+        return headers;
+    }
+    // ───────────────────────────────────────────────────────────────────────────
+    // Stepper
+    // ───────────────────────────────────────────────────────────────────────────
     nextStep() {
-        if (this.currentStep < this.fieldList.length - 1) {
+        if (this.currentStep < this.fieldList.length - 1)
             this.currentStep++;
-        }
     }
     previousStep() {
-        if (this.currentStep > 0) {
+        if (this.currentStep > 0)
             this.currentStep--;
-        }
-    }
-    get canGoNext() {
-        return this.currentStep < this.fieldList.length - 1;
-    }
-    get canGoPrevious() {
-        return this.currentStep > 0;
     }
+    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;
     }
+    // ── Action Labels ──────────────────────────────────────────────────────────
+    get nextLabel() {
+        const key = this.formSchema?.labels?.nextLabel || 'Next';
+        return this.labels[key] || key;
+    }
+    get submitLabel() {
+        const key = this.formSchema?.labels?.submitLabel || 'Submit';
+        return this.labels[key] || key;
+    }
+    get previousLabel() {
+        const key = this.formSchema?.labels?.previousLabel || 'Previous';
+        return this.labels[key] || key;
+    }
     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"] }] });
+    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", labels: "labels" }, outputs: { submit: "submit", draftSave: "draftSave" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- Form Actions -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false\">\r\n      <lib-button *ngIf=\"isStepper && canGoPrevious\" [variant]=\"'outline'\" (click)=\"previousStep()\">\r\n        {{ previousLabel }}\r\n      </lib-button>\r\n\r\n      <lib-button [variant]=\"'warning'\" [disabled]=\"isLoading\" (click)=\"handleSubmit()\">\r\n        {{ isStepper && canGoNext ? nextLabel : submitLabel }}\r\n      </lib-button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".smart-form-container{width:100%;max-width:var(--cc-sf-form-max-width, 1200px);margin:0 auto;padding:var(--cc-sf-form-padding, 24px);font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.form-header{margin-bottom:24px}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);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:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:flex-end;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .btn{font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);border:none;cursor:pointer;transition:var(--cc-sf-btn-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit);line-height:1.5}.form-actions .btn.btn-primary{background:var(--cc-sf-btn-primary-bg, #3B82F6);color:var(--cc-sf-btn-primary-color, #ffffff);border-radius:var(--cc-sf-btn-primary-radius, 8px);padding:var(--cc-sf-btn-primary-padding, .625rem 1.5rem)}.form-actions .btn.btn-primary:hover:not(:disabled){background:var(--cc-sf-btn-primary-hover-bg, #2563EB)}.form-actions .btn.btn-primary:disabled{opacity:var(--cc-sf-btn-disabled-opacity, .55);cursor:not-allowed}.form-actions .btn.btn-secondary{background:var(--cc-sf-btn-secondary-bg, #F3F4F6);color:var(--cc-sf-btn-secondary-color, #374151);border-radius:var(--cc-sf-btn-secondary-radius, 8px);padding:var(--cc-sf-btn-secondary-padding, .625rem 1.5rem)}.form-actions .btn.btn-secondary:hover{background:var(--cc-sf-btn-secondary-hover-bg, #E5E7EB)}\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: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormSectionComponent, selector: "lib-form-section", inputs: ["config", "controller", "formGroup"] }] });
 }
 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"] }]
+            args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- Form Actions -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false\">\r\n      <lib-button *ngIf=\"isStepper && canGoPrevious\" [variant]=\"'outline'\" (click)=\"previousStep()\">\r\n        {{ previousLabel }}\r\n      </lib-button>\r\n\r\n      <lib-button [variant]=\"'warning'\" [disabled]=\"isLoading\" (click)=\"handleSubmit()\">\r\n        {{ isStepper && canGoNext ? nextLabel : submitLabel }}\r\n      </lib-button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".smart-form-container{width:100%;max-width:var(--cc-sf-form-max-width, 1200px);margin:0 auto;padding:var(--cc-sf-form-padding, 24px);font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.form-header{margin-bottom:24px}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);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:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:flex-end;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .btn{font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);border:none;cursor:pointer;transition:var(--cc-sf-btn-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit);line-height:1.5}.form-actions .btn.btn-primary{background:var(--cc-sf-btn-primary-bg, #3B82F6);color:var(--cc-sf-btn-primary-color, #ffffff);border-radius:var(--cc-sf-btn-primary-radius, 8px);padding:var(--cc-sf-btn-primary-padding, .625rem 1.5rem)}.form-actions .btn.btn-primary:hover:not(:disabled){background:var(--cc-sf-btn-primary-hover-bg, #2563EB)}.form-actions .btn.btn-primary:disabled{opacity:var(--cc-sf-btn-disabled-opacity, .55);cursor:not-allowed}.form-actions .btn.btn-secondary{background:var(--cc-sf-btn-secondary-bg, #F3F4F6);color:var(--cc-sf-btn-secondary-color, #374151);border-radius:var(--cc-sf-btn-secondary-radius, 8px);padding:var(--cc-sf-btn-secondary-padding, .625rem 1.5rem)}.form-actions .btn.btn-secondary:hover{background:var(--cc-sf-btn-secondary-hover-bg, #E5E7EB)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: SmartFormController }, { type: ExpressionService }, { type: i3.HttpClient }], propDecorators: { formJson: [{
                 type: Input
             }], initialValues: [{
                 type: Input
             }], enableDraftAutoSave: [{
                 type: Input
+            }], labels: [{
+                type: Input
             }], submit: [{
                 type: Output
             }], draftSave: [{
@@ -4238,12 +4718,16 @@ class SmartFormModule {
             FormSectionComponent,
             FormFieldComponent], imports: [CommonModule,
             ReactiveFormsModule,
-            FormsModule], exports: [SmartFormComponent] });
+            FormsModule,
+            MaterialModule,
+            ButtonModule], exports: [SmartFormComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormModule, providers: [
             ExpressionService
         ], imports: [CommonModule,
             ReactiveFormsModule,
-            FormsModule] });
+            FormsModule,
+            MaterialModule,
+            ButtonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormModule, decorators: [{
             type: NgModule,
@@ -4256,7 +4740,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
-                        FormsModule
+                        FormsModule,
+                        MaterialModule,
+                        ButtonModule
                     ],
                     exports: [
                         SmartFormComponent
@@ -5264,17 +5750,93 @@ class SmartTableComponent {
                 if (!confirm(message))
                     return;
             }
-            this.action.emit({ action, row });
+            if (action.apiUrl) {
+                this.executeApiAction(action, row);
+            }
+            else {
+                this.action.emit({ action, row });
+            }
         }
         else {
             this.action.emit({ action, row });
         }
     }
+    onActionItemClick(item, row, event) {
+        event.stopPropagation();
+        if (item.type === 'callback' && item.callback) {
+            item.callback(row);
+        }
+        if (item.type === 'route' && item.route) {
+            const url = this.replaceParams(item.route, row);
+            this.router.navigateByUrl(url);
+            return;
+        }
+        if (item.type === 'api') {
+            if (item.confirmationNeeded) {
+                const message = item.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
+                if (!confirm(message))
+                    return;
+            }
+            if (item.apiUrl) {
+                this.executeApiAction(item, row);
+            }
+            else {
+                this.action.emit({ action: item, row });
+            }
+        }
+        else {
+            this.action.emit({ action: item, row });
+        }
+    }
     onTopAction(action) {
         if (action.type === 'callback' && action.callback) {
             action.callback(null); // No row for top action
         }
-        this.topAction.emit(action);
+        if (action.type === 'route' && action.route) {
+            // Since it's a top action, replaceParams with an empty object or handle statically 
+            const url = this.replaceParams(action.route, {});
+            this.router.navigateByUrl(url);
+            return;
+        }
+        if (action.type === 'api') {
+            if (action.confirmationNeeded) {
+                const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
+                if (!confirm(message))
+                    return;
+            }
+            if (action.apiUrl) {
+                this.executeApiAction(action, null);
+            }
+            else {
+                this.topAction.emit(action);
+            }
+        }
+        else {
+            this.topAction.emit(action);
+        }
+    }
+    executeApiAction(action, row) {
+        if (!action.apiUrl)
+            return;
+        const url = row ? this.replaceParams(action.apiUrl, row) : action.apiUrl;
+        const method = action.apiMethod || 'POST';
+        const headers = this.getHeaders();
+        const body = row ? row : {};
+        this.loading = true;
+        this.http.request(method, url, { body, headers }).pipe(finalize(() => this.loading = false)).subscribe({
+            next: () => {
+                this.loadData(); // reload on success
+                if (row) {
+                    this.action.emit({ action, row });
+                }
+                else {
+                    this.topAction.emit(action);
+                }
+            },
+            error: (err) => {
+                console.error('API Action Error', err);
+            }
+        });
     }
     // --- Selection ---
     onSelectAll(event) {
@@ -5450,11 +6012,11 @@ class SmartTableComponent {
         return headers;
     }
     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", columnClick: "columnClick" }, 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\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\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-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}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", "labels"] }] });
+    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", columnClick: "columnClick" }, 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\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\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                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <button class=\"st-dropdown-btn\" [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\">\n                            <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                        </button>\n                        <mat-menu #menu=\"matMenu\" xPosition=\"before\" class=\"st-action-menu\">\n                            <button mat-menu-item *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event)\">\n                                <i *ngIf=\"item.icon\" [class]=\"item.icon\" style=\"margin-right: 8px;\"></i>\n                                <span>{{ item.label }}</span>\n                            </button>\n                        </mat-menu>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\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                </ng-container>\n            </div>\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-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}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", "labels"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
 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\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\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-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}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          <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\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\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                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <button class=\"st-dropdown-btn\" [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\">\n                            <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                        </button>\n                        <mat-menu #menu=\"matMenu\" xPosition=\"before\" class=\"st-action-menu\">\n                            <button mat-menu-item *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event)\">\n                                <i *ngIf=\"item.icon\" [class]=\"item.icon\" style=\"margin-right: 8px;\"></i>\n                                <span>{{ item.label }}</span>\n                            </button>\n                        </mat-menu>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\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                </ng-container>\n            </div>\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-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}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: [{
@@ -5477,11 +6039,15 @@ class SmartTableModule {
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, declarations: [SmartTableComponent], imports: [CommonModule,
             FormsModule,
             PaginationModule,
-            ButtonModule], exports: [SmartTableComponent] });
+            ButtonModule,
+            MatMenuModule,
+            MatIconModule], exports: [SmartTableComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, imports: [CommonModule,
             FormsModule,
             PaginationModule,
-            ButtonModule] });
+            ButtonModule,
+            MatMenuModule,
+            MatIconModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, decorators: [{
             type: NgModule,
@@ -5493,7 +6059,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CommonModule,
                         FormsModule,
                         PaginationModule,
-                        ButtonModule
+                        ButtonModule,
+                        MatMenuModule,
+                        MatIconModule
                     ],
                     exports: [
                         SmartTableComponent
@@ -5501,382 +6069,1324 @@ 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
+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';
     }
+}
+
+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
-    }
+    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
-            }
-          }
-        }
-      ]
-    }
+    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
-    }
-  }`
+    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
+    }
+  }`,
+    // Donor Form based on UI
+    donorForm: `{
+    "entityType": "DONOR",
+    "label": "Donor Form",
+    "formType": "SECTION",
+    "sectionConfig": {
+      "children": [
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Donor Details",
+            "name": "donorDetails",
+            "children": [
+              {
+                "name": "legalName",
+                "label": "Donor Legal Name",
+                "type": "TEXT_INPUT",
+                "subType": "SHORT",
+                "required": true,
+                "placeholder": "Enter the name"
+              },
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "shortCode",
+                    "label": "Donor Short Code",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "colSpan": 3,
+                    "disabled": true,
+                    "defaultValue": "DLP-24-L1",
+                    "hint": "System-generated, unique internal code"
+                  },
+                  {
+                    "name": "donorType",
+                    "label": "Donor Type",
+                    "type": "DROPDOWN",
+                    "subType": "SINGLE",
+                    "colSpan": 3,
+                    "required": true,
+                    "placeholder": "Select",
+                    "optionConfig": {
+                      "optionList": [
+                        { "label": "Individual", "code": "INDIVIDUAL" },
+                        { "label": "Corporate", "code": "CORPORATE" },
+                        { "label": "Trust", "code": "TRUST" }
+                      ]
+                    }
+                  },
+                  {
+                    "name": "regNumber",
+                    "label": "Registration / Legal Entity Number",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "colSpan": 3,
+                    "placeholder": "Type",
+                    "hint": "CIN / Trust Reg. No / Govt ID (if applicable)"
+                  },
+                  {
+                    "name": "country",
+                    "label": "Country of Incorporation",
+                    "type": "DROPDOWN",
+                    "subType": "SINGLE",
+                    "colSpan": 3,
+                    "required": true,
+                    "placeholder": "Select",
+                    "optionConfig": {
+                      "optionList": [
+                        { "label": "India", "code": "IN" },
+                        { "label": "USA", "code": "US" },
+                        { "label": "UK", "code": "UK" }
+                      ]
+                    }
+                  }
+                ]
+              },
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "profilePicture",
+                    "label": "Profile Picture",
+                    "type": "FILE_UPLOAD",
+                    "subType": "SINGLE",
+                    "colSpan": 3,
+                    "attachmentConfig": {
+                      "multiple": false,
+                      "maxSizeMB": 2,
+                      "accept": "image/*",
+                      "acceptLabel": "JPG, PNG, SVG (max 2 MB)"
+                    }
+                  },
+                  {
+                    "name": "website",
+                    "label": "Organization Website (Optional)",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "colSpan": 9,
+                    "placeholder": "Add your website link or LinkedIn profile",
+                    "hint": "Add your website link to automatically fetch your logo, powered by Clearbit."
+                  }
+                ]
+              }
+            ]
+          }
+        },
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Primary Contact",
+            "allowMulti": true,
+            "name": "contacts",
+            "children": [
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "contactName",
+                    "label": "Full Name",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "colSpan": 6,
+                    "required": true,
+                    "placeholder": "Enter the name"
+                  },
+                  {
+                    "name": "designation",
+                    "label": "Designation/Title",
+                    "type": "DROPDOWN",
+                    "subType": "SINGLE",
+                    "colSpan": 6,
+                    "required": true,
+                    "placeholder": "Select",
+                    "optionConfig": {
+                      "optionList": [
+                        { "label": "CEO", "code": "CEO" },
+                        { "label": "Manager", "code": "MANAGER" },
+                        { "label": "Other", "code": "OTHER" }
+                      ]
+                    }
+                  }
+                ]
+              },
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "email",
+                    "label": "Email Address",
+                    "type": "TEXT_INPUT",
+                    "subType": "EMAIL",
+                    "colSpan": 4,
+                    "required": true,
+                    "placeholder": "Enter your email address"
+                  },
+                  {
+                    "name": "phone",
+                    "label": "Phone Number",
+                    "type": "TEXT_INPUT",
+                    "subType": "PHONE",
+                    "colSpan": 4,
+                    "required": true,
+                    "placeholder": "+91 7007713990"
+                  },
+                  {
+                    "name": "communicationPreference",
+                    "label": "Communication Preference",
+                    "type": "RADIO",
+                    "subType": "SINGLE",
+                    "colSpan": 4,
+                    "required": true,
+                    "optionConfig": {
+                      "optionList": [
+                        { "label": "Email", "code": "EMAIL" },
+                        { "label": "Phone Number", "code": "PHONE" }
+                      ]
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }`,
+    // ──────────────────────────────────────────────────────────────────────────
+    // User Registration Form — Basic Details / Primary Address / User Role
+    // ──────────────────────────────────────────────────────────────────────────
+    userBasicDetailsForm: `{
+    "entityType": "USER_REGISTRATION",
+    "label": "User Registration",
+    "description": "Fill in your details to create a new account",
+    "formType": "SECTION",
+    "sectionConfig": {
+      "children": [
+
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Basic Details",
+            "name": "basicDetails",
+            "children": [
+
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "firstName",
+                    "label": "First Name",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "required": true,
+                    "placeholder": "Enter first name"
+                  },
+                  {
+                    "name": "lastName",
+                    "label": "Last Name",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "required": true,
+                    "placeholder": "Enter last name"
+                  }
+                ]
+              },
+
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "contactNo",
+                    "label": "Contact No",
+                    "type": "TEXT_INPUT",
+                    "subType": "PHONE",
+                    "required": true,
+                    "placeholder": "+91 9999999999",
+                    "hint": "Enter a valid 10-digit mobile number"
+                  },
+                  {
+                    "name": "emailId",
+                    "label": "Email ID",
+                    "type": "TEXT_INPUT",
+                    "subType": "EMAIL",
+                    "required": true,
+                    "placeholder": "example@domain.com"
+                  }
+                ]
+              },
+
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "loginId",
+                    "label": "Login / User ID",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "required": true,
+                    "placeholder": "Choose a unique login ID",
+                    "hint": "Alphanumeric, no spaces",
+                    "textConfig": {
+                      "length": { "min": 4, "max": 30 },
+                      "pattern": "^[a-zA-Z0-9_]+$",
+                      "patternMessage": "Only letters, numbers and underscores are allowed"
+                    }
+                  },
+                  {
+                    "name": "password",
+                    "label": "Password",
+                    "type": "TEXT_INPUT",
+                    "subType": "PASSWORD",
+                    "required": true,
+                    "placeholder": "Min. 8 characters",
+                    "hint": "Use at least 8 characters with letters and numbers",
+                    "textConfig": {
+                      "length": { "min": 8, "max": 64 }
+                    }
+                  },
+                  {
+                    "name": "confirmPassword",
+                    "label": "Confirm Password",
+                    "type": "TEXT_INPUT",
+                    "subType": "PASSWORD",
+                    "required": true,
+                    "placeholder": "Re-enter your password",
+                    "textConfig": {
+                      "matchField": "password"
+                    }
+                  }
+                ]
+              }
+
+            ]
+          }
+        },
+
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Primary Address",
+            "name": "primaryAddress",
+            "children": [
+
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "addressLine1",
+                    "label": "Address Line 1",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "required": true,
+                    "placeholder": "House / Flat No., Building, Street"
+                  },
+                  {
+                    "name": "addressLine2",
+                    "label": "Address Line 2",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "placeholder": "Area / Locality / Colony (optional)"
+                  }
+                ]
+              },
+
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "country",
+                    "label": "Country",
+                    "type": "DROPDOWN",
+                    "subType": "SINGLE",
+                    "required": true,
+                    "placeholder": "Select Country",
+                    "optionConfig": {
+                      "optionList": [
+                        { "label": "India", "code": "REGION_COUNTRY.INDIA" },
+                        { "label": "USA", "code": "REGION_COUNTRY.USA" }
+                      ]
+                    }
+                  },
+                  {
+                    "name": "state",
+                    "label": "State",
+                    "type": "DROPDOWN",
+                    "subType": "SINGLE",
+                    "required": true,
+                    "placeholder": "Select State",
+                    "optionConfig": {
+                      "apiUrl": "https://dev.platformcommons.org/ctld/api/globalrefdata/v1?refClass=GREF.REGION_STATE&parentRefClass=GREF.REGION_COUNTRY",
+                      "labelPath": "label",
+                      "valuePath": "dataCode",
+                      "dependencies": {
+                        "parentRefData": "country"
+                      }
+                    }
+                  },
+                  {
+                    "name": "city",
+                    "label": "City",
+                    "type": "DROPDOWN",
+                    "subType": "SINGLE",
+                    "required": true,
+                    "placeholder": "Select City",
+                    "optionConfig": {
+                      "apiUrl": "https://dev.platformcommons.org/ctld/api/globalrefdata/v1?refClass=GREF.REGION_DISTRICT&parentRefClass=GREF.REGION_STATE",
+                      "labelPath": "label",
+                      "valuePath": "dataCode",
+                      "dependencies": {
+                        "parentRefData": "state"
+                      }
+                    }
+                  }
+                ]
+              },
+
+              {
+                "type": "ROW",
+                "subType": "HORIZONTAL",
+                "children": [
+                  {
+                    "name": "block",
+                    "label": "Block / Taluka",
+                    "type": "DROPDOWN",
+                    "subType": "SINGLE",
+                    "placeholder": "Select Block",
+                    "optionConfig": {
+                      "apiUrl": "https://dev.platformcommons.org/ctld/api/globalrefdata/v1?refClass=GREF.REGION_BLOCK&parentRefClass=GREF.REGION_DISTRICT",
+                      "labelPath": "label",
+                      "valuePath": "dataCode",
+                      "dependencies": {
+                        "parentRefData": "city"
+                      }
+                    }
+                  },
+                  {
+                    "name": "pinCode",
+                    "label": "PIN Code",
+                    "type": "TEXT_INPUT",
+                    "subType": "SHORT",
+                    "required": true,
+                    "placeholder": "6-digit PIN code",
+                    "textConfig": {
+                      "length": { "min": 6, "max": 6 },
+                      "pattern": "^[0-9]{6}$",
+                      "patternMessage": "Enter a valid 6-digit PIN code"
+                    }
+                  }
+                ]
+              }
+
+            ]
+          }
+        },
+
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "User Role",
+            "name": "userRole",
+            "type": "ROW",
+            "subType": "HORIZONTAL",
+            "children": [
+              {
+                "name": "role",
+                "label": "User Role",
+                "type": "DROPDOWN",
+                "subType": "SINGLE",
+                "required": true,
+                "placeholder": "Select a role",
+                "optionConfig": {
+                  "apiUrl": "https://dev.platformcommons.org/gateway/commons-report-service/api/v1/datasets/name/VMS_GET_TENANT_ROLES/execute?params=TENANT_ID=1823",
+                  "labelPath": "roleName",
+                  "valuePath": "code"
+                }
+              },
+              {
+                "name": "reportingRole",
+                "label": "Reporting Role",
+                "type": "DROPDOWN",
+                "subType": "SINGLE",
+                "required": true,
+                "placeholder": "Select Reporting Role",
+                "optionConfig": {
+                  "apiUrl": "https://dev.platformcommons.org/ctld/api/rolehierarchy/v1?criteria=roleCode.code='{{userRole}}' and isActive=1&includeAttributes=id,parentRoleCode",
+                  "dataPath": "payload",
+                  "labelPath": "parentRoleCode",
+                  "valuePath": "parentRoleCode",
+                  "dependencies": {
+                    "userRole": "role"
+                  }
+                }
+              },
+              {
+                "name": "reportingManager",
+                "label": "Reporting Manager",
+                "type": "DROPDOWN",
+                "subType": "SINGLE",
+                "required": true,
+                "placeholder": "Select Reporting Manager",
+                "optionConfig": {
+                  "apiUrl": "https://dev.platformcommons.org/ctld/api/tenant/user/role/criteria/v1?criteria=role.code='{{reportingRole}}' and isActive=1 and user.isActive=1",
+                  "dataPath": "payload",
+                  "labelPath": "user.userName",
+                  "valuePath": "user.id",
+                  "dependencies": {
+                    "reportingRole": "reportingRole"
+                  }
+                }
+              }
+            ]
+          }
+        }
+
+      ]
+    }
+  }`,
+    // ──────────────────────────────────────────────────────────────────────────
+    // Document Upload Form — demonstrates the FILE_UPLOAD field type
+    // ──────────────────────────────────────────────────────────────────────────
+    documentUploadForm: `{
+    "entityType": "DOCUMENT_UPLOAD",
+    "label": "Documents",
+    "description": "Upload the required documents",
+    "formType": "SECTION",
+    "sectionConfig": {
+      "children": [
+        {
+          "type": "GROUP",
+          "subType": "SECTION",
+          "sectionConfig": {
+            "label": "Documents",
+            "name": "documents",
+            "children": [
+              {
+                "name": "profilePicture",
+                "label": "Profile Picture",
+                "type": "FILE_UPLOAD",
+                "subType": "SINGLE",
+                "required": true,
+                "attachmentConfig": {
+                  "multiple": false,
+                  "maxSizeMB": 5,
+                  "accept": ".jpg,.jpeg,.png,.webp,image/*",
+                  "acceptLabel": "JPG, PNG, WEBP"
+                }
+              },
+              {
+                "name": "certificates",
+                "label": "Certificates",
+                "type": "FILE_UPLOAD",
+                "subType": "MULTIPLE",
+                "attachmentConfig": {
+                  "multiple": true,
+                  "maxFiles": 5,
+                  "maxSizeMB": 10,
+                  "accept": ".pdf,.doc,.docx,.jpg,.jpeg,.png",
+                  "acceptLabel": "PDF, DOCX, JPG, PNG"
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }`,
+    // Demand Definition Form (matching user request image)
+    demandDefinitionForm: `{
+    "entityType": "DEMAND",
+    "label": "Demand Definition",
+    "formType": "SECTION",
+    "sectionConfig": {
+      "children": [
+        {
+          "type": "ROW",
+          "subType": "HORIZONTAL",
+          "children": [
+            {
+              "name": "beneficiaries",
+              "label": "Required Beneficiaries",
+              "type": "NUMBER_INPUT",
+              "subType": "INTEGER",
+              "required": true,
+              "suffix": "Students",
+              "placeholder": "0",
+              "numberConfig": { "min": 0 }
+            },
+            {
+              "name": "deliveryModel",
+              "label": "Preferred Delivery Model",
+              "type": "DROPDOWN",
+              "subType": "SINGLE",
+              "required": true,
+              "placeholder": "Select",
+              "optionConfig": {
+                "optionList": [
+                  { "label": "Onsite Delivery", "code": "ONSITE" },
+                  { "label": "Hybrid Model", "code": "HYBRID" }
+                ]
+              }
+            }
+          ]
+        },
+        {
+          "type": "ROW",
+          "subType": "HORIZONTAL",
+          "children": [
+            {
+              "name": "minAge",
+              "label": "Min Target Age",
+              "type": "NUMBER_INPUT",
+              "subType": "INTEGER",
+              "required": true,
+              "placeholder": "0",
+              "numberConfig": { "min": 0, "max": 100 },
+              "onValidate": "!maxAge || minAge <= maxAge",
+              "errorMessage": "Min Age cannot be greater than Max Age"
+            },
+            {
+              "name": "maxAge",
+              "label": "Max Target Age",
+              "type": "NUMBER_INPUT",
+              "subType": "INTEGER",
+              "required": true,
+              "placeholder": "100",
+              "numberConfig": { "min": 0, "max": 100 },
+              "onValidate": "!minAge || maxAge >= minAge",
+              "errorMessage": "Max Age cannot be less than Min Age"
+            }
+          ]
+        },
+        {
+          "type": "ROW",
+          "subType": "HORIZONTAL",
+          "children": [
+            {
+              "name": "male",
+              "label": "Male Split (%)",
+              "type": "NUMBER_INPUT",
+              "subType": "INTEGER",
+              "required": true,
+              "suffix": "%",
+              "placeholder": "50",
+              "numberConfig": { "min": 0, "max": 100 },
+              "onValidate": "(male || 0) + (female || 0) === 100",
+              "errorMessage": "Male + Female % must equal 100%"
+            },
+            {
+              "name": "female",
+              "label": "Female Split (%)",
+              "type": "NUMBER_INPUT",
+              "subType": "INTEGER",
+              "required": true,
+              "suffix": "%",
+              "placeholder": "50",
+              "numberConfig": { "min": 0, "max": 100 },
+              "onValidate": "(male || 0) + (female || 0) === 100",
+              "errorMessage": "Male + Female % must equal 100%"
+            }
+          ]
+        }
+      ]
+    }
+  }`,
+    // Project Info Form (matching user request image)
+    // Project Form (Combined Info + Demand)
+    projectInfoForm: `{
+    "entityType": "PROJECT",
+    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.TITLE",
+    "formType": "SECTION",
+    "sectionConfig": {
+        "children": [
+            {
+                "type": "GROUP",
+                "subType": "SECTION",
+                "sectionConfig": {
+                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.SECTION.INFO",
+                    "children": [
+                        {
+                            "type": "ROW",
+                            "subType": "HORIZONTAL",
+                            "children": [
+                                {
+                                    "name": "projectName",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.NAME.LABEL",
+                                    "placeholder": "UI_PLAYGROUND.SMART_FORM.PROJECT.NAME.PH",
+                                    "type": "TEXT_INPUT",
+                                    "subType": "SHORT",
+                                    "required": true,
+                                    "colSpan": 6
+                                },
+                                {
+                                    "name": "programId",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.PROG_ID.LABEL",
+                                    "type": "TEXT_INPUT",
+                                    "subType": "SHORT",
+                                    "defaultValue": "DLP-24-L1",
+                                    "readonly": true,
+                                    "colSpan": 6
+                                }
+                            ]
+                        },
+                        {
+                            "type": "ROW",
+                            "subType": "HORIZONTAL",
+                            "children": [
+                                {
+                                    "name": "linkedProgram",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.LINKED_PROG.LABEL",
+                                    "type": "TEXT_INPUT",
+                                    "subType": "SHORT",
+                                    "defaultValue": "National Skills Initiative",
+                                    "readonly": true,
+                                    "colSpan": 4
+                                },
+                                {
+                                    "name": "linkedContract",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.LINKED_CONTRACT.LABEL",
+                                    "type": "TEXT_INPUT",
+                                    "subType": "SHORT",
+                                    "defaultValue": "NSI-Gov-Oct23",
+                                    "readonly": true,
+                                    "colSpan": 4
+                                },
+                                {
+                                    "name": "assignedDistrict",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.DISTRICT.LABEL",
+                                    "type": "TEXT_INPUT",
+                                    "subType": "SHORT",
+                                    "defaultValue": "Bangalore Rural",
+                                    "readonly": true,
+                                    "colSpan": 4
+                                }
+                            ]
+                        }
+                    ]
+                }
+            },
+            {
+                "type": "GROUP",
+                "subType": "SECTION",
+                "sectionConfig": {
+                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.SECTION.DEMAND",
+                    "children": [
+                        {
+                            "type": "ROW",
+                            "subType": "HORIZONTAL",
+                            "children": [
+                                {
+                                    "name": "requiredBeneficiaries",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.BENEFICIARIES.LABEL",
+                                    "placeholder": "UI_PLAYGROUND.SMART_FORM.PROJECT.BENEFICIARIES.PH",
+                                    "type": "NUMBER_INPUT",
+                                    "subType": "INTEGER",
+                                    "required": true,
+                                    "colSpan": 6,
+                                    "numberConfig": {
+                                        "min": 1
+                                    }
+                                },
+                                {
+                                    "name": "deliveryModel",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.DELIVERY_MODEL.LABEL",
+                                    "type": "DROPDOWN",
+                                    "subType": "SINGLE",
+                                    "required": true,
+                                    "colSpan": 6,
+                                    "optionConfig": {
+                                        "optionList": [
+                                            {
+                                                "label": "UI_PLAYGROUND.OPTION.IN_PERSON",
+                                                "code": "IN_PERSON"
+                                            },
+                                            {
+                                                "label": "UI_PLAYGROUND.OPTION.HYBRID",
+                                                "code": "HYBRID"
+                                            },
+                                            {
+                                                "label": "UI_PLAYGROUND.OPTION.ONLINE",
+                                                "code": "ONLINE"
+                                            }
+                                        ]
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            "type": "ROW",
+                            "subType": "HORIZONTAL",
+                            "children": [
+                                {
+                                    "name": "minAge",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.AGE_MIN.LABEL",
+                                    "type": "NUMBER_INPUT",
+                                    "subType": "INTEGER",
+                                    "required": true,
+                                    "placeholder": "UI_PLAYGROUND.SMART_FORM.PROJECT.AGE_MIN.LABEL",
+                                    "numberConfig": {
+                                        "min": 0,
+                                        "max": 100
+                                    },
+                                    "onValidate": "!maxAge || minAge <= maxAge",
+                                    "errorMessage": "UI_PLAYGROUND.SMART_FORM.PROJECT.AGE_MIN.ERR"
+                                },
+                                {
+                                    "name": "maxAge",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.AGE_MAX.LABEL",
+                                    "type": "NUMBER_INPUT",
+                                    "subType": "INTEGER",
+                                    "required": true,
+                                    "placeholder": "UI_PLAYGROUND.SMART_FORM.PROJECT.AGE_MAX.LABEL",
+                                    "numberConfig": {
+                                        "min": 0,
+                                        "max": 100
+                                    },
+                                    "onValidate": "!minAge || maxAge >= minAge",
+                                    "errorMessage": "UI_PLAYGROUND.SMART_FORM.PROJECT.AGE_MAX.ERR"
+                                }
+                            ]
+                        },
+                        {
+                            "type": "ROW",
+                            "subType": "HORIZONTAL",
+                            "children": [
+                                {
+                                    "name": "maleSplit",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.MALE.LABEL",
+                                    "type": "NUMBER_INPUT",
+                                    "subType": "INTEGER",
+                                    "required": true,
+                                    "suffix": "%",
+                                    "placeholder": "UI_PLAYGROUND.SMART_FORM.PROJECT.MALE.LABEL",
+                                    "numberConfig": {
+                                        "min": 0,
+                                        "max": 100
+                                    },
+                                    "onValidate": "(maleSplit || 0) + (femaleSplit || 0) === 100",
+                                    "errorMessage": "UI_PLAYGROUND.SMART_FORM.PROJECT.GENDER_SPLIT.ERR"
+                                },
+                                {
+                                    "name": "femaleSplit",
+                                    "label": "UI_PLAYGROUND.SMART_FORM.PROJECT.FEMALE.LABEL",
+                                    "type": "NUMBER_INPUT",
+                                    "subType": "INTEGER",
+                                    "required": true,
+                                    "suffix": "%",
+                                    "placeholder": "UI_PLAYGROUND.SMART_FORM.PROJECT.FEMALE.LABEL",
+                                    "numberConfig": {
+                                        "min": 0,
+                                        "max": 100
+                                    },
+                                    "onValidate": "(maleSplit || 0) + (femaleSplit || 0) === 100",
+                                    "errorMessage": "UI_PLAYGROUND.SMART_FORM.PROJECT.GENDER_SPLIT.ERR"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+}
+  `,
 };
 
 var smartForm_examples = /*#__PURE__*/Object.freeze({
@@ -5892,5 +7402,5 @@ var smartForm_examples = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SmartFormComponent, SmartFormController, smartForm_examples as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem };
+export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SmartFormComponent, SmartFormController, smartForm_examples as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
 //# sourceMappingURL=commons-shared-web-ui.mjs.map